/* 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:auto}
/* Containers respect viewport always */
.container{max-width:min(var(--container),100% - 32px)}
@media(max-width:600px){.container{padding-left:18px;padding-right:18px}}
/* A.G. Smit Services — Production CSS */
:root {
  --brand-dark:#1C1F22; --brand-darker:#121417; --charcoal:#1C1F22; --charcoal-soft:#262A2E;
  --bronze:#F39314; --bronze-light:#FBAF3B; --bronze-dark:#D97D08;
  --cream:#F6F4F1; --paper:#FBFAF8; --walnut:#262A2E; --oak:#F39314;
  --bg:#ffffff; --bg-alt:#F4F2EF; --bg-dark:var(--brand-dark);
  --text:#3D4145;          /* body text — subtle gray, not pure black */ --text-soft:#4a4543; --text-muted:#7a716a;
  --border:#e8e1d4; --border-soft:#f0e9dc;
  --shadow-sm:0 1px 2px rgba(37,42,45,.04),0 1px 3px rgba(37,42,45,.06);
  --shadow:0 4px 6px rgba(37,42,45,.04),0 10px 25px rgba(37,42,45,.07);
  --shadow-lg:0 10px 15px rgba(37,42,45,.06),0 25px 50px rgba(37,42,45,.12);
  --shadow-xl:0 25px 50px rgba(37,42,45,.18),0 40px 80px rgba(37,42,45,.14);
  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --font-heading:'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:1340px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.nav-logo img{height:44px;width:auto}
.nav-logo .logo-anim{display:block}

.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:34px}
.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);white-space:nowrap;transition:all .25s var(--ease)}
.nav-phone svg{width:16px;height:16px;color:var(--bronze-dark);flex:none}
.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{to{transform:scale(1.12)}}
@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:18px;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(3,1fr);gap:24px;position:relative;max-width:880px;margin-left:auto;margin-right:auto}
.werkwijze::before{content:'';position:absolute;top:36px;left:16%;right:16%;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 rgba(197,165,90,.15)}
.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{margin-bottom:20px}
.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 rgba(197,165,90,.18)}
.calc-tabs{display:flex;background:var(--brand-darker);border-bottom:1px solid rgba(197,165,90,.15)}
.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 rgba(197,165,90,.4);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 rgba(197,165,90,.2)}
.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:rgba(197,165,90,.08)}
.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,rgba(197,165,90,.18) 0%,rgba(197,165,90,.05) 100%);border-radius:var(--r-lg);border:1px solid rgba(197,165,90,.35);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:rgba(197,165,90,.18);border:1px solid rgba(197,165,90,.4);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 rgba(197,165,90,.4)}
.hp-hs-btn:hover{transform:translateY(-2px);background:var(--cream);color:var(--brand-dark);box-shadow:0 16px 40px rgba(197,165,90,.5)}
.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 rgba(197,165,90,.2);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 rgba(197,165,90,.18);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 rgba(197,165,90,.4);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:rgba(197,165,90,.3)}
.voordeel-icon{font-size:32px;width:56px;height:56px;background:rgba(197,165,90,.12);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 rgba(197,165,90,.18)}
.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,.of-info h2{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:var(--bronze-dark)}
.of-link.of-wa:hover{color:var(--brand-dark)}
.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 rgba(197,165,90,.12)}
.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 rgba(197,165,90,.32)}
.btn-pill-dark:hover{transform:translateY(-2px);background:var(--cream);color:var(--brand-dark);box-shadow:0 14px 36px rgba(197,165,90,.45)}

.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: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, gold 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:rgba(197,165,90,.4) !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 (concepts.mhsmedia.email)
   Mobile-first. Cream/gold palette. Full-screen hero left-overlay.
   ============================================================ */

/* Palette overrides — A.G. Smit Services brand palette
   - Hoofdkleur:  #F6F4F1 (warm gebroken wit)
   - Accent 1:    #1C1F22 (diep antraciet / dark, uit logo-bg)
   - Accent 2:    #F39314 (AG Smit oranje, uit logo) met licht/donker variant */
:root{
  --bg: #F6F4F1 !important;
  --bg-alt: #EDEAE5 !important;
  --bg-cream: #EDEAE5 !important;
  --bg-card: #FBFAF8 !important;
  --bg-dark: #121417 !important;
  --bg-dark-alt: #262A2E !important;
  --bronze: #F39314 !important;
  --bronze-light: #FBAF3B !important;
  --bronze-dark: #D97D08 !important;
  --brand-dark: #1C1F22 !important;
  --text-soft: #34383C !important;
  --text-muted: #6A6E72 !important;
  --cream: #F6F4F1 !important;
}

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

/* Eyebrow style — small caps gold */
.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-dark);
  margin-bottom:14px;
}

/* 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 rgba(197,165,90,.28);
  text-decoration:none;
}
.btn-primary:hover,
a.btn.btn-primary:hover{background:var(--bronze-dark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(197,165,90,.35)}
.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:rgba(197,165,90,.15);
  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:rgba(197,165,90,.18);
  color:var(--bronze-dark);
  border:1.5px solid rgba(197,165,90,.65);
}
.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:rgba(197,165,90,.12);
  border-color:var(--bronze);
  box-shadow:0 0 0 4px rgba(197,165,90,.08);
}
.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:rgba(197,165,90,.18);
  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:rgba(197,165,90,.12);border-color:var(--bronze)}

.calc-result-box{
  background:rgba(197,165,90,.1);
  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 rgba(197,165,90,.4);
  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 rgba(197,165,90,.5)}
.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 rgba(197,165,90,.28);
  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 rgba(197,165,90,.36);
}
.mobile-menu-phone svg{flex:none;width:18px;height:18px}

/* --- 2. Burger button: gold 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 rgba(243,147,20,.32) !important;
  border:0 !important;
}
.nav-burger:hover,
.nav-burger:focus,
.nav-burger.open{
  background:var(--bronze) !important; /* stays gold 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:rgba(197,165,90,.12) !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 — gold 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 rgba(197,165,90,.42),0 0 0 8px rgba(197,165,90,.10);
}
.hp-werk-num{
  transition:background-color .3s var(--ease),color .3s var(--ease),
             transform .3s var(--ease),box-shadow .3s var(--ease),
             border-color .3s var(--ease) !important;
}

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

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

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

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

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

/* ============================================================
   v62 — KLANTFEEDBACK RONDE: polish, tags, vinkjes, active page
   ============================================================ */

/* "Populairste keuze" tag — gold accent bg, black text per klantfeedback */
.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 rgba(197,165,90,.32) !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:rgba(197,165,90,.10) !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 gold.
   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:rgba(197,165,90,.18) !important;
  border:1px solid rgba(197,165,90,.35) !important;
  backdrop-filter:blur(6px);
}
.nav-burger:hover,.nav-burger.open{
  background:rgba(197,165,90,.30) !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:rgba(197,165,90,.18) !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 rgba(197,165,90,.4);
}
.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:50%;
  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 klantfeedback: 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 rgba(197,165,90,.32);
}
.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 rgba(197,165,90,.6),0 0 0 4px rgba(197,165,90,.15);
  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:rgba(197,165,90,.13);
  border-color:rgba(197,165,90,.55);
  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:rgba(197,165,90,.13);
  border-color:rgba(197,165,90,.55);
  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 rgba(197,165,90,.32);
  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 rgba(197,165,90,.35);
}
.calc-cta-v2:hover{
  background:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(197,165,90,.45);
}
.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 klantfeedback (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);  /* gold 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 — GOLD 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 rgba(197,165,90,.45);
  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 rgba(197,165,90,.6);
}
.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:rgba(197,165,90,.13);
  padding:5px 11px;
  border-radius:999px;
  margin-bottom:14px;
  border:1.5px solid rgba(197,165,90,.65);
}
.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 klantfeedback) --- */
.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:rgba(197,165,90,.12);
  border-radius:50%;
  padding:3px;
  box-sizing:border-box;
}

/* Social icons: gold color on icon (no bg circle gold) — hover affects icon only */
.footer-social a{
  color:var(--bronze) !important;
  border-color:rgba(197,165,90,.32) !important;
}
.footer-social a:hover{
  background:transparent !important;   /* no bg-fill on hover */
  color:var(--bronze-light) !important;
  border-color:var(--bronze) !important;
  transform:translateY(-2px);
}

/* --- Diagonal gold/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 klantfeedback). */
.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 rgba(197,165,90,.55) !important;
}
.mobile-menu .submenu{border-left:2px solid rgba(197,165,90,.4) !important}
.footer-social a{
  border:1px solid rgba(197,165,90,.32) !important;
}
.footer-social a:hover{
  border:1px solid var(--bronze) !important;
}

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

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

/* Telefoon + CTA-knop altijd zichtbaar — ook bovenaan (niet-gescrolld). */
.nav:not(.scrolled) .nav-phone,
.nav:not(.scrolled) .nav-cta > .btn.btn-primary{
  opacity:1;
  pointer-events:auto;
  transition:opacity .25s var(--ease);
}
.nav.scrolled .nav-phone,
.nav.scrolled .nav-cta > .btn.btn-primary{
  opacity:1;
  pointer-events:auto;
  transition:opacity .25s var(--ease) .1s;
}

/* 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: gold 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 an ORANGE PILL containing two lighter-orange CIRCLES (flag + burger).
   Two-tone design: deeper orange outside, lighter orange inside each button. */
@media (max-width:768px){
  /* Outer pill: AG Smit accent orange, capsule shape */
  .nav-cta{
    background:var(--bronze) !important;  /* AG Smit accent orange #F39314 */
    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-orange circle inside the pill */
  .nav-cta .nav-lang-btn{
    background:rgba(251,175,59,.7) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid rgba(255,255,255,.35) !important;
    border-radius:50% !important;
    width:38px !important;
    height:38px !important;
    box-shadow:none !important;
  }
  .nav-cta .nav-lang-btn:hover{
    background:rgba(251,175,59,.9) !important;
  }

  /* Burger button: same lighter-orange circle look as flag */
  .nav-cta .nav-burger{
    background:rgba(251,175,59,.7) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid rgba(255,255,255,.35) !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:rgba(251,175,59,.9) !important;
  }

  /* Burger lines: white so they contrast on the orange circle */
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{
    background:rgba(255,255,255,.98) !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 klantfeedback)
   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 naar 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:auto;
  -webkit-hyphens:auto;
}

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

/* === A.G. Smit — 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(--cream) !important;font-family:var(--font-heading);font-size:15px;margin-bottom:2px}
.calc-contact-item span{display:block;color:rgba(246,244,241,.78) !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}
}

/* ============================================================
   AANBOD — luxe motor-showcase (alternerende foto/tekst rijen)
   ============================================================ */
.amo-section{padding:90px 0;background:var(--bg)}
.amo-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1180px;margin:0 auto 30px;padding:0 24px}
.amo-row.reverse .amo-media{order:2}
.amo-row.reverse .amo-text{order:1}
.amo-media{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.22);aspect-ratio:16/10}
.amo-media img{width:100%;height:100%;object-fit:cover;display:block}
.amo-badge{position:absolute;top:18px;left:18px;background:var(--bronze);color:#1C1F22;font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:1px;padding:8px 16px;border-radius:999px;text-transform:uppercase}
.amo-text .eyebrow{color:var(--bronze-dark);margin-bottom:10px}
.amo-text h2{font-family:var(--font-heading);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--brand-dark);margin:0 0 16px;line-height:1.1}
.amo-text p{font-size:16px;line-height:1.75;color:var(--text-soft);margin:0 0 18px}
.amo-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 26px}
.amo-spec{background:var(--bg-alt);border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:14px 16px}
.amo-spec strong{display:block;font-family:var(--font-heading);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--bronze-dark);margin-bottom:4px}
.amo-spec span{font-size:15px;color:var(--brand-dark);font-weight:600}
/* donker tussenblok */
.amo-band{background:var(--brand-darker);color:#fff;padding:70px 0;text-align:center}
.amo-band .container{max-width:900px}
.amo-band .eyebrow{color:var(--bronze-light)}
.amo-band h2{font-family:var(--font-heading);font-weight:800;font-size:32px;letter-spacing:-.02em;margin:12px 0 14px;color:#fff}
.amo-band p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.75);max-width:680px;margin:0 auto 30px}
.amo-band-stats{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}
.amo-band-stat strong{display:block;font-family:var(--font-heading);font-weight:800;font-size:40px;color:var(--bronze-light);line-height:1}
.amo-band-stat span{font-size:14px;color:rgba(255,255,255,.6);margin-top:6px;display:block}
@media(max-width:860px){
  .amo-row{grid-template-columns:1fr;gap:28px;margin-bottom:50px}
  .amo-row.reverse .amo-media{order:1}
  .amo-row.reverse .amo-text{order:2}
  .amo-section{padding:60px 0}
  .amo-text h2{font-size:27px}
  .amo-band-stats{gap:36px}
  .amo-band-stat strong{font-size:32px}
}
@media(max-width:480px){.amo-specs{grid-template-columns:1fr}}

/* Hero: tweede knop als ghost (transparant met rand) + ruimte tussen de twee */
.hp-hs-btn-ghost{background:transparent !important;color:#fff !important;border:1.5px solid rgba(255,255,255,.55);box-shadow:none !important;margin-left:14px}
.hp-hs-btn-ghost:hover{background:rgba(255,255,255,.12) !important;border-color:#fff}
@media(max-width:560px){.hp-hs-btn-ghost{margin-left:0;margin-top:12px}}

/* Aanbod-reveal: eigen, betrouwbare fade-up (niet afhankelijk van globale tagger) */
.amo-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.33,.05,.2,1),transform .9s cubic-bezier(.33,.05,.2,1)}
.amo-reveal.amo-in{opacity:1;transform:none}

/* ============================================================
   NIEUWS — SEO-artikelen als klikbare blokken + modal
   ============================================================ */
.news-section{padding:70px 0 90px;background:var(--bg)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1180px;margin:0 auto;padding:0 24px}
.news-card{background:var(--bg-alt,#fff);border:1px solid rgba(0,0,0,.07);border-radius:18px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;text-align:left;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;box-shadow:0 6px 20px rgba(0,0,0,.05);font-family:inherit}
.news-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.13);border-color:var(--bronze)}
.news-card-top{padding:24px 24px 0;display:flex;align-items:center;gap:10px}
.news-cat{background:var(--bronze);color:#1C1F22;font-family:var(--font-heading);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.news-leestijd{font-size:13px;color:var(--text-muted,#999);font-weight:600}
.news-card h3{font-family:var(--font-heading);font-weight:800;font-size:19px;line-height:1.3;color:var(--brand-dark);margin:16px 24px 10px;letter-spacing:-.01em}
.news-card p{font-size:14.5px;line-height:1.6;color:var(--text-soft);margin:0 24px 20px}
.news-card-foot{margin-top:auto;padding:16px 24px;border-top:1px solid rgba(0,0,0,.06);display:flex;align-items:center;gap:8px;color:var(--bronze-dark);font-family:var(--font-heading);font-weight:700;font-size:14px}
.news-card-foot svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.news-card:hover .news-card-foot svg{transform:translateX(4px)}

/* Modal / pop-up */
.news-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.news-modal.open{display:flex}
.news-modal-overlay{position:fixed;inset:0;background:rgba(15,15,15,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.news-modal-box{position:relative;background:#fff;border-radius:22px;max-width:760px;width:100%;margin:auto;box-shadow:0 40px 90px rgba(0,0,0,.35);animation:newsModalIn .4s var(--ease);z-index:1}
@keyframes newsModalIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.news-modal-head{padding:36px 44px 0}
.news-modal-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.news-modal-box h2{font-family:var(--font-heading);font-weight:800;font-size:28px;line-height:1.2;color:var(--brand-dark);margin:0 0 8px;letter-spacing:-.02em}
.news-modal-body{padding:20px 44px 8px}
.news-modal-body p{font-size:16px;line-height:1.8;color:var(--text-soft);margin:0 0 16px}
.news-modal-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;border:none;background:var(--bg-alt,#f3f3f3);color:var(--brand-dark);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;z-index:2}
.news-modal-close:hover{background:var(--bronze);transform:rotate(90deg)}

/* Vacatures binnen de modal */
.news-vac{margin:8px 44px 0;padding:24px 0 0;border-top:1px solid rgba(0,0,0,.08)}
.news-vac-title{font-family:var(--font-heading);font-weight:800;font-size:17px;color:var(--brand-dark);margin:0 0 4px}
.news-vac-sub{font-size:14px;color:var(--text-muted,#888);margin:0 0 18px}
.news-vac-item{background:var(--bg-alt,#f7f5f2);border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:18px 20px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.news-vac-item-info strong{display:block;font-family:var(--font-heading);font-weight:700;font-size:15.5px;color:var(--brand-dark);margin-bottom:3px}
.news-vac-item-info span{font-size:13.5px;color:var(--text-soft);line-height:1.5}
.news-vac-wa{display:inline-flex;align-items:center;gap:9px;background:var(--bronze);color:var(--brand-dark);font-family:var(--font-heading);font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s;flex:none}
.news-vac-wa:hover{background:var(--bronze-dark);transform:translateY(-2px)}
.news-vac-wa svg{width:18px;height:18px}
.news-modal-foot{padding:24px 44px 40px}

@media(max-width:900px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .news-grid{grid-template-columns:1fr;gap:18px}
  .news-modal{padding:0}
  .news-modal-box{border-radius:0;min-height:100vh}
  .news-modal-head,.news-modal-body,.news-vac,.news-modal-foot{padding-left:24px;padding-right:24px}
  .news-modal-box h2{font-size:23px}
}

/* Footer-credit dpsmedia (klein, subtiel) */
.footer-credit{opacity:.7;transition:opacity .2s}
.footer-credit:hover{opacity:1;color:var(--bronze-light)}

/* SEO-content: leesbaar voor zoekmachines, niet zichtbaar voor bezoeker
   (de bezoeker ziet de blokken+modal; dit voorkomt dubbele weergave) */
.news-seo-content{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ============================================================
   VACATURES — over ons + openstaande vacatures
   ============================================================ */
.vac-section{padding:70px 0 90px;background:var(--bg)}
.vac-wrap{max-width:820px;margin:0 auto;padding:0 24px}
.vac-intro{margin-bottom:56px}
.vac-intro .eyebrow{color:var(--bronze-dark);margin-bottom:10px}
.vac-intro h2{font-family:var(--font-heading);font-weight:800;font-size:30px;letter-spacing:-.02em;color:var(--brand-dark);margin:0 0 20px;line-height:1.15}
.vac-intro p{font-size:16px;line-height:1.8;color:var(--text-soft);margin:0 0 16px}
.vac-usps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 0}
.vac-usp{background:var(--bg-alt,#f7f5f2);border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:18px}
.vac-usp strong{display:block;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--brand-dark);margin-bottom:5px}
.vac-usp span{font-size:13.5px;color:var(--text-soft);line-height:1.5}
.vac-list-head{font-family:var(--font-heading);font-weight:800;font-size:24px;color:var(--brand-dark);margin:0 0 6px;letter-spacing:-.01em}
.vac-list-sub{font-size:15px;color:var(--text-muted,#888);margin:0 0 26px}
.vac-card{background:var(--bg-alt,#fff);border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:26px 28px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;transition:box-shadow .25s,border-color .25s}
.vac-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.09);border-color:var(--bronze)}
.vac-card-info{flex:1;min-width:240px}
.vac-card-info strong{display:block;font-family:var(--font-heading);font-weight:800;font-size:18px;color:var(--brand-dark);margin-bottom:6px}
.vac-card-info span{font-size:14.5px;color:var(--text-soft);line-height:1.6}
.vac-card-wa{display:inline-flex;align-items:center;gap:10px;background:var(--bronze);color:var(--brand-dark);font-family:var(--font-heading);font-weight:700;font-size:14.5px;padding:13px 24px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform .2s,background .2s;flex:none}
.vac-card-wa:hover{background:var(--bronze-dark);transform:translateY(-2px)}
.vac-card-wa svg{width:18px;height:18px}
.vac-card-wa svg{width:19px;height:19px;fill:#fff}
.vac-open-note{background:var(--brand-darker);color:#fff;border-radius:16px;padding:30px 32px;margin-top:30px;text-align:center}
.vac-open-note p{margin:0 0 18px;font-size:16px;line-height:1.7;color:rgba(255,255,255,.85)}
.vac-open-note .vac-card-wa{margin:0 auto}
@media(max-width:680px){
  .vac-usps{grid-template-columns:1fr}
  .vac-card{flex-direction:column;align-items:flex-start}
  .vac-card-wa{width:100%;justify-content:center}
  .vac-intro h2{font-size:25px}
}

/* ============================================================
   MERK-COLLECTIEPAGINA'S — SEO-blogposts per motormerk
   ============================================================ */
.merk-section{padding:60px 0 90px;background:var(--bg)}
.merk-wrap{max-width:820px;margin:0 auto;padding:0 24px}
.merk-intro{margin-bottom:50px;padding-bottom:36px;border-bottom:1px solid rgba(0,0,0,.08)}
.merk-intro .eyebrow{color:var(--bronze-dark);margin-bottom:10px}
.merk-intro h1{font-family:var(--font-heading);font-weight:800;font-size:40px;letter-spacing:-.02em;color:var(--brand-dark);margin:0 0 16px;line-height:1.1}
.merk-intro .merk-tagline{font-size:18px;line-height:1.6;color:var(--bronze-dark);font-weight:600;margin:0 0 18px}
.merk-intro .merk-lead{font-size:16.5px;line-height:1.8;color:var(--text-soft);margin:0}
.merk-post{margin-bottom:48px;padding-bottom:44px;border-bottom:1px solid rgba(0,0,0,.07)}
.merk-post:last-of-type{border-bottom:none}
.merk-post h2{font-family:var(--font-heading);font-weight:800;font-size:26px;letter-spacing:-.01em;color:var(--brand-dark);margin:0 0 18px;line-height:1.25}
.merk-post p{font-size:16px;line-height:1.85;color:var(--text-soft);margin:0 0 16px}
.merk-cta{background:var(--brand-darker);color:#fff;border-radius:18px;padding:38px 40px;text-align:center;margin-top:20px}
.merk-cta h2{font-family:var(--font-heading);font-weight:800;font-size:26px;color:#fff;margin:0 0 12px;letter-spacing:-.01em}
.merk-cta p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 24px}
.merk-cta .btn{display:inline-flex;align-items:center;gap:9px}
/* andere merken onderaan (interne links = SEO-netwerk) */
.merk-others{margin-top:54px;padding-top:36px;border-top:1px solid rgba(0,0,0,.08)}
.merk-others h3{font-family:var(--font-heading);font-weight:800;font-size:18px;color:var(--brand-dark);margin:0 0 16px}
.merk-others-grid{display:flex;flex-wrap:wrap;gap:10px}
.merk-others-grid a{display:inline-flex;align-items:center;background:var(--bg-alt,#f7f5f2);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:9px 18px;font-family:var(--font-heading);font-weight:600;font-size:14px;color:var(--brand-dark);text-decoration:none;transition:all .2s}
.merk-others-grid a:hover{background:var(--bronze);border-color:var(--bronze);color:#1C1F22;transform:translateY(-2px)}
@media(max-width:680px){
  .merk-intro h1{font-size:30px}
  .merk-post h2{font-size:22px}
  .merk-cta{padding:28px 22px}
}
/* footer-merken nu klikbaar */
.footer-col ul li a.merk-link{color:inherit;text-decoration:none;transition:color .2s}
.footer-col ul li a.merk-link:hover{color:var(--bronze-light)}

/* ============================================================
   v127 — MOBIEL: ALLES geforceerd gecentreerd + eyebrow-streepje => rondje
   <=768px (gelijk aan bestaande mobiele breakpoints). Desktop ongemoeid.
   Gebruikt !important + display:block/margin:auto zodat geen enkele
   bestaande regel dit kan overschrijven of links kan houden.
   ============================================================ */
@media(max-width:768px){

  /* ---- HERO: gecentreerd, animatie van onderaf i.p.v. links ---- */
  .hp-hs-static-content{text-align:center !important}
  .hp-hs-static-content .hp-hs-title,
  .hp-hs-static-content .hp-hs-desc{margin-left:auto !important;margin-right:auto !important}
  .hp-hs-stats{justify-content:center !important}
  .hp-hs-btn,.hp-hs-btn-ghost{margin-left:auto !important;margin-right:auto !important}
  .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{
    transform:translateY(30px);
    animation-name:hero-line-up;
  }
  @keyframes hero-line-up{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* ---- HERO eyebrow: streep eruit, alleen rondje (pill) ---- */
  .hp-hs-eyebrow::before{display:none !important;content:none !important}

  /* ---- ALLE homepage-secties: alles geforceerd gecentreerd ---- */
  .hp-overons, .hp-overons .container, .hp-overons-text,
  .hp-vakwerk, .hp-vakwerk .container,
  .hp-services, .hp-services .container,
  .hp-werkwijze, .hp-werkwijze .container,
  .hp-portfolio, .hp-portfolio .container,
  .hp-tips, .hp-tips .container,
  .hp-contact, .hp-contact .container,
  .hp-calc-v2{
    text-align:center !important;
  }

  /* alle koppen + paragrafen in deze secties expliciet centreren */
  .hp-overons h1,.hp-overons h2,.hp-overons h3,.hp-overons p,
  .hp-vakwerk h1,.hp-vakwerk h2,.hp-vakwerk h3,.hp-vakwerk p,
  .hp-services h1,.hp-services h2,.hp-services h3,.hp-services p,
  .hp-werkwijze h1,.hp-werkwijze h2,.hp-werkwijze h3,.hp-werkwijze p,
  .hp-portfolio h1,.hp-portfolio h2,.hp-portfolio h3,.hp-portfolio p,
  .hp-tips h1,.hp-tips h2,.hp-tips h3,.hp-tips p,
  .hp-contact h1,.hp-contact h2,.hp-contact h3,.hp-contact p,
  .hp-calc-v2 h2,.hp-calc-v2 .hp-calc-sub{
    text-align:center !important;
  }

  /* knoppen gecentreerd */
  .hp-overons .btn,.hp-vakwerk .btn,.hp-services .btn,
  .hp-werkwijze .btn,.hp-portfolio .btn,.hp-tips .btn,
  .hp-contact .btn,.hp-contact-ctas{
    margin-left:auto !important;margin-right:auto !important;
    justify-content:center !important;
  }
  .hp-contact-ctas{display:flex;flex-direction:column;align-items:center}

  /* ---- Eyebrow-labels: streepje WEG, rondje (pill) eromheen ----
     display:block + margin:auto dwingt centreren af, ongeacht
     de text-align van de ouder. */
  .eyebrow{
    display:block !important;
    width:-moz-fit-content;
    width:fit-content;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:7px 18px !important;
    border:1px solid var(--bronze) !important;
    border-radius:999px !important;
    background:rgba(197,165,90,.10) !important;
    text-align:center !important;
  }
  .eyebrow::before{display:none !important;content:none !important;width:0 !important;margin:0 !important}
  section.dark .eyebrow,
  .hp-contact .eyebrow,
  .hp-calc-v2 .eyebrow{
    border-color:var(--bronze) !important;
    background:rgba(197,165,90,.16) !important;
  }

  /* ---- Foto's / plaatjes netjes gecentreerd ---- */
  .hp-overons-photo,
  .hp-overons-photo img,
  .hp-overons-text{margin-left:auto !important;margin-right:auto !important}
}

/* ============================================================
   v128 — DESKTOP: eyebrow-streepje => rondje (pill) + koppen
   en teksten gecentreerd. Alleen >=769px (laptop/desktop).
   Verandert NIETS aan de mobiele regels hierboven en raakt
   de structuur (grids, kaarten, foto/tekst-kolommen) niet aan —
   alleen uitlijning + de eyebrow-pill.
   ============================================================ */
@media(min-width:769px){

  /* ---- Eyebrow-labels: streepje WEG, rondje (pill) eromheen ---- */
  .eyebrow{
    display:block !important;
    width:-moz-fit-content;
    width:fit-content;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:8px 20px !important;
    border:1px solid var(--bronze) !important;
    border-radius:999px !important;
    background:rgba(197,165,90,.10) !important;
    text-align:center !important;
  }
  .eyebrow::before{display:none !important;content:none !important;width:0 !important;margin:0 !important}
  section.dark .eyebrow,
  .hp-contact .eyebrow,
  .hp-calc-v2 .eyebrow{
    border-color:var(--bronze) !important;
    background:rgba(197,165,90,.16) !important;
  }

  /* ---- Koppen + intro-teksten gecentreerd ---- */
  .hp-overons .container,
  .hp-overons-text,
  .hp-vakwerk .container,
  .hp-services .container,
  .hp-werkwijze .container,
  .hp-portfolio .container,
  .hp-tips .container,
  .hp-contact .container,
  .hp-calc-v2{
    text-align:center !important;
  }
  .hp-overons h1,.hp-overons h2,.hp-overons h3,.hp-overons-text p,
  .hp-vakwerk h1,.hp-vakwerk h2,
  .hp-services h1,.hp-services h2,
  .hp-werkwijze h1,.hp-werkwijze h2,
  .hp-portfolio h1,.hp-portfolio h2,
  .hp-tips h1,.hp-tips h2,
  .hp-contact h1,.hp-contact h2,
  .hp-calc-v2 h2,.hp-calc-v2 .hp-calc-sub{
    text-align:center !important;
  }

  /* over-ons: tekstkolom-inhoud netjes centreren + knop centreren */
  .hp-overons-text .btn{margin-left:auto !important;margin-right:auto !important}
}

/* ============================================================
   v129 — TIPS & NIEUWS: statische 3-koloms grid i.p.v. marquee
   Drie stilstaande, klikbare kaarten. Overschrijft alle eerdere
   marquee/drag-regels (flex, animatie, overflow, mask) met !important.
   ============================================================ */
.hp-tips-static{
  overflow:visible !important;
  -webkit-mask-image:none !important;
          mask-image:none !important;
  cursor:auto !important;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.hp-tips-static .hp-tips-track{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:26px !important;
  width:100% !important;
  animation:none !important;
  transform:none !important;
}
/* grotere, stilstaande kaarten */
.hp-tips-static .hp-tips-card{
  width:auto !important;
  flex:none !important;
}
.hp-tips-static .hp-tips-img{
  aspect-ratio:16/11;
}
.hp-tips-static .hp-tips-card-body{
  padding:24px 26px 26px;
}
.hp-tips-static .hp-tips-card h3{
  font-size:19px;
}
.hp-tips-static .hp-tips-card p{
  font-size:14.5px;
}

/* tablet: 2 kolommen */
@media(max-width:900px){
  .hp-tips-static .hp-tips-track{
    grid-template-columns:repeat(2,1fr) !important;
    gap:20px !important;
  }
}
/* mobiel: 1 kolom, kaarten onder elkaar */
@media(max-width:600px){
  .hp-tips-static{padding:0 18px}
  .hp-tips-static .hp-tips-track{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
}


/* ============================================================
   v133 — MOBIELE HERO FIX: content netjes BINNEN de hero houden
   Probleem: .hp-hs-static-content stond op top:50% + translateY(-50%)
   (verticaal gecentreerd). Op mobiel is het blok (eyebrow→titel→tekst→
   2 knoppen→stats) hoger dan de hero, dus de onderkant stak in de witte
   sectie eronder. Hier ankeren we het blok aan de ONDERKANT van de hero,
   net boven de witte rand, en houden de fade-in-animatie (geen scroll-
   beweging want het blijft position:absolute binnen de hero).
   ============================================================ */
@media(max-width:768px){
  /* hero hoog genoeg + alles binnen de rand */
  .hp-hero-slider,
  .hp-hero-static{
    height:100svh !important;
    min-height:600px !important;
    max-height:none !important;
  }

  /* RESET de oude centrering en VUL de hele hero, kinderen verticaal gecentreerd */
  .hp-hs-static-content{
    top:0 !important;
    bottom:0 !important;
    transform:none !important;
    left:0 !important;
    right:0 !important;
    margin:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    /* padding-top houdt het blok vrij van de header; padding-bottom vrij van de witte rand */
    padding:96px 22px 48px 22px !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* compacter zodat het hele blok comfortabel binnen de hero past */
  .hp-hs-static-content .hp-hs-eyebrow{
    margin-bottom:14px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    align-self:center !important;
    display:block !important;
    width:-moz-fit-content !important;
    width:fit-content !important;
    max-width:100% !important;
    text-align:center !important;
  }
  .hp-hs-static-content .hp-hs-title{
    font-size:clamp(30px,8.5vw,42px) !important;
    line-height:1.05 !important;
    margin-bottom:14px !important;
  }
  .hp-hs-static-content .hp-hs-desc{
    font-size:15px !important;
    line-height:1.45 !important;
    margin-bottom:18px !important;
  }
  .hp-hs-static-content .hp-hs-btn{
    padding:14px 24px !important;
    font-size:14px !important;
    margin-bottom:10px !important;
  }
  .hp-hs-static-content .hp-hs-stats{
    margin-top:18px !important;
    gap:20px !important;
    align-self:center !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:100% !important;
  }
  .hp-hs-static-content .hp-hs-stat{
    align-items:center !important;
    text-align:center !important;
  }
}

/* extra krap scherm: nog iets compacter zodat niets overloopt */
@media(max-width:600px){
  .hp-hs-static-content{padding:90px 20px 44px 20px !important}
  .hp-hs-static-content .hp-hs-title{font-size:clamp(28px,8vw,38px) !important}
  .hp-hs-static-content .hp-hs-desc{font-size:14.5px !important;margin-bottom:16px !important}
  .hp-hs-static-content .hp-hs-stats{margin-top:14px !important;gap:16px !important}
}
@media(max-width:380px){
  .hp-hs-static-content .hp-hs-title{font-size:26px !important}
  .hp-hs-static-content .hp-hs-desc{font-size:14px !important}
  .hp-hs-static-content .hp-hs-stats{gap:12px !important}
}

/* ============================================================
   v137 — SUBPAGINA HERO FIX (mobiel): eyebrow + titel duiken niet
   meer onder de vaste header. De subhero centreert verticaal, waardoor
   op korte hero's de bovenkant achter de nav verdween. We lijnen de
   content nu bovenaan uit met ruime top-padding die de header vrijhoudt.
   ============================================================ */
@media(max-width:768px){
  .subhero{
    align-items:flex-start !important;     /* niet centreren -> geen clip bovenaan */
    margin-top:0 !important;
    padding-top:104px !important;          /* ruimte vrij van de vaste nav */
    padding-bottom:40px !important;
    min-height:0 !important;
    height:auto !important;
  }
  .subhero-content{
    padding-top:8px !important;
  }
  /* breadcrumb (indien aanwezig) ook netjes vrij van de header */
  .subhero .breadcrumb{margin-top:0 !important}
}
@media(max-width:600px){
  .subhero{padding-top:100px !important}
}

/* merken-pagina's gebruiken .merk-section (geen subhero) en startten op
   top:0 onder de vaste nav -> eyebrow + H1 verdwenen achter de header.
   Geef ze op mobiel ruimte vrij van de nav. */
@media(max-width:768px){
  .merk-section{padding-top:104px !important}
}
@media(max-width:600px){
  .merk-section{padding-top:100px !important}
}

/* ============================================================
   v138 — WERKWIJZE-STAPPEN MOBIEL: nummer boven, titel, dan tekst
   — alles netjes gecentreerd onder elkaar i.p.v. nummer-links met
   afgeknepen, afgebroken titels. Geldt voor alle .werkwijze-blokken
   (o.a. alle dienstenpagina's).
   ============================================================ */
@media(max-width:768px){
  .werkwijze{
    grid-template-columns:1fr !important;
    gap:40px !important;
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .werk-step{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:12px !important;
    padding:0 !important;
  }
  .werk-num{
    margin:0 0 4px 0 !important;
    flex-shrink:0 !important;
    width:64px !important;
    height:64px !important;
    font-size:24px !important;
  }
  .werk-step h4{
    margin:0 !important;
    font-size:19px !important;
    /* geen lelijke afbreekstreepjes meer in de korte titels */
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
    white-space:normal !important;
    max-width:100% !important;
  }
  .werk-step p{
    margin:0 !important;
    font-size:15.5px !important;
    line-height:1.55 !important;
    max-width:340px !important;
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }
}

/* ============================================================
   v140 — ALLES GECENTREERD OP MOBIEL (sitewide)
   Centreert ALLE kaart-inhoud op mobiel: labels, titels, teksten,
   checklists, meta-rijen, knoppen — op homepage én alle subpagina's.
   Schakelt ook lelijke afbreekstreepjes uit.
   ============================================================ */
@media(max-width:768px){

  /* ---- geen lelijke afbreekstreepjes meer, overal ---- */
  h1,h2,h3,h4,h5,h6,p,li,span,a,blockquote,figcaption{
    hyphens:none !important;
    -webkit-hyphens:none !important;
  }

  /* ---- TIPS/NIEUWS-KAARTEN (homepage) ---- */
  .hp-tips-card-body{align-items:center !important;text-align:center !important}
  .hp-tips-card-body h3,
  .hp-tips-card-body p,
  .hp-tips-tag{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
  .hp-tips-meta{justify-content:center !important;gap:20px !important;width:100% !important}

  /* ---- DIENST-KAARTEN / SERVICE-KAARTEN (homepage) ---- */
  .hp-svc-body{text-align:center !important}
  .hp-svc-body h3,.hp-svc-body p{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
  .hp-svc-features{align-items:center !important}
  .hp-svc-features li{justify-content:center !important;text-align:center !important}

  /* ---- DIENST-KAARTEN op diensten-overzicht ---- */
  .dienst-card-body{text-align:center !important;align-items:center !important}
  .dienst-card-body h3,.dienst-card-body p{text-align:center !important;margin-left:auto !important;margin-right:auto !important}
  .dienst-card-link{justify-content:center !important;width:100% !important}

  /* ---- VOORDEEL-KAARTEN (icoon + titel + tekst) ---- */
  .voordeel-card{text-align:center !important}
  .voordeel-card .voordeel-icon{margin-left:auto !important;margin-right:auto !important}
  .voordeel-card h3,.voordeel-card p{text-align:center !important}

  /* ---- VERHAAL value-cards (nummer + titel + tekst) ---- */
  .verhaal-vc,.verhaal-value-card{text-align:center !important}
  .verhaal-vc-num,.verhaal-value-card .num{margin-left:auto !important;margin-right:auto !important;display:inline-flex !important;justify-content:center !important}
  .verhaal-vc h3,.verhaal-vc h4,.verhaal-vc p,
  .verhaal-value-card h3,.verhaal-value-card h4,.verhaal-value-card p{text-align:center !important}

  /* ---- VAK-KAARTEN homepage (vierkant nummer-blokje + titel + tekst) ---- */
  .hp-vak-card{display:flex !important;flex-direction:column !important;text-align:center !important;align-items:center !important}
  .hp-vak-card .hp-vak-num{margin-left:auto !important;margin-right:auto !important}
  .hp-vak-card h3,.hp-vak-card p{text-align:center !important;margin-left:auto !important;margin-right:auto !important}

  /* ---- RICH-REVIEWS (klantervaringen op dienstenpagina's) ---- */
  .rich-rev{text-align:center !important;align-items:center !important}
  .rich-rev-stars{justify-content:center !important}
  .rich-rev-text{text-align:center !important}
  .rich-rev-foot{justify-content:center !important;flex-direction:column !important;gap:4px !important;align-items:center !important}

  /* ---- TIPS-pagina kaarten (los) ---- */
  .tip-card-body,.tips-card-body{text-align:center !important;align-items:center !important}
  .tip-card-body h3,.tip-card-body p,
  .tips-card-body h3,.tips-card-body p{text-align:center !important}

  /* ---- PROJECT-kaarten ---- */
  .project-card-body,.proj-card-body{text-align:center !important;align-items:center !important}
  .project-card-body h3,.project-card-body p{text-align:center !important}

  /* ---- FAQ vragen: kop gecentreerd (antwoord blijft links voor leesbaarheid) ---- */
  .faq-q{text-align:center !important;justify-content:center !important}

  /* ---- algemene section-headers + losse eyebrows overal ---- */
  .section-header{text-align:center !important}
  .section-header .eyebrow{margin-left:auto !important;margin-right:auto !important}
}

/* ===== Feedback klant 19-08-2026 ===== */

/* 1) Bewegend logo: rustige zweefbeweging, alleen transform */
.nav-logo .logo-anim{animation:logoFloat 5.5s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.nav-logo .logo-anim{animation:none}}

/* 2) Actieve menu-optie licht op (breadcrumbs zijn vervallen) */
.nav-links a.is-active{color:var(--bronze-dark)}
.nav-links a.is-active::after{width:100%}
.mobile-menu a.is-active{color:var(--bronze-dark)}

/* 3) Merkengrid contactpagina: 5 kaarten, geen lege vakken */
.contact-merken{grid-template-columns:repeat(5,1fr)}
@media(max-width:1024px){
  .contact-merken{grid-template-columns:repeat(2,1fr)}
  .contact-merken .why-card:last-child{grid-column:1 / -1}
}
@media(max-width:768px){
  .contact-merken{grid-template-columns:1fr}
  .contact-merken .why-card:last-child{grid-column:auto}
}

/* ===== Belwidget + popup (Nagtzaam-stijl, zonder WhatsApp), feedback 20-08-2026 ===== */
.bel-widget{position:fixed;bottom:24px;right:24px;z-index:9999}
.bel-btn{display:inline-flex;align-items:center;gap:12px;background:#178741;color:#fff;border-radius:999px;padding:14px 22px 14px 18px;box-shadow:0 10px 26px -8px rgba(0,0,0,.4);font-family:var(--font-heading);font-weight:700;font-size:16px;line-height:1;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.bel-btn svg{width:22px;height:22px;flex:none}
.bel-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(0,0,0,.45);color:#fff}
@media(max-width:768px){.bel-widget{bottom:16px;right:16px}.bel-btn{font-size:15px;padding:12px 18px 12px 15px}}
[dir="rtl"] .bel-widget{right:auto;left:24px}

/* Kaart pas laden na een klik (AVG: geen verbinding met Google voor toestemming) */
.map-consent{position:relative;width:100%;height:100%}
.map-consent img{width:100%;height:100%;object-fit:cover;display:block}
.map-consent-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;background:rgba(18,20,23,.72);color:#fff}
.map-consent-panel p,.map-consent-panel strong{margin:0;max-width:34ch;color:#fff}
.map-consent-note{font-size:14px;opacity:.85}
.map-consent-link{color:#fff;text-decoration:underline;font-size:14px}

/* ============================================================
   Cookiebanner (Consent Mode v2). Vier signalen, standaard denied,
   weigeren even eenvoudig als accepteren, intrekken via de footer.
   ============================================================ */
.ck-banner{position:fixed;inset:0;z-index:6000;display:grid;place-items:end center;
  background:rgba(18,20,23,.55);padding:0 16px 16px;overflow-y:auto}
.ck-banner[hidden]{display:none}
body.ck-open{overflow:hidden}
.ck-kaart{background:#fff;border-radius:22px;max-width:620px;width:100%;
  padding:clamp(22px,3vw,30px);text-align:center;
  box-shadow:0 26px 60px -20px rgba(18,20,23,.5);margin:16px 0}
.ck-kaart h2{font-family:var(--font-heading);font-size:21px;color:var(--brand-dark);margin:0 0 10px}
.ck-kaart p{font-size:14.5px;line-height:1.6;color:var(--text);margin:0}
.ck-keuzes{display:grid;gap:10px;margin:18px 0;text-align:left}
.ck-keuze{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
  border:1px solid var(--border);border-radius:12px;cursor:pointer}
.ck-keuze.ck-vast{opacity:.75;cursor:default}
.ck-keuze input{margin-top:3px;accent-color:var(--bronze);width:17px;height:17px;flex:none}
.ck-keuze span{font-size:13.5px;line-height:1.5;color:var(--text)}
.ck-keuze b{display:block;color:var(--brand-dark);font-size:14.5px;margin-bottom:2px}
.ck-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ck-knop{font-family:var(--font-body);font-size:14.5px;font-weight:700;padding:12px 20px;
  border-radius:999px;cursor:pointer;border:1px solid var(--brand-dark);flex:1 1 170px}
.ck-weiger,.ck-keuze-op{background:#fff;color:var(--brand-dark)}
.ck-accept{background:var(--bronze);border-color:var(--bronze);color:#fff}
.ck-knop:hover{filter:brightness(.96)}
.ck-voet{margin-top:16px!important;font-size:12.5px!important;color:var(--text);opacity:.85}
@media(max-width:520px){.ck-knop{flex:1 1 100%}}

/* ---- Afdrukweergave ---- */
@media print{
  .nav,.mobile-menu,.bel-widget,.sticky-cta,.lang,.ck-banner,.footer-social,
  .hero-scroll,.tip-modal,video,iframe{display:none!important}
  *{background:#fff!important;color:#000!important;box-shadow:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
  .reveal,.reveal-x,.reveal-x-r{opacity:1!important;transform:none!important}
  body{font-size:12pt;line-height:1.5}
  section{page-break-inside:avoid}
}

/* ---- Juridische pagina's ---- */
.legal-tekst{font-size:15.5px;line-height:1.75;color:var(--text)}
.legal-tekst h2{font-family:var(--font-heading);font-size:21px;color:var(--brand-dark);margin:34px 0 10px}
.legal-tekst h2:first-child{margin-top:0}
.legal-tekst h3{font-family:var(--font-heading);font-size:17px;color:var(--brand-dark);margin:22px 0 6px}
.legal-tekst p{margin:0 0 14px}
.legal-tekst ul{margin:0 0 16px;padding-left:20px}
.legal-tekst li{margin-bottom:7px}
.legal-tekst a{color:var(--bronze);text-decoration:underline}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-top:14px}
.footer-legal a,.footer-legal button{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:13px;color:inherit;opacity:.72;text-decoration:underline}
.footer-legal a:hover,.footer-legal button:hover{opacity:1}