*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --accent: #0a66c2;        
  --accent-600: #084e99;    
  --yellow: var(--accent);
  --yellow-600: var(--accent-600);
  --hl: #9be7ff;            
  --warm: #ffb703;          
  --ok: #059669;            
  --ink: #142238;           
  --dark: #232b52;          
  --dark-2: #1a2040;        
  --bg: #eef4fa;            
  --card: #ffffff;
  --line: #d9e3ee;
  --muted: #5b6a70;
  --muted-light: rgba(255, 255, 255, 0.62);
  --green: #059669;         
  --blue: #2c3153;          
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --shadow: 0 12px 36px rgba(20, 28, 58, 0.08);
  --shadow-sm: 0 4px 14px rgba(20, 28, 58, 0.06);
  font-family: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Inter (OFL), sinds 24 okt 2026 in plaats van Figtree (keuze van Quincy):
   één variabel bestand, gewicht 300–800, Nederlandse subset (zelfde tekens als
   de oude Figtree-subset, met → en ≤). De fallback is Arial op de breedte en
   hoogte van Inter, gemeten op de tekst van de site: geen verspringing. */
@font-face { font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/inter-nl-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131-0133, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2264, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 105.18%; ascent-override: 92.1%; descent-override: 22.93%; line-gap-override: 0%; }
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { font-family: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px; }
h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.section-title { font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  margin-bottom: 8px; }
.hl { position: relative; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-yellow { background: var(--hl);
  color: var(--ink);
  padding: 0 .18em; }
.btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 19px 34px;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap; }
.btn:hover {  }
.btn-yellow { background: var(--yellow); color: #fff; }
.btn-yellow:hover { background: var(--yellow-600); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.arrow-link { display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: var(--fs-small);
  transition: gap .15s ease; }
.arrow-link:hover { gap: 12px; }
.arrow-link svg { width: 15px; height: 15px; }
.site-header { position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line); }
.site-header .container { display: flex;
  align-items: center;
  gap: 18px;
  height: 78px; }
.logo { display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.03em; }
.logo .logo-mark { width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--yellow); }
.logo .logo-mark svg { width: 22px; height: 22px; }
.logo b { color: var(--ink); }
.logo span { color: var(--yellow-600); }
.main-nav { margin-left: 4px; }
.main-nav > ul { display: flex; gap: 2px; }
.main-nav > ul > li > a { display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 13px;
  font-weight: 500;
  font-size: .96rem;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .15s ease; }
.main-nav > ul > li > a:hover { background: #f2f2f2; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-phone { display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap; }
.header-phone svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.header-actions .btn { padding: 14px 22px; white-space: nowrap; }
.nav-toggle { display: none;
  width: 44px; height: 44px; flex: none;
  background: var(--ink);
  border: 0; cursor: pointer;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; }
.nav-toggle span { width: 20px; height: 2px; background: #fff; transition: .2s; }
.hero { position: relative;
  background: linear-gradient(180deg, #141a38 0%, #24305e 100%);
  color: #fff;
  overflow: hidden; }
.hero-water { position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(11,17,25,.94) 0%, rgba(11,17,25,.72) 45%, rgba(11,17,25,.35) 100%),
    radial-gradient(140% 120% at 90% 60%, #1d4e89 0%, #1b2a52 45%, #12172e 80%); }
.hero .container { position: relative; z-index: 2; }
.hero-inner { min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 130px;
  max-width: 760px; }
.hero .stars { color: var(--yellow); letter-spacing: 2px; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  margin-bottom: 22px; }
.hero .lead { font-size: 1.18rem;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin-bottom: 34px; }
.hero-video.is-playing { opacity: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 12px;
  background: #fff;
  color: var(--ink);
  padding: 14px 18px;
  font-weight: 600;
  font-size: .95rem;
  min-width: 190px;
  justify-content: space-between;
  transition: transform .15s ease, box-shadow .15s ease; }
.chip:hover { box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.chip svg { width: 15px; height: 15px; opacity: .6; }
.chip.chip-dark { background: var(--ink); color: #fff; }
.chip.chip-dark svg { opacity: .8; }
.section { padding: 84px 0; }
.section-head { display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px; }
.section-head .arrow-link { flex: none; }
.product-card { background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { box-shadow: var(--shadow); }
.product-media { position: relative;
  aspect-ratio: 4 / 3;
  background: #eef3f9;
  display: grid;
  place-items: center;
  overflow: hidden; }
.product-media img.tank-photo { width: 100%; height: 100%;
  object-fit: contain;
  padding: 18px;
  mix-blend-mode: multiply; }
.product-media a.media-link { display: block; width: 100%; height: 100%; }
.product-media a.media-link img { transition: transform .28s ease; }
.product-card:hover .product-media a.media-link img {  }
.product-body h3 a { transition: color .15s ease; }
.product-body h3 a:hover { color: var(--yellow-600); }
.product-badge { position: absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px; }
.product-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.product-body .desc { font-size: var(--fs-small); color: var(--muted);
  margin-bottom: 18px; flex: 1; }
.dark-section { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.dark-section .accent-block { position: absolute; top: 0; left: 0;
  width: 120px; height: 120px; background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%); }
.dark-section .accent-block.br { top: auto; left: auto; right: 0; bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.split { display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center; }
.split-media { position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(155,231,255,.12), transparent 60%),
    radial-gradient(120% 120% at 30% 20%, #1d4e89, #12172e);
  display: grid; place-items: center; }
.split-body h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 22px; }
.split-body p { color: rgba(255,255,255,.72); margin-bottom: 16px; font-size: .98rem; }
.split-body p a, .split-body p b { color: #fff; }
.split-body p a { text-decoration: underline; }
.usp-list { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 30px; }
.usp-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.usp-list .tick { width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--yellow); color: var(--ink);
  display: grid; place-items: center; }
.usp-list .tick svg { width: 13px; height: 13px; }
.sector-card { scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column; }
.sector-media { position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;            
  background: linear-gradient(135deg, #cfe0f2, #a9c4e0);
  display: grid; place-items: center;
  overflow: hidden; }
.sector-media svg { width: 54px; height: 54px; color: rgba(16,22,29,.35); }
.sector-body { padding: 22px 22px 26px; }
.sector-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.sector-body p { font-size: var(--fs-small); color: var(--muted); margin-bottom: 16px; }
.site-footer { background: var(--dark-2); color: rgba(255,255,255,.7); padding: 70px 0 0; }
.footer-brand .logo { color: #fff; margin-bottom: 20px; }
.footer-brand .logo b { color: #fff; }
.footer-brand p { font-size: .9rem; margin-bottom: 18px; max-width: 320px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover { color: #fff; }
.page-hero { background: var(--dark);
  color: #fff;
  padding: 64px 0 60px;
  position: relative;
  overflow: hidden; }
.page-hero::after { content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 85% 0%, rgba(155,231,255,.10), transparent 55%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero .breadcrumb { font-size: var(--fs-small); color: rgba(255,255,255,.55); margin-bottom: 22px; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 18px; max-width: 720px; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 640px; font-size: 1.05rem; }
.catalog { padding: 56px 0 84px; }
.catalog-layout { display: grid; grid-template-columns: 268px 1fr; gap: 34px; align-items: start; }
.catalog-empty { padding: 40px 4px; color: var(--muted); font-size: .98rem; }
.catalog-empty a { color: var(--yellow-600); font-weight: 600; text-decoration: underline; }
.catalog-empty[hidden] { display: none; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cat-tabs a { display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease; }
.cat-tabs a:hover { border-color: var(--ink); }
.cat-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.catalog-main .catalog-toolbar { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 14px; }
.catalog-toolbar .result-count { font-weight: 600; font-size: 1rem; letter-spacing: 0; line-height: 1.4; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
.pagination a { width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-weight: 600; border-radius: 8px;
  transition: .15s; }
.pagination a:hover { border-color: var(--ink); }
.pagination a.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding: 22px 44px 22px 0; position: relative; }
.faq-q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--yellow-600); transition: transform .2s; }
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 0 22px; color: var(--muted); font-size: .96rem; }
.bg-white { background: #fff; }
@media (max-width: 1200px) {
  .header-phone { width: 44px; height: 44px; flex: none;
    justify-content: center;
    gap: 0;
    background: var(--yellow);
    color: #fff; }
  .header-phone svg { width: 19px; height: 19px; color: #fff; }
  .header-phone-label { display: none; }
}
@media (max-width: 1080px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media { aspect-ratio: 16/9; }
}
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.open { display: block; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 24px; }
  .main-nav.open ul { flex-direction: column; gap: 0; }
  .main-nav.open > ul > li > a { display: flex; width: 100%; padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav.open .nav-cta { display: block; padding-top: 16px; }
  .main-nav.open > ul > li.nav-cta > a, .main-nav.open > ul > li.nav-cta > button { display: inline-flex; width: 100%; justify-content: center; padding: 15px 22px; border-bottom: 0; border-radius: 0; font-weight: 600; }
}
@media (max-width: 620px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .section { padding: 60px 0; }
  .hero-inner { min-height: 460px; }
}
/* Inter is breder dan Figtree: woordmerk strakker, anders liep de header op
   een telefoon (tot 404 px) 4 px buiten beeld. */
.logo .logo-word { letter-spacing: -.035em; }
.product-badge.badge-new { background: var(--hl); color: var(--ink); }
.product-badge.badge-right { left: auto; right: 12px; }
.spec-line { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.spec-line .amount { color: var(--ink); font-weight: 700; font-size: 1rem; }
.card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card-ctas .btn { flex: 1 1 96px; }
.btn-sm { padding: 12px 16px; font-size: .9rem; }
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
a.sector-card { color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.sector-card:hover { box-shadow: var(--shadow); }
.sector-card .sector-body { display: flex; flex-direction: column; flex: 1; }
.sector-media svg { color: var(--yellow-600); opacity: .92; }
.sector-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--yellow-600); }
.sector-link svg { width: 15px; height: 15px; transition: transform .15s ease; }
a.sector-card:hover .sector-link svg {  }
.reading-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.reading-prose p { margin-bottom: 16px; color: #33434d; }
.reading-prose p strong { color: var(--ink); }
.why-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 32px; position: sticky; top: 100px; }
.why-box h3 { font-size: 1.2rem; margin-bottom: 20px; }
.why-box ul li { display: flex; gap: 13px; margin-bottom: 15px; font-size: var(--fs-small); color: rgba(255,255,255,.86); line-height: 1.5; }
.why-box ul li:last-child { margin-bottom: 0; }
.why-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.why-box .tick svg { width: 12px; height: 12px; }
.why-box b { color: #fff; }
.offer-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.offer-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 600; }
.field label .req { color: #c0392b; }
.offer-form .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 12px; text-align: center; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f3c2c2; color: #9b1c1c; font-size: var(--fs-small); line-height: 1.5; }
.form-error[hidden] { display: none; }
.turnstile-slot { margin-top: 16px; }
.trust-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 30px; }
.trust-box h3 { font-size: 1.35rem; margin-bottom: 22px; }
.trust-box ul li { display: flex; gap: 12px; align-items: center; margin-bottom: 15px; font-weight: 500; }
.trust-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.trust-box .tick svg { width: 12px; height: 12px; }
.trust-box .contact-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.trust-box .contact-block li { display: flex; gap: 11px; margin-bottom: 11px; font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.82); }
.trust-box .contact-block svg { width: 15px; height: 15px; color: var(--hl); flex: none; margin-top: 3px; }
@media (max-width: 1080px) {
  .reading-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-box { position: static; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sector-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .offer-form { padding: 26px 22px; }
}
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 34px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease; }
.contact-card:hover { box-shadow: var(--shadow); }
.contact-card .ci-ico { width: 54px; height: 54px; margin: 0 auto 16px;
  background: #e3eef9; color: var(--yellow-600);
  display: grid; place-items: center; border-radius: 12px; }
.contact-card .ci-ico svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.contact-card p { color: var(--muted); font-size: .95rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.map-embed iframe { width: 100%; height: 380px; border: 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease; }
a.blog-card:hover { box-shadow: var(--shadow); }
.blog-media { position: relative; aspect-ratio: 16 / 10; background: #eef3f9; overflow: hidden; }
.blog-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; mix-blend-mode: multiply; }
.blog-tag { position: absolute; top: 14px; left: 14px;
  background: var(--ink); color: #fff; font-size: var(--fs-micro); font-weight: 600;
  padding: 6px 12px; border-radius: 6px; }
.blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.blog-body h2, .blog-body h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.25; }
.blog-body p { font-size: .9rem; color: var(--muted); margin-bottom: 18px; flex: 1; }
.blog-card .arrow-link { color: var(--ink); }
.blog-card .muted-link { color: var(--muted); font-weight: 600; font-size: .9rem; }
.blog-card.is-soon { opacity: .92; }
.blog-card.is-soon .blog-tag { background: var(--yellow-600); }
.article { padding: 56px 0 80px; }
.article-head { max-width: 760px; margin: 0 auto 34px; }
.article-head .breadcrumb { font-size: var(--fs-small); color: var(--muted); margin-bottom: 20px; }
.article-head .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.article-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body .lead-p { font-size: 1.2rem; color: var(--ink); margin-bottom: 28px; line-height: 1.55; }
.article-body h2 { font-size: 1.5rem; margin: 34px 0 12px; }
.article-body p { color: #33434d; margin-bottom: 16px; line-height: 1.7; }
.article-body strong { color: var(--ink); }
.article-list { margin: 6px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.article-list li { position: relative; padding-left: 26px; color: #33434d; line-height: 1.6; }
.article-list li::before { content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--yellow); }
.callout { background: #e3eef9; border-left: 0;
  border-radius: 10px; padding: 22px 24px; margin: 26px 0; color: #234;
  line-height: 1.6; }
.article-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 40px; padding: 30px 32px;
  background: var(--dark); color: #fff; border-radius: var(--radius); }
.article-cta > div { flex: 1 1 320px; min-width: 0; }
.article-cta .btn { flex: none; }
.article-cta h3 { font-size: 1.3rem; margin-bottom: 6px; }
.article-cta p { color: rgba(255,255,255,.75); }
@media (max-width: 1080px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-cta { flex-direction: column; align-items: flex-start; }
  .article-cta > div { flex: 0 0 auto; }
}
@media (max-width: 980px) {
  .site-header .container { gap: 12px; }
  .header-actions .btn { padding: 13px 18px; font-size: var(--fs-small); min-height: 44px; }
}
@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hl { white-space: normal; }
  .header-actions .btn:not(.keep-on-mobile) { display: none; }
  .header-actions .btn.keep-on-mobile { white-space: normal; text-align: center; line-height: 1.15; padding-block: 6px; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.5rem); line-height: 1.18; }
  .hero .lead { font-size: 1.02rem; line-height: 1.7; }
  .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .btn { padding: 16px 22px; }
  .map-embed iframe { height: 300px; }
  .article-body .lead-p { font-size: 1.08rem; }
}
@media (max-width: 400px) {
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .hero-inner { padding: 70px 0 90px; }
  .header-actions .btn.keep-on-mobile { padding: 6px 12px; font-size: var(--fs-small); }
  .split-body .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 14px 12px; }
  .site-header .container { gap: 8px; }
  .site-header .logo { gap: 8px; font-size: clamp(.875rem, 10vw - 1.125rem, 1.15rem); }
  .site-header .logo .logo-mark { width: 32px; height: 32px; flex: none; }
  .site-header .logo .logo-mark svg { width: 20px; height: 20px; }
}
.pdp { padding: 40px 0 30px; }
.pdp .breadcrumb { font-size: var(--fs-small); color: var(--muted); margin-bottom: 26px; }
.pdp .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.pdp-top { display: grid; grid-template-columns: 1.02fr 1fr; gap: 50px; align-items: start; }
.pdp-gallery { position: sticky; top: 96px; }
.pdp-stage { position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  overflow: hidden; }
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; padding: 34px; mix-blend-mode: multiply; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.pdp-thumb { border: 1px solid var(--line); border-radius: 10px; background: #fff;
  aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; padding: 0;
  display: grid; place-items: center; position: relative;
  transition: border-color .15s ease; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.pdp-stage.is-photo img, .pdp-thumb.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.pdp-thumb:hover { border-color: #a9c4e0; }
.pdp-thumb.active { border-color: var(--yellow-600); box-shadow: 0 0 0 2px rgba(10,102,194,.18); }
.pdp-gallery-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.pdp-gallery-links a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links a:hover { color: var(--yellow-600); }
.pdp-gallery-links svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
.pdp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--fs-micro); color: var(--yellow-600); margin-bottom: 16px; }
.pdp-trust { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 22px; line-height: 1.6; }
.pdp-trust b { color: var(--ink); font-weight: 700; }
.pdp-lead { font-size: 1.05rem; color: #33434d; margin-bottom: 22px; }
.pdp-key { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.pdp-key li { display: flex; gap: 12px; font-size: .96rem; color: #33434d; line-height: 1.5; }
.pdp-key .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.pdp-key .tick svg { width: 13px; height: 13px; }
.pdp-key b { color: var(--ink); }
.pdp-buy { border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: 26px 26px 28px; margin-bottom: 22px; }
.pdp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-price .from { font-size: var(--fs-micro); color: var(--muted); }
.pdp-price .amount { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pdp-price .unit { font-size: .95rem; color: var(--muted); font-weight: 600; }
.pdp-price-note { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 20px; }
.pdp-term { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-term svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.pdp-mini-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pdp-mini-usps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
.pdp-mini-usps svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
.pdp-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: start; }
.pdp-prose h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pdp-prose p { color: #33434d; margin-bottom: 15px; line-height: 1.7; }
.spec-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; position: sticky; top: 96px; }
.spec-table dl { margin: 0; }
.spec-table .spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 24px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.spec-table .spec-row dt { color: var(--muted); flex: none; }
.spec-table .spec-row dd { font-weight: 600; color: var(--ink); text-align: right; }
.included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.included-grid li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; color: #33434d; line-height: 1.5; }
.included-grid .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.included-grid .tick svg { width: 13px; height: 13px; }
.included-grid b { color: var(--ink); }
.acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease; }
.acc-card:hover { box-shadow: var(--shadow); }
.acc-card .acc-ico { width: 50px; height: 50px; border-radius: 12px; background: #e3eef9; color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 16px; }
.acc-card .acc-ico svg { width: 25px; height: 25px; }
.acc-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.acc-card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
@media (max-width: 1080px) {
  .pdp-top { grid-template-columns: 1fr; gap: 34px; }
  .pdp-gallery { position: static; }
  .pdp-detail-grid { grid-template-columns: 1fr; gap: 34px; }
  .spec-table { position: static; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .included-grid { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: 1fr; }
  .pdp-mini-usps { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .pdp-buy { padding-inline: 18px; }
}
.modal-overlay { position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 20, 40, .62);
  display: none; align-items: flex-start; justify-content: center;
  padding: 44px 20px; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { position: relative; width: 100%; max-width: 620px; margin: auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  padding: 34px;
  animation: modalIn .22s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #eef3f9; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease; }
.modal-close:hover { background: #dbe6f3; }
.modal-head { margin-bottom: 20px; padding-right: 44px; }
.modal-head .section-eyebrow { margin-bottom: 8px; }
.modal-head h2 { font-size: 1.5rem; margin-bottom: 8px; }
.modal-head p { color: var(--muted); font-size: .95rem; }
.modal-product { display: flex; align-items: center; gap: 12px;
  background: #eef4fa; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 20px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.modal-product .product-badge { position: static; border-radius: 5px; }
.modal .offer-form { border: 0; padding: 0; box-shadow: none; }
@media (max-width: 620px) {
  .modal-overlay { padding: 16px; }
  .modal { padding: 24px 22px; }
}
.about-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.about-intro .intro-copy p { color: #33434d; margin-bottom: 14px; line-height: 1.7; }
.about-intro .intro-copy p:last-child { margin-bottom: 0; font-weight: 600; color: var(--ink); }
.about-feature { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 32px; margin-top: 44px; align-items: center; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-feature-side { display: flex; flex-direction: column; gap: 22px; }
.about-feature-side .stat-tile { border-radius: var(--radius); }
.about-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.about-note h2 { font-size: 1.2rem; margin-bottom: 10px; }
.about-note p { color: #33434d; line-height: 1.65; }
.about-note p b { color: var(--ink); }
@media (max-width: 900px) {
  .about-feature { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
}
.stat-tile { background: linear-gradient(150deg, #0a66c2, #0b4f93);
  color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.stat-tile .big { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat-tile .lbl { margin-top: 8px; font-weight: 600; opacity: .95; }
.values-head { text-align: center; margin-bottom: 40px; }
.values-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value-col { border-top: 2px solid var(--yellow); padding-top: 18px; }
.value-col h3 { font-size: 1.12rem; margin-bottom: 10px; }
.value-col p { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.team-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.team-layout .team-block { max-width: none; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .team-layout { grid-template-columns: 1fr; gap: 30px; }
}
.team-block { max-width: 720px; }
.team-block p { color: #33434d; margin-bottom: 16px; line-height: 1.7; }
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .values-head h2 { font-size: 1.75rem; }
}
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; 
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(20, 28, 58, .3);
  transition: transform .15s ease, background .15s ease; }
.wa-float:hover { background: #1da851; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .wa-float svg { width: 28px; height: 28px; }
}
.logo .logo-tld { font-style: normal; font-weight: 600; font-size: .68em; color: var(--muted); margin-left: 1px; letter-spacing: 0; }
.footer-brand .logo .logo-tld { color: rgba(255,255,255,.55); }
.product-badge.badge-koelen { background: var(--accent); }
.product-badge.badge-koelcel { background: var(--dark); }
.cap-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-micro); color: var(--muted); margin: -8px 0 14px; }
.cap-line span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cap-line svg { width: 15px; height: 15px; color: var(--yellow-600); flex: none; }
.keuzehulp .kh-kop { font-size: 1.15rem; line-height: 1.2; margin-bottom: 6px; }
.kh-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kh-row + .kh-row { margin-top: 10px; }
.kh-label { width: 100%; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -2px; }
.kh-btn { display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: var(--fs-small); color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.kh-btn:hover, .kh-btn.active { border-color: var(--yellow-600); color: var(--yellow-600); background: #e3eef9; }
.kh-btn svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.hero-kh .kh-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.hero-kh .kh-btn svg { color: var(--hl); }
.hero-kh .kh-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-kh .kh-btn:hover svg { color: var(--yellow-600); }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 900px; font-size: .9rem; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--dark); color: #fff; font-weight: 700; font-size: var(--fs-small); white-space: nowrap; position: sticky; top: 0; }
.compare thead th a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.compare thead th a:hover { text-decoration-color: #fff; }
.compare tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; background: #f6f9fc; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .ok { color: var(--yellow-600); font-weight: 700; }
.compare .no { color: #9b1c1c; font-weight: 700; }
.compare .hi { background: #e3eef9; }
.compare thead th.hi { background: var(--yellow-600); color: #fff; }
.compare thead th.hi a { color: #fff; }
.compare-hint { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--muted); margin-top: 10px; }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 30px; }
.proscons > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.proscons h3 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.proscons h3 .pc-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; line-height: 1; font-weight: 700; }
.proscons .pros h3 .pc-ico { background: var(--yellow); }
.proscons .cons h3 .pc-ico { background: #b45309; }
.proscons li { display: flex; gap: 10px; font-size: var(--fs-small); color: #33434d; margin-bottom: 9px; line-height: 1.5; }
.proscons li:last-child { margin-bottom: 0; }
.proscons li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.proscons .pros li svg { color: var(--yellow-600); }
.proscons .cons li svg { color: #b45309; }
.checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.check-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.check-card .ci { width: 46px; height: 46px; border-radius: 11px; background: #e3eef9; color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 14px; }
.check-card .ci svg { width: 23px; height: 23px; }
.check-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.check-card p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.included-grid.is-optional .tick { background: var(--line); color: var(--muted); }
.pdp-gallery-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links button:hover { color: var(--yellow-600); }
.pdp-gallery-links button svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
.header-actions button.btn { min-height: 44px; }
.review-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.review-badge .stars { color: #f5b301; letter-spacing: 1px; font-size: .95rem; }
.review-badge .g { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 1px solid var(--line); font-weight: 700; font-size: .8rem; color: #4285f4; }
.review-badge span.muted { color: var(--muted); font-weight: 500; }
.hero .review-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; margin-bottom: 22px; }
.hero .review-badge span.muted { color: rgba(255,255,255,.7); }
.pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; 
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 28, 58, .12); }
.pdp-sticky.is-visible { display: flex; }
.pdp-sticky .sticky-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pdp-sticky .sticky-price b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pdp-sticky .sticky-price span { font-size: var(--fs-micro); color: var(--muted); white-space: nowrap; }
.pdp-sticky .btn { flex: 1; padding: 14px 12px; font-size: var(--fs-small); }
.pdp-sticky .btn-ghost { flex: 0 0 auto; padding: 14px 16px; }
@media (min-width: 1081px) {
  .pdp-sticky { display: none !important; }
}
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.how-card .hn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: #fff; font-weight: 700; margin-bottom: 14px; }
.how-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.how-card p { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; }
@media (max-width: 1080px) {
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .proscons { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .kh-btn { padding: 11px 14px; font-size: var(--fs-small); }
  .compare { min-width: 760px; font-size: var(--fs-micro); }
  .compare th, .compare td { padding: 11px 12px; }
}
.hero h1 { font-size: clamp(2.15rem, 4.4vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 24px; }
.hero .lead { font-size: 1.1rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 54ch;
  margin-bottom: 32px; }
.hero-kh .kh-row { gap: 10px; }
.page-hero h1 { font-size: clamp(1.95rem, 4.2vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 20px; }
.page-hero p { line-height: 1.7; max-width: 58ch; }
.split-media.has-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #12172e; }
.split-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) {
  .pdp-thumbs { grid-template-columns: repeat(5, 1fr) !important; gap: 8px; }
}
.product-card.is-rich .desc { flex: none; }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; }
.compare thead th:first-child { z-index: 2; }
.compare.is-wide { font-size: var(--fs-small); }
.compare.is-wide th, .compare.is-wide td { padding: 12px 10px; }
.compare.is-wide tbody th { white-space: normal; }
.compare.is-wide tfoot td { padding: 12px 10px; }
.compare.is-wide tfoot .btn { padding: 10px 8px; font-size: var(--fs-micro); }
@media (max-width: 620px) {
  .compare.is-wide { min-width: 760px; }
}
/* Sticky balk bestaat alleen tot 1080 px (daarboven verborgen): alleen dan
   ruimte onder de footer en wijkt de WhatsApp-knop. Een element dat focus
   krijgt, scrolt boven de balk uit in plaats van erachter (WCAG 2.4.11). */
@media (max-width: 1080px) {
  body.has-sticky-cta .site-footer { padding-bottom: 72px; }
  body.has-sticky-cta .wa-float { bottom: 86px; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(8px); }
  html:has(body.has-sticky-cta) { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.hero--fill .hero-inner { min-height: calc(100vh - 79px); min-height: calc(100svh - 79px); }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.team-card { flex: 0 0 calc((100% - 4 * 22px) / 5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; }
.team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #141a38; }
.team-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.team-body b { font-size: 1rem; color: var(--ink); }
.team-body span { font-size: var(--fs-small); color: var(--muted); line-height: 1.4; }
@media (max-width: 1080px) {
  .team-card { flex-basis: calc((100% - 3 * 22px) / 4); }
}
@media (max-width: 800px) {
  .team-card { flex-basis: calc((100% - 2 * 22px) / 3); }
}
@media (max-width: 560px) {
  .team-grid { gap: 14px; }
  .team-card { flex-basis: calc((100% - 14px) / 2); }
  .team-body { padding: 12px 12px 14px; }
}
.pdp-review-badge { margin-bottom: 14px; transition: border-color .15s ease; }
.pdp-review-badge:hover { border-color: var(--ink); }
.pdp-review-badge b { font-size: .95rem; }
.reviews-band { background: var(--dark); color: #fff; padding: 56px 0; }
.reviews-num { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.reviews-num b { font-size: 3.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.reviews-num .stars { color: #f5b301; font-size: 1.35rem; letter-spacing: 2px; }
@media (max-width: 800px) {
  .reviews-band { padding: 48px 0; }
}
.compare.is-stack { min-width: 0; }
@media (max-width: 620px) {
  .is-stack-wrap, .compare-wrap:has(.is-stack) { overflow: visible; }
  .compare.is-stack { font-size: var(--fs-small); display: block; }
  .compare.is-stack thead { display: none; }
  .compare.is-stack tbody, .compare.is-stack tfoot, .compare.is-stack tr { display: block; }
  .compare.is-stack tbody th { display: block; position: static; white-space: normal;
    padding: 9px 14px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: #f6f9fc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .compare.is-stack tbody tr:first-child th { border-top: 0; }
  .compare.is-stack td { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start;
    padding: 9px 14px; border-bottom: 0; position: static; }
  .compare.is-stack td + td { border-top: 1px solid #eef3f9; }
  .compare.is-stack td::before { content: attr(data-p); font-weight: 600; color: var(--ink); font-size: var(--fs-micro); line-height: 1.45; }
  .compare.is-stack td.hi { background: #e3eef9; }
  .compare.is-stack tbody tr:last-child td { border-bottom: 0; }
  .compare.is-stack tfoot tr { border-top: 1px solid var(--line); }
  .compare.is-stack tfoot td:first-child { display: none; }
  .compare.is-stack tfoot td { grid-template-columns: 96px max-content max-content; gap: 8px 10px; align-items: center; padding: 10px 14px; }
  .compare.is-stack tfoot td > * { width: auto; }
  .compare.is-stack tfoot .btn { padding: 10px 14px; font-size: var(--fs-micro); }
  .compare-hint { display: block; line-height: 1.5; }
  .compare-wrap:has(.is-wide) + .compare-hint .ch-scroll { display: inline-flex; vertical-align: middle; margin-right: 4px; }
  .compare.is-wide { min-width: 0; font-size: .8rem; }
  .compare.is-wide th, .compare.is-wide td { padding: 10px 10px; min-width: 120px; }
  .compare.is-wide thead th { white-space: normal; }
  .compare.is-wide thead th small { white-space: normal; }
  .compare.is-wide tbody th { white-space: normal; min-width: 104px; max-width: 112px; font-size: var(--fs-micro); box-shadow: 1px 0 0 var(--line); }
  .compare.is-wide thead th:first-child { box-shadow: 1px 0 0 rgba(255,255,255,.15); }
  .compare.is-wide tfoot td { padding: 10px 8px; }
  .compare.is-wide tfoot .btn { padding: 9px 8px; font-size: .8rem; }
}
@media (max-width: 1080px) {
  .dark-section .accent-block { width: 72px; height: 72px; }
}
@media (max-width: 620px) {
  .dark-section .accent-block { width: 56px; height: 56px; }
}
.catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .catalog-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .catalog-grid.cols-4 { grid-template-columns: 1fr; }
}
.nowrap { white-space: nowrap; }
h1, h2, .section-title { text-wrap: balance; }
@media (max-width: 1080px) {
  .filter-panel.is-open .filter-toggle svg { transform: rotate(-90deg); }
  .filter-panel.is-open { padding: 8px 22px 24px; }
  .filter-panel.is-open .filter-head { margin-bottom: 12px; }
  .filter-panel.is-open .filter-body { display: block; }
}
@media (max-width: 620px) {
  .catalog { padding-bottom: 60px; }
  .spec-table .spec-row { flex-direction: column; gap: 3px; padding: 12px 18px; }
  .spec-table .spec-row dd { text-align: left; }
  .pdp-gallery-links a, .pdp-gallery-links button { min-height: 40px; }
  .product-media { aspect-ratio: 3 / 2; }
}
.main-nav .nav-cta { display: none; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; border-radius: 8px; }
.skip-link:focus { left: 12px; }
.hero-side .hero-kh-kop { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.hero-side .kh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-side .kh-btn { width: 100%; justify-content: flex-start; padding: 12px 14px; border-radius: 10px; }
.hero-side .kh-btn:hover {  }
.hero-side .kh-btn:nth-child(5), .hero-side .kh-btn:nth-child(6) { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .hero-side .kh-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-side .kh-btn { padding: 11px 12px; font-size: var(--fs-small); }
}
@media (max-width: 980px) {
  #cc-consent-banner.cc-modal-backdrop { align-items: flex-end !important; }
  #cc-consent-banner .cc-container { align-items: flex-end !important; min-height: 0 !important; padding: 0 !important; }
  #cc-consent-banner .cc-b { border-radius: 16px 16px 0 0 !important; max-width: 100% !important; height: auto !important;
    max-height: 35vh !important; max-height: 35dvh !important; }
  #cc-consent-banner .cc-tab-contents { min-height: 0 !important; overflow-y: auto !important; }
  #cc-consent-banner .cc-tab-content.cc-active { max-height: none !important; }
  #cc-consent-banner .cc-banner-header, #cc-consent-banner .cc-banner-footer, #cc-consent-banner .cc-responsive-padding { padding: 12px 16px !important; }
  #cc-consent-banner .cc-footer-content { flex-direction: row !important; align-items: stretch !important; gap: 8px !important; }
  #cc-consent-banner .cc-button { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-height: 44px !important; padding: 10px 12px !important; }
  #cc-consent-banner[data-tab-opened="tab2"] .cc-b { max-height: 70vh !important; max-height: 70dvh !important; }
}
:root { --r-control: var(--radius-sm);   
  --r-control-sm: 8px;             
  --r-badge: 6px; }
.btn { border-radius: var(--r-control); }
.btn-sm { border-radius: var(--r-control-sm); }
.header-phone, .nav-toggle, .main-nav > ul > li > a, .pagination a { border-radius: var(--r-control); }
.nav-toggle span { border-radius: 1px; }
.product-badge, .modal-product .product-badge, .blog-tag { border-radius: var(--r-badge); }
.faq-q { border-radius: 4px; }
@media (max-width: 980px) {
  .main-nav.open > ul > li.nav-cta > a, .main-nav.open > ul > li.nav-cta > button { border-radius: var(--r-control); }
}
:root { --yellow-soft: #e3eef9;   
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .16s;
  --dur-2: .28s;
  --shadow-raise: 0 2px 6px -2px rgba(15, 20, 30, .06), 0 18px 40px -16px rgba(15, 20, 30, .2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nav-mega-knop, .main-nav .nav-cats, .main-nav .nav-cat-aantal, .main-nav .nav-subs, .main-nav .nav-hulp, .main-nav .nav-alles-aantal, .main-nav .nav-chev { display: none; }
.main-nav .nav-cat-beeld { display: grid; place-items: center; flex: none; overflow: hidden;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.main-nav .nav-cat-beeld img { width: 100%; height: 100%; object-fit: cover; }
.main-nav .nav-cat-naam { flex: 1; min-width: 0; }
@media (min-width: 981px) {
  .site-header .container { position: relative; }
  .nav-mega-knop { display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 13px; border: 0; border-radius: var(--r-control); background: none;
    font: inherit; font-size: .96rem; font-weight: 500; color: inherit; white-space: nowrap;
    cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
  .nav-mega-knop:hover, .nav-mega-knop[aria-expanded="true"] { background: #f2f2f2; }
  .nav-mega-knop:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .nav-mega-pijl { width: 14px; height: 14px; opacity: .6; transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
  .nav-mega-knop[aria-expanded="true"] .nav-mega-pijl { transform: rotate(-90deg); }
  .main-nav .nav-mega.is-open .nav-cats { display: block;
    position: absolute; top: calc(100% + 1px); left: 24px; right: 24px; z-index: 5;
    padding: 22px 24px 0;
    background: #fff; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-raise);
    max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
    animation: megaIn var(--dur-2) var(--ease-out); }
  .main-nav .nav-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
  .main-nav .nav-groep { margin: 0 0 8px; padding: 0 10px;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .main-nav .nav-kolom ul { display: grid; gap: 2px; }
  .main-nav .nav-kolom li > a { display: flex; align-items: center; gap: 14px;
    min-height: 52px; padding: 6px 10px; border-radius: var(--r-control);
    font-size: .98rem; font-weight: 600; line-height: 1.3; color: var(--ink);
    transition: background-color var(--dur-1) var(--ease-out); }
  .main-nav .nav-kolom li > a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav .nav-kolom li > a[aria-current] { color: var(--yellow-600); background: var(--yellow-soft); box-shadow: inset 3px 0 0 var(--yellow-600); }
  .main-nav .nav-cat-beeld { width: 48px; height: 36px; }
  .main-nav .nav-cat-aantal { display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg); color: var(--muted); font-size: .8rem; font-weight: 650; text-align: center; }
  .main-nav .nav-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px 72px; }
  .main-nav .nav-subs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: var(--fs-small); font-weight: 550; color: var(--muted);
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
  .main-nav .nav-subs a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-subs a[aria-current] { color: var(--yellow-600); border-color: var(--yellow-600); background: var(--yellow-soft); }
  .main-nav .nav-voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 18px -24px 0; padding: 14px 24px 16px;
    border-top: 1px solid var(--line); background: var(--bg); }
  .main-nav .nav-alles { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-left: -10px;
    border-radius: var(--r-control); font-weight: 700; color: var(--ink); }
  .main-nav .nav-alles:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-alles[aria-current] { color: var(--yellow-600); }
  .main-nav .nav-alles .nav-chev { display: block; width: 16px; height: 16px; color: var(--yellow-600); }
  .main-nav .nav-alles-aantal { display: inline; font-weight: 600; color: var(--muted); }
  .main-nav .nav-hulp { display: block; margin: 0; font-size: var(--fs-small); color: var(--muted); }
  .main-nav .nav-hulp a, .main-nav .nav-hulp button { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .main-nav .nav-hulp a:focus-visible, .main-nav .nav-hulp button:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
}
@media (min-width: 981px) {
  .main-nav > ul > li > a, .nav-mega-knop { padding-inline: 10px; }
}
@media (min-width: 981px) and (max-width: 1260px) {
  .site-header .container { gap: 12px; }
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .main-nav > ul > li > a, .nav-mega-knop { padding-inline: 8px; font-size: var(--fs-small); }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding-inline: 14px; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-kolom li > a:hover { background: var(--bg); }
  .main-nav .nav-kolom li > a[aria-current]:hover { background: var(--yellow-soft); }
  .main-nav .nav-subs a:hover { color: var(--ink); border-color: var(--muted); }
  .main-nav .nav-alles:hover { background: #fff; }
  .main-nav .nav-hulp a:hover, .main-nav .nav-hulp button:hover { text-decoration-thickness: 2px; }
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 980px) {
  .main-nav.open { max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px);
    overflow-y: auto; overscroll-behavior: contain; }
  .main-nav.open .nav-cats { display: block; }
  .main-nav.open .nav-groep { margin: 0; padding: 12px 8px 4px; font-size: var(--fs-micro); font-weight: 650; line-height: 1.4; color: var(--muted); }
  .main-nav.open .nav-cats ul { padding-bottom: 6px; }
  .main-nav.open .nav-cats ul a { display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 4px 8px; border-radius: var(--r-control);
    font-weight: 600; line-height: 1.3; color: var(--ink);
    -webkit-tap-highlight-color: transparent; }
  .main-nav.open .nav-cat-beeld { width: 40px; height: 30px; }
  .main-nav.open .nav-cats ul a:active { background: var(--bg); }
  .main-nav.open .nav-cats ul a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav.open .nav-cats ul a[aria-current] { color: var(--yellow-600); background: var(--yellow-soft); box-shadow: inset 3px 0 0 var(--yellow-600); }
  .main-nav.open .nav-alles { display: flex; align-items: center; width: 100%; padding: 14px 8px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-mega.is-open .nav-cats { animation: none; }
  .nav-mega-pijl, .nav-mega-knop, .main-nav .nav-kolom li > a { transition: none; }
}
@media (forced-colors: active) {
  .main-nav .nav-mega.is-open .nav-cats { border: 1px solid CanvasText; }
  .main-nav a[aria-current] .nav-cat-naam { text-decoration: underline; }
}
@media (max-width: 980px) {
  .main-nav.open { margin-left: 0; }
  body.nav-open .wa-float, body.nav-open .pdp-sticky.is-visible, body.nav-open #site-consent-ui button[aria-controls="site-cookievoorkeuren"] { display: none; }
}
@media (min-width: 981px) {
  .main-nav .nav-subs .nav-uitleg { gap: 2px; padding-right: 8px; border-color: transparent; color: var(--yellow-600); font-weight: 650; }
  .main-nav .nav-uitleg .nav-chev { display: block; width: 14px; height: 14px; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-subs .nav-uitleg:hover { color: var(--ink); border-color: var(--line); }
}
@media (max-width: 980px) {
  .main-nav.open .nav-subs { display: block; padding-bottom: 2px; }
  .main-nav.open .nav-subs a:not(.nav-uitleg) { display: none; }
  .main-nav.open .nav-subs .nav-uitleg { display: flex; align-items: center; gap: 4px;
    min-height: 40px; margin-top: -4px; padding: 0 8px 0 60px;
    font-size: var(--fs-small); font-weight: 600; color: var(--yellow-600); }
  .main-nav.open .nav-uitleg .nav-chev { display: block; width: 14px; height: 14px; }
}
.section { padding: 88px 0; }
@media (max-width: 620px) {
  .section { padding: 64px 0; }
}
.compare, .pdp-price, .spec-table, .prijs-amount { font-variant-numeric: tabular-nums; }
.hero--koel { overflow: visible; }
.hero--koel .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; position: relative; z-index: 2; }
.hero--koel .hero-inner { max-width: none; min-height: 0; padding: 64px 0 112px; }
.hero--koel h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -.022em; }
.hero--koel .lead { max-width: 56ch; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; font-size: var(--fs-small); color: rgba(255, 255, 255, .78); }
.hero-proof .review-badge { margin: 0; }
.hero-visual { position: relative; align-self: center; padding: 20px 0 40px; }
.hero-visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .45)); }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: var(--fs-small);
  padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow);
  animation: chipIn .6s var(--ease-out) both; }
.hero-chip svg { width: 16px; height: 16px; color: var(--accent-600); }
.hero-chip-1 { left: 0; top: 6%; animation-delay: .15s; }
.hero-chip-2 { right: 0; top: 30%; animation-delay: .3s; }
.hero-chip-3 { left: 8%; bottom: 10%; animation-delay: .45s; }
@keyframes chipIn { from { transform: translateY(8px); } to { transform: none; } }
.hero-check-wrap { position: relative; z-index: 3; margin-bottom: -58px; }
.hc-field label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hero-check .btn { height: 48px; padding: 0 22px; white-space: nowrap; }
.hc-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--muted); margin: 2px 0 0; }
.page-hero-check { margin-top: 26px; }
.page-hero-check .hero-check { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (max-width: 1080px) {
  .hero-check { grid-template-columns: 1fr 1fr; }
  .hero-check .btn { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hero--koel .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero--koel .hero-inner { padding: 52px 0 0; }
  .hero-visual { max-width: 520px; margin: 0 auto; padding: 10px 0 70px; }
  .hero-chip { font-size: .8rem; padding: 8px 12px; }
}
@media (max-width: 620px) {
  .hero-check { grid-template-columns: 1fr; padding: 16px 16px 12px; }
  .hero-check-wrap { margin-bottom: -40px; }
  .hero-visual { padding-bottom: 56px; }
  .hero-chip-3 { display: none; }
}
.card-route { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--muted); margin: -6px 0 12px; }
.card-route svg { width: 15px; height: 15px; color: var(--accent-600); flex: none; }
.product-media img.tank-photo { padding: 10px; }
.form-step + .form-step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-kop, .form-progress { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; }
.form-progress-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: var(--fs-small); }
.form-progress-van { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 600; }
.form-vinkjes { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.vinkje { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); cursor: pointer; }
.vinkje input { accent-color: var(--accent); width: 16px; height: 16px; }
.vinkje-groep { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.vinkje-label { font-size: var(--fs-micro); font-weight: 700; color: var(--muted); }
.optioneel { font-weight: 400; color: var(--muted); font-size: .8rem; }
.form-next { width: 100%; margin-top: 6px; }
.form-next svg { width: 16px; height: 16px; }
.form-back { background: none; border: 0; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; }
.form-back svg { width: 16px; height: 16px; }
.form-samenvatting { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 14px; font-size: var(--fs-small); margin-bottom: 14px; }
.form-samenvatting[hidden] { display: none; }
.form-wijzig { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--accent-600); text-decoration: underline; cursor: pointer; }
.form-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 10px; font-size: var(--fs-micro); color: var(--muted); }
.review-badge.form-review { padding: 5px 10px 5px 6px; font-size: .8rem; }
.modal .form-step[hidden] { display: none; }
@media (max-width: 620px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 22px 18px 28px; animation: sheetIn .25s ease; }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.open-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
.open-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.open-status.is-open i { background: var(--ok); box-shadow: 0 0 0 4px rgba(5, 150, 105, .22); }
.open-status.is-closed i { background: #f59e0b; }
.help-head .open-status { display: flex; margin-top: 8px; color: #fff; }
.direct-box .open-status { color: #fff; }
.callback-form { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); padding: 16px 18px; color: #fff; }
.cb-kop { font-weight: 700; margin-bottom: 10px; }
.cb-kop:focus { outline: none; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.cb-row .btn { height: 46px; white-space: nowrap; }
.cb-note { font-size: .8rem; opacity: .82; margin-top: 8px; }
.callback-form .form-error { margin-top: 10px; }
/* Foutmelding over de volle breedte onder velden en knop, niet als extra kolom. */
.cb-row > .form-error { grid-column: 1 / -1; }
.callback-form.is-verzonden { background: rgba(255, 255, 255, .16); }
.team-block .cb-note { color: var(--muted); opacity: 1; }
@media (max-width: 620px) {
  .cb-row { grid-template-columns: 1fr; }
  .cb-row .btn { width: 100%; }
}
.prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prijs-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.prijs-card .product-badge { position: static; align-self: flex-start; }
.prijs-card h3 { font-size: 1.25rem; }
.prijs-amount .from { font-size: var(--fs-small); color: var(--muted); }
.prijs-amount b { font-size: 2rem; letter-spacing: -.02em; }
.prijs-sub { font-size: var(--fs-small); color: var(--muted); }
.prijs-card ul { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; flex: 1; }
.prijs-card li { display: flex; gap: 10px; font-size: .9rem; align-items: center; }
.prijs-card .tick { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.prijs-card .tick svg { width: 11px; height: 11px; }
@media (max-width: 980px) {
  .prijs-grid { grid-template-columns: 1fr; }
}
.transparant-slot { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: var(--fs-small); }
.transparant-slot svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.pdp-foto-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 8px; }
.compare.is-compact { font-size: var(--fs-small); }
.main-nav .nav-cat-naam small { display: block; font-size: var(--fs-micro); font-weight: 500; color: var(--muted); }
.hero--fill .hero-inner { min-height: 0; padding: 80px 0 90px; }
.page-hero .hero-check .hc-note { color: var(--muted); max-width: none; font-size: var(--fs-micro); }
.about-h1 { font-size: clamp(1.7rem, 4vw, 3rem); overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .about-h1 { font-size: 1.55rem; }
  .values-head h2 { font-size: 1.45rem; overflow-wrap: anywhere; }
}
.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field { min-width: 0; }
@media (max-width: 620px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
}
.compare .ok { color: #047857; }
@media (max-width: 620px) {
  .compare.is-stack td { display: block; position: relative; padding: 9px 14px 9px 124px; min-height: 40px; }
  .compare.is-stack td::before { position: absolute; left: 14px; top: 9px; width: 100px; }
  .compare.is-stack tfoot td { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding-left: 14px; }
  .compare.is-stack tfoot td::before { position: static; width: 100px; }
}
.hl-yellow { background: linear-gradient(transparent 8%, var(--hl) 8%, var(--hl) 92%, transparent 92%); }
.hero--koel h1 { line-height: 1.12; font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
@media (min-width: 981px) {
  .hero--koel .hero-inner { padding: 44px 0 96px; }
}
@media (max-width: 980px) {
  .hero--koel .hero-inner { padding: 44px 0 0; }
}
.hero-visual { padding: 10px 0 30px; }
.hero-chip-1 { left: 2%; top: 4%; }
.hero-chip-2 { right: 0; top: 36%; }
.hero-chip-3 { left: 6%; bottom: 6%; }
/* Verborgen knop ook uit de tabvolgorde (visibility); de overgang houdt hem
   zichtbaar tot het vervagen klaar is. */
body.cta-in-view .wa-float { opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(8px); }
.wa-float { transition: transform .2s ease, background .15s ease, opacity .2s ease, visibility .2s; }
.pdp-sticky .btn-ghost + .btn-ghost { margin-left: -4px; }
@media (max-width: 620px) {
  .modal { padding-top: 0; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 22px; padding-bottom: 12px; margin-bottom: 10px; }
  .modal-close { top: 14px; }
  .hero-visual { display: none; }
  .hc-field:first-child, .hc-field:nth-child(4), .hero-check .btn, .hc-note { grid-column: 1 / -1; }
}
.cb-btn { background: var(--accent); color: #fff; }
.cb-btn:hover { background: var(--accent-600); }
.help-band .cb-btn { background: #fff; color: var(--ink); }
.help-band .cb-btn:hover { background: #e3eef9; }
.prijs-amount b.is-tekst, .pdp-price .amount.is-tekst { font-size: 1.25rem; font-weight: 700; }
.spec-table h2 { font-size: 1.1rem; padding: 20px 24px; background: var(--dark); color: #fff; letter-spacing: 0; }
.spec-table .spec-row { display: grid; grid-template-columns: 42% 1fr; gap: 14px; }
.spec-table .spec-row dd { text-align: left; }
@media (max-width: 620px) {
  .spec-table h2 { padding: 16px 18px; }
  .spec-table .spec-row { grid-template-columns: 1fr; gap: 3px; }
}
.map-embed { position: relative; background: #e3eef9; min-height: 120px; }
.map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--ink); z-index: 0; }
.map-fallback svg { width: 16px; height: 16px; }
.map-embed iframe { position: relative; z-index: 1; }
nav.breadcrumb { display: block; }
.bronnen { font-size: var(--fs-micro); color: var(--muted); margin-top: 6px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--yellow-600); font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (min-width: 981px) {
  .hero--koel .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 40px; }
  .hero-visual { max-width: 470px; width: 100%; margin-left: auto; }
}
@media (min-width: 621px) {
  .modal-head { position: relative; }
}
.modal-head .modal-close { top: 0; right: 0; }
@media (max-width: 620px) {
  .modal-head { position: sticky; }
  .modal-head .modal-close { top: 18px; }
}
:root { --font-sans: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: var(--font-sans);
  --fs-h1: clamp(1.9rem, 1.2rem + 3.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.05rem + 2.3vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;
  --dark: #1b2a52;          
  --dark-2: #1b2a52;
  --muted: #55636a;         
  --ok: #047857;
  --photo-bg: #eef3f8;      
  --radius: 12px;
  --radius-sm: 8px;
  --r-control: 8px;
  --shadow: 0 10px 30px rgba(20, 28, 58, .10);
  --shadow-sm: 0 2px 8px rgba(20, 28, 58, .06); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: auto; }
@media (min-width: 981px) {
  body { font-size: 1.0625rem; }
}
h1, h2 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.014em; }
.hero h1, .page-hero h1, .about-h1 { font-size: var(--fs-h1); }
.section-title, .cta-inner h2, .who h2 { font-size: var(--fs-h2); margin-bottom: 10px; }
h3 { font-size: var(--fs-h3); }
.hero .lead, .section-intro { font-size: var(--fs-lead); line-height: 1.5; }
.section-intro { color: var(--muted); max-width: 58ch; margin-top: 10px; }
.section-head { max-width: 64ch; margin-bottom: 28px; }
.compare, .pdp-price, .spec-table, .prijs-amount, .proof-row b, .sticky-price { font-variant-numeric: tabular-nums; }
.hl, .hl-yellow { background: none; padding: 0; white-space: normal; color: inherit; }
.btn { min-height: 48px; padding: 0 22px; border-radius: var(--r-control); font-size: 1rem; line-height: 1.2; white-space: normal; text-align: center; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary, .btn-yellow { background: var(--accent); color: #fff; }
.btn-primary:hover, .btn-yellow:hover { background: var(--accent-600); }
.btn-secondary, .btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
.btn-secondary:hover, .btn-ghost:hover { background: #f3f6fa; box-shadow: none; }
.hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn-icon { width: 48px; min-width: 48px; padding: 0; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: var(--fs-small); }
.link-tel { font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; color: inherit; }
.arrow-link { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 0; margin: -10px 0; font-size: var(--fs-small); }
.arrow-link:hover { gap: 7px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--accent); }
.field label, .hc-field label { font-size: var(--fs-small); font-weight: 600; text-transform: none; letter-spacing: 0; }
.turnstile-slot { min-height: 65px; }
.product-card, .sector-card, .contact-card, .blog-card, .acc-card, .how-card, .prijs-card { box-shadow: none; border: 1px solid var(--line); }
.product-media, .pdp-stage, .pdp-thumbs button { background: var(--photo-bg); }
.tick { background: none; border-radius: 0; width: auto; height: auto; box-shadow: none; }
.tick svg { width: 20px; height: 20px; color: var(--ok); }
@media (hover: none) {
  .btn:hover, .chip:hover, .kh-btn:hover, .wa-float:hover, .product-card:hover .product-media a.media-link img, a.sector-card:hover .sector-link svg { transform: none; }
  .product-card:hover, a.sector-card:hover, .contact-card:hover, a.blog-card:hover, .acc-card:hover, .chip:hover, .kh-btn:hover { transform: none; box-shadow: none; }
  .btn:active, .pdp-thumb:active, .kh-btn:active, .faq-q:active { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 620px) {
  .container { padding-inline: 16px; }
  :root { --shadow: 0 4px 14px rgba(20, 28, 58, .08); }
}
.hero--koel, .hero { background: var(--dark); }
.hero::before, .hero--koel::before, .hero::after { content: none; display: none; }
.hero--koel .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-areas: "inner visual" "check check" "proof proof"; gap: 12px 48px; align-items: center; }
.hero--koel .hero-inner { grid-area: inner; padding: 56px 0 8px; max-width: none; min-height: 0; }
.hero--koel .hero-visual { grid-area: visual; position: relative; align-self: end; padding: 32px 0 0; max-width: 520px; width: 100%; margin-left: auto; }
.hero--koel .hero-visual img { filter: none; }
.hero-check-wrap { grid-area: check; margin: 20px 0 0; padding: 0; }
.hero--koel .hero-proof { grid-area: proof; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; padding-bottom: 56px; color: rgba(255, 255, 255, .88); font-size: var(--fs-small); }
.hero--koel .hero-proof .link-tel { color: #fff; font-size: 1rem; }
.hero--koel .lead { color: rgba(255, 255, 255, .88); max-width: 54ch; }
.hero--koel h1 { font-size: var(--fs-h1); line-height: 1.08; margin-bottom: 14px; }
.hero-chip { display: none !important; }
.hero-check { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 12px; align-items: end; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.hero-check .hc-field { min-width: 0; }
.hero-check .hc-field label { display: block; margin-bottom: 6px; color: var(--ink); }
.hero-check .btn { white-space: nowrap; min-height: 48px; }
.hero-check .hc-note { grid-column: 1 / -1; margin: 0; font-size: var(--fs-small); color: var(--muted); }
.open-status i { display: none; }
.open-status { font-size: var(--fs-small); }
.open-status.is-open span::before { content: "● "; color: #4ade80; }
.open-status.is-closed span::before { content: "● "; color: rgba(255, 255, 255, .5); }
.who .open-status.is-closed span::before { color: var(--muted); }
@media (max-width: 980px) {
  .hero--koel .hero-grid { grid-template-columns: 1fr; grid-template-areas: "inner" "visual" "check" "proof"; gap: 0; }
  .hero--koel .hero-inner { padding: 28px 0 0; }
  .hero--koel h1 { margin-bottom: 10px; }
  .hero--koel .lead { font-size: 1rem; margin-bottom: 0; }
  .hero--koel .hero-visual { display: block; max-width: 200px; margin: 10px 0 14px; padding: 0; align-self: start; }
  .hero--koel .hero-visual::after { display: none; }
  .hero-check-wrap { margin: 0; }
  /* Van/Tot naast elkaar zolang elk veld minstens 140 px heeft, anders onder
     elkaar (anders knipt de datum af in Chromium op 320 px). */
  .hero-check { grid-template-columns: repeat(auto-fit, minmax(max(140px, 40%), 1fr)); gap: 10px; padding: 14px; }
  .hero-check .hc-unit, .hero-check .hc-postcode, .hero-check .btn, .hero-check .hc-note { grid-column: 1 / -1; }
  .hero--koel .hero-proof { padding: 16px 0 28px; margin: 0; }
}
/* Cijferbalk: zwevende witte kaart die half over de donkere hero valt; per
   item een icoon in een lichtblauw vlak, een korte kop en een uitleg. */
.proof-row-wrap { position: relative; z-index: 2; padding-bottom: 4px; background: linear-gradient(to bottom, var(--dark) 0 44px, transparent 44px); }
.proof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(20, 34, 56, .06), 0 18px 40px -24px rgba(20, 34, 56, .4); }
.proof-row li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; border-left: 1px solid var(--line); }
.proof-row li:first-child { border-left: 0; }
.proof-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--yellow-soft); color: var(--accent); }
.proof-ic svg { width: 22px; height: 22px; }
.proof-txt { display: grid; gap: 2px; min-width: 0; }
.proof-row b { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.proof-row .proof-txt > span { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
@media (max-width: 980px) {
  .proof-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-row li:nth-child(3) { border-left: 0; }
  .proof-row li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .proof-row-wrap { background: linear-gradient(to bottom, var(--dark) 0 28px, transparent 28px); }
  .proof-row { grid-template-columns: minmax(0, 1fr); padding: 4px 14px; border-radius: 14px; }
  .proof-row li, .proof-row li:nth-child(3) { gap: 12px; padding: 12px 12px 12px 0; border-left: 0; }
  .proof-row li + li { border-top: 1px solid var(--line); }
  .proof-ic { width: 36px; height: 36px; border-radius: 10px; }
  .proof-ic svg { width: 19px; height: 19px; }
  .proof-row b { font-size: 1rem; }
}
.section { padding-block: var(--sp, 72px); }
.section--tight { --sp: 48px; }
@media (max-width: 620px) {
  .section { --sp: 56px; }
  .section--tight { --sp: 40px; }
}
.duo { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; align-items: end; margin-top: 8px; }
.duo-media { display: grid; place-items: center; background: var(--photo-bg); aspect-ratio: 4 / 3; padding: 8%; border-radius: var(--radius); overflow: hidden; }
.duo-media img { max-height: 100%; width: auto; object-fit: contain; transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .duo-media:hover img { transform: scale(1.02); }
}
.duo h3 { font-size: 1.5rem; margin-top: 18px; }
.duo h3 a:hover { text-decoration: underline; }
.duo .spec-line { color: var(--muted); font-size: var(--fs-small); margin-top: 6px; }
.duo .price { font-size: 1.15rem; margin: 10px 0 14px; }
.duo .btn { width: auto; }
@media (max-width: 700px) {
  .duo { grid-template-columns: 1fr; gap: 36px; }
  .duo .btn { width: 100%; }
}
.compare-blok { margin-top: 48px; }
.compare-blok h3 { margin-bottom: 14px; }
.compare-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 20px; }
.compare-wrap { overflow: visible; }
.compare, .compare.is-stack, .compare.is-compact { width: 100%; border-collapse: collapse; font-size: .95rem; display: table; table-layout: fixed; }
.compare thead, .compare tbody, .compare tr { display: revert; }
.compare thead th { background: none; color: var(--ink); font-weight: 600; text-align: left; padding: 12px; border-bottom: 2px solid var(--ink); position: static; }
.compare thead th a { color: inherit; }
.compare td, .compare tbody th { display: table-cell; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; position: static; min-height: 0; }
.compare td::before { content: none; }
.compare tbody th { color: var(--muted); font-weight: 500; }
.compare .hi { background: var(--photo-bg); }
.compare .ok { color: var(--ok); font-weight: 600; }
.compare .ok::before { content: "✓ "; }
.compare .no { color: var(--muted); font-weight: 500; }
.compare-hint { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; }
@media (max-width: 620px) {
  .compare { font-size: var(--fs-small); }
  .compare th:first-child, .compare td:first-child { width: 30%; }
  .compare td, .compare tbody th, .compare thead th { padding: 10px 8px; }
  .compare td:first-child, .compare tbody th { padding-left: 0; }
}
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: stap; }
.stappen li { border-top: 2px solid var(--ink); padding-top: 16px; }
.stappen .num { display: block; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent); margin-bottom: 10px; }
.stappen h3 { margin-bottom: 6px; }
.stappen p { color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 700px) {
  .stappen { grid-template-columns: 1fr; gap: 22px; }
}
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
a.sector-card, .sector-card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); border: 0; box-shadow: none; background: var(--dark); }
.sector-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.sector-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, rgba(20, 34, 56, .82), transparent); }
.sector-card h3 { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; font-size: 1.15rem; z-index: 2; margin: 0; }
.sector-card .sector-media, .sector-card .sector-body, .sector-card p, .sector-card .sector-link { display: none; }
@media (hover: hover) and (pointer: fine) {
  a.sector-card:hover img { transform: scale(1.03); }
}
@media (max-width: 1080px) {
  .sector-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .sector-grid { gap: 12px; }
  .sector-card h3 { font-size: 1rem; left: 12px; right: 12px; bottom: 10px; }
}
.who { background: #fff; }
.who-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: center; }
.who-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; }
.who-body h2 { margin-bottom: 12px; }
.who-body > p { color: var(--muted); max-width: 54ch; }
.who-tel { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--ink) !important; }
.who-tel .link-tel { font-size: 1.6rem; font-weight: 700; text-decoration: none; }
.who-tel .open-status { color: var(--muted); }
.who-uren { margin-top: 6px; font-size: var(--fs-small); color: var(--muted) !important; }
.who-uren a { text-decoration: underline; text-underline-offset: .15em; }
.who .callback-form { margin-top: 24px; padding: 18px; background: var(--bg); border-radius: var(--radius); }
.who .cb-kop { font-weight: 600; margin-bottom: 10px; }
.who .cb-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.who .cb-note { margin-top: 8px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 700px) {
  .who-grid { grid-template-columns: 1fr; gap: 24px; }
  .who-foto img { aspect-ratio: 3 / 2; }
  .who .cb-row { grid-template-columns: 1fr; }
}
.reviews-band { background: var(--dark); color: #fff; padding: 64px 0; }
.reviews-head { max-width: 64ch; margin-bottom: 28px; }
.reviews-num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 1.15rem; }
.reviews-num .stars { display: inline-flex; gap: 2px; color: #ffb703; }
.reviews-num .stars svg, .review-badge .stars svg { width: 16px; height: 16px; }
.reviews-num b { font-size: 1.5rem; }
.reviews-num a { text-decoration: underline; text-underline-offset: .15em; }
.reviews-sub { margin-top: 8px; color: rgba(255, 255, 255, .7); font-size: var(--fs-small); }
.reviews-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.reviews-list blockquote { margin: 0; border-left: 2px solid rgba(255, 255, 255, .3); padding-left: 18px; }
.reviews-list blockquote p { font-size: 1.15rem; line-height: 1.45; }
.reviews-list footer { margin-top: 12px; font-size: var(--fs-small); color: rgba(255, 255, 255, .7); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.reviews-list footer b { color: #fff; }
.review-badge .stars { display: inline-flex; gap: 1px; color: #ffb703; }
@media (max-width: 760px) {
  .reviews-list { grid-template-columns: 1fr; gap: 22px; }
  .reviews-band { padding: 48px 0; }
}
.faq-more > summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; gap: 8px; }
.faq-more > summary::-webkit-details-marker { display: none; }
.faq-more > summary::after { content: "+"; font-size: 1.3rem; }
.faq-more[open] > summary::after { content: "−"; }
.faq-more[open] > summary { border-bottom: 1px solid var(--line); }
#faq .section-head { text-align: left; margin-bottom: 24px; max-width: none; }
.faq-a p { font-size: 1rem; max-width: 65ch; }
img { height: auto; }
.duo-media { position: relative; }
.duo-media img { position: absolute; inset: 8%; width: 84%; height: 84%; max-height: none; object-fit: contain; }
.who-foto { display: block; }
.who-foto img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 700px) {
  .who-foto img { aspect-ratio: 3 / 2; }
}
.stappen { list-style: none; padding-left: 0; margin: 0; }
.pdp { padding: 20px 0 48px; }
.pdp-top { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "gallery kop" "gallery buy" "gallery detail"; gap: 18px 48px; align-items: start; }
.pdp-kop { grid-area: kop; }
.pdp-buy { grid-area: buy; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: none; margin: 0; }
.pdp-gallery { grid-area: gallery; position: sticky; top: 96px; }
.pdp-detail { grid-area: detail; }
.pdp-eyebrow { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.pdp-kop h1 { font-size: var(--fs-h1); margin-bottom: 12px; }
.pdp-trust { font-size: var(--fs-small); color: var(--muted); margin: 12px 0 0; }
.pdp-buy .btn-primary { width: 100%; }
.pdp-safety { font-size: var(--fs-small); color: var(--muted); margin: 8px 0 0; }
.pdp-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; font-size: var(--fs-small); }
.pdp-contact .link-tel { font-size: 1.05rem; }
.pdp-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; min-height: 44px; font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.pdp-wa svg { width: 18px; height: 18px; color: #075e54; }
.pdp-price-note { font-size: var(--fs-small); color: var(--muted); margin: 6px 0 16px; }
.pdp-stage { background: var(--photo-bg); border-radius: var(--radius); border: 0; box-shadow: none; }
.pdp-stage img { mix-blend-mode: normal; padding: 24px; }
.pdp-thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 10px; }
.pdp-thumbs button { min-width: 44px; min-height: 44px; aspect-ratio: 1; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--photo-bg); overflow: hidden; }
.pdp-thumbs button.active { border-color: var(--ink); box-shadow: none; }
.pdp-detail .pdp-lead { margin: 4px 0 16px; color: var(--ink); }
.pdp-key .tick { background: none; width: auto; height: auto; }
.pdp-key .tick svg { width: 18px; height: 18px; color: var(--ok); }
.pdp-key li { font-size: 1rem; }
.pdp-mini-usps svg { color: var(--accent); }
.pdp-gallery-links { margin-top: 18px; }
.pdp-gallery-links a, .pdp-gallery-links button { min-height: 44px; }
.pdp-foto-note { font-size: var(--fs-micro); color: var(--muted); margin-top: 8px; }
.lees-verder > summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; list-style: none; }
.lees-verder > summary::-webkit-details-marker { display: none; }
.lees-verder > summary::after { content: "+"; margin-left: 8px; font-size: 1.2rem; }
.lees-verder[open] > summary::after { content: "−"; }
.spec-table .spec-row { display: grid; grid-template-columns: 42% 1fr; gap: 14px; }
.spec-table .spec-row dd { text-align: left; }
.zuster-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 20px; }
.zuster-list li a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 0; border-top: 1px solid var(--line); }
.zuster-list svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.zuster-list b { display: block; }
.zuster-list span span { font-size: var(--fs-small); color: var(--muted); }
.acc-card .acc-ico { background: none; width: auto; height: auto; }
.acc-card .acc-ico svg { color: var(--accent); width: 24px; height: 24px; }
@media (max-width: 980px) {
  .pdp-top { display: flex; flex-direction: column; gap: 16px; }
  .pdp-gallery { position: static; }
  .pdp-stage img { padding: 14px; }
  .pdp-kop h1 { margin-bottom: 10px; }
  .pdp-buy { padding: 16px; }
}
@media (max-width: 700px) {
  .zuster-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .spec-table .spec-row { grid-template-columns: 42% 1fr; gap: 10px; }
  .spec-table .spec-row dd { text-align: left; overflow-wrap: anywhere; }
  /* Lange labels ("Temperatuurbereik") afbreken in plaats van over de waarde
     heen; alleen woorden van 10+ letters, zodat "binnen" en "remmen" heel blijven. */
  .spec-table .spec-row dt { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 6 5; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 5; }
}
.pdp { padding-top: 10px; }
.pdp .breadcrumb { margin-bottom: 14px; font-size: var(--fs-micro); }
@media (max-width: 980px) {
  .pdp { padding-top: 6px; }
  .pdp .breadcrumb { margin-bottom: 8px; }
}
.unit-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 16px; }
.unit-keuze legend { font-size: var(--fs-small); font-weight: 600; margin-bottom: 8px; padding: 0; }
.unit-optie { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-control); cursor: pointer; }
.unit-optie input { flex: none; margin: 0; }
.unit-optie img { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; flex: none; }
.unit-optie .unit-ico { width: 48px; height: 36px; display: grid; place-items: center; border-radius: 4px; background: var(--bg); color: var(--muted); font-weight: 700; flex: none; }
.unit-optie b { display: block; font-size: var(--fs-small); line-height: 1.25; }
.unit-optie small { display: block; font-size: var(--fs-micro); color: var(--muted); line-height: 1.3; }
.unit-optie:has(input:checked) { border-color: var(--accent); background: #e3eef9; }
.form-progress-num { background: none; color: var(--accent); width: auto; height: auto; font-weight: 700; }
.form-progress { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.form-progress-van { font-size: var(--fs-small); }
.form-progress-bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin-bottom: 18px; overflow: hidden; }
.form-progress-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.5); transition: transform .25s ease; }
.form-extra { border-top: 1px solid var(--line); margin: 4px 0 14px; }
.form-extra > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent); padding: 8px 0; }
.form-extra > summary::-webkit-details-marker { display: none; }
.form-extra > summary small { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }
.form-extra > summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; }
.form-extra[open] > summary::after { content: "−"; }
.form-extra > .form-row:first-of-type { margin-top: 6px; }
.modal-foot { margin-top: 8px; }
.modal-foot .btn { width: 100%; margin: 0; }
.modal-foot .form-note { margin-top: 10px; font-size: var(--fs-small); text-align: left; }
.modal .modal-foot { position: sticky; bottom: 0; background: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); z-index: 1; }
.form-samenvatting { font-size: var(--fs-small); color: var(--muted); background: var(--bg); border-radius: var(--r-control); padding: 10px 12px; margin-bottom: 14px; }
.form-wijzig { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 24px; }
.form-trust { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-back { background: none; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.form-back svg { width: 16px; height: 16px; }
.field-error { font-size: var(--fs-small); color: #b42318; margin-top: 4px; }
.form-error { font-size: var(--fs-small); }
.modal-close { width: 44px; height: 44px; }
.modal-head { padding-right: 52px; margin-bottom: 14px; }
.modal-head h2 { font-size: 1.35rem; }
.modal-head h2:focus { outline: none; }
.modal-product { font-size: var(--fs-small); color: var(--muted); background: none; border: 0; padding: 0; margin: 0; font-weight: 400; }
.modal-overlay { overscroll-behavior: contain; }
body.modal-open { position: fixed; width: 100%; overflow: hidden; }
@media (max-width: 620px) {
  .unit-keuze { grid-template-columns: 1fr; gap: 8px; }
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .form-row.form-datums { grid-template-columns: repeat(auto-fit, minmax(max(140px, 40%), 1fr)); }
  /* Sheet op de onderrand (een auto-marge rondom centreerde hem); geen
     onderpadding, zodat de sticky voet op de rand eindigt en er niets onder
     doorschijnt. De lege regel houdt "Terug naar stap 1" van de rand. */
  .modal { margin: auto 0 0; padding: 0 18px 0; }
  .modal .form-step[data-step="2"]::after { content: ""; display: block; height: 16px; }
  .modal-head { padding-top: 18px; }
}
.page-hero { background: var(--dark); color: #fff; padding: 36px 0 44px; }
.page-hero::before, .page-hero::after { content: none; }
.page-hero h1 { font-size: var(--fs-h1); margin: 8px 0 12px; }
.page-hero > .container > p { color: rgba(255, 255, 255, .88); max-width: 54ch; font-size: var(--fs-lead); }
.page-hero .breadcrumb { font-size: var(--fs-micro); color: rgba(255, 255, 255, .7); }
.page-hero .breadcrumb a { color: inherit; }
.page-hero-check { margin-top: 24px; color: var(--ink); }
.page-hero-check .hero-check { box-shadow: var(--shadow); }
.page-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.page-status { margin-top: 12px; font-size: var(--fs-small); color: rgba(255, 255, 255, .85); }
.catalog { padding: 48px 0 24px; }
.catalog-layout { display: block; }
.catalog-main { width: 100%; }
.catalog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; }
.catalog-note { margin-top: 18px; font-size: var(--fs-small); color: var(--muted); max-width: 64ch; }
.product-card .product-badge, .product-card .card-ctas .btn-ghost, .product-card .card-route .chip, .cat-tabs.catalog-tabs { display: none; }
.product-card { background: #fff; }
.product-card .product-media { background: var(--photo-bg); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 6%; }
.product-card .product-media img { max-height: 100%; width: auto; height: auto; object-fit: contain; }
.product-card .card-ctas .btn-yellow { width: 100%; }
.proof-row--dark { border: 0; margin-top: 28px; }
.proof-row--dark li { border-color: rgba(255, 255, 255, .2); }
.proof-row--dark b { color: #fff; }
.proof-row--dark span { color: rgba(255, 255, 255, .72); }
@media (max-width: 620px) {
  .catalog-grid { grid-template-columns: 1fr; gap: 16px; }
  .page-hero { padding: 24px 0 28px; }
  .page-ctas .btn { width: 100%; }
  .proof-row--dark li:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .2); }
}
.dark-section, .cta-band, .split, .about-feature { clip-path: none; }
.accent-block { display: none; }
.how-card .hn { background: none; color: var(--accent); width: auto; height: auto; font-size: 1.6rem; font-weight: 700; box-shadow: none; border-radius: 0; }
.how-card { box-shadow: none; border: 1px solid var(--line); }
.stat-tile { background: var(--dark); border-radius: var(--radius); box-shadow: none; }
.values-head h2 { font-size: var(--fs-h2); }
.team-card { box-shadow: none; }
.site-header .btn-yellow { min-height: 44px; }
.compare, .compare.is-compact, .compare-wrap table { min-width: 0; }
.compare-wrap { overflow-x: visible; }
.compare th, .compare td { overflow-wrap: anywhere; }
.logo-tld, i.logo-tld { font-size: var(--fs-micro); }
.review-badge .g { font-size: var(--fs-micro); }
.review-badge { min-height: 44px; align-items: center; }
.review-badge .muted, .pdp-price .unit, span.optioneel, .form-trust .muted { font-size: var(--fs-micro); }
.product-card .spec-line, .duo .spec-line { font-size: var(--fs-small); }
.site-header .logo, .site-footer .logo { min-height: 48px; display: inline-flex; align-items: center; }
.site-header .header-phone, .site-header .nav-toggle { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
.site-header .keep-on-mobile, .site-header .btn { min-height: 48px; }
.footer-links { gap: 0 12px; }
.footer-links a { min-width: 48px; padding: 10px 4px; justify-content: center; }
.duo h3 a, .product-card h3 a, .catalog-grid h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-block a, .pdp-contact a, li > a[href^="tel:"], li > a[href^="mailto:"], .footer-adres a, .footer-uren a, .who-uren a, .article-body a[href^="tel:"], .article-body a[href^="mailto:"] { display: inline-block; padding: 10px 0; }
.who .callback-form, .who .callback-form label, .who .cb-kop, .who .cb-note, .who .callback-form .field label { color: var(--ink); }
.who .cb-note { color: var(--muted); opacity: 1; }
/* Scroll-lock alleen waar het hamburgermenu bestaat: een achtergebleven
   nav-open (venster verbreed met het menu open) zet de desktoppagina niet vast. */
@media (max-width: 980px) {
  body.nav-open { position: fixed !important; width: 100%; overflow: hidden; }
}
@media (min-width: 400px) and (max-width: 980px) {
  .site-header .header-phone { width: auto; min-width: 48px; }
}
.logo .logo-tld, .logo-word .logo-tld, .logo-tld { font-size: 13px; }
@media (max-width: 980px) {
  .main-nav.open > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .main-nav.open > ul > li.nav-cta, .main-nav.open > ul > li.nav-mega { grid-column: 1 / -1; }
  .main-nav.open > ul > li > a { min-height: 44px; padding: 10px 6px; font-size: var(--fs-small); }
  .main-nav.open .nav-cta { padding-bottom: 10px; margin-bottom: 2px; }
  .main-nav.open .nav-cats ul a { min-height: 44px; padding: 2px 6px; font-size: var(--fs-small); }
  .main-nav.open .nav-kolom:nth-child(2) ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .main-nav.open .nav-groep { padding: 8px 6px 2px; }
  .main-nav.open .nav-subs .nav-uitleg { min-height: 44px; padding: 10px 6px; font-size: var(--fs-small); }
  .main-nav.open .nav-cat-beeld { width: 36px; height: 27px; }
  /* Offerte- en belknop los van elkaar; de omlijnde belknop houdt zijn onderrand. */
  .main-nav.open > ul > li.nav-cta { display: grid; gap: 10px; }
  .main-nav.open > ul > li.nav-cta > a.btn-secondary { border-bottom: 1px solid var(--ink); }
}
h3 > a, .prijs-card h3 a, .prijs-grid h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-block a, .pdp-contact a, li > a[href^="tel:"], li > a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 0; }
.article-body li a:not(.btn) { display: inline-block; padding-block: 12px; margin-block: -12px; }
.review-badge b { font-size: var(--fs-small); }
.review-badge .muted, .breadcrumb, .page-hero .breadcrumb, .pdp .breadcrumb, .pdp-price .from, .pdp-price .unit, .footer-legal, .footer-legal a, span.optioneel, .form-trust .muted { font-size: var(--fs-small); }
.hc-note, .page-hero-check .hc-note, .cap-line, .cap-line span, .card-route, .card-route span, .product-card .cap-line { font-size: var(--fs-small); }
.article-body a:not(.btn), .article a:not(.btn) { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ---- V2: reviewronde 2 ---- */
/* 1. desktop: nummer naast de knop zichtbaar */
/* Nummer voluit pas vanaf 1081 px: daaronder past het naast menu en knop niet
   (met Figtree liep de header van 981 tot 1010 px buiten beeld, met het
   bredere Inter tot 1057 px) en blijft het het blauwe belknopje. */
@media (min-width: 1081px) {
  .site-header .header-phone { width: auto; min-width: 48px; padding-inline: 10px 14px; gap: 8px; }
  .site-header .header-phone-label { display: inline; }
}
/* 2. sticky balk: één regel, knop breekt niet, label met ellipsis */
.pdp-sticky { min-height: 60px; }
.pdp-sticky .sticky-price { flex: 1 1 0; min-width: 0; }
.pdp-sticky .sticky-price b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.pdp-sticky .sticky-price span { font-size: var(--fs-small); }
.pdp-sticky .btn-primary { flex: 0 0 auto; white-space: nowrap; padding-inline: 16px; }
.pdp-sticky .btn-icon { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; }
/* 3. vergelijktabel: rijkoppen mogen afbreken */
.compare tbody th, .compare thead th { white-space: normal; hyphens: auto; }
@media (max-width: 620px) { .compare th:first-child, .compare td:first-child { width: 34%; } .compare tbody th { padding-right: 8px; } }
/* 4. over-ons */
.about-h1 { overflow-wrap: normal; }
.values-head, .why-head { text-align: left; }
/* 5. pop-up stap 1 compacter; stap 2 zonder loze ruimte */
@media (max-width: 620px) {
  .unit-keuze { grid-template-columns: 1fr 1fr; gap: 8px; }
  .unit-optie { min-height: 56px; padding: 6px 10px; }
  .unit-optie img, .unit-optie .unit-ico { width: 40px; height: 30px; }
  .modal-foot { padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
}
.modal .form-step[data-step="2"] { margin-top: 0; padding-top: 0; border-top: 0; }
.modal-product { display: block; }
/* 11. vinkjes en kleine tekst */
.vinkje { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 1rem; }
.vinkje-groep { display: grid; gap: 4px; }
.vinkje-label, .unit-optie small, .sticky-price span { font-size: var(--fs-small); }
@media (max-width: 620px) { .form-vinkjes { flex-direction: column; align-items: stretch; } }
/* 19. geen cirkels, tegels of oranje; geen bolletje bij de bereikbaarheid */
.why-box .tick, .trust-box .tick, .prijs-card .tick, .included-grid .tick, .usp-list .tick, .pdp-key .tick, .included-strip .tick, .hc-note .tick,
.check-card .ci, .contact-card .ci, .contact-card .ci-ico, .proscons .pc-ico { width: auto; height: auto; min-width: 0; background: none; border-radius: 0; box-shadow: none; color: var(--ok); display: inline-flex; }
.tick svg, .ci svg, .ci-ico svg, .pc-ico svg { width: 20px; height: 20px; }
.check-card .ci svg, .contact-card .ci svg, .contact-card .ci-ico svg { width: 22px; height: 22px; color: var(--ink); }
.proscons .pc-ico { color: var(--ink); font-weight: 700; }
.proscons .cons .pc-ico, .proscons .cons .pc-ico svg { color: var(--muted); }
.why-box .tick, .trust-box .tick, .on-dark .tick { color: #fff; }
.open-status span::before, .open-status.is-open span::before, .open-status.is-closed span::before { content: none; }
.open-status { display: inline-block; min-height: 1.4em; }
/* 21/22. kaarten: één primaire knop, geen chips of badges; prijskaarten in twee kolommen */
.product-card .card-route, .prijs-card .product-badge { display: none; }
.product-card { position: relative; }
.product-card h3 a::after { content: ""; position: absolute; inset: 0; }
.product-card .card-ctas { position: relative; z-index: 1; }
.product-card .cap-line { font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 700px) { .prijs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } }
/* 23/24/25. duo-vlak zichtbaar, FAQ uitgelijnd, links in lopende tekst herkenbaar */
.duo-media { background: #fff; border: 1px solid var(--line); }
#faq .faq { margin-inline: 0; max-width: 760px; }
.faq-a a, .reading-prose a, .catalog-note a, .pdp-prose a, .article-body p a, .lead a, .section-intro a, .pdp-lead a, .how-card a, .pdp-term a { color: var(--accent-600); text-decoration: underline; text-underline-offset: .15em; }
.why-box a, .on-dark a:not(.btn), .hero a:not(.btn):not(.review-badge), .cta-band a:not(.btn) { color: #fff; }
/* 31. footer-adres op één of twee regels */
.site-footer .footer-brand p { max-width: none; }
.footer-uren a { white-space: nowrap; }
/* 33. focus zichtbaar op donkere vlakken en op radiokaarten */
.help-band .btn:focus-visible, .page-hero .btn:focus-visible, .hero .btn:focus-visible, .reviews-band .btn:focus-visible, .site-footer .btn:focus-visible, .dark-section .btn:focus-visible, .article-cta .btn:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px var(--dark); }
.unit-optie:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 34. WhatsApp-float met contrast */
.wa-float { background: #075e54; }
.wa-float:hover { background: #054c44; }
/* 29. breadcrumb- en tabelkoplinks met tikvlak */
.breadcrumb a, .compare thead th a { display: inline-block; padding: 10px 0; margin: -10px 0; }
/* Pop-up stap 1 op een kleine telefoon: kop en voet compacter, zodat periode en postcode boven de voet staan. */
@media (max-width: 620px) {
  .modal-head p.modal-product { display: none; }
  .modal-head { margin-bottom: 8px; }
  .modal-head h2 { font-size: 1.2rem; }
  .modal .form-progress { margin-bottom: 4px; }
  .modal .form-progress-bar { margin-bottom: 12px; }
  .modal .form-row { margin-bottom: 10px; }
  .modal .unit-keuze { margin-bottom: 10px; }
  .modal .unit-keuze legend { margin-bottom: 6px; }
  .modal .form-step[data-step="1"] .modal-foot .form-note { display: none; }
  .modal .form-step[data-step="1"] .modal-foot { padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
}
/* Unitkaarten in de pop-up op een telefoon: één kolom met lage rijen (twee kolommen liepen over de rand). */
@media (max-width: 620px) {
  .unit-keuze { grid-template-columns: 1fr; gap: 6px; }
  .unit-optie { min-height: 48px; padding: 4px 10px; min-width: 0; overflow: hidden; }
  .unit-optie > span { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
  .unit-optie b { display: inline; }
  .unit-optie small { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .unit-optie img, .unit-optie .unit-ico { width: 36px; height: 27px; }
}

/* ---- V2: prestatieronde ---- */
.ster { width: 16px; height: 16px; display: inline-block; }
.review-badge .stars, .reviews-num .stars { display: inline-flex; gap: 1px; color: #ffb703; }
/* Productpagina korter: één lijst zonder iconen, opties en checklist als regels */
.pdp-h2 { margin-top: 8px; }
.included-list { margin-top: 14px; columns: 2; column-gap: 32px; }
.included-list li { break-inside: avoid; display: flex; gap: 10px; padding: 6px 0; font-size: 1rem; }
.included-list li .tick { flex: none; }
.included-list .included-kop { display: block; column-span: all; font-weight: 600; color: var(--muted); padding: 14px 0 4px; }
.opties-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.opties-list li { border-top: 1px solid var(--line); padding: 14px 0; }
.opties-list h3 { font-size: 1.05rem; margin-bottom: 4px; }
.opties-list p { color: var(--muted); font-size: var(--fs-small); margin: 0; }
.check-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.check-row { border-top: 1px solid var(--line); padding: 14px 0; }
.check-row dt { font-weight: 600; margin-bottom: 4px; }
.check-row dd { margin: 0; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 620px) { .included-list { columns: 1; } .opties-list, .check-rows { grid-template-columns: 1fr; } }
/* Keuzepagina: stappenstijl in plaats van kaarten, en de navy kaders licht */
.how-grid .how-card { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 16px 0 0; background: none; box-shadow: none; }
.how-card .hn { font-size: 2rem; margin-bottom: 8px; display: block; }
.why-box { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; box-shadow: none; }
.why-box h3, .why-box b, .why-box li { color: var(--ink); }
.why-box .tick { color: var(--ok); }
.why-box a { color: var(--accent-600); }

/* ---- Kortere pagina's op een telefoon ---- */
.proscons > div { border: 0; border-radius: 0; padding: 0; background: none; }
.proscons { gap: 8px 32px; margin: 4px 0 24px; }
.proscons h3 { margin-bottom: 8px; }
.proscons li { margin-bottom: 6px; }
@media (max-width: 620px) {
  .section { --sp: 44px; }
  .section--tight { --sp: 32px; }
  .proscons { grid-template-columns: 1fr; gap: 18px; }
  .included-list li { padding: 3px 0; font-size: var(--fs-small); }
  .included-list .included-kop { padding: 10px 0 2px; }
  .opties-list li, .check-row { padding: 10px 0; }
  .reviews-list li:nth-child(n+3) { display: none; }
  .reviews-band { padding: 40px 0; }
  .pdp-detail .pdp-key li { font-size: var(--fs-small); }
  .pdp-mini-usps { gap: 8px 14px; }
  .pdp-gallery-links { margin-top: 10px; }
}

/* Productpagina op een telefoon: geen dubbele USP-regels, compact Duco-blok */
@media (max-width: 620px) {
  .pdp-mini-usps { display: none; }
  .who.section--tight .who-grid { grid-template-columns: 112px 1fr; gap: 16px; align-items: start; }
  .who.section--tight .who-foto img { aspect-ratio: 4 / 5; border-radius: var(--r-control); }
  .who.section--tight h2 { font-size: 1.25rem; }
  .who.section--tight .who-body > p:first-of-type { font-size: var(--fs-small); }
  .who.section--tight .who-tel .link-tel { font-size: 1.3rem; }
}
/* Licht kader: tekst in inkt (de oude navy-regel .why-box ul li was specifieker) */
.why-box ul li, .why-box ul li span { color: var(--ink); }
.why-box ul li { font-size: var(--fs-small); }
/* Plus- en minpunten: tekens zonder gekleurde rondjes */
.proscons .pros h3 .pc-ico, .proscons .cons h3 .pc-ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); font-weight: 700; }
.proscons .cons h3 .pc-ico { color: var(--muted); }
.proscons .cons li svg { color: var(--muted); }
/* "Komt erbij of is optioneel": geen groen vinkje bij kosten */
.included-list .included-kop ~ li .tick svg { color: var(--muted); }


/* ==========================================================================
   Ronde 3 (24 okt): gelijke formuliervelden, hulpblok met Raaf, footer in
   vier kolommen (naar watertankie.nl), browseroppervlakken.
   ========================================================================== */

/* Velden: één maat, één rand, één binnenmarge, op elk formulier. De
   basisregel weegt (0,3,1); de regels voor select, textarea en datum hieronder
   wegen even zwaar (via :not) zodat ze, later in het bestand, winnen.
   appearance: none haalt de eigen iOS/Safari-vormgeving weg (afgeronde
   select met dubbele pijl, ingesprongen datum), zodat tekst in elk veld op
   dezelfde lijn begint. */
:is(.field, .hc-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-width: 0; margin: 0;
  height: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid #b3c1d0; border-radius: var(--r-control);
  background-color: #fff; color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.3; text-align: left;
  box-shadow: 0 1px 2px rgba(20, 34, 56, .05);
  caret-color: var(--accent);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
:is(.field, .hc-field) textarea:not([hidden]):not([readonly]) { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
:is(.field, .hc-field) select:not([multiple]):not([size]) {
  padding-right: 42px; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142238' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px 18px;
}
:is(.field, .hc-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):hover { border-color: #8d9db0; }
:is(.field, .hc-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 102, 194, .2);
}
:is(.field, .hc-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
:is(.field, .hc-field) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)[aria-invalid="true"]:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(.field, .hc-field) ::placeholder { color: #6b7682; opacity: 1; }
/* Datum: tekst links en verticaal gecentreerd, ook in Safari op iOS. */
:is(.field, .hc-field) input[type="date"]:not([hidden]) { line-height: 46px; }
:is(.field, .hc-field) input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
:is(.field, .hc-field) input[type="date"]::-webkit-datetime-edit,
:is(.field, .hc-field) input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:is(.field, .hc-field) input[type="date"]::-webkit-calendar-picker-indicator { margin: 0 0 0 6px; padding: 0; opacity: .6; cursor: pointer; }
/* Smalle telefoon: kalendericoon dichter op de rand, zodat "dd-mm-jjjj" in
   Chromium ook in een veld van 140-150 px past (Van/Tot naast elkaar op 360 px). */
@media (max-width: 380px) {
  :is(.field, .hc-field) input[type="date"]:not([hidden]) { padding-right: 8px; }
  :is(.field, .hc-field) input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 4px; }
}
/* Getal zonder pijltjes (trekgewicht, aantal). */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Labels: overal dezelfde afstand tot het veld. */
.field:not(fieldset), .hc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .hero-check .hc-field > label, .cb-row .field > label { margin: 0; line-height: 1.35; }
/* "Nog iets toevoegen?": kop en uitleg onder elkaar, pijl rechts. */
.form-extra > summary { gap: 12px; padding: 10px 0; }
.form-extra .fe-kop { display: grid; gap: 2px; min-width: 0; }
.form-extra .fe-kop b { font-weight: 600; color: var(--accent); }
.form-extra .fe-kop small { font-weight: 400; color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.form-extra > summary::after, .form-extra[open] > summary::after {
  content: ""; flex: none; width: 20px; height: 20px; margin-left: auto; font-size: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.form-extra[open] > summary::after { transform: rotate(180deg); }

/* Hulpblok boven de footer: Raaf en vier routes. */
.help-band { padding: 64px 0; color: #fff; background: linear-gradient(125deg, #0b6ccb 0%, #0a58a8 42%, #1b2a52 100%); }
.help-head { max-width: 62ch; margin-bottom: 32px; }
.help-head h2 { font-size: var(--fs-h2); color: #fff; margin: 0 0 8px; }
.help-head p { margin: 0; color: rgba(255, 255, 255, .92); }
.help-inner { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 40px; align-items: center; }
.help-person { margin: 0; display: grid; justify-items: center; gap: 14px; text-align: center; }
.help-photo { display: block; width: 136px; height: 136px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .24); box-shadow: 0 14px 30px -12px rgba(6, 16, 40, .6); }
.help-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.help-person figcaption { display: grid; gap: 2px; }
.help-person figcaption b { color: #fff; font-weight: 700; }
.help-person figcaption span { font-size: var(--fs-small); color: rgba(255, 255, 255, .92); }
.help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.help-card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; margin: 0;
  padding: 14px 16px 14px 14px; border: 0; border-radius: var(--radius);
  background: #fff; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(6, 16, 40, .14), 0 12px 26px -16px rgba(6, 16, 40, .55);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .help-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(6, 16, 40, .14), 0 20px 36px -18px rgba(6, 16, 40, .65); }
  .help-card:hover .help-arrow { transform: translateX(3px); color: var(--accent); }
}
.help-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.help-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--yellow-soft); color: var(--accent); }
.help-ic svg { width: 22px; height: 22px; }
.help-card.is-primary .help-ic { background: var(--accent); color: #fff; }
.help-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.help-txt b { font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.help-txt span { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.help-arrow { flex: none; display: grid; color: #8796a8; transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.help-arrow svg { width: 18px; height: 18px; }
.help-terugbel { margin: 24px 0 0 224px; }
.help-terugbel .callback-form { margin: 0; }
.help-terugbel .cb-note { font-size: var(--fs-small); opacity: 1; color: rgba(255, 255, 255, .92); }
.help-terugbel .cb-row .field > label { color: #fff; }
.help-terugbel .cb-row .field input:focus { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }
/* Foutmelding op het blauw: dezelfde chip als .form-error, anders onleesbaar rood op blauw. */
.help-band .field-error { width: fit-content; margin-top: 0; padding: 4px 8px; border-radius: 6px; background: #fdecec; color: #9b1c1c; }
/* Terugbelrij met drie kolommen: label, veld en foutmelding delen elk een rij
   (subgrid), zodat een foutmelding onder één veld de velden en de knop niet
   uit lijn duwt. Op een telefoon is het één kolom en speelt dit niet. */
@media (min-width: 621px) {
  .help-terugbel .cb-row { align-items: start; grid-template-rows: auto auto auto; row-gap: 0; }
  .help-terugbel .cb-row > .field > label { margin-bottom: 6px; }
  .help-terugbel .cb-row > .field > .field-error { margin-top: 6px; }
  .help-terugbel .cb-row > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .help-terugbel .cb-row > .btn { grid-area: 2 / 3; }
}
@media (min-width: 701px) {
  .who .cb-row { align-items: start; grid-template-rows: auto auto auto; row-gap: 0; }
  .who .cb-row > .field > label { margin-bottom: 6px; }
  .who .cb-row > .field > .field-error { margin-top: 6px; }
  .who .cb-row > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .who .cb-row > .btn { grid-area: 2 / 3; }
}
/* Tablet: in de smalle kolom naast de foto zijn drie kolommen te krap (velden
   van 82-124 px knippen de tekst af). Velden naast elkaar, knop eronder. */
@media (min-width: 701px) and (max-width: 960px) {
  .who .cb-row { grid-template-columns: 1fr 1fr; }
  .who .cb-row > .btn { grid-area: 4 / 1 / 5 / -1; margin-top: 10px; }
}
/* Formulierrijen met twee velden: zelfde subgrid, zodat een label dat afbreekt
   ("Telefoon * voor als we een vraag hebben") het veld ernaast niet verschuift. */
@media (min-width: 621px) {
  .form-row:has(> .field + .field) { grid-template-rows: auto auto auto; row-gap: 0; align-items: start; }
  .form-row:has(> .field + .field) > .field { grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start; }
  .form-row:has(> .field + .field) > .field > label { align-self: end; margin-bottom: 6px; }
  .form-row:has(> .field + .field) > .field > .field-error { margin-top: 6px; }
}
@media (max-width: 860px) {
  .help-band { padding: 40px 0; }
  .help-head { margin-bottom: 18px; }
  .help-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .help-person { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
  .help-photo { width: 64px; height: 64px; padding: 3px; }
  .help-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .help-card { min-height: 64px; padding: 10px 14px 10px 10px; gap: 12px; }
  .help-terugbel { margin: 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .help-card, .help-arrow, .form-extra > summary::after { transition: none; }
  .help-card:hover, .help-card:hover .help-arrow { transform: none; }
}

/* Footer in vier kolommen (merk en contact, drie linkkolommen). */
.site-footer { background: #111a36; color: rgba(255, 255, 255, .74); padding: 64px 0 28px; font-size: var(--fs-small); }
.footer-top { display: grid; }
.site-footer .footer-brand { display: block; margin: 0; grid-column: auto; }
.site-footer .logo { color: #fff; margin: 0; }
.site-footer .logo b, .site-footer .logo span, .site-footer .logo .logo-word { color: #fff; }
.site-footer .logo .logo-mark { background: #fff; color: #111a36; }
.footer-intro { margin: 18px 0 0; max-width: 38ch; line-height: 1.6; color: rgba(255, 255, 255, .74); font-size: var(--fs-small); }
.footer-contact { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.footer-contact li { display: flex; align-items: center; gap: 12px; min-height: 40px; line-height: 1.45; }
@media (min-width: 641px) { .site-footer .footer-contact a { display: inline; min-height: 0; padding: 0; } }
.footer-contact svg { flex: none; width: 18px; height: 18px; color: #7cc4ff; }
.footer-contact a { color: #fff; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer-kop { margin: 4px 0 12px; font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #fff; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col a { display: inline-flex; align-items: center; min-height: 36px; color: rgba(255, 255, 255, .78); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-top: 48px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer .footer-legal { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .6); }
.site-footer .footer-legal a { display: inline-block; padding: 10px 0; font-size: inherit; color: rgba(255, 255, 255, .8); }
.site-footer .footer-legal span { padding: 10px 0; }
.footer-copy { margin: 0; padding: 10px 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .6); }
.footer-col details > summary { display: block; list-style: none; }
.footer-col details > summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) { .footer-col details > summary { pointer-events: none; cursor: default; } }
.site-footer :focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) {
  .site-footer { padding: 40px 0 16px; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .site-footer .footer-brand { margin-bottom: 20px; }
  .footer-contact li { min-height: 32px; }
  .footer-contact li:has(a) { min-height: 44px; }
  .footer-col a, .footer-contact a { display: flex; align-items: center; min-height: 44px; }
  .footer-col { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer-col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .footer-col details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; }
  .footer-col details > summary::after {
    content: ""; flex: none; width: 20px; height: 20px; background: rgba(255, 255, 255, .7);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .footer-col details[open] > summary::after { transform: rotate(180deg); }
  .footer-col .footer-kop { margin: 0; }
  .footer-col ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-bottom: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 12px; padding-top: 4px; border-top: 0; }
  .footer-copy { padding: 4px 0 0; }
  .site-footer .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .footer-col details > summary::after { transition: none; } }

/* Browseroppervlakken uit het palet. */
/* Ondoorzichtig lichtblauw met inkt: leesbaar op lichte én donkere vlakken. */
::selection { background: #cfe3f7; color: #142238; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Op donkere en blauwe vlakken een witte ring (zelfde nul-specificiteit, later, dus wint alleen van de regel hierboven). */
:where(.hero, .page-hero, .reviews-band, .help-band, .trust-box, .article-cta, .dark-section, .compare thead th.hi) :where(a, button, summary, [tabindex]):focus-visible { outline-color: #fff; }
.compare thead th.hi a:focus-visible { outline-offset: -3px; }
textarea, input { caret-color: var(--accent); }

/* Hero: 360°-draai als geanimeerde AVIF. Het vak houdt de maat vast (geen
   verschuiving). Het stilstaande beeld (eerste frame, LCP) ligt onder; main.js
   legt de animatie erover zodra die gedecodeerd is en verbergt dan het beeld
   in dezelfde frame, zonder overvloeier (geen dip). De animatie is 1 px
   kleiner dan het beeld, zodat hij nooit als groter LCP-element telt. Het vak
   is breder dan de kolom, want in het zijaanzicht is de aanhanger met dissel
   veel langer dan schuin van voren. */
.hero--koel .hero-vak { position: relative; z-index: 1; display: block; width: calc(100% + 56px); margin-left: -40px; aspect-ratio: 1284 / 741; }
.hero--koel .hero-vak > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
.hero--koel .hero-vak > .hero-anim { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.hero--koel .hero-vak.is-draait > .hero-still { visibility: hidden; }
/* Telefoon en tablet: gecentreerd, 160 px hoog. */
@media (max-width: 980px) {
  .hero--koel .hero-visual { justify-self: center; width: auto; max-width: none; margin: 10px auto 14px; }
  .hero--koel .hero-vak { width: auto; height: 160px; margin: 0 auto; }
}

/* Hero-decor (home): koel studiolicht achter de aanhanger en rijp-stippen die
   naar buiten uitvloeien (de sneeuwvlokken zijn op 24 okt 2026 weggehaald). */
.hero--koel .hero-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: #fff;
  background: radial-gradient(36% 58% at 74% 42%, rgba(64, 160, 255, .3), rgba(64, 160, 255, 0) 70%), radial-gradient(30% 46% at 4% 8%, rgba(10, 102, 194, .32), rgba(10, 102, 194, 0) 70%); }
.hero--koel .hero-decor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(34% 56% at 74% 42%, #000, transparent 78%); mask-image: radial-gradient(34% 56% at 74% 42%, #000, transparent 78%); }
@media (max-width: 980px) {
  .hero--koel .hero-decor { background: radial-gradient(70% 30% at 50% 36%, rgba(64, 160, 255, .3), rgba(64, 160, 255, 0) 70%); }
  .hero--koel .hero-decor::before { -webkit-mask-image: radial-gradient(60% 24% at 50% 36%, #000, transparent 80%); mask-image: radial-gradient(60% 24% at 50% 36%, #000, transparent 80%); }
}

/* Google-reviews (zoals watertankie.nl, in Google-vorm): score links, witte
   kaarten met initiaal, naam, sterren en tekst in een rail. Telefoon: vegen,
   met de volgende kaart half in beeld. Desktop: pijlen rechtsboven. */
.reviews-band .greviews { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 48px; align-items: center; }
.greviews-merk { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: #fff; }
.greviews-merk .g-logo { width: 28px; height: 28px; padding: 4px; background: #fff; border-radius: 50%; box-sizing: content-box; }
.greviews-num { display: flex; align-items: center; gap: 12px; margin: 0; }
.greviews-num b { font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.greviews-num .stars, .greview .stars { display: inline-flex; gap: 2px; color: #fbbc04; }
.greviews-num .stars svg { width: 22px; height: 22px; }
.greviews-sub { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.55; color: rgba(255, 255, 255, .8); }
.greviews-sub b { color: #fff; }
.greviews-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.greviews-link svg { width: 16px; height: 16px; }
.greviews-rail-wrap { position: relative; min-width: 0; }
.greviews-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radius); }
.greviews-rail::-webkit-scrollbar { display: none; }
.greviews-rail:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.greviews-list { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; margin: 0; padding: 0; list-style: none; }
.greview { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px; border-radius: var(--radius); background: #fff; color: #202124; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(6, 16, 40, .2), 0 10px 24px -16px rgba(6, 16, 40, .6); }
.greview-kop { display: flex; align-items: center; gap: 12px; }
.greview-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c); color: #fff; font-weight: 600; font-size: 1.05rem; }
.greview-wie { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.greview-wie b { font-weight: 600; color: #202124; }
.greview-wie span { font-size: var(--fs-small); color: #5f6368; }
.greview .g-logo { flex: none; width: 20px; height: 20px; }
.greview .stars svg { width: 18px; height: 18px; }
.greview p { margin: 0; font-size: .9375rem; line-height: 1.55; color: #3c4043; }
.greviews-rail-wrap { display: flex; flex-direction: column; }
/* Pijlen boven de kaarten: onderaan viel de zwevende WhatsApp-knop eroverheen. */
.greviews-pijlen { order: -1; display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 14px; }
.greviews-pijl { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.greviews-pijl svg { width: 18px; height: 18px; }
.greviews-pijl:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .greviews-pijl:not(:disabled):hover { background: rgba(255, 255, 255, .12); } }
@media (max-width: 980px) {
  .reviews-band .greviews { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .greviews-list { grid-auto-columns: minmax(260px, 46%); }
}
@media (max-width: 620px) {
  .greviews-num b { font-size: 2.8rem; }
  .greviews-list { grid-auto-columns: 84%; gap: 12px; }
  .greview { padding: 18px; }
  .greviews-pijlen { display: none; }
}

/* 'Allebei' in de unitkeuze: beide unitfoto's schuin over elkaar, zodat ook
   deze optie een beeld heeft (zelfde vak als de andere opties). */
.unit-optie .unit-duo { position: relative; flex: none; width: 48px; height: 36px; }
.unit-optie .unit-duo img { position: absolute; width: 66%; height: 72%; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(20, 34, 56, .2); }
.unit-optie .unit-duo img:first-child { left: 0; top: 0; }
.unit-optie .unit-duo img:last-child { right: 0; bottom: 0; }
@media (max-width: 620px) { .unit-optie .unit-duo { width: 36px; height: 27px; } }

/* Productpagina: persoonlijk blok met Raaf onder de knop (zoals een
   'vragen over dit product?'-kaart). Foto met een bolletje dat groen is
   zolang De-Lo bereikbaar is; eronder alleen de offerte als actie (het
   telefoonnummer staat al in het menu). */
.pdp-raaf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, #f5f9fd, #fff); }
.pdp-raaf-foto { position: relative; display: block; width: 60px; height: 60px; }
.pdp-raaf-foto img { display: block; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 4px 12px -4px rgba(20, 34, 56, .35); }
.pdp-raaf-foto::after { content: ""; position: absolute; right: 1px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9aa5b1; box-shadow: 0 0 0 3px #fff; }
.pdp-raaf:has(.open-status.is-open) .pdp-raaf-foto::after { background: var(--ok); }
.pdp-raaf-tekst { min-width: 0; }
.pdp-raaf-kop { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); }
.pdp-raaf-sub { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.pdp-raaf-status { margin: 6px 0 0; }
.pdp-raaf-status .open-status { font-size: var(--fs-small); }
.pdp-raaf-acties { grid-column: 1 / -1; }
.pdp-raaf-acties button { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--accent); border-radius: var(--r-control); background: #fff; color: var(--accent-600); font: inherit; font-size: var(--fs-small); font-weight: 650; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.pdp-raaf-acties svg { flex: none; width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease-out); }
@media (hover: hover) {
  .pdp-raaf-acties button:hover { background: #f3f8fd; }
  .pdp-raaf-acties button:hover svg { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .pdp-raaf-acties button, .pdp-raaf-acties svg { transition: none; } }
@media (max-width: 560px) {
  .pdp-raaf { gap: 10px 12px; padding: 14px; }
  .pdp-raaf-foto, .pdp-raaf-foto img { width: 52px; height: 52px; }
  .pdp-raaf-kop { font-size: 1rem; }
}

/* Footer met de kaart van het levergebied (build.js levergebied()), zoals op
   vriesboxie.nl en naar het voorbeeld van rentwereld.nl: een platte kaart als
   illustratie die van de pagina af loopt. Vanaf 1200 px staat hij rechtsonder
   in de hoek, achter de inhoud; die houdt links ruimte vrij, zodat er geen
   tekst op het land valt. Smaller staat de kaart onder de inhoud, tot de rand
   van het scherm en de pagina. Het merk staat boven de drie linkkolommen. */
.site-footer { overflow: hidden; }
.footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.site-footer .footer-brand { grid-column: 1 / -1; }
@media (max-width: 640px) { .footer-top { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Levergebied: de ondergrond (img, assets/img/levergebied.svg) en daarover
   pijlen, pinnen en namen (svg), allebei in hetzelfde kaartvak. Geen gloed,
   verloop of animatie; kleur zit alleen in de grote pin en de kobalt pijlen.
   De maat van namen, lijnen en de grote pin hangt af van hoe breed de kaart
   getekend wordt, dus per breakpoint: namen minstens 12 px, rijtijden 11 px
   vanaf 360 px breed. Telefoon: de kaart is iets breder dan het scherm en loopt
   onder de rand door, ook onderaan (de -16 px heft de padding van de footer op). */
.footer-kaart { width: 112vw; margin: 32px 0 -16px calc(50% - 56vw); }
.kaart-uitleg { max-width: 34ch; margin-left: calc(6vw + 16px); }
.kaart-kop { margin: 0 0 2px; font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #fff; }
.kaart-uitleg p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, .62); }
.kaart { --naam: 30px; --lijn: 1.3; --basis: 1.2; position: relative; aspect-ratio: 1000 / 1092; margin-top: 8px; }
.kaart > img, .kaart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaart text { font-size: var(--naam); font-weight: 650; fill: #142238; }
.kaart tspan { font-size: .9em; font-weight: 500; fill: #3f5068; }
.kaart-pijl { fill: none; stroke: var(--accent); stroke-width: calc(3.4px * var(--lijn)); stroke-linecap: round; stroke-linejoin: round; }
.kaart-pin { fill: #142238; fill-rule: evenodd; }
.kaart-basis { transform: translate(var(--x), var(--y)) scale(var(--basis)); }
.kaart-basispin { fill: #1b2a52; }
.kaart-vlok { fill: none; stroke: #7cc4ff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kaart-basis text { font-size: 27px; font-weight: 750; }
@media (min-width: 621px) { .kaart-uitleg { margin-left: calc(6vw + 24px); } }
/* Tablet en kleine laptop: onderschrift links, de kaart rechts tot de rand. */
@media (min-width: 641px) and (max-width: 1199px) {
  .footer-kaart { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; width: auto; margin: 40px calc(50% - 50vw) -28px 0; }
  .kaart-uitleg { flex: 1; max-width: 30ch; margin: 0; padding-top: 8%; }
  .kaart { flex: none; width: min(82vw, 640px); margin: 0; --naam: 24px; --lijn: 1.1; --basis: 1.05; }
}
/* Desktop: los in de hoek, achter de inhoud. De inhoud wordt zo breed als de
   ruimte links van de kaart (100vw - 100% is de marge naast de container). */
@media (min-width: 1200px) {
  .site-footer { --kaart-b: clamp(560px, 44vw, 720px); position: relative; isolation: isolate; min-height: calc(var(--kaart-b) * 1.092); }
  .footer-top, .footer-bottom { max-width: calc(100% - var(--kaart-b) + (100vw - 100%) / 2 - 48px); }
  .footer-bottom { justify-content: flex-start; }
  .footer-kaart { position: absolute; right: 0; bottom: 0; z-index: -1; width: var(--kaart-b); margin: 0; }
  .kaart-uitleg { position: absolute; top: 6%; left: 4%; z-index: 1; max-width: 28%; margin: 0; }
  .kaart { --naam: 23px; --lijn: 1; --basis: 1; margin: 0; }
}

/* Koelaanhanger of koelcel? (home, build.js duo()): één paneel met twee
   gelijke helften en "of" op de scheidslijn. Titel, specs, prijs en knop staan
   in een subgrid, zodat ze links en rechts op dezelfde hoogte liggen, hoe lang
   de specregel ook is. Op een telefoon onder elkaar, "of" op de lijn ertussen. */
.duo { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.duo-item { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; min-width: 0; padding-bottom: 28px; }
.duo-item:first-child { grid-column: 1; }
.duo-item:last-child { grid-column: 3; border-left: 1px solid var(--line); }
.duo-item > :not(.duo-media) { margin-inline: 28px; }
.duo-media { aspect-ratio: 3 / 2; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--photo-bg); }
.duo-media img { inset: 7%; width: 86%; height: 86%; }
/* De koelcel is van voren gefotografeerd en oogt als vlak blok zwaarder dan de
   aanhanger schuin van opzij: optisch iets kleiner. */
.duo-item[data-type="cel"] .duo-media img { inset: 12%; width: 76%; height: 76%; }
.duo h3 { margin-top: 18px; font-size: 1.5rem; line-height: 1.2; }
.duo .spec-line { margin-top: 4px; }
.duo .price { align-self: end; margin-block: 14px 16px; }
.duo .btn { justify-self: start; }
.duo-of { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.duo-of > span { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: .9375rem; font-weight: 650; line-height: 1; transform: translate(-50%, -50%); box-shadow: 0 6px 16px -10px rgba(20, 34, 56, .35); }
@media (max-width: 700px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo-item { display: block; grid-row: auto; padding-bottom: 22px; }
  .duo-item:first-child, .duo-item:last-child { grid-column: 1; }
  .duo-item:last-child { border-left: 0; border-top: 1px solid var(--line); }
  .duo-item > :not(.duo-media) { margin-inline: 18px; }
  .duo h3 { margin-top: 12px; font-size: 1.375rem; }
  .duo .price { margin-block: 10px 14px; }
  .duo .btn { display: flex; justify-self: stretch; width: auto; }
  .duo-of { grid-column: 1; grid-row: auto; height: 0; }
  .duo-of > span { top: 0; left: 50%; }
}

/* Header van 621 tot 680 px: logo, belknop, "Check prijs & beschikbaarheid" en
   menuknop passen pas vanaf ~666 px naast elkaar (eronder liep de menuknop tot
   21 px buiten beeld). De knop staat in de hero en de sticky balk al. */
@media (max-width: 680px) { .header-actions .btn:not(.keep-on-mobile) { display: none; } }

/* Heel smalle telefoons: "Koelaanhanger" is in Inter op --fs-h1 breder dan de
   kolom (309 px in 288 px op 320 px breed). Tot 360 px schaalt de h1 mee met
   het scherm, zodat het langste woord altijd past. */
@media (max-width: 360px) { :root { --fs-h1: 8.6vw; } }
/* Hero op heel smalle telefoons: in Inter werden de reviewbadge (309 px) en
   de knop van de prijscheck (279 px) breder dan de kolom op 320 px. Badge
   compacter, knoptekst mag over twee regels. */
@media (max-width: 360px) {
  .hero-proof .review-badge { gap: 6px; padding-inline: 8px 10px; }
  .hero-proof .review-badge .stars svg { width: 13px; height: 13px; }
  .hero-check .btn { height: auto; padding: 10px 14px; white-space: normal; line-height: 1.25; text-wrap: balance; }
}
/* 320 px: in Inter stond de menuknop 0,3 px buiten beeld; iets minder ruimte
   tussen logo en knoppen. */
@media (max-width: 340px) { .site-header .container { gap: 6px; } .header-actions { gap: 6px; } }

/* Typografie na de overstap op Inter (24 okt 2026). Inter loopt ~9 % breder
   dan Figtree; een typografiereview (6 agents, elke bevinding getoetst) vond
   deze gevolgen. Getal+eenheid, € en De-Lo houdt build.js typografie() bij elkaar. */
p, li, figcaption { text-wrap: pretty; }
.hero .lead, h3, .faq-q { text-wrap: balance; }
.help-txt b, .help-txt > span { text-wrap: pretty; }
.field label .optioneel { white-space: nowrap; }
@media (max-width: 620px) {
  /* koelcel-ondertitel in de pop-up werd afgekapt ("vaste plek" viel weg) */
  .unit-optie small { white-space: normal; text-overflow: clip; text-wrap: pretty; }
  .help-ic { width: 40px; height: 40px; }
  .help-card { gap: 10px; }
}
@media (max-width: 430px) {
  /* vergelijkingstabel: "Koelaanhanger" niet meer afgebroken vanaf 375 px */
  .compare thead th { font-size: .8125rem; padding-inline: 6px; }
  .cat-tabs { gap: 8px; }
  .cat-tabs a { padding-inline: 16px; }
  .form-trust .review-badge { gap: 6px; padding-inline: 10px 12px; }
  .form-trust .review-badge .stars svg { width: 13px; height: 13px; }
}
@media (max-width: 400px) { .article-cta { padding-inline: 20px; } }
/* Blogkaarten: titels van verschillende lengte, uittreksels toch op één hoogte. */
@media (min-width: 721px) {
  .blog-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .blog-body { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}

/* Header op een telefoon: het woordmerk schaalt mee met de schermbreedte, zodat
   logo, belknop en menuknop altijd naast elkaar passen en de menuknop rechts
   evenveel ruimte houdt als het logo links (16 px). In Inter liep de menuknop
   op 360 px tot 0,9 px van de rand en op 375 en 412 px stond hij scheef. */
@media (max-width: 430px) {
  .site-header .logo { gap: 8px; font-size: clamp(.75rem, 9.4vw - 1.15rem, 1.3rem); }
  .site-header .logo .logo-mark { width: 32px; height: 32px; flex: none; }
  .site-header .logo .logo-mark svg { width: 20px; height: 20px; }
}

/* Goedgekeurd logo A (25 okt 2026): contouren uit de logoset. De beeldverhouding
   staat ook in HTML, zodat het logo vóór het laden al ruimte reserveert. */
.logo .logo-image { display: block; width: 100%; height: auto; max-width: 100%; }
.site-header .logo { width: 220px; min-width: 0; gap: 0; flex: 0 1 auto; }
.site-footer .logo { width: 240px; max-width: 100%; gap: 0; }
@media (max-width: 620px) {
  .site-header .logo { width: 160px; gap: 0; }
  .site-footer .logo { width: 200px; }
}

/* Specialist op /contact: van Bennie is alleen een vierkant portret (29 okt 2026). */
.who-foto--portret img { aspect-ratio: 1; max-width: 400px; }
@media (max-width: 700px) {
  .who-foto--portret img { aspect-ratio: 1; max-width: 200px; }
}