/* =====================================================================
   Carcleaning — monochroom ontwerp met veeg-hero
   Ontwikkeld door LXSolutions.nl

   Fonts: Figtree 400, 600 en 700, self-hosted (geen externe imports).
   Opbouw: basis, header, hero, de blokken van de voorpagina, footer,
   daarna de thema-aanvullingen (bewerkbare foto's,
   subpagina's) en tot slot mobiel.
   ===================================================================== */
@font-face{font-family:Figtree;src:url('../fonts/figtree-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url('../fonts/figtree-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url('../fonts/figtree-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --c-bg:#fafafa;--c-surface:#fff;--c-ink:#161616;--c-sub:#626262;--c-line:#d8d8d8;
  --c-dark:#111;--c-darker:#0b0b0b;--c-muted:#8f8f8f;--c-alt:#f0f0f0;
  --container:1360px;--gutter:clamp(20px,4vw,48px);--header:76px;
  --font:Figtree,Arial,sans-serif;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.65;background:var(--c-bg);color:var(--c-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:-.05em;line-height:1.02}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select,summary{-webkit-tap-highlight-color:transparent}
svg{display:block;flex-shrink:0}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:fixed;top:-80px;left:16px;background:var(--c-ink);color:#fff;padding:12px 16px;z-index:100}
.skip-link:focus{top:12px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ---------- Bovenkopje + titels ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px}
.eyebrow:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.section-title{font-size:clamp(40px,4.6vw,68px)}
.section-intro{font-size:16px;line-height:1.8;color:var(--c-sub);max-width:420px}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;height:56px;padding:0 22px;border:1px solid transparent;border-radius:0;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn svg{width:16px;height:16px}
.btn--dark,.btn--primary{background:var(--c-ink);color:#fff}
.btn--dark:hover,.btn--primary:hover{background:#333;color:#fff}
.btn--light{background:#fff;color:#111}
.btn--light:hover{background:#e6e6e6;color:#111}
.btn--outline-light{border-color:#f4f4f4;color:#f4f4f4}
.btn--outline-light:hover{background:#fff;color:#111}
.btn--lg{height:58px;padding:0 24px;font-size:14px}

/* =====================================================================
   HEADER — vast bovenin, transparant over de hero, glas bij scrollen
   ===================================================================== */
.site-header{position:fixed;inset:0 0 auto;z-index:50;color:#fff;background:rgba(12,12,12,0);border-bottom:1px solid rgba(255,255,255,0);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .35s,border-color .35s}
.site-header.is-scrolled{background:rgba(12,12,12,.82);border-bottom-color:rgba(255,255,255,.1)}
.site-header__inner{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex-shrink:0;line-height:1}
.brand__name{font-size:23px;font-weight:700;letter-spacing:-.06em;line-height:1;white-space:nowrap}
.brand__place{font-size:9px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--c-muted)}
.brand__name:after{content:'.';color:var(--c-muted)}
.brand__logo{display:block;width:auto;height:34px;max-width:200px;object-fit:contain}
.main-nav{display:flex;align-items:center;gap:36px}
.main-nav__links{display:flex;gap:30px;font-size:13px;font-weight:600}
.main-nav__links a{padding:6px 0;opacity:.78;transition:opacity .2s}
.main-nav__links a:hover,.main-nav__links a:focus-visible{opacity:1}
.main-nav .btn{height:44px;padding:0 18px;gap:14px;white-space:nowrap}
.btn--call{justify-content:flex-start;gap:12px;font-variant-numeric:tabular-nums}
.btn--call svg{width:15px;height:15px}
.menu-toggle{display:none;align-items:center;gap:10px;background:none;border:0;color:#fff;font-size:13px;font-weight:600;padding:8px 0;cursor:pointer;-webkit-appearance:none;appearance:none}
.menu-toggle__lines{width:20px;height:8px;border-block:1.5px solid currentColor;transition:height .2s}
.menu-toggle[aria-expanded=true] .menu-toggle__lines{height:1.5px;border-bottom:0}
@media(min-width:783px){.admin-bar .site-header{top:32px}}
@media(max-width:782px){.admin-bar .site-header{top:46px}}

/* =====================================================================
   HERO met veeg-effect
   ===================================================================== */
.hero{position:relative;height:100vh;height:100svh;min-height:680px;max-height:1080px;background:var(--c-darker);color:#fff;overflow:hidden;touch-action:pan-y}
.hero--clean{cursor:none}
.hero--clean a,.hero--clean button{cursor:pointer}
.hero__image,.hero__dirt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__dirt{display:block}
.hero .cc-placeholder.hero__image{background:#1a1a1a}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,8,.55) 0%,rgba(8,8,8,0) 22%,rgba(8,8,8,0) 45%,rgba(8,8,8,.88) 100%),linear-gradient(90deg,rgba(8,8,8,.6) 0%,rgba(8,8,8,0) 55%)}
.hero__ring{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border:1px solid rgba(255,255,255,.7);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:inset 0 0 40px rgba(255,255,255,.15)}
.hero__content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.hero__content a,.hero__content button{pointer-events:auto}
.hero .eyebrow{color:#d6d6d6;margin-bottom:26px}
.hero__title{font-size:clamp(56px,9.2vw,148px);line-height:.9;letter-spacing:-.065em;max-width:1200px;text-wrap:balance}
.hero__title span{display:block}
.hero__title span+span{color:var(--c-muted)}
.hero__lead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 60px;margin-top:38px}
.hero__text{max-width:520px;font-size:16px;line-height:1.75;color:#cfcfcf;text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.hero__link{font-size:13px;font-weight:600;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.4)}
.hero__link:hover{border-bottom-color:#fff}
.hero__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px;margin-top:44px;padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.18)}
.hero__trust{display:flex;flex-wrap:wrap;gap:12px 30px;margin:0;padding:0;list-style:none;font-size:13px;color:#d6d6d6}
.hero__trust li{display:flex;align-items:center;gap:9px;margin:0}
.hero__trust svg{width:16px;height:16px}
.clean-meter{display:flex;align-items:center;gap:18px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.clean-meter__dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:cc-pulse 2.4s infinite}
.clean-meter__label{min-width:190px}
.clean-meter__track{position:relative;width:120px;height:2px;background:rgba(255,255,255,.2)}
.clean-meter__fill{position:absolute;inset:0 auto 0 0;width:0;background:#fff;transition:width .3s}
.clean-meter__pct{min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.clean-meter__reset{background:none;border:1px solid rgba(255,255,255,.35);border-radius:0;color:#fff;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;cursor:pointer;-webkit-appearance:none;appearance:none}
.clean-meter__reset:hover{border-color:#fff}

/* Intro-animatie: oplopende vertraging per regel */
.rise{animation:cc-rise 1s var(--d,0s) both}
.rise--1{--d:.1s}.rise--2{--d:.2s}.rise--3{--d:.35s}.rise--4{--d:.5s}.rise--5{--d:.65s}
@keyframes cc-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cc-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* =====================================================================
   DIENSTEN
   ===================================================================== */
.section{padding:clamp(80px,9vw,130px) 0}
.diensten__heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 80px;margin-bottom:56px}
.diensten .section-title{max-width:640px}
.diensten__catalogus{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.treatment__image{position:relative;height:380px;overflow:hidden;background:#e5e5e5}
.treatment__image img,.treatment__image .cc-placeholder{height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.treatment:hover .treatment__image img{transform:scale(1.05)}
.treatment__heading{display:grid;grid-template-columns:34px 1fr;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--c-line)}
.treatment__number{font-size:11px;font-weight:700;color:var(--c-muted);padding-top:7px}
.treatment__heading h3{font-size:26px;letter-spacing:-.035em;line-height:1.15}
.treatment__text{margin:14px 0 0 44px;font-size:15px;line-height:1.8;color:var(--c-sub)}

/* =====================================================================
   SHOWROOMKLAAR (donker)
   ===================================================================== */
.showroom{background:var(--c-dark);color:#f4f4f4}
.showroom .eyebrow{color:#cfcfcf}
.showroom .section-title{font-size:clamp(40px,5.4vw,84px);max-width:900px;margin-bottom:56px}
.showroom__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px 60px;align-items:start}
.showroom__main{position:relative;height:clamp(420px,52vw,680px);overflow:hidden;background:#1d1d1d}
.showroom__main img,.showroom__detail img,.showroom__main .cc-placeholder,.showroom__detail .cc-placeholder{height:100%;object-fit:cover}
.showroom__main img{object-position:center 55%}
.showroom__side{display:flex;flex-direction:column;gap:36px;align-items:flex-start}
.showroom__detail{position:relative;height:300px;width:100%;overflow:hidden;background:#1d1d1d}
.showroom__statement{font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.04em;font-weight:600}
.showroom__lead{font-size:17px;line-height:1.7;color:#d9d9d9}
.showroom__text{font-size:15px;line-height:1.8;color:#a9a9a9}
.showroom .cc-placeholder{background:#1d1d1d;color:#5c5c5c}

/* =====================================================================
   WERKWIJZE
   ===================================================================== */
.werkwijze{background:var(--c-alt)}
.werkwijze__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:56px 100px}
.werkwijze .section-title{font-size:clamp(40px,4.4vw,62px);max-width:480px}
.werkwijze__photo{position:relative;height:280px;margin-top:40px;overflow:hidden;max-width:520px;background:#e2e2e2}
.werkwijze__photo img,.werkwijze__photo .cc-placeholder{height:100%;object-fit:cover}
.route-step{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:30px 0;border-top:1px solid #cfcfcf}
.route-step:last-child{border-bottom:1px solid #cfcfcf}
.route-step__number{font-size:36px;font-weight:600;letter-spacing:-.05em;line-height:1;color:#a3a3a3}
.route-step h3{font-size:24px;letter-spacing:-.035em;margin-bottom:10px}
.route-step p{font-size:15px;line-height:1.8;color:var(--c-sub)}

/* =====================================================================
   LOCATIE (donker) — toen/nu en het navigatiescherm
   ===================================================================== */
.locatie{background:var(--c-darker);color:#f4f4f4}
.locatie .eyebrow{color:#cfcfcf;margin-bottom:0}
.locatie__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:56px 80px;align-items:center}
.locatie--nomap .locatie__inner{grid-template-columns:minmax(0,760px)}
.locatie__content{display:flex;flex-direction:column;gap:28px}
.locatie .section-title{font-size:clamp(40px,4.8vw,72px);line-height:1;max-width:620px;text-wrap:balance}
.locatie__text{font-size:17px;line-height:1.75;color:#d9d9d9;max-width:520px;text-wrap:pretty}
.then-now{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid rgba(255,255,255,.16)}
.then-now__item{padding:22px 20px 22px 0}
.then-now__item--now{padding:22px 0 22px 24px;border-left:1px solid rgba(255,255,255,.16)}
.then-now__label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted);margin-bottom:8px}
.then-now__item--now .then-now__label{color:#fff}
.then-now__item--now .then-now__label:before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:cc-pulse 2.4s infinite}
.then-now__place{font-size:24px;font-weight:600;letter-spacing:-.035em}
.then-now__region{font-size:13px;color:#a9a9a9;margin-top:4px}
.locatie__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.locatie__route{display:inline-flex;align-items:center;gap:8px}
.locatie__route svg{width:14px;height:14px}
.locatie__map{position:relative;height:clamp(460px,48vw,640px);border:1px solid rgba(255,255,255,.14);overflow:hidden;background:var(--c-darker)}
.locatie__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* =====================================================================
   WITTE BALK — rustige strook tussen Locatie en Bellen
   ===================================================================== */
.band{background:var(--c-bg);color:var(--c-ink);border-block:1px solid var(--c-line)}
.band__inner{padding-block:30px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 40px}
.band__services{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:clamp(18px,1.8vw,24px);font-weight:600;letter-spacing:-.035em}
.band__services span{display:flex;align-items:center;gap:18px}
.band__services span+span:before{content:'';width:5px;height:5px;border-radius:50%;background:#a3a3a3}
.band__place{font-size:13px;color:var(--c-sub)}

/* =====================================================================
   BELLEN (vervangt het contactformulier)
   ===================================================================== */
.bellen{background:var(--c-dark);color:#f4f4f4;overflow:hidden}
.bellen .eyebrow{color:#cfcfcf;margin-bottom:0}
.bellen__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px 90px;align-items:center}
.bellen--noscreen .bellen__inner{grid-template-columns:minmax(0,760px)}
.bellen__content{display:flex;flex-direction:column;gap:28px}
.bellen__title{font-size:clamp(44px,5.4vw,84px);line-height:.98;letter-spacing:-.06em;text-wrap:balance}
.bellen__title span{color:var(--c-muted)}
.bellen__text{font-size:17px;line-height:1.75;color:#d9d9d9;max-width:480px}
.call-cta{display:flex;align-items:center;gap:28px;margin-top:12px;color:#fff}
.call-cta__button{position:relative;flex-shrink:0;width:112px;height:112px;display:grid;place-items:center}
.call-cta__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);animation:cc-sonar 2.4s ease-out infinite}
.call-cta__ring:nth-child(2){animation-delay:.8s}
.call-cta__ring:nth-child(3){animation-delay:1.6s}
.call-cta__icon{position:relative;width:112px;height:112px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;animation:cc-ring 2.4s infinite;transition:transform .2s}
.call-cta__icon svg{width:38px;height:38px}
.call-cta:hover .call-cta__icon,.call-cta:focus-visible .call-cta__icon{transform:scale(1.05)}
.call-cta__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.call-cta__label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#a9a9a9}
.call-cta__number{font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.call-cta__status{display:flex;align-items:center;gap:8px;font-size:13px;color:#cfcfcf}
.call-cta__status i{width:6px;height:6px;border-radius:50%;background:#8f8f8f;flex-shrink:0}
.call-cta__status.is-open i{background:#fff;animation:cc-pulse 2s infinite}
.call-screen{max-width:520px;width:100%;justify-self:center;border:1px solid rgba(255,255,255,.14);background:var(--c-darker)}
.call-screen__head{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.call-screen__avatar{width:44px;height:44px;flex-shrink:0;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.call-screen__who{flex:1;min-width:0}
.call-screen__name{font-size:16px;font-weight:600;letter-spacing:-.02em}
.call-screen__status{font-size:12px;color:#a9a9a9;font-variant-numeric:tabular-nums;margin-top:2px}
.call-screen__eq{display:flex;align-items:flex-end;gap:3px;height:18px}
.call-screen__eq i{width:3px;height:100%;background:#fff;transform-origin:bottom;animation:cc-eq .9s infinite alternate}
.call-screen__eq i:nth-child(1){height:40%}.call-screen__eq i:nth-child(2){animation-delay:.2s}.call-screen__eq i:nth-child(3){height:60%;animation-delay:.4s}.call-screen__eq i:nth-child(4){height:80%;animation-delay:.1s}
.call-screen__body{display:flex;flex-direction:column;gap:10px;padding:22px 20px;min-height:360px}
.call-bubble{max-width:82%;padding:12px 16px;font-size:15px;line-height:1.5}
.call-bubble--me{align-self:flex-end;background:#2a2a2a;color:#f4f4f4}
.call-bubble--cc{align-self:flex-start;background:#fff;color:#111}
.call-confirm{margin-top:8px;display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid #fff}
.call-confirm__icon{width:40px;height:40px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;flex-shrink:0}
.call-confirm__icon svg{width:20px;height:20px}
.call-confirm__text{display:flex;flex-direction:column;gap:3px}
.call-confirm__text span:first-child{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.call-confirm__text span:last-child{font-size:15px;color:#cfcfcf}
.call-screen__note{padding:0 20px 16px;font-size:11px;color:var(--c-muted)}
.call-screen.is-animated [data-step]{display:none}
.call-screen.is-animated [data-step].is-shown{display:flex;animation:cc-rise .5s both}
.call-screen.is-animated .call-bubble.is-shown{display:block}
@keyframes cc-sonar{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes cc-ring{0%,60%,100%{transform:rotate(0)}64%{transform:rotate(-12deg)}68%{transform:rotate(12deg)}72%{transform:rotate(-8deg)}76%{transform:rotate(6deg)}80%{transform:rotate(0)}}
@keyframes cc-eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* =====================================================================
   VRAGEN
   ===================================================================== */
.section--faq{background:var(--c-alt);padding:clamp(70px,8vw,110px) 0}
.container--narrow{max-width:900px}
.vragen .eyebrow{margin-bottom:18px}
.vragen .section-title{font-size:40px;line-height:1.05}
.vragen .section-intro{margin-top:14px;max-width:440px;font-size:15px}
.vragen__list{margin-top:26px;border-top:1px solid var(--c-line)}
.faq{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;width:14px;height:14px;flex-shrink:0;transition:transform .25s}
.faq__plus:before,.faq__plus:after{content:'';position:absolute;inset:6px 0 auto;height:1.5px;background:currentColor}
.faq__plus:after{transform:rotate(90deg)}
.faq[open] .faq__plus{transform:rotate(45deg)}
.faq__answer{padding:0 40px 22px 0;font-size:15px;line-height:1.8;color:var(--c-sub)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--c-darker);color:#f4f4f4;padding:64px 0 32px}
.site-footer__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.site-footer .brand__name{font-size:28px}
.site-footer .brand__place{font-size:10px}
.site-footer__tagline{font-size:15px;color:#a9a9a9}
.site-footer__links{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px;font-weight:600}
.site-footer__links a:hover,.site-footer__meta a:hover{color:#a9a9a9}
.site-footer__call{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 60px;padding-block:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.site-footer__phone{display:flex;flex-direction:column;gap:10px}
.site-footer__phone-label{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#a9a9a9}
.site-footer__phone-label svg{width:15px;height:15px}
.site-footer__phone-number{display:flex;align-items:center;gap:18px;font-size:clamp(34px,4.4vw,60px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;transition:color .2s}
.site-footer__phone-number svg{width:28px;height:28px;transition:transform .2s}
.site-footer__phone:hover .site-footer__phone-number{color:#d6d6d6}
.site-footer__phone:hover .site-footer__phone-number svg{transform:translate(3px,-3px)}
.site-footer__info{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;color:#a9a9a9;text-align:right}
.site-footer__info a:hover{color:#fff}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:24px;font-size:12px;color:var(--c-muted)}
.site-footer__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.site-footer__credit a{color:#d6d6d6;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.site-footer__credit a:hover{color:#fff;text-decoration-color:#fff}

/* =====================================================================
   THEMA-AANVULLINGEN
   ===================================================================== */
/* Uitsnede van foto's (instelbaar per foto in Site-instellingen) */
img.is-focus-center{object-position:center center!important}
img.is-focus-top{object-position:center top!important}
img.is-focus-upper{object-position:center 30%!important}
img.is-focus-lower{object-position:center 70%!important}
img.is-focus-bottom{object-position:center bottom!important}
img.is-focus-left{object-position:left center!important}
img.is-focus-right{object-position:right center!important}

/* Leeg fotovlak (geen eigen foto en geen standaardfoto) */
.cc-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#e5e5e5;color:#a3a3a3}
.cc-placeholder svg{width:28px;height:28px}

/* "Foto wijzigen"-knop: alleen zichtbaar voor ingelogde beheerders */
.cc-edit{position:absolute;top:14px;right:14px;z-index:6;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;background:rgba(17,17,17,.9);color:#fff;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.02em;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s,background .2s,color .2s;cursor:pointer}
.cc-edit svg{width:15px;height:15px}
.cc-edit:hover{background:#fff;color:#111}
.hero:hover .cc-edit,.treatment__image:hover .cc-edit,.showroom__main:hover .cc-edit,.showroom__detail:hover .cc-edit,.werkwijze__photo:hover .cc-edit,.cc-edit:focus-visible{opacity:1;transform:none}
.cc-edit--hero{top:calc(var(--header) + 18px);right:max(var(--gutter),calc((100% - var(--container))/2 + var(--gutter)))}
@media(hover:none){.cc-edit{opacity:.92;transform:none}}

/* Subpagina's: donkere kop onder de vaste header, lichte inhoud */
.lxs-page{background:var(--c-bg)}
.lxs-pagehead{background:var(--c-dark);color:#f4f4f4;padding:calc(var(--header) + 64px) 0 64px}
.lxs-pagehead__inner,.lxs-page__body{width:min(900px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.lxs-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;font-size:13px;font-weight:600;color:#cfcfcf;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}
.lxs-back:hover{color:#fff;border-bottom-color:#fff}
.lxs-post-meta{display:block;margin-bottom:14px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-muted)}
.lxs-pagetitle{font-size:clamp(38px,5.4vw,72px);line-height:1;letter-spacing:-.055em;overflow-wrap:anywhere}
.lxs-page__body{padding-block:64px 100px}
.lxs-post-thumb{margin-bottom:40px;overflow:hidden}
.lxs-post-thumb img{max-height:520px;object-fit:cover}
.lxs-page__body .entry-content{font-size:17px;line-height:1.8;color:#2b2b2b}
.lxs-page__body .entry-content>*:first-child{margin-top:0}
.lxs-page__body .entry-content p,.lxs-page__body .entry-content ul,.lxs-page__body .entry-content ol{margin:0 0 22px}
.lxs-page__body .entry-content h2{font-size:clamp(28px,3vw,38px);margin:48px 0 18px}
.lxs-page__body .entry-content h3{font-size:24px;letter-spacing:-.03em;margin:36px 0 14px}
.lxs-page__body .entry-content a{text-decoration:underline;text-underline-offset:3px}
.lxs-page__body .entry-content a:hover{color:var(--c-sub)}
.lxs-page__body .entry-content blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--c-ink);font-size:20px;font-weight:600;letter-spacing:-.02em}
.lxs-page__body .entry-content figure{margin:32px 0}
.lxs-page__body .entry-content img{height:auto}
.lxs-page__body .entry-content figcaption{font-size:13px;color:var(--c-sub);margin-top:10px}
.lxs-page__body .entry-content .aligncenter{margin-inline:auto}
.lxs-page__body .entry-content .alignleft{float:left;margin:6px 28px 18px 0}
.lxs-page__body .entry-content .alignright{float:right;margin:6px 0 18px 28px}
.lxs-page__body .entry-content .wp-block-button__link{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:0;background:var(--c-ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600}
.lxs-page__body .entry-content .wp-block-button__link:hover{background:#333;color:#fff}
.lxs-postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px}
.lxs-postcard{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line)}
.lxs-postcard__img{display:block;height:220px;overflow:hidden;background:#e5e5e5}
.lxs-postcard__img img{height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.lxs-postcard:hover .lxs-postcard__img img{transform:scale(1.04)}
.lxs-postcard__body{display:flex;flex-direction:column;gap:10px;padding:24px}
.lxs-postcard__date{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.lxs-postcard__title{font-size:22px;letter-spacing:-.035em;line-height:1.2}
.lxs-postcard__title a:hover{color:var(--c-sub)}
.lxs-postcard__excerpt{font-size:15px;line-height:1.7;color:var(--c-sub)}
.lxs-readmore{margin-top:4px;font-size:13px;font-weight:600;align-self:flex-start;border-bottom:1px solid var(--c-ink);padding-bottom:2px}
.lxs-pagination{margin-top:44px}
.lxs-pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px}
.lxs-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--c-line);background:var(--c-surface);font-size:14px;font-weight:600}
.lxs-pagination .page-numbers.current,.lxs-pagination a.page-numbers:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.lxs-empty-msg{color:var(--c-sub)}
.lxs-linkpages{margin-top:30px;font-weight:600}

/* =====================================================================
   MOBIEL
   ===================================================================== */
@media (max-width:1180px){
  .menu-toggle{display:inline-flex}
  .main-nav{position:absolute;top:var(--header);left:0;right:0;flex-direction:column;align-items:stretch;gap:24px;padding:24px var(--gutter) 32px;background:rgba(12,12,12,.96);border-bottom:1px solid rgba(255,255,255,.1);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .main-nav.is-open{opacity:1;visibility:visible;transform:none}
  .main-nav__links{flex-direction:column;gap:6px;font-size:22px;letter-spacing:-.03em}
  .main-nav__links a{opacity:.9}
  .main-nav .btn{height:52px;justify-content:center}
}
@media (max-width:980px){
  .clean-meter__label{min-width:0}
  .clean-meter__track{display:none}
}
@media (max-width:720px){
  .lxs-page__body .entry-content .alignleft,.lxs-page__body .entry-content .alignright{float:none;margin:24px 0}
  .cc-edit--hero{top:calc(var(--header) + 14px)}
}
@media (max-width:720px){
  .site-footer__info{text-align:left}
}
@media (max-width:560px){
  .call-cta{gap:20px}
  .call-cta__button,.call-cta__icon{width:84px;height:84px}
  .call-cta__icon svg{width:30px;height:30px}
  .hero{min-height:620px}
  .hero__bar{margin-top:32px}
  .treatment__image{height:300px}
  .route-step{grid-template-columns:52px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .rise,.clean-meter__dot,.call-cta__ring,.call-cta__icon,.call-cta__status.is-open i,.call-screen__eq i,.then-now__item--now .then-now__label:before{animation:none}
  html{scroll-behavior:auto}
  .treatment__image img{transition:none}
}