/* ============================================================
   Schuifpuireparatie Amsterdam — premium huisstijl 2026 (def.)
   "Amsterdams licht": warm ivoor canvas, petrol als merk-kleur,
   Amsterdams rood uitsluitend voor CTA's, messing-goud voor
   sterren/details. Grachtengevel-silhouet als sectie-overgang,
   ××× (Andreas-kruizen) als subtiel motief. Logo B: paneel op rail.
   Fonts: Bricolage Grotesque (koppen) + Instrument Sans (body).
   Class-namen identiek aan de oude stylesheet zodat content-markup
   en inline JS van alle 50 pagina's ongewijzigd blijven werken.
   ============================================================ */

:root{
  --ink:#13272e;
  --petrol:#0e5560;
  --petrol-deep:#0a3f48;
  --red:#c4172f;
  --red-deep:#9e0f23;
  --gold:#d9a441;
  --mist:#e9f2f1;
  --canvas:#faf9f6;
  --sand:#f3f1ea;
  --line:#e7e4dc;
  --muted:#5b6a67;
  --head:'Bricolage Grotesque','Instrument Sans',sans-serif;
  --bodyf:'Instrument Sans','Segoe UI',sans-serif;
  --sh-lg:0 30px 70px -18px rgba(19,39,46,.22);
  --sh-md:0 16px 40px -10px rgba(19,39,46,.13);
  --sh-sm:0 6px 18px rgba(19,39,46,.07);
  /* aliassen voor legacy variabele-namen */
  --primary:var(--petrol);
  --primary-dark:var(--ink);
  --accent:var(--red);
  --accent-dark:var(--red-deep);
  --text:#22333a;
  --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:#cfd8d5;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:rgba(250,249,246,.9);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(--red);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:#31444a;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(--red);border-color:var(--red)}
.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,#d31d36,var(--red) 55%,var(--red-deep));color:#fff;padding:12px 20px;border:0;box-shadow:0 10px 22px -6px rgba(196,23,47,.4)}
.main-nav .call-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -6px rgba(196,23,47,.5);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(--red)}
.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(--petrol)}

/* ---------- Hero (licht, premium) ---------- */
.hero{background:var(--canvas);color:var(--ink);padding:70px 0 0;position:relative;overflow:hidden;z-index:1}
.hero.simple{padding:56px 0 0}
/* grachtengevel-silhouet onderaan elke hero */
.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 40 L60 40 L60 26 L90 12 L120 26 L120 40 L180 40 L180 20 Q210 4 240 20 L240 40 L300 40 L300 30 L330 30 L330 16 L360 6 L390 16 L390 30 L420 30 L420 40 L480 40 L480 24 L510 24 Q525 8 540 24 L570 24 L570 40 L630 40 L630 18 L665 8 L700 18 L700 40 L760 40 L760 28 L790 28 L790 14 Q810 2 830 14 L830 28 L860 28 L860 40 L920 40 L920 22 L950 10 L980 22 L980 40 L1040 40 L1040 30 L1070 30 L1070 18 Q1090 4 1110 18 L1110 30 L1140 30 L1140 40 L1200 40 L1200 24 L1235 12 L1270 24 L1270 40 L1330 40 L1330 28 Q1355 10 1380 28 L1380 40 L1440 40 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 40 L60 40 L60 26 L90 12 L120 26 L120 40 L180 40 L180 20 Q210 4 240 20 L240 40 L300 40 L300 30 L330 30 L330 16 L360 6 L390 16 L390 30 L420 30 L420 40 L480 40 L480 24 L510 24 Q525 8 540 24 L570 24 L570 40 L630 40 L630 18 L665 8 L700 18 L700 40 L760 40 L760 28 L790 28 L790 14 Q810 2 830 14 L830 28 L860 28 L860 40 L920 40 L920 22 L950 10 L980 22 L980 40 L1040 40 L1040 30 L1070 30 L1070 18 Q1090 4 1110 18 L1110 30 L1140 30 L1140 40 L1200 40 L1200 24 L1235 12 L1270 24 L1270 40 L1330 40 L1330 28 Q1355 10 1380 28 L1380 40 L1440 40 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(--red);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(--petrol);border-radius:999px;padding:8px 16px}
.hero .eyebrow:before{content:"×××";color:var(--red);font-weight:800;letter-spacing:.03em}
.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(--petrol);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,#d31d36,var(--red) 55%,var(--red-deep));color:#fff;box-shadow:0 12px 26px -6px rgba(196,23,47,.42)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -6px rgba(196,23,47,.5)}
.btn.primary.light{background:#fff;color:var(--petrol-deep);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.btn.secondary{border:1.5px solid #cdd6d2;color:var(--ink);background:rgba(255,255,255,.65)}
.btn.secondary:hover{border-color:var(--petrol);color:var(--petrol);transform:translateY(-2px)}
.cta .btn.secondary,.hero.dark .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;border-top:5px solid var(--red);position:relative}
.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(--petrol-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(--petrol-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(--red);box-shadow:0 0 0 4px rgba(196,23,47,.16);animation:vpulse 1.8s infinite}
@keyframes vpulse{50%{box-shadow:0 0 0 7px rgba(196,23,47,.07)}}
.price-float{position:absolute;right:-12px;top:-16px;background:#fff;border-radius:16px;padding:16px 20px;box-shadow:var(--sh-md);border-top:4px solid var(--red);z-index:3}
.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(--petrol);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(--petrol-deep)}
.content p{margin:0 0 18px;color:#2c3b41}
.content a,.section p a{color:var(--petrol);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);border-color:#d8ddd6}
.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(--petrol);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(--petrol);color:var(--petrol)}
.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(--petrol);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:#fdf8ee}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0}
.pricing-grid strong{display:block;color:var(--petrol);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(--red);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 (petrol paneel) ---------- */
.cta{background:transparent;padding:56px 0}
.cta .wrap{background:radial-gradient(ellipse at 15% 15%,rgba(255,255,255,.08),transparent 45%),linear-gradient(160deg,#11626e,var(--petrol-deep));color:#fff;border-radius:26px;padding:52px;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.cta .wrap:before{content:"×××";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:#b7d6d3}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#b8c3bf;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:#dde4e1}
.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:#93a09b}

/* ---------- 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:rgba(217,164,65,.22);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:#33443f;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(--petrol);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(--petrol)}
.review-cta-box{background:linear-gradient(160deg,#11626e,var(--petrol-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:#b7d6d3}
.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}
.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,#11626e,var(--petrol-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(--petrol);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:#39464c;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:#ffe3b0;color:#ffe3b0}
.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(--petrol);color:var(--petrol);background:#fff}
.price-card-cta .btn.outline-green:hover{background:var(--mist)}
.service-price-card.featured .btn{background:#fff;color:var(--petrol-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(--petrol)}
.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(--petrol)}
.choice-card.bad{border-top:6px solid #cfd4d0}
.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:#39464c;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(--petrol)}
.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:58px;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,#d31d36,var(--red) 60%,var(--red-deep))}
  .sticky-bar .sb-offerte:active{background:var(--red-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:58px}
}

/* ---------- 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(--petrol);outline-offset:1px;border-color:var(--petrol)}
.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(--petrol);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(--petrol);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 .frame{aspect-ratio:16/10}
  .price-float{right:0;top:-14px}
  .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(--petrol);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}
}