/* ============================================================
   Schuifpuireparatie Utrecht — premium huisstijl 2026
   Eigen identiteit per stadsdomein (anti-doorway): kleuren, fonts,
   logo en dividers zijn uniek voor Utrecht. Class-namen gelijk aan
   de oorspronkelijke stylesheet zodat content-markup en inline JS
   van alle pagina's ongewijzigd blijven werken.
   ============================================================ */

:root{
  --ink:#2b2119;
  --brand:#7e1e2e;
  --brand-deep:#5e1522;
  --cta:#b25e00;
  --cta-hi:#c76e07;
  --cta-deep:#8f4b00;
  --gold:#c99a3f;
  --mist:#f5e9e6;
  --canvas:#faf7f2;
  --sand:#f1ebe1;
  --line:#e7e0d4;
  --muted:#6b6157;
  --head:'Fraunces','Nunito Sans',sans-serif;
  --bodyf:'Nunito Sans','Segoe UI',sans-serif;
  --sh-lg:0 30px 70px -18px rgba(0,0,0,.20);
  --sh-md:0 16px 40px -10px rgba(0,0,0,.12);
  --sh-sm:0 6px 18px rgba(0,0,0,.07);
  /* aliassen voor legacy variabele-namen */
  --primary:var(--brand);
  --primary-dark:var(--ink);
  --accent:var(--cta);
  --accent-dark:var(--cta-deep);
  --text:#2b3238;
  --text-light:var(--muted);
  --bg:var(--sand);
  --white:#fff;
  --border:var(--line);
  --footer:var(--ink);
  --shadow:var(--sh-md);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:var(--bodyf);color:var(--text);font-size:16.5px;line-height:1.68;background:var(--canvas);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{width:min(1180px,calc(100% - 44px));margin:0 auto}
.narrow{width:min(880px,calc(100% - 44px));margin:0 auto}

/* ---------- Topbar ---------- */
.topbar{background:var(--ink);color:#e8eae8;font-size:13.5px;font-weight:500}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 0}
.topbar-inner>span:first-child:before{content:"★★★★★  ";color:var(--gold);letter-spacing:2px}
.topbar a{font-weight:700;color:#fff;white-space:nowrap}
.topbar a:hover{color:var(--gold)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;background:color-mix(in srgb,var(--canvas) 90%,transparent);backdrop-filter:blur(14px) saturate(150%);z-index:10000;border-bottom:1px solid var(--line);overflow:visible!important}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:22px;overflow:visible!important}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand strong{display:block;font-family:var(--head);font-size:20px;line-height:1.02;font-weight:800}
.brand small{display:block;color:var(--cta);font-weight:700;margin-top:3px;letter-spacing:.2em;text-transform:uppercase;font-size:10.5px;white-space:nowrap}
.brand-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.brand-mark svg{display:block}
.main-nav{display:flex;align-items:center;gap:22px;font-weight:600;color:#3a4249;overflow:visible!important}
.main-nav a{padding:8px 0;border-bottom:2px solid transparent;font-size:15.5px}
.main-nav a:hover,.main-nav a.active{color:var(--cta);border-color:var(--cta)}
.call-btn,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-weight:700;transition:.18s ease;line-height:1.2;font-family:var(--head)}
.main-nav .call-btn{background:linear-gradient(160deg,var(--cta-hi),var(--cta) 55%,var(--cta-deep));color:#fff;padding:12px 20px;border:0;box-shadow:0 10px 22px -6px color-mix(in srgb,var(--cta) 45%,transparent)}
.main-nav .call-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -6px color-mix(in srgb,var(--cta) 55%,transparent);border-color:transparent;color:#fff}
.menu-toggle{display:none;background:var(--ink);color:#fff;border:0;border-radius:11px;width:44px;height:42px;font-size:22px;cursor:pointer}

/* dropdown-navigatie */
.nav-dropdown{position:relative;display:inline-flex;align-items:center;height:100%;overflow:visible!important}
.nav-dropdown-toggle{background:none;border:none;outline:none;color:inherit;font:inherit;font-weight:600;font-size:15.5px;padding:8px 0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;-webkit-appearance:none;appearance:none}
.nav-dropdown-toggle:hover{color:var(--cta)}
.nav-dropdown-toggle .dropdown-arrow{font-size:9px;opacity:.7;transition:transform .2s ease}
.nav-dropdown.open .dropdown-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:230px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-md);padding:10px 0;z-index:10001;overflow:visible}
.nav-dropdown.open .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:11px 22px;color:var(--ink);font-weight:600;font-size:14.5px;white-space:nowrap;border-bottom:0}
.nav-dropdown-menu a:hover{background:var(--mist);color:var(--brand)}

/* ---------- Hero (licht, premium) ---------- */
.hero{background:var(--canvas);color:var(--ink);padding:70px 0 0;position:relative;overflow:hidden;z-index:1}
.hero.simple{padding:48px 0 0}
.hero.simple:after{height:44px;margin-top:26px}
.hero:after{content:"";display:block;height:64px;margin-top:56px;background:var(--sand);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 66" preserveAspectRatio="none"><path d="M0 66 L0 42 L40 42 Q70 16 100 42 L140 42 Q170 16 200 42 L240 42 Q270 16 300 42 L340 42 Q370 16 400 42 L440 42 Q470 16 500 42 L540 42 Q570 16 600 42 L640 42 L648 42 L648 20 L654 20 L654 8 L666 8 L666 2 L674 2 L674 8 L686 8 L686 20 L692 20 L692 42 L700 42 L740 42 Q770 16 800 42 L840 42 Q870 16 900 42 L940 42 Q970 16 1000 42 L1040 42 Q1070 16 1100 42 L1140 42 Q1170 16 1200 42 L1240 42 Q1270 16 1300 42 L1340 42 Q1370 16 1400 42 L1440 42 L1440 66 Z"/></svg>") center/100% 100% no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 66" preserveAspectRatio="none"><path d="M0 66 L0 42 L40 42 Q70 16 100 42 L140 42 Q170 16 200 42 L240 42 Q270 16 300 42 L340 42 Q370 16 400 42 L440 42 Q470 16 500 42 L540 42 Q570 16 600 42 L640 42 L648 42 L648 20 L654 20 L654 8 L666 8 L666 2 L674 2 L674 8 L686 8 L686 20 L692 20 L692 42 L700 42 L740 42 Q770 16 800 42 L840 42 Q870 16 900 42 L940 42 Q970 16 1000 42 L1040 42 Q1070 16 1100 42 L1140 42 Q1170 16 1200 42 L1240 42 Q1270 16 1300 42 L1340 42 Q1370 16 1400 42 L1440 42 L1440 66 Z"/></svg>") center/100% 100% no-repeat}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) 400px;gap:52px;align-items:center;position:relative;z-index:1}
.eyebrow{margin:0 0 14px;color:var(--cta);text-transform:uppercase;letter-spacing:.13em;font-size:12.5px;font-weight:700;font-family:var(--head)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--mist);color:var(--brand);border-radius:999px;padding:8px 16px}
.hero .eyebrow:before{content:"030";color:var(--cta-deep);font-weight:800;letter-spacing:.06em}
.hero h1{font-size:clamp(36px,4.2vw,52px);line-height:1.04;margin:0 0 18px;font-weight:800;color:var(--ink)}
.lead{font-size:19px;line-height:1.62;margin:0 0 24px;color:var(--muted)}
.hero-bullets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 22px;margin:0 0 28px;padding:0;list-style:none}
.hero-bullets li{position:relative;padding-left:29px;font-weight:600;color:var(--ink);font-size:15.5px}
.hero-bullets li:before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;background:var(--mist);border-radius:7px;color:var(--brand);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;max-width:100%;align-items:center}
.btn{padding:16px 24px;font-size:16.5px}
.btn.primary{background:linear-gradient(160deg,var(--cta-hi),var(--cta) 55%,var(--cta-deep));color:#fff;box-shadow:0 12px 26px -6px color-mix(in srgb,var(--cta) 48%,transparent)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -6px color-mix(in srgb,var(--cta) 58%,transparent)}
.btn.primary.light{background:#fff;color:var(--brand-deep);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.btn.secondary{border:1.5px solid #c9cfd2;color:var(--ink);background:rgba(255,255,255,.65)}
.btn.secondary:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.cta .btn.secondary{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}

/* prijskaart (hero rechts op contentpagina's) */
.price-card{background:#fff;color:var(--ink);border-radius:20px;padding:30px;box-shadow:var(--sh-md);display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden}
.price-card:before{content:"";position:absolute;top:0;left:22px;right:22px;height:5px;border-radius:0 0 5px 5px;background:var(--cta)}
.price-card span{color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-family:var(--head)}
.price-card strong{font-size:24px;font-family:var(--head);color:var(--brand-deep)}
.price-card small{color:var(--muted)}

/* homepage: video-hero rechts */
.hero-visual{position:relative}
.hero-visual .frame{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--sh-lg);background:var(--brand-deep);aspect-ratio:16/11.4}
.hero-visual video,.hero-visual .frame img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual .vbadge{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.93);backdrop-filter:blur(6px);border-radius:11px;padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:var(--sh-sm)}
.hero-visual .vbadge .dot{width:8px;height:8px;border-radius:50%;background:var(--cta);box-shadow:0 0 0 4px color-mix(in srgb,var(--cta) 18%,transparent);animation:vpulse 1.8s infinite}
@keyframes vpulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--cta) 8%,transparent)}}
.price-float{position:absolute;right:-12px;top:-16px;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:var(--sh-md);z-index:3;overflow:hidden}
.price-float:after{content:"";position:absolute;top:0;left:16px;right:16px;height:4px;border-radius:0 0 4px 4px;background:var(--cta)}
.price-float span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.price-float b{font-family:var(--head);font-size:27px;color:var(--ink)}
.price-float small{color:var(--muted);font-size:12px;display:block}

/* ---------- Trustbar ---------- */
.trustbar{background:var(--sand);border-bottom:0;position:relative;z-index:1;padding:0 0 46px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust-grid>div{background:#fff;border-radius:16px;padding:22px 20px;box-shadow:var(--sh-sm);border-right:0}
.trust-grid strong{display:block;color:var(--brand);font-size:26px;font-weight:800;line-height:1;font-family:var(--head)}
.trust-grid span{display:block;color:var(--muted);font-weight:500;margin-top:7px;font-size:14.5px}

/* ---------- Secties & content ---------- */
.section{padding:76px 0;position:relative;z-index:1}
.section:nth-of-type(even){background:var(--sand)}
.content h2,.section h2{font-size:clamp(27px,3vw,36px);line-height:1.12;margin:0 0 20px;font-weight:800;color:var(--ink)}
.content h3,.section h3{font-size:21px;line-height:1.3;margin:28px 0 10px;font-weight:700;color:var(--brand-deep)}
.content p{margin:0 0 18px;color:#333a40}
.content a,.section p a{color:var(--brand);font-weight:700}
.content a:hover,.section p a:hover{text-decoration:underline}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card,.mini-card,.pricing-grid article,.steps article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--sh-sm);transition:.2s ease}
.service-card:hover,.mini-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.service-card span,.steps span{width:38px;height:38px;border-radius:12px;background:var(--mist);display:inline-flex;align-items:center;justify-content:center;color:var(--brand);font-weight:800;font-family:var(--head)}
.service-card h3{margin:16px 0 8px}
.service-card p,.mini-card span{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.brand-section{background:var(--sand)}
.brand-list{display:flex;flex-wrap:wrap;gap:12px}
.brand-chip{background:#fff;border:1px solid var(--line);padding:11px 18px;border-radius:999px;color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)}
.brand-chip:hover{border-color:var(--brand);color:var(--brand)}
.check-list{padding:0;margin:10px 0 22px;list-style:none}
.check-list li{padding:11px 0 11px 31px;border-bottom:1px solid var(--line);position:relative}
.check-list li:before{content:"✓";position:absolute;left:0;top:13px;width:20px;height:20px;border-radius:7px;background:var(--mist);color:var(--brand);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini-card{display:block}
.mini-card strong{display:block;color:var(--ink);font-size:18px;font-family:var(--head)}
.mini-card.highlight{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,#fff)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0}
.pricing-grid strong{display:block;color:var(--brand);font-size:30px;margin:8px 0 12px;font-family:var(--head)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* FAQ */
.faq{background:var(--sand)}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin:12px 0;overflow:hidden;box-shadow:var(--sh-sm)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:0;text-align:left;padding:19px 22px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;font-family:var(--head)}
.faq-question b{font-size:24px;color:var(--cta);transition:transform .2s ease}
.faq-answer{max-height:0;overflow:hidden;opacity:0;transition:max-height .22s ease,opacity .22s ease}
.faq-answer p{padding:0 22px 20px;margin:0}
.faq-item.open .faq-answer{max-height:340px;opacity:1}
.faq-item.open .faq-question b{transform:rotate(45deg)}

/* ---------- CTA-blok ---------- */
.cta{background:transparent;padding:56px 0}
.cta .wrap{background:radial-gradient(ellipse at 15% 15%,rgba(255,255,255,.09),transparent 45%),linear-gradient(160deg,var(--brand),var(--brand-deep));color:#fff;border-radius:26px;padding:52px;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.cta .wrap:before{content:"030";position:absolute;right:26px;top:-42px;font-family:var(--head);font-weight:800;font-size:160px;color:rgba(255,255,255,.05);letter-spacing:-6px;pointer-events:none}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative;z-index:1}
.cta h2{margin:0 0 10px;font-size:clamp(26px,2.8vw,34px);color:#fff}
.cta p{margin:0;color:rgba(255,255,255,.75)}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#c2c2be;padding:58px 0 20px;position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.15fr;gap:34px}
.footer h3{margin:0 0 12px;color:#fff;font-size:16.5px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:7px 0}
.footer a{color:#e4e4e0}
.footer a:hover{color:#fff;text-decoration:underline}
.footer-brand{font-weight:800;font-size:22px;color:#fff;font-family:var(--head)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:32px;padding-top:18px;font-size:14px;color:#9d9d99}

/* ---------- Reviews ---------- */
.google-review-btn{display:inline-flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border:1px solid var(--line);border-left:0;border-radius:999px;padding:9px 18px 9px 10px;box-shadow:var(--sh-sm);font-weight:700;transition:.18s ease;max-width:100%}
.google-review-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.google-review-btn small{display:block;color:var(--muted);font-weight:500;margin-top:2px;font-size:12.5px}
.google-review-btn strong{display:block;font-size:15px;line-height:1.25;color:var(--ink)}
.google-review-btn>span:last-child{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.google-g{flex:0 0 36px;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(from -45deg,#ea4335 0 90deg,#fbbc05 90deg 180deg,#34a853 180deg 270deg,#4285f4 270deg 360deg);color:#fff;font-size:18px;font-weight:800;font-family:Arial,sans-serif}
.review-section{background:var(--sand)}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px;border:1px solid var(--line);border-radius:20px;padding:24px;background:#fff;box-shadow:var(--sh-sm)}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.review-card{position:relative;display:flex;flex-direction:column;min-height:220px;border-radius:18px;padding:26px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.review-card:before{content:'“';position:absolute;right:18px;top:6px;font-size:64px;line-height:1;color:color-mix(in srgb,var(--gold) 25%,transparent);font-family:Georgia,serif}
.review-stars{font-size:16px;margin-bottom:12px;color:var(--gold);letter-spacing:2.5px;font-weight:800}
.review-card p{font-size:15.5px;line-height:1.62;margin:0 0 18px;color:#3d3d3a;position:relative;z-index:1}
.review-card strong{display:block;margin-top:auto;font-size:15.5px;color:var(--ink);font-family:var(--head)}
.review-card span{display:inline-flex;align-items:center;width:max-content;max-width:100%;border-radius:999px;background:var(--mist);color:var(--brand);font-weight:700;font-size:12.5px;line-height:1;padding:7px 11px;margin-top:8px}
.review-note{color:var(--muted);font-size:14px;margin-top:12px}
.review-source-link{font-weight:700;color:var(--brand)}
.review-cta-box{background:linear-gradient(160deg,var(--brand),var(--brand-deep));color:#fff;border-radius:20px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.review-cta-box p{margin:0;color:rgba(255,255,255,.78)}
.review-cta-box .google-review-btn{background:#fff;color:var(--ink)}

/* ---------- Prijzenpagina ---------- */
.pricing-hero-note{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;margin-bottom:26px}
.pricing-hero-note span{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;color:var(--ink);font-weight:600;font-size:14px;box-shadow:var(--sh-sm)}
.service-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.service-price-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 30px;box-shadow:var(--sh-sm);position:relative;display:flex;flex-direction:column;gap:13px;overflow:visible}
.service-price-card.featured{background:linear-gradient(165deg,var(--brand),var(--brand-deep));color:#fff;border:0;transform:translateY(-12px);box-shadow:var(--sh-lg)}
.service-price-card .tag{letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);font-size:11.5px;font-family:var(--head)}
.service-price-card.featured .tag,.service-price-card.featured p,.service-price-card.featured li,.service-price-card.featured small{color:rgba(255,255,255,.92)}
.service-price-card h3{font-size:25px;line-height:1.15;margin:0;color:inherit}
.service-price-card .price{font-size:50px;font-weight:800;line-height:1;color:var(--brand);font-family:var(--head);letter-spacing:-.02em}
.service-price-card.featured .price{color:#fff}
.service-price-card small{color:var(--muted);font-weight:500}
.service-price-card ul{margin:12px 0 18px;padding:0;list-style:none;display:grid;gap:11px}
.service-price-card li{position:relative;padding-left:30px;color:#3f4649;font-size:15px}
.service-price-card li:before{content:'✓';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
.service-price-card.featured li:before{border-color:#fff3d6;color:#fff3d6}
.price-card-cta{margin-top:auto}
.price-card-cta .btn{width:100%;justify-content:center;text-align:center}
.price-card-cta .btn.outline-green{border:2px solid var(--brand);color:var(--brand);background:#fff}
.price-card-cta .btn.outline-green:hover{background:var(--mist)}
.service-price-card.featured .btn{background:#fff;color:var(--brand-deep);box-shadow:none}
.compare-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--sh-sm)}
.compare-table{width:100%;border-collapse:collapse;min-width:720px}
.compare-table th,.compare-table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left}
.compare-table th{background:var(--sand);color:var(--ink);font-weight:700;font-family:var(--head)}
.compare-table td:not(:first-child){text-align:center;font-weight:700;color:var(--brand)}
.compare-table tr:last-child td{border-bottom:0}
.repair-vs-new{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.choice-card{border-radius:20px;padding:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.choice-card.good{border-top:6px solid var(--brand)}
.choice-card.bad{border-top:6px solid #cfd0cd}
.choice-card h3{margin-top:0;font-size:24px}
.choice-card ul{padding-left:22px;display:grid;gap:9px}
.seo-landing-strip{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.seo-landing-card{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center;background:linear-gradient(135deg,var(--sand),#fff);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--sh-sm)}
.seo-landing-card h2{margin:0 0 12px;color:var(--ink);font-size:28px}
.seo-landing-card p{margin:0;color:#40474b;line-height:1.65}
.seo-landing-points{display:grid;gap:10px}
.seo-landing-points span{border-left:4px solid var(--gold);background:#fff;border-radius:10px;padding:11px 13px;font-weight:600;color:var(--ink);box-shadow:var(--sh-sm)}

/* ---------- Zwevende knoppen (desktop) ---------- */
.floating-contact{position:fixed;right:18px;left:auto;bottom:24px;z-index:9999;display:flex;flex-direction:column;gap:12px;align-items:center;pointer-events:none}
.floating-contact .float-btn{width:54px;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto;box-shadow:0 14px 30px rgba(0,0,0,.22);transition:.18s ease}
.floating-contact .float-btn:hover{transform:translateY(-3px)}
.floating-contact .float-whatsapp{background:#25D366}
.floating-contact .float-call{background:var(--brand)}
.floating-contact svg{display:block;width:28px;height:28px;fill:#fff}
.whatsapp-float{display:none!important}
.mail-offer-inline{display:inline-flex;align-items:center;gap:8px}

/* ---------- Sticky actiebalk (mobiel) ---------- */
.sticky-bar{display:none}
@media(max-width:900px){
  .floating-contact{display:none}
  .sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:99999;display:flex;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 14px rgba(0,0,0,.15)}
  .sticky-bar a{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:700;font-size:16.5px;font-family:var(--head)}
  .sticky-bar .sb-offerte{flex:1;background:linear-gradient(160deg,var(--cta-hi),var(--cta) 60%,var(--cta-deep))}
  .sticky-bar .sb-offerte:active{background:var(--cta-deep)}
  .sticky-bar .sb-call{width:62px;flex:0 0 62px;background:var(--ink)}
  .sticky-bar .sb-wa{width:62px;flex:0 0 62px;background:#25D366}
  .sticky-bar svg{width:24px;height:24px;fill:#fff}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* ---------- Formulieren ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:var(--sh-md)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-field label{font-weight:700;font-size:14.5px;color:var(--ink)}
.form-field label small{font-weight:500;color:var(--muted)}
.form-field input,.form-field select,.form-field textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--text);width:100%}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.form-field input[type=file]{padding:9px;background:var(--sand);cursor:pointer}
.form-field input[type=file]::file-selector-button{font:inherit;font-weight:700;border:0;background:var(--mist);color:var(--brand);border-radius:9px;padding:9px 15px;margin-right:12px;cursor:pointer}
.form-hint{font-size:13px;color:var(--muted);margin-top:4px}
.form-error{background:#fdeaea;border:1px solid #f2b8b8;color:#8e1c1c;border-radius:12px;padding:14px 16px;margin:0 0 16px;font-weight:600;display:none}
.form-error.show{display:block}
.form-submit{width:100%;font-size:17.5px;padding:17px 24px;cursor:pointer;border:0}
.form-note{font-size:13.5px;color:var(--muted);text-align:center;margin-top:12px}
.form-note a{color:var(--brand);font-weight:700}

/* ---------- Responsief ---------- */
@media(max-width:900px){
  .wrap,.narrow{width:min(100% - 32px,1180px)}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:14px;right:14px;top:76px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-md);border-radius:16px;padding:18px;flex-direction:column;align-items:flex-start;gap:2px}
  .main-nav.open{display:flex}
  .main-nav a{color:var(--ink);width:100%;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
  .main-nav a:last-of-type{border-bottom:0}
  .main-nav .call-btn{width:100%;justify-content:center;margin-top:8px;padding:14px}
  .nav-dropdown{display:block;width:100%}
  .nav-dropdown-toggle{width:100%;text-align:left;padding:11px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line);justify-content:space-between;display:flex}
  .nav-dropdown-menu{position:static;transform:none;box-shadow:none;border:none;border-radius:0;padding:0 0 0 16px;background:transparent;min-width:0}
  .nav-dropdown-menu a{padding:10px 0;font-size:15px;color:var(--text);white-space:normal}
  .hero{padding:48px 0 0}
  .hero:after{height:44px;margin-top:40px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero h1{font-size:33px}
  .hero-bullets{grid-template-columns:1fr}
  .price-card{max-width:460px}
  .hero-visual{display:none}
  /* homepage-hero op mobiel: stadsfoto als zachte achtergrond */
  .hero.is-home{position:relative}
  .hero.is-home:before{content:"";position:absolute;inset:0 0 64px 0;background:linear-gradient(180deg,color-mix(in srgb,var(--canvas) 55%,transparent),color-mix(in srgb,var(--canvas) 93%,transparent) 44%,var(--canvas) 72%),url("/assets/media/hero-poster.webp") center 24%/cover no-repeat;z-index:0}
  .hero.is-home .hero-grid{position:relative;z-index:1;padding-top:118px}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .service-grid,.mini-grid,.pricing-grid,.review-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .split,.footer-grid,.repair-vs-new{grid-template-columns:1fr}
  .cta .wrap{padding:38px 28px}
  .cta-inner,.review-head,.review-cta-box{align-items:flex-start;flex-direction:column}
  .seo-landing-card{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:15.5px}
  .wrap,.narrow{width:100%;padding-left:16px;padding-right:16px}
  .topbar-inner{justify-content:center}
  .topbar-inner>span:first-child{text-align:center}
  .topbar a{display:none}
  .hero{padding:40px 0 0}
  .hero h1{font-size:29px;line-height:1.08;overflow-wrap:break-word}
  .hero .lead{font-size:16.5px}
  .hero .eyebrow{font-size:11px;letter-spacing:.1em}
  .section{padding:52px 0}
  .content h2,.section h2{font-size:25px}
  .cta h2{font-size:25px}
  .service-grid,.mini-grid,.pricing-grid,.steps,.trust-grid,.review-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .btn{width:100%}
  .hero-actions .google-review-btn{width:100%;justify-content:flex-start}
  .header-inner{min-height:70px}
  .brand strong{font-size:17px}
  .brand small{font-size:9px;letter-spacing:.16em}
  .brand-mark svg{width:40px;height:40px}
  .price-card{width:100%;max-width:100%}
  .service-price-grid{grid-template-columns:1fr;gap:18px}
  .service-price-card{padding:26px 22px}
  .service-price-card .price{font-size:42px}
  .service-price-card.featured{transform:none}
  .choice-card{padding:24px 20px}
  .pricing-hero-note{display:grid;grid-template-columns:1fr;gap:10px}
  .review-card{min-height:0;padding:20px 19px}
  .form-card{padding:24px 18px}
}

/* Toegankelijkheid */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-visual video{display:none}
}