/* MOBILE SAFETY - kill all horizontal page-scroll regardless of overflow */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100vw;width:100%;position:relative}

img,video,iframe,svg,picture{max-width:100%;height:auto}
*{min-width:0}
/* Prevent long words/URLs from breaking out */
p,h1,h2,h3,h4,h5,h6,li,td,th,a{overflow-wrap:break-word;word-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
/* Containers respect viewport always */
.container{max-width:min(var(--container),100% - 32px)}
@media(max-width:600px){.container{padding-left:18px;padding-right:18px}}
/* {{BEDRIJFSNAAM}} - Production CSS */
:root {
  --brand-dark:#08080E; --brand-darker:#040408; --charcoal:#0E0E18; --charcoal-soft:#181825;
  --bronze:#6C63FF; --bronze-light:#8B84FF; --bronze-dark:#4A42DD;
  --cream:#F5F5FA; --paper:#FBFBFE; --walnut:#181825; --oak:#6C63FF;
  --bg:#ffffff; --bg-alt:#F1F0FB; --bg-dark:var(--brand-dark);
  --text:#3D4145;          /* body text - subtle gray, not pure black */ --text-soft:#4a4543; --text-muted:#7a716a;
  --border:#e8e1d4; --border-soft:#f0e9dc;
  --shadow-sm:0 1px 2px rgba(37,42,45,.04),0 1px 3px rgba(37,42,45,.06);
  --shadow:0 4px 6px rgba(37,42,45,.04),0 10px 25px rgba(37,42,45,.07);
  --shadow-lg:0 10px 15px rgba(37,42,45,.06),0 25px 50px rgba(37,42,45,.12);
  --shadow-xl:0 25px 50px rgba(37,42,45,.18),0 40px 80px rgba(37,42,45,.14);
  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --font-heading:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.19,1,.22,1); --ease-out:cubic-bezier(.22,1,.36,1);
  --duration:1400ms; --duration-fast:300ms; --duration-med:600ms; --stagger:220ms;
  --container: 1200px; --gutter:24px; --section-y:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--brand-dark);margin:0 0 .5em}
h1{font-size:clamp(38px,5.6vw,72px)}
h2{font-size:clamp(30px,3.8vw,48px)}
h3{font-size:clamp(22px,2.4vw,30px)}
h4{font-size:clamp(18px,1.6vw,22px);font-weight:700}
p{margin:0 0 1em;color:var(--text-soft)}
.eyebrow{display:inline-block;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--bronze-dark);margin-bottom:14px}
.eyebrow::before{content:'';display:inline-block;width:28px;height:1px;background:var(--bronze);vertical-align:middle;margin-right:12px}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
section{padding-top:var(--section-y);padding-bottom:var(--section-y);position:relative}
section.alt{background:var(--bg-alt)}
section.dark{background:var(--charcoal);color:var(--cream)}
section.dark h1,section.dark h2,section.dark h3{color:var(--cream)}
section.dark p{color:rgba(247,245,242,.75)}
section.dark .eyebrow{color:var(--bronze-light)}
section.dark .eyebrow::before{background:var(--bronze)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;font-family:var(--font-heading);font-weight:700;font-size:15px;letter-spacing:.3px;border-radius:var(--r-pill);transition:transform .25s var(--ease),background-color .25s,color .25s,box-shadow .25s;white-space:nowrap;min-height:48px}
.btn-primary{background:var(--brand-dark);color:var(--cream);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--bronze-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-accent{background:var(--bronze);color:var(--brand-dark)}
.btn-accent:hover{background:var(--bronze-light);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent;color:var(--brand-dark);border:1.5px solid var(--brand-dark)}
.btn-ghost:hover{background:var(--brand-dark);color:var(--cream);transform:translateY(-2px)}
.btn-light{background:var(--cream);color:var(--brand-dark)}
.btn-light:hover{background:var(--bronze);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-outline-light{background:transparent;color:var(--cream);border:1.5px solid var(--cream)}
.btn-outline-light:hover{background:var(--cream);color:var(--brand-dark);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--bronze-dark);border:1.5px solid var(--bronze)}
.btn-outline:hover{background:var(--bronze);color:var(--brand-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn svg{width:16px;height:16px}
.btn-arrow svg{transition:transform .25s var(--ease)}
.btn-arrow:hover svg{transform:translateX(4px)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;transition:background-color .35s,backdrop-filter .35s,padding .25s,box-shadow .35s}
.nav.scrolled{padding:12px 24px}
.nav-inner{width:100%;max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:44px;width:auto}
/* Logo swap based on nav state */
.nav-logo .logo-on-light{display:none}
.nav-logo .logo-on-dark{display:block}
.nav.scrolled .nav-logo .logo-on-light{display:block}
.nav.scrolled .nav-logo .logo-on-dark{display:none}

.nav-links{display:flex;gap:30px;list-style:none;padding:0;margin:0}
.nav-links a{position:relative;font-family:var(--font-heading);font-weight:600;font-size:15px;color:var(--brand-dark);padding:8px 0;transition:color .2s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--bronze);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--bronze-dark)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--brand-dark);transition:all .25s var(--ease)}
.nav-phone svg{width:16px;height:16px;color:var(--bronze-dark)}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r);background:transparent}
.nav-burger span{position:relative;width:22px;height:2px;background:var(--brand-dark);transition:background-color .2s}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--brand-dark);transition:transform .3s var(--ease)}
.nav-burger span::before{top:-7px}
.nav-burger span::after{top:7px}
.nav-burger.open span{background:transparent}
.nav-burger.open span::before{transform:translateY(7px) rotate(45deg)}
.nav-burger.open span::after{transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;top:0;right:0;width:min(360px,100%);height:100vh;z-index:99;background:var(--bg);padding:100px 32px 32px;transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto;box-shadow:var(--shadow-xl)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu ul{list-style:none;padding:0;margin:0}
.mobile-menu li{border-bottom:1px solid var(--border-soft)}
.mobile-menu a{display:block;padding:18px 0;font-family:var(--font-heading);font-weight:700;font-size:18px;color:var(--brand-dark)}
.mobile-menu .btn{width:100%;margin-top:24px}
.mobile-menu-overlay{position:fixed;inset:0;z-index:98;background:rgba(37,42,45,.5);opacity:0;pointer-events:none;transition:opacity .35s}
.mobile-menu-overlay.show{opacity:1;pointer-events:auto}

/* HERO */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:var(--brand-darker);color:var(--cream)}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hero-slide.active{opacity:1}
.hero-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.0);clip-path:inset(0 100% 0 0)}
.hero-slide.active .hero-slide-bg{animation:kenburns 9s cubic-bezier(.4,0,.2,1) forwards,mask-reveal 1.2s var(--ease) forwards}
@keyframes kenburns{0%,18%{transform:scale(1.0)}100%{transform:scale(1.05)}}
@keyframes hsZoom{0%,18%{transform:scale(1.0)}100%{transform:scale(1.06)}}
@keyframes mask-reveal{to{clip-path:inset(0 0 0 0)}}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.78) 40%,rgba(10,10,10,.45) 75%,rgba(10,10,10,.35) 100%),linear-gradient(180deg,rgba(10,10,10,.35) 0%,transparent 25%,transparent 60%,rgba(10,10,10,.55) 100%)}
.hero-content{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 24px;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-heading);font-weight:600;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--bronze-light);margin-bottom:24px;opacity:0;transform:translateX(-80px);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.hero-eyebrow::before{content:'';width:36px;height:1.5px;background:var(--bronze)}
.hero h1{color:var(--cream);margin-bottom:24px;max-width:920px;opacity:0;transform:translateX(-80px);text-shadow:0 2px 30px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.9)}
.hero-subline{font-size:clamp(17px,1.4vw,20px);color:rgba(247,245,242,.92);max-width:640px;margin-bottom:40px;opacity:0;transform:translateX(-80px);text-shadow:0 1px 16px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.6)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;opacity:0;transform:translateX(-80px)}
.hero-slide.active .hero-eyebrow{animation:slide-in var(--duration) var(--ease) .1s forwards}
.hero-slide.active h1{animation:slide-in var(--duration) var(--ease) .25s forwards}
.hero-slide.active .hero-subline{animation:slide-in var(--duration) var(--ease) .45s forwards}
.hero-slide.active .hero-ctas{animation:slide-in var(--duration) var(--ease) .65s forwards}
@keyframes slide-in{to{opacity:1;transform:translateX(0)}}
.hero-dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:3}
.hero-dot{width:36px;height:3px;border-radius:2px;background:rgba(247,245,242,.3);transition:background-color .3s;cursor:pointer}
.hero-dot.active{background:var(--bronze)}
.hero-dot:hover{background:rgba(247,245,242,.55)}

/* SUBHERO */
.subhero{position:relative;height:62vh;min-height:480px;max-height:680px;display:flex;align-items:flex-end;overflow:hidden;margin-top:80px;background:var(--brand-darker)}
.subhero-bg{position:absolute;inset:0;background-size:cover;background-position:center 42%;animation:kenburns 18s ease-out forwards}
.subhero::before{content:'';position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.65) 60%,rgba(10,10,10,.45) 100%);z-index:1}
.subhero-content{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 24px 44px;width:100%}
.breadcrumb{font-family:var(--font-heading);font-size:13px;font-weight:500;color:var(--bronze-light);margin-bottom:30px;letter-spacing:.5px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.breadcrumb a{color:var(--bronze-light)}
.breadcrumb a:hover{color:var(--cream)}
.breadcrumb .sep{margin:0 10px;opacity:.5}
.subhero h1{color:var(--cream);margin-bottom:14px;max-width:920px;font-size:clamp(34px,4.4vw,60px);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.subhero-sub{color:rgba(247,245,242,.92);font-size:clamp(16px,1.2vw,19px);max-width:720px;text-shadow:0 1px 16px rgba(0,0,0,.6)}

/* INTRO */
.intro-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.usp-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.usp-list li{display:flex;align-items:flex-start;gap:16px;padding:18px 22px;background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.usp-list li:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--bronze)}
.usp-list .check{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--bronze);display:flex;align-items:center;justify-content:center;color:var(--brand-dark);margin-top:2px}
.usp-list .check svg{width:14px;height:14px}
.usp-list strong{display:block;color:var(--brand-dark);margin-bottom:2px;font-family:var(--font-heading);font-size:16px}
.usp-list span{color:var(--text-soft);font-size:14.5px}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{position:relative;padding:36px 32px;background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-top:3px solid var(--bronze);padding-top:34px}
.why-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand-dark),var(--charcoal));color:var(--bronze);border-radius:var(--r);margin-bottom:20px}
.why-icon svg{width:28px;height:28px}
.why-card h3{font-size:20px;margin-bottom:10px}
.why-card p{font-size:15.5px;margin:0}

/* TICKER */
.ticker{background:var(--charcoal);padding:32px 0;overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--charcoal),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--charcoal),transparent)}
.ticker-track{display:flex;gap:56px;animation:ticker-scroll 60s linear infinite;width:max-content}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-heading);font-weight:700;font-size:22px;letter-spacing:-.5px;color:var(--cream);white-space:nowrap}
.ticker-item .dot{width:6px;height:6px;border-radius:50%;background:var(--bronze);flex-shrink:0}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* DIENSTEN CARDS */
.diensten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dienst-card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);border:1px solid var(--border-soft);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.dienst-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--bronze)}
.dienst-card-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.dienst-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.dienst-card:hover .dienst-card-img img{transform:scale(1.08)}
.dienst-card-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.dienst-card h3{font-size:22px;margin-bottom:8px;transition:color .2s}
.dienst-card:hover h3{color:var(--bronze-dark)}
.dienst-card p{font-size:15px;margin-bottom:20px;flex:1}
.dienst-card-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--brand-dark);letter-spacing:.3px}
.dienst-card-link::after{content:'→';transition:transform .25s var(--ease)}
.dienst-card:hover .dienst-card-link::after{transform:translateX(5px)}

/* WERKWIJZE */
.werkwijze{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative}
.werkwijze::before{content:'';position:absolute;top:36px;left:10%;right:10%;height:2px;background:var(--border);z-index:0}
.werk-step{position:relative;z-index:1;text-align:center;padding:0 8px}
.werk-num{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--bg);border:2px solid var(--bronze);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:28px;color:var(--bronze-dark);box-shadow:0 0 0 6px var(--bg);transition:transform .3s var(--ease),background-color .3s,color .3s}
.werk-step:hover .werk-num{transform:scale(1.08);background:var(--bronze);color:var(--brand-dark)}
.werk-step h4{margin-bottom:6px;font-size:17px}
.werk-step p{font-size:14.5px;margin:0}

/* PROJECTEN */
.projecten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.project-card{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;aspect-ratio:4/3;background:var(--brand-dark);transition:transform .35s var(--ease),box-shadow .35s}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.project-card:hover img{transform:scale(1.08)}
.project-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(26,29,31,.88) 0%,rgba(26,29,31,.25) 50%,rgba(26,29,31,0) 80%)}
.project-meta{position:absolute;bottom:0;left:0;right:0;z-index:2;color:var(--cream);padding:40px 24px 22px;background:linear-gradient(to top,rgba(20,22,24,.9) 0%,rgba(20,22,24,.55) 55%,rgba(20,22,24,0) 100%)}
.project-meta h3{color:var(--cream);font-size:22px;margin-bottom:4px;text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.55)}
.project-meta .loc{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--bronze-light);font-family:var(--font-heading);font-weight:600;letter-spacing:.3px}
.project-meta .loc svg{width:13px;height:13px}

/* TIPS */
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tip-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.tip-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--bronze)}
.tip-img{aspect-ratio:16/10;overflow:hidden}
.tip-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tip-card:hover .tip-img img{transform:scale(1.08)}
.tip-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.tip-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-size:12.5px;font-weight:600;color:var(--text-muted);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:12px}
.tip-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--bronze)}
.tip-card h3{font-size:21px;margin-bottom:8px;line-height:1.25}
.tip-card p{font-size:15px;margin-bottom:18px;flex:1}
.tip-card .read-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--bronze-dark)}

/* REVIEWS */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:32px 28px 28px;position:relative;box-shadow:var(--shadow-sm)}
.review-stars{display:flex;gap:3px;margin-bottom:16px;color:#ecb43c}
.review-stars svg{width:18px;height:18px;fill:currentColor}
.review-text{font-size:16px;color:var(--text-soft);margin-bottom:24px;line-height:1.65}
.review-author{display:flex;align-items:center;gap:14px;border-top:1px solid var(--border-soft);padding-top:18px}
.review-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.review-author strong{display:block;font-family:var(--font-heading);font-size:15px;color:var(--brand-dark)}
.review-author span{font-size:13px;color:var(--text-muted)}

/* OFFERTE */
.offerte-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.offerte-info h2{margin-bottom:20px}
.offerte-usp{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:18px}
.offerte-usp li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;color:var(--text-soft)}
.offerte-usp .check{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--bronze);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-top:2px}
.offerte-usp .check svg{width:12px;height:12px}
.offerte-form{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-family:var(--font-heading);font-weight:600;font-size:13.5px;color:var(--brand-dark);margin-bottom:8px;letter-spacing:.2px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--bg);font-size:15px;transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:0;border-color:var(--bronze);box-shadow:0 0 0 4px color-mix(in srgb, var(--bronze) 15%, transparent)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group select{cursor:pointer}
.form-group .err{display:none;color:#c0392b;font-size:13px;margin-top:6px}
.form-group.invalid input,.form-group.invalid textarea,.form-group.invalid select{border-color:#c0392b}
.form-group.invalid .err{display:block}
.radio-group{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.radio-group label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid var(--border);border-radius:var(--r-pill);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}
.radio-group input{display:none}
.radio-group input:checked + label,.radio-group label.checked{background:var(--brand-dark);color:var(--cream);border-color:var(--brand-dark)}
.form-group small{display:block;color:var(--text-muted);font-size:12.5px;margin-top:6px}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:24px 4px;text-align:left;font-family:var(--font-heading);font-weight:700;font-size:17px;color:var(--brand-dark);transition:color .2s}
.faq-q:hover{color:var(--bronze-dark)}
.faq-icon{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),background-color .25s}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--brand-dark);transition:transform .35s var(--ease)}
.faq-icon{position:relative}
.faq-icon::before{width:12px;height:1.5px}
.faq-icon::after{width:1.5px;height:12px}
.faq-item.open .faq-icon{background:var(--bronze);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 4px 24px;color:var(--text-soft);font-size:15.5px;line-height:1.7}

/* FAQ-blok binnen de donkere contact-sectie (boven 'Wij informeren u graag') */
.hp-faq-block{
  background:var(--bg-dark-alt);
  border-radius:24px;
  padding:44px 38px 30px;
  margin-top:32px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.06);
}
.hp-faq-block .section-header{text-align:left;max-width:none;margin:0 0 18px}
.hp-faq-block .section-header .eyebrow{color:var(--bronze-light);margin-bottom:8px}
.hp-faq-block .section-header h2{font-family:var(--font-heading);font-weight:800;font-size:32px;letter-spacing:-.02em;color:#fff;margin:0}
.hp-faq-block .faq{max-width:none;margin:0}
.hp-faq-block .faq-item{border-bottom:1px solid rgba(255,255,255,.1)}
.hp-faq-block .faq-q{color:#fff}
.hp-faq-block .faq-q:hover{color:var(--bronze-light)}
.hp-faq-block .faq-icon{background:rgba(255,255,255,.1)}
.hp-faq-block .faq-icon::before,.hp-faq-block .faq-icon::after{background:#fff}
.hp-faq-block .faq-item.open .faq-icon{background:var(--bronze)}
.hp-faq-block .faq-item.open .faq-icon::before,.hp-faq-block .faq-item.open .faq-icon::after{background:var(--brand-dark)}
.hp-faq-block .faq-a-inner{color:rgba(255,255,255,.78)}
@media(max-width:900px){.hp-faq-block{padding:32px 22px 22px}.hp-faq-block .section-header h2{font-size:26px}}

/* CTA BAND */
.cta-band{position:relative;padding:80px 0;background:var(--bg);color:var(--brand-dark);overflow:hidden;border-top:1px solid rgba(37,42,45,.06);border-bottom:1px solid rgba(37,42,45,.06)}
.cta-band::before{content:none}
.cta-band-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:32px}
.cta-band h2{color:var(--brand-dark);margin-bottom:8px}
.cta-band p{color:var(--text);margin:0;font-size:17px}
.cta-band .btn-group{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* On the now-light cta-band, the secondary "phone" button used btn-outline-light
   which is meant for dark bg. Restyle it locally so it stays visible. */
.cta-band .btn-outline-light{
  background:transparent !important;
  color:var(--brand-dark) !important;
  border:2px solid var(--brand-dark) !important;
}
.cta-band .btn-outline-light:hover{
  background:var(--brand-dark) !important;
  color:var(--cream) !important;
}

/* FOOTER */
.footer{background:#0A0B0C;color:rgba(247,245,242,.78);padding:80px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px}
.footer-logo{display:inline-block;margin-bottom:40px}
.footer-logo img{height:50px}
.footer-naw{font-size:14.5px;line-height:1.75;color:rgba(247,245,242,.82);margin-bottom:20px}
.footer-naw strong{color:var(--cream);font-family:var(--font-heading);display:block;margin-bottom:4px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,245,242,.28);display:flex;align-items:center;justify-content:center;color:rgba(247,245,242,.82);transition:background-color .2s,color .2s,border-color .2s}
.footer-social a:hover{background:var(--bronze);color:var(--brand-dark);border-color:var(--bronze)}
.footer-social svg{width:16px;height:16px}
.footer-col h4{font-family:var(--font-heading);color:var(--cream);font-size:15px;font-weight:700;margin-bottom:18px;letter-spacing:.3px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:10px}
.footer-col a{font-size:14.5px;color:rgba(247,245,242,.82);transition:color .2s}
.footer-col a:hover{color:var(--bronze-light)}
.footer-col .contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:14.5px}
.footer-col .contact-item svg{width:14px;height:14px;color:var(--bronze);flex-shrink:0;margin-top:5px}
.footer-bottom{border-top:1px solid rgba(247,245,242,.14);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13.5px;color:rgba(247,245,242,.78)}
.footer-bottom a{color:rgba(247,245,242,.85)}
.footer-bottom a:hover{color:var(--bronze-light)}

/* WHATSAPP WIDGET */
.wa-widget{position:fixed;bottom:24px;right:24px;z-index:9999}
.wa-btn{display:flex;align-items:center;justify-content:center;background:#25D366;border-radius:50%;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .28s var(--ease),box-shadow .28s}
.wa-btn svg{width:44px;height:44px;fill:#fff}
.wa-btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.wa-tooltip{position:absolute;right:72px;top:50%;transform:translateY(-50%);background:var(--brand-dark);color:var(--cream);padding:10px 14px;border-radius:var(--r);font-size:13px;font-family:var(--font-heading);font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--shadow)}
.wa-tooltip::after{content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--brand-dark)}
.wa-widget:hover .wa-tooltip{opacity:1;transform:translateY(-50%) translateX(-4px)}

/* LANG SWITCHER */
.lang{position:fixed;bottom:24px;left:24px;z-index:9999;font-family:var(--font-heading)}
.lang-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--r-pill);box-shadow:var(--shadow);font-weight:700;font-size:14px;color:var(--brand-dark);transition:transform .2s,box-shadow .2s}
.lang-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.lang-flag{font-size:18px;line-height:1}
.lang-arrow{margin-left:2px;transition:transform .25s}
.lang.open .lang-arrow{transform:rotate(180deg)}
.lang-dropdown{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:8px;min-width:200px;display:none;border:1px solid var(--border-soft)}
.lang.open .lang-dropdown{display:block;animation:lang-fade .2s ease}
@keyframes lang-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lang-option{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:600;color:var(--brand-dark);text-align:left;transition:background-color .15s}
.lang-option:hover{background:var(--bg-alt)}
.lang-option.active{background:var(--bronze);color:var(--brand-dark)}
.lang-option .lang-code{margin-left:auto;font-size:11px;color:var(--text-muted);letter-spacing:1px}
.lang-option.active .lang-code{color:var(--brand-dark);opacity:.7}

/* SUBPAGE CONTENT */
.content-2col{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.content-2col.reverse{grid-template-columns:1fr 1.05fr}
.content-2col.reverse .content-text{order:2}
.content-2col.reverse .content-img{order:1}
.content-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.content-img img{width:100%;height:100%;object-fit:cover}
.content-text h2{margin-bottom:16px}
.content-text p{font-size:16.5px;line-height:1.75}
.feature-list{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}
.feature-list li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--text-soft)}
.feature-list .check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--bronze);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-top:2px}
.feature-list .check svg{width:11px;height:11px}

/* PROJECT GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-auto-flow:dense;grid-auto-rows:300px}
.gallery-item{border-radius:var(--r);overflow:hidden;cursor:pointer;background:var(--brand-dark)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery-item:hover img{transform:scale(1.05)}
.gallery-item.span2{grid-column:span 2}
.gallery-item.span3{grid-column:span 3}

.project-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0}
.stat{padding:24px;background:var(--bg-alt);border-radius:var(--r-lg);text-align:center}
.stat .num{display:block;font-family:var(--font-heading);font-weight:800;font-size:32px;color:var(--bronze-dark);margin-bottom:6px}
.stat .label{font-size:14px;color:var(--text-muted);font-family:var(--font-heading);font-weight:600;text-transform:uppercase;letter-spacing:1px}

.project-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px;background:var(--bg-alt);border-radius:var(--r-lg);margin-bottom:48px}
.project-meta-grid .item{}
.project-meta-grid .item small{display:block;font-family:var(--font-heading);font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px}
.project-meta-grid .item strong{font-family:var(--font-heading);font-size:17px;color:var(--brand-dark)}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.contact-info-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow)}
.contact-info-card h3{margin-bottom:20px}
.contact-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border-soft)}
.contact-row:last-child{border-bottom:0}
.contact-row .icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;color:var(--bronze-dark)}
.contact-row .icon svg{width:18px;height:18px}
.contact-row strong{display:block;font-family:var(--font-heading);font-size:14px;color:var(--brand-dark);margin-bottom:2px}
.contact-row span,.contact-row a{color:var(--text-soft);font-size:15px}
.contact-row a:hover{color:var(--bronze-dark)}
.map-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);height:480px;background:var(--bg-alt)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* OVER ONS / TIMELINE */
.timeline{position:relative;padding-left:40px;max-width:780px;margin:48px auto}
.timeline::before{content:'';position:absolute;left:14px;top:8px;bottom:8px;width:2px;background:var(--border)}
.tl-item{position:relative;padding-bottom:36px}
.tl-item::before{content:'';position:absolute;left:-30px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--bronze);box-shadow:0 0 0 4px var(--bg)}
.tl-item .year{font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--bronze-dark);margin-bottom:6px;letter-spacing:.5px}
.tl-item h4{margin-bottom:6px;font-size:18px}
.tl-item p{margin:0;font-size:15px}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-card{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-lg);padding:32px 28px;text-align:left}
.value-card .icon{width:48px;height:48px;border-radius:var(--r);background:var(--bg-alt);color:var(--bronze-dark);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.value-card .icon svg{width:24px;height:24px}
.value-card h4{margin-bottom:8px;font-size:18px}
.value-card p{margin:0;font-size:15px}

/* TIPS DETAIL */
.article-content{max-width:780px;margin:0 auto}
.article-content h2{margin-top:48px;margin-bottom:16px;font-size:28px}
.article-content h3{margin-top:32px;margin-bottom:12px;font-size:22px}
.article-content p{font-size:17px;line-height:1.8;color:var(--text-soft)}
.article-content blockquote{border-left:3px solid var(--bronze);padding:16px 24px;margin:32px 0;background:var(--bg-alt);border-radius:0 var(--r) var(--r) 0;font-style:italic;color:var(--text);font-size:18px}
.article-content img{border-radius:var(--r-lg);margin:32px 0;width:100%;height:auto}
.article-meta{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-soft);font-size:14px;color:var(--text-muted)}
.article-meta .author{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:600;color:var(--brand-dark)}
.article-meta .author img{width:32px;height:32px;border-radius:50%}

/* OFFERTE PAGE */
.offerte-page-form{background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--r-xl);padding:48px;box-shadow:var(--shadow-lg);max-width:880px;margin:0 auto}
.offerte-page-form h2{margin-bottom:8px}
.offerte-page-form .lead{margin-bottom:32px;color:var(--text-soft);font-size:16.5px}
.fieldset-title{font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--bronze-dark);text-transform:uppercase;letter-spacing:1.5px;margin:32px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border-soft)}
.fieldset-title:first-child{margin-top:0}
.upload-area{border:2px dashed var(--border);border-radius:var(--r-lg);padding:32px;text-align:center;color:var(--text-muted);transition:border-color .2s,background-color .2s;cursor:pointer}
.upload-area:hover{border-color:var(--bronze);background:var(--bg-alt)}
.upload-area svg{width:36px;height:36px;color:var(--bronze-dark);margin-bottom:10px}
.upload-area strong{display:block;color:var(--brand-dark);font-family:var(--font-heading);margin-bottom:4px}

/* ANIMATIONS - Intersection Observer */
/* CLEAN ENTRANCE: slide + fade. opacity 0 default, 1 on in-view. */
.reveal,.reveal-x,.reveal-x-r,.reveal-up{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal{transform:translateY(20px)}
.reveal-x{transform:translateX(-40px)}
.reveal-x-r{transform:translateX(40px)}
.reveal-up{transform:translateY(30px)}
.reveal.in-view,.reveal-x.in-view,.reveal-x-r.in-view,.reveal-up.in-view{opacity:1;transform:none}
/* Reduced-motion + no-JS fallback: skip the animation, just show */
@media (prefers-reduced-motion: reduce){.reveal,.reveal-x,.reveal-x-r,.reveal-up{opacity:1;transform:none;transition:none}}
.no-js .reveal,.no-js .reveal-x,.no-js .reveal-x-r,.no-js .reveal-up{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(40px) scale(.96)}
.stagger.in-view > *{opacity:1;transform:translateY(0) scale(1);transition:opacity var(--duration) var(--ease),transform var(--duration) var(--ease)}
.stagger.in-view > *:nth-child(1){transition-delay:0ms}
.stagger.in-view > *:nth-child(2){transition-delay:calc(var(--stagger) * 1)}
.stagger.in-view > *:nth-child(3){transition-delay:calc(var(--stagger) * 2)}
.stagger.in-view > *:nth-child(4){transition-delay:calc(var(--stagger) * 3)}
.stagger.in-view > *:nth-child(5){transition-delay:calc(var(--stagger) * 4)}
.stagger.in-view > *:nth-child(6){transition-delay:calc(var(--stagger) * 5)}

.section-header{text-align:center;max-width:720px;margin:0 auto 56px}
.section-header.left{text-align:left;margin:0 0 56px}
.section-header h2{margin-bottom:14px}
.section-header p{font-size:17px;color:var(--text-soft);margin:0}

/* RESPONSIVE */
@media(max-width:1024px){
  :root{--section-y:72px}
  .nav-links{gap:24px}
  .nav-links a{font-size:14px}
  .intro-grid{grid-template-columns:1fr;gap:40px}
  .why-grid,.diensten-grid,.projecten-grid,.tips-grid,.reviews-grid,.values-grid{grid-template-columns:repeat(2,1fr)}
  .werkwijze{grid-template-columns:repeat(3,1fr)}
  .werkwijze::before{display:none}
  .offerte-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
  .content-2col,.content-2col.reverse{grid-template-columns:1fr;gap:32px}
  .content-2col.reverse .content-text{order:1}
  .content-2col.reverse .content-img{order:2}
  .cta-band-inner{grid-template-columns:1fr;text-align:center}
  .cta-band .btn-group{justify-content:center}
  .project-meta-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  :root{--section-y:56px}
  body{font-size:16px}
  .nav-logo img{height:32px}
  .nav-links,.nav-phone{display:none}
  .nav-cta .btn:not(.nav-burger){display:none}
  .nav-burger{display:flex}
  .nav{padding:14px 16px}
  .nav.scrolled{padding:10px 16px}
  .container{padding:0 16px}
  section{padding-top:56px;padding-bottom:56px}
  .hero{min-height:560px}
  .hero-ctas{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
  .hero-ctas .btn{width:100%}
  .subhero{height:auto;min-height:280px;padding:48px 0;margin-top:64px}
  .why-grid,.diensten-grid,.tips-grid,.reviews-grid,.values-grid,.gallery-grid{grid-template-columns:1fr;grid-auto-rows:240px}.projecten-grid{grid-template-columns:1fr;grid-auto-rows:auto}.gallery-item.span2,.gallery-item.span3{grid-column:auto}
  .werkwijze{grid-template-columns:1fr;gap:32px}
  .werk-step{display:flex;align-items:flex-start;gap:18px;text-align:left}
  .werk-num{margin:0;flex-shrink:0;width:56px;height:56px;font-size:22px}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px;padding-bottom:36px}
  .footer-bottom{flex-direction:column;text-align:center}
  .offerte-page-form{padding:24px}
  .project-stats{grid-template-columns:1fr}
  .project-meta-grid{grid-template-columns:1fr}
  .wa-widget{bottom:16px;right:16px}
  .wa-btn,.tel-btn{width:56px;height:56px}.tel-btn{bottom:86px}
  .wa-tooltip{display:none}
  .lang{bottom:16px;left:16px}
  .lang-btn{padding:8px 12px;font-size:13px}
}

/* ============================================================
   PROJECT CARDS - mobile cleanup: smaller text, single column
   ============================================================ */
@media(max-width:900px){
  .project-meta h3{font-size:17px;line-height:1.25;margin-bottom:4px}
  .project-meta .loc{font-size:12px}
  .project-meta{padding:34px 18px 16px}
}
@media(max-width:600px){
  /* Override inline grid-template-columns on service pages */
  .projecten-grid[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .project-card{aspect-ratio:5/3}
  .project-meta h3{font-size:18px;line-height:1.25}
  .project-meta .loc{font-size:12.5px}
  .project-meta{padding:32px 16px 15px}
}
@media(max-width:400px){
  .project-meta h3{font-size:16px;line-height:1.2}
  .project-meta .loc{font-size:12px}
  .project-meta{padding:30px 14px 14px}
  .dienst-card h3{font-size:18px}
  .dienst-card p{font-size:14px}
  .dienst-card-body{padding:20px 20px 22px}
  .voordeel-card{padding:24px 22px}
  .voordeel-card h3{font-size:16.5px}
  .voordeel-card p{font-size:13.5px}
}

/* AR / RTL */
[dir="rtl"]{}
[dir="rtl"] .hero-eyebrow,[dir="rtl"] .hero h1,[dir="rtl"] .hero-subline,[dir="rtl"] .hero-ctas{transform:translateX(80px)}
[dir="rtl"] .reveal-x{transform:translateX(80px)}
[dir="rtl"] .reveal-x-r{transform:translateX(-80px)}
[dir="rtl"] .lang{left:auto;right:24px}
[dir="rtl"] .wa-widget{right:auto;left:24px}
[dir="rtl"] .wa-tooltip{right:auto;left:72px}
[dir="rtl"] .wa-tooltip::after{left:auto;right:100%;border-left-color:transparent;border-right-color:var(--brand-dark)}

/* PRINT/MISC */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* CALCULATOR */
.calc-section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.calc-section .section-header h2{color:var(--cream)}
.calculator{max-width:960px;margin:0 auto;background:var(--charcoal-soft);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-xl);border:1px solid color-mix(in srgb, var(--bronze) 18%, transparent)}
.calc-tabs{display:flex;background:var(--brand-darker);border-bottom:1px solid color-mix(in srgb, var(--bronze) 15%, transparent)}
.calc-tab{flex:1;padding:20px 12px;font-family:var(--font-heading);font-weight:700;font-size:14px;color:rgba(247,245,242,.55);text-transform:uppercase;letter-spacing:1.2px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .25s;border-bottom:3px solid transparent;background:transparent}
.calc-tab:hover{color:var(--cream);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.calc-tab.active{color:var(--bronze-light);background:var(--charcoal-soft);border-bottom-color:var(--bronze)}
.calc-body{padding:40px}
.calc-panel{display:none}
.calc-panel.active{display:block;animation:calcFade .3s ease}
@keyframes calcFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.calc-grid{display:grid;gap:28px;margin-bottom:32px}
.calc-field{}
.calc-field>label{display:block;font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--bronze-light);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:14px}
.calc-field>label small{font-weight:500;color:rgba(247,245,242,.45);text-transform:none;letter-spacing:.3px;margin-left:4px;font-size:12px}
.calc-slider-wrap{display:flex;align-items:center;gap:24px}
.calc-range{flex:1;-webkit-appearance:none;appearance:none;height:5px;background:rgba(247,245,242,.18);border-radius:3px;outline:none;cursor:pointer}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;background:var(--bronze);border-radius:50%;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 0 color-mix(in srgb, var(--bronze) 40%, transparent);transition:transform .2s,box-shadow .2s}
.calc-range::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 12px rgba(0,0,0,.5),0 0 0 8px color-mix(in srgb, var(--bronze) 20%, transparent)}
.calc-range::-moz-range-thumb{width:26px;height:26px;background:var(--bronze);border-radius:50%;border:0;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.calc-value{font-family:var(--font-heading);font-weight:800;font-size:30px;color:var(--cream);min-width:64px;text-align:right;letter-spacing:-.02em}
.calc-radio-group{display:flex;gap:8px;flex-wrap:wrap}
.calc-radio-group input[type=radio]{display:none}
.calc-radio-group label{display:inline-flex;align-items:center;padding:12px 20px;border:1.5px solid rgba(247,245,242,.18);border-radius:var(--r-pill);font-family:var(--font-body);font-size:14px;font-weight:600;color:rgba(247,245,242,.75);text-transform:none;letter-spacing:0;cursor:pointer;transition:all .2s;margin:0}
.calc-radio-group label:hover{border-color:var(--bronze);color:var(--cream)}
.calc-radio-group input[type=radio]:checked+label{background:var(--bronze);color:var(--brand-dark);border-color:var(--bronze)}
.calc-checks{display:flex;gap:10px;flex-wrap:wrap}
.calc-check{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1.5px solid rgba(247,245,242,.18);border-radius:var(--r-pill);cursor:pointer;transition:all .2s;font-family:var(--font-body);font-size:14px;font-weight:500;color:rgba(247,245,242,.75);margin:0;text-transform:none;letter-spacing:0}
.calc-check input{display:none}
.calc-check .check-mark{width:18px;height:18px;border:1.5px solid rgba(247,245,242,.4);border-radius:4px;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.calc-check .check-mark::after{content:'';position:absolute;width:10px;height:6px;border-left:2px solid var(--brand-dark);border-bottom:2px solid var(--brand-dark);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .2s;margin-bottom:2px}
.calc-check:hover{border-color:var(--bronze);color:var(--cream)}
.calc-check:has(input:checked){border-color:var(--bronze);color:var(--cream);background:color-mix(in srgb, var(--bronze) 8%, transparent)}
.calc-check:has(input:checked) .check-mark{background:var(--bronze);border-color:var(--bronze)}
.calc-check:has(input:checked) .check-mark::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.calc-result{padding:36px 32px;background:linear-gradient(135deg,color-mix(in srgb, var(--bronze) 18%, transparent) 0%,color-mix(in srgb, var(--bronze) 5%, transparent) 100%);border-radius:var(--r-lg);border:1px solid color-mix(in srgb, var(--bronze) 35%, transparent);text-align:center}
.calc-result-label{font-family:var(--font-heading);font-weight:700;font-size:12px;color:var(--bronze-light);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}
.calc-result-price{font-family:var(--font-heading);font-weight:800;color:var(--cream);margin-bottom:18px;display:flex;align-items:baseline;justify-content:center;gap:14px;letter-spacing:-.02em;flex-wrap:wrap}
.calc-low,.calc-high{font-size:clamp(34px,5vw,52px);transition:opacity .25s}
.calc-sep{color:var(--bronze);font-size:32px;font-weight:300}
.calc-result.updating .calc-low,.calc-result.updating .calc-high{opacity:.4}
.calc-disclaimer{color:rgba(247,245,242,.65);font-size:13.5px;max-width:520px;margin:0 auto 22px;line-height:1.65}
@media(max-width:768px){
  .calc-body{padding:24px}
  .calc-tab{padding:14px 6px;font-size:11.5px;letter-spacing:.5px}
  .calc-radio-group,.calc-checks{flex-direction:column}
  .calc-radio-group label,.calc-check{width:100%;justify-content:flex-start}
  .calc-value{font-size:24px;min-width:48px}
}

/* SWOOSH REVEAL - for intro section image */
.swoosh-from-left{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg);clip-path:inset(0 100% 0 0);transform:scale(1.04);opacity:.7;will-change:clip-path,transform,opacity}
.swoosh-from-left img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 12s linear}
.swoosh-from-left.in-view{clip-path:inset(0 0 0 0);transform:scale(1);opacity:1;transition:clip-path 1.6s var(--ease),transform 1.8s var(--ease),opacity .9s ease}
.swoosh-from-left.in-view img{transform:scale(1.06)}
/* Shine sweep that follows the reveal edge */
.swoosh-from-left::after{content:'';position:absolute;top:0;left:-35%;width:35%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);transform:skewX(-15deg);pointer-events:none;z-index:2;opacity:0}
.swoosh-from-left.in-view::after{animation:swooshShine 1.5s var(--ease) .35s 1 forwards}
@keyframes swooshShine{
  0%{left:-35%;opacity:0}
  15%{opacity:1}
  100%{left:135%;opacity:0}
}
/* Slight delay on text so photo starts first */
.intro-text{transition-delay:.25s!important}

/* Safety fallback: if JS fails or is disabled, show the photo */
@media (prefers-reduced-motion: reduce){
  .swoosh-from-left{clip-path:inset(0 0 0 0)!important;transform:none!important;opacity:1!important}
  .swoosh-from-left::after{display:none!important}
}
.no-js .swoosh-from-left{clip-path:inset(0 0 0 0);transform:none;opacity:1}

/* ============================================================
   HOMEPAGE FUNNEL v2 - 8-section structure
   ============================================================ */

/* SECTION 1: HERO SLIDER (full-width image cycler) */
.hp-hero-slider{position:relative;width:100%;height:100vh;min-height:620px;max-height:880px;overflow:hidden;background:var(--brand-dark);margin-top:-80px}

.hp-hero-slides{position:absolute;inset:0}
.hp-hs-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.hp-hs-slide.is-active{opacity:1;pointer-events:auto}

/* The image - covers entire slide, animates zoom when active */
.hp-hs-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.0);transition:transform 5.5s ease-out}
.hp-hs-slide.is-active .hp-hs-img{animation:hsZoom 7.5s cubic-bezier(.4,0,.2,1) forwards}

/* Overlay for text legibility */
.hp-hs-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.5) 100%)}

/* Slide content (text + button) */
.hp-hs-content{position:absolute;left:0;right:0;bottom:128px;padding:0 24px;color:var(--cream);z-index:2;max-width:var(--container);margin:0 auto;left:50%;transform:translateX(-50%);width:100%}
.hp-hs-eyebrow{display:inline-block;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--bronze-light);margin-bottom:18px;padding:8px 16px;background:color-mix(in srgb, var(--bronze) 18%, transparent);border:1px solid color-mix(in srgb, var(--bronze) 40%, transparent);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hp-hs-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(48px,7vw,104px);line-height:1;letter-spacing:-.035em;margin:0 0 22px;color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,.35);max-width:920px}
.hp-hs-title em{color:var(--bronze-light);font-style:normal;font-weight:800}
.hp-hs-desc{font-size:18px;line-height:1.55;color:rgba(247,245,242,.92);margin:0 0 32px;max-width:560px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hp-hs-btn{display:inline-flex;align-items:center;gap:10px;padding:18px 32px;background:var(--bronze);color:var(--brand-dark);border-radius:999px;font-family:var(--font-heading);font-weight:700;font-size:15.5px;text-decoration:none;transition:transform .25s var(--ease),background-color .25s,box-shadow .25s;box-shadow:0 12px 32px color-mix(in srgb, var(--bronze) 40%, transparent)}
.hp-hs-btn:hover{transform:translateY(-2px);background:var(--cream);color:var(--brand-dark);box-shadow:0 16px 40px color-mix(in srgb, var(--bronze) 50%, transparent)}
.hp-hs-btn svg{width:18px;height:18px;transition:transform .25s var(--ease)}
.hp-hs-btn:hover svg{transform:translateX(4px)}

/* Slide content fade-in animation when slide becomes active */
.hp-hs-eyebrow,.hp-hs-title,.hp-hs-desc{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hp-hs-slide.is-active .hp-hs-eyebrow{opacity:1;transform:translateY(0);transition-delay:.3s}
.hp-hs-slide.is-active .hp-hs-title{opacity:1;transform:translateY(0);transition-delay:.45s}
.hp-hs-slide.is-active .hp-hs-desc{opacity:1;transform:translateY(0);transition-delay:.6s}
.hp-hs-slide.is-active .hp-hs-btn{opacity:1;transform:translateY(0);transition-delay:.75s}

/* Dot navigation (bottom center) */
.hp-hs-dots{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;gap:14px;z-index:5}
.hp-hs-dot{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:0;cursor:pointer;padding:6px 4px;font-family:var(--font-heading);transition:opacity .25s}
.hp-hs-dot-label{font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(247,245,242,.65);transition:color .25s}
.hp-hs-dot.is-active .hp-hs-dot-label{color:var(--cream)}
.hp-hs-dot-bar{display:block;width:60px;height:2px;background:rgba(247,245,242,.25);overflow:hidden;border-radius:2px}
.hp-hs-dot-fill{display:block;width:0;height:100%;background:var(--bronze);transition:width .25s linear}
.hp-hs-dot.is-active .hp-hs-dot-fill{width:100%;transition:width 6.5s linear}
.hp-hs-dot:hover .hp-hs-dot-label{color:var(--cream)}

/* Bottom info strip (WA + phone) */







/* Mobile */
@media(max-width:900px){
  .hp-hero-slider{height:100vh;min-height:560px;max-height:none}
  .hp-hs-content{bottom:170px;padding:0 22px}
  .hp-hs-title{font-size:clamp(40px,9vw,64px)}
  .hp-hs-desc{font-size:16px;margin-bottom:24px}
  .hp-hs-btn{padding:16px 26px;font-size:14.5px}
  .hp-hs-dots{bottom:90px;gap:10px}
  .hp-hs-dot-bar{width:36px}
  .hp-hs-dot-label{font-size:10.5px;letter-spacing:1px}
  
  
  
}
@media(max-width:600px){
  .hp-hero-slider{height:90vh;min-height:520px}
  .hp-hs-content{bottom:160px}
  .hp-hs-title{font-size:clamp(36px,10vw,52px);line-height:1.02}
  .hp-hs-eyebrow{font-size:11.5px;letter-spacing:2px;padding:6px 12px}
  .hp-hs-desc{font-size:15px}
  .hp-hs-btn{padding:14px 22px}
}

/* INTRO section - short text after hero per brief */
.hp-intro{padding:80px 0;background:var(--bg)}
.hp-intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:center;max-width:var(--container);margin:0 auto;padding:0 24px}
.hp-intro-text .eyebrow{color:var(--bronze-dark);margin-bottom:14px;display:inline-block}
.hp-intro-text h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1.05;letter-spacing:-.025em;margin:0 0 20px;color:var(--brand-dark)}
.hp-intro-text p{font-size:16.5px;line-height:1.7;color:var(--text-soft);margin:0 0 1em}
.hp-intro-text strong{color:var(--brand-dark);font-weight:700}
.hp-intro-points{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hp-intro-point{padding:22px 22px;background:var(--cream);border-radius:14px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(37,42,45,.06)}
.hp-intro-point svg{width:24px;height:24px;color:var(--bronze)}
.hp-intro-point div{display:flex;flex-direction:column;gap:2px}
.hp-intro-point strong{font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--brand-dark)}
.hp-intro-point div::after{content:attr(data-sub)}
@media(max-width:900px){
  .hp-intro-grid{grid-template-columns:1fr;gap:36px}
  .hp-intro{padding:64px 0}
}
@media(max-width:600px){
  .hp-intro-points{grid-template-columns:1fr}
}

/* SECTION 2: SERVICES GRID */
.hp-services{padding:96px 0 64px;background:var(--cream)}
.hp-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hp-svc{display:block;background:var(--bg);border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s;border:1px solid rgba(37,42,45,.06)}
.hp-svc:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(37,42,45,.12)}
.hp-svc-img{aspect-ratio:1.4/1;overflow:hidden;background:var(--bg-alt)}
.hp-svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hp-svc:hover .hp-svc-img img{transform:scale(1.06)}
.hp-svc h3{padding:22px 26px 26px;margin:0;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-heading);font-weight:700;font-size:20px;letter-spacing:-.01em}
.hp-svc h3 span{color:var(--bronze);font-weight:600;transition:transform .25s var(--ease)}
.hp-svc:hover h3 span{transform:translateX(6px)}
.hp-services-cta{text-align:center;margin-top:48px}
.btn-pill-outline{display:inline-flex;align-items:center;justify-content:center;padding:16px 36px;border:1.5px solid var(--bronze);border-radius:999px;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--bronze-dark);background:transparent;transition:all .25s;text-decoration:none}
.btn-pill-outline:hover{background:var(--bronze);color:var(--brand-dark);transform:translateY(-2px)}
@media(max-width:1024px){.hp-services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.hp-services{padding:64px 0 48px}.hp-services-grid{grid-template-columns:1fr;gap:16px}}

/* SECTION 3: GOALS */
.hp-goals{padding:96px 0;background:var(--cream)}
.hp-goals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-goal{display:block;text-decoration:none;color:inherit}
.hp-goal-img{position:relative;aspect-ratio:5/4;border-radius:24px;overflow:hidden;background:var(--bronze);margin-bottom:18px;box-shadow:0 10px 30px rgba(37,42,45,.1)}
.hp-goal-img::before{content:'';position:absolute;inset:0;background:var(--bronze);mix-blend-mode:multiply;opacity:.4;z-index:1;transition:opacity .35s}
.hp-goal:hover .hp-goal-img::before{opacity:.2}
.hp-goal-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hp-goal:hover .hp-goal-img img{transform:scale(1.06)}
.hp-goal-text{padding:0 4px}
.hp-goal-text h3{font-family:var(--font-heading);font-weight:700;font-size:21px;margin:0 0 4px;display:flex;align-items:center;gap:8px;color:var(--brand-dark)}
.hp-goal-text h3 span{color:var(--bronze);transition:transform .25s var(--ease)}
.hp-goal:hover .hp-goal-text h3 span{transform:translateX(4px)}
.hp-goal-text p{font-size:14.5px;color:var(--text-muted);margin:0}
@media(max-width:900px){.hp-goals-grid{grid-template-columns:1fr;gap:24px}.hp-goals{padding:64px 0}}

/* SECTION 4: KLANTEN - collage + google badge */
.hp-fans{padding:96px 0;background:var(--cream)}
.hp-fans-grid{display:grid;grid-template-columns:auto 1fr auto;gap:48px;align-items:center;max-width:var(--container);margin:0 auto;padding:0 24px}
.hp-fans-text h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(56px,8vw,112px);line-height:.92;letter-spacing:-.04em;margin:0 0 16px;color:var(--brand-dark)}
.hp-fans-text p{max-width:280px;font-size:15px;color:var(--text-soft);margin:0}
.hp-fans-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,140px);gap:10px}
.hp-fans-mosaic > div{border-radius:14px;overflow:hidden;background:var(--brand-dark)}
.hp-fans-mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hp-fans-mosaic > div:hover img{transform:scale(1.08)}
.fm-1{grid-row:span 2}
.hp-fans-stats{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.hp-google-badge{background:var(--bg);border:1px solid rgba(37,42,45,.08);border-radius:18px;padding:22px 28px;text-align:center;box-shadow:0 4px 14px rgba(37,42,45,.04);min-width:170px}
.hpgb-stars{display:flex;justify-content:center;gap:2px;margin-bottom:8px}
.hpgb-stars svg{width:18px;height:18px;fill:#FBBC05}
.hpgb-num{font-family:var(--font-heading);font-weight:800;font-size:36px;line-height:1;color:var(--brand-dark);letter-spacing:-.02em}
.hpgb-label{font-family:var(--font-heading);font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.hp-rating-badge{background:#34A853;color:#fff;border-radius:18px;padding:24px 28px;text-align:center;box-shadow:0 6px 18px rgba(52,168,83,.3);min-width:170px}
.hprb-num{font-family:var(--font-heading);font-weight:800;font-size:48px;line-height:1;letter-spacing:-.02em}
.hprb-num span{font-size:24px;opacity:.85;font-weight:600}
@media(max-width:1100px){
  .hp-fans-grid{grid-template-columns:1fr;gap:32px;text-align:center;justify-items:center}
  .hp-fans-text p{margin-left:auto;margin-right:auto}
  .hp-fans-stats{flex-direction:row;gap:14px;flex-wrap:wrap;justify-content:center}
  .hp-fans-mosaic{grid-template-rows:repeat(2,120px);width:100%;max-width:520px}
}
@media(max-width:600px){.hp-fans{padding:64px 0}.hp-fans-mosaic{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,110px)}.fm-1{grid-row:span 1}}

/* SECTION 5: REVIEWS slider */



.hp-reviews-intro .eyebrow{color:var(--bronze-dark)}



.hp-reviews-track::-webkit-scrollbar{display:none}



.rev-google-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;margin-left:8px;opacity:.95;background:rgba(255,255,255,.15);padding:4px 8px;border-radius:999px}








@media(max-width:900px){
  
  
  
  
}

/* SECTION 6: WHY-US INTRO with watermark */
.hp-why-intro{padding:120px 0 60px;background:var(--cream);position:relative;overflow:hidden}
.hp-why-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-heading);font-weight:800;font-size:clamp(180px,28vw,420px);color:var(--bronze);opacity:.10;white-space:nowrap;letter-spacing:-.05em;line-height:1;pointer-events:none;user-select:none;z-index:1}
.hp-why-intro .container{position:relative;z-index:2}
.hp-why-intro-grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}
.hp-why-intro-text .eyebrow{color:var(--bronze-dark);margin-bottom:20px}
.hp-why-intro-text h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(56px,7vw,108px);line-height:.95;letter-spacing:-.03em;margin:0;color:var(--brand-dark)}
.hp-why-intro-img{width:340px;aspect-ratio:1/1;border-radius:32px;overflow:hidden;background:var(--bronze);box-shadow:0 30px 60px rgba(37,42,45,.2)}
.hp-why-intro-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
@media(max-width:900px){
  .hp-why-intro{padding:80px 0 40px}
  .hp-why-intro-grid{grid-template-columns:1fr;text-align:center;gap:32px;justify-items:center}
  .hp-why-intro-img{width:240px}
}

/* SECTION 7: WHY-US REASONS - scroll-driven horizontal */
.hp-why-reasons{background:var(--cream);position:relative}

.hp-why-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.hpwc-num{font-family:var(--font-heading);font-weight:800;font-size:14px;color:var(--bronze-dark);letter-spacing:3px;margin-bottom:20px}
.hp-why-card h3{font-family:var(--font-heading);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.02em;margin:0 0 18px;color:var(--brand-dark)}
.hp-why-card p{font-size:16px;line-height:1.65;color:var(--text-soft);margin:0}

/* Mobile fallback - return to native horizontal scroll, no pinning */
@media(max-width:900px){
  
  
  
  
  
  
  
  .hp-why-card h3{font-size:26px}
}

/* SECTION 8: EXTRAS */
.hp-extras{padding:96px 0;background:var(--bg-alt)}
.hp-extras-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hp-ex{display:block;text-decoration:none;color:inherit;background:var(--bg);border-radius:28px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;border:1px solid rgba(37,42,45,.06)}
.hp-ex:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(37,42,45,.14)}
.hp-ex-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bronze)}
.hp-ex-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,42,45,0) 50%,rgba(37,42,45,.55) 100%)}
.hp-ex-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.hp-ex:hover .hp-ex-img img{transform:scale(1.05)}
.hp-ex-text{padding:30px 32px 36px}
.hp-ex-text h3{font-family:var(--font-heading);font-weight:800;font-size:26px;letter-spacing:-.01em;margin:0 0 12px;display:flex;align-items:center;gap:10px;color:var(--brand-dark)}
.hp-ex-text h3 span{color:var(--bronze);transition:transform .25s var(--ease)}
.hp-ex:hover .hp-ex-text h3 span{transform:translateX(6px)}
.hp-ex-text p{font-size:15.5px;color:var(--text-soft);margin:0;line-height:1.65}
@media(max-width:900px){
  .hp-extras{padding:64px 0}
  .hp-extras-grid{grid-template-columns:1fr;gap:18px}
}

/* Hide old sections that may still be in stylesheet but no longer used in HTML - no-op */

/* STICKY MOBILE CTA BAR - appears on scroll, hidden on desktop */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:var(--brand-dark);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;gap:10px;z-index:90;box-shadow:0 -8px 24px rgba(0,0,0,.22);transform:translateY(100%);transition:transform .35s var(--ease)}
.sticky-cta.visible{transform:translateY(0)}
.sticky-cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 14px;border-radius:999px;font-family:var(--font-heading);font-weight:700;font-size:14px;text-decoration:none;transition:transform .15s,filter .15s}
.sticky-cta a:active{transform:scale(.97)}
.sticky-cta-call{background:transparent;color:var(--cream);border:1.5px solid rgba(247,245,242,.35)}
.sticky-cta-wa{background:#25D366;color:#fff}
.sticky-cta-quote{background:var(--bronze);color:var(--brand-dark)}
.sticky-cta svg{width:16px;height:16px}
@media(max-width:768px){.sticky-cta{display:flex}body{padding-bottom:80px}}

/* SEO BLOCK - long-form content on subpages */
.seo-block{padding:80px 0 96px;background:var(--bg-alt);border-top:1px solid rgba(37,42,45,.06)}
.seo-block .container{max-width:880px}
.seo-content h2{font-size:clamp(28px,3vw,40px);margin:0 0 18px;letter-spacing:-.02em}
.seo-longtext{font-size:16.5px;line-height:1.85;color:var(--text-soft);margin:0 0 56px}
.seo-werkgebied{padding:28px 32px;background:var(--bg);border-radius:18px;border:1px solid color-mix(in srgb, var(--bronze) 20%, transparent);margin-bottom:56px}
.seo-werkgebied h3{font-size:18px;margin:0 0 10px;color:var(--bronze-dark)}
.seo-werkgebied p{margin:0;font-size:15.5px;line-height:1.7;color:var(--text-soft)}
.seo-werkgebied a{color:var(--brand-dark);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--bronze)}
.seo-werkgebied a:hover{color:var(--bronze-dark)}
.seo-faq{margin-bottom:56px}
.seo-faq h3{font-size:24px;margin:0 0 24px;letter-spacing:-.01em}
.seo-faq-item{border-bottom:1px solid rgba(37,42,45,.1);padding:0}
.seo-faq-item summary{padding:20px 0;font-family:var(--font-heading);font-weight:700;font-size:17px;color:var(--brand-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:color .2s}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary::after{content:'+';font-size:24px;color:var(--bronze);transition:transform .25s,color .25s;font-weight:300;line-height:1}
.seo-faq-item[open] summary::after{transform:rotate(45deg)}
.seo-faq-item summary:hover{color:var(--bronze-dark)}
.seo-faq-answer{padding:0 0 22px;font-size:15.5px;line-height:1.75;color:var(--text-soft)}
.seo-faq-answer p{margin:0}
.seo-related h3{font-size:20px;margin:0 0 20px}
.seo-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.seo-related-card{display:block;padding:22px 24px;background:var(--bg);border-radius:14px;text-decoration:none;color:var(--brand-dark);border:1px solid rgba(37,42,45,.06);transition:all .25s}
.seo-related-card:hover{border-color:var(--bronze);transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,42,45,.08)}
.seo-related-card h4{margin:0;font-size:16px;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.seo-related-card span{color:var(--bronze);transition:transform .2s}
.seo-related-card:hover span{transform:translateX(4px)}
@media(max-width:600px){.seo-related-grid{grid-template-columns:1fr}.seo-block{padding:56px 0 72px}}

/* PROJECT SPECS */
.proj-specs{padding:28px 32px;background:var(--bg);border-radius:18px;border:1px solid color-mix(in srgb, var(--bronze) 18%, transparent);margin-bottom:56px}
.proj-specs h3{font-size:18px;margin:0 0 16px;color:var(--bronze-dark)}
.proj-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 32px;margin:0}
.proj-spec{display:flex;flex-direction:column;gap:2px}
.proj-spec dt{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.proj-spec dd{font-size:15.5px;font-weight:600;color:var(--brand-dark);margin:0}
@media(max-width:600px){.proj-specs-grid{grid-template-columns:1fr}}

/* Service: featured badge */
.hp-svc{position:relative}
.hp-svc-badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--bronze);color:var(--brand-dark);font-family:var(--font-heading);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 4px 12px color-mix(in srgb, var(--bronze) 40%, transparent);pointer-events:none}

/* Subtle button hover lift - applied universally */
.btn,.btn-pill-dark,.btn-pill-text,.btn-pill-outline,.btn-accent,.btn-primary{transition:transform .25s var(--ease),background-color .25s,box-shadow .25s,border-color .25s}
.btn:hover,.btn-pill-dark:hover,.btn-pill-outline:hover,.btn-accent:hover,.btn-primary:hover{transform:translateY(-2px)}

/* Burger button: display rule (the actual styling is at top of file using ::before/::after) */
@media(max-width:900px){.nav-burger{display:flex}}

/* RICH SERVICE SECTIONS */

/* Voordelen */
.rich-voordelen{padding:96px 0;background:var(--cream)}
.rich-voordelen .section-header{text-align:center;max-width:680px;margin:0 auto 56px;padding:0 24px}
.voordelen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--container);margin:0 auto;padding:0 24px}
.voordeel-card{padding:32px 28px;background:var(--bg);border-radius:18px;border:1px solid rgba(37,42,45,.06);transition:all .3s var(--ease)}
.voordeel-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(37,42,45,.08);border-color:color-mix(in srgb, var(--bronze) 30%, transparent)}
.voordeel-icon{font-size:32px;width:56px;height:56px;background:color-mix(in srgb, var(--bronze) 12%, transparent);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.voordeel-card h3{font-family:var(--font-heading);font-weight:700;font-size:18.5px;letter-spacing:-.01em;margin:0 0 10px;color:var(--brand-dark)}
.voordeel-card p{font-size:14.5px;line-height:1.65;color:var(--text-soft);margin:0}
@media(max-width:900px){.voordelen-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.voordelen-grid{grid-template-columns:1fr}.rich-voordelen{padding:64px 0}}

/* Materialen */
.rich-materialen{padding:96px 0;background:var(--bg-alt)}
.rich-materialen .section-header{text-align:center;max-width:720px;margin:0 auto 56px;padding:0 24px}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1100px;margin:0 auto;padding:0 24px}
.mat-card{position:relative;padding:32px 28px;background:var(--bg);border-radius:20px;border:1.5px solid rgba(37,42,45,.06);transition:all .3s var(--ease)}
.mat-card.featured{border-color:var(--bronze);box-shadow:0 14px 30px color-mix(in srgb, var(--bronze) 18%, transparent)}
.mat-card:hover{transform:translateY(-3px)}
.mat-badge{position:absolute;top:-12px;left:24px;background:var(--bronze);color:var(--brand-dark);font-family:var(--font-heading);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.mat-head{margin-bottom:14px}
.mat-head h3{font-family:var(--font-heading);font-weight:700;font-size:18.5px;letter-spacing:-.01em;margin:0 0 4px;color:var(--brand-dark)}
.mat-price{font-family:var(--font-heading);font-weight:600;font-size:14px;color:var(--bronze-dark);letter-spacing:.3px}
.mat-card p{font-size:14.5px;line-height:1.65;color:var(--text-soft);margin:0}
.mat-cta{text-align:center;margin-top:48px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:0 24px}
@media(max-width:600px){.rich-materialen{padding:64px 0}.mat-cta{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}}

/* Service-specific reviews */
.rich-reviews{padding:96px 0;background:var(--cream)}
.rich-reviews .section-header{text-align:center;max-width:680px;margin:0 auto 56px;padding:0 24px}
.rich-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--container);margin:0 auto;padding:0 24px}
.rich-rev{padding:30px 28px;background:var(--bg);border-radius:20px;border:1px solid rgba(37,42,45,.06);display:flex;flex-direction:column;gap:16px}
.rich-rev-stars{display:flex;gap:1px}
.rich-rev-stars svg{width:18px;height:18px;fill:#FBBC05}
.rich-rev-text{font-size:15.5px;line-height:1.6;color:var(--text-soft);margin:0;flex:1}
.rich-rev-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(37,42,45,.08);padding-top:12px}
.rich-rev-name{font-family:var(--font-heading);font-weight:700;font-size:14.5px;color:var(--brand-dark)}
.rich-rev-loc{font-size:13px;color:var(--text-muted)}
@media(max-width:900px){.rich-reviews-grid{grid-template-columns:1fr}.rich-reviews{padding:64px 0}}

/* Final CTA */
.rich-final-cta{padding:96px 0;background:var(--brand-dark)}
.rfc-inner{max-width:760px;margin:0 auto;text-align:center;padding:0 24px}
.rfc-inner h2{font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.025em;color:var(--cream);margin:0 0 18px}
.rfc-inner > p{font-size:17px;line-height:1.65;color:rgba(247,245,242,.78);margin:0 0 36px;max-width:600px;margin-left:auto;margin-right:auto}
.rfc-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-pill-wa{display:inline-flex;align-items:center;gap:8px;padding:18px 32px;background:#25D366;color:#fff;border-radius:999px;font-family:var(--font-heading);font-weight:700;font-size:15px;text-decoration:none;transition:all .25s var(--ease);box-shadow:0 6px 20px rgba(37,211,102,.3)}
.btn-pill-wa:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(37,211,102,.45);background:#22c25c}
.btn-pill-wa svg{width:18px;height:18px}
@media(max-width:600px){.rich-final-cta{padding:64px 0}.rfc-btns{flex-direction:column;align-items:stretch}.rfc-btns .btn-pill-dark,.btn-pill-wa,.btn-pill-text{justify-content:center;transition:all .25s var(--ease)}}

/* OFFERTE FORM v2 */
.offerte-form-section{padding:140px 0 96px;background:var(--cream)}
.of-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;max-width:1100px;margin:0 auto;padding:0 24px;align-items:start}
.of-info{padding-right:24px}
.of-info .eyebrow{color:var(--bronze-dark);margin-bottom:16px;display:inline-block}
.of-info h1{font-family:var(--font-heading);font-weight:800;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.025em;margin:0 0 18px;color:var(--brand-dark)}
.of-lead{font-size:17px;line-height:1.6;color:var(--text-soft);margin:0 0 32px}
.of-bullets{list-style:none;padding:0;margin:0 0 36px}
.of-bullets li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;color:var(--text-soft);margin-bottom:12px;line-height:1.5}
.of-bullets svg{width:20px;height:20px;color:var(--bronze);flex-shrink:0;margin-top:2px}
.of-contact{padding:22px 24px;background:var(--bg);border-radius:16px;border:1px solid rgba(37,42,45,.06)}
.of-contact p{margin:0 0 12px;font-size:14px;color:var(--text-soft)}
.of-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--brand-dark);font-family:var(--font-heading);font-weight:700;font-size:15.5px;margin-right:18px;transition:color .2s}
.of-link:hover{color:var(--bronze-dark)}
.of-link svg{width:16px;height:16px}
.of-link.of-wa{color:#25D366}
.of-link.of-wa:hover{color:#1da648}
.of-form{background:var(--bg);border-radius:24px;padding:36px 32px;box-shadow:0 14px 40px rgba(37,42,45,.06);border:1px solid rgba(37,42,45,.04)}
.of-row{margin-bottom:18px}
.of-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.of-field{display:block}
.of-field > span{display:block;font-family:var(--font-heading);font-weight:600;font-size:13px;color:var(--brand-dark);margin-bottom:6px;letter-spacing:.2px}
.of-field em{color:var(--bronze-dark);font-style:normal;font-weight:600;margin-left:2px}
.of-field input,.of-field select,.of-field textarea{width:100%;padding:13px 16px;border:1.5px solid rgba(37,42,45,.12);border-radius:10px;background:var(--bg);font-family:inherit;font-size:15px;color:var(--brand-dark);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.of-field input:focus,.of-field select:focus,.of-field textarea:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px color-mix(in srgb, var(--bronze) 12%, transparent)}
.of-field textarea{resize:vertical;min-height:120px}
.of-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252A2D' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.of-field-file input{padding:10px;background:rgba(37,42,45,.03);cursor:pointer}
.of-field-file input::file-selector-button{margin-right:14px;padding:8px 16px;border:0;background:var(--brand-dark);color:var(--cream);border-radius:8px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;transition:background-color .2s}
.of-field-file input::file-selector-button:hover{background:var(--bronze-dark)}
.of-hint{display:block;margin-top:6px;font-size:12.5px;color:var(--text-muted)}
.of-checkbox label{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-soft);line-height:1.5;cursor:pointer}
.of-checkbox input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin-top:2px;accent-color:var(--bronze)}
.of-submit{width:100%;padding:18px 28px;background:var(--brand-dark);color:var(--cream);border:0;border-radius:999px;font-family:var(--font-heading);font-weight:700;font-size:15.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .2s,background-color .2s,box-shadow .2s;margin-top:8px}
.of-submit:hover{transform:translateY(-2px);background:var(--bronze-dark);box-shadow:0 10px 28px rgba(159,133,64,.4)}
.of-submit svg{width:18px;height:18px}
.of-promise{text-align:center;font-size:13px;color:var(--text-muted);margin:14px 0 0}
@media(max-width:900px){
  .of-grid{grid-template-columns:1fr;gap:40px}
  .offerte-form-section{padding:96px 0 64px}
}
@media(max-width:600px){
  .of-row-2{grid-template-columns:1fr}
  .of-form{padding:28px 22px}
}

/* NAV LANG FLAG */
.nav-lang{position:relative;margin-right:6px}
.nav-lang-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid rgba(37,42,45,.12);border-radius:999px;background:transparent;font-family:var(--font-heading);font-weight:700;font-size:13px;color:var(--brand-dark);cursor:pointer;transition:all .25s var(--ease)}
.nav-lang-btn:hover{border-color:var(--bronze);transform:translateY(-1px)}
.nav-flag{border-radius:3px;display:block;flex-shrink:0}
.nav-lang-code{letter-spacing:.5px}
.nav.scrolled .nav-lang-btn{color:var(--brand-dark);border-color:rgba(37,42,45,.18)}
@media(max-width:900px){.nav-lang{display:none}}

/* HOVER LIFTS - ensure ALL clickable buttons subtly lift on hover */
.btn-cta-primary{transition:all .25s var(--ease)}
.btn-cta-primary:hover{transform:translateY(-2px);background:var(--bronze-dark);color:var(--cream);box-shadow:0 12px 32px rgba(159,133,64,.45)}

.btn-cta-wa{transition:all .25s var(--ease)}
.btn-cta-wa:hover{transform:translateY(-2px);background:#1da648;box-shadow:0 12px 32px rgba(37,211,102,.4)}

.btn-pill-dark{display:inline-flex;align-items:center;gap:10px;padding:18px 32px;background:var(--bronze);color:var(--brand-dark);border-radius:999px;font-family:var(--font-heading);font-weight:700;font-size:15.5px;text-decoration:none;transition:all .25s var(--ease);box-shadow:0 8px 24px color-mix(in srgb, var(--bronze) 32%, transparent)}
.btn-pill-dark:hover{transform:translateY(-2px);background:var(--cream);color:var(--brand-dark);box-shadow:0 14px 36px color-mix(in srgb, var(--bronze) 45%, transparent)}

.btn-pill-text{transition:all .2s var(--ease)}
.btn-pill-text:hover{transform:translateY(-1px);color:var(--bronze-light)}

.nav-phone{transition:all .25s var(--ease)}
.nav-phone:hover{transform:translateY(-1px);color:var(--bronze-dark)}

/* Bonus: subtle hover on the WhatsApp strip in slider + sticky CTA buttons */



/* Sticky bottom CTA on mobile (if exists) */
.sticky-cta a{transition:all .2s var(--ease)}
.sticky-cta a:hover{transform:translateY(-2px)}

/* OVERFLOW SAFETY OVERRIDES - prevent specific known wide elements from breaking layout on mobile */
@media(max-width:600px){
  /* Calculator inputs/sliders */
  .calculator,.calc-panel,.calc-result{max-width:100%;box-sizing:border-box}
  input[type="range"],input[type="text"],input[type="email"],input[type="tel"],select,textarea{max-width:100%;box-sizing:border-box}
  /* Tables auto-wrap */
  table{width:100%;table-layout:fixed;word-wrap:break-word}
  /* Code blocks scroll inside themselves, not page */
  pre,code{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Reviews/horizontal scrollers contain themselves */
  .hp-reviews-track,
  /* Hero slider strip wraps if too tight */
  
  /* Make sure the page wrappers never push past viewport */
  section,header,footer,article,nav{max-width:100vw;box-sizing:border-box}
  /* Long words in headlines wrap */
  h1,h2,h3{word-break:normal;overflow-wrap:break-word}
  /* iframe (YouTube/Maps) full-width */
  iframe{width:100%;max-width:100%}
}

@media(max-width:900px){
    /* taller pin = more scroll distance */
  
  
  
  
    /* hide native scroll buttons - scroll-jack drives it now */
}

/* WHY-REASONS - explicit mobile scroll-jack (clean version) */
@media(max-width:900px){
  /* Pin section: tall enough to give scroll distance */
  
  /* Sticky inner pins to viewport while parent scrolls */
  
  /* Track: horizontal flex, visible overflow so JS transform shows it */
  
  .hp-why-reasons-track::-webkit-scrollbar{display:none}
  /* Cards: take ~80% of viewport so user sees one at a time */
  
  
  /* Progress bar: visible at bottom of sticky area */
  
  /* Hide manual prev/next buttons - scroll-jack handles it */
  .hp-why-btn,
}


/* Mobile: stacked vertically */
@media(max-width:900px){
  .hp-why-reasons-track{grid-template-columns:repeat(2,1fr);gap:14px;padding:0 18px}
  .hp-why-sticky{padding:64px 0 80px}
  .hp-why-card{padding:26px 22px;border-radius:20px}
  .hpwc-num{font-size:36px;margin-bottom:10px}
  .hp-why-card h3{font-size:20px}
}
@media(max-width:600px){
  .hp-why-reasons-track{grid-template-columns:1fr;gap:12px}
}
/* ============================================================
   GOOGLE REVIEWS - horizontal swipe, Google brand colors
   ============================================================ */
.hp-greviews{padding:80px 0;background:var(--bg)}
.hp-greviews .container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* Header with summary + nav */
.hpgr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.hpgr-summary{display:flex;flex-direction:column;gap:14px}
.hpgr-googlelogo{font-family:'Product Sans','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:34px;letter-spacing:-1px;line-height:1}
.hpgr-rating{display:flex;align-items:center;gap:10px}
.hpgr-score{font-family:var(--font-heading);font-weight:700;font-size:36px;letter-spacing:-.02em;color:#202124;line-height:1}
.hpgr-stars{display:inline-flex;gap:2px}
.hpgr-stars svg{width:22px;height:22px}
.hpgr-count{font-size:14px;color:#5f6368;font-family:'Product Sans','Plus Jakarta Sans',sans-serif}

/* Action buttons + arrows */
.hpgr-actions{display:flex;align-items:center;gap:10px}
.hpgr-write{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid #dadce0;border-radius:24px;color:#1a73e8;font-family:'Product Sans','Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;text-decoration:none;background:var(--bg);transition:all .25s var(--ease)}
.hpgr-write:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,115,232,.15);border-color:#1a73e8}
.hpgr-write svg{width:16px;height:16px}
.hpgr-nav{width:40px;height:40px;border-radius:50%;border:1px solid #dadce0;background:var(--bg);color:#5f6368;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease)}
.hpgr-nav:hover{transform:translateY(-2px);background:#f8f9fa;border-color:#1a73e8;color:#1a73e8}
.hpgr-nav svg{width:18px;height:18px}

/* Horizontal scrolling track */
.hpgr-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 4px 28px;scrollbar-width:none;scroll-padding:4px}
.hpgr-track::-webkit-scrollbar{display:none}
.hpgr-loading{padding:40px;text-align:center;color:#5f6368;font-size:14px;width:100%}

/* Individual review card - looks like Google reviews */
.hpgr-card{flex:0 0 320px;max-width:320px;background:var(--bg);border:1px solid #e8eaed;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px;scroll-snap-align:start;transition:box-shadow .25s var(--ease);box-shadow:0 1px 3px rgba(60,64,67,.08)}
.hpgr-card:hover{box-shadow:0 4px 16px rgba(60,64,67,.16)}

/* Card header: avatar + name/rating + Google mark */
.hpgr-card-head{display:flex;align-items:center;gap:12px}
.hpgr-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:18px;color:#fff;flex-shrink:0}
.hpgr-meta{flex:1;min-width:0}
.hpgr-name{font-family:'Product Sans','Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:#202124;line-height:1.2;margin-bottom:2px}
.hpgr-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hpgr-card-stars{display:inline-flex;gap:1px}
.hpgr-card-stars svg{width:14px;height:14px}
.hpgr-time{font-size:13px;color:#70757a}
.hpgr-google-mark{width:18px;height:18px;flex-shrink:0;opacity:.85}

/* Service tag chip */
.hpgr-tag{display:inline-block;align-self:flex-start;padding:4px 10px;background:#e8f0fe;color:#1967d2;font-family:'Product Sans','Plus Jakarta Sans',sans-serif;font-weight:500;font-size:12px;border-radius:12px;letter-spacing:.2px}

/* Review text */
.hpgr-text{font-size:14.5px;line-height:1.55;color:#3c4043;margin:0;font-family:var(--font-body)}

/* Footer link */
.hpgr-foot{text-align:center;margin-top:8px}
.hpgr-allreviews{display:inline-flex;align-items:center;gap:6px;color:#1a73e8;text-decoration:none;font-family:'Product Sans','Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14.5px;padding:10px 0;transition:gap .25s var(--ease)}
.hpgr-allreviews:hover{gap:10px}
.hpgr-allreviews svg{width:15px;height:15px}

/* === Mobile === */
@media(max-width:900px){
  .hp-greviews{padding:64px 0}
  .hpgr-head{margin-bottom:24px}
  .hpgr-googlelogo{font-size:28px}
  .hpgr-score{font-size:30px}
  .hpgr-stars svg{width:18px;height:18px}
  .hpgr-actions{flex-wrap:wrap}
  .hpgr-card{flex-basis:76vw;max-width:76vw;padding:22px;scroll-snap-align:center}
  .hpgr-track{gap:14px;padding:8px 12vw 24px;scroll-padding:12vw}
}
@media(max-width:600px){
  .hpgr-head{flex-direction:column;align-items:flex-start;gap:18px}
  .hpgr-actions .hpgr-nav{display:none}  /* swipe-only on mobile */
  .hpgr-write{font-size:13px}
  .hpgr-card{flex-basis:78vw;max-width:78vw;padding:20px;scroll-snap-align:center}
  .hpgr-name{font-size:14px}
  .hpgr-text{font-size:14px}
}


/* Make sure werkwijze single-column rule wins */
@media(max-width:600px){
  .werkwijze{grid-template-columns:1fr !important;gap:28px !important}
  .werk-step{text-align:left;padding:0}
}
@media(max-width:900px) and (min-width:601px){
  /* Tablet: 1 column too because 3 doesn't fit */
  .werkwijze{grid-template-columns:1fr !important;gap:32px !important;max-width:520px;margin:0 auto}
}

/* STICKY CTA REMOVED - user prefers floating WhatsApp + lang widget instead */
.sticky-cta{display:none !important}
body{padding-bottom:0 !important}

/* Position floating widgets so they don't overlap on small screens */
@media(max-width:600px){
  .wa-btn{bottom:18px;right:18px}
  .lang{bottom:18px;left:18px}
}

/* ============================================================
   FLOATING WIDGETS - both on same horizontal line, equal heights
   ============================================================ */
.wa-btn{
  position:fixed !important;
  bottom:24px !important;
  right:24px !important;
  width:68px !important;
  height:68px !important;
  z-index:9999 !important;
}
.lang{
  position:fixed !important;
  bottom:24px !important;
  left:24px !important;
  z-index:9999 !important;
  height:58px !important;
  display:flex !important;
  align-items:center !important;
}
.lang-btn{
  height:58px !important;
  padding:0 20px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  border:0 !important;
  cursor:pointer !important;
  font-family:var(--font-heading) !important;
  font-weight:700 !important;
  font-size:14.5px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  color:var(--brand-dark) !important;
  box-shadow:0 6px 20px rgba(37,42,45,.15) !important;
  transition:transform .25s var(--ease),box-shadow .25s !important;
}
.lang-btn:hover{transform:translateY(-2px) !important;box-shadow:0 10px 28px rgba(37,42,45,.22) !important}
.lang-flag{font-size:18px;line-height:1;display:flex;align-items:center}
.lang-arrow{margin-left:2px;width:14px;height:14px;transition:transform .25s var(--ease)}
.lang.open .lang-arrow{transform:rotate(180deg)}

/* Dropdown - visible above the button when open */
.lang-dropdown{
  position:absolute;
  bottom:calc(100% + 10px);
  left:0;
  background:var(--bg);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(37,42,45,.2);
  padding:8px;
  min-width:240px;
  max-height:380px;
  overflow-y:auto;
  display:none;
  border:1px solid rgba(37,42,45,.08);
}
.lang.open .lang-dropdown{display:block;animation:lang-fade .2s ease}
@keyframes lang-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lang-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 14px;
  border:0;
  background:transparent;
  border-radius:10px;
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:600;
  color:var(--brand-dark);
  text-align:left;
  cursor:pointer;
  transition:background-color .15s;
}
.lang-option:hover{background:var(--bg-alt)}
.lang-option.active{background:var(--bronze);color:var(--brand-dark)}
.lang-option .lang-name{flex:1}
.lang-option .lang-code{font-size:11px;color:var(--text-muted);letter-spacing:1.5px;font-weight:700}
.lang-option.active .lang-code{color:var(--brand-dark);opacity:.7}
.lang-flag-emoji{font-size:18px;line-height:1}

/* Mobile: a bit tighter */
@media(max-width:600px){
  .wa-btn{bottom:18px !important;right:18px !important;width:62px !important;height:62px !important}.tel-btn{right:18px !important;width:62px !important;height:62px !important;bottom:92px !important}
  .lang{bottom:18px !important;left:18px !important;height:54px !important}
  .lang-btn{height:54px !important;padding:0 16px !important;font-size:13.5px !important}
  .lang-dropdown{min-width:220px;max-height:60vh}
}

/* ============================================================
   GOOGLE TRANSLATE - kill all visible UI (banner, tooltip, offsets)
   ============================================================ */
.skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-balloon-frame,
.goog-te-ftab,
.goog-te-menu-frame,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q,
.VIpgJd-suEOdc {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Prevent Google from pushing body down by 40px */
html,
html.translated-ltr,
html.translated-rtl,
body,
body.translated-ltr,
body.translated-rtl {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: static !important;
}
/* Hide all Google tooltips that pop up on hover */
.goog-tooltip,
.goog-tooltip:hover,
.goog-tooltip-active,
#goog-gt-tt,
#goog-gt-tt + div,
.goog-text-highlight {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}
/* Hide the actual translate widget element */
#google_translate_element {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Lang pill must always sit on top */
.lang { z-index: 99999 !important; }
.lang-dropdown { z-index: 99999 !important; }
body{top:0 !important;position:static !important}
.goog-tooltip,.goog-tooltip:hover{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
#goog-gt-tt,#goog-gt-tt + div + img{display:none !important}

/* CALCULATOR - premium minimal: dark bg, merkkleur accent only */
.calculator{background:var(--brand-dark) !important;color:var(--cream)}
.calc-tabs{border-bottom:1px solid rgba(247,245,242,.12) !important}
.calc-tab{color:rgba(247,245,242,.55) !important;background:transparent !important;border-bottom:2px solid transparent !important;text-transform:uppercase;letter-spacing:1.2px}
.calc-tab:hover{color:var(--cream) !important;background:transparent !important;border-bottom-color:color-mix(in srgb, var(--bronze) 40%, transparent) !important;transform:none !important}
.calc-tab.active{color:var(--bronze) !important;border-bottom-color:var(--bronze) !important;background:transparent !important}
.calc-result{background:transparent !important;border-top:1px solid rgba(247,245,242,.12)}
.calc-price,.calc-result-price{color:var(--bronze) !important}
.calc-row label,.calc-row span{color:var(--cream) !important}
.calc-row input[type=range]{accent-color:var(--bronze) !important}
.calc-controls,.calc-panel{background:transparent}

/* ============================================================
   WHY-REASONS - scroll-jack (page pins, cards slide horizontally)
   Works on both desktop and mobile
   ============================================================ */
.hp-why-pin{position:relative;height:380vh;overflow:visible}
.hp-why-sticky{position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:60px 0 80px;background:var(--bg)}
.hp-why-reasons-track{display:flex;gap:24px;padding:0 8vw;will-change:transform;align-items:center;flex-wrap:nowrap}
.hp-why-card{flex:0 0 420px;background:var(--cream);border-radius:28px;padding:44px 36px;display:flex;flex-direction:column;justify-content:center;border:1px solid rgba(37,42,45,.08);min-height:420px;box-shadow:0 4px 20px rgba(37,42,45,.04)}
.hp-why-card-img{flex:0 0 420px;padding:0;overflow:hidden;border-radius:28px;box-shadow:0 14px 40px rgba(37,42,45,.18)}
.hp-why-card-img img{width:100%;height:100%;object-fit:cover}
.hpwc-num{font-family:var(--font-heading);font-weight:800;font-size:52px;color:var(--bronze);letter-spacing:-.02em;margin-bottom:16px;line-height:1}
.hp-why-card h3{font-family:var(--font-heading);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:0 0 14px;color:var(--brand-dark)}
.hp-why-card p{font-size:15.5px;line-height:1.6;color:var(--text-soft);margin:0}
.hp-why-progress{position:absolute;bottom:40px;left:8vw;right:8vw;height:2px;background:rgba(37,42,45,.1);border-radius:2px;overflow:hidden;z-index:5;display:block}
.hp-why-progress-bar{height:100%;width:0;background:var(--bronze);transition:width .12s linear;border-radius:2px}
.hp-why-buttons{position:absolute;top:50%;right:32px;transform:translateY(-50%);display:flex;gap:10px;z-index:6}
.hp-why-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(37,42,45,.15);background:var(--bg);color:var(--brand-dark);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease)}
.hp-why-btn:hover{transform:translateY(-2px);background:var(--bronze);color:var(--brand-dark);border-color:var(--bronze)}
.hp-why-btn svg{width:18px;height:18px}

/* Mobile: same scroll-jack mechanism, cards take ~80vw */
@media(max-width:900px){
  .hp-why-pin{height:300vh}
  .hp-why-sticky{top:0;height:100vh;padding:40px 0 70px}
  .hp-why-reasons-track{gap:14px;padding:0 18px}
  .hp-why-card{flex-basis:80vw;max-width:80vw;padding:32px 26px;min-height:auto;border-radius:24px}
  .hp-why-card-img{flex-basis:80vw;max-width:80vw;aspect-ratio:1/1}
  .hp-why-card h3{font-size:24px}
  .hp-why-card p{font-size:15px}
  .hp-why-progress{bottom:24px;left:18px;right:18px}
  .hp-why-buttons{display:none}
  .hpwc-num{font-size:42px;margin-bottom:12px}
}
@media(max-width:600px){
  .hp-why-pin{height:280vh}
  .hp-why-card{flex-basis:84vw;max-width:84vw;padding:28px 22px}
  .hp-why-card-img{flex-basis:84vw;max-width:84vw}
}

/* Hide nav-phone + Offerte-knop on mobile per user request (desktop keeps them) */
@media(max-width:900px){
  .nav-phone{display:none !important}
  .nav > .btn.btn-primary,
  .nav-actions > .btn.btn-primary,
  nav .btn.btn-primary{display:none !important}
  /* Mobile slide-out menu: also hide phone + offerte buttons inside it
     (they overlap with the floating WhatsApp + lang pill at bottom) */
  .mobile-menu > .btn,
  .mobile-menu > a.btn{display:none !important}
}

/* ============================================================
   v38 - REDESIGN PER REFERENCE
   Mobile-first. Cream/merkkleur palette. Full-screen hero left-overlay.
   ============================================================ */

/* Palette - {{BEDRIJFSNAAM}}
   - Achtergrond: wit / koel lichtgrijs
   - Donker:      #11202E (diep blauwzwart)
   - Accent:      #0A82E6 ({{BEDRIJF}} blauw, uit logo) met licht/donker variant */
:root{
  --bg: #ffffff !important;
  --bg-alt: #F1F0FB !important;
  --bg-cream: #F4F3FC !important;
  --bg-card: #ffffff !important;
  --bg-dark: #040408 !important;
  --bg-dark-alt: #181825 !important;
  --bronze: #6C63FF !important;
  --bronze-light: #8B84FF !important;
  --bronze-dark: #4A42DD !important;
  --brand-dark: #08080E !important;
  --text-soft: #3A3A4A !important;
  --text-muted: #6B6B7A !important;
  --cream: #F5F5FA !important;
}

body{background:var(--bg);color:var(--brand-dark)}

/* Eyebrow style - small caps merkkleur */
.eyebrow,
.hp-eyebrow{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:18px;
  padding:9px 24px;
  border:1px solid color-mix(in srgb, var(--bronze) 40%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--bronze) 7%, transparent);
}
.eyebrow::before,
.hp-eyebrow::before{display:none !important}
section.dark .eyebrow,
section.dark .hp-eyebrow{
  color:var(--bronze-light);
  border-color:color-mix(in srgb, var(--bronze-light) 48%, transparent);
  background:color-mix(in srgb, var(--bronze-light) 12%, transparent);
}

/* Buttons - pill */
.btn-primary,
a.btn.btn-primary{
  background:var(--bronze);
  color:#fff;
  border-radius:999px;
  padding:16px 32px;
  font-family:var(--font-heading);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  border:0;
  transition:transform .25s var(--ease),background-color .25s,box-shadow .25s;
  box-shadow:0 6px 18px color-mix(in srgb, var(--bronze) 28%, transparent);
  text-decoration:none;
}
.btn-primary:hover,
a.btn.btn-primary:hover{background:var(--bronze-dark);transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb, var(--bronze) 35%, transparent)}
.btn-ghost,
a.btn.btn-ghost{
  background:transparent;
  color:var(--brand-dark);
  border:1.5px solid var(--brand-dark);
  border-radius:999px;
  padding:14px 30px;
  font-family:var(--font-heading);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  transition:all .25s var(--ease);
  text-decoration:none;
}
.btn-ghost:hover,
a.btn.btn-ghost:hover{background:var(--brand-dark);color:#fff}
.btn-light-ghost{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.85);
  border-radius:999px;
  padding:14px 30px;
  font-family:var(--font-heading);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  transition:all .25s var(--ease);
  text-decoration:none;
}
.btn-light-ghost:hover{background:#fff;color:var(--brand-dark)}

/* Nav - base rules. Background is set per scroll state (transparent at
   top, anthracite when scrolled - see v62 patches below). */
.nav{border-bottom:none}

/* ===== 1. HERO ===== */
.hp-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hp-hero-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center right;
  z-index:-2;
}
.hp-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(15,13,10,.95) 0%,
    rgba(15,13,10,.88) 35%,
    rgba(15,13,10,.55) 55%,
    rgba(15,13,10,.15) 75%,
    rgba(15,13,10,0) 100%);
  z-index:-1;
}
.hp-hero-content{
  position:relative;
  z-index:1;
  padding:120px 0 80px;
  color:#fff;
  max-width:640px;
}
.hp-hero-content .eyebrow{color:var(--bronze-light);margin-bottom:22px}
.hp-hero-content h1{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:54px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 24px;
}
.hp-hero-content h1 em{color:var(--bronze-light);font-style:normal;font-weight:800}
.hp-hero-content p{
  font-size:17px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
  margin:0 0 32px;
  max-width:500px;
}
.hp-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
.hp-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:36px;
  align-items:start;
}
.hp-hero-stats .stat{display:flex;flex-direction:column;gap:4px}
.hp-hero-stats .stat strong{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:32px;
  color:#fff;
  letter-spacing:-.01em;
  line-height:1;
}
.hp-hero-stats .stat span{
  font-size:13px;
  color:rgba(255,255,255,.7);
  letter-spacing:.4px;
}

/* ===== 2. ONZE DIENSTEN ===== */
.hp-services{padding:90px 0;background:var(--bg)}
.hp-services .container{text-align:center}
.hp-services h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:44px;
  letter-spacing:-.02em;
  margin:0 0 50px;
  color:var(--brand-dark);
}
.hp-svc-grid{display:flex;flex-direction:column;gap:20px;max-width:560px;margin:0 auto}
.hp-svc-card{
  background:var(--bg-card);
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(37,42,45,.05);
  text-align:left;
  position:relative;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.hp-svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(37,42,45,.08)}
.hp-svc-img{
  width:100%;
  aspect-ratio:16/10;
  background-size:cover;
  background-position:center;
  position:relative;
}
.hp-svc-badge{
  position:absolute;
  top:18px;left:18px;
  background:var(--bronze);
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  z-index:2;
}
.hp-svc-body{padding:30px 28px 32px}
.hp-svc-body h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.015em;
  margin:0 0 14px;
  color:var(--brand-dark);
}
.hp-svc-body p{
  font-size:15.5px;
  line-height:1.55;
  color:var(--text-soft);
  margin:0 0 22px;
}
.hp-svc-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px}
.hp-svc-features li{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:15px;
  color:var(--text-soft);
}
.hp-svc-features li::before{
  content:"";
  flex:none;
  width:22px;height:22px;
  background:color-mix(in srgb, var(--bronze) 15%, transparent);
  border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C5A55A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
}
.hp-svc-body .btn-primary{width:100%;justify-content:center}

/* ===== 3. PORTFOLIO ===== */
.hp-portfolio{padding:90px 0;background:var(--bg)}
.hp-portfolio h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:44px;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:var(--brand-dark);
}
.hp-portfolio > .container > p{
  font-size:15.5px;
  color:var(--text-muted);
  margin:0 0 40px;
}
.hp-port-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  max-width:560px;
  margin:0 auto;
}
.hp-port-card{
  position:relative;
  display:block;
  aspect-ratio:5/4;
  border-radius:22px;
  overflow:hidden;
  text-decoration:none;
  background:var(--bg-cream);
  transition:transform .3s var(--ease);
}
.hp-port-card:hover{transform:translateY(-4px)}
.hp-port-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
}
.hp-port-meta{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:24px 22px;
  background:linear-gradient(180deg,transparent 0%,rgba(15,13,10,.8) 60%,rgba(15,13,10,.95) 100%);
  color:#fff;
}
.hp-port-tag{
  display:inline-block;
  background:var(--bronze);
  color:#fff;
  padding:5px 12px;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.hp-port-meta h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:20px;
  margin:0;
  color:#fff;
  letter-spacing:-.01em;
  line-height:1.2;
}

/* ===== 4. VAKWERK ===== */
.hp-vakwerk{padding:100px 0;background:var(--bg-card)}
.hp-vakwerk .container{max-width:1100px;text-align:center}
.hp-vakwerk h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:44px;
  letter-spacing:-.025em;
  line-height:1.08;
  margin:0 0 22px;
  color:var(--brand-dark);
}
.hp-vakwerk > .container > p{
  font-size:16.5px;
  line-height:1.6;
  color:var(--text-soft);
  margin:0 auto 48px;
  max-width:720px;
}
.hp-vak-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-bottom:54px;
  text-align:left;
}
.hp-vak-card{
  background:var(--bg);
  border:1px solid rgba(37,42,45,.08);
  border-radius:20px;
  padding:34px 30px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.hp-vak-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 44px rgba(15,13,10,.12);
  border-color:var(--bronze);
}
.hp-vak-card .hp-vak-num{
  width:52px;height:52px;
  border-radius:14px;
  background:var(--bronze);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:22px;
  margin-bottom:20px;
  transition:transform .4s var(--ease);
}
.hp-vak-card:hover .hp-vak-num{transform:scale(1.12) rotate(-6deg)}
.hp-vak-card h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:20px;
  margin:0 0 10px;
  color:var(--brand-dark);
  letter-spacing:-.01em;
}
.hp-vak-card p{font-size:15.5px;line-height:1.6;color:var(--text-soft);margin:0}
.hp-vak-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding-top:42px;
  border-top:1px solid rgba(37,42,45,.1);
}
.hp-vak-stats > div{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;transition:transform .35s var(--ease)}
.hp-vak-stats > div:hover{transform:translateY(-4px)}
.hp-vak-stats strong{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:38px;
  color:var(--bronze);
  line-height:1;
}
.hp-vak-stats span{font-size:13.5px;color:var(--text-muted)}
@media (max-width:860px){
  .hp-vak-grid{grid-template-columns:1fr;gap:18px}
}

/* ===== 5. WERKWIJZE ===== */
.hp-werkwijze{padding:100px 0;background:var(--bg);text-align:center}
.hp-werkwijze h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:44px;
  letter-spacing:-.02em;
  margin:0 0 60px;
  color:var(--brand-dark);
}
.hp-werk-steps{display:flex;flex-direction:column;gap:48px;max-width:480px;margin:0 auto 50px}
.hp-werk-step{display:flex;flex-direction:column;align-items:center;gap:18px}
.hp-werk-num{
  width:78px;height:78px;
  border:2px solid var(--bronze);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:24px;
  color:var(--bronze);
}
.hp-werk-step h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:21px;
  margin:0;
  color:var(--brand-dark);
}
.hp-werk-step p{
  font-size:15px;
  line-height:1.55;
  color:var(--text-soft);
  margin:0;
  max-width:340px;
}

/* ===== 7. TIPS & NIEUWS ===== */
.hp-tips{padding:90px 0 100px;background:var(--bg);overflow:hidden}
.hp-tips .container{max-width:1200px;padding-left:24px;padding-right:24px}
.hp-tips h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:42px;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:var(--brand-dark);
}
.hp-tips > .container > p{font-size:15.5px;color:var(--text-muted);margin:0 0 38px}
.hp-tips-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.hp-tips-track{
  display:flex;
  gap:18px;
  animation:tips-marquee 40s linear infinite;
  width:max-content;
}
.hp-tips-track:hover{animation-play-state:paused}
@keyframes tips-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.hp-tips-card{
  flex:none;
  width:290px;
  background:var(--bg-card);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(37,42,45,.06);
  text-decoration:none;
  color:var(--brand-dark);
  display:flex;flex-direction:column;
}
.hp-tips-img{
  width:100%;
  aspect-ratio:16/10;
  background-size:cover;
  background-position:center;
  background-color:var(--bg-cream);
}
.hp-tips-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.hp-tips-tag{
  align-self:flex-start;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--bronze) 18%, transparent);
  color:var(--bronze-dark);
  border:1.5px solid color-mix(in srgb, var(--bronze) 65%, transparent);
}
.hp-tips-tag.tag-nieuws{
  background:rgba(46,160,67,.16);
  color:#1F7F33;
  border:1.5px solid rgba(46,160,67,.55);
}
.hp-tips-card h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.01em;
  margin:0;
  line-height:1.25;
  color:var(--brand-dark);
}
.hp-tips-card p{font-size:14px;line-height:1.5;color:var(--text-soft);margin:0;flex:1}
.hp-tips-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  padding-top:10px;
  border-top:1px solid rgba(37,42,45,.07);
  color:var(--text-muted);
}
.hp-tips-meta .lees{color:var(--bronze-dark);font-weight:700;font-family:var(--font-heading)}

/* ===== 8. CONTACT + CALCULATOR ===== */
.hp-contact{
  padding:100px 0;
  background:var(--bg-dark);
  color:#fff;
  position:relative;
}
.hp-contact .container{max-width:680px}
.hp-contact .eyebrow{color:var(--bronze-light)}
.hp-contact h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:48px;
  letter-spacing:-.025em;
  line-height:1.05;
  margin:0 0 22px;
  color:#fff;
}
.hp-contact > .container > p{
  font-size:16.5px;
  line-height:1.55;
  color:rgba(255,255,255,.75);
  margin:0 0 36px;
}
.hp-contact-ctas{display:flex;flex-direction:column;gap:14px;margin-bottom:60px;max-width:340px}
.btn-phone{
  background:var(--bronze);
  color:#fff;
  padding:18px 24px;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  transition:transform .2s,background-color .2s;
}
.btn-phone:hover{background:var(--bronze-dark);transform:translateY(-2px)}
.btn-wa{
  background:#25D366;
  color:#fff;
  padding:18px 24px;
  border-radius:999px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  transition:transform .2s,background-color .2s;
}
.btn-wa:hover{background:#1FB856;transform:translateY(-2px)}

/* CALC WIZARD */
.hp-calc-wizard{
  background:var(--bg-dark-alt);
  border-radius:26px;
  padding:38px 28px;
  border:1px solid rgba(255,255,255,.06);
}
.hp-calc-wizard .eyebrow{color:var(--bronze-light);margin-bottom:8px}
.hp-calc-wizard > h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:24px;
  color:#fff;
  margin:0 0 32px;
  letter-spacing:-.01em;
}
.calc-stepper{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:0;
  margin-bottom:32px;
  position:relative;
}
.calc-stepper::before{
  content:"";
  position:absolute;
  top:18px;
  left:16.66%;right:16.66%;
  height:2px;
  background:rgba(255,255,255,.12);
  z-index:0;
}
.calc-stepper .step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:1;
}
.calc-stepper .step .num{
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  transition:all .25s;
}
.calc-stepper .step.active .num,
.calc-stepper .step.completed .num{
  background:var(--bronze);
  color:#fff;
}
.calc-stepper .step .label{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.4);
  text-transform:uppercase;
}
.calc-stepper .step.active .label,
.calc-stepper .step.completed .label{color:var(--bronze-light)}

.calc-pane{display:none}
.calc-pane.active{display:block;animation:calc-fade .3s ease}
@keyframes calc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.calc-pane h4{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:16px;
  color:#fff;
  margin:0 0 18px;
}
.calc-svc-btn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  color:#fff;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  padding:18px 22px;
  border-radius:14px;
  margin-bottom:12px;
  cursor:pointer;
  transition:all .22s;
}
.calc-svc-btn:hover,
.calc-svc-btn.active{
  background:color-mix(in srgb, var(--bronze) 12%, transparent);
  border-color:var(--bronze);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--bronze) 8%, transparent);
}
.calc-svc-btn::after{content:"→";color:var(--bronze)}

.calc-q-field{margin-bottom:24px}
.calc-q-field > label{
  display:block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14px;
  color:#fff;
  margin-bottom:10px;
}
.calc-q-field > label > small{font-weight:400;color:rgba(255,255,255,.5);font-family:var(--font-body)}
.calc-q-field .slider-wrap{display:flex;gap:14px;align-items:center}
.calc-q-field .slider-wrap input[type=range]{flex:1;accent-color:var(--bronze)}
.calc-q-field .slider-wrap .val{
  background:var(--bronze);
  color:#fff;
  border-radius:8px;
  padding:6px 12px;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:15px;
  min-width:52px;
  text-align:center;
}
.calc-radio-row{display:flex;gap:10px;flex-wrap:wrap}
.calc-radio-row label{
  flex:1;
  min-width:130px;
  display:flex;align-items:center;justify-content:center;
  padding:14px 16px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#fff;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all .2s;
}
.calc-radio-row input[type=radio]{display:none}
.calc-radio-row input[type=radio]:checked + label,
.calc-radio-row label:has(input:checked){
  background:color-mix(in srgb, var(--bronze) 18%, transparent);
  border-color:var(--bronze);
  color:var(--bronze-light);
}
.calc-checks{display:flex;flex-direction:column;gap:10px}
.calc-checks label{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px;
  font-size:14px;color:#fff;
  cursor:pointer;
  transition:all .2s;
}
.calc-checks input[type=checkbox]{accent-color:var(--bronze);width:18px;height:18px}
.calc-checks label:has(input:checked){background:color-mix(in srgb, var(--bronze) 12%, transparent);border-color:var(--bronze)}

.calc-result-box{
  background:color-mix(in srgb, var(--bronze) 10%, transparent);
  border:1px solid var(--bronze);
  border-radius:16px;
  padding:24px;
  text-align:center;
  margin-bottom:24px;
}
.calc-result-box .lbl{
  font-size:13px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--bronze-light);
  font-family:var(--font-heading);
  font-weight:700;
  margin-bottom:8px;
}
.calc-result-box .price{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:42px;
  color:var(--bronze-light);
  letter-spacing:-.02em;
}
.calc-form-row{margin-bottom:14px}
.calc-form-row input,
.calc-form-row textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#fff;
  font-family:var(--font-body);
  font-size:15px;
}
.calc-form-row input::placeholder,
.calc-form-row textarea::placeholder{color:rgba(255,255,255,.45)}
.calc-form-row input:focus,
.calc-form-row textarea:focus{outline:none;border-color:var(--bronze)}
.calc-nav-row{display:flex;gap:10px;margin-top:24px}
.calc-nav-row .btn-back{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:999px;padding:14px 22px;
  font-family:var(--font-heading);font-weight:700;font-size:14px;
  cursor:pointer;
}
.calc-nav-row .btn-next,
.calc-nav-row .btn-submit{
  flex:1;
  background:var(--bronze);color:#fff;border:0;
  border-radius:999px;padding:15px 24px;
  font-family:var(--font-heading);font-weight:700;font-size:15px;
  cursor:pointer;
  transition:background-color .2s;
}
.calc-nav-row .btn-next:hover,
.calc-nav-row .btn-submit:hover{background:var(--bronze-dark)}

/* Mobile <600 - already mobile-first, just minor tweaks */
@media(max-width:600px){
  .hp-hero-content{padding:110px 0 70px}
  .hp-hero-content h1{font-size:42px}
  .hp-hero-content p{font-size:16px}
  .hp-hero-stats{gap:24px}
  .hp-hero-stats .stat strong{font-size:26px}
  .hp-services{padding:70px 0}
  .hp-services h2,.hp-portfolio h2,.hp-vakwerk h2,.hp-werkwijze h2,.hp-tips h2,.hp-contact h2{font-size:34px}
  .hp-svc-body{padding:24px 22px 28px}
  .hp-svc-body h3{font-size:22px}
  .hp-vakwerk{padding:70px 0}
  .hp-vakwerk h2{font-size:34px}
  .hp-werkwijze{padding:70px 0}
  .hp-werk-num{width:64px;height:64px;font-size:20px}
  .hp-tips-card{width:260px}
  .hp-tips{padding:70px 0 80px}
  .hp-contact{padding:70px 0}
  .hp-calc-wizard{padding:28px 20px}
}
@media(max-width:400px){
  .hp-hero-content h1{font-size:36px}
  .hp-services h2,.hp-portfolio h2,.hp-vakwerk h2,.hp-werkwijze h2,.hp-tips h2,.hp-contact h2{font-size:30px}
}

/* Desktop ≥901 - side-by-side adjustments */
@media(min-width:901px){
  .hp-hero-content h1{font-size:64px}
  .hp-svc-grid{max-width:1100px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .hp-svc-card{display:flex;flex-direction:column}
  .hp-svc-card .hp-svc-body{flex:1;display:flex;flex-direction:column}
  .hp-svc-card .hp-svc-features{flex:1}
  .hp-port-grid{
    max-width:1180px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:200px;
    gap:12px;
  }
  /* bento: blokken tegen elkaar, eerste groot, daarna afwisselend formaat */
  .hp-port-card{aspect-ratio:auto;height:100%}
  .hp-port-card:nth-child(1){grid-column:span 2;grid-row:span 2}
  .hp-port-card:nth-child(2){grid-column:span 2;grid-row:span 1}
  .hp-port-card:nth-child(3){grid-column:span 1;grid-row:span 1}
  .hp-port-card:nth-child(4){grid-column:span 1;grid-row:span 1}
  .hp-port-card:nth-child(5){grid-column:span 2;grid-row:span 1}
  .hp-port-card:nth-child(6){grid-column:span 2;grid-row:span 1}
  .hp-werk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1100px}
  .hp-services .container,.hp-portfolio .container,.hp-vakwerk .container,.hp-werkwijze .container,.hp-tips .container,.hp-contact .container{max-width:1200px;padding:0 32px}
}

/* ============================================================
   v39 - HERO SLIDER (3-slide cycling, replaces broken static hero)
   ============================================================ */
.hp-hero-slider{position:relative;height:100vh;min-height:560px;overflow:hidden;background:#000}
.hp-hero-slides{position:absolute;inset:0}
.hp-hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hp-hs-slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.hp-hs-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
  transition:transform 8s linear;
  will-change:transform;
  image-rendering:auto;
}
.hp-hs-slide.is-active .hp-hs-img{animation:hsZoom 7.5s cubic-bezier(.4,0,.2,1) forwards}
.hp-hs-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.55) 100%);
}
.hp-hs-content{
  position:absolute;left:0;right:0;bottom:0;top:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 24px 110px;
  z-index:3;
  color:#fff;
  max-width:760px;
}
.hp-hs-eyebrow{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;font-size:11px;letter-spacing:3.5px;
  text-transform:uppercase;
  color:var(--bronze-light);
  margin-bottom:16px;
  align-self:flex-start;
}
.hp-hs-title{
  font-family:var(--font-heading);
  font-weight:800;font-size:48px;line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;margin:0 0 18px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.hp-hs-title em{color:var(--bronze-light);font-style:normal;font-weight:800;display:block}
.hp-hs-desc{font-size:16px;line-height:1.5;color:rgba(255,255,255,.9);margin:0 0 28px;max-width:520px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hp-hs-btn{
  display:inline-flex;align-items:center;gap:10px;
  align-self:flex-start;
  background:var(--bronze);color:#fff;
  padding:16px 28px;border-radius:999px;
  font-family:var(--font-heading);font-weight:700;font-size:15px;
  text-decoration:none;
  box-shadow:0 8px 24px color-mix(in srgb, var(--bronze) 40%, transparent);
  transition:transform .25s,box-shadow .25s,background-color .25s;
}
.hp-hs-btn:hover{background:var(--bronze-dark);transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb, var(--bronze) 50%, transparent)}
.hp-hs-btn svg{width:18px;height:18px;flex:none}

/* Dots */
.hp-hs-dots{
  position:absolute;left:0;right:0;bottom:32px;
  display:flex;justify-content:center;gap:12px;
  z-index:4;
}
.hp-hs-dot{
  background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-heading);font-weight:700;font-size:10.5px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:6px 4px;
  transition:color .25s;
}
.hp-hs-dot.is-active{color:#fff}
.hp-hs-dot::before{
  content:"";display:block;
  width:36px;height:2px;
  background:rgba(255,255,255,.3);
  border-radius:2px;
  transition:background-color .25s,width .25s;
}
.hp-hs-dot.is-active::before{background:var(--bronze);width:48px}
.hp-hs-dot span{display:block}

@media(max-width:600px){
  .hp-hs-content{padding:0 20px 100px}
  .hp-hs-title{font-size:38px}
  .hp-hs-desc{font-size:15px}
  .hp-hs-dots{bottom:24px;gap:10px}
  .hp-hs-dot::before{width:28px}
  .hp-hs-dot.is-active::before{width:38px}
}

/* ============================================================
   v39 - Google logo + reviews layout cleanup
   ============================================================ */
.hpgr-google{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.hpgr-logo{flex:none;width:36px;height:36px}
.hpgr-google-text{display:flex;flex-direction:column;gap:2px}
.hpgr-rating{display:flex;align-items:baseline;gap:8px}
.hpgr-rating strong{font-family:var(--font-heading);font-weight:800;font-size:28px;color:var(--brand-dark);letter-spacing:-.01em;line-height:1}
.hpgr-stars{color:#FBBC04;font-size:18px;letter-spacing:1px;line-height:1}
.hpgr-count{font-size:13.5px;color:var(--text-muted)}

/* Reviews carousel - works with v38 wrapper */
.hp-greviews{padding:80px 0;background:var(--bg-card)}
.hpgr-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.hpgr-write{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-weight:700;font-size:13.5px;
  color:#1a73e8;text-decoration:none;
  padding:10px 18px;border:1.5px solid rgba(26,115,232,.3);
  border-radius:999px;transition:all .2s;
}
.hpgr-write:hover{background:rgba(26,115,232,.08);border-color:#1a73e8}
.hpgr-track{
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px 4px 28px;
  scrollbar-width:none;
  scroll-padding:12vw;
}
.hpgr-track::-webkit-scrollbar{display:none}
.hpgr-card{
  flex:0 0 320px;max-width:320px;
  background:#fff;border-radius:18px;padding:22px;
  box-shadow:0 6px 22px rgba(37,42,45,.06);
  border:1px solid rgba(37,42,45,.04);
  scroll-snap-align:center;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.hpgr-card-head{display:flex;align-items:center;gap:12px}
.hpgr-avatar{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:18px;
  color:#fff;flex:none;
}
.hpgr-name-row{flex:1;display:flex;flex-direction:column;gap:2px}
.hpgr-name{font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--brand-dark)}
.hpgr-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted)}
.hpgr-card-stars{color:#FBBC04;font-size:13px;letter-spacing:1px}
.hpgr-google-mark{
  position:absolute;top:18px;right:18px;
  width:22px;height:22px;flex:none;
}
.hpgr-tag{
  display:inline-block;align-self:flex-start;
  font-size:12px;padding:4px 12px;
  background:rgba(26,115,232,.08);color:#1a73e8;
  border-radius:999px;font-weight:500;
  border:1.5px solid rgba(26,115,232,.55);
}
.hpgr-text{font-size:14px;line-height:1.55;color:var(--text-soft);margin:0}
.hpgr-loading{flex:1;text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px}
.hpgr-allcta{
  display:inline-block;
  font-family:var(--font-heading);font-weight:700;font-size:14px;
  color:#1a73e8;text-decoration:none;
  margin-top:8px;
}

@media(max-width:600px){
  .hp-greviews{padding:60px 0}
  .hp-greviews .container{padding-left:0;padding-right:0;max-width:100%}
  .hpgr-head{padding:0 20px;flex-direction:column;align-items:flex-start}
  .hpgr-allcta{margin:0 20px}
  .hpgr-card{flex-basis:88vw;max-width:88vw;padding:20px;scroll-snap-align:start}
  .hpgr-track{gap:14px;padding:8px 16px 24px;scroll-padding-left:16px;scroll-padding-right:16px}
}

/* ============================================================
   v42 - Hero slider fixes + faster marquee
   ============================================================ */

/* Defensive: prevent any horizontal page scroll */
html,body{overflow-x:hidden;max-width:100vw}

/* Rebuild hero content positioning - was getting clipped left of viewport */
.hp-hs-content{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  margin:0 !important;
  max-width:none !important;
  width:100% !important;
  padding:80px 24px 120px !important;
  box-sizing:border-box;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
  z-index:3;
  color:#fff;
}
.hp-hs-content > *{max-width:680px}

/* Hero stats - clean transparent text on dark photo */
.hp-hs-stats{
  display:flex;
  gap:32px;
  margin-top:32px;
  align-self:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
}
.hp-hs-stat{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.hp-hs-stat strong{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:26px;
  line-height:1;
  color:#fff;
  letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.hp-hs-stat span{
  font-size:12.5px;
  color:rgba(255,255,255,.78);
  letter-spacing:.4px;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  white-space:nowrap;
}

@media(max-width:600px){
  .hp-hs-content{padding:60px 20px 110px !important}
  .hp-hs-stats{gap:24px;margin-top:24px}
  .hp-hs-stat strong{font-size:22px}
  .hp-hs-stat span{font-size:11.5px}
}
@media(max-width:380px){
  .hp-hs-stats{gap:18px}
  .hp-hs-stat strong{font-size:20px}
}

/* Tips marquee - sneller (was 40s, was te langzaam op mobiel) */
.hp-tips-track{animation-duration:22s !important}
@media(min-width:901px){
  .hp-tips-track{animation-duration:32s !important}
}

/* ============================================================
   v43 - HARD FIX hero positioning + aggressive overflow prevention
   ============================================================ */

/* Lock viewport - no horizontal scroll ANYWHERE */
html{overflow-x:hidden !important;max-width:100%}
body{overflow-x:hidden !important;max-width:100vw;position:relative}

/* Every section must contain its width */
section{max-width:100vw;overflow-x:clip}

/* HERO - drop absolute positioning, use flexbox */
.hp-hero-slider{
  position:relative;
  height:100vh;min-height:560px;
  overflow:hidden;
  background:#000;
  max-width:100vw;
  width:100%;
}
.hp-hero-slides{position:absolute;inset:0;width:100%;max-width:100vw;overflow:hidden}
.hp-hs-slide{
  position:absolute !important;
  inset:0 !important;
  left:0 !important;right:0 !important;
  width:100% !important;max-width:100vw !important;
  margin:0 !important;
  opacity:0;
  transition:opacity 1.2s ease;
  pointer-events:none;
  /* flexbox to push content to bottom */
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  overflow:hidden;
}
.hp-hs-slide.is-active{opacity:1;pointer-events:auto;z-index:2}

/* HERO CONTENT - NORMAL FLOW now, not absolute. Sits at bottom via parent flex. */
.hp-hs-content{
  position:relative !important;
  inset:auto !important;
  left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
  width:100% !important;max-width:100vw !important;
  margin:0 !important;
  padding:0 24px 110px 24px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  z-index:3;
  color:#fff;
}
.hp-hs-content > *{max-width:100%;box-sizing:border-box}

/* Eyebrow - wrap if too long, no overflow */
.hp-hs-eyebrow{
  display:inline-block;
  max-width:100%;
  white-space:normal;
  word-break:keep-all;
}

/* Title + description constrained to readable width */
.hp-hs-title,.hp-hs-desc{max-width:520px}

@media(max-width:600px){
  .hp-hs-content{padding:0 20px 110px 20px !important}
  .hp-hs-title{font-size:36px !important}
  .hp-hs-eyebrow{font-size:10.5px !important;letter-spacing:2.5px !important}
}
@media(max-width:380px){
  .hp-hs-title{font-size:32px !important}
}

/* ============================================================
   v44 - SURGICAL FIX: kill leftover transform that shifts hero content
   .hp-hs-content had a transform:translateX(-50%) from v32 still alive,
   that none of the v38-v43 overrides explicitly reset.
   ============================================================ */
.hp-hs-content{transform:none !important}

/* ============================================================
   v45 - Kill leftover transform on .hp-hs-dots (zelfde bug als v44)
   ============================================================ */
.hp-hs-dots{transform:none !important}


/* ============================================================
   v46 - Three additions per user request
   ============================================================ */

/* --- 1. Mobile menu phone pill (replaces Contact link) --- */
.mobile-menu-phone-item{border-bottom:none !important;padding:8px 0 !important}
.mobile-menu li.mobile-menu-phone-item{border-bottom:none !important}
.mobile-menu-phone{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
  background:var(--bronze) !important;
  color:#fff !important;
  padding:14px 22px !important;
  border-radius:999px !important;
  font-family:var(--font-heading) !important;
  font-weight:700 !important;
  font-size:16px !important;
  text-decoration:none !important;
  box-shadow:0 6px 18px color-mix(in srgb, var(--bronze) 28%, transparent);
  transition:transform .2s,background-color .2s,box-shadow .2s;
}
.mobile-menu-phone:hover,.mobile-menu-phone:focus{
  background:var(--bronze-dark) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 22px color-mix(in srgb, var(--bronze) 36%, transparent);
}
.mobile-menu-phone svg{flex:none;width:18px;height:18px}

/* --- 2. Burger button: merkkleur floating circle, white lines --- */
.nav-burger{
  background:var(--bronze) !important;
  border-radius:50% !important;
  width:44px !important;
  height:44px !important;
  box-shadow:0 6px 16px color-mix(in srgb, var(--bronze) 32%, transparent) !important;
  border:0 !important;
}
.nav-burger:hover,
.nav-burger:focus,
.nav-burger.open{
  background:var(--bronze) !important; /* stays merkkleur on click/open */
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after{
  background:#fff !important;
}
.nav-burger.open span{background:transparent !important}
.nav-burger.open span::before,
.nav-burger.open span::after{background:#fff !important}

/* --- 3. Lang switcher: single flag, no dropdown --- */
.lang{position:fixed;bottom:24px;left:24px;z-index:90}
.lang-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  width:46px !important;
  height:46px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 20px rgba(37,42,45,.16) !important;
  border:0;
  font-size:22px !important;
  line-height:1 !important;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.lang-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(37,42,45,.22) !important}
.lang-btn .lang-flag-emoji{font-size:22px;line-height:1}
.lang-btn .lang-code,
.lang-btn .lang-arrow{display:none !important}
.lang-dropdown{display:none !important} /* dropdown disabled - direct toggle */


/* ============================================================
   v48 - Homepage restructure CSS
   ============================================================ */

/* 1. Fix hero title: geen hyphenation/auto-break meer */
.hp-hs-title{
  hyphens:manual !important;
  -webkit-hyphens:manual !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}
.hp-hs-desc{
  hyphens:manual !important;
  -webkit-hyphens:manual !important;
}
/* Header (hero) full-width op desktop - geen max-width constraint op de slider zelf */
.hp-hero-slider{width:100% !important;max-width:100vw !important}

/* Op desktop: laat hero-content op natuurlijke breedte staan */
@media(min-width:901px){
  .hp-hs-title{max-width:760px !important;font-size:60px !important}
  .hp-hs-desc{max-width:560px !important;font-size:18px !important}
  .hp-hs-content > *{max-width:none !important}
  .hp-hs-content{max-width:1200px !important;margin:0 auto !important;padding:0 48px 130px 48px !important}
}

/* 2. OVER ONS - photo left, text right op desktop */
.hp-overons{padding:90px 0;background:var(--bg)}
.hp-overons .container{display:flex;flex-direction:column;gap:32px;align-items:center}
.hp-overons-photo{
  width:100%;
  max-width:540px;
  aspect-ratio:5/6;
  border-radius:24px;
  overflow:hidden;
  background:var(--bg-cream);
  box-shadow:0 18px 40px rgba(37,42,45,.08);
}
.hp-overons-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.hp-overons-text{max-width:540px;width:100%}
.hp-overons-text .eyebrow{margin-bottom:14px}
.hp-overons-text h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:38px;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0 0 22px;
  color:var(--brand-dark);
}
.hp-overons-text .hp-overons-lead{
  font-size:17px;
  line-height:1.55;
  color:var(--text-soft);
  margin:0 0 18px;
}
.hp-overons-text .hp-overons-lead strong{color:var(--brand-dark);font-weight:700}
.hp-overons-text p{font-size:15.5px;line-height:1.6;color:var(--text-soft);margin:0 0 28px}

@media(min-width:901px){
  .hp-overons{padding:120px 0}
  .hp-overons .container{
    flex-direction:row;
    gap:80px;
    align-items:center;
    max-width:1200px;
    padding:0 32px;
  }
  .hp-overons-photo{flex:0 0 46%;max-width:none}
  .hp-overons-text{flex:1;max-width:none}
  .hp-overons-text h2{font-size:46px}
}

/* 3. WERKWIJZE - desktop verbindingslijnen tussen circles */
@media(min-width:901px){
  .hp-werk-steps{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:0 !important;
    max-width:1100px !important;
    margin:0 auto 50px !important;
    position:relative;
  }
  .hp-werk-step{
    position:relative;
    padding:0 16px;
  }
  .hp-werk-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:39px;            /* werk-num is 78px tall → center at 39px */
    left:calc(50% + 50px);
    right:calc(-50% + 50px);
    height:2px;
    background:var(--bronze);
    opacity:.42;
    z-index:0;
  }
  .hp-werk-num{
    position:relative;
    z-index:1;
    background:var(--bg);   /* hide the line behind the circle */
  }
}

/* ============================================================
   v55 - OVERLAY: heavy left, clear right, transition mid-viewport
   ============================================================ */

/* 1. NAV ITEMS must never break across lines.
   The global rule on line 9 sets overflow-wrap:break-word + hyphens:auto
   on every <a> and <li> - useful for long URLs in body text, but it
   breaks "Home" into "Hom-e" when the nav gets tight. Override only
   for the nav links. */
.nav-links a,
.nav-links li{
  hyphens:none !important;
  -webkit-hyphens:none !important;
  overflow-wrap:normal !important;
  word-wrap:normal !important;
  word-break:keep-all !important;
  white-space:nowrap !important;
}

/* 2. KILL THE DUPLICATE PHONE on desktop.
   <li class="mobile-menu-phone-item"> lives inside <ul class="nav-links">
   on every page for HTML symmetry with the .mobile-menu aside, but on
   desktop it renders alongside .nav-phone in .nav-cta - two identical
   "085 060 2661" pills next to each other. Hide the .nav-links copy.
   On mobile, .nav-links itself is display:none (see line 457) so this
   rule is a no-op there; the phone pill in the .mobile-menu aside is
   untouched and keeps working in the burger menu. */
.nav-links .mobile-menu-phone-item{display:none !important}

/* 3. HERO must fill the entire viewport - desktop AND mobile,
   with absolutely no strip of the next section peeking below.
   Three earlier rules were in the way:
     - line ~610: max-height:880px (capped hero on tall monitors)
                  margin-top:-80px (bottom edge 80px short of viewport)
     - line ~674: height:90vh on ≤600px (10% strip visible on phones)
   Plus the iOS Safari URL-bar quirk: 100vh on iOS = viewport WITHOUT
   the bar, so when the bar is visible there's a strip below the hero.
   Fix: force 100vh as fallback, then 100dvh on top for browsers that
   support it (Safari 15.4+, Chrome 108+, FF 101+) - dvh follows the
   URL bar dynamically, so the hero always equals the visible viewport.
   Older browsers ignore the second line and keep the 100vh fallback. */
.hp-hero-slider{
  margin-top:0 !important;
  height:100vh !important;
  height:100dvh !important;
  max-height:none !important;
}

/* 4. HERO TEXT VERTICALLY CENTERED on desktop.
   Parent .hp-hs-slide has justify-content:flex-end (line 2490) which
   stacks .hp-hs-content at the BOTTOM of the slide - that's why the
   eyebrow + title + button + stats currently sit at the bottom-left.
   Reference design has them in the LEFT-MIDDLE. Override the parent's
   flex anchor on desktop only. Reduce the heavy padding-bottom that
   was reserving space for the dots-nav (no longer needed when content
   is centered). Mobile keeps its bottom-anchored pattern - on small
   screens content + dots fit better stacked from the bottom. */
@media(min-width:901px){
  .hp-hs-slide{justify-content:center !important}
  .hp-hs-content{
    padding-top:60px !important;
    padding-bottom:60px !important;
  }
}

/* 5. HERO OVERLAY - heavy left, clear right, sharp transition mid.
   Reference matches at 0.80 max alpha on left with transition 50-78%. */
@media(min-width:901px){
  .hp-hs-overlay{
    background:linear-gradient(
      100deg,
      rgba(0,0,0,0.80) 0%,
      rgba(0,0,0,0.70) 35%,
      rgba(0,0,0,0.40) 55%,
      rgba(0,0,0,0.12) 78%,
      rgba(0,0,0,0) 100%
    ) !important;
  }
}

/* ============================================================
   v58 - CALCULATOR/CTA SECTION: dark → light theme
   Flip .hp-contact (and its calc wizard) from the dark palette to
   the cream/light palette, keeping the visual structure intact.
   Footer stays dark (separate selector, not touched).
   ============================================================ */

/* Section background + base text */
.hp-contact{
  background:var(--bg) !important;
  color:var(--brand-dark) !important;
}
.hp-contact h2,
.hp-calc-wizard > h3,
.calc-pane h4,
.calc-q-field > label,
.calc-svc-btn,
.calc-radio-row label,
.calc-checks label{color:var(--brand-dark) !important}
.hp-contact > .container > p{color:var(--text-soft) !important}
.calc-q-field > label > small{color:rgba(37,42,45,.55) !important}

/* Wizard card: elevated lighter surface on cream, with subtle shadow */
.hp-calc-wizard{
  background:var(--bg-card) !important;
  border:1px solid rgba(37,42,45,.08) !important;
  box-shadow:0 18px 40px rgba(37,42,45,.06);
}

/* Stepper line + inactive step circles */
.calc-stepper::before{background:rgba(37,42,45,.12) !important}
.calc-stepper .step .num{
  background:rgba(37,42,45,.06) !important;
  color:rgba(37,42,45,.55) !important;
}
.calc-stepper .step .label{color:rgba(37,42,45,.5) !important}
.calc-stepper .step.active .label,
.calc-stepper .step.completed .label{color:var(--bronze-dark) !important}

/* Service/radio/check tiles inside the wizard */
.calc-svc-btn,
.calc-radio-row label,
.calc-checks label{
  background:rgba(37,42,45,.03) !important;
  border-color:rgba(37,42,45,.12) !important;
}
.calc-svc-btn:hover,
.calc-svc-btn.active,
.calc-radio-row input[type=radio]:checked + label,
.calc-radio-row label:has(input:checked),
.calc-checks label:has(input:checked){
  background:color-mix(in srgb, var(--bronze) 12%, transparent) !important;
  border-color:var(--bronze) !important;
  color:var(--brand-dark) !important;
}

/* Form inputs inside wizard */
.hp-calc-wizard input[type=text],
.hp-calc-wizard input[type=email],
.hp-calc-wizard input[type=tel],
.hp-calc-wizard textarea{
  background:#fff !important;
  border-color:rgba(37,42,45,.15) !important;
  color:var(--brand-dark) !important;
}
.hp-calc-wizard input::placeholder,
.hp-calc-wizard textarea::placeholder{color:rgba(37,42,45,.4) !important}

/* ============================================================
   v59 - REVIEWS MARQUEE + HOVER POLISH + WA ICON
   ============================================================ */

/* 1. GOOGLE REVIEWS - auto-scroll marquee, mirrors the tips pattern.
   The JS now renders 2× cards (visible + aria-hidden duplicate) so
   the track loops seamlessly when translateX hits -50%. Hover pauses. */
.hpgr-marquee{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.hpgr-track{
  display:flex !important;
  gap:18px !important;
  width:max-content !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
  padding:8px 4px 28px !important;
  animation:hpgr-marquee 60s linear infinite;
}
.hpgr-track:hover{animation-play-state:paused}
.hpgr-card{scroll-snap-align:none !important}
@keyframes hpgr-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media(max-width:768px){
  .hpgr-track{animation-duration:45s}
}
@media (prefers-reduced-motion: reduce){
  .hpgr-track{animation:none !important;transform:none !important}
}

/* 2. WERKWIJZE NUMBERED CIRCLES - merkkleur hover state.
   Default: cream circle with bronze border + bronze number.
   Hover: circle fills with bronze, number turns white, slight lift
   and a glow. The "active" state during scroll-into-view also gets
   highlighted via .stagger transitions already. */
.hp-werk-step{cursor:default;text-align:center;align-items:center}
.hp-werk-step h3,.hp-werk-step p{text-align:center;width:100%}
.hp-werk-step:hover .hp-werk-num{
  background:var(--bronze) !important;
  border-color:var(--bronze) !important;
  color:#fff !important;
  transform:scale(1.08);
  box-shadow:0 10px 28px color-mix(in srgb, var(--bronze) 42%, transparent),0 0 0 8px color-mix(in srgb, var(--bronze) 10%, transparent);
}
.hp-werk-num{
  transition:background-color .3s var(--ease),color .3s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease) !important;
}

/* 3. CARD/TILE HOVER LIFTS - make them "come alive" more on hover.
   Existing rules used translateY(-4px); bumping to -8px with a softer
   bronze-tinted shadow for more presence. Tips/reviews cards are inside
   marquees and intentionally LEFT OUT - a hover-lift there would fight
   the auto-scroll. */
.hp-port-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease) !important}
.hp-port-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 22px 50px rgba(37,42,45,.18),0 4px 12px rgba(37,42,45,.08);
  z-index:2;
}
.hp-port-img{transition:transform .8s var(--ease)}
.hp-port-card:hover .hp-port-img{transform:scale(1.08)}
.hp-port-card:hover .hp-port-tag{transform:translateY(-2px)}
.hp-port-tag{transition:transform .35s var(--ease)}
.hp-svc-card{transition:transform .35s var(--ease),box-shadow .35s var(--ease) !important}
.hp-svc-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 22px 50px rgba(37,42,45,.14),0 4px 12px rgba(37,42,45,.06) !important;
}
.project-card:hover{
  transform:translateY(-8px) !important;
  box-shadow:0 22px 50px rgba(37,42,45,.18) !important;
}

/* DIENSTEN - bij hover op de kaart springen de vinkjes van boven naar beneden in */
@keyframes vinkje-drop{
  0%{opacity:0;transform:translateY(-14px) scale(.6)}
  60%{opacity:1;transform:translateY(4px) scale(1.12)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.hp-svc-features li::before{transform-origin:center}
.hp-svc-card:hover .hp-svc-features li::before{
  animation:vinkje-drop .5s var(--ease) both;
}
.hp-svc-card:hover .hp-svc-features li:nth-child(1)::before{animation-delay:.00s}
.hp-svc-card:hover .hp-svc-features li:nth-child(2)::before{animation-delay:.09s}
.hp-svc-card:hover .hp-svc-features li:nth-child(3)::before{animation-delay:.18s}
.hp-svc-card:hover .hp-svc-features li:nth-child(4)::before{animation-delay:.27s}
.hp-svc-card:hover .hp-svc-features li:nth-child(5)::before{animation-delay:.36s}
.hp-svc-card:hover .hp-svc-features li:nth-child(6)::before{animation-delay:.45s}
@media (prefers-reduced-motion: reduce){
  .hp-svc-card:hover .hp-svc-features li::before{animation:none}
}

/* ============================================================
   v60 - STATS ROW: anchor left / center / right + counter
   ============================================================ */

/* "Wat maakt ons uniek" stats: three items spread across the row.
   Grid columns are already repeat(3,1fr); each cell's content gets
   anchored left/center/right so the trio reads as left-middle-right.
   The count-up animation is driven by JS (data-count) - CSS doesn't
   need to do anything special, just keep tabular-figures so digits
   don't jitter horizontally while the value increments. */
.hp-vak-stats > div:nth-child(1){align-items:center;text-align:center}
.hp-vak-stats > div:nth-child(2){align-items:center;text-align:center}
.hp-vak-stats > div:nth-child(3){align-items:center;text-align:center}

.hp-vak-stats strong{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ============================================================
   v62 - HAKOB FEEDBACK ROUND: polish, tags, vinkjes, active page
   ============================================================ */

/* "Populairste keuze" tag - merkkleur accent bg, black text per {{EIGENAAR}} feedback */
.hp-svc-badge{
  background:var(--bronze) !important;
  color:var(--brand-dark) !important;
  font-size:10px !important;
  letter-spacing:1.2px !important;
  padding:6px 12px !important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--bronze) 32%, transparent) !important;
  border:none !important;
}

/* Service-card "vinkjes" - were 22px filled bronze circles ("in your face").
   Slim down: 18px circle, lighter background tint, smaller check icon. */
.hp-svc-features li::before{
  width:18px !important;
  height:18px !important;
  background-color:color-mix(in srgb, var(--bronze) 10%, transparent) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23C5A55A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.hp-svc-features li{font-size:14.5px !important;gap:12px !important}

/* Active page indicator - current page link in nav goes merkkleur.
   JS in main.js adds .is-active to the matching <a>. */
.nav-links a.is-active,
.mobile-menu a.is-active{
  color:var(--bronze) !important;
  font-weight:700 !important;
}
.nav-links a.is-active{position:relative}
.nav-links a.is-active::after{
  content:"";
  position:absolute;
  left:50%;transform:translateX(-50%);
  bottom:-6px;
  width:18px;height:2px;
  background:var(--bronze);
  border-radius:2px;
}

/* ============================================================
   v62 PHASE 2 - HEADER / NAV OVERHAUL
   ============================================================ */

/* Header background: top = fully transparent (hero peek-through);
   on scroll = anthracite semi-transparent bar (NO white). */
.nav.scrolled{
  background:rgba(37,42,45,.82) !important;
  backdrop-filter:saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter:saturate(140%) blur(14px) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.18) !important;
}
/* Logo stays the WHITE variant on both states (anthracite is dark) */
.nav.scrolled .nav-logo .logo-on-light{display:none !important}
.nav.scrolled .nav-logo .logo-on-dark{display:block !important}
/* Nav text + phone stay light on both states */
.nav-links a{color:rgba(255,255,255,.92) !important}
.nav-links a:hover{color:var(--bronze-light) !important}
.nav-phone{color:rgba(255,255,255,.92) !important}
.nav-phone:hover{color:var(--bronze) !important}

/* Mobile logo a subtle slag bigger */
@media (max-width:768px){
  .nav-logo img{height:36px !important}
}

/* Burger button - slightly smaller, semi-transparent bronze bg
   (matching the vinkjes' subtle tint). */
.nav-burger{
  width:40px !important;
  height:40px !important;
  background:color-mix(in srgb, var(--bronze) 18%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--bronze) 35%, transparent) !important;
  backdrop-filter:blur(6px);
}
.nav-burger:hover,.nav-burger.open{
  background:color-mix(in srgb, var(--bronze) 30%, transparent) !important;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after{background:#fff !important}

/* Language switcher in nav - small semi-transparent circle, flag only.
   Hide the "NL"/"GB" text - flag is self-explanatory. */
.nav-lang{display:flex;align-items:center}
.nav-lang-btn{
  width:40px;height:40px;
  border-radius:50% !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  backdrop-filter:blur(6px);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 !important;
  overflow:hidden;
}
.nav-lang-btn:hover{background:rgba(255,255,255,.20) !important}
.nav-lang-code{display:none !important}
.nav-flag{width:18px !important;height:auto !important;border-radius:2px}

/* Hide the floating bottom-left .lang switcher - its logic still runs
   in the background (proxied by .nav-lang-btn click).                  */
.lang{display:none !important}

/* ===== DROPDOWN SUBMENUS ===== */

/* Desktop: hover-show dropdown panel */
.nav-links .has-submenu{position:relative}
.nav-links .submenu{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:230px;
  background:rgba(37,42,45,.96);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 0;
  list-style:none;
  margin:0;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:120;
}
.nav-links .has-submenu:hover > .submenu,
.nav-links .has-submenu:focus-within > .submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.nav-links .submenu li{margin:0}
.nav-links .submenu a{
  display:block;
  padding:10px 20px;
  font-size:14.5px;
  font-weight:500 !important;
  color:rgba(255,255,255,.88) !important;
  white-space:nowrap;
}
.nav-links .submenu a:hover{
  background:color-mix(in srgb, var(--bronze) 18%, transparent) !important;
  color:var(--bronze-light) !important;
}
.nav-links .submenu a::after{display:none !important}

/* Caret indicator next to dropdown parents */
.nav-links .has-submenu > a::before{
  content:"";
  display:inline-block;
  width:0;height:0;
  margin-right:6px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  transform:translateY(-2px);
  opacity:.6;
  transition:transform .2s,opacity .2s;
}
.nav-links .has-submenu:hover > a::before{transform:translateY(0) rotate(180deg);opacity:1}

/* Mobile burger menu: submenu items shown nested, slightly indented */
.mobile-menu .has-submenu > a{font-weight:700}
.mobile-menu .submenu{
  list-style:none;
  padding:0 0 0 16px;
  margin:8px 0 12px;
  border-left:2px solid color-mix(in srgb, var(--bronze) 40%, transparent);
}
.mobile-menu .submenu li{margin:0}
.mobile-menu .submenu a{
  font-size:15px !important;
  font-weight:500 !important;
  padding:8px 0 !important;
  opacity:.85;
}

/* ============================================================
   v62 PHASE 3 - STATIC HERO CONTENT OVERLAY
   ============================================================ */

/* The new static-content overlay sits ABOVE the rotating slides.
   Reuses the visual styling of .hp-hs-content (eyebrow/title/desc/btn/stats),
   but is rendered ONCE and not tied to slide-active animations. */
.hp-hs-static-content{
  position:absolute;
  left:50%;
  top:44%;
  bottom:auto;
  transform:translate(-50%,-50%);
  width:100%;
  max-width:var(--container);
  padding:0 24px;
  color:var(--cream);
  z-index:3;
  pointer-events:none; /* let dot-clicks pass through to images */
}
.hp-hs-static-content > *{pointer-events:auto}

/* Reuse the inner element styles (eyebrow/title/desc/btn/stats already
   defined for .hp-hs-content children - they cascade by class, not by
   parent - so .hp-hs-eyebrow inside .hp-hs-static-content also styles). */

/* HERO ENTREE - elke regel komt zin-voor-zin smooth van LINKS binnen
   bij page-load (refresh / eerste bezoek). Vervangt de oude "direct
   zichtbaar"-override zodat de animatie echt speelt. */
.hp-hs-static-content .hp-hs-eyebrow,
.hp-hs-static-content .hp-hs-title,
.hp-hs-static-content .hp-hs-desc,
.hp-hs-static-content .hp-hs-btn,
.hp-hs-static-content .hp-hs-stats{
  opacity:0;
  transform:translateX(-60px);
  animation:hero-line-in 1s cubic-bezier(.19,1,.22,1) both;
}
@keyframes hero-line-in{
  from{opacity:0;transform:translateX(-60px)}
  to{opacity:1;transform:translateX(0)}
}
.hp-hs-static-content .hp-hs-eyebrow{animation-delay:.35s}
.hp-hs-static-content .hp-hs-title{animation-delay:.55s}
.hp-hs-static-content .hp-hs-desc{animation-delay:.78s}
.hp-hs-static-content .hp-hs-btn{animation-delay:1s}
.hp-hs-static-content .hp-hs-stats{animation-delay:1.2s}
@media (prefers-reduced-motion: reduce){
  .hp-hs-static-content .hp-hs-eyebrow,
  .hp-hs-static-content .hp-hs-title,
  .hp-hs-static-content .hp-hs-desc,
  .hp-hs-static-content .hp-hs-btn,
  .hp-hs-static-content .hp-hs-stats{
    opacity:1;transform:none;animation:none;
  }
}

/* Darker overlay on hero photos (per {{EIGENAAR}} feedback: text moet beter
   leesbaar zijn, niet wegvallen tegen de foto). Tighten the gradient. */
.hp-hero-static .hp-hs-overlay{
  background:linear-gradient(100deg,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.78) 35%,
    rgba(0,0,0,0.50) 55%,
    rgba(0,0,0,0.22) 78%,
    rgba(0,0,0,0.10) 100%
  ) !important;
}

@media (max-width:900px){
  .hp-hs-static-content{bottom:170px;padding:0 22px}
}
@media (max-width:640px){
  .hp-hs-static-content{bottom:160px}
}

/* ============================================================
   v62 PHASE 4 - CALCULATOR V2 (tabs + sliders + live price)
   ============================================================ */

.hp-calc-v2{
  background:var(--bg-dark-alt);
  border-radius:24px;
  padding:44px 38px 38px;
  box-shadow:0 30px 70px rgba(0,0,0,.35);
  position:relative;
  border:1px solid rgba(255,255,255,.06);
}
.hp-calc-v2 .eyebrow{color:var(--bronze-light);margin-bottom:8px}
.hp-calc-v2 > h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:32px;
  letter-spacing:-.02em;
  margin:0 0 6px;
  color:#fff;
}
.hp-calc-sub{
  font-size:15px;
  color:rgba(255,255,255,.65);
  margin:0 0 28px;
}

/* Service tabs row */
.calc-tabs{
  display:flex;
  gap:6px;
  background:rgba(0,0,0,.28);
  padding:6px;
  border-radius:14px;
  margin-bottom:30px;
}
.calc-tab{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 12px;
  background:transparent;
  border:none;
  color:rgba(255,255,255,.7);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.2px;
  border-radius:10px;
  cursor:pointer;
  transition:background-color .25s,color .25s;
  text-align:center;
}
.calc-tab svg{width:16px;height:16px;flex-shrink:0;opacity:.8}
.calc-tab:hover:not(.active){color:rgba(255,255,255,.95)}
.calc-tab.active{
  background:var(--bronze);
  color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb, var(--bronze) 32%, transparent);
}
.calc-tab.active svg{opacity:1}

/* Tab panes */
.calc-pane-v2{display:none}
.calc-pane-v2.active{display:block;animation:fadeInUp .35s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Slider */
.calc-slider{margin-bottom:24px}
.calc-slider > label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:14.5px;
  color:rgba(255,255,255,.85);
  margin-bottom:14px;
}
.calc-slider > label strong{
  color:var(--bronze-light);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:18px;
}
.calc-slider input[type=range]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:rgba(255,255,255,.14);
  border-radius:999px;
  outline:none;
  margin:6px 0;
}
.calc-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:22px;height:22px;
  background:var(--bronze);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 14px color-mix(in srgb, var(--bronze) 60%, transparent),0 0 0 4px color-mix(in srgb, var(--bronze) 15%, transparent);
  transition:transform .15s;
}
.calc-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.calc-slider input[type=range]::-moz-range-thumb{
  width:22px;height:22px;
  background:var(--bronze);
  border-radius:50%;
  cursor:pointer;
  border:none;
}
.calc-slider-hint{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  color:rgba(255,255,255,.4);
  margin-top:4px;
}

/* Radio rows */
.calc-options{
  display:flex;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.calc-radio{
  flex:1 1 calc(50% - 5px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  font-size:14px;
  color:rgba(255,255,255,.85);
  cursor:pointer;
  transition:background-color .2s,border-color .2s;
  min-width:0;
}
.calc-radio span{display:inline-flex;align-items:baseline;gap:6px;flex:1;min-width:0}
.calc-radio em{color:rgba(255,255,255,.5);font-style:normal;font-size:12.5px;font-weight:600}
.calc-radio input{accent-color:var(--bronze);width:16px;height:16px;flex-shrink:0}
.calc-radio:has(input:checked){
  background:color-mix(in srgb, var(--bronze) 13%, transparent);
  border-color:color-mix(in srgb, var(--bronze) 55%, transparent);
  color:#fff;
}
.calc-radio:has(input:checked) em{color:var(--bronze-light)}

/* Toggle (checkbox) rows */
.calc-toggle{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:8px;
}
.calc-toggle label{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:rgba(255,255,255,.82);
  cursor:pointer;
}
.calc-toggle input{accent-color:var(--bronze);width:16px;height:16px;flex-shrink:0}
.calc-toggle em{color:rgba(255,255,255,.5);font-style:normal;font-size:13px}

/* Tile-grid (keuken sizing) */
.calc-options-tiles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:8px;
}
.calc-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:22px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  cursor:pointer;
  text-align:center;
  transition:all .2s;
}
.calc-tile input{position:absolute;opacity:0;pointer-events:none}
.calc-tile strong{font-size:15.5px;font-weight:700;color:#fff;font-family:var(--font-heading)}
.calc-tile small{font-size:12px;color:rgba(255,255,255,.55)}
.calc-tile:has(input:checked){
  background:color-mix(in srgb, var(--bronze) 13%, transparent);
  border-color:color-mix(in srgb, var(--bronze) 55%, transparent);
  transform:translateY(-2px);
}
.calc-tile:has(input:checked) strong{color:var(--bronze-light)}

/* Live price display */
.calc-result-v2{
  margin-top:24px;
  background:linear-gradient(135deg,rgba(0,0,0,.32),rgba(0,0,0,.18));
  border:1px solid color-mix(in srgb, var(--bronze) 32%, transparent);
  border-radius:16px;
  padding:22px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.calc-result-lbl{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.calc-result-note{font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}
.calc-result-price{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:38px;
  color:var(--bronze-light);
  letter-spacing:-.02em;
  white-space:nowrap;
}

/* CTA */
.calc-cta-v2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:18px;
  padding:18px;
  background:var(--bronze);
  color:var(--brand-dark);
  text-decoration:none;
  border-radius:14px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15.5px;
  transition:transform .2s,background-color .2s,box-shadow .2s;
  box-shadow:0 8px 24px color-mix(in srgb, var(--bronze) 35%, transparent);
}
.calc-cta-v2:hover{
  background:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 12px 32px color-mix(in srgb, var(--bronze) 45%, transparent);
}
.calc-cta-v2 svg{width:18px;height:18px}

/* Mobile */
@media (max-width:640px){
  .hp-calc-v2{padding:30px 22px 26px}
  .hp-calc-v2 > h3{font-size:26px}
  .calc-tabs{flex-direction:column;gap:4px}
  .calc-tab{padding:11px 14px;justify-content:flex-start;font-size:14px}
  .calc-options-tiles{grid-template-columns:1fr}
  .calc-tile{flex-direction:row;justify-content:flex-start;padding:16px 18px;text-align:left}
  .calc-result-v2{flex-direction:column;text-align:center;align-items:stretch}
  .calc-result-price{font-size:32px}
}

/* Remove the OLD calculator-light-theme override block - calc returns to dark
   per {{EIGENAAR}} feedback (it was forced to a light theme in v58 - undo that). */
.hp-contact .hp-calc-wizard,
.hp-contact .hp-calc-wizard *{
  /* Defensive: ensure no stale styles from removed wizard hit our v2 calc */
}

/* ============================================================
   v62 PHASE 5 - TIP MODAL, FOOTER, MARQUEE, POLISH
   ============================================================ */

/* --- Tip card → modal popup (homepage tips section) --- */
.hp-tips-card{cursor:pointer}   /* visual cue: clickable */
.tip-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.tip-modal.is-open{opacity:1;visibility:visible}
.tip-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(15,17,19,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}
.tip-modal-panel{
  position:relative;
  width:85vw;
  max-width:900px;
  height:auto;
  max-height:85vh;
  overflow-y:auto;
  background:var(--bg-card);
  border-radius:22px;
  border-top:6px solid var(--bronze);  /* merkkleur default for tips */
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.97);
  transition:transform .3s var(--ease);
}
.tip-modal.is-open .tip-modal-panel{transform:translateY(0) scale(1)}
.tip-modal.is-news .tip-modal-panel{border-top-color:#3FAA67}  /* green for "Nieuws" category */

/* Close button - merkkleur circle with white X, top-right, easy to spot */
.tip-modal-close{
  position:absolute;
  top:18px;right:18px;
  width:44px;height:44px;
  background:var(--bronze);
  border:none;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb, var(--bronze) 45%, transparent);
  transition:background-color .2s,transform .2s,box-shadow .2s;
  z-index:2;
}
.tip-modal-close:hover{
  background:var(--bronze-dark);
  transform:rotate(90deg) scale(1.05);
  box-shadow:0 6px 18px color-mix(in srgb, var(--bronze) 60%, transparent);
}
.tip-modal-close svg{width:20px;height:20px;stroke-width:2.6}

.tip-modal-img{
  width:100%;
  aspect-ratio:21/9;  /* a touch wider/shorter so the image header doesn't dominate the larger panel */
  background-size:cover;
  background-position:center;
}
.tip-modal-body{padding:36px 44px 40px}

/* Article paragraphs inside the modal - readable typography */
.tip-modal-body #tipModalDesc p{
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  margin:0 0 16px;
}
.tip-modal-body #tipModalDesc p:last-child{margin-bottom:0}
.tip-modal-body #tipModalDesc strong{color:var(--brand-dark);font-weight:700}

/* On smaller screens, expand to nearly full width since 85vw of a small phone is still narrow */
@media (max-width:600px){
  .tip-modal-panel{width:92vw;max-height:88vh}
  .tip-modal-body{padding:24px 22px 28px}
  .tip-modal-close{top:14px;right:14px;width:40px;height:40px}
  .tip-modal-body #tipModalDesc p{font-size:15px;line-height:1.65}
}
.tip-modal-tag{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--bronze-dark);
  background:color-mix(in srgb, var(--bronze) 13%, transparent);
  padding:5px 11px;
  border-radius:999px;
  margin-bottom:14px;
  border:1.5px solid color-mix(in srgb, var(--bronze) 65%, transparent);
}
.tip-modal-tag.tag-nieuws{
  color:#2B7A48;
  background:rgba(63,170,103,.13);
  border-color:rgba(63,170,103,.55);
}
.tip-modal-body h3{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--brand-dark);
  margin:0 0 14px;
}
.tip-modal-body p{
  font-size:15px;
  line-height:1.6;
  color:var(--text);
  margin:0 0 18px;
}
.tip-modal-meta{
  display:flex;
  gap:14px;
  font-size:12.5px;
  color:var(--text-muted);
  margin-bottom:22px;
}
.tip-modal-meta .lees{display:none}  /* hide the "Lees meer →" in modal */
.tip-modal-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:15px;
  background:var(--bronze);
  color:var(--brand-dark);
  text-decoration:none;
  border-radius:12px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14.5px;
  transition:transform .2s,background-color .2s;
}
.tip-modal-cta:hover{background:var(--bronze-dark);color:#fff;transform:translateY(-2px)}
.tip-modal-cta svg{width:16px;height:16px}

/* --- Tips marquee: REMOVE fade-out edges (per {{EIGENAAR}}) --- */
.hp-tips-marquee{
  -webkit-mask-image:none !important;
          mask-image:none !important;
}

/* --- Footer rebuild --- */
.footer-benefits{
  list-style:none;
  padding:0;
  margin:18px 0 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-benefits li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14.5px;
  color:rgba(247,245,242,.85);
}
.footer-benefits svg{
  width:18px;height:18px;
  flex-shrink:0;
  color:var(--bronze);
  background:color-mix(in srgb, var(--bronze) 12%, transparent);
  border-radius:50%;
  padding:3px;
  box-sizing:border-box;
}

/* Social icons: merkkleur color on icon (no bg circle merkkleur) - hover affects icon only */
.footer-social a{
  color:var(--bronze) !important;
  border-color:color-mix(in srgb, var(--bronze) 32%, transparent) !important;
}
.footer-social a:hover{
  background:transparent !important;   /* no bg-fill on hover */
  color:var(--bronze-light) !important;
  border-color:var(--bronze) !important;
  transform:translateY(-2px);
}

/* --- Diagonal merkkleur/anthracite at bottom of service pages → flat white --- */
.seo-stripe,
.diensten-cta-band,
.service-bottom-band,
.svc-cta-band{
  background:#FAFAF7 !important;   /* slightly different white tint vs main bg */
  border-top:1px solid var(--border-soft) !important;
  color:var(--brand-dark) !important;
}
.seo-stripe *,
.diensten-cta-band *,
.service-bottom-band *,
.svc-cta-band *{
  color:var(--brand-dark) !important;
}
.seo-stripe::before,.seo-stripe::after,
.diensten-cta-band::before,.diensten-cta-band::after{
  display:none !important;
}

/* --- Vertical subtle lines on right side: REMOVE if any --- */
html, body { background:var(--bg); }
body::before, body::after { display:none !important; }
section[class]::after, section[class]::before {
  /* Kill any subtle right-edge gradient/border that might draw vertical lines */
  /* (defensive - only nukes pseudo-elements that aren't reset elsewhere) */
}

/* Strict white → champagne alternation from over-ons to greviews
   (hero is dark, hp-contact is dark, those don't participate) */
.hp-overons{background:var(--bg) !important}        /* 1. WIT */
.hp-vakwerk{background:var(--bg-alt) !important}    /* 2. CHAMPAGNE */
.hp-services{background:var(--bg) !important}       /* 3. WIT */
.hp-werkwijze{background:var(--bg-alt) !important}  /* 4. CHAMPAGNE */
.hp-portfolio{background:var(--bg) !important}      /* 5. WIT */
.hp-tips{background:var(--bg-alt) !important}       /* 6. CHAMPAGNE */
.hp-greviews{background:var(--bg) !important}       /* 7. WIT */
.hp-reviews{background:var(--bg-alt) !important}    /* (alt class name, if used elsewhere) */
.hp-contact{background:var(--bg-dark)}              /* dark - calc section */

/* ============================================================
   v62 PHASE 5 - Override v58 light-theme on .hp-contact
   The v58 block (line ~2820) forced .hp-contact to light bg for the
   old wizard. New calc-v2 sits on dark - restore dark surroundings.
   ============================================================ */
.hp-contact{
  background:var(--bg-dark) !important;
  color:#fff !important;
}
.hp-contact h2{color:#fff !important}
.hp-contact .eyebrow{color:var(--bronze-light) !important}
.hp-contact > .container > p{color:rgba(255,255,255,.75) !important}

/* ============================================================
   v62 PATCH - items I missed in first pass + bold-word emphasis
   ============================================================ */

/* WhatsApp bubble - circle size stays the same. Icon inside enlarged
   so the WhatsApp logo sits closer to the bubble edges (per {{EIGENAAR}}). */
.wa-btn,.tel-btn{width:54px !important;height:54px !important}.tel-btn{bottom:84px !important}
.wa-btn svg{width:42px !important;height:42px !important}
@media (max-width:768px){
  .wa-btn,.tel-btn{width:50px !important;height:50px !important}.tel-btn{bottom:80px !important}
  .wa-btn svg{width:38px !important;height:38px !important}
}

/* Bold-word emphasis: utility class for highlighting key value words like
   "3 jaar garantie", "gratis", "binnen 24 uur" in body text. */
.bold-word, .hl-bold{
  font-weight:800 !important;
  color:var(--brand-dark) !important;
}

/* Auto-bold known key phrases in "Wat maakt ons uniek" + werkwijze
   sections without HTML edits. Uses text-content surrounding selectors. */
.hp-vakwerk strong, .hp-werkwijze strong{
  font-weight:800;
  color:var(--brand-dark);
}

/* ============================================================
   v62 PATCH 2 - SCROLLABLE + AUTO-MOVING MARQUEES
   Convert tips + reviews from CSS-animation to JS-driven scroll:
   the wrapper becomes the scroll container (overflow-x:auto), JS
   advances scrollLeft each frame. User swipe/scroll pauses for 3s
   then auto-scroll resumes. Hidden scrollbar, seamless loop because
   track has duplicate content (snap back at 50%).
   ============================================================ */

/* ----- TIPS ----- */
.hp-tips-marquee{
  overflow-x:auto !important;
  overflow-y:visible !important;
  scrollbar-width:none;
  scroll-behavior:auto;   /* exact px control, not smooth */
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:none !important;
          mask-image:none !important;
  cursor:grab;
}
.hp-tips-marquee::-webkit-scrollbar{display:none}
.hp-tips-marquee:active{cursor:grabbing}
.hp-tips-track{
  animation:none !important;
  transform:none !important;
  will-change:auto;
}

/* ----- REVIEWS ----- */
.hpgr-marquee{
  overflow-x:auto !important;
  overflow-y:visible !important;
  scrollbar-width:none;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  -webkit-mask-image:none !important;
          mask-image:none !important;
  cursor:grab;
}
.hpgr-marquee::-webkit-scrollbar{display:none}
.hpgr-marquee:active{cursor:grabbing}
.hpgr-track{
  animation:none !important;
  transform:none !important;
  will-change:auto;
}

/* Both marquees: respect reduced-motion (no auto-scroll, user-scroll only) */
@media (prefers-reduced-motion: reduce){
  .hp-tips-marquee, .hpgr-marquee{cursor:auto}
}

/* ============================================================
   v62 PATCH 2 - NL map in footer + Mijn verhaal section + cleanup
   ============================================================ */

/* Footer NL map */
.footer-nl-map{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.footer-nl-map svg{
  width:60px;
  height:70px;
  flex-shrink:0;
}
.footer-nl-map-label{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:13px;
  color:var(--bronze-light);
  letter-spacing:.3px;
}

/* Mijn verhaal section on /over-ons/ */
.over-mijn-verhaal{
  padding:80px 0;
  background:#FAFAF7;   /* alt-white tint for visual separation */
}
.over-mijn-verhaal .content-2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.over-mijn-verhaal .content-img img{
  width:100%;
  border-radius:18px;
  box-shadow:0 22px 50px rgba(37,42,45,.12);
  aspect-ratio:4/5;
  object-fit:cover;
}
@media (max-width:900px){
  .over-mijn-verhaal{padding:60px 0}
  .over-mijn-verhaal .content-2col{grid-template-columns:1fr;gap:32px}
}

/* Defensive: kill any potential right-edge vertical artefact lines */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100vw}
*::-webkit-scrollbar-track{background:transparent !important}
section,div,article{border-right:none !important;border-left:none !important}

/* Restore borders for elements that DO need them (white-list) */
.nav, .nav.scrolled{border-right:none !important}
.calc-tab, .calc-radio, .calc-tile, .tip-modal-panel{
  /* These need their own borders preserved - selective re-allow */
}
.calc-tab{border-right:0 !important;border-left:0 !important}
.calc-radio, .calc-tile{
  border:1px solid rgba(255,255,255,.10) !important;
}
.calc-radio:has(input:checked), .calc-tile:has(input:checked){
  border:1px solid color-mix(in srgb, var(--bronze) 55%, transparent) !important;
}
.mobile-menu .submenu{border-left:2px solid color-mix(in srgb, var(--bronze) 40%, transparent) !important}
.footer-social a{
  border:1px solid color-mix(in srgb, var(--bronze) 32%, transparent) !important;
}
.footer-social a:hover{
  border:1px solid var(--bronze) !important;
}

/* ============================================================
   v62 PATCH 3 - TRANSPARENT NAV AT TOP, FLAG SVG SIZING
   At top of page: only logo (left) + flag + burger (right) floating
   over the hero photo. NO bar, NO background, NO shadow, NO blur.
   On scroll: anthracite semi-transparent bar appears (existing behavior).
   ============================================================ */

/* Default nav state (NOT scrolled) - transparant op de homepage (donkere hero eronder) */
.nav:not(.scrolled){
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-bottom:none !important;
  border-top:none !important;
}
/* Op subpagina's (body.has-subhero) staat de transparante balk deels over een
   lichte achtergrond → witte tekst onleesbaar. Geef de balk daar een effen
   donkere achtergrond die naadloos aansluit op de donkere subhero eronder. */
body.has-subhero .nav:not(.scrolled){
  background:var(--brand-darker) !important;
}

/* Phone + Offerte-knop blijven ALTIJD zichtbaar op desktop - ook bovenaan
   (nav niet-gescrolld). Ze zweven dan over de donkere hero, dus lichte tekst.
   Mobiel blijven ze verborgen via de display:none-regel hierboven. */
.nav .nav-phone,
.nav .nav-cta > .btn.btn-primary{
  opacity:1;
  pointer-events:auto;
  transition:opacity .25s var(--ease);
}
/* Bovenaan over de donkere hero: lichte/leesbare uitvoering */
.nav:not(.scrolled) .nav-phone{
  color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.nav:not(.scrolled) .nav-phone svg{
  color:var(--bronze) !important;
}
.nav:not(.scrolled) .nav-cta > .btn.btn-primary{
  background:var(--bronze) !important;
  color:#fff !important;
  border-color:var(--bronze) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.nav:not(.scrolled) .nav-cta > .btn.btn-primary:hover{
  background:var(--bronze-dark) !important;
}

/* GB flag SVG sizing - the GB flag has different viewBox proportions
   (60x30) than NL (9x6), so without explicit sizing the GB flag would
   render larger. Both should fit in the small circular nav-lang-btn. */
.nav-lang-btn .nav-flag{
  width:18px !important;
  height:auto !important;
  max-height:13px;
  border-radius:2px;
  display:block;
}

/* Smooth flag swap visual */
.nav-lang-btn{transition:background-color .2s, transform .15s}
.nav-lang-btn:active{transform:scale(.94)}

/* ============================================================
   v63 PATCH - ORANGE-FIT STYLE FLOATING PILL HEADER
   - No more anthracite bar on scroll: nav stays fully transparent always
   - Right side: merkkleur pill capsule containing flag + burger icons
   - Logo (left): visible at top, fades out on scroll, fades back in at top
   - Inspiration: orangefit.nl mobile header
   ============================================================ */

/* MOBILE ONLY (≤768px): kill the anthracite bar, hide logo on scroll.
   Desktop keeps its anthracite scrolled bar because the horizontal
   nav-links need a contrasting background once you scroll past hero. */
@media (max-width:768px){
  .nav.scrolled{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:none !important;
    border-bottom:none !important;
    padding:18px 24px !important;
  }

  /* Logo: visible at top, fades out on scroll, fades back in at top */
  .nav-logo{
    transition:opacity .35s var(--ease), transform .35s var(--ease);
    will-change:opacity, transform;
  }
  .nav.scrolled .nav-logo{
    opacity:0;
    transform:translateX(-12px);
    pointer-events:none;
  }
  .nav:not(.scrolled) .nav-logo{
    opacity:1;
    transform:translateX(0);
  }
}

/* MOBILE: nav-cta is een pill in de merkkleur met twee cirkels (vlag + burger).
   Two-tone design: deeper merkkleur outside, lighter merkkleur inside each button. */
@media (max-width:768px){
  /* Outer pill: deeper merkkleur (brand bronze), capsule shape */
  .nav-cta{
    background:color-mix(in srgb, var(--bronze) 85%, transparent) !important;  /* brand-accent (merkkleur) */
    backdrop-filter:blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(14px) saturate(150%) !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px !important;
    padding:5px !important;
    gap:5px !important;
    box-shadow:0 6px 20px rgba(0,0,0,.18) !important;
  }

  /* Flag button: lighter-merkkleur circle inside the pill */
  .nav-cta .nav-lang-btn{
    background:var(--bronze) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid var(--bronze-light) !important;
    border-radius:50% !important;
    width:38px !important;
    height:38px !important;
    box-shadow:none !important;
  }
  .nav-cta .nav-lang-btn:hover{
    background:var(--bronze-dark) !important;
  }

  /* Burger button: same lighter-merkkleur circle look as flag */
  .nav-cta .nav-burger{
    background:var(--bronze) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid var(--bronze-light) !important;
    border-radius:50% !important;
    width:38px !important;
    height:38px !important;
    box-shadow:none !important;
  }
  .nav-cta .nav-burger:hover,
  .nav-cta .nav-burger.open{
    background:var(--bronze-dark) !important;
  }

  /* Burger lines: light cream so they contrast on the lighter-merkkleur circle */
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{
    background:#fff !important;
  }

  /* Hide phone + primary CTA on mobile (only the pill + 2 circles visible) */
  .nav-cta > .nav-phone,
  .nav-cta > .btn.btn-primary{
    display:none !important;
  }
}

/* ============================================================
   v67 PATCH - LOGO ↔ FAVICON SWAP ON SCROLL (mobile)
   At top: full logo+name visible. On scroll: only favicon (O-mark)
   with transparent background. Both crossfade smoothly.
   ============================================================ */

/* Favicon is hidden by default (only mobile-scrolled state shows it) */
.nav-logo .logo-favicon{
  display:none;
}

@media (max-width:768px){
  /* Override the older rule that faded the whole nav-logo on scroll -
     we want nav-logo to stay visible; only its CONTENT swaps. */
  .nav.scrolled .nav-logo,
  .nav:not(.scrolled) .nav-logo{
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  /* Stack the full logo + favicon at the same position so they can crossfade */
  .nav-logo{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .nav-logo .logo-on-dark{
    transition:opacity .35s var(--ease);
  }
  .nav-logo .logo-favicon{
    display:block;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s var(--ease);
    background:transparent;
  }

  /* At top: full logo visible, favicon hidden */
  .nav:not(.scrolled) .nav-logo .logo-on-dark{opacity:1}
  .nav:not(.scrolled) .nav-logo .logo-favicon{opacity:0}

  /* On scroll: full logo fades out, favicon fades in */
  .nav.scrolled .nav-logo .logo-on-dark{opacity:0}
  .nav.scrolled .nav-logo .logo-favicon{opacity:1;pointer-events:auto}

  /* Hide unused logo-on-light variant on mobile */
  .nav-logo .logo-on-light{display:none !important}
}

/* ============================================================
   v68 PATCH - THICKER MAIN HEADINGS (per {{EIGENAAR}})
   Manrope's heaviest weight is 800, which is already applied. To make
   the main titles visibly thicker WITHOUT increasing size, we use
   -webkit-text-stroke with paint-order so the stroke renders behind
   the fill (no outline look - just visually heavier strokes).
   ============================================================ */
h1, h2{
  -webkit-text-stroke:0.6px currentColor;
  paint-order:stroke fill;
  text-rendering:geometricPrecision;
}

/* Very large display headings get a slightly heavier stroke so the
   weight gain stays proportional to letter size */
.hp-fans-text h2,
.hp-why-intro-text h2{
  -webkit-text-stroke:0.85px currentColor;
}

/* Section sub-headings (h3 inside main content cards) also a touch heavier */
.hp-why-card h3,
.hp-svc h3,
.hp-ex-text h3{
  -webkit-text-stroke:0.4px currentColor;
  paint-order:stroke fill;
}

/* v69 PATCH - Review cards are now clickable <a> tags (link to {{BEDRIJFSNAAM}}
   Google Maps). Override default anchor styling so cards render the same as
   before but with link cursor + proper navigation. */
a.hpgr-card{
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer;
}
a.hpgr-card:hover{
  transform:translateY(-1px);
}

/* ============================================================
   v86 PATCH - TRANSLATION-SAFE LAYOUT
   Ensures text remains nicely contained when Google Translate
   replaces Dutch with English/other languages (often longer words).
   Universal: helps Dutch too, just polite text handling.
   ============================================================ */
h1, h2, h3, h4, h5, h6, .hp-svc-card h3, .hp-tips-card h3, .hpgr-name{
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:manual;
  -webkit-hyphens:manual;
}

/* Navigation links: allow gentle wrapping if a translated word is too long */
.nav-links a, .mobile-menu a{
  overflow-wrap:anywhere;
  hyphens:none;
}

/* Buttons stay on one line but constrain max-width sensibly */
.btn, .hp-hs-btn, .calc-cta-v2, .tip-modal-cta{
  max-width:100%;
  overflow-wrap:normal;
}

/* Form labels - typically longer in English */
.form-group label, .calc-radio span, .calc-tile strong{
  overflow-wrap:break-word;
}

/* Service-card features list - checkmark items */
.hp-svc-features li, .footer-benefits li{
  overflow-wrap:break-word;
}

/* When translated (data-lang set by head script): slightly tighter
   tracking + smaller line-height adjustment on very large headings to
   prevent multi-line growth */
html[data-lang]:not([data-lang="nl"]) .hp-fans-text h2,
html[data-lang]:not([data-lang="nl"]) .hp-why-intro-text h2{
  letter-spacing:-.045em;
  line-height:.94;
}
html[data-lang]:not([data-lang="nl"]) .hp-why-card h3{
  font-size:clamp(20px, 2.6vw, 28px);
}

/* Translate skiptranslate elements (Google's banner) stay hidden */
.skiptranslate{display:none !important}
body{top:0 !important}

/* === {{BEDRIJFSNAAM}} - contact-grid (vervangt calculator) === */
.calc-contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:26px 0 8px}
.calc-contact-item{display:flex;align-items:flex-start;gap:14px;text-align:left}
.calc-contact-item svg{width:26px;height:26px;flex-shrink:0;color:var(--bronze) !important;margin-top:2px}
.calc-contact-item strong{display:block;color:var(--brand-dark) !important;font-family:var(--font-heading);font-size:15px;margin-bottom:2px}
.calc-contact-item span{display:block;color:var(--text-soft) !important;font-size:14.5px;line-height:1.4}
@media(max-width:600px){.calc-contact-grid{grid-template-columns:1fr;gap:16px}}

/* === Downtime-calculator tagline === */
.dt-tagline{margin:18px 0 4px;font-size:14.5px;line-height:1.6;color:rgba(246,244,241,.82) !important;text-align:center;padding:14px 16px;border-radius:var(--r);background:rgba(243,147,20,.08);border:1px solid rgba(243,147,20,.25)}
.dt-tagline strong{color:var(--bronze-light) !important}

/* ============================================================
   SITE-WIDE SCROLL REVEAL - auto-applied (zie autoreveal.js)
   tekst: van links · foto's: van rechts · kolommen/kaarten: unieke flip
   ============================================================ */

/* Auto-reveal base (los van bestaande .reveal classes)
   Alleen verbergen als JS de reveal echt aanzet (html.ar-on),
   anders blijft alles gewoon zichtbaar - geen risico op witte pagina. */
.ar-on .ar{opacity:0;will-change:transform,opacity}
.ar-on .ar.in-view{opacity:1}

/* TEKST → smooth van links binnen, rust door naar zijn plek */
.ar-on .ar-left{transform:translateX(-52px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.ar-on .ar-left.in-view{transform:none}

/* BEELD → van rechts binnen */
.ar-on .ar-right{transform:translateX(52px);transition:opacity .95s var(--ease),transform 1.05s var(--ease)}
.ar-on .ar-right.in-view{transform:none}

/* compat: oude flip valt nu terug op schone slide-up (geen 3D meer) */
.ar-on .ar-flip{transform:translateY(38px);transition:opacity .9s var(--ease),transform .95s var(--ease)}
.ar-on .ar-flip.in-view{transform:none}

/* STAGGER → kinderen glijden clean van links na elkaar binnen (geen rotateX) */
.ar-on .ar-stagger > *{opacity:0;transform:translateX(-40px);will-change:transform,opacity}
.ar-on .ar-stagger.in-view > *{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .85s var(--ease)}
.ar-on .ar-stagger.in-view > *:nth-child(1){transition-delay:.00s}
.ar-on .ar-stagger.in-view > *:nth-child(2){transition-delay:.10s}
.ar-on .ar-stagger.in-view > *:nth-child(3){transition-delay:.20s}
.ar-on .ar-stagger.in-view > *:nth-child(4){transition-delay:.30s}
.ar-on .ar-stagger.in-view > *:nth-child(5){transition-delay:.40s}
.ar-on .ar-stagger.in-view > *:nth-child(6){transition-delay:.50s}
.ar-on .ar-stagger.in-view > *:nth-child(7){transition-delay:.60s}
.ar-on .ar-stagger.in-view > *:nth-child(8){transition-delay:.70s}
.ar-on .ar-stagger.in-view > *:nth-child(n+9){transition-delay:.78s}

/* WOORD-REVEAL → elk woord van koppen zweeft los van onder/links in */
.ar-on .ar-words{opacity:1}
.ar-on .ar-words .ar-word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.5em) translateX(-8px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  will-change:transform,opacity;
}
.ar-on .ar-words.in-view .ar-word{opacity:1;transform:none}

/* HEADER - vloeiend inladen bij paginastart */
@keyframes ar-navdrop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
.nav{animation:ar-navdrop .8s var(--ease) both}
@keyframes ar-navfade{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.nav .nav-logo{animation:ar-navfade .7s var(--ease) .25s both}
.nav .nav-links > li{animation:ar-navfade .6s var(--ease) both}
.nav .nav-links > li:nth-child(1){animation-delay:.30s}
.nav .nav-links > li:nth-child(2){animation-delay:.37s}
.nav .nav-links > li:nth-child(3){animation-delay:.44s}
.nav .nav-links > li:nth-child(4){animation-delay:.51s}
.nav .nav-links > li:nth-child(5){animation-delay:.58s}
.nav .nav-cta{animation:ar-navfade .7s var(--ease) .6s both}

/* HERO content entree wordt nu class-based geregeld (hero-line-in),
   zie .hp-hs-static-content .hp-hs-* hierboven. */

/* Respecteer toegankelijkheid + no-js */
@media (prefers-reduced-motion: reduce){
  .ar,.ar-left,.ar-right,.ar-flip,.ar-stagger>*,.ar-words .ar-word{opacity:1 !important;transform:none !important;transition:none !important}
  .nav,.nav *,.hp-hs-static-content>*{animation:none !important}
}
.no-js .ar,.no-js .ar-left,.no-js .ar-right,.no-js .ar-flip,.no-js .ar-stagger>*,.no-js .ar-words .ar-word{opacity:1;transform:none}

/* ============================================================
   CHATBOT - aanvraag-assistent linksonder (FormSubmit -> eigenaar)
   ============================================================ */
.agbot{position:fixed;left:24px;bottom:24px;z-index:9998;font-family:var(--font-body,'Manrope',sans-serif)}
.agbot *{box-sizing:border-box}
/* launcher-knop */
.agbot-launch{display:flex;align-items:center;gap:10px;background:var(--bronze);color:#1C1F22;border:none;border-radius:999px;padding:14px 20px 14px 16px;font-family:var(--font-heading,'Manrope',sans-serif);font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 12px 30px rgba(243,147,20,.4);transition:transform .25s var(--ease,cubic-bezier(.33,.05,.2,1)),box-shadow .25s}
.agbot-launch:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(243,147,20,.5)}
.agbot-launch svg{width:22px;height:22px;flex:none}
.agbot-launch .agbot-launch-close{display:none}
.agbot.open .agbot-launch .agbot-launch-open{display:none}
.agbot.open .agbot-launch .agbot-launch-close{display:block}
.agbot.open .agbot-launch{padding:14px;width:54px;height:54px;justify-content:center}
.agbot.open .agbot-launch .agbot-launch-label{display:none}
/* chatvenster */
.agbot-panel{position:absolute;left:0;bottom:72px;width:370px;max-width:calc(100vw - 48px);background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(20px) scale(.96);transform-origin:left bottom;pointer-events:none;transition:opacity .3s var(--ease,ease),transform .3s var(--ease,ease)}
.agbot.open .agbot-panel{opacity:1;transform:none;pointer-events:auto}
.agbot-header{background:var(--brand-darker,#121417);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:12px}
.agbot-avatar{width:42px;height:42px;border-radius:50%;background:var(--bronze);display:flex;align-items:center;justify-content:center;flex:none}
.agbot-avatar svg{width:24px;height:24px;color:#1C1F22}
.agbot-htext strong{display:block;font-family:var(--font-heading,sans-serif);font-weight:700;font-size:15px;line-height:1.2}
.agbot-htext span{font-size:12.5px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:6px}
.agbot-htext span::before{content:'';width:8px;height:8px;border-radius:50%;background:#46d369}
.agbot-body{padding:18px;height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;background:#F6F4F1}
.agbot-msg{max-width:80%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;animation:agbotIn .4s var(--ease,ease) both}
@keyframes agbotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.agbot-msg.bot{align-self:flex-start;background:#fff;color:#1C1F22;border-bottom-left-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.agbot-msg.user{align-self:flex-end;background:var(--bronze);color:#1C1F22;font-weight:600;border-bottom-right-radius:4px}
.agbot-quick{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;background:#F6F4F1}
.agbot-quick button{width:100%;text-align:left;background:#fff;border:1.5px solid var(--bronze);color:var(--bronze-dark,#D97D08);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}.agbot-quick button:hover{background:var(--bronze);color:#fff;box-shadow:0 6px 18px -8px var(--bronze)}
.agbot-quick button:hover{background:var(--bronze);color:#1C1F22}
.agbot-input{display:flex;gap:8px;padding:14px 16px;border-top:1px solid #eee;background:#fff}
.agbot-input input{flex:1;border:1.5px solid #e2e0dc;border-radius:999px;padding:11px 16px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s}
.agbot-input input:focus{border-color:var(--bronze)}
.agbot-input button{background:var(--bronze);border:none;border-radius:50%;width:44px;height:44px;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.agbot-input button:hover{transform:scale(1.08)}
.agbot-input button svg{width:20px;height:20px;color:#1C1F22}
.agbot-input.hidden{display:none}
@media(max-width:520px){
  .agbot{left:16px;bottom:16px}
  .agbot-panel{bottom:68px;width:calc(100vw - 32px)}
  .agbot-body{height:46vh}
}

/* ============================================================
   MERKEN-MARQUEE - bewegende logobalk onder "Wat maakt ons uniek"
   ============================================================ */
.hp-brands{padding:10px 0 64px;background:var(--bg)}
.hp-brands-label{text-align:center;font-family:var(--font-heading);font-weight:600;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted,#8a8a8a);margin:0 0 30px}
.hp-brands-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  /* mooie inblend aan beide randen: logo's faden in/uit */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.hp-brands-track{
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation:brandscroll 38s linear infinite;
}
.hp-brands-marquee:hover .hp-brands-track{animation-play-state:paused}
.hp-brands-track img{
  height:46px;
  width:auto;
  flex:none;
  object-fit:contain;
  opacity:.55;
  filter:grayscale(100%);
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.hp-brands-track img:hover{opacity:1;filter:grayscale(0%)}
@keyframes brandscroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:640px){
  .hp-brands{padding:6px 0 48px}
  .hp-brands-track{gap:44px;animation-duration:28s}
  .hp-brands-track img{height:38px}
}
@media (prefers-reduced-motion: reduce){
  .hp-brands-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}
}

/* ============================================================
   SKILL-ADDITIES (uit BOARDSORT-sessie) - palet-agnostisch
   Gebruik CSS-variabelen zodat alles meekleurt met het klantlogo.
   ============================================================ */

/* ===== GOOGLE REVIEWS - oneindige loop-carrousel (zelfde loop als tips) =====
   Plaats direct ONDER de tips-sectie. 2 IDENTIEKE setjes kaarten in
   .hp-grev-track + translateX(-50%) -> naadloze loop. Pauzeert op hover.
   PLACEHOLDER-reviews: vervang door echte; houd beide setjes gelijk. */
.hp-grev{padding:0 0 90px}
.hp-grev-head{display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap}
.hp-grev-glogo{flex-shrink:0}
.hp-grev-headtext{display:flex;flex-direction:column;line-height:1.2}
.hp-grev-rating{display:flex;align-items:center;gap:8px}
.hp-grev-rating strong{font-family:var(--font-heading);font-size:24px;font-weight:800;color:var(--brand-dark)}
.hp-grev-stars{color:#FBBC05;font-size:18px;letter-spacing:1px}
.hp-grev-sub{font-size:13.5px;color:var(--text-muted);font-weight:600}
.hp-grev-write{margin-left:auto;display:inline-flex;align-items:center;font-family:var(--font-heading);font-weight:700;font-size:14px;color:var(--bronze-dark);border:1.5px solid var(--bronze);padding:10px 18px;border-radius:999px;transition:background .2s,color .2s}
.hp-grev-write:hover{background:var(--bronze);color:#fff;border-color:var(--bronze)}
.hp-grev-marquee{position:relative;overflow:hidden;padding:6px 0}
.hp-grev-track{display:flex;gap:18px;width:max-content;animation:grev-marquee 48s linear infinite}
.hp-grev-track:hover{animation-play-state:paused}
@keyframes grev-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.grev-card{flex:none;width:330px;background:var(--bg-card);border:1px solid rgba(37,42,45,.08);border-radius:14px;padding:22px 22px 24px;box-shadow:0 2px 12px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:10px}
.grev-top{display:flex;align-items:center;gap:12px;position:relative}
.grev-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-heading);font-weight:700;font-size:18px}
.grev-who{display:flex;flex-direction:column;line-height:1.25}
.grev-name{font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--brand-dark)}
.grev-date{font-size:12.5px;color:var(--text-muted)}
.grev-g{position:absolute;top:0;right:0}
.grev-stars{color:#FBBC05;font-size:16px;letter-spacing:1.5px}
.grev-text{font-size:14.5px;line-height:1.55;color:var(--text-soft);margin:0}
.hp-grev-allcta{display:inline-block;margin-top:26px;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--bronze-dark)}
.hp-grev-allcta:hover{text-decoration:underline}
@media(max-width:600px){.grev-card{width:280px}.hp-grev-write{margin-left:0}}

/* ===== CONTACT-SECTIE - strak & luxe + achtergrondband achter FAQ =====
   - Eén rustige donkere gradient over de hele sectie.
   - Drie IDENTIEKE kaarten (keuzehulp/interactief, FAQ, contact): zelfde rand,
     radius, schaduw. GEEN backdrop-filter:blur (gaf moiré-strepen over de band!).
   - Achtergrondband: een donkerder vlak op de VERSTE laag (sectie-::before,
     z-index:0; kaarten op z-index:1 -> GEEN negatieve z-index, dat liet de kaart
     verdwijnen). Een tiny script (placeFaqBand) lijnt de band exact achter het
     FAQ-blok uit, incl. de helft van de marges erboven/eronder.
   - FAQ-kaart krijgt een DUIDELIJK lichtere tint dan de band + zichtbare rand +
     schaduw, anders valt het kader weg tegen de band.
   De #-waarden hieronder zijn donkerblauw (BOARDSORT). Vervang ze door tinten die
   bij het klantpalet passen: sectie = donkere brand-tint, band = ~10-15% donkerder,
   kaart = ~10% lichter dan de band. */
.hp-contact{
  background:linear-gradient(180deg,#0F2E48 0%,#0C2438 100%) !important;
  color:#fff !important;padding:110px 0 !important;
  position:relative;overflow:hidden;
}
.hp-contact::before{
  content:"";position:absolute;left:0;right:0;
  top:var(--faqband-top,640px);height:var(--faqband-h,560px);
  background:#0A2034;z-index:0;
}
.hp-contact .container{position:relative;z-index:1;max-width:920px}
.hp-contact .eyebrow{color:#7FB8E6 !important;letter-spacing:3.5px}
.hp-contact > .container > h2{font-size:clamp(34px,4vw,50px) !important;letter-spacing:-.02em;margin-bottom:18px}
.hp-contact > .container > p{color:rgba(255,255,255,.72) !important;font-size:17px;line-height:1.65}
.hp-contact .hp-calc-v2,
.hp-contact .hp-faq-block{
  position:relative;background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.09) !important;border-radius:22px !important;
  padding:40px 42px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.hp-contact .hp-faq-block{
  margin:44px 0 !important;z-index:1;
  background:#234B6E !important;            /* lichter dan de band -> kader valt op */
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.5) !important;
}
.hp-contact .hp-faq-block .eyebrow{color:#7FB8E6 !important}
.hp-contact .hp-faq-block h2{color:#fff !important;font-size:30px !important}
.hp-contact .hp-faq-block .section-header{margin-bottom:8px}
.hp-contact .hp-faq-block .faq-item{border-bottom:1px solid rgba(255,255,255,.08) !important}
.hp-contact .hp-faq-block .faq-item:last-child{border-bottom:none !important}
.hp-contact .hp-faq-block .faq-q{padding:20px 2px !important;font-size:16.5px !important;color:rgba(255,255,255,.92) !important;transition:color .2s}
.hp-contact .hp-faq-block .faq-q:hover{color:#fff !important}
.hp-contact .hp-faq-block .faq-icon{background:rgba(255,255,255,.08) !important;width:30px;height:30px}
.hp-contact .hp-faq-block .faq-icon::before,
.hp-contact .hp-faq-block .faq-icon::after{background:#fff !important}
.hp-contact .hp-faq-block .faq-item.open .faq-icon{background:var(--bronze) !important}
.hp-contact .hp-faq-block .faq-item.open .faq-icon::before,
.hp-contact .hp-faq-block .faq-item.open .faq-icon::after{background:#0C2438 !important}
.hp-contact .hp-faq-block .faq-a-inner{color:rgba(255,255,255,.7) !important;font-size:15px;line-height:1.7}
.hp-contact .bs-keuze-opt{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:13px;transition:background .2s,border-color .2s,transform .2s}
.hp-contact .bs-keuze-opt:hover{background:var(--bronze);border-color:var(--bronze);transform:translateY(-2px)}
@media(max-width:600px){
  .hp-contact{padding:70px 0 !important}
  .hp-contact .hp-calc-v2,
  .hp-contact .hp-faq-block{padding:28px 22px !important;border-radius:18px !important}
}

/* ===================================================================
   ONDERKANT HOMEPAGE: WITTE TINTEN (DEF standaard, vervangt donker)
   Contact + keuzehulp + FAQ + "Wij informeren u" in lichte tinten.
   Footer blijft zwart. FAQ en contact zitten in EEN vak.
   =================================================================== */
.hp-contact{ background:var(--bg-alt) !important; color:var(--brand-dark) !important; }
.hp-contact::before{ display:none !important; content:none !important; }
.hp-contact .container{ max-width:780px !important; }
.hp-contact > .container > .eyebrow{ color:var(--bronze-dark) !important; }
.hp-contact > .container > h2{ color:var(--brand-dark) !important; }
.hp-contact > .container > p{ color:var(--text-soft) !important; }

/* Keuzehulp-kaart: licht, verheven */
.hp-contact .hp-calc-v2{
  background:#ffffff !important; color:var(--brand-dark) !important;
  border:1px solid rgba(37,42,45,.08) !important;
  box-shadow:0 24px 60px rgba(37,42,45,.10) !important;
}
.hp-contact .hp-calc-v2 .eyebrow{ color:var(--bronze-dark) !important; }
.hp-contact .hp-calc-v2 h3{ color:var(--brand-dark) !important; }
.hp-contact .hp-calc-v2 .hp-calc-sub{ color:var(--text-soft) !important; }
.hp-contact .kh-label{ color:var(--brand-dark) !important; }
.hp-contact .kh-chips button{ background:var(--cream); border-color:rgba(37,42,45,.16); color:var(--brand-dark); }
.hp-contact .kh-chips button:hover{ border-color:var(--bronze); color:var(--bronze-dark); }
.hp-contact .kh-chips button.active{ background:var(--bronze); border-color:var(--bronze); color:#fff; }
.hp-contact .dt-tagline{ color:var(--text-soft) !important; }
.hp-contact .calc-result-v2{ background:var(--cream) !important; border:1px solid rgba(37,42,45,.08) !important; }
.hp-contact .calc-result-lbl{ color:var(--brand-dark) !important; }
.hp-contact .calc-result-note{ color:var(--text-soft) !important; }
.hp-contact .calc-result-price{ color:var(--bronze) !important; }

/* Gecombineerd vak: FAQ + Wij informeren u ONDER elkaar in EEN wit vlak */
.hp-faqcontact{
  margin-top:28px;
  background:#ffffff !important;
  border:1px solid rgba(37,42,45,.08);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(37,42,45,.08);
  padding:40px 40px 36px;
  display:block;
  text-align:left;
}
.hp-faqcontact .section-header{ text-align:left; max-width:none; margin:0 0 10px; }
.hp-faqcontact .section-header .eyebrow{ color:var(--bronze-dark); margin-bottom:6px; }
.hp-faqcontact .section-header h2{ color:var(--brand-dark); font-size:28px; margin:0; }
.hp-faqcontact .faq{ max-width:none; margin:0; }
.hp-faqcontact .faq-item{ border-bottom:1px solid var(--border-soft); }
.hp-faqcontact .faq-q{ color:var(--brand-dark); font-size:16px; padding:18px 2px; }
.hp-faqcontact .faq-q:hover{ color:var(--bronze-dark); }
.hp-faqcontact .faq-icon{ background:var(--bg-alt); }
.hp-faqcontact .faq-icon::before,.hp-faqcontact .faq-icon::after{ background:var(--brand-dark); }
.hp-faqcontact .faq-item.open .faq-icon{ background:var(--bronze); }
.hp-faqcontact .faq-item.open .faq-icon::before,.hp-faqcontact .faq-item.open .faq-icon::after{ background:#fff; }
.hp-faqcontact .faq-a-inner{ color:var(--text-soft); }

/* onderste helft van hetzelfde vak: contact-info, gescheiden door een lijn */
.hp-faqcontact-info{
  margin-top:30px; padding-top:30px;
  border-top:1px solid var(--border-soft);
}
.hp-faqcontact-info .eyebrow{ color:var(--bronze-dark); }
.hp-faqcontact-info h3{ color:var(--brand-dark); font-size:22px; margin:8px 0 10px; }
.hp-faqcontact-info .hp-calc-sub{ color:var(--text-soft); font-size:14.5px; margin:0 0 20px; max-width:620px; }
.hp-faqcontact-info .calc-contact-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; margin-bottom:22px; }
.hp-faqcontact-info .calc-contact-item{ display:flex; align-items:center; gap:12px; }
.hp-faqcontact-info .calc-contact-item svg{ width:22px; height:22px; stroke:var(--bronze); flex-shrink:0; }
.hp-faqcontact-info .calc-contact-item strong{ display:block; color:var(--brand-dark); font-size:14px; }
.hp-faqcontact-info .calc-contact-item span{ color:var(--text-soft); font-size:14px; }
@media(max-width:860px){
  .hp-faqcontact{ padding:30px 22px 26px; }
  .hp-faqcontact-info .calc-contact-grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   HEADER TOPBAR MARQUEE (DEF standaard): telefoon + straat lopen
   doorlopend, naadloos en zonder onderbreking bovenin de header.
   =================================================================== */
:root{ --topbar-h:36px; }
.hp-topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  z-index:101; background:var(--charcoal); color:#fff;
  display:flex; align-items:center; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hp-topbar-track{
  display:flex; align-items:center; width:max-content; flex:0 0 auto; white-space:nowrap;
  will-change:transform; animation:hp-topbar-scroll 60s linear infinite;
}
.hp-topbar-item{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  font-family:var(--font-heading); font-weight:600; font-size:13px;
  letter-spacing:.01em; color:rgba(255,255,255,.92); padding:0 22px;
}
.hp-topbar-item svg{ width:14px; height:14px; stroke:var(--bronze-light); flex-shrink:0; }
.hp-topbar-item.sep{ color:var(--bronze-light); padding:0; font-size:9px; }
.hp-topbar a.hp-topbar-item{ text-decoration:none; }
.hp-topbar a.hp-topbar-item:hover{ color:#fff; }
@keyframes hp-topbar-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* nav onder de topbar schuiven */
.nav{ top:var(--topbar-h) !important; }
.subhero{ margin-top:calc(80px + var(--topbar-h)) !important; }
@media(max-width:600px){ :root{ --topbar-h:32px; } .hp-topbar-item{ font-size:12px; padding:0 16px; } }

/* ===================================================================
   USP-STRIP (DEF standaard): 3 punten, box-loos, dynamisch in beeld.
   Geen witte vlakken/kaarten, maar luchtige kolommen met scheidingslijn.
   =================================================================== */
.hp-usps{ padding:88px 0 76px; background:var(--bg); }
.hp-usps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:1080px; margin:0 auto; }
.hp-usp{ position:relative; padding:6px 38px; text-align:center; }
.hp-usp + .hp-usp{ border-left:1px solid var(--border-soft); }
.hp-usp-icon{ width:72px; height:72px; margin:0 auto 22px; display:flex; align-items:center; justify-content:center; color:var(--bronze); position:relative; }
.hp-usp-icon::after{ content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(232,84,31,.12), transparent 70%); transform:scale(.6); opacity:0; transition:transform .6s var(--ease),opacity .6s var(--ease); }
.hp-usp-icon svg{ width:50px; height:50px; position:relative; z-index:1; transition:transform .5s var(--ease); }
.in-view .hp-usp-icon::after,.hp-usp:hover .hp-usp-icon::after{ transform:scale(1); opacity:1; }
.hp-usp:hover .hp-usp-icon svg{ transform:translateY(-4px); }
.hp-usp h3{ font-family:var(--font-heading); font-weight:800; font-size:21px; letter-spacing:-.01em; color:var(--brand-dark); margin:0 0 10px; }
.hp-usp p{ font-size:15px; line-height:1.6; color:var(--text-soft); max-width:300px; margin:0 auto; }
.hp-usp-stats{ display:flex; justify-content:center; gap:72px; margin-top:60px; padding-top:42px; border-top:1px solid var(--border-soft); }
.hp-usp-stats > div{ text-align:center; }
.hp-usp-stats strong{ display:block; font-family:var(--font-heading); font-weight:800; font-size:44px; color:var(--bronze); line-height:1; }
.hp-usp-stats span{ display:block; margin-top:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
@media(max-width:820px){
  .hp-usps-grid{ grid-template-columns:1fr; gap:34px; }
  .hp-usp{ padding:0 12px; }
  .hp-usp + .hp-usp{ border-left:none; border-top:1px solid var(--border-soft); padding-top:34px; }
  .hp-usp-stats{ gap:36px; flex-wrap:wrap; }
  .hp-usp-stats strong{ font-size:36px; }
}

/* ===================================================================
   USP's IN DE HERO-FOTO (DEF standaard): box-loos, lichte tekst,
   onderaan over de foto. Vervangt de losse strip eronder.
   =================================================================== */
.hp-hero-slider::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:300px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.74)); z-index:5; pointer-events:none; }
.hp-hero-usps{
  position:absolute; left:50%; transform:translateX(-50%); bottom:108px; z-index:6;
  width:100%; max-width:var(--container); padding:0 24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.hp-hero-usp{ display:flex; align-items:flex-start; gap:14px; padding:0 30px; }
.hp-hero-usp + .hp-hero-usp{ border-left:1px solid rgba(255,255,255,.20); }
.hp-hero-usp-ico{ flex:0 0 auto; width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--bronze-light); }
.hp-hero-usp-ico svg{ width:36px; height:36px; }
.hp-hero-usp h3{ font-family:var(--font-heading); font-weight:800; font-size:18px; color:#fff; margin:0 0 5px; letter-spacing:-.01em; line-height:1.15; }
.hp-hero-usp p{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.85); margin:0; }
@media(max-width:900px){
  .hp-hero-usps{ padding:0 18px 22px; gap:0; }
  .hp-hero-usp{ flex-direction:column; align-items:center; text-align:center; gap:8px; padding:0 10px; }
  .hp-hero-usp + .hp-hero-usp{ border-left:1px solid rgba(255,255,255,.16); }
  .hp-hero-usp-ico{ width:34px; height:34px; } .hp-hero-usp-ico svg{ width:26px; height:26px; }
  .hp-hero-usp h3{ font-size:13px; margin:0; }
  .hp-hero-usp p{ display:none; }
}
@media(max-width:560px){ .hp-hero-usps{ display:none; } }

/* ===================================================================
   REVIEWS sectie: witte tint (overgang naar lichte contact-sectie zichtbaar)
   + nette gecentreerde weergave bij weinig reviews (geen loop van 1).
   =================================================================== */
.hp-greviews{ background:var(--bg) !important; }
.hpgr-marquee.hpgr-marquee--few{ overflow:visible; }
.hpgr-marquee.hpgr-marquee--few .hpgr-track{
  display:flex; justify-content:center; gap:24px; transform:none !important; animation:none !important; flex-wrap:wrap;
}
.hpgr-marquee.hpgr-marquee--few .hpgr-card{ flex:0 1 460px; max-width:520px; }

/* USP's in de hero komen DYNAMISCH binnen bij load (fade + omhoog, gestaggerd) */
.hp-hero-usp{ opacity:0; transform:translateY(26px); animation:hero-usp-in .85s cubic-bezier(.19,1,.22,1) both; }
@keyframes hero-usp-in{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
.hp-hero-usp:nth-child(1){ animation-delay:1.25s; }
.hp-hero-usp:nth-child(2){ animation-delay:1.42s; }
.hp-hero-usp:nth-child(3){ animation-delay:1.59s; }
@media (prefers-reduced-motion: reduce){ .hp-hero-usp{ opacity:1; transform:none; animation:none; } }

/* ===================================================================
   SECTIE-OVERGANGEN: duidelijke grenzen via wit-tinten + dichter op elkaar
   =================================================================== */
/* Over ons (wit) -> Diensten (cream): zichtbare grens + dichter op elkaar */
.hp-overons{ background:var(--bg) !important; padding-bottom:56px !important; }
.hp-services{ background:var(--cream) !important; padding-top:60px !important; }

/* FAQ in eigen sectie met eigen tint -> duidelijke grens met contact-sectie erboven */
.hp-faqsec{ background:var(--bg); padding:74px 0 88px; }
.hp-faqsec .container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.hp-faqcontact{ background:var(--cream) !important; margin-top:0 !important; }

/* ===================================================================
   SUBPAGINA-FIXES: leesbare contacttekst in lichte hp-contact +
   werkwijze met 3 stappen netjes (rondjes volledig, lijn niet doorlopend)
   =================================================================== */
/* "Wij informeren u" contact-items op de LICHTE hp-contact: donkere tekst */
.hp-contact .calc-contact-item strong{ color:var(--brand-dark) !important; }
.hp-contact .calc-contact-item span{ color:var(--text-soft) !important; }
.hp-contact .calc-contact-item svg{ color:var(--bronze) !important; }
.hp-contact .calc-cta-v2{ color:#fff; }

/* Werkwijze op subpagina's: 3 stappen -> 3 kolommen, lijn netjes tussen de rondjes */
.werkwijze{ grid-template-columns:repeat(3,1fr) !important; max-width:920px; margin:0 auto; }
.werkwijze::before{ left:16.66%; right:16.66%; }
.werk-num{ box-shadow:0 0 0 8px var(--bg); }
@media(max-width:760px){
  .werkwijze{ grid-template-columns:1fr !important; max-width:520px; }
  .werkwijze::before{ display:none; }
}

/* SUBHERO: foto vult tot achter de topbar+nav (geen witte band meer bovenaan) */
.subhero{ margin-top:0 !important; padding-top:calc(var(--topbar-h) + 100px) !important; }

/* ===================================================================
   REVISIE-RONDE: nav-telefoon, CTA-telefoonknop, FAQ<->contact afstand
   =================================================================== */
/* Telefoonnummer in de nav NOOIT over twee regels */
.nav-phone{ white-space:nowrap !important; flex-shrink:0; }
.nav-cta{ flex-shrink:0; }
.nav-cta > .btn.btn-primary{ white-space:nowrap; }

/* rich-final-cta: telefoon als knop (outline-pill) naast 'Neem contact op' */
.btn-pill-outline{ display:inline-flex; align-items:center; gap:10px; padding:18px 32px; background:transparent; color:var(--cream); border:2px solid rgba(247,245,242,.45); border-radius:999px; font-family:var(--font-heading); font-weight:700; font-size:15.5px; text-decoration:none; transition:all .25s var(--ease); }
.btn-pill-outline svg{ width:18px; height:18px; }
.btn-pill-outline:hover{ background:rgba(247,245,242,.12); border-color:var(--cream); transform:translateY(-2px); }

/* FAQ-sectie op subpagina's: witte tint + dichter op de DIRECT CONTACT-sectie eronder */
.faq-sec{ padding-bottom:46px !important; }
.hp-contact{ padding-top:54px !important; }

/* ===================================================================
   REVISIE: streepjes voor kopjes WEG + reviews stil + tints + spacing
   =================================================================== */
/* 1) Streepje (dash) voor elk kopje volledig verwijderen, overal */
.eyebrow::before,
.hero-eyebrow::before,
.hp-hs-eyebrow::before,
section.dark .eyebrow::before { display:none !important; content:none !important; }
.eyebrow{ margin-left:0 !important; }

/* 2) Reviews STIL: 3 kaarten vast naast elkaar, geen beweging, geen duplicaten */
.hpgr-marquee.hpgr-static{ overflow:visible !important; }
.hpgr-marquee.hpgr-static .hpgr-track{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px !important; transform:none !important; animation:none !important; overflow:visible !important; padding:8px 2px !important; scroll-snap-type:none !important; }
.hpgr-marquee.hpgr-static .hpgr-card{ width:auto !important; flex:none !important; }
@media(max-width:900px){ .hpgr-marquee.hpgr-static .hpgr-track{ grid-template-columns:1fr !important; } }

/* 3) Sectie-tints: zie aparte nth-of-type alternatie hieronder */

/* 4) Secties dichter op elkaar (kleiner gat) */
:root{ --section-y:76px; }

/* Sollicitatie: upload-velden */
.of-file input[type=file]{ width:100%; padding:14px; border:1.5px dashed var(--border); border-radius:12px; background:var(--bg-alt); font-family:var(--font-body); font-size:14px; color:var(--text-soft); cursor:pointer; }
.of-file input[type=file]::file-selector-button{ margin-right:12px; padding:8px 16px; border:none; border-radius:8px; background:var(--bronze); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:13px; cursor:pointer; }
.of-privacy{ font-size:12.5px; color:var(--text-muted); margin-top:14px; }

/* Subpagina's: opeenvolgende secties altijd afwisselend van tint (wit / greige),
   zodat je bij elke nieuwe sectie/kopje duidelijk ziet dat je overgaat.
   Donkere secties (subhero, final-cta) uitgezonderd. */
body.subpage > section:not(.subhero):not(.dark):not(.rich-final-cta):nth-of-type(odd){ background:var(--bg) !important; }
body.subpage > section:not(.subhero):not(.dark):not(.rich-final-cta):nth-of-type(even){ background:var(--bg-alt) !important; }

/* Homepage: hp-overons greige zodat de afwisseling vanaf de hero klopt
   (hero zwart -> overons greige -> services wit -> werkwijze greige -> ...) */
.hp-overons{ background:var(--bg-alt) !important; }

/* Google Translate volledig onzichtbaar (banner, tooltip, gadget, highlight) */
.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, .goog-tooltip *, .goog-te-gadget, .goog-logo-link, iframe.skiptranslate { display:none !important; visibility:hidden !important; }
body { top:0 !important; position:static !important; }
.goog-text-highlight { background:none !important; box-shadow:none !important; }
#google_translate_element { position:absolute !important; top:-9999px !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; }

/* ===== Bot: header-knoppen (vergroten/sluiten) + compacte mobiele weergave ===== */
.agbot-hbtns{ margin-left:auto; display:flex; gap:6px; flex:none; align-items:center; }
.agbot-ctl{ width:32px; height:32px; padding:0; border:none; border-radius:9px; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.agbot-ctl:hover{ background:rgba(255,255,255,.26); }
.agbot-ctl svg{ width:17px; height:17px; }
/* Nooit groter dan het scherm */
.agbot-panel{ max-height:calc(100vh - 110px); }
/* Vergroot-stand (desktop) */
.agbot.expanded .agbot-panel{ width:440px; height:80vh; max-height:calc(100vh - 90px); }
.agbot.expanded .agbot-body{ flex:1 1 auto; height:auto; min-height:0; }

/* Mobiel: compact, neemt NOOIT het hele scherm in beslag */
@media (max-width:560px){
  .agbot{ left:14px; bottom:14px; }
  .agbot-panel{ width:calc(100vw - 28px); max-width:none; bottom:70px; max-height:none; }
  .agbot-body{ height:34vh; min-height:160px; flex:none; }
  .agbot-header{ padding:14px 14px; }
  .agbot-avatar{ width:38px; height:38px; }
  /* Vergroot-stand (mobiel): groter, maar met ruimte bovenaan + makkelijk te sluiten */
  .agbot.expanded .agbot-panel{ width:calc(100vw - 20px); max-height:none; bottom:70px; }
  .agbot.expanded .agbot-body{ height:64vh; }
}

/* ===== Facebook in header + mobiel menu ===== */
.nav-fb{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:inherit; background:rgba(120,120,120,.12); transition:background .2s,color .2s,transform .2s; flex:none; text-decoration:none; }
.nav-fb svg{ width:18px; height:18px; }
.nav-fb:hover{ background:#1877F2; color:#fff; transform:translateY(-2px); }
.mobile-menu-fb{ display:flex; align-items:center; gap:10px; }
.mobile-menu-fb svg{ width:20px; height:20px; color:#1877F2; flex:none; }
@media (max-width:768px){ .nav-fb{ display:none; } }

/* FB-item nooit in de horizontale nav-links tonen (alleen in mobiel menu) */
.nav-links .mobile-menu-fb-item{ display:none !important; }

/* ===== FB naast logo + logo weg bij mobiel scrollen + bot alleen homepage + footer FB + reviews mobiel ===== */
.nav-fb-left{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:#fff; background:#1877F2; margin-left:14px; flex:none; text-decoration:none; transition:background .2s,transform .2s; box-shadow:0 2px 8px rgba(24,119,242,.35); }
.nav-fb-left svg{ width:18px; height:18px; }
.nav-fb-left:hover{ background:#0d63d4; transform:translateY(-2px); }
@media (max-width:768px){ .nav-fb-left{ display:none; } }

/* Mobiel: logo niet tonen in de meescrollende (sticky) balk */
@media (max-width:768px){ .nav.scrolled .nav-logo{ display:none !important; } }

/* Bot uitsluitend op de homepage (niet op subpaginas) */
body.subpage .agbot{ display:none !important; }

/* Footer: Facebook-icoon onderin, gecentreerd */
.footer-social{ display:flex; justify-content:center; padding:10px 0 2px; }
.footer-fb{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.10); color:#fff; transition:background .2s,color .2s,transform .2s; }
.footer-fb svg{ width:22px; height:22px; }
.footer-fb:hover{ background:#1877F2; color:#fff; transform:translateY(-3px); }

/* Reviews mobiel: 1 kolom, gecentreerd, binnen het scherm (niet tegen de zijkant) */
@media (max-width:900px){
  .hpgr-marquee.hpgr-static{ width:100% !important; max-width:100% !important; overflow:hidden !important; }
  .hpgr-marquee.hpgr-static .hpgr-track{ grid-template-columns:minmax(0,1fr) !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; padding:8px 16px 10px !important; gap:14px !important; justify-items:center !important; }
  .hpgr-marquee.hpgr-static .hpgr-card{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:0 auto !important; }
}

/* Footer: KvK-blok + Facebook eronder (netjes, eigen regel) */
.footer-company{ margin-top:18px; }
.footer-company .footer-kvk{ display:block; font-size:13px; color:rgba(255,255,255,.6); letter-spacing:.2px; margin-bottom:4px; }
.footer-naw .footer-fb, .footer-company .footer-fb{ display:flex; margin-top:14px; }


/* === {{BEDRIJF}} / SKILL-REGEL: tips & reviews STILSTAAND (niet bewegen, wel inschuiven) === */
.hp-tips-marquee{overflow:visible !important}
.hp-tips-track{animation:none !important;transform:none !important;display:grid !important;grid-template-columns:repeat(4,1fr);gap:18px;width:auto !important}
.hp-tips-track .hp-tips-card:nth-child(n+5){display:none !important}
@media(max-width:900px){.hp-tips-track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hp-tips-track{grid-template-columns:1fr}}
.hp-greviews .hpgr-marquee{overflow:visible !important}
.hp-greviews .hpgr-track{animation:none !important;transform:none !important;display:grid !important;grid-template-columns:repeat(3,1fr);gap:18px;width:auto !important;overflow:visible !important}
.hp-greviews .hpgr-track>*:nth-child(n+4){display:none !important}
@media(max-width:900px){.hp-greviews .hpgr-track{grid-template-columns:1fr}}

/* === SKILL-REGEL: tips & reviews kaarten vullen hun vak netjes (geen gaten ertussen) === */
.hp-tips-track{grid-template-columns:repeat(4,1fr) !important;gap:24px !important}
.hp-tips-track .hp-tips-card{width:100% !important;max-width:none !important;min-width:0 !important;margin:0 !important;flex:none !important}
.hp-greviews .hpgr-track{grid-template-columns:repeat(3,1fr) !important;gap:24px !important;align-items:stretch !important}
.hp-greviews .hpgr-card{width:100% !important;max-width:none !important;min-width:0 !important;flex:none !important;margin:0 !important}
@media(max-width:900px){.hp-tips-track{grid-template-columns:repeat(2,1fr) !important}.hp-greviews .hpgr-track{grid-template-columns:1fr !important}}
@media(max-width:560px){.hp-tips-track{grid-template-columns:1fr !important}}

/* === SKILL-REGEL: tips-grid binnen de container (niet tegen de paginarand) === */
.hp-tips-marquee{max-width:var(--container) !important;margin:0 auto !important;padding:0 24px !important;overflow:visible !important;box-sizing:border-box}
@media(max-width:600px){.hp-tips-marquee{padding:0 18px !important}}

/* === SKILL-REGEL: taal-dropdown (Google Translate) + Google-balk verbergen === */
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate{display:none !important;}
.goog-te-gadget,.goog-te-gadget-icon,.goog-logo-link,.goog-te-gadget span{display:none !important;}
body{top:0 !important;}
#goog-gt-tt,.goog-te-balloon-frame,.goog-tooltip,.goog-tooltip:hover{display:none !important;}
.goog-text-highlight{background:none !important;box-shadow:none !important;}
#google_translate_element{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px;height:1px;overflow:hidden;opacity:0;}
.lang{display:none !important;} /* dubbele zwevende taalknop uit: er is er maar één (header) */
.nav-lang{position:relative;}
.nav-lang-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;}
.nav-lang-flag{font-size:19px;line-height:1;}
.nav-lang-arrow{transition:transform .2s;}
.nav-lang.open .nav-lang-arrow{transform:rotate(180deg);}
.nav-lang-dd{position:absolute;top:calc(100% + 12px);right:0;background:#fff;border:1px solid #e6e8ec;border-radius:14px;box-shadow:0 18px 50px rgba(15,28,45,.18);padding:8px;min-width:208px;display:none;z-index:1300;}
.nav-lang.open .nav-lang-dd{display:block;}
.nav-lang-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:none;background:none;border-radius:10px;cursor:pointer;font-family:var(--font-body);font-size:15px;color:var(--brand-dark);text-align:left;}
.nav-lang-item:hover{background:#f3f5f8;}
.nav-lang-item.is-active{background:color-mix(in srgb, var(--bronze) 14%, transparent);font-weight:700;}

/* ============ WAAROM KIEZEN VOOR ONS ============ */
.hp-waarom{padding:88px 0;background:#f4f7fb;}
.hp-waarom-head{max-width:720px;margin:0 auto 46px;text-align:center;}
.hp-waarom-head .eyebrow{display:inline-block;background:color-mix(in srgb,var(--bronze) 8%,transparent);border:1.5px solid color-mix(in srgb,var(--bronze) 40%,transparent);color:var(--bronze);padding:9px 20px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;}
.hp-waarom-head .eyebrow::before{display:none;}
.hp-waarom-head h2{color:#11202E;font-size:clamp(28px,3.4vw,40px);line-height:1.14;margin:0 0 14px;}
.hp-waarom-head p{color:#5a6b7b;font-size:17px;line-height:1.6;margin:0;}
.hp-waarom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.hp-waarom-card{background:#fff;border:1px solid #e6ecf3;border-radius:18px;padding:30px 26px;box-shadow:0 10px 30px -18px rgba(12,26,38,.28);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.hp-waarom-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px -18px rgba(12,26,38,.34);border-color:color-mix(in srgb,var(--bronze) 40%,#fff);}
.hp-waarom-ic{width:56px;height:56px;border-radius:15px;background:color-mix(in srgb,var(--bronze) 12%,#fff);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.hp-waarom-ic svg{width:28px;height:28px;stroke:var(--bronze);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hp-waarom-card h3{color:#11202E;font-size:19px;margin:0 0 9px;line-height:1.25;}
.hp-waarom-card p{color:#5a6b7b;font-size:14.5px;line-height:1.55;margin:0;}
@media(max-width:960px){.hp-waarom-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.hp-waarom{padding:60px 0;}.hp-waarom-grid{grid-template-columns:1fr;gap:16px;}}

/* hp-waarom: professionele achtergrondfoto + donkere overlay (tekst leesbaar) */
.hp-waarom{background:linear-gradient(rgba(11,21,33,.83),rgba(13,23,37,.90)),url(../img/hero/waarom-bg.jpg);background-size:cover;background-position:center;}
.hp-waarom-head h2{color:#ffffff;}
.hp-waarom-head p{color:rgba(255,255,255,.86);}
.hp-waarom-card{box-shadow:0 18px 48px -20px rgba(0,0,0,.55);}

.hp-waarom-head .eyebrow{background:color-mix(in srgb,var(--bronze) 7%,transparent);border:1px solid color-mix(in srgb,var(--bronze) 40%,transparent);color:var(--bronze);padding:9px 24px;font-size:11.5px;letter-spacing:3.5px;border-radius:999px;}

/* ============ OFFERTE-CALCULATOR (rucalc) ============ */
.rucalc{text-align:left;}
.rucalc-head{text-align:center;margin-bottom:22px;}
.rucalc-head h3{margin:6px 0 8px;}
.rucalc-progress{margin:0 0 26px;}
.rucalc-prog-track{height:6px;border-radius:999px;background:color-mix(in srgb,var(--bronze) 14%,#fff);overflow:hidden;}
#rucalc-prog{display:block;height:100%;width:25%;border-radius:999px;background:linear-gradient(90deg,var(--bronze),var(--bronze-light));transition:width .35s cubic-bezier(.4,0,.2,1);}
.rucalc-steps-lbl{display:flex;justify-content:space-between;margin-top:9px;}
.rucalc-steps-lbl span{font-size:11.5px;font-weight:600;letter-spacing:.4px;color:var(--text-muted);transition:color .25s;text-transform:uppercase;}
.rucalc-steps-lbl span.on{color:var(--bronze-dark);}
.rucalc-q{font-family:var(--font-heading,inherit);font-size:18px;color:var(--brand-dark);margin:0 0 4px;font-weight:700;}
.rucalc-hint{font-size:13.5px;color:var(--text-muted);margin:0 0 16px;}
.rucalc-opt{font-size:12px;font-weight:600;color:var(--bronze);background:color-mix(in srgb,var(--bronze) 9%,#fff);padding:2px 9px;border-radius:999px;margin-left:6px;vertical-align:middle;}
/* service-kaarten */
.rucalc-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.rucalc-card{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1.5px solid #e3eaf2;border-radius:15px;background:#fff;cursor:pointer;text-align:left;position:relative;transition:border-color .2s,box-shadow .2s,background .2s,transform .12s;font:inherit;}
.rucalc-card:hover{border-color:color-mix(in srgb,var(--bronze) 45%,#fff);box-shadow:0 10px 26px -16px rgba(10,130,230,.5);transform:translateY(-2px);}
.rucalc-card-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--bronze) 10%,#fff);display:flex;align-items:center;justify-content:center;transition:background .2s;}
.rucalc-card-ic svg{width:22px;height:22px;stroke:var(--bronze);}
.rucalc-card-lbl{font-size:14.5px;font-weight:600;color:var(--brand-dark);line-height:1.25;}
.rucalc-card-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--bronze);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:.2s;}
.rucalc-card-check svg{width:12px;height:12px;stroke:#fff;}
.rucalc-card.on{border-color:var(--bronze);background:color-mix(in srgb,var(--bronze) 6%,#fff);box-shadow:0 10px 26px -16px rgba(10,130,230,.55);}
.rucalc-card.on .rucalc-card-ic{background:var(--bronze);}
.rucalc-card.on .rucalc-card-ic svg{stroke:#fff;}
.rucalc-card.on .rucalc-card-check{opacity:1;transform:scale(1);}
/* pills */
.rucalc-pills{display:flex;flex-wrap:wrap;gap:10px;}
.rucalc-pill{padding:11px 18px;border:1.5px solid #e3eaf2;border-radius:999px;background:#fff;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--brand-dark);transition:.18s;}
.rucalc-pill:hover{border-color:color-mix(in srgb,var(--bronze) 45%,#fff);}
.rucalc-pill.on{background:var(--bronze);border-color:var(--bronze);color:#fff;box-shadow:0 10px 22px -12px rgba(10,130,230,.6);}
/* textarea + fields */
.rucalc-ta,.rucalc-f input{width:100%;border:1.5px solid #e3eaf2;border-radius:13px;padding:13px 15px;font:inherit;font-size:14.5px;color:var(--brand-dark);background:#fff;transition:border-color .18s,box-shadow .18s;box-sizing:border-box;}
.rucalc-ta:focus,.rucalc-f input:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 4px color-mix(in srgb,var(--bronze) 14%,transparent);}
.rucalc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rucalc-f{display:flex;flex-direction:column;gap:6px;}
.rucalc-f span{font-size:13px;font-weight:600;color:var(--text-soft);}
/* upload */
.rucalc-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:26px 18px;border:2px dashed color-mix(in srgb,var(--bronze) 32%,#dfe7f0);border-radius:16px;background:color-mix(in srgb,var(--bronze) 4%,#fff);cursor:pointer;text-align:center;transition:.18s;}
.rucalc-upload:hover,.rucalc-upload.drag{border-color:var(--bronze);background:color-mix(in srgb,var(--bronze) 8%,#fff);}
.rucalc-upload svg{width:30px;height:30px;stroke:var(--bronze);}
.rucalc-upload-t{font-size:14px;color:var(--brand-dark);}
.rucalc-upload-s{font-size:12.5px;color:var(--text-muted);}
.rucalc-previews{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
.rucalc-prev{position:relative;width:70px;height:70px;border-radius:11px;overflow:hidden;border:1px solid #e3eaf2;}
.rucalc-prev img{width:100%;height:100%;object-fit:cover;}
.rucalc-prev button{position:absolute;top:3px;right:3px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(17,32,46,.82);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* nav */
.rucalc-nav{display:flex;gap:12px;margin-top:26px;align-items:center;}
.rucalc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:999px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;padding:14px 26px;transition:.2s;}
.rucalc-btn svg{width:18px;height:18px;}
.rucalc-back{background:transparent;color:var(--text-soft);padding-left:6px;padding-right:6px;}
.rucalc-back:hover{color:var(--brand-dark);}
.rucalc-next,.rucalc-submit{margin-left:auto;background:linear-gradient(135deg,var(--bronze),var(--bronze-dark));color:#fff;box-shadow:0 14px 30px -12px rgba(10,130,230,.65);}
.rucalc-next:hover,.rucalc-submit:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(10,130,230,.7);}
.rucalc-cards.shake{animation:rucalcShake .42s;}
@keyframes rucalcShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.of-file-restored{margin-top:8px;font-size:13px;font-weight:600;color:var(--bronze-dark);background:color-mix(in srgb,var(--bronze) 9%,#fff);border-radius:9px;padding:8px 12px;}
@media(max-width:560px){.rucalc-cards,.rucalc-fields{grid-template-columns:1fr;}}

.rucalc-btn[hidden],.rucalc-step[hidden]{display:none!important;}

/* social-knoppen in de nav (rechts van offerte-CTA) */
.nav-social{display:flex;align-items:center;gap:8px;margin-left:6px;}
.nav-social-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background .2s,transform .15s;}
.nav-social-btn:hover{background:var(--bronze);color:#fff;transform:translateY(-2px);}
.nav-social-btn svg{width:18px;height:18px;}
@media(max-width:900px){.nav-social{display:none !important;}}

/* footer: 5 kolommen + Informatie-blok */
.footer-grid{grid-template-columns:1.15fr 1.45fr .85fr .9fr 1.25fr;gap:30px;}
.footer-info{list-style:none;padding:0;margin:0;}
.footer-info li{font-size:14.5px;color:rgba(247,245,242,.82);margin-bottom:10px;line-height:1.45;}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px;}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:30px;}}

/* footer desktop-verfijning (6 kolommen netjes) */
@media(min-width:1025px){.footer-grid{grid-template-columns:1.15fr 1.45fr .85fr .9fr 1.25fr;gap:26px;}}
.footer-col a,.footer-info li,.footer-col .contact-item{font-size:13.5px;}
.footer-col h4{font-size:14px;}

/* === Footer strakker: kolommen bovenaan uitgelijnd, logo erbovenuit, IBAN op 1 regel === */
.footer-grid{align-items:start}
.footer-logo{margin-bottom:32px}
.footer-logo img{height:58px;width:auto}
.footer-col h4{margin-top:10px}
.footer-info li{white-space:nowrap}
.footer-info-merged{margin-top:16px}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr 1fr !important;gap:30px}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr !important;gap:28px}.footer-col h4{margin-top:0}.footer-info li{white-space:normal}}

.footer-col .contact-item{font-size:13px}
.footer-col .contact-item a{word-break:normal}

/* === Footer v2: KVK/BTW/IBAN onder Contact, koppen op hoogte van de USP-tekst === */
.footer-col h4{margin-top:0}
.footer-grid{grid-template-columns:1.0fr 1.6fr .8fr .85fr .95fr}
.footer-grid > .footer-col:not(:first-child){padding-top:98px}
.footer-col .contact-item-info{margin-top:12px}
.footer-col .contact-item-info:first-of-type{margin-top:16px}
.footer-col .contact-item-info span{white-space:nowrap}
@media(min-width:1025px){.footer-grid{grid-template-columns:1.0fr 1.6fr .8fr .85fr .95fr}}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr 1fr !important}.footer-grid > .footer-col:not(:first-child){padding-top:0}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr !important}.footer-grid > .footer-col:not(:first-child){padding-top:0}.footer-col .contact-item-info span{white-space:normal}}

/* === Footer v3: overal gelijke tussenruimte tussen de kolommen === */
.footer-grid{grid-template-columns:repeat(5,max-content);justify-content:space-between;column-gap:40px}
@media(min-width:1025px){.footer-grid{grid-template-columns:repeat(5,max-content);justify-content:space-between;column-gap:40px}}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr 1fr !important;justify-content:normal;column-gap:30px}.footer-grid > .footer-col:not(:first-child){padding-top:0}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr !important;justify-content:normal}.footer-grid > .footer-col:not(:first-child){padding-top:0}}

/* === Footer v4: compacter + lagere achtergrond (logo blijft in beeld met marge) === */
.footer{padding-top:48px !important}
.footer-grid{justify-content:start;column-gap:60px;padding-bottom:34px}
@media(min-width:1025px){.footer-grid{justify-content:start;column-gap:60px}}
.footer-logo{margin-bottom:18px}
.contact-item{margin-bottom:8px}
.contact-item-info{margin-top:8px}
.contact-item-info:first-of-type{margin-top:12px}
.footer-bottom{padding:18px 0}
.footer-grid > .footer-col:not(:first-child){padding-top:84px}
@media(max-width:1024px){.footer-grid{justify-content:normal !important;column-gap:30px}.footer-grid > .footer-col:not(:first-child){padding-top:0}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr !important}.footer-grid > .footer-col:not(:first-child){padding-top:0}}

/* === Footer-bottom: links uitgelijnd met DPS-credit === */
.footer-bottom{justify-content:center;gap:40px;flex-wrap:wrap}
.footer-bottom a{color:rgba(247,245,242,.78);text-decoration:none;transition:color .2s ease}
.footer-bottom a:hover{color:#fff}
.footer-bottom .fb-made{color:var(--bronze)!important;font-weight:600;transition:color .2s ease}.fb-made:hover{color:var(--bronze-light,#3DA2F2)!important;text-decoration:underline}
@media(max-width:768px){.footer-bottom{gap:14px;justify-content:center;text-align:center}}

/* === Footer social-knoppen (onder de USP's in de logo-kolom) === */
.footer-social{display:flex;gap:12px;margin-top:22px}
.footer-social a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(247,245,242,.08);color:rgba(247,245,242,.85);transition:background .2s ease,color .2s ease}
.footer-social a:hover{background:var(--bronze,#0A82E6);color:#fff}
.footer-social svg{width:18px;height:18px}

.footer-social{flex-direction:column;gap:10px}

/* === Footer: social iets hoger + hele grid gecentreerd === */
.footer-social{margin-top:6px}
.footer-grid{justify-content:center}
@media(min-width:1025px){.footer-grid{justify-content:center}}
@media(max-width:1024px){.footer-grid{justify-content:center !important}}

/* === Ad-landingspagina: hero met offerteformulier (conversie boven de vouw) === */
.subhero.lp-hero{min-height:auto;padding-bottom:64px}
.subhero.lp-hero .subhero-content{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:1180px;margin:0 auto;width:100%}
.lp-hero-text{max-width:560px}
.lp-usps{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:10px}
.lp-usps li{position:relative;padding-left:30px;color:#fff;font-weight:600}
.lp-usps li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--bronze,#0A82E6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat}
.lp-hero-phone{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:var(--bronze,#0A82E6);color:#fff;padding:13px 26px;border-radius:40px;font-weight:700;text-decoration:none;transition:background .2s}
.lp-hero-phone:hover{background:var(--bronze-dark,#0668C2)}
.lp-form{background:#fff;border-radius:18px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.lp-form h2{font-size:1.42rem;margin:0 0 4px;color:var(--brand-dark,#11202E);line-height:1.2}
.lp-form-sub{font-size:.92rem;color:#5a6b78;margin:0 0 16px}
.lp-of-form{display:flex;flex-direction:column;gap:10px}
.lp-of-form input,.lp-of-form textarea{width:100%;padding:12px 14px;border:1px solid #d8e0e6;border-radius:10px;font:inherit;background:#fff;color:#14202b;box-sizing:border-box}
.lp-of-form input::placeholder,.lp-of-form textarea::placeholder{color:#9aa7b1}
.lp-of-form input:focus,.lp-of-form textarea:focus{outline:none;border-color:var(--bronze,#0A82E6)}
.lp-submit{background:var(--bronze,#0A82E6);color:#fff;border:none;padding:14px;border-radius:10px;font-weight:700;cursor:pointer;font-size:1rem;margin-top:4px;transition:background .2s;width:100%}
.lp-submit:hover{background:var(--bronze-dark,#0668C2)}
@media(max-width:900px){.subhero.lp-hero .subhero-content{grid-template-columns:1fr;gap:26px}.lp-hero-text{max-width:none}}

/* ============================================================
   TOUCH-FIX (mobiel) — één tap = directe actie, nooit dubbeltap.
   Verandert niets aan layout of animaties; alleen tap-gedrag.
   ============================================================ */
@media (hover: none), (pointer: coarse){
  /* Hover-dropdown niet via hover op touch: parent-link navigeert direct bij 1 tap */
  .nav-links .has-submenu:hover > .submenu,
  .nav-links .has-submenu:focus-within > .submenu{opacity:0 !important;visibility:hidden !important}
}
a,button,input,select,textarea,label,summary,[role="button"],
.btn,.nav-cta,.nav-cta .btn,.sticky-cta a,.wa-widget,
.seo-related-card,.hp-svc-card,.hp-tips-card,.hpgr-card,.hp-proj-card,
.faq-q,.calc-tile,.calc-radio,.tab,.dot,.mobile-menu a,.nav-links a{
  touch-action:manipulation;
}

/* ============================================================
   MOBIEL — inline grids (repeat(3/4,1fr)) dwingen naar 1 kolom.
   Inline styles negeren media-queries; !important overschrijft ze.
   Voorkomt afgebroken plaatsnamen in o.a. werkgebied/regio-kaarten.
   ============================================================ */
@media (max-width: 600px){
  [style*="repeat(3,1fr)"],[style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],[style*="repeat(4, 1fr)"]{grid-template-columns:1fr !important}
}
@media (min-width: 601px) and (max-width: 900px){
  [style*="repeat(3,1fr)"],[style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],[style*="repeat(4, 1fr)"]{grid-template-columns:repeat(2,1fr) !important}
}

/* ============================================================
   HAMBURGER-FIX (mobiel <=900px): drie streepjes exact gelijk,
   gecentreerd en volledig binnen de cirkel. Voorkomt scheef
   uitstekende lijnen ("punten steken eruit") en clipping.
   Staat bewust achteraan zodat het eerdere regels overschrijft.
   ============================================================ */
@media (max-width: 900px){
  .nav-burger{position:relative !important;overflow:hidden !important;
    flex:0 0 44px !important;width:44px !important;height:44px !important;
    box-sizing:border-box !important;padding:0 !important}
  .nav-burger span{position:absolute !important;top:50% !important;left:50% !important;
    width:20px !important;height:2px !important;margin:-1px 0 0 -10px !important;
    background:#fff !important;border-radius:2px !important}
  .nav-burger span::before,
  .nav-burger span::after{content:'' !important;position:absolute !important;left:0 !important;
    width:20px !important;height:2px !important;background:#fff !important;border-radius:2px !important;
    transition:transform .3s var(--ease),top .3s var(--ease)}
  .nav-burger span::before{top:-6px !important}
  .nav-burger span::after{top:6px !important}
  .nav-burger.open span{background:transparent !important}
  .nav-burger.open span::before{top:0 !important;transform:rotate(45deg) !important}
  .nav-burger.open span::after{top:0 !important;transform:rotate(-45deg) !important}
}

/* ============================================================
   SUBHERO-FIX: hero-tekst altijd BOVEN de donkere overlay.
   Sommige subpagina's (o.a. regio's) gebruiken .container i.p.v.
   .subhero-content als wrapper; die kreeg geen z-index en viel
   daardoor achter de ::before-overlay (vervaagde, onleesbare tekst).
   ============================================================ */
.subhero > .container{position:relative;z-index:2}
.subhero > .container h1{color:var(--cream)}
.subhero > .container .subhero-sub{color:rgba(247,245,242,.95)}

/* ============================================================
   OVER ONS-blok (homepage) MOBIEL: volgorde tekst -> foto.
   In de HTML staat de foto eerst; op mobiel hoort de volgorde
   eyebrow + tekst, dan de foto, dan de volgende sectie (contact).
   Desktop (>=901px) blijft foto links / tekst rechts.
   ============================================================ */
@media (max-width: 900px){
  /* volgorde: eyebrow + tekst -> FOTO -> CTA-knop (knop losgemaakt van het tekstblok) */
  .hp-overons-text{display:contents}
  .hp-overons-text > *{order:2}
  .hp-overons-text .eyebrow{order:1}
  .hp-overons-photo{order:3}
  .hp-overons-text .btn{order:9; margin-top:24px}
}

/* ============================================================
   Mobiele chatbot + toetsenbord: als het toetsenbord open is
   (klasse .kb via JS/visualViewport) wordt de panel-hoogte door
   JS gezet en moet de body meeflexen, met invoer vast onderaan.
   ============================================================ */
@media (max-width:600px){
  .agbot.kb .agbot-panel{ display:flex; flex-direction:column; border-radius:18px; }
  .agbot.kb .agbot-body{ flex:1 1 0 !important; height:0 !important; min-height:0 !important; overflow-y:auto; }
  .agbot.kb .agbot-input, .agbot.kb .agbot-header{ flex:0 0 auto; }
}

/* ============================================================
   Tips & nieuws: STIL 3-kaarten raster (geen bewegende marquee).
   3 kaarten naast elkaar op desktop, gestapeld op mobiel.
   ============================================================ */
.hp-tips-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1200px;margin:0 auto;padding:0 4px}
.hp-tips-grid .hp-tips-card{width:auto;min-width:0;flex:none;margin:0}
@media (max-width:900px){ .hp-tips-grid{grid-template-columns:1fr} }

/* ===== DPS standaard: koppen gecentreerd (alle paginas), hero-CTA glow, seo-faq ===== */
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.28), 0 0 16px 2px color-mix(in srgb, var(--bronze) 45%, transparent); }
  50%{ box-shadow:0 8px 26px rgba(0,0,0,.30), 0 0 32px 7px color-mix(in srgb, var(--bronze) 65%, transparent); }
}
/* hero "Offerte aanvragen": altijd gloeien vanaf de top, op elk scherm */
.hp-hs-btn{ animation:ctaGlow 2.6s ease-in-out infinite !important; }
.hp-hs-static-content .hp-hs-btn,
.hp-hs-slide.is-active .hp-hs-btn{ opacity:1 !important; transform:none !important; }

.seo-faq-item{ margin-top:14px; }
.seo-faq-item h4{ margin:0 0 4px; font-size:16px; color:var(--brand-dark); }
.seo-faq-item p{ margin:0; }

/* ---- KOPPEN GECENTREERD ALS STANDAARD (alle schermen) ---- */
/* subhero: 1 gecentreerde kolom ipv 2-koloms, elke pagina */
.subhero-content{ grid-template-columns:1fr; text-align:center; max-width:880px; }
.subhero:not(.lp-hero) .subhero-content h1,.subhero:not(.lp-hero) .subhero-content .subhero-sub,.subhero:not(.lp-hero) .subhero-content .breadcrumb{margin-left:auto;margin-right:auto;}
.subhero .breadcrumb{ justify-content:center; }
/* homepage full-width sectiekoppen gecentreerd */
.hp-services > .container,
.hp-werkwijze > .container,
.hp-portfolio > .container,
.hp-tips > .container{ text-align:center; }
/* content-grids weer links zodat alleen de koppen centreren */
.hp-svc-grid,.hp-port-grid,.tips-grid{ text-align:left; }
/* subpagina sectiekoppen gecentreerd (FAQ, related, tip/project/regio intro's) */
.section-header{ text-align:center; }

/* ---- 2-KOLOMS BLOKKEN: alleen centreren op mobiel (daar stapelen ze) ---- */
@media (max-width:600px){
  .hp-overons-text{ text-align:center; }                       /* Over ons */
  .content-2col .content-text{ text-align:center; }            /* dienst: tekst naast foto */
  .content-2col .content-text .feature-list{ display:inline-block; text-align:left; }
  .hp-faqcontact .section-header{ text-align:center; }         /* homepage FAQ-blok */
  .hp-waarom{ padding-top:34px; }                              /* kop iets hoger */
}

/* #18 koppen centreren: FAQ + vrijblijvend contact */
.hp-faqsec .hp-faqcontact-faq .section-header{text-align:center}
.hp-faqsec .hp-faqcontact-info{text-align:center}
.hp-faqsec .hp-faqcontact-info .hp-calc-sub{margin-left:auto;margin-right:auto}
.hp-faqsec .faq-q{ }

/* #7 hover-gloed in logo-kleur op kaarten, met beweging */
.hp-svc-card,.hp-port-card,.why-card,.dienst-card,.project-card,.tip-card,.review-card,.voordeel-card,.hpgr-card,.mat-card,.seo-related-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,border-color .4s ease}
.hp-svc-card:hover,.hp-port-card:hover,.why-card:hover,.dienst-card:hover,.project-card:hover,.tip-card:hover,.review-card:hover,.voordeel-card:hover,.hpgr-card:hover,.seo-related-card:hover{
  box-shadow:0 18px 42px color-mix(in srgb,var(--bronze) 40%,transparent),0 0 0 1px color-mix(in srgb,var(--bronze) 35%,transparent) !important;
  transform:translateY(-6px) !important;
}

/* #4 bot compacter + opties 2 per rij */
.agbot-panel{ width:360px !important; height:auto !important; max-height:min(72vh,560px) !important; }
.agbot-body{ height:auto !important; max-height:48vh !important; flex:0 1 auto !important; min-height:0 !important; padding:15px !important; gap:9px !important; overflow-y:auto; }
.rucalc-pills{ display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; }
.rucalc-pill{ padding:10px 10px !important; font-size:12.5px !important; text-align:center; display:flex; align-items:center; justify-content:center; line-height:1.25; }
@media(max-width:600px){ .agbot-panel{ width:calc(100vw - 26px) !important; max-height:70vh !important; } }

/* #4 bot-opties (agbot-quick) 2 per rij */
.agbot-quick{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; align-content:start; }
.agbot-quick > *{ text-align:center !important; justify-content:center !important; padding:10px 8px !important; font-size:12.5px !important; line-height:1.25 !important; min-height:0 !important; }

/* Instagram-showcase */
.hp-insta{padding:90px 0;background:#0A1620;}
.hp-insta-head{max-width:680px;margin:0 auto 42px;text-align:center;}
.hp-insta-head .eyebrow{display:inline-block;background:color-mix(in srgb,var(--bronze) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--bronze) 45%,transparent);color:var(--bronze);padding:9px 20px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;}
.hp-insta-head .eyebrow::before{display:none;}
.hp-insta-head h2{color:#fff;font-size:clamp(28px,3.4vw,40px);line-height:1.14;margin:0 0 14px;}
.hp-insta-head p{color:rgba(255,255,255,.78);font-size:17px;line-height:1.6;margin:0;}
.hp-insta-head p a{color:var(--bronze);text-decoration:none;font-weight:600;}
.hp-insta-head p a:hover{text-decoration:underline;}
.hp-insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.hp-insta-card{position:relative;aspect-ratio:1/1;border-radius:14px;background-size:cover;background-position:center;overflow:hidden;display:block;box-shadow:0 14px 34px -18px rgba(0,0,0,.6);}
.hp-insta-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(11,21,33,.10),rgba(11,21,33,.34));opacity:.5;transition:opacity .28s ease,background .28s ease;}
.hp-insta-card:hover .hp-insta-ov{opacity:1;background:linear-gradient(rgba(10,130,230,.28),rgba(11,21,33,.58));}
.hp-insta-ic{opacity:0;transform:scale(.82);transition:opacity .28s ease,transform .28s ease;}
.hp-insta-card:hover .hp-insta-ic{opacity:1;transform:scale(1);}
.hp-insta-ic svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hp-insta-cta{text-align:center;margin-top:36px;}
.hp-insta-btn{display:inline-flex;align-items:center;gap:11px;background:#fff;color:#0A1620;padding:15px 30px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.hp-insta-btn svg:not(.ig-logo){width:21px;height:21px;stroke:#0A1620;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ig-logo{width:24px;height:24px;flex-shrink:0;}
.hp-insta-head .ig-logo{width:17px;height:17px;vertical-align:-3px;margin-right:4px;display:inline-block;}
.hp-insta-btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px -12px rgba(0,0,0,.5);}
@media(max-width:900px){.hp-insta-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.hp-insta{padding:60px 0;}.hp-insta-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

/* ===== Gouden neon hover (standaard, classy, volgt de muis) ===== */
.hp-waarom-card,.hp-svc-card,.hp-port-card,.hp-proj-card,.project-card,.hp-tips-card,.tip-card,.grev-card,.hpgr-card,.review-card,.dienst-card,.value-card,.mat-card,.seo-related-card,.hp-vak-card,.hp-why-card,.rucalc-card{
  position:relative;transition:box-shadow .32s ease,border-color .32s ease,transform .32s ease;
}
.hp-waarom-card::before,.hp-svc-card::before,.hp-port-card::before,.hp-proj-card::before,.project-card::before,.hp-tips-card::before,.tip-card::before,.grev-card::before,.hpgr-card::before,.review-card::before,.dienst-card::before,.value-card::before,.mat-card::before,.seo-related-card::before,.hp-vak-card::before,.hp-why-card::before,.rucalc-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .32s ease;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--bronze) 22%,transparent),transparent 62%);
}
.hp-waarom-card:hover::before,.hp-svc-card:hover::before,.hp-port-card:hover::before,.hp-proj-card:hover::before,.project-card:hover::before,.hp-tips-card:hover::before,.tip-card:hover::before,.grev-card:hover::before,.hpgr-card:hover::before,.review-card:hover::before,.dienst-card:hover::before,.value-card:hover::before,.mat-card:hover::before,.seo-related-card:hover::before,.hp-vak-card:hover::before,.hp-why-card:hover::before,.rucalc-card:hover::before{opacity:1;}
.hp-waarom-card:hover,.hp-svc-card:hover,.hp-port-card:hover,.hp-proj-card:hover,.project-card:hover,.hp-tips-card:hover,.tip-card:hover,.grev-card:hover,.hpgr-card:hover,.review-card:hover,.dienst-card:hover,.value-card:hover,.mat-card:hover,.seo-related-card:hover,.hp-vak-card:hover,.hp-why-card:hover,.rucalc-card:hover{
  border-color:color-mix(in srgb,var(--bronze) 65%,transparent)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bronze) 50%,transparent),0 0 22px -2px color-mix(in srgb,var(--bronze) 58%,transparent),0 0 60px -14px color-mix(in srgb,var(--bronze) 52%,transparent),0 20px 44px -22px rgba(0,0,0,.45)!important;
}

/* ===== Contact-links (e-mail/telefoon) klikbaar zonder linkkleur-breuk ===== */
.cc-link{color:inherit;text-decoration:none;transition:color .2s ease}
.cc-link:hover{color:var(--bronze)}
/* ===== Hamburger blijft ALTIJD rechts op mobiel (ook na scroll) ===== */
@media(max-width:900px){
  /* nav-cta bevat lang + burger; duw de hele groep altijd rechts, ook als het logo bij scroll verdwijnt */
  .nav-cta{margin-left:auto !important}
}

/* ===== Floating telefoonknop (ALLEEN mobiel, boven de WhatsApp-knop) ===== */
.tel-btn{display:none}
@media(max-width:900px){
  .tel-btn{display:flex;align-items:center;justify-content:center;position:fixed;right:18px;bottom:86px;width:56px;height:56px;border-radius:50%;background:var(--bronze);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18);z-index:9999;transition:transform .28s var(--ease),box-shadow .28s;-webkit-tap-highlight-color:transparent}
  .tel-btn svg{width:48%;height:48%;stroke:#fff;fill:none}
  .tel-btn:active{transform:scale(.93)}
}

/* ===== Chatbot op mobiel: compacter, links, ~halve schermbreedte ===== */
@media(max-width:600px){
  .agbot-panel{ width:54vw !important; min-width:215px !important; max-width:none !important; left:0 !important; transform-origin:left bottom; }
  .agbot-header{ padding:12px 12px !important; gap:9px !important; align-items:flex-start; }
  .agbot-avatar{ width:34px !important; height:34px !important; }
  .agbot-avatar svg{ width:19px; height:19px; }
  .agbot-htext strong{ font-size:14.5px; line-height:1.2; }
  .agbot-htext span{ font-size:11px; }
  .agbot-hbtns{ gap:5px; }
  .agbot-ctl{ width:28px !important; height:28px !important; }
  .agbot-ctl svg{ width:15px; height:15px; }
}

/* ============================================================
   v194 LOCKED - MOBIEL: hamburger goud/neon + volledige centrering
   + volgorde tekst>foto>USPs(2x2)>cta + footer gecentreerd
   ============================================================ */

/* --- 1. Hamburger dropdown: hover/tap/actief duidelijk goud + neon glow --- */
.mobile-menu a{
  transition:color .2s var(--ease), text-shadow .2s var(--ease),
             background .2s var(--ease), padding-left .2s var(--ease);
  border-radius:8px;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a:active,
.mobile-menu .submenu a:hover,
.mobile-menu .submenu a:focus-visible,
.mobile-menu .submenu a:active{
  color:var(--bronze) !important;
  opacity:1 !important;
  text-shadow:0 0 7px rgba(10,130,230,.85), 0 0 16px rgba(10,130,230,.5);
  background:linear-gradient(90deg, rgba(10,130,230,.13), rgba(10,130,230,0));
  box-shadow:inset 3px 0 0 var(--bronze);
  padding-left:12px;
}
.mobile-menu a.is-active{
  color:var(--bronze) !important;
  text-shadow:0 0 7px rgba(10,130,230,.7), 0 0 14px rgba(10,130,230,.4);
}

/* --- Tip-detail hero (.subhero.tip-hero): foto rustig en goed zichtbaar.
   Geen inzoom-animatie, foto gecentreerd, lichtere overlay (titel blijft leesbaar via tekstschaduw).
   Geldt voor alle tip-detailpagina's, NIET voor andere subpagina-heroes. --- */
.subhero.tip-hero .subhero-bg{
  animation:none !important;
  transform:none !important;
  background-position:center center;
}
.subhero.tip-hero::before{
  background:linear-gradient(180deg, rgba(10,10,10,.32) 0%, rgba(10,10,10,.40) 55%, rgba(10,10,10,.62) 100%) !important;
}

/* --- Sitemap: ALLEEN op mobiel (<=600px) 2x2 (Hoofdpagina's|Diensten, Werkgebied|Service),
   gecentreerd, geen bullets, hover in logokleur. Op DESKTOP blijft de originele lijst ongemoeid. --- */
@media(max-width:600px){
  .sitemap-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px 24px;
    margin:24px auto 0;
  }
  .sitemap-col h3{ text-align:center; margin-top:0; }
  .sitemap-col ul{ list-style:none; padding:0; margin:14px 0 0; text-align:center; }
  .sitemap-col li{ margin:0 0 10px; }
  .sitemap-col a{ transition:color .2s var(--ease); }
  .sitemap-col a:hover,
  .sitemap-col a:focus-visible{ color:var(--bronze); }
}

/* --- 2. Telefoon: alles gecentreerd + volgorde tekst > foto > USPs(2x2) > cta --- */
@media(max-width:600px){

  /* Brede tekstcentrering binnen de paginasecties */
  main section .container,
  section > .container,
  .subhero-content,
  .article-content,
  .contact-info-card,
  .hp-svc-body,
  .footer-col{
    text-align:center;
  }

  /* Formuliervelden houden links uitgelijnde invoer (leesbaarheid) */
  .container input,
  .container textarea,
  .container select,
  .of-form input,
  .of-form textarea,
  .of-form select{
    text-align:left;
  }

  /* Lijsten als blok gecentreerd, regels links uitgelijnd binnen het blok */
  .article-content ul,
  .article-content ol{
    display:table;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    max-width:100%;
  }

  /* Homepage dienstkaart-vinkjes: 2x2 raster, gecentreerd (niet onder elkaar) */
  .hp-svc-features{
    display:grid;
    grid-template-columns:repeat(2,auto);
    gap:14px 26px;
    width:fit-content;
    max-width:100%;
    margin:0 auto 26px;
    justify-content:center;
  }
  .hp-svc-features li{ width:auto; max-width:100%; text-align:left; margin:0; }

  /* Project-specs: 2x2 -> Locatie+Categorie links, Looptijd+Oplevering rechts */
  .project-meta-grid{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto;
    grid-auto-flow:column;
    gap:22px 16px;
    text-align:center;
  }
  .project-meta-grid .item small,
  .project-meta-grid .item strong{ text-align:center; }

  /* Contact-rijen (icoon + tekst) als geheel gecentreerd */
  .contact-info-card .contact-item{
    justify-content:center;
    text-align:left;
  }

  /* Contact-card op de telefoon: 2-koloms raster.
     DOM-volgorde rijen = 1:Telefoon 2:E-mail 3:WhatsApp 4:Adres 5:Openingstijden.
     Gewenst: Telefoon|WhatsApp / E-mail|Openingstijden / Adres over de volle breedte eronder. */
  .contact-rows-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:stretch;
    margin-top:10px;
  }
  .contact-rows-grid .contact-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    border-bottom:0;
    padding:18px 10px;
    background:var(--bg-alt);
    border-radius:16px;
  }
  .contact-rows-grid .contact-row .icon{ margin:0 auto; }
  .contact-rows-grid .contact-row:nth-child(1){order:1}                    /* Telefoon */
  .contact-rows-grid .contact-row:nth-child(3){order:2}                    /* WhatsApp */
  .contact-rows-grid .contact-row:nth-child(2){order:3}                    /* E-mail */
  .contact-rows-grid .contact-row:nth-child(5){order:4}                    /* Openingstijden */
  .contact-rows-grid .contact-row:nth-child(4){order:5;grid-column:1 / -1} /* Adres, volle breedte */
  /* CTA-knoppen (Bel direct / Offerte aanvragen) gecentreerd op de telefoon */
  .contact-info-card > div:has(> .btn){ justify-content:center !important; }
  .contact-info-card > div:has(> .btn) .btn{ flex:0 0 auto; }

  /* Contact-CTA blok (.calc-contact-grid) op mobiel 2x2 met column-flow:
     Telefoon + E-mail in de linker kolom, Adres + Bereikbaarheid in de rechter kolom */
  .calc-contact-grid{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto auto !important;
    grid-auto-flow:column !important;
    gap:18px 14px !important;
  }
  .calc-contact-grid .calc-contact-item{ gap:9px; }
  .calc-contact-grid .calc-contact-item svg{ width:20px; height:20px; }
  .calc-contact-grid .calc-contact-item strong{ font-size:13.5px; }
  .calc-contact-grid .calc-contact-item a,
  .calc-contact-grid .calc-contact-item span{ font-size:12.5px; word-break:break-word; }

  /* Werkgebied-kaartjes (.wg-regio-grid): twee naast elkaar op mobiel, compacte hoogte */
  .wg-regio-grid{ grid-template-columns:1fr 1fr !important; grid-auto-rows:auto !important; }
  .wg-regio-grid .why-card{ padding:22px 14px !important; }

  /* Tips-overzicht: kaarten op natuurlijke hoogte zodat de foto VOLLEDIG zichtbaar is
     (de algemene grid-auto-rows:240px drukt de tip-foto anders tot een strookje) */
  .tips-grid{ grid-auto-rows:auto !important; }
  .tips-grid .tip-card .tip-img{ aspect-ratio:16/10; }

  /* Over ons - waarden-kaarten (.value-card): icoon, titel en tekst gecentreerd */
  .value-card{ text-align:center; }
  .value-card .icon{ margin-left:auto; margin-right:auto; }

  /* content-2col: 1 koloms, gecentreerd, ALTIJD volgorde:
     eyebrow -> titel + alinea's -> FOTO -> USP-vinkjes (2x2) -> CTA-knop.
     content-text wordt 'doorzichtig' zodat de losse elementen herordend worden.
     Geldt voor elk content-2col blok (met/zonder vinkjes, ook .reverse). */
  .content-2col,
  .content-2col.reverse{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:0;
    text-align:center;
  }
  .content-2col .content-text{ display:contents; }
  .content-2col .content-text > *{ order:2; text-align:center; max-width:100%; }
  .content-2col .content-text .eyebrow{ order:1; }
  .content-2col .content-img{
    order:3;
    width:100%;
    margin:18px 0 6px;
    opacity:1 !important;
    transform:none !important;
  }
  /* USP-vinkjes DIRECT onder de foto, twee aan twee (2x2), gecentreerd als blok */
  .content-2col .content-text .feature-list{
    order:4;
    display:grid;
    grid-template-columns:repeat(2,auto);
    gap:12px 28px;
    width:fit-content;
    max-width:100%;
    margin:20px auto 4px;
    text-align:left;
    justify-content:center;
  }
  .content-2col .content-text .btn,
  .content-2col .content-text a.btn{
    order:9;
    align-self:center;
    margin-top:20px;
  }

}

/* --- 3. Footer mobiel (<=768px): logo-blok gecentreerd bovenaan,
   info-kolommen in 2x2 (Contact|Diensten, Werkgebied|Service) --- */
@media(max-width:768px){
  .footer-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    justify-content:stretch !important;
    column-gap:18px !important;
    row-gap:34px !important;
    text-align:center;
  }
  /* eerste kolom = logo + USP-vinkjes + social: full width, alles op de middenas */
  .footer-grid > .footer-col:first-child{
    grid-column:1 / -1 !important;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding-top:0 !important;
  }
  .footer-logo{display:block;margin:0 auto 16px}
  .footer-benefits{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    width:fit-content;
    max-width:100%;
    margin:0 auto;
    text-align:left;
  }
  .footer-social{
    flex-direction:row !important;
    justify-content:center !important;
    gap:16px !important;
    margin-top:18px !important;
  }
  /* info-kolommen netjes gecentreerd, regels gecentreerd */
  .footer-col{ text-align:center; }
  .footer-col .contact-item,
  .footer-col .contact-item-info{
    justify-content:center;
    text-align:left;
  }
}

/* === FOOTER-FIX v200 (vast): contact-regels altijd netjes onder elkaar (mobiel) ===
   Oorzaak: losse contact-items kregen justify-content:center, waardoor korte regels
   (KVK/BTW/IBAN) verder insprongen dan de lange. Vast: items nooit los centreren,
   altijd op een gemeenschappelijke linkerrand; de contactgroep als blok gecentreerd. */
@media(max-width:768px){
  .footer-col .contact-item,
  .footer-col .contact-item-info{
    justify-content:flex-start !important;
    text-align:left;
  }
  .footer-col:has(> .contact-item){
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:fit-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .footer-col:has(> .contact-item) > h4{ align-self:center; }
}

/* === AGBOT MOBIEL v200 (vast): paneel altijd volledig in beeld + toetsenbord-proof ===
   Vervangt de oude, botsende mobiele bot-regels. Op mobiel wordt het paneel een
   nette bottom-sheet over de volledige breedte die nooit boven de schermrand wegvalt.
   Hoogte (--ag-maxh) en onderkant (--ag-bottom) worden door JS via visualViewport
   gezet, zodat het paneel meekrimpt en boven het toetsenbord blijft zodra je typt. */
@media(max-width:600px){
  #agbot.open .agbot-panel{
    position:fixed !important;
    left:10px !important; right:10px !important;
    width:auto !important; min-width:0 !important; max-width:none !important;
    bottom:var(--ag-bottom,78px) !important;
    top:auto !important;
    height:auto !important;
    max-height:var(--ag-maxh,72vh) !important;
    display:flex !important; flex-direction:column !important;
    border-radius:18px !important;
    transform-origin:left bottom;
  }
  #agbot.open .agbot-header,
  #agbot.open .agbot-input{ flex:0 0 auto !important; }
  #agbot.open .agbot-body{
    flex:1 1 auto !important;
    height:auto !important; min-height:0 !important; max-height:none !important;
    overflow-y:auto !important; -webkit-overflow-scrolling:touch;
  }
  #agbot.open .agbot-quick{
    flex:0 1 auto !important;
    max-height:46% !important; overflow-y:auto !important;
  }
}

/* === FOOTER-BOTTOM MOBIEL (vast): alleen DPS-credit + copyright op de telefoon ===
   Op mobiel (<=600px) de drie tussenliggende beleidslinks (Algemene voorwaarden,
   Privacy Policy, Cookiebeleid) verbergen. "Gemaakt door DPS Media" (.fb-made) en
   de copyright (span.fb-copy) blijven staan. De links blijven op desktop staan en
   blijven op mobiel bereikbaar via de Service-kolom hierboven. Taal-onafhankelijk:
   alle <a> behalve .fb-made = precies die drie beleidslinks. */
@media(max-width:600px){
  .footer-bottom a:not(.fb-made){ display:none !important; }
}

/* === TIP-INTROKOP (vast): dikgedrukte zwarte kop boven de eerste (lead) alinea ===
   Op tip-/nieuwspagina's kreeg alleen de bovenste (lead) alinea geen kop. Nu staat er
   overal een <h2 class="tip-lead-h2"> boven, in dezelfde stijl/scale als de andere
   koppen (28px, bold, var(--heading)). Alleen de bovenmarge is iets krapper zodat de
   kop netjes onder de meta-regel ("x min lezen") staat in plaats van met een grote gap. */
.article-content h2.tip-lead-h2{ margin-top:28px; }

/* ============================================================
   MOBIELE FIJNSLAG (vast): hero-CTA glow + footer 1-koloms met
   gecentreerde contactgegevens + gecentreerde feature-kaart-iconen.
   ============================================================ */

/* 1) HERO-CTA "Offerte aanvragen": altijd vol zichtbaar + sterke permanente gloed.
   iOS-veilige rgba-gloed (geen color-mix), wint van de entree-animatie, boven elke overlay. */
@keyframes ctaGlowBoss{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.32), 0 0 16px 2px rgba(233,176,23,.55); }
  50%{ box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 42px 11px rgba(233,176,23,.9); }
}
@keyframes ctaGlowBossMob{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.34), 0 0 22px 4px rgba(233,176,23,.7); }
  50%{ box-shadow:0 12px 32px rgba(0,0,0,.36), 0 0 54px 15px rgba(233,176,23,1); }
}
.hp-hs-static-content .hp-hs-btn,
.hp-hs-slide.is-active .hp-hs-btn,
.hp-hs-btn{
  opacity:1 !important;
  visibility:visible !important;
  will-change:auto !important;          /* GEEN GPU-laag forceren: will-change/translateZ maakten de knop dof op iOS (laag werd 1x dof getekend, niet hertekend) */
  isolation:auto !important;
  -webkit-backface-visibility:visible !important; backface-visibility:visible !important;
  position:relative; z-index:6;
  animation:ctaGlowBoss 2.2s ease-in-out infinite !important;
  animation-delay:0s !important;        /* gloei meteen vanaf laden, niet pas na 1s */
}
/* Op de telefoon GEEN transform op de knop -> geen compositielaag -> de box-shadow-gloei tekent de knop
   elke frame opnieuw (zelfde reden waarom hij bij schermspiegeling wel fel is). */
@media(max-width:768px){
  .hp-hs-static-content .hp-hs-btn,
  .hp-hs-slide.is-active .hp-hs-btn,
  .hp-hs-btn{
    transform:none !important;
    -webkit-transform:none !important;
  }
}
@media(max-width:600px){
  .hp-hs-static-content .hp-hs-btn,
  .hp-hs-btn{
    animation:ctaGlowBossMob 1.9s ease-in-out infinite !important;
    animation-delay:0s !important;
    font-weight:800 !important;
  }
}

/* 2) FOOTER op de telefoon: 1 kolom + gecentreerd, zodat de Contact-gegevens als nette
   groep gecentreerd onder de kop "Contact" staan (regels onder elkaar, iconen op een lijn). */
@media(max-width:768px){
  /* Footer blijft 2-koloms (oude situatie). Alleen het Contact-blok gecentreerd onder de kop:
     iets kleiner lettertype zodat het blok smaller is dan de cel en zichtbaar in het midden komt,
     met de regels onder elkaar (iconen op een lijn) en de kop "Contact" gecentreerd erboven. */
  .footer-col:has(> .contact-item) .contact-item,
  .footer-col:has(> .contact-item) .contact-item-info{
    font-size:11px !important;
    white-space:normal !important;        /* regels mogen wrappen -> blok smaller dan de cel */
    justify-content:flex-start !important; text-align:left !important;
  }
  .footer-col:has(> .contact-item) .contact-item:has(a){ white-space:nowrap !important; }  /* alleen telefoon + email op een regel */
  .footer-col:has(> .contact-item) .contact-item svg,
  .footer-col:has(> .contact-item) .contact-item-info svg{ width:13px !important; height:13px !important; }
  .footer-col:has(> .contact-item){
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important;     /* iconen op een lijn */
    width:140px !important; max-width:100% !important;   /* email-brede kolom; langere regels wrappen erbinnen */
    margin-left:auto !important; margin-right:auto !important;  /* hele blok gecentreerd in de cel */
  }
  .footer-col:has(> .contact-item) > h4{ align-self:center !important; }
}

/* 3) Feature-/voordeelkaarten op de telefoon: icoon gecentreerd boven de tekst,
   tekst gecentreerd. Geldt voor de "waarom ons"-kaarten en de voordeelkaarten. */
@media(max-width:600px){
  .hp-waarom-card, .voordeel-card{ text-align:center !important; }
  .hp-waarom-ic, .voordeel-icon{ margin-left:auto !important; margin-right:auto !important; }
}

/* ============================================================
   MOBIELE FIJNSLAG 2 (vast): review-/tip-badges centreren +
   iOS hero-CTA backdrop-fix.
   ============================================================ */

/* A) iOS HERO-CTA: de eyebrow-pill boven de knop heeft backdrop-filter; op iOS laat dat de
   gecomposite offerteknop eronder dof renderen tot je scrolt. Backdrop op mobiel weghalen. */
@media(max-width:768px){
  .hp-hs-eyebrow{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* B) Review-kaarten (hpgr) en tip-kaarten op mobiel: badges/pills + tekst gecentreerd. */
@media(max-width:768px){
  .hpgr-tag{ align-self:center !important; }
  .hpgr-text{ text-align:center !important; }
  .hpgr-name-row{ align-items:center !important; text-align:center !important; }
  .hp-tips-card-body{ align-items:center !important; text-align:center !important; }
  .hp-tips-tag{ align-self:center !important; }
  .hp-tips-card h3, .hp-tips-card p{ text-align:center !important; }
  .hp-tips-meta{ justify-content:center !important; gap:16px !important; }
}

/* C) Review-sectie KOP op mobiel gecentreerd: Google-score + "Google Reviews" + knop "Schrijf review". */
@media(max-width:768px){
  .hpgr-head{ align-items:center !important; text-align:center !important; }
  .hpgr-google{ justify-content:center !important; }
  .hpgr-google-text{ align-items:center !important; }
  .hpgr-rating{ justify-content:center !important; }
}