
/* 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}}
/* Wandmeesters - Production CSS */
:root {
  --brand-dark:#242A28; --brand-darker:#181D1B; --charcoal:#242A28; --charcoal-soft:#313A37;
  --bronze:#3A7D6E; --bronze-light:#58A192; --bronze-dark:#2C6155;
  --cream:#F2F6F3; --paper:#FBFDFC; --walnut:#313A37; --oak:#3A7D6E;
  --bg:#ffffff; --bg-alt:#EAEFEC; --bg-dark:var(--brand-dark);
  --text:#3C4542;          /* 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:'Manrope','Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Manrope','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 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 8s ease-out forwards,mask-reveal 1.2s var(--ease) forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
@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:50vh;min-height:380px;display:flex;align-items:center;overflow:hidden;margin-top:80px;background:var(--brand-darker)}
.subhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:kenburns 14s 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;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:24px;left:24px;right:24px;z-index:2;color:var(--cream)}
.project-meta h3{color:var(--cream);font-size:22px;margin-bottom:4px}
.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}
.gallery-item{aspect-ratio:4/3;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}

.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,.projecten-grid,.tips-grid,.reviews-grid,.values-grid,.gallery-grid{grid-template-columns:1fr}
  .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{width:56px;height:56px}
  .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{bottom:18px;left:18px;right:18px}
}
@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{bottom:16px;left:16px;right:16px}
}
@media(max-width:400px){
  .project-meta h3{font-size:16px;line-height:1.2}
  .project-meta .loc{font-size:12px}
  .project-meta{bottom:14px;left:14px;right: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 1.2s 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.02);transition:transform 8s linear}
.hp-hs-slide.is-active .hp-hs-img{transform:scale(1.12)}

/* 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,.hp-hs-btn{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}
  .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 - Wandmeesters
   - Achtergrond: wit / koel lichtgrijs
   - Donker:      #242A28 (diep blauwzwart)
   - Accent:      #3A7D6E (Wandmeesters blauw, uit logo) met licht/donker variant */
:root{
  --bg: #ffffff !important;
  --bg-alt: #EAEFEC !important;
  --bg-cream: #EFF4F1 !important;
  --bg-card: #ffffff !important;
  --bg-dark: #181D1B !important;
  --bg-dark-alt: #313A37 !important;
  --bronze: #3A7D6E !important;
  --bronze-light: #58A192 !important;
  --bronze-dark: #2C6155 !important;
  --brand-dark: #242A28 !important;
  --text-soft: #3C4542 !important;
  --text-muted: #6E7A74 !important;
  --cream: #F2F6F3 !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: tegels 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{transform:scale(1.14)}
.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}
.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(-8px) !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 klant 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 klant 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 klant 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 klant) --- */
.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;
}

/* Oude regel die alle social-iconen in de huisstijlkleur forceerde is vervallen.
   De iconen krijgen nu hun eigen merkkleur, zie onderaan dit bestand. */
.footer-social a:hover{ 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 klant). */
.wa-btn{width:54px !important;height:54px !important}
.wa-btn svg{width:42px !important;height:42px !important}
@media (max-width:768px){
  .wa-btn{width:50px !important;height:50px !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}


/* ============================================================
   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 klant)
   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 Wandmeesters
   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}

/* === Wandmeesters - 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{background:#fff;border:1.5px solid var(--bronze);color:var(--bronze-dark,#D97D08);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.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; }

/* 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; }


/* === Wandmeesters / 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:#242A28;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:#242A28;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(36,42,40,.84),rgba(24,29,27,.91)),url(../img/projects/interieur-1.webp);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:hover{color:var(--bronze-light,#58A192)}
@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,#3A7D6E);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,#3A7D6E) 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,#3A7D6E);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,#2C6155)}
.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,#242A28);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,#3A7D6E)}
.lp-submit{background:var(--bronze,#3A7D6E);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,#2C6155)}
@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){
  .hp-overons-text{order:0}
  .hp-overons-photo{order:1}
}

/* ============================================================
   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} }


/* ============ INSTAGRAM SHOWCASE (hp-insta) ============ */
.hp-insta{padding:90px 0;background:var(--cream);}
.hp-insta-head{max-width:680px;margin:0 auto 44px;text-align:center;}
.hp-insta-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 22px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;}
.hp-insta-head .eyebrow::before{display:none;}
.hp-insta-head h2{color:#242A28;font-size:clamp(28px,3.4vw,40px);margin:0 0 14px;line-height:1.14;}
.hp-insta-head p{color:#5a6b7b;font-size:17px;line-height:1.6;margin:0;}
.hp-insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.ig-card{position:relative;aspect-ratio:9/16;border-radius:16px;background-size:cover;background-position:center;overflow:hidden;display:block;box-shadow:0 10px 30px -18px rgba(12,26,38,.42);transition:transform .25s ease,box-shadow .25s ease;}
.ig-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.42));}
.ig-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px -18px rgba(12,26,38,.5);}
.ig-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .25s ease;}
.ig-card:hover .ig-play{transform:scale(1.1);}
.ig-play svg{width:22px;height:22px;fill:var(--bronze);margin-left:3px;}
.ig-tag{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--brand-dark);}
.ig-tag svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;}
.hp-insta-cta{text-align:center;margin-top:40px;}
.hp-insta-cta .btn{display:inline-flex;align-items:center;gap:10px;}
.hp-insta-cta .btn svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
@media(max-width:1024px){.hp-insta-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.hp-insta{padding:62px 0;}.hp-insta-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}

/* ============ VIDEO FACADE (overons-video) ============ */
.overons-video{padding:90px 0;background:#fff;}
.ov-video-head{max-width:680px;margin:0 auto 40px;text-align:center;}
.ov-video-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 22px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:18px;}
.ov-video-head .eyebrow::before{display:none;}
.ov-video-head h2{color:#242A28;font-size:clamp(26px,3.2vw,38px);margin:0 0 12px;line-height:1.16;}
.ov-video-head p{color:#5a6b7b;font-size:17px;line-height:1.6;margin:0;}
.video-facade{position:relative;display:block;max-width:900px;margin:0 auto;border-radius:20px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 24px 60px -24px rgba(12,26,38,.5);}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.video-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,42,40,.12),rgba(24,29,27,.42));}
.video-facade:hover img{transform:scale(1.04);}
.video-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 12px 34px rgba(0,0,0,.32);transition:transform .25s ease;}
.video-facade:hover .video-play{transform:scale(1.08);}
.video-play svg{width:32px;height:32px;fill:var(--bronze);margin-left:5px;}
@media(max-width:560px){.overons-video{padding:60px 0;}.video-play{width:64px;height:64px;}.video-play svg{width:26px;height:26px;}}


/* hp-overons foto als video-facade (homepage Over Ons) */
.ov-home-video{position:relative;display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden;}
.ov-home-video img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.ov-home-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,42,40,.10),rgba(24,29,27,.40));}
.ov-home-video:hover img{transform:scale(1.04);}
.ov-home-video:hover .video-play{transform:scale(1.08);}

.ov-home-video{cursor:pointer;}
.ov-home-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;display:block;z-index:3;}
.ov-home-video.playing::after{display:none;}
.ov-home-video.playing img,.ov-home-video.playing .video-play{display:none;}

/* ===== 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 .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-werk-steps,.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 */
}

/* verhaal: donkere secties ALTIJD donker, ongeacht subpage-zebra of class-volgorde */
body.subpage > section.verhaal-hero,
body.subpage > section.verhaal-values{background:var(--charcoal) !important;color:var(--cream) !important}


/* ---------------------------------------------------------------
   Social media in de eigen merkkleuren, met een cirkelrand in
   dezelfde kleur. Geldt in de navigatiebalk en in de footer.
   --------------------------------------------------------------- */
.nav-social-btn,
.footer-social a{
  background:transparent;
  border:1px solid currentColor;
  transition:background-color .3s cubic-bezier(.22,.61,.36,1),
             color .3s cubic-bezier(.22,.61,.36,1),
             border-color .3s cubic-bezier(.22,.61,.36,1);
}

/* Facebook */
.nav-social-btn[aria-label="Facebook"],
.footer-social a[aria-label="Facebook"]{ color:#1877F2; border-color:#1877F2; }
.nav-social-btn[aria-label="Facebook"]:hover,
.footer-social a[aria-label="Facebook"]:hover{ background:#1877F2; color:#fff; border-color:#1877F2; }

/* Pinterest */
.nav-social-btn[aria-label="Pinterest"],
.footer-social a[aria-label="Pinterest"]{ color:#E60023; border-color:#E60023; }
.nav-social-btn[aria-label="Pinterest"]:hover,
.footer-social a[aria-label="Pinterest"]:hover{ background:#E60023; color:#fff; border-color:#E60023; }

/* LinkedIn */
.nav-social-btn[aria-label="LinkedIn"],
.footer-social a[aria-label="LinkedIn"]{ color:#0A66C2; border-color:#0A66C2; }
.nav-social-btn[aria-label="LinkedIn"]:hover,
.footer-social a[aria-label="LinkedIn"]:hover{ background:#0A66C2; color:#fff; border-color:#0A66C2; }

/* YouTube */
.nav-social-btn[aria-label="YouTube"],
.footer-social a[aria-label="YouTube"]{ color:#FF0000; border-color:#FF0000; }
.nav-social-btn[aria-label="YouTube"]:hover,
.footer-social a[aria-label="YouTube"]:hover{ background:#FF0000; color:#fff; border-color:#FF0000; }

/* Instagram: gradient in de rand en in het icoon.
   De binnenkant blijft doorzichtig, want de knop staat in de nav over een foto
   en in de footer op zwart. De rand is een gemaskeerde ::before-ring; een
   gradient op border-box alleen kleurt de hele cirkel vol. */
.nav-social-btn[aria-label="Instagram"],
.footer-social a[aria-label="Instagram"]{
  position:relative;
  color:#dc2743;
  border:0;
  background:transparent;
}
.nav-social-btn[aria-label="Instagram"]::before,
.footer-social a[aria-label="Instagram"]::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:1px;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask-composite:exclude;
  pointer-events:none;
}
.nav-social-btn[aria-label="Instagram"] svg,
.footer-social a[aria-label="Instagram"] svg{ stroke:#dc2743; }
.nav-social-btn[aria-label="Instagram"] svg [fill="currentColor"],
.footer-social a[aria-label="Instagram"] svg [fill="currentColor"]{ fill:#dc2743; }

/* Het icoon zelf in de Instagram-gradient: de gradient wordt door de vorm van
   het logo gemaskeerd. Alleen waar de mask werkt, anders blijft het gewone
   SVG-icoon staan. */
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .nav-social-btn[aria-label="Instagram"] svg,
  .footer-social a[aria-label="Instagram"] svg{ visibility:hidden; }
  .nav-social-btn[aria-label="Instagram"]::after,
  .footer-social a[aria-label="Instagram"]::after{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:18px;
    height:18px;
    background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.3'/><circle cx='17.6' cy='6.4' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.3'/><circle cx='17.6' cy='6.4' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
    pointer-events:none;
  }
}

/* Hover: cirkel vult zich met de gradient, icoon wordt wit.
   De achtergrond van de knop zelf blijft doorzichtig, anders zet de
   algemene hover-regel er de bronskleur onder. */
.nav-social-btn[aria-label="Instagram"]:hover,
.footer-social a[aria-label="Instagram"]:hover{
  background:transparent;
  border-color:transparent;
}
.nav-social-btn[aria-label="Instagram"]:hover::before,
.footer-social a[aria-label="Instagram"]:hover::before{
  padding:0;
  -webkit-mask:none;
          mask:none;
}
.nav-social-btn[aria-label="Instagram"]:hover svg,
.footer-social a[aria-label="Instagram"]:hover svg{ stroke:#fff; }
.nav-social-btn[aria-label="Instagram"]:hover svg [fill="currentColor"],
.footer-social a[aria-label="Instagram"]:hover svg [fill="currentColor"]{ fill:#fff; }
.nav-social-btn[aria-label="Instagram"]:hover::after,
.footer-social a[aria-label="Instagram"]:hover::after{ background:#fff; }


/* Instagram in het mobiele menu: dat item gebruikt dezelfde class als
   Facebook en kreeg daardoor de Facebook-blauwe kleur. Hier krijgt het
   zijn eigen Instagram-gradient. */
.mobile-menu-fb[aria-label="Instagram"] svg{ color:#dc2743; }
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .mobile-menu-fb[aria-label="Instagram"] svg{ display:none; }
  .mobile-menu-fb[aria-label="Instagram"]::before{
    content:"";
    width:20px;
    height:20px;
    flex:none;
    background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.3'/><circle cx='17.6' cy='6.4' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='2.5' y='2.5' width='19' height='19' rx='5.5'/><circle cx='12' cy='12' r='4.3'/><circle cx='17.6' cy='6.4' r='1.2' fill='black' stroke='none'/></svg>") center/contain no-repeat;
  }
}

/* ==================================================================
   POSITIONERING VOLGENS DE MASTER-TEMPLATE
   Overgenomen uit master-volledige-website-skill/template/assets/css/style.css.
   Alleen uitlijning en centrering, geen inhoud, geen kleuren, geen maten.
   Selectors en waarden staan hier letterlijk zoals in de master-template.
   ================================================================== */

.hpgr-rating{align-items:center}
.hp-werk-step{text-align:center}
.hp-werk-step h3{text-align:center}
.hp-werk-step p{text-align:center}
.calc-contact-grid{justify-content:center;margin:26px auto 8px;width:fit-content}
.hp-faqcontact-info .hp-calc-sub{margin:0 auto 20px}
.hp-faqcontact-info .calc-contact-grid{justify-content:center;margin:0 auto 22px}
.subhero:not(.lp-hero) .subhero-content h1{margin-left:auto;margin-right:auto}
.subhero:not(.lp-hero) .subhero-content .subhero-sub{margin-left:auto;margin-right:auto}
.subhero:not(.lp-hero) .subhero-content .breadcrumb{margin-left:auto;margin-right:auto}
.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}
.rucalc-pill{text-align:center;align-items:center;justify-content:center}
.hp-insta-head{margin:0 auto 42px}
.hp-tips-card .hp-tips-card-body{text-align:center}
.hp-tips-card{text-align:center}
.hp-tips-card .hp-tips-tag{margin-left:auto;margin-right:auto}
.hp-tips-card .hp-tips-meta{justify-content:center}
.tip-card .tip-body{text-align:center}
.tip-card .tip-meta{justify-content:center}
.calc-contact-grid{margin:26px auto 10px !important}
.calc-contact-item > svg{margin:0 auto 2px !important}
.calc-contact-item > div{align-items:center}
.hp-portfolio{text-align:center}
.hp-portfolio .container{text-align:center}
.hp-hs-eyebrow{width:fit-content !important}
a.mobile-menu-fb[aria-label="Instagram"]{align-items:center;justify-content:center}
a.mobile-menu-fb[aria-label="Facebook"]{align-items:center;justify-content:center}
.hp-waarom-card .hp-waarom-ic{margin-left:auto !important;margin-right:auto !important}
.voordeel-card .voordeel-icon{margin-left:auto !important;margin-right:auto !important}
.hp-werk-step .hp-werk-num{margin-left:auto !important;margin-right:auto !important}
.hp-svc-body .btn{margin-left:auto !important;margin-right:auto !important}
.dienst-card-body .dienst-card-link{margin-left:auto !important;margin-right:auto !important}
.hp-svc-features{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
.feature-list{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
.lp-usps{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
.footer-benefits{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}

@media(max-width:900px){
  .nav-cta{margin-left:auto !important}
  .hp-hs-eyebrow{margin-left:auto !important;margin-right:auto !important;text-align:center}
  .hp-hs-title{margin-left:auto;margin-right:auto}
  .hp-hs-desc{margin-left:auto;margin-right:auto}
  .hp-hs-btn{margin-left:auto !important;margin-right:auto !important}
}

@media(max-width:600px){
  section > .container{text-align:center}
  .subhero-content{text-align:center}
  .hp-svc-body{text-align:center}
  .footer-col{text-align:center}
  .hp-svc-features{width:fit-content;margin:0 auto 26px;justify-content:center}
  .project-meta-grid{text-align:center}
  .project-meta-grid .item small{text-align:center}
  .project-meta-grid .item strong{text-align:center}
  .content-2col{align-items:center;text-align:center}
  .content-2col.reverse{align-items:center;text-align:center}
  .content-2col .content-text > *{text-align:center}
  .content-2col .content-text .feature-list{width:fit-content;margin:20px auto 4px;justify-content:center}
  .hp-waarom-ic{margin-left:auto !important;margin-right:auto !important}
  .voordeel-icon{margin-left:auto !important;margin-right:auto !important}
  .content-2col .content-text .btn{margin-left:auto !important;margin-right:auto !important}
  .hp-hs-eyebrow{width:fit-content !important;margin-left:auto !important;margin-right:auto !important;text-align:center}
}

@media(max-width:768px){
  .footer-grid{text-align:center}
  .footer-grid > .footer-col:first-child{align-items:center;text-align:center}
  .footer-logo{margin:0 auto 16px}
  .footer-benefits{width:fit-content;margin:0 auto}
  .footer-col{text-align:center}
  .footer-col .contact-item{justify-content:center;text-align:center}
  .footer-col .contact-item-info{justify-content:center;text-align:center}
  .footer-col .contact-item{text-align:center}
  .footer-col .contact-item-info{text-align:center}
  .footer-col:has(> .contact-item){align-items:center;margin-left:auto;margin-right:auto}
  .footer-col:has(> .contact-item){margin-left:auto !important;margin-right:auto !important}
  .lp-usps{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
  .feature-list{width:fit-content;margin-left:auto;margin-right:auto}
  .footer-col:has(> .contact-item){width:fit-content;margin-left:auto;margin-right:auto}
}

@media(max-width:860px){
  .hp-faqcontact-info .calc-contact-grid{width:fit-content;margin-left:auto;margin-right:auto}
}

@media(max-width:760px){
  .footer-benefits{align-items:center}
  .footer-benefits li{justify-content:center;text-align:center}
  .footer-col ul li{justify-content:center}
  .footer-col .footer-benefits li{justify-content:center;text-align:center}
  .footer-col li:has(> svg){justify-content:center;text-align:center}
  .footer-col:first-child{align-items:center}
  .section-header .eyebrow{justify-content:center}
  .of-bullets{align-items:center;margin:18px auto}
  .of-bullets li{justify-content:center;text-align:center}
  .content-text{text-align:center}
  .hp-port-meta{text-align:center}
  .hp-port-tag{margin-left:auto;margin-right:auto}
  .hp-port-meta h3{text-align:center}
  .project-meta{text-align:center}
  .project-meta h3{text-align:center}
  .project-meta .loc{text-align:center}
  section .container > .section-header{text-align:center}
  .hp-port-meta{text-align:center}
  .project-meta{text-align:center}
  .content-text ul:not(#rucalc *) li{text-align:center}
  .lp-usps li{text-align:center}
}

@media (max-width:900px){
  .hp-hs-static-content{margin:0 auto}
}

@media (max-width:640px){
  .hp-svc-features{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
  .content-2col .content-text .feature-list{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
  .feature-list{width:fit-content !important;margin-left:auto !important;margin-right:auto !important}
}

/* ==================================================================
   MASTER-REGEL 23 / 5: KAARTEN EN CONTENTBLOKKEN GECENTREERD,
   OP DESKTOP EN OP MOBIEL.
   In de master-template staat dit alleen in de mobiele media queries;
   de geschreven regel in SKILL.md eist het ook op desktop ("niet links
   op desktop en alleen op mobiel"). Daarom hier dezelfde selectors en
   dezelfde techniek, maar zonder breedtegrens.
   Uitgezonderd, precies zoals de master: de hero, de footerkolommen op
   desktop, de calculator en de formuliervelden.
   ================================================================== */
.hp-waarom-card,
.voordeel-card,
.hp-svc-body,
.dienst-card-body,
.hp-tips-card,
.tip-card .tip-body,
.hpgr-card,
.rich-rev,
.hp-port-meta,
.hp-port-meta h3,
.project-meta,
.project-meta h3,
.project-meta .loc,
.content-text,
.content-2col .content-text > *,
.seo-content,
.seo-werkgebied,
.seo-faq h3,
.seo-faq-answer,
.seo-related-card,
.of-info,
.of-contact{ text-align:center; }

/* iconen en losse elementen die boven de tekst staan */
.rich-rev{ align-items:center; }
.rich-rev-stars,
.rich-rev-foot{ justify-content:center; }
.hpgr-card-head,
.hpgr-card-stars{ justify-content:center; }
.hp-port-tag{ margin-left:auto; margin-right:auto; }
.seo-related-card h4{ justify-content:center; }

/* Vinkjeslijsten: als BLOK centreren, regels links (master-regel 23) */
.feature-list,
.hp-svc-features,
.of-bullets,
.lp-usps{
  width:fit-content;
  margin-inline:auto;
  text-align:left;
}
.feature-list li,
.hp-svc-features li,
.of-bullets li,
.lp-usps li{ align-items:flex-start; }

/* Over-ons blok op de homepage: zelfde categorie als .content-text
   (tekst naast een foto), dus ook op desktop gecentreerd. */
.hp-overons-text{ text-align:center; }
.hp-overons-text .eyebrow{ display:inline-block; }

/* Vraag-en-antwoordblokken op de SEO-pagina's, zelfde categorie als
   .seo-faq-answer hierboven. */
.seo-faq-item h4,
.seo-faq-item p{ text-align:center; }

/* Contactblok: het icoon stond door een auto-marge midden in zijn vak,
   waardoor de symbolen niet onder elkaar stonden. Nu staan de vier
   gegevens in twee even brede kolommen, links uitgelijnd in hun eigen
   kolom (dus alle symbolen recht onder elkaar) en staat het blok als
   geheel gecentreerd. */
.hp-faqcontact-info .calc-contact-grid{
  display:grid !important;
  grid-template-columns:repeat(2,max-content) !important;
  grid-auto-flow:row !important;
  justify-content:center !important;
  justify-items:start !important;
  column-gap:48px !important;
  row-gap:16px !important;
  width:fit-content !important;
  margin:22px auto 20px !important;
  max-width:100% !important;
}
.hp-faqcontact-info .calc-contact-item{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:12px !important;
}
.hp-faqcontact-info .calc-contact-item > svg{ margin:2px 0 0 0 !important; }
.hp-faqcontact-info .calc-contact-item > div{ align-items:flex-start !important; text-align:left !important; }

@media(max-width:640px){
  .hp-faqcontact-info .calc-contact-grid{
    grid-template-columns:max-content !important;
    row-gap:14px !important;
  }
}

/* ------------------------------------------------------------------
   REVIEWSECTIE: uitlijning + hover
   1. De ratingregel bovenaan en de link onderaan staan nu op exact
      dezelfde linkerlijn als de reviewkaarten, en op dezelfde
      rechterlijn. Niets loopt meer tegen de rand.
   2. Hover: groene neongloed achter de kaart, zodat je ziet waar je
      met de muis staat. Alleen een transition, geen doorlopende
      animatie.
   ------------------------------------------------------------------ */
.hp-greviews .hpgr-head,
.hp-greviews .hpgr-allcta{
  margin-left:4px;
  margin-right:4px;
  padding-left:0;
  padding-right:0;
}
.hp-greviews .hpgr-head{ align-items:center; }

.hp-greviews .hpgr-card{
  position:relative;
  transition:box-shadow .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1),
             transform .45s cubic-bezier(.22,.61,.36,1);
}
.hp-greviews .hpgr-card:hover{
  border-color:var(--bronze-light,#58A192) !important;
  box-shadow:0 0 0 2px var(--bronze-light,#58A192),
             0 0 14px rgba(88,161,146,.75),
             0 0 34px rgba(88,161,146,.55),
             0 0 70px rgba(88,161,146,.35),
             0 12px 30px -14px rgba(37,42,45,.30) !important;
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){
  .hp-greviews .hpgr-card{ transition:none; }
  .hp-greviews .hpgr-card:hover{ transform:none; }
}

/* Categorielabel in de reviewkaart ook gecentreerd, net als de naam,
   de sterren en de reviewtekst. */
.hp-greviews .hpgr-tag{
  align-self:center;
  margin-left:auto;
  margin-right:auto;
}

/* ==================================================================
   HOVER: OVERAL DEZELFDE GROENE NEONGLOED + DUIDELIJKE BEWEGING
   Elke kaart, tegel of klikbaar blok licht op zodra de muis erover
   gaat: groene rand, gloed in de huisstijlkleur en een zichtbare
   verplaatsing omhoog. Zelfde rustige tempo als de rest van de site
   (.45s). Alleen een transition, nooit een doorlopende animatie.
   ================================================================== */
.hp-waarom-card,
.voordeel-card,
.why-card,
.hp-vak-card,
.mat-card,
.hp-svc-card,
.hp-svc,
.dienst-card,
.hp-tips-card,
.tip-card,
.hp-port-card,
.project-card,
.gallery-item,
.ig-card,
.seo-related-card,
.rich-rev,
.hpgr-card,
.hp-werk-step{
  transition:transform .45s cubic-bezier(.22,.61,.36,1),
             box-shadow .45s cubic-bezier(.22,.61,.36,1),
             border-color .45s cubic-bezier(.22,.61,.36,1) !important;
}

.hp-waarom-card:hover,
.voordeel-card:hover,
.why-card:hover,
.hp-vak-card:hover,
.mat-card:hover,
.hp-svc-card:hover,
.hp-svc:hover,
.dienst-card:hover,
.hp-tips-card:hover,
.tip-card:hover,
.hp-port-card:hover,
.project-card:hover,
.gallery-item:hover,
.ig-card:hover,
.seo-related-card:hover,
.rich-rev:hover,
.hp-werk-step:hover{
  transform:translateY(-8px) !important;
  border-color:var(--bronze-light,#58A192) !important;
  box-shadow:0 0 0 2px var(--bronze-light,#58A192),
             0 0 14px rgba(88,161,146,.75),
             0 0 34px rgba(88,161,146,.55),
             0 0 70px rgba(88,161,146,.35),
             0 12px 30px -14px rgba(37,42,45,.30) !important;
}

/* Kaarten met een foto: het beeld schuift mee zodat de beweging
   duidelijk zichtbaar is. */
.ig-card:hover,
.hp-port-card:hover,
.project-card:hover,
.gallery-item:hover{
  transform:translateY(-8px) scale(1.03) !important;
}
.ig-card{ overflow:hidden; }
.ig-card:hover .ig-play{ transform:scale(1.18) !important; }

/* Werkwijze-stappen hebben geen eigen vlak: daar licht de cirkel op */
.hp-werk-step:hover{ box-shadow:none !important; border-color:transparent !important; }
.hp-werk-step:hover .hp-werk-num{
  box-shadow:0 0 0 2px var(--bronze,#3A7D6E),
             0 0 14px rgba(58,125,110,.55),
             0 0 34px rgba(58,125,110,.35) !important;
}

@media (prefers-reduced-motion: reduce){
  .hp-waarom-card,.voordeel-card,.why-card,.hp-vak-card,.mat-card,.hp-svc-card,
  .hp-svc,.dienst-card,.hp-tips-card,.tip-card,.hp-port-card,.project-card,
  .gallery-item,.ig-card,.seo-related-card,.rich-rev,.hpgr-card,.hp-werk-step{
    transition:none !important;
  }
  .hp-waarom-card:hover,.voordeel-card:hover,.why-card:hover,.hp-vak-card:hover,
  .mat-card:hover,.hp-svc-card:hover,.hp-svc:hover,.dienst-card:hover,
  .hp-tips-card:hover,.tip-card:hover,.hp-port-card:hover,.project-card:hover,
  .gallery-item:hover,.ig-card:hover,.seo-related-card:hover,.rich-rev:hover,
  .hp-werk-step:hover{ transform:none !important; }
}

/* Master LOCKED-regel: meta-regel in de tipkaart gecentreerd MET tussenruimte */
.hp-tips-card .hp-tips-meta{ justify-content:center; gap:18px; }
.tip-card .tip-meta{ justify-content:center; gap:18px; }

/* ===== Feedbackronde aug 2026: subhero foto-slider + over-ons video ===== */
.subhero.has-slider .subhero-bg{opacity:0;transition:opacity 1.1s ease;animation:none;z-index:0}
.subhero.has-slider .subhero-bg.is-active{opacity:1;animation:kenburns 14s ease-out forwards}
.content-img video{width:100%;height:100%;object-fit:cover;display:block;background:#0a0a0a}
.content-img.content-video{aspect-ratio:16/9}
.hp-overons-photo video{width:100%;height:100%;object-fit:cover;display:block;background:#0a0a0a}
.hp-overons-photo.hp-overons-video{aspect-ratio:16/9;max-width:640px}
/* Calculator-uitbreiding aug 2026 (woning-vragen + oppervlakteschatting) */
.rucalc-fields-solo{grid-template-columns:1fr;max-width:280px;}
.rucalc-est{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--bronze) 8%,#fff);border:1.5px solid color-mix(in srgb,var(--bronze) 30%,#fff);border-radius:13px;padding:13px 16px;margin:0 0 18px;font-size:14px;color:var(--brand-dark);font-weight:600;line-height:1.45;}
.rucalc-est svg{width:22px;height:22px;flex:0 0 auto;color:var(--bronze);}
/* Calculator v2: pictogram-kaarten + succes-scherm (aug 2026) */
.rucalc-pills-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;}
.rucalc-pill-card{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 10px 13px;border-radius:14px;text-align:center;line-height:1.25;}
.rucalc-pill-card .rucalc-pc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:color-mix(in srgb,var(--bronze) 10%,#fff);color:var(--brand-dark);transition:.18s;}
.rucalc-pill-card .rucalc-pc-ic svg{width:26px;height:26px;}
.rucalc-pill-card.on .rucalc-pc-ic{background:rgba(255,255,255,.18);color:#fff;}
.rucalc-success{text-align:center;padding:34px 18px 26px;}
.rucalc-succ-ic{display:inline-grid;place-items:center;width:76px;height:76px;border-radius:50%;background:color-mix(in srgb,var(--bronze) 10%,#fff);color:var(--bronze);margin-bottom:16px;}
.rucalc-succ-ic svg{width:44px;height:44px;}
.rucalc-success h3{margin:0 0 10px;font-size:clamp(21px,2.4vw,26px);}
.rucalc-success p{margin:0 auto;max-width:440px;color:var(--text-soft);font-size:15px;line-height:1.6;}
@media(max-width:560px){.rucalc-pills-cards{grid-template-columns:repeat(2,1fr);}}
/* Tarieven-secties (aug 2026, prijzen Kevin) */
.tarieven-sec .section-header{margin-bottom:26px;}
.tarieven-tabel{max-width:660px;margin:0 auto;background:#fff;border:1.5px solid #e3eaf2;border-radius:18px;padding:8px 28px;box-shadow:0 18px 40px -28px rgba(37,42,45,.18);}
.tarief-rij{display:flex;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px dashed #e3eaf2;}
.tarief-rij:last-child{border-bottom:none;}
.tarief-naam{font-weight:600;color:var(--brand-dark);font-size:15px;}
.tarief-lijn{flex:1;border-bottom:1px dotted #d5dee8;transform:translateY(-4px);}
.tarief-prijs{font-weight:800;color:var(--brand-dark);white-space:nowrap;font-size:16px;}
.tarief-prijs small{font-weight:600;color:var(--text-muted);font-size:12.5px;}
.tarief-rij.uitgelicht .tarief-naam,.tarief-rij.uitgelicht .tarief-prijs{color:var(--bronze-dark,var(--bronze));}
.tarief-badge{display:inline-block;background:color-mix(in srgb,var(--bronze) 12%,#fff);color:var(--bronze-dark,var(--bronze));font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:2px;}
.tarieven-note{max-width:660px;margin:14px auto 22px;text-align:center;font-size:13.5px;color:var(--text-muted);line-height:1.55;}
@media(max-width:560px){.tarieven-tabel{padding:4px 16px;}.tarief-naam{font-size:14px;}.tarief-prijs{font-size:15px;}.tarief-badge{display:block;margin:4px 0 0;width:fit-content;}}

/* ===== Cookiebanner: compacte balk onderin (aug 2026) =====
   Cookiebot toont standaard een groot dialoog midden in beeld dat op mobiel
   ruim 60 procent van het scherm vulde en de hero-knop bedekte. Hieronder maken
   we er een balk onderin van. Weigeren en Alles toestaan blijven even groot en
   even zichtbaar (AVG), en de categorieen blijven bereikbaar via Details. */
#CybotCookiebotDialog{top:auto !important;bottom:0 !important;left:0 !important;right:0 !important;transform:none !important;width:100% !important;max-width:100% !important;max-height:none !important;border-radius:0 !important;border-top:1px solid #e3eaf2 !important;box-shadow:0 -6px 28px rgba(0,0,0,.16) !important;}
#CybotCookiebotDialog{max-height:82vh !important;}
#CybotCookiebotDialog .CybotCookiebotDialogContentWrapper{max-width:1180px !important;margin:0 auto !important;padding:0 16px !important;display:flex !important;flex-direction:column !important;max-height:82vh !important;}
#CybotCookiebotDialogTabContent{flex:1 1 auto !important;min-height:0 !important;overflow:auto !important;}
#CybotCookiebotDialogHeader,#CybotCookiebotDialogNav,#CybotCookiebotDialogFooter{flex:0 0 auto !important;}
#CybotCookiebotDialog .CybotCookiebotFader{display:none !important;}
#CybotCookiebotDialogHeader{padding:6px 0 0 !important;min-height:0 !important;height:auto !important;}
#CybotCookiebotDialogHeaderLogosWrapper{height:16px !important;}
#CybotCookiebotDialogHeader img,#CybotCookiebotDialogHeaderLogosWrapper img{max-height:14px !important;width:auto !important;}
#CybotCookiebotDialogNav{min-height:0 !important;}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink{padding:7px 12px !important;font-size:13px !important;}
#CybotCookiebotDialogBody .CybotCookiebotScrollContainer{max-height:66px !important;overflow:auto !important;}
#CybotCookiebotDialogBodyContentTitle{font-size:15px !important;margin-bottom:3px !important;}
#CybotCookiebotDialogBodyContentText{font-size:13px !important;line-height:1.45 !important;}
.CybotCookiebotDialogBodyBottomWrapper{padding:4px 0 !important;}
#CybotCookiebotDialogBodyLevelButtonsSelectPane{padding:4px 0 !important;}
#CybotCookiebotDialogBodyLevelButtonsSelectPane > div{display:flex !important;flex-wrap:wrap !important;align-items:center !important;row-gap:6px !important;column-gap:26px !important;}
#CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonWrapper{flex-direction:row !important;align-items:center !important;gap:8px !important;margin:0 !important;padding:0 !important;}
#CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonLabel{margin:0 !important;white-space:nowrap !important;font-size:12.5px !important;}
#CybotCookiebotDialogFooter{padding:6px 0 10px !important;}
#CybotCookiebotDialogFooter .CybotCookiebotScrollArea{padding:0 !important;}
@media(max-width:900px){
  #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper{padding:0 12px !important;}
  #CybotCookiebotDialogBodyContentTitle,#CybotCookiebotDialogBodyContentText{text-align:center !important;}
  #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink{padding:6px 8px !important;font-size:12.5px !important;}
  .CybotCookiebotDialogBodyBottomWrapper{display:none !important;}
  #CybotCookiebotDialogBodyButtonsWrapper{display:flex !important;flex-wrap:wrap !important;flex-direction:row !important;gap:8px !important;width:100% !important;}
  #CybotCookiebotDialogBodyButtonsWrapper > *{margin:0 !important;}
  #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton{padding:11px 8px !important;font-size:13.5px !important;min-height:0 !important;}
  #CybotCookiebotDialogBodyButtonDecline{order:1 !important;flex:1 1 46% !important;width:auto !important;}
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll{order:2 !important;flex:1 1 46% !important;width:auto !important;}
  #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection{order:3 !important;flex:1 1 100% !important;width:auto !important;}
}
/* Calculator in de hero van een landingspagina (nieuwbouw, aug 2026) */
.lp-form-calc{padding:22px 20px !important;}
.lp-form-calc .rucalc-head{margin-bottom:16px;}
.lp-form-calc .rucalc-head h3{font-size:clamp(19px,2.2vw,24px);margin:6px 0 8px;}
.lp-form-calc .hp-calc-sub{font-size:13.5px;line-height:1.5;color:var(--text-soft) !important;}
@media(max-width:900px){.lp-form-calc{padding:18px 14px !important;}}
/* Landingspagina-hero groeit mee met de inhoud. Met een vaste hoogte werd een
   hoge kaart (zoals de calculator) boven en onder afgekapt door overflow:hidden. */
.subhero.lp-hero{height:auto !important;min-height:420px;}
/* Footer: social-iconen onder elkaar en netjes gecentreerd */
.footer-social{align-items:center;}
/* Uitleg bij de voorgeselecteerde diensten in de calculator */
.rucalc-voorsel{display:flex;align-items:flex-start;gap:10px;background:color-mix(in srgb,var(--bronze) 8%,#fff);border:1px solid color-mix(in srgb,var(--bronze) 26%,#fff);border-radius:13px;padding:11px 14px;margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--text-soft);}
.rucalc-voorsel svg{width:18px;height:18px;flex:0 0 auto;color:var(--bronze);margin-top:1px;}
/* Slotblok met knop, net boven de footer */
.slot-cta{background:var(--bg-alt);padding:64px 0 70px;text-align:center;}
.slot-cta h2{margin:0 0 12px;}
.slot-cta p{max-width:620px;margin:0 auto 22px;color:var(--text-soft);line-height:1.65;}
.slot-cta .btn-lg{font-size:16px;padding:16px 32px;}
.slot-cta .slot-sub{font-size:13.5px;color:var(--text-muted);margin:16px auto 0;}
@media(max-width:900px){.slot-cta{padding:48px 0 52px;}.slot-cta .btn-lg{width:100%;max-width:340px;justify-content:center;}}

/* ============ Plaatsgebonden tekstblok op werkgebiedpagina's (fase 2, aug 2026) ============ */
.stad-diepte{padding:78px 0 82px;background:var(--bg)}
.stad-diepte .container{max-width:880px}
.stad-diepte-in h2{font-size:clamp(26px,2.8vw,36px);margin:0 0 18px;letter-spacing:-.02em}
.stad-diepte-in h3{font-size:21px;margin:40px 0 14px;letter-spacing:-.01em;color:var(--brand-dark)}
.stad-diepte-in p{font-size:16.5px;line-height:1.85;color:var(--text-soft);margin:0}
@media(max-width:600px){
  .stad-diepte{padding:52px 0 56px}
  .stad-diepte-in{text-align:center}
  .stad-diepte-in h3{margin-top:32px}
}

/* Feedback 18-08-2026: hele dienstkaart klikbaar, niet alleen de knop */
.hp-svc-cover{position:absolute;inset:0;z-index:2;border-radius:inherit;text-decoration:none}
.hp-svc-card .btn{position:relative;z-index:3}