:root{
    /* Neutral grey/white brand base */
    --bg-0:#eef1f5;
    --bg-1:#f6f8fb;
    --surface:#ffffff;

    /* Ink / text (navy, from logo) */
    --ink:#1b2150;
    --ink-2:#414a70;
    --ink-3:#6b7292;

    /* Primary accent = logo flame red */
    --accent:#e11414;
    --accent-strong:#c00f0f;
    --accent-ink:#c11212;      /* AA-contrast red for text on white */
    --accent-soft:rgba(225,20,20,.10);
    --grad-warm:linear-gradient(135deg,#D93A0A 0%,#C41414 52%,#A80B0B 100%);

    /* Secondary accent = logo droplet indigo/blue */
    --blue:#2830a0;
    --blue-strong:#1f2685;
    --blue-ink:#2830a0;
    --blue-soft:rgba(40,48,160,.10);

    /* Support (repurposed to brand blue) */
    --green:#2830a0;
    --green-soft:rgba(40,48,160,.10);

    /* Glass */
    --glass:rgba(255,255,255,.62);
    --glass-2:rgba(255,255,255,.45);
    --glass-brd:rgba(255,255,255,.85);
    --glass-line:rgba(15,23,41,.08);
    --shadow-sm:0 1px 2px rgba(15,23,41,.06),0 4px 14px rgba(15,23,41,.06);
    --shadow:0 8px 30px rgba(15,23,41,.10),0 2px 6px rgba(15,23,41,.05);
    --shadow-lg:0 24px 60px rgba(15,23,41,.16),0 6px 18px rgba(15,23,41,.08);

    --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
    --maxw:1160px;
    --nav-h:72px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink-2);
    background:var(--bg-0);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  /* ---------- Decorative background ---------- */
  .bg-wrap{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
      radial-gradient(1200px 700px at 82% -8%, #fff 0%, rgba(255,255,255,0) 60%),
      linear-gradient(180deg,#f2f5f9 0%, #e9edf3 100%);}
  .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
  .orb.a{width:520px;height:520px;top:-140px;right:-80px;background:radial-gradient(circle at 30% 30%,#ffb497,#e1141433)}
  .orb.b{width:460px;height:460px;top:38%;left:-160px;background:radial-gradient(circle at 30% 30%,#bfe0ff,#7fbfff22)}
  .orb.c{width:520px;height:520px;bottom:-180px;right:6%;background:radial-gradient(circle at 40% 40%,#ffc2b2,#2830a01f)}
  .grain{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(15,23,41,.05) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}

  /* ---------- Layout ---------- */
  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
  section{position:relative}
  h1,h2,h3,h4{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);line-height:1.12;margin:0;letter-spacing:-.02em}
  h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800}
  h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:800}
  h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
  p{margin:0}
  a{color:inherit;text-decoration:none}

  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
  .eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-warm)}
  .lead{color:var(--ink-2);font-size:1.06rem;max-width:60ch}

  .section-head{max-width:none;text-align:center;margin:0 auto 46px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .section-head .eyebrow::before{display:none}
  .section-head p{max-width:58ch;margin:0 auto}

  /* ---------- Glass primitives ---------- */
  .glass{
    background:var(--glass);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border:1px solid var(--glass-brd);
    box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
    border-radius:var(--r-lg);
  }
  .glass-sm{
    background:var(--glass-2);
    backdrop-filter:blur(14px) saturate(150%);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    border:1px solid var(--glass-brd);
    box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.7);
    border-radius:var(--r);
  }

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:.98rem;padding:13px 22px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,background .25s ease;min-height:48px;white-space:nowrap}
  .btn svg{width:18px;height:18px}
  .btn-primary{background:var(--grad-warm);color:#fff;box-shadow:0 10px 24px rgba(192,15,15,.32), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(192,15,15,.40), inset 0 1px 0 rgba(255,255,255,.35)}
  .btn-ghost{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:rgba(15,23,41,.16)}
  .btn-lg{padding:16px 28px;font-size:1.05rem;min-height:54px}
  .btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid rgba(225,20,20,.5);outline-offset:2px}

  /* ---------- Navbar ---------- */
  header.nav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:box-shadow .3s ease,background .3s ease}
  header.nav .bar{width:100%;max-width:var(--maxw);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:18px;border-radius:0}
  header.nav.scrolled{background:rgba(246,248,251,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 1px 0 var(--glass-line),0 10px 30px rgba(15,23,41,.06)}
  .brand{display:flex;align-items:center;gap:11px;font-family:"Plus Jakarta Sans";font-weight:800;color:var(--ink);letter-spacing:-.02em;font-size:1.06rem}
  .brand .logo{width:40px;height:40px;border-radius:12px;background:var(--grad-warm);display:grid;place-items:center;box-shadow:0 6px 16px rgba(192,15,15,.32), inset 0 1px 0 rgba(255,255,255,.4);flex:none}
  .brand .logo svg{width:22px;height:22px;color:#fff}
  .brand small{display:block;font-family:"Inter";font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:-2px}
  .brand-logo{height:42px;width:auto;display:block;border-radius:10px;box-shadow:0 2px 10px rgba(27,33,80,.12)}
  .hero-card .photo{margin:-26px -26px 20px;height:200px;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;background:linear-gradient(135deg,#e8ecf2,#f6f8fb)}
  .hero-card .photo img{width:100%;height:100%;object-fit:cover;display:block}
  .feature .visual img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  .feature .visual .tag{z-index:2}
  .feature .visual.infog{background:#fff;border:1px solid var(--glass-line)}
  .feature .visual.infog img.ph{object-fit:contain;padding:18px}
  .badge-card{background:#fff;border:1px solid var(--glass-line);border-radius:12px;padding:6px 10px;display:inline-flex;align-items:center;box-shadow:var(--shadow-sm)}
  .badge-card img{display:block;height:56px;width:auto}
  .badge-card.wide img{height:40px}
  .hero{overflow:visible}
  .hero-bg{position:absolute;top:calc(-1 * var(--nav-h));left:0;right:0;height:860px;z-index:-1;overflow:hidden;pointer-events:none}
  /* .hero-bg img: zie de v5-regel verderop, die positioneert foto en video samen */
  .hero-bg::after{content:"";position:absolute;inset:0;background:
      linear-gradient(90deg, rgba(242,245,249,.96) 0%, rgba(242,245,249,.86) 36%, rgba(242,245,249,.42) 66%, rgba(242,245,249,.18) 100%),
      linear-gradient(180deg, rgba(242,245,249,.38) 0%, rgba(242,245,249,.06) 26%, rgba(240,243,247,.70) 72%, #eef1f5 97%)}
  @media (max-width:960px){.hero-bg{height:640px}.hero-bg::after{background:
      linear-gradient(180deg, rgba(242,245,249,.88) 0%, rgba(242,245,249,.72) 34%, rgba(240,243,247,.85) 70%, #eef1f5 96%)}}
  nav.links{display:flex;align-items:center;gap:2px;margin-left:auto}
  nav.links a{font-family:"Plus Jakarta Sans";font-weight:600;font-size:.88rem;color:var(--ink-2);padding:9px 14px;border-radius:var(--r-pill);transition:color .2s,background .2s}
  nav.links a:hover{color:var(--ink);background:rgba(15,23,41,.05)}
  .nav-cta{display:flex;align-items:center;gap:8px;margin-left:6px}
  .nav-phone{display:inline-flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans";font-weight:700;color:var(--ink);font-size:.94rem;padding:9px 8px}
  .nav-phone svg{width:18px;height:18px;color:var(--accent-ink)}
  .menu-btn{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);align-items:center;justify-content:center;cursor:pointer}
  .menu-btn svg{width:24px;height:24px;color:var(--ink)}

  /* mobile menu */
  .mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(233,237,243,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:calc(var(--nav-h) + 20px) 22px 30px;gap:6px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
  .mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu a{font-family:"Plus Jakarta Sans";font-weight:700;font-size:1.3rem;color:var(--ink);padding:16px 8px;border-bottom:1px solid var(--glass-line)}
  .mobile-menu .btn{margin-top:20px}

  /* ---------- Hero ---------- */
  .hero{padding:54px 0 40px}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
  .hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 6px}
  .chip{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-brd);padding:7px 13px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}
  .chip svg{width:15px;height:15px;color:var(--green)}
  .hero h1{margin-bottom:16px}
  .hero h1 .hl{position:relative;white-space:nowrap;color:var(--accent-ink)}
  .hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
  .hero-proof{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
  .stars{display:flex;gap:2px}
  .stars svg{width:18px;height:18px;color:#f5a623}
  .hero-proof .txt{font-size:.9rem;color:var(--ink-3)}
  .hero-proof .txt b{color:var(--ink)}

  /* hero card */
  .hero-card{padding:26px}
  .hero-card h3{margin-bottom:4px}
  .hero-card .sub{font-size:.9rem;color:var(--ink-3);margin-bottom:18px}
  .quick-list{display:flex;flex-direction:column;gap:12px;margin:0 0 20px;padding:0;list-style:none}
  .quick-list li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--ink-2)}
  .quick-list .tick{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;margin-top:1px}
  .quick-list .tick svg{width:15px;height:15px;color:var(--accent-ink)}
  .hero-card .divider{height:1px;background:var(--glass-line);margin:4px 0 18px}
  .hero-card .callrow{display:flex;align-items:center;gap:12px}
  .hero-card .callrow .who{font-size:.82rem;color:var(--ink-3)}
  .hero-card .callrow .who b{display:block;color:var(--ink);font-size:1rem;font-family:"Plus Jakarta Sans"}

  /* ---------- Cert strip ---------- */
  .certs{padding:26px 0 8px}
  .cert-inner{display:flex;align-items:center;justify-content:center;gap:14px 34px;flex-wrap:wrap;padding:18px 24px}
  .cert-inner .label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  /* Logo's op verzoek drie keer zo groot als eerst (56 en 40 px). Vaste
     hoogte, breedte volgt de verhouding: niets wordt uitgerekt. */
  .cert-inner .badge-card img{height:168px}
  .cert-inner .badge-card.wide img{height:120px}
  /* Met vier grote logo's past het label er niet meer naast: eigen rij
     erboven, dan staan logo's en KvK samen op één regel. */
  .cert-inner .label{flex-basis:100%;text-align:center}
  .cert{display:inline-flex;align-items:center;gap:9px;font-family:"Plus Jakarta Sans";font-weight:700;color:var(--ink);font-size:.96rem}
  .cert svg{width:20px;height:20px;color:var(--accent-ink)}

  /* ---------- Generic section spacing ---------- */
  .band{padding:74px 0}
  .band.tight{padding:56px 0}

  /* ---------- USP grid ---------- */
  .usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .usp{padding:24px}
  .usp .ic{width:50px;height:50px;border-radius:14px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:16px}
  .usp .ic svg{width:24px;height:24px;color:var(--accent-ink)}
  .usp h3{margin-bottom:7px}
  .usp p{font-size:.95rem}
  .usp .metric{font-family:"Plus Jakarta Sans";font-weight:800;font-size:1.7rem;color:var(--ink);letter-spacing:-.02em}

  /* ---------- Services ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .svc{padding:22px;display:flex;flex-direction:column;gap:12px;transition:transform .22s ease,box-shadow .28s ease}
  .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .svc .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad-warm);box-shadow:0 8px 18px rgba(192,15,15,.28), inset 0 1px 0 rgba(255,255,255,.35)}
  .svc .ic svg{width:23px;height:23px;color:#fff}
  .svc h3{font-size:1.06rem}
  .svc p{font-size:.9rem;color:var(--ink-2);flex:1}
  .svc .more{display:inline-flex;align-items:center;gap:6px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:.86rem;color:var(--accent-ink)}
  .svc .more svg{width:15px;height:15px;transition:transform .2s}
  .svc:hover .more svg{transform:translateX(3px)}

  /* ---------- Feature (alternating) ---------- */
  .feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px}
  .feature + .feature{margin-top:22px}
  .feature .visual{position:relative;min-height:290px;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;background:
      radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.7), rgba(255,255,255,.2)),
      var(--grad-warm)}
  .feature.alt .visual{background:
      radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.75), rgba(255,255,255,.15)),
      linear-gradient(135deg,#7f92e0,#2830a0)}
  .feature.alt2 .visual{background:
      radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.8), rgba(255,255,255,.2)),
      linear-gradient(135deg,#9cc3ff,#4f83e0)}
  .feature .visual .glyph{width:120px;height:120px;color:rgba(255,255,255,.95);filter:drop-shadow(0 10px 20px rgba(0,0,0,.18))}
  .feature .visual .tag{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:8px 15px;font-family:"Plus Jakarta Sans";font-weight:700;font-size:.84rem;color:var(--ink);box-shadow:var(--shadow-sm)}
  .feature.alt2 .content{order:-1}
  .feature .content h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:12px}

  /* Vaillant-actie (cashback, 1 oktober t/m 31 december 2026). Het blok neemt
     het turquoise van de Vaillant-campagne over en laat de foto aan de
     linkerkant in die kleur overlopen, zodat het als één geheel leest en niet
     als een losse geplakte banner. Tekst in HTML in plaats van in het beeld:
     scherp op elk scherm, leesbaar op een telefoon en vindbaar. */
  /* Direct onder de keurmerken: minder lucht erboven, zodat de actie bij
     het vertrouwensblok aansluit in plaats van los te zweven. */
  #actie.band{padding-top:22px}
  .actie-kaart{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;border-radius:var(--r-lg);overflow:hidden;
    background:linear-gradient(115deg,#005f53 0%,#006e60 48%,#138f7e 62%,#1f9d8b 100%);
    box-shadow:0 24px 60px rgba(0,95,83,.24),0 6px 18px rgba(15,23,41,.08);color:#fff}
  .actie-tekst{padding:46px 18px 46px 50px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .actie-label{font-family:"Plus Jakarta Sans";font-weight:700;font-size:.98rem;letter-spacing:.03em;color:#fff}
  .actie-tekst h2{color:#fff;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.12}
  .actie-tekst h2 span{white-space:nowrap}
  .actie-tekst p{color:#fff;max-width:44ch;font-size:1.03rem;line-height:1.6}
  .actie-periode{display:flex;align-items:center;gap:9px;font-size:.95rem!important;font-weight:600}
  .actie-periode svg{width:20px;height:20px;flex:none}
  .actie-knop{background:#fff;color:#005f53;margin-top:8px;box-shadow:0 10px 26px rgba(0,40,35,.28)}
  .actie-knop:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,40,35,.34)}
  .actie-beeld{position:relative;min-height:340px}
  .actie-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%);mask-image:linear-gradient(90deg,transparent 0,#000 11%)}
  @media (max-width:760px){
    /* Telefoon: eerst het beeld met de cashbacksticker, dat vloeit onderaan
       over in het turquoise, daarna de tekst en een knop over de volle
       breedte binnen duimbereik. */
    .actie-kaart{grid-template-columns:1fr;background:linear-gradient(180deg,#006e60 0%,#005f53 100%)}
    .actie-beeld{order:-1;min-height:0;aspect-ratio:660/470}
    .actie-beeld img{object-position:50% 0;
      -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
    .actie-tekst{padding:6px 22px 26px;gap:12px}
    .actie-knop{width:100%}
  }
  .feature .content p{margin-bottom:18px}
  .flist{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
  .flist li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;color:var(--ink-2)}
  .flist .tick{flex:none;width:24px;height:24px;border-radius:7px;background:var(--green-soft);display:grid;place-items:center;margin-top:1px}
  .flist .tick svg{width:14px;height:14px;color:var(--green)}

  /* ---------- Process ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
  .step{padding:24px;position:relative}
  .step .n{counter-increment:step;font-family:"Plus Jakarta Sans";font-weight:800;font-size:.9rem;color:#fff;width:38px;height:38px;border-radius:11px;background:var(--grad-warm);display:grid;place-items:center;margin-bottom:15px;box-shadow:0 8px 16px rgba(192,15,15,.28)}
  .step .n::before{content:"0" counter(step)}
  .step h3{font-size:1.05rem;margin-bottom:6px}
  .step p{font-size:.9rem}

  /* ---------- Stats band ---------- */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:34px 30px;text-align:center}
  .stat .num{font-family:"Plus Jakarta Sans";font-weight:800;font-size:clamp(2rem,4vw,2.7rem);letter-spacing:-.03em;color:var(--ink);line-height:1}
  .stat .num .u{color:var(--accent-ink)}
  .stat .lab{font-size:.9rem;color:var(--ink-3);margin-top:6px}

  /* ---------- Reviews ---------- */
  .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .rev{padding:24px;display:flex;flex-direction:column;gap:14px}
  .rev .stars{margin-bottom:2px}
  .rev p{font-size:.98rem;color:var(--ink);line-height:1.6}
  .rev .who{display:flex;align-items:center;gap:12px;margin-top:auto}
  .rev .av{width:42px;height:42px;border-radius:50%;background:var(--grad-warm);color:#fff;display:grid;place-items:center;font-family:"Plus Jakarta Sans";font-weight:700;font-size:1rem;flex:none}
  .rev .who b{display:block;color:var(--ink);font-family:"Plus Jakarta Sans";font-size:.95rem}
  .rev .who span{font-size:.82rem;color:var(--ink-3)}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
  .contact-info{padding:32px;display:flex;flex-direction:column}
  .contact-info h2{margin-bottom:12px}
  .info-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px}
  .info-list li{display:flex;gap:14px;align-items:flex-start}
  .info-list .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center}
  .info-list .ic svg{width:20px;height:20px;color:var(--accent-ink)}
  .info-list .k{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .info-list .v{display:block;font-family:"Plus Jakarta Sans";font-weight:700;color:var(--ink);font-size:1.02rem}
  .info-list .v a:hover{color:var(--accent-ink)}
  .legal{margin-top:auto;padding-top:22px;border-top:1px solid var(--glass-line);font-size:.82rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 18px}
  .legal b{color:var(--ink-2);font-weight:600}

  form.contact-form{padding:32px}
  form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
  .field label{font-family:"Plus Jakarta Sans";font-weight:600;font-size:.86rem;color:var(--ink)}
  .field label .req{color:var(--accent-ink)}
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:.96rem;color:var(--ink);
    background:rgba(255,255,255,.7);border:1px solid var(--glass-line);border-radius:12px;
    padding:12px 14px;transition:border-color .2s,box-shadow .2s,background .2s;min-height:48px;width:100%}
  .field textarea{min-height:112px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(225,20,20,.14)}
  .field .err{font-size:.8rem;color:#c81e1e;display:none}
  .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e0533d;box-shadow:0 0 0 4px rgba(224,83,61,.12)}
  .field.invalid .err{display:block}
  form .consent{font-size:.8rem;color:var(--ink-3);margin:2px 0 16px}
  .form-note{font-size:.82rem;color:var(--ink-3);margin-top:12px;text-align:center}
  /* ---------- Uitwijk als rechtstreeks versturen niet lukt ----------
     Het formulier werkt ook zonder maildienst erachter. Lukt het versturen
     niet, dan krijgt de bezoeker zijn eigen tekst terug in twee knoppen die
     hem alsnog bij Van den Ende afleveren. Zo raakt een aanvraag nooit kwijt,
     ook niet op de demoversie. */
  .uitwijk-uitleg{margin:0 0 12px;font-size:.88rem;color:var(--ink-2);
    text-align:left;line-height:1.55}
  .uitwijk-knoppen{display:flex;flex-wrap:wrap;gap:10px}
  .uitwijk-knoppen .btn{flex:1 1 150px;min-height:48px}
  /* De vaste balk onderaan is op een telefoon ongeveer 76px hoog. Zonder deze
     marge komt de laatste knop daar deels achter te zitten. */
  #formulier-melding{scroll-margin-bottom:110px;scroll-margin-top:96px}
  @media (max-width:1000px){ .contact-form{padding-bottom:44px} }
  .form-success{display:none;text-align:center;padding:20px;border-radius:var(--r);background:rgba(18,146,79,.12);color:#0b6b3a;font-weight:600;font-family:"Plus Jakarta Sans";margin-top:14px;align-items:center;justify-content:center;gap:10px}
  .form-success svg{width:20px;height:20px}

  /* ---------- Footer ---------- */
  footer{margin-top:20px;padding:52px 0 26px;background:linear-gradient(180deg,transparent,rgba(15,23,41,.03))}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:32px;border-bottom:1px solid var(--glass-line)}
  .foot-grid h4{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;font-weight:700}
  .foot-grid a,.foot-grid p{display:block;color:var(--ink-2);font-size:.94rem;padding:4px 0}
  .foot-grid a:hover{color:var(--accent-ink)}
  .foot-brand p{font-size:.92rem;color:var(--ink-3);max-width:34ch;padding-top:8px}
  .foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;font-size:.85rem;color:var(--ink-3)}

  /* ---------- Floating mobile CTA ---------- */
  .mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:none;gap:10px}
  .mobile-cta .btn{flex:1;box-shadow:var(--shadow-lg)}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:30px}
    .usp-grid,.svc-grid,.steps,.stats,.rev-grid{grid-template-columns:repeat(2,1fr)}
    .feature,.contact-grid,.foot-grid{grid-template-columns:1fr}
    .feature.alt2 .content{order:0}
    .feature .visual{min-height:230px}
    nav.links,.nav-cta{display:none}
    .menu-btn{display:flex}
    .foot-grid{gap:24px}
  }
  @media (max-width:560px){
    .usp-grid,.svc-grid,.steps,.stats,.rev-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(2,1fr)}
    form .row{grid-template-columns:1fr}
    .hero{padding:34px 0 20px}
    .band{padding:56px 0}
    .mobile-cta{display:flex}
    body{padding-bottom:78px}
    .brand small{display:none}
  }

  /* ==========================================================================
     v5-toevoegingen: zelfde tokens, zelfde glasstijl
     ========================================================================== */

  /* ---------- Contrastcorrectie (WCAG AA) ----------
     --ink-3 was #6b7292. Op wit haalde dat 4,72:1, maar op de paginakleur
     (#eef1f5) zakte het naar 4,17:1, onder de 4,5 die AA eist voor kleine
     tekst. Deze tint is nauwelijks van de vorige te onderscheiden en haalt
     4,73:1 op de donkerste achtergrond die op de pagina voorkomt. */
  :root{
    --ink-3:#5F657F;

    /* Knopgradient. Het oorspronkelijke lichtste punt (#ff5a34) haalde 3,10:1
       met witte tekst. Een eerdere poging schoof de stops naar buiten beeld,
       maar de zichtbare hoek werd daarmee #f33c26 en dat is 3,83: nog steeds
       onder de 4,5 die AA eist. Nu is de lichte stop zelf vervangen. Het hele
       verloop is op 51 punten nagerekend en haalt minimaal 4,61 (linksboven)
       oplopend tot 7,3 (rechtsonder). Witte iconen op deze vlakken zijn
       niet-tekstueel en hebben aan 3:1 genoeg, dus die blijven ruim.
       Donkerder mag, lichter niet: #DF3E0B haalt al maar 4,35. */
    --grad-warm:linear-gradient(135deg,#D93A0A 0%,#C41414 52%,#A80B0B 100%);
  }

  /* ---------- Twee cascadefouten ----------
     Twee keer dezelfde oorzaak: een selector met een klasse en een element
     erachter weegt zwaarder dan een selector met alleen een klasse. De
     kleuren klopten allebei, ze verloren alleen de voorrangsstrijd.

       .mobile-menu a      (0,1,1)  verslaat  .btn-primary  (0,1,0)
       .rev .who span      (0,2,1)  verslaat  .rev .av      (0,2,0)

     Gevolg was donkernavy tekst op de rode offerteknop, 1,97, en grijsblauwe
     initialen op een rode cirkel, 1,13. Hieronder wordt de klasse zelf
     zwaarder gemaakt in plaats van de bestaande regels te slopen: die doen
     voor de gewone menulinks en de naamregels precies wat ze moeten doen. */
  .mobile-menu a.btn-primary{color:#fff}
  .rev .who span.av{color:#fff}

  /* ---------- Overloop op smalle schermen ----------
     Op 320px werd de pagina 352px breed en moest je horizontaal scrollen.
     Oorzaak: .contact-info staat in een raster en krijgt daarmee
     min-width:auto, dus hij weigert kleiner te worden dan zijn breedste
     ondeelbare inhoud. Dat is het e-mailadres, een woord van 20 tekens dat
     nergens mag afbreken. min-width:0 geeft hem toestemming om te krimpen en
     overflow-wrap zorgt dat het adres dan ook echt afbreekt. Gemeten op 320,
     390, 768, 1380 en 1920. */
  .contact-info{min-width:0}
  .info-list .v{overflow-wrap:anywhere}

  /* Zelfde verhaal bij de tariefkaarten: min-width:auto plus een knop met
     white-space:nowrap. De knoptekst "Servicecontract aanvragen" bepaalde
     daarmee de minimale kaartbreedte en die paste niet op 320px. Onder 360px
     mag de knoptekst afbreken; daarboven blijft hij op een regel, want daar
     past hij en oogt het rustiger. */
  /* ---------- Kernpunten op de dienstenkaarten ----------
     .svc p had flex:1 om de link naar onderen te duwen; met een lijst erbij
     hoort die rol bij de lijst, anders valt er een gat tussen tekst en punten.
     :has() beperkt dat tot kaarten met zo'n lijst, zodat de laatste kaart
     zonder lijst blijft werken zoals hij deed.
     Contrast op wit: ink-2 8,61, ink-3 5,75, accent-ink 6,24. */
  .svc-body:has(.svc-punten) > p{flex:0 0 auto}
  .svc-punten{list-style:none;margin:0;padding:0;flex:1;display:flex;
    flex-direction:column;gap:5px}
  .svc-punten li{position:relative;padding-left:17px;font-size:.84rem;
    color:var(--ink-2);line-height:1.4}
  .svc-punten li::before{content:"";position:absolute;left:2px;top:.52em;
    width:6px;height:6px;border-radius:50%;background:var(--accent)}

  /* Een open punt is zichtbaar onaf. Liever een lezer die ziet dat er iets
     ontbreekt dan een lezer die een plaatshouder voor een feit aanziet. */
  .svc-punten li.open{color:var(--accent-ink);font-style:italic}
  .svc-punten li.open::before{background:none;border:1.5px dashed var(--accent);
    width:8px;height:8px;left:1px;top:.42em}
  .tarief-lijst li.open-punt{color:var(--accent-ink);font-style:italic;
    padding-left:0;list-style:none}
  .tarief-lijst li.open-punt::before{content:"?";display:inline-flex;
    align-items:center;justify-content:center;width:20px;height:20px;
    margin-right:10px;border:1.5px dashed var(--accent);border-radius:50%;
    font-style:normal;font-weight:700;font-size:.75rem;vertical-align:-4px}

  .svc-photo.wacht,.toestel-beeld.wacht{display:grid;place-items:center;
    background:repeating-linear-gradient(45deg,#eef1f5 0 10px,#e6eaf1 10px 20px)}
  .svc-photo.wacht{aspect-ratio:4/3}

  /* Vier diensten plus een afsluitende kaart is vijf, en dat laat in een raster
     van vier kolommen een losse kaart achter op de tweede rij. Over de volle
     breedte wordt het een afsluitende band. Onder de 760px staat alles toch
     onder elkaar, dus daar verandert er niets. */
  @media (min-width:761px){
    .svc-cta{grid-column:1 / -1}
    .svc-cta .svc-body{align-items:center;text-align:center}
    .svc-cta .svc-body p{max-width:52ch}
  }
  .svc-photo.wacht span,.toestel-beeld.wacht span{
    font-family:"Plus Jakarta Sans";font-weight:700;font-size:.8rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
    background:#fff;border:1.5px dashed var(--ink-3);border-radius:999px;padding:5px 14px}

  /* ---------- Thermostaat onder de ketels ----------
     Eigen blok en geen derde kaart: het ketelraster heeft twee kolommen, dus
     een derde kaart laat een gat vallen, en de foto krijgt hier meer ruimte. */
  .toestel-kop{font-size:1.06rem;margin:34px 0 -4px;color:var(--ink)}
    .toestelblok{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:26px;
    align-items:center;padding:26px 28px;margin-top:20px}
  .toestel-tekst h3{font-size:1.16rem;margin-bottom:10px}
  .toestel-tekst p{font-size:.95rem;color:var(--ink-2);margin:0 0 14px}
  .toestel-beeld{border-radius:var(--r);overflow:hidden;aspect-ratio:3/2;background:#fff}
  /* contain en niet cover: dit zijn productfoto's op een witte ondergrond en
     die staan vierkant in een vak van 4:3. Met cover zou de bovenkant en de
     onderkant van het toestel wegvallen, en juist daar zitten de bedieningen. */
  .toestel-beeld img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
  /* Uitzondering voor een sfeerbeeld: dat is geen uitgeknipt toestel op wit
     maar een opname in een ruimte. Daar hoort geen witte rand omheen en geen
     contain, want dan staat er een vierkante foto met balken in een vak van
     3:2. Vierkant vak, cover, geen opvulling. Het blok staat op
     align-items:center, dus de tekst ernaast blijft gewoon midden staan. */
  .toestel-beeld.sfeer{aspect-ratio:1/1;background:transparent}
  .toestel-beeld.sfeer img{object-fit:cover;padding:0}
  /* Liggende fabrikantbeelden (16:9), zoals de twee Vaillant-ketels van zijn
     oude site. Zelfde verhouding als de bron, dus cover snijdt niets af. */
  .toestel-beeld.breed{aspect-ratio:16/9;background:transparent}
  .toestel-beeld.breed img{object-fit:cover;padding:0}
  @media (max-width:640px){ .toestelblok{grid-template-columns:1fr} }

  .tarief{min-width:0}
  @media (max-width:360px){
    .tarief .btn{white-space:normal}
  }

  /* ---------- Privacyverklaring: inklapbaar ---------- */
  details.privacy{padding:0;overflow:hidden}
  details.privacy > summary{list-style:none;cursor:pointer;padding:20px 26px;
    min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
  details.privacy > summary::-webkit-details-marker{display:none}
  details.privacy > summary h3{margin:0;font-size:1.06rem}
  details.privacy > summary .chev{flex:none;width:22px;height:22px;
    color:var(--accent-ink);transition:transform .25s ease}
  details.privacy[open] > summary .chev{transform:rotate(180deg)}
  .privacy-inhoud{padding:0 26px 24px}
  @media (prefers-reduced-motion:reduce){details.privacy > summary .chev{transition:none}}

  /* ---------- Skip-link (toegankelijkheid) ---------- */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--surface);color:var(--ink);
    font-family:"Plus Jakarta Sans";font-weight:700;padding:14px 20px;border-radius:0 0 var(--r-sm) 0;
    box-shadow:var(--shadow);border:2px solid var(--accent)}
  .skip-link:focus{left:0}

  /* ---------- WhatsApp ---------- */
  .btn-wa{background:#25D366;color:#0b3d20;box-shadow:0 10px 24px rgba(37,211,102,.32), inset 0 1px 0 rgba(255,255,255,.4)}
  .btn-wa:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(37,211,102,.42), inset 0 1px 0 rgba(255,255,255,.4)}
  .btn-wa svg{color:#0b3d20}

  /* ---------- Nav: telefoon als zichtbare knop ---------- */
  .nav-phone{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-pill);
    min-height:44px;padding:9px 16px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .25s ease}
  .nav-phone:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--accent-ink)}
  .nav-wa{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
    background:#25D366;box-shadow:0 8px 18px rgba(37,211,102,.32);transition:transform .18s ease}
  .nav-wa:hover{transform:translateY(-2px)}
  .nav-wa svg{width:22px;height:22px;color:#0b3d20}

  /* De keuzehulp en daarna het hele aanvraagformulier zijn vervallen; hun
     opmaak stond hier. Aanvragen lopen nu via bellen, WhatsApp en e-mail.

     Het contactblok staat weer in twee kolommen met het formulier ernaast, dus
     de noodgreep van toen het formulier weg was (een kolom, begrensd op 780px)
     is hier weggehaald. De basisregel bovenin doet het werk weer. */

  /* ---------- Formulier: honeypot, consent, laadstatus ---------- */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .consent-box{display:flex;gap:11px;align-items:flex-start;margin:4px 0 18px}
  /* 24x24 is het WCAG 2.5.8 (AA) minimum; het bijbehorende <label> is klikbaar
     en een stuk groter, wat het bereik in de praktijk verder vergroot. */
  .consent-box input[type="checkbox"]{flex:none;width:24px;height:24px;min-height:24px;margin-top:1px;
    accent-color:var(--accent);cursor:pointer}
  .consent-box label{font-size:.84rem;color:var(--ink-3);line-height:1.5;cursor:pointer}
  .consent-box a{color:var(--accent-ink);font-weight:600;text-decoration:underline}
  .consent-err{display:none;font-size:.8rem;color:#c81e1e;margin:-12px 0 14px}
  .btn[data-loading="true"]{pointer-events:none;opacity:.75}
  .btn .spin{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
  .btn[data-loading="true"] .spin{display:block}
  .btn[data-loading="true"] .btn-ico{display:none}
  @keyframes spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.btn .spin{animation-duration:2s}}
  .form-success{flex-direction:column;gap:6px}
  .form-success .big{font-size:1.05rem}
  .form-error{display:none;text-align:center;padding:16px;border-radius:var(--r);
    background:rgba(200,30,30,.10);color:#a11414;font-weight:600;font-family:"Plus Jakarta Sans";
    margin-top:14px;font-size:.9rem;line-height:1.5}
  .form-error a{color:#a11414;text-decoration:underline}

  /* ---------- Dienstenkaarten met foto ----------
     Massief wit in plaats van glas: rustiger beeld naast de foto's, en de
     tekst staat op een egale ondergrond in plaats van op doorschijnend glas. */
  .svc{background:#fff;border:1px solid var(--glass-line);border-radius:var(--r-lg);
    overflow:hidden;padding:0;display:flex;flex-direction:column;gap:0;
    box-shadow:var(--shadow-sm);
    transition:transform .22s ease,box-shadow .28s ease}
  .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .svc-photo{aspect-ratio:4/3;overflow:hidden;background:#e8ecf2}
  .svc-photo img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .svc:hover .svc-photo img{transform:scale(1.04)}
  @media (prefers-reduced-motion:reduce){
    .svc,.svc-photo img{transition:none}
    .svc:hover{transform:none}
    .svc:hover .svc-photo img{transform:none}
  }
  .svc-body{padding:0 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
  /* Het icoon schuift over de onderrand van de foto heen. */
  .svc .ic{width:54px;height:54px;border-radius:16px;margin:-27px 0 4px;
    position:relative;z-index:1;flex:none;display:grid;place-items:center;
    background:var(--grad-warm);
    box-shadow:0 8px 18px rgba(192,15,15,.28), inset 0 1px 0 rgba(255,255,255,.35),
               0 0 0 4px #fff}
  .svc .ic svg{width:25px;height:25px;color:#fff}
  .svc h3{font-size:1.12rem;margin:0}
  .svc p{font-size:.93rem;color:var(--ink-2);flex:1;margin:0}
  .svc .more{margin-top:6px}

  /* Laatste kaart: rood, geen foto, inhoud verticaal gecentreerd. */
  .svc-cta{background:var(--grad-warm);border-color:transparent;
    box-shadow:0 16px 34px rgba(192,15,15,.3)}
  .svc-cta .svc-body{padding:28px 24px;justify-content:center;gap:12px}
  .svc-cta .ic-plain{margin:0 0 4px;background:none;box-shadow:none;
    width:40px;height:40px;place-items:start center}
  .svc-cta .ic-plain svg{width:32px;height:32px;color:#fff}
  .svc-cta h3{color:#fff}
  .svc-cta p{color:#fff;flex:0}
  .svc-cta-btn{background:#fff;color:var(--accent-ink);align-self:flex-start;
    margin-top:8px;box-shadow:0 8px 20px rgba(0,0,0,.14)}
  .svc-cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.2)}

  /* ---------- CV-ketelmodellen ---------- */
  .ketel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
    max-width:820px;margin:0 auto}
  .ketel{padding:26px 28px}
  .ketel-merk{display:inline-block;font-family:"Plus Jakarta Sans";font-weight:700;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--blue-ink);margin-bottom:6px}
  .ketel h3{font-size:1.16rem;margin-bottom:16px}
  .ketel .tarief-lijst{margin-bottom:0}
  @media (max-width:640px){ .ketel-grid{grid-template-columns:1fr} }

  /* ---------- Onderhoud: tariefkaarten ---------- */
  .tarief-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
    max-width:900px;margin:0 auto}
  .tarief{--kaartrand:30px;--kaartkop:30px;
    padding:var(--kaartkop) var(--kaartrand) 28px;
    display:flex;flex-direction:column;position:relative;overflow:hidden}
  .tarief h3{font-size:1.24rem;margin-bottom:4px}
  .tarief-sub{font-size:.9rem;color:var(--ink-3);margin-bottom:20px}
  .tarief-prijs{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .tarief-prijs .bedrag{font-family:"Plus Jakarta Sans";font-weight:800;
    font-size:2.4rem;letter-spacing:-.03em;color:var(--ink);line-height:1}
  .tarief-prijs .per{font-size:.92rem;color:var(--ink-3);font-weight:600}
  .tarief-cond{font-size:.83rem;color:var(--ink-3);margin:8px 0 20px}
  .tarief-lijst{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;flex:1}
  .tarief-lijst li{display:flex;gap:11px;align-items:flex-start;
    font-size:.95rem;color:var(--ink-2)}
  .tarief-lijst .tick{flex:none;width:24px;height:24px;border-radius:7px;
    background:var(--accent-soft);display:grid;place-items:center;margin-top:1px}
  .tarief-lijst .tick svg{width:14px;height:14px;color:var(--accent-ink)}
  .tarief .btn{width:100%}
  .tarief.uitgelicht{border-color:rgba(225,20,20,.42);
    box-shadow:var(--shadow),0 0 0 1px rgba(225,20,20,.18)}
  .tarief-vlag{display:block;text-align:center;
    margin:calc(var(--kaartkop) * -1) calc(var(--kaartrand) * -1) 22px;
    padding:11px var(--kaartrand);background:var(--grad-warm);
    color:#fff;font-family:"Plus Jakarta Sans";font-weight:700;font-size:.78rem;
    letter-spacing:.06em;text-transform:uppercase;line-height:1.35;
    text-wrap:balance}
  /* De kaart zonder band krijgt exact dezelfde band, alleen onzichtbaar. Zo
     staan de twee koppen op gelijke hoogte en blijft dat kloppen als de tekst
     verandert of naar twee regels loopt. Dezelfde klasse dus, en geen tweede
     regelset die uit de pas kan lopen: dat ging hier al een keer mis. */
  .tarief-grid{align-items:start}
  .tarief-vlag.leeg{visibility:hidden}
  .tarief-noot{text-align:center;font-size:.83rem;color:var(--ink-3);margin-top:18px}
  @media (max-width:760px){
    .tarief-grid{grid-template-columns:1fr}
    .tarief{--kaartrand:24px;--kaartkop:26px;padding:var(--kaartkop) var(--kaartrand) 24px}
    /* Onder elkaar hoeft er niets uitgelijnd te worden, dus dan is de
       onzichtbare band alleen 57px verspilde hoogte op een telefoon. */
    .tarief-vlag.leeg{display:none}
  }

  /* ---------- Bedrijfsbus / werkgebied ----------
     De tekst staat onder de foto, niet eroverheen: de bus is wit en vult het
     kader, dus een doorschijnend paneel erop zou nauwelijks leesbaar zijn en
     zou bovendien de achterkant van het voertuig wegnemen. */
  .bus-band{background:#fff;border:1px solid var(--glass-line);
    border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
  .bus-band > img{display:block;width:100%;height:auto;aspect-ratio:7/3;object-fit:cover}
  .bus-tekst{display:grid;grid-template-columns:auto 1fr;gap:14px 40px;
    align-items:center;padding:24px 30px}
  .bus-tekst h3{font-size:1.32rem;margin:9px 0 0;white-space:nowrap}
  .bus-tekst p{font-size:.95rem;color:var(--ink-2);margin:0;max-width:62ch}
  @media (max-width:860px){
    .bus-tekst{grid-template-columns:1fr;gap:10px;padding:22px 24px}
    .bus-tekst h3{white-space:normal}
  }
  @media (max-width:560px){
    .bus-band > img{aspect-ratio:16/10}
  }

  /* ---------- Reviews ---------- */
  .rev-cta{padding:30px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
  .rev-cta .g-mark{display:inline-flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans";
    font-weight:700;color:var(--ink);font-size:1.02rem}
  .rev-cta .g-mark svg{width:24px;height:24px;flex:none}
  .rev-cta p{max-width:52ch;font-size:.95rem}
  .rev-agg{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
    margin-top:22px;padding:18px 24px;border-radius:var(--r)}
  .rev-agg .score{font-family:"Plus Jakarta Sans";font-weight:800;font-size:2rem;color:var(--ink);line-height:1}
  .rev-agg .meta{font-size:.88rem;color:var(--ink-3)}
  .rev-agg .meta b{color:var(--ink)}
  .rev .src{font-size:.78rem;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px}
  .rev .src svg{width:13px;height:13px;flex:none}
  .rev time{font-size:.78rem;color:var(--ink-3)}

  /* ---------- FAQ ---------- */
  .faq-list{display:grid;gap:12px;max-width:820px;margin:0 auto}
  .faq{padding:0;overflow:hidden;border-radius:var(--r)}
  .faq summary{list-style:none;cursor:pointer;padding:18px 22px;min-height:56px;display:flex;
    align-items:center;justify-content:space-between;gap:16px;font-family:"Plus Jakarta Sans";
    font-weight:700;font-size:1rem;color:var(--ink);transition:background .2s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary:hover{background:rgba(255,255,255,.4)}
  .faq summary .chev{flex:none;width:22px;height:22px;color:var(--accent-ink);transition:transform .25s ease}
  .faq[open] summary .chev{transform:rotate(180deg)}
  .faq .a{padding:0 22px 20px;font-size:.96rem;color:var(--ink-2);line-height:1.65}
  .faq .a p + p{margin-top:10px}
  @media (prefers-reduced-motion:reduce){.faq summary .chev{transition:none}}

  /* ---------- Privacyverklaring ---------- */
  .privacy{padding:26px 28px;max-width:820px;margin:0 auto;font-size:.9rem}
  .privacy h3{margin-bottom:10px}
  .privacy p + p{margin-top:10px}
  .privacy ul{margin:10px 0 0;padding-left:20px}
  /* Algemene voorwaarden: zestien artikelen met genummerde leden. De brontekst
     is letterlijk overgenomen en wordt hier alleen anders opgemaakt. */
  .privacy h4{font-family:"Plus Jakarta Sans";font-weight:700;font-size:.98rem;
    margin:22px 0 8px;color:var(--ink)}
  .privacy h4:first-of-type{margin-top:16px}
  .av-bron{font-size:.86rem;color:var(--ink-3);border-left:3px solid var(--glass-line);
    padding-left:12px;margin-bottom:6px}
  .av-leden{margin:8px 0 0;padding-left:22px}
  .av-leden li{margin-bottom:8px;font-size:.93rem;color:var(--ink-2);line-height:1.6}
  .av-leden li::marker{color:var(--accent-ink);font-weight:700}
  /* Subleden houden hun eigen letter uit het brondocument. Een automatische
     lijst zou h, i en j hernummeren naar a, b en c, en dan klopt een verwijzing
     als "artikel 7 lid 3 sub h" niet meer. */
  /* Springlijst: 24.000 tekens voorwaarden zijn zonder ingang onvindbaar. */
  .av-index{display:flex;flex-wrap:wrap;gap:6px 8px;margin:4px 0 18px;
    padding-bottom:16px;border-bottom:1px solid var(--glass-line)}
  /* 44px hoog: het zijn zeventien knoppen naast elkaar en die worden met een
     duim bediend. Met alleen padding werden ze 24px; dat haalt WCAG 2.5.8 wel,
     maar niet de 44 die wij zelf aanhouden. */
  .av-index a{display:inline-flex;align-items:center;min-height:44px;
    font-size:.82rem;color:var(--ink-2);background:#f1f4f8;
    border:1px solid var(--glass-line);border-radius:999px;padding:0 14px;
    text-decoration:none;line-height:1.3}
  .av-index a:hover,.av-index a:focus-visible{color:var(--accent-ink);
    border-color:var(--accent);background:#fff}
  /* Een aangesprongen artikel komt niet onder de vaste balk terecht. */
  .privacy h4{scroll-margin-top:96px}
  .av-leden > li > p{margin:0 0 6px}
  .av-sub{list-style:none;margin:6px 0 10px;padding-left:0}
  .av-sub li{position:relative;padding-left:26px;margin-bottom:6px;
    font-size:.93rem;color:var(--ink-2);line-height:1.6}
  .av-letter{position:absolute;left:0;top:0;font-weight:700;color:var(--accent-ink)}
  .privacy li{margin-bottom:5px}

  /* ---------- Hero-video ----------
     Video en foto liggen op elkaar; de bestaande dubbele gradient (::after)
     blijft ongewijzigd en komt er met z-index:2 overheen. */
  .hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 70%;display:block}
  .hero-bg video{z-index:1}
  .hero-bg::after{z-index:2}
  /* Onder 960px alleen de posterfoto, er wordt dan niets aan video geladen */
  @media (max-width:960px){.hero-bg video{display:none}}

  /* ---------- Mobiele sticky balk: 3 paden ---------- */
  .mobile-cta .btn{min-height:52px;padding:12px 14px;font-size:.92rem}
  .mobile-cta .btn svg{width:20px;height:20px}

  /* ---------- Toegankelijkheid: raakoppervlak ---------- */
  /* nowrap: "Veelgestelde vragen" brak in de compacte balk over twee regels,
     waardoor die link 68px hoog werd en de balk scheef trok. */
  nav.links a{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;padding-left:9px;padding-right:9px}
  header.nav .brand{min-height:44px}
  .svc .more{min-height:44px;align-items:center}
  .foot-grid a{min-height:44px;display:flex;align-items:center}
  .foot-grid .foot-brand a{min-height:0}

  /* ---------- Navigatiebalk: tussenstanden ----------
     De balk is nooit breder dan 1160px (--maxw) en moet daar met alles in
     passen: logo, zeven links en WhatsApp/telefoon/offerte. De hamburger kwam
     eerst pas onder 960px, waardoor hij tussen 960 en 1130px niet paste en
     "Gratis offerte" buiten beeld viel. Dat is precies de breedte van een iPad
     liggend en van kleinere laptops.

     Sinds 26 september staat "Over ons" in het menu, het zevende item. Met de
     oude maten had de balk toen 1207px nodig en stak de offerteknop 47px uit
     de balk, ook op een groot scherm. Daarom zijn de links iets compacter
     (.88rem, 9px opzij, 2px ertussen) en begint de compacte stand hieronder
     bij 1180px in plaats van 1150px. Gemeten na de wijziging, als ruimte
     tussen het logo en de eerste link: op volle breedte 26px, in de compacte
     stand op 1001px 21px. Daaronder neemt de hamburger het over. */

  /* 1001-1180px: compacte balk. Het telefoonnummer wordt een icoon (scheelt
     ruim 100px) en de links komen dichter op elkaar. */
  @media (max-width:1180px) and (min-width:1001px){
    nav.links{gap:0}
    nav.links a{padding-left:7px;padding-right:7px}
    .nav-phone .nr{display:none}
    .nav-phone{width:44px;padding:9px;justify-content:center}
    .nav-phone svg{width:20px;height:20px}
    .nav-cta{gap:8px;margin-left:6px}
  }

  /* Onder 1000px de hamburger. Alleen de navigatie schakelt hier om; de
     overige regels op 960px (features, hero, video) blijven ongemoeid. */
  @media (max-width:1000px){
    nav.links,.nav-cta{display:none}
    .menu-btn{display:flex;margin-left:auto}
  }
  @media (max-width:560px){
    .rev-agg{gap:12px;padding:16px}
  }

  /* ==========================================================================
     MOBIEL: korter, maar niet minder duidelijk
     Op een telefoon scrolt niemand door toelichtende alinea's. De koppen,
     foto's, prijzen en contactknoppen blijven; de uitleg eromheen gaat weg.
     ========================================================================== */
  .alleen-mobiel{display:none}
  @media (max-width:760px){
    .niet-mobiel{display:none}
    .alleen-mobiel{display:inline}
    /* toelichtende alinea onder elke sectiekop */
    .section-head p{display:none}
    .section-head{margin-bottom:30px;gap:10px}
    /* inleidende alinea van de featureblokken; de opsomming eronder blijft */
    .feature .content > p{display:none}
    .feature .content h2{margin-bottom:16px}
    /* iets compactere secties */
    .band{padding:44px 0}
    .band.tight{padding:34px 0}
    .feature{padding:22px}
    .feature + .feature{margin-top:16px}
    .feature .visual{min-height:170px}

    /* Dienstenkaarten liggend: foto links, tekst rechts. Acht staande kaarten
       met een 4:3-foto namen 4,6 schermen in beslag; zo passen ze op ruim de
       helft, terwijl elke dienst nog steeds zijn eigen foto houdt. */
    .svc{flex-direction:row;align-items:stretch}
    .svc-photo{flex:0 0 38%;aspect-ratio:auto;min-height:118px}
    .svc-photo img{height:100%}
    .svc-body{padding:14px 16px;justify-content:center;gap:5px}
    .svc .ic{display:none}          /* de foto is hier het beeldmerk */
    .svc h3{font-size:1.02rem}
    .svc p{font-size:.87rem;flex:0}
    .svc .more{margin-top:4px;font-size:.84rem}
    /* de rode kaart heeft geen foto en blijft staand */
    .svc-cta{flex-direction:column}
    .svc-cta .ic{display:grid}
    .svc-cta .svc-body{padding:24px 20px}

  }

  /* ==========================================================================
     MOBIELE AFRONDING
     ========================================================================== */

  /* De sticky balk stopte op 560px, terwijl de navigatie al vanaf 1000px een
     hamburger is. Daartussen had de bezoeker geen enkele zichtbare actieknop
     meer: geen "Gratis offerte", geen bellen, geen WhatsApp. Nu loopt de balk
     door tot dezelfde grens als het hamburgermenu. */
  @media (max-width:1000px){
    .mobile-cta{display:flex}
    body{padding-bottom:82px}
  }

  /* Micro-labels waren 11,5px; op een aanraakscherm is dat aan de krappe kant.
     Grens op 1000px: hetzelfde punt waar het hamburgermenu begint, dus overal
     waar met een duim bediend wordt. */
  /* Deze twee gelden overal: 11,5px is ook op een groot scherm klein. */
  .ketel-merk{font-size:.78rem}
  .tarief-vlag{font-size:.82rem}
  @media (max-width:1000px){
    /* Het telefoonnummer en het e-mailadres in de gegevenslijst waren 21px
       hoog. Links midden in een zin mogen onder de 24px van WCAG 2.5.8 blijven,
       maar dit zijn losstaande waarden en die uitzondering geldt daar niet.
       Grens op 1000px: hetzelfde punt waar het hamburgermenu begint, dus overal
       waar met een duim bediend wordt. Met alleen padding werden ze 37px: dat
       haalt de 24px van 2.5.8 wel, maar niet de 44px die wij zelf aanhouden.
       Vandaar inline-flex met een min-height; inline-block negeert min-height
       niet, maar de regelhoogte bepaalt dan de uitlijning en dat oogt scheef. */
    .info-list .v a{display:inline-flex;align-items:center;min-height:44px;padding:5px 0}
  }

  /* ==========================================================================
     HERO OP DE TELEFOON: KORTER, ZODAT DE BUS BOVEN DE VOUW KOMT
     ==========================================================================
     Op 390x660 begon de buskaart pas op 817px, ruim 150px onder de vouw. De
     bezoeker kreeg dus alleen tekst te zien voordat er iets van het bedrijf
     zelf in beeld kwam. De twee blokken die hieronder verdwijnen staan allebei
     al ergens anders op datzelfde scherm, dus er gaat geen informatie verloren.
     ========================================================================== */
  @media (max-width:760px){

    /* De WhatsApp- en belknop staan permanent in de vaste balk onderaan het
       scherm. Twee keer dezelfde actie kost hier 149px hoogte. */
    .hero-cta .btn-wa,
    .hero-cta .btn-ghost{display:none}
    .hero-cta{margin-top:20px}
    .hero-cta .btn-primary{width:100%;justify-content:center}

    /* De drie chips passen op deze breedte niet naast elkaar en vallen dus elk
       op een eigen regel: samen 131px. De kaart eronder belooft in zijn
       vinkjeslijst al hetzelfde, en overtuigender. */
    .hero-badges{display:none}

    .hero{padding-top:22px}
    .hero-grid{gap:22px}
    /* De h1 draagt zijn marge als inline-stijl, dus die wint het van een
       gewone regel. Vandaar !important; er is hier geen nettere ingang. */
    .hero h1{margin-top:8px !important}
  }

  /* Op telefoonbreedte liep "Duurzaam verwarmen," net niet op een regel, dus
     kostte de kop drie regels in plaats van twee. Een paar punt kleiner lost
     dat op zonder dat de kop aan kracht inlevert. */
  @media (max-width:440px){
    .hero h1{font-size:1.85rem;line-height:1.14}
  }

  /* ==========================================================================
     MOBIEL DIEET
     ==========================================================================
     De pagina was op 390x660 bijna 15000px lang: 22,7 schermen. De klacht was
     niet dat het te lang duurde, maar dat je vergat waar je naar keek. Dat komt
     door herhaling: vijf secties beloven dezelfde drie dingen, en drie grote
     featureblokken hebben exact dezelfde opbouw als de dienstkaarten erboven.

     Alles wat hieronder verdwijnt, staat elders op diezelfde pagina nog. Er
     gaat geen belreden, geen telefoonnummer en geen prijs van het scherm af.
     Desktop blijft ongemoeid: dit staat allemaal binnen de mediaquery.
     ========================================================================== */
  @media (max-width:760px){

    /* Van de twee overgebleven featureblokken blijft op een telefoon de
       waterontharder over. Blok 1 herhaalt de dienstkaart CV-ketels plus de
       cv-ketelsectie plus de onderhoudssectie; de waterontharder legt als enige
       uit wat het product doet. Het derde blok is vervallen toen zonnepanelen
       van de site gingen. */
    .feature:not(.alt2){display:none}

    /* Drie kaarten die geen dienst, geen prijs en geen telefoonnummer noemen.
       "CO-gecertificeerd" staat verderop nog vijf keer: in de hero-eyebrow, in
       de keurmerkstrip, in de vinkjes van beide tariefkaarten en in de footer. */
    #voordelen{display:none}

    /* Het stappenplan telt pas nadat iemand gebeld heeft, en de belofte erin
       (binnen 1 werkdag, heldere prijsopgave) staat al in de herokaart, het
       contactblok en de FAQ. Het menu-item verdwijnt mee, anders wijst de
       hamburger naar een anker dat niet in beeld te krijgen is. */
    #werkwijze{display:none}

    /* Dezelfde busfoto als in de herokaart, en de plaatsnamen staan drie regels
       verderop in het contactblok en in de FAQ. */
    #werkgebied{display:none}

    /* Van drie reviewkaarten blijft de eerste over. Het gemiddelde staat er nu
       boven en dekt alle vijf de beoordelingen, dus de dekking blijft voller
       dan wat drie losse kaarten laten zien. */
    #revGrid .rev:nth-child(n+2){display:none}

    /* Tien ankerlinks die het hamburgermenu herhalen. Wie hier onderaan komt
       wil bellen, niet terugspringen. Merkblok en contactkolom blijven staan. */
    .foot-grid > div:nth-child(2),
    .foot-grid > div:nth-child(3){display:none}
    /* De links die blijven staan waren met padding:4px zo'n 30px hoog. Dat is
       met een duim aan de krappe kant. */
    .foot-grid a{padding:9px 0}

    /* Het menu-item Werkwijze wees naar een sectie die hierboven op mobiel is
       verborgen: tikken leverde een sprong naar niets op. Het item blijft wel
       in de HTML staan, want tussen 761px en 1000px is het hamburgermenu er al
       terwijl de sectie daar gewoon zichtbaar is. */
    .mobile-menu a[href="#werkwijze"]{display:none}

    /* De vinkjeslijst in de herokaart is generieke belofte die eronder nog eens
       wordt gedaan; de knop eronder is de derde route naar hetzelfde #contact. */
    .hero-card .quick-list{display:none}
    .callrow.mob-weg{display:none}

    /* De keurmerkstrip iets compacter, maar het label "Erkend & gecertificeerd"
       blijft staan: dat is de enige tekst die de drie logo's duidt, en hij
       landt op scherm 2, precies waar het vertrouwenssignaal moet vallen. */
    .cert-inner{gap:12px 20px}
    /* Op een telefoon past een breed logo van 120 px hoog niet naast de
       rand; dan schaalt het mee met het scherm, in dezelfde verhouding. */
    .cert-inner .badge-card.wide img{height:auto;max-width:calc(100vw - 104px)}

    /* Na het schrappen van vier secties is de ruimte tussen de banden ruimer
       dan nodig. */
    .band{padding:32px 0}
    .band.tight{padding:24px 0}

    /* De opkomanimatie houdt op een telefoon structureel de onderrand van het
       scherm leeg. Dat kost juist oriëntatie: je ziet niet wat er aankomt. */
    .reveal{opacity:1;transform:none}
  }

  /* ---------- Dienstpagina's en Over ons ----------
     Vijf losse pagina's (vier diensten en Over ons) met dezelfde bouwstenen
     als de voorpagina. Alleen wat hier echt anders is, staat hieronder. */

  /* Kruimelpad. Klein, rustig, en op mobiel even goed aan te tikken als op
     een muis: de link krijgt verticale ruimte zodat hij de 24 px van
     WCAG 2.5.8 haalt zonder dat het opvalt. */
  .kruimel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;
    color:var(--ink-2);margin:0 auto 22px;max-width:62ch}
  /* 44 px hoog en breed genoeg om aan te tikken. De negatieve marge houdt
     de tekst op zijn plek, zodat het kruimelpad er niet opgeblazen uitziet. */
  .kruimel a{color:var(--ink-2);text-decoration:none;padding:11px 8px;margin:-11px -8px;
    border-bottom:1px solid transparent}
  .kruimel a:hover,.kruimel a:focus-visible{color:var(--accent-ink);border-bottom-color:currentColor}
  .kruimel span[aria-current]{color:var(--ink);font-weight:600}

  /* Paginakop. Bewust NIET .section-head: die verbergt zijn alinea onder
     760 px, en dat is precies de zin die op een dienstpagina uitlegt waar de
     pagina over gaat. Hier blijft hij staan. */
  /* Gecentreerde kolom, tekst links uitgelijnd. Links uitlijnen leest
     prettiger, maar een kolom tegen de linkerrand laat op een breed scherm
     de halve pagina leeg. */
  .dienst-kop{max-width:62ch;margin-inline:auto}
  .dienst-kop h1{margin:0 0 14px}
  .dienst-kop .lead{margin:0 0 24px}
  .dienst-acties{display:flex;flex-wrap:wrap;gap:12px}

  /* Drie stappen in plaats van vier. .steps staat vast op vier kolommen. */
  .steps.drie{grid-template-columns:repeat(3,1fr)}
  @media (max-width:900px){ .steps.drie{grid-template-columns:1fr} }

  /* Lopende tekst op leesbare breedte. */
  .dienst-tekst{max-width:66ch;margin-inline:auto}
  .dienst-tekst h2{margin:0 0 14px}
  .dienst-tekst p{margin:0;color:var(--ink-2)}

  /* Afsluitende oproep. */
  .dienst-slot{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
  .dienst-slot h2{margin:0}
  .dienst-slot p{max-width:52ch;margin:0;color:var(--ink-2)}

  /* Redenen voor onderhoud: zes punten met een vette kop en een zin erachter,
     in dezelfde vinkjeslijst als de tarieven. */
  .redenen li strong{color:var(--ink)}

  /* Keurmerken onder de redenen, zoals op de oude site: de drie logo's op een
     rij en de rode balk eronder. De band erboven levert al de ruimte, dus deze
     band begint zonder eigen bovenruimte en sluit zo direct aan. */
  .keurmerk-band{padding-top:0}
  .keurmerken{max-width:66ch;margin-inline:auto}
  .keurmerk-rij{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px}
  .keurmerk-rij .badge-card img{height:64px}
  .keurmerk-rij .badge-card.wide img{height:46px}
  .keurmerk-balk{margin:18px 0 0;padding:18px 22px;border-radius:var(--r);background:var(--grad-warm);
    color:#fff;text-align:center;font-weight:500;font-size:.98rem;line-height:1.55;box-shadow:var(--shadow-sm)}

  /* Over ons: de foto naast de tekst, op een smal scherm eronder. Geen witte
     rand en geen contain zoals bij een productfoto: dit is een opname in een
     ruimte en die mag het vak vullen. */
  .portret{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:28px;align-items:center;padding:22px}
  .portret-beeld{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/2}
  .portret-beeld img{width:100%;height:100%;object-fit:cover;display:block}
  .portret-tekst h2{margin:0 0 12px}
  .portret-tekst p{margin:0 0 12px;color:var(--ink-2)}
  .portret-tekst p:last-child{margin-bottom:0}
  @media (max-width:760px){ .portret{grid-template-columns:1fr;padding:16px} }