/* Technical finishing only. Brand and page composition remain in the original cascade. */
:root { --action-radius: 0px; --field-radius: 8px; }
[hidden] { display: none !important; }
/* T-07 (fase 3): kleine tekst haalde met opacity .55 op wit/grijs 4,40-4,55:1. Met .68 wordt dat minimaal 6,97:1 op grijs; op maroon stijgt wit van 5,4 naar 8+:1. Geen nieuwe kleuren. */
.hero-fine, .port-fine, .quote-by .wie span, .sw-next .sw-note, .bignum .t, .case-role, .mtab .sub, .sigcap, .svbar span, .wa-wie span, .zsplit .zs-rl, .ctabs button small, .kit .typo small, .kit .wtag, .stapl .sr, .fld label i { opacity: .68; }
.hero-fine { font-size: 14px; }
.pc-sub { font-size: 12.5px; opacity: .8; }
/* W-D1 (fase 3): de standlabels boven de vergelijking zijn knoppen die de schuif op 100% of 0% zetten. */
.balbl button { background: none; border: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; padding: 12px 0; margin: -12px 0; cursor: pointer; }
/* Honeypot for the contact form: off-screen, never focusable, ignored by Formspree when filled. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; box-shadow: 0 0 0 6px var(--maroon); }
html { scroll-padding-top: 96px; }
/* Header colour is driven by the page scripts (.scrolled / .on-dark); no unconditional bar styling here. */
nav#nav .nav-links a.nav-cta { border-radius: var(--action-radius); }
nav#nav .nav-links a.nav-cta:hover { background: var(--maroon); color: var(--white); }
.btn, .ga-hero .btn, .ga-hero-compact .btn, .fsubmit, .pf-card .fsubmit { border-radius: var(--action-radius); min-height: 48px; max-width: 100%; white-space: normal; justify-content: center; text-align: center; line-height: 1.3; }
.fld input, .fld textarea { border-radius: var(--field-radius); min-height: 48px; }
.fld [aria-invalid="true"] { border: 2px solid var(--lime); }
.field-error { display: block; color: var(--lime); font-size: 14px; line-height: 1.4; margin-top: 6px; }
.pf-card .fsubmit:disabled { opacity: .6; cursor: progress; box-shadow: none; }
.ba .ilay img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba input[type="range"]:focus-visible { outline-offset: -5px; }
.ba:focus-within { outline: 3px solid var(--purple); outline-offset: 4px; }
.zt-uitslag .btn { opacity: 1; pointer-events: auto; transform: none; }
.stapl .sr, .mtab, .pal button, .ctabs button, .pijl { min-height: 44px; }
.pijl { min-width: 44px; }
html:not(.js) .rv { opacity: 1; transform: none; }
/* Review cards must not depend on the scroll runner or motion to become visible. */
html:not(.js) .grev, html[data-motion="off"] .grev { opacity: 1; transform: none; }
/* Nika's two-column desktop layout must not depend on an incidental .duo class. */
.nika-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
.nika-layout > *, .nika-tabs, .nika-stage { min-width: 0; }
/* When WebGL or motion is unavailable, keep both original texts in normal flow. */
html.nowebgl body[data-page="index"] #hero { height: auto; min-height: 0; padding: 140px var(--gutter) 100px; background: var(--maroon); }
html.nowebgl body[data-page="index"] .hero-ui { position: relative; inset: auto; }
html.nowebgl body[data-page="index"] #heroCopy { position: relative; inset: auto; opacity: 1; transform: none; filter: none; max-width: 560px; }
html.nowebgl body[data-page="index"] #heroCopy h1 { color: var(--white); }
html.nowebgl body[data-page="index"] #subReveal { position: relative; inset: auto; transform: none; margin: 48px 0 0; text-align: left; max-width: 560px; }
html.nowebgl body[data-page="index"] #subReveal::before { display: none; }
html.nowebgl body[data-page="index"] #diveArrow { display: none; }
html[data-motion="off"] .panel { transform: none !important; }
html[data-motion="off"] .dimmer { opacity: 0 !important; }
html[data-motion="off"] .rv { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="off"] .wbub { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .nika-layout { grid-template-columns: minmax(0,1fr); }
  .nika-search td { white-space: normal; overflow-wrap: break-word; }
}
@media (max-width: 820px) {
  html.nowebgl body[data-page="index"] #hero { padding: 118px 20px 90px; }
  html.nowebgl body[data-page="index"] #heroCopy h1 { font-size: clamp(28px,7.7vw,36px); }
  html.nowebgl body[data-page="index"] #heroCopy h1 span { white-space: normal !important; }
  .pf-card { padding: 32px 20px 24px; }
  .pf-ov { padding: 12px; }
  .pf-card h3 { padding-right: 18px; }
  .wa-fab { width: 52px; height: 52px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  footer { padding-bottom: 84px; }
}

/* copywissel 2026-09-23: contactregel met telefoonlink en subkop binnen een tekstblok */
.cta-fine a, .hero-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cbox-kop { font-size: clamp(20px, .6vw + 16px, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 26px 0 10px; }
.stapl .stapl-kop { margin: 0 0 12px; }
.mformule { font-size: 15px; line-height: 1.6; margin: 12px 0 0; }
.mformule + .mformule { margin-top: 6px; }
.mformule + .mcalc { margin-top: 18px; }
/* opsomming in een tekstblok (zelfde regels als google-ads-01.css) */
ul.blist { list-style: none; margin: 0 0 var(--s2, 18px); padding: 0; display: grid; gap: 9px; max-width: 560px; }
ul.blist li { position: relative; padding-left: 20px; font-size: 16.5px; line-height: 1.6; opacity: .78; }
ul.blist li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--purple); }