/* ================================================================
   Novaro — design-system
   Kleuren gemeten uit het logobestand. Rolverdeling:
   navy + wit dragen de site · oranje = actie · per dienst één kleur
   (cv-ketel = oranje, warmtepomp = groen, airco = blauw).
   ================================================================ */
@property --mode { syntax: '<color>'; inherits: true; initial-value: #F76E06; }

:root {
  /* merk, letterlijk uit het logo */
  --navy-950: #010B24;
  --navy-900: #031E55;   /* woordmerk */
  --navy-800: #0A2A6B;
  --navy-700: #002765;   /* diepste facet */
  --blue-500: #157AC8;
  --blue-400: #0589F7;
  --green-600: #27871B;
  --green-500: #49A119;
  --orange-600: #EC5804;
  --orange-500: #F76E06;

  /* tekstvarianten die AA halen op wit */
  --orange-ink: #B24400;
  --green-ink: #1E6B14;
  --blue-ink: #0B5DAA;

  /* neutraal, koel getint */
  --paper: #FFFFFF;
  --mist: #F1F4F9;
  --line: #DCE3EE;
  --ink: var(--navy-900);
  --ink-soft: #46557A;
  --on-dark: #F4F7FC;
  --on-dark-soft: #A9B6D3;

  /* type */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-0: 0.875rem;
  --fs-1: 1rem;
  --fs-2: 1.125rem;
  --fs-3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --fs-4: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);

  /* ruimte */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --maxw: 1360px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 22px; --r-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .3, 1);

  /* modus-kleur, gestuurd door de klimaatschakelaar */
  --mode: var(--orange-500);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; } /* ankerlinks landen onder de vaste header */
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-1); line-height: 1.55;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; border-radius: 4px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.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; }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
}
.skip:focus { top: var(--s-4); }

/* ---------- knoppen ---------- */
.btn {
  --pad-y: .85rem; --pad-x: 1.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--pad-y) var(--pad-x); border-radius: var(--r-pill);
  font-weight: 650; font-stretch: 105%; letter-spacing: .005em; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .18s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--sm { --pad-y: .55rem; --pad-x: 1rem; font-size: var(--fs-0); }
.btn--lg { --pad-y: 1.05rem; --pad-x: 1.7rem; font-size: var(--fs-2); }
/* oranje = actie; navy tekst geeft 6,4:1 contrast, wit zou falen */
.btn--action { background: var(--orange-500); color: var(--navy-950); }
.btn--action:hover { background: #FF8A2E; }
.btn i { font-size: 1.1em; transition: transform .25s var(--ease-out); }
.btn:hover i.ph-arrow-right { transform: translateX(3px); }

.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--line);
  background: none; text-decoration: none; font-size: 1.2rem; cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.icon-btn:hover { border-color: var(--orange-500); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ink);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s;
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 1.25rem var(--gutter);
  display: flex; align-items: center; gap: var(--s-6);
}
/* blur op een eigen laag: backdrop-filter op de header zelf zou het vaste mobiele menu insluiten */
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease-out);
  background: rgb(255 255 255 / .92); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-compact { color: var(--ink); }
.site-header.is-compact::before { opacity: 1; }
.site-header.is-compact .site-header__inner { padding-block: .6rem; } /* bewust zonder transitie: geen layout-animatie */

.brand { position: relative; display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
/* het echte logo (assets/logo); de witte variant ligt erover en wordt alleen getoond bij een donkere header */
.brand__logo { display: block; width: auto; height: 58px; }
.brand__logo--wit { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .25s var(--ease-out); }
.site-header:has(.nav.is-open) .brand__logo--wit { opacity: 1; }
.site-header:has(.nav.is-open) .brand__logo:not(.brand__logo--wit) { opacity: 0; }
.brand--footer .brand__logo { height: 76px; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: inline-block; text-decoration: none; font-weight: 550; font-size: .95rem; position: relative; padding-block: .3rem;
}
.nav__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--orange-500);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-out);
}
.nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-header__actions { display: flex; align-items: center; gap: var(--s-3); }
/* dropdown diensten */
.nav__drop { position: relative; }
.nav__dropbtn { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem 0; border: 0; background: none; font: inherit; font-weight: 550; font-size: .95rem; line-height: inherit; color: inherit; cursor: pointer; }
.nav__dropbtn i { font-size: .8rem; transition: transform .25s var(--ease-out); }
.nav__sub {
  position: absolute; left: -1rem; top: calc(100% + .6rem); z-index: 5; min-width: 19rem; margin: 0; padding: .5rem; list-style: none;
  border-radius: var(--r-md); background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 24px 40px -20px rgb(3 30 85 / .35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
}
.nav__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; } /* hover-brug naar het menu */
.nav__drop.is-open .nav__sub, .nav__drop:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .nav__drop:hover .nav__sub { opacity: 1; visibility: visible; transform: none; } .nav__drop:hover .nav__dropbtn i { transform: rotate(180deg); } }
.nav__drop.is-open .nav__dropbtn i { transform: rotate(180deg); }
.nav__sub a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: var(--r-sm); text-decoration: none; transition: background-color .2s; }
.nav__sub a::after { display: none; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--mist); }
.nav__sub i { flex-shrink: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.25rem; border-radius: 50%; }
.nav__sub [data-svc="verwarmen"] i { color: var(--orange-ink); background: color-mix(in oklab, var(--orange-500) 14%, var(--paper)); }
.nav__sub [data-svc="duurzaam"] i { color: var(--green-ink); background: color-mix(in oklab, var(--green-500) 14%, var(--paper)); }
.nav__sub [data-svc="koelen"] i { color: var(--blue-ink); background: color-mix(in oklab, var(--blue-400) 14%, var(--paper)); }
.nav__sub span { display: grid; line-height: 1.25; }
.nav__sub strong { font-weight: 700; font-size: .95rem; }
.nav__sub small { font-size: .8rem; color: var(--ink-soft); }
.nav-toggle { display: none; }

@media (max-width: 1060px) {
  .nav { position: fixed; inset: 0; margin: 0; background: var(--navy-950); color: var(--on-dark);
    display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; text-align: center; gap: var(--s-5); }
  .nav__list a { font-size: var(--fs-4); font-weight: 700; font-stretch: 115%; }
  .nav-toggle { display: inline-grid; position: relative; z-index: 2; }
  .brand { z-index: 2; } /* boven het open menuvlak, zodat het (witte) logo zichtbaar blijft */
  .site-header__actions { margin-left: auto; } /* menu staat in een vast vlak; knoppen zelf naar rechts */
  /* in het mobiele menu staan de diensten gewoon uitgeklapt */
  .nav__dropbtn { font-size: var(--fs-4); font-weight: 700; font-stretch: 115%; pointer-events: none; }
  .nav__dropbtn i { display: none; }
  .nav__sub { position: static; min-width: 0; margin-top: var(--s-2); padding: 0; background: none; box-shadow: none; color: var(--on-dark); opacity: 1; visibility: visible; transform: none; }
  .nav__sub a { justify-content: center; padding: .4rem; }
  .nav__sub a:hover { background: rgb(255 255 255 / .06); }
  .nav__sub small { display: none; }
  .nav__sub strong { font-size: var(--fs-2); }
  .nav__sub i { width: 2rem; height: 2rem; font-size: 1rem; }
  .nav-toggle span { position: absolute; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-out); }
  .nav-toggle span:first-child { transform: translateY(-3px); }
  .nav-toggle span:last-child { transform: translateY(3px); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .site-header:has(.nav.is-open) { color: var(--on-dark); }
  .site-header:has(.nav.is-open)::before { opacity: 0; }
}
@media (max-width: 560px) {
  .site-header__actions .btn { display: none; }
  .brand__logo { height: 46px; }
}

/* ---------- vertrouwensbalk ---------- */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust__list {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s-5) var(--gutter); list-style: none;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s-4) var(--s-6);
}
.trust__list li { display: flex; align-items: center; gap: var(--s-3); font-size: .95rem; color: var(--ink-soft); }
.trust__list strong { color: var(--ink); font-weight: 700; margin-right: .25rem; }
.trust__list i {
  flex-shrink: 0; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; font-size: 1.35rem;
  color: var(--navy-900); background: var(--mist);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
@media (max-width: 900px) { .trust__list { grid-template-columns: 1fr; } }

/* ---------- diensten ---------- */
.svc[data-svc="verwarmen"] { --svc: var(--orange-500); --svc-d: #C94A00; --svc-l: #FF9A4D; --svc-ink: var(--orange-ink); }
.svc[data-svc="duurzaam"]  { --svc: var(--green-500);  --svc-d: var(--green-600); --svc-l: #7CC24F; --svc-ink: var(--green-ink); }
.svc[data-svc="koelen"]    { --svc: var(--blue-400);   --svc-d: var(--blue-500);  --svc-l: #5AB2FF; --svc-ink: var(--blue-ink); }

.services { background: var(--mist); padding: var(--s-9) var(--gutter) var(--s-8); }
.services__head {
  max-width: var(--maxw); margin: 0 auto var(--s-7);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-6); align-items: end;
}
.services__title {
  margin: 0; font-size: clamp(2.3rem, 1rem + 4.6vw, 5rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em;
}
.services__title span { color: var(--ink-soft); }
.services__intro { margin: 0; font-size: var(--fs-2); color: var(--ink-soft); max-width: 30rem; }

.services__stack { max-width: var(--maxw); margin: 0 auto; display: grid; gap: var(--s-5); }
.svc__card {
  --shade: 0;
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--paper); border-radius: var(--r-lg); overflow: clip;
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgb(3 30 85 / .45);
  transform-origin: 50% 0;
}
.svc__card::after {
  content: ''; position: absolute; inset: 0; background: var(--navy-950); opacity: calc(var(--shade) * .35); pointer-events: none;
}

.svc__visual {
  position: relative; min-height: 100%; display: grid; place-items: center; overflow: clip; color: var(--navy-950);
  background:
    radial-gradient(80% 70% at 70% 30%, var(--svc-l), transparent 70%),
    var(--svc);
}
.svc__hex { width: min(78%, 22rem); filter: drop-shadow(0 24px 30px rgb(1 11 36 / .25)); }
.svc__icon {
  position: absolute; font-size: clamp(3rem, 2rem + 3vw, 5rem); color: var(--navy-950);
}
.svc__num {
  position: absolute; left: var(--s-5); top: var(--s-4);
  font-size: clamp(3rem, 2rem + 3vw, 5.5rem); font-weight: 800; font-stretch: 125%; line-height: 1;
  color: var(--navy-950); letter-spacing: -.04em; opacity: .9;
}

.svc__visual--photo { background: var(--mist); }
.svc__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-svc="duurzaam"] .svc__photo { object-position: 62% 65%; }
[data-svc="koelen"] .svc__photo { object-position: 50% 50%; }
.svc__visual--photo .svc__num { left: auto; right: var(--s-5); }

.svc__body { padding: clamp(1.75rem, 1rem + 3vw, 3.75rem); display: flex; flex-direction: column; }
.svc__kicker {
  margin: 0; display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-0); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--svc-ink);
}
.svc__kicker::before { content: ''; width: .7rem; height: .8rem; background: var(--svc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.svc__title { margin: var(--s-2) 0 0; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1; font-weight: 800; font-stretch: 115%; letter-spacing: -.025em; }
.svc__lead { margin: var(--s-4) 0 0; font-size: var(--fs-2); color: var(--ink-soft); max-width: 36rem; }
.svc__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.svc__list li {
  padding: .5rem .95rem; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem;
  background: color-mix(in oklab, var(--svc) 12%, var(--paper)); color: var(--navy-950);
}
.svc__brands { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; }
.svc__brands span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .2rem; }
.svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: auto; padding-top: var(--s-5); }
.svc__link {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--fs-2); text-decoration: none; color: var(--navy-950);
  background: linear-gradient(var(--svc), var(--svc)) 0 100% / 100% 2px no-repeat; padding-bottom: .2rem;
  transition: background-size .35s var(--ease-out);
}
.svc__link i { transition: transform .3s var(--ease-out); }
.svc__link:hover i { transform: translateX(4px); }
.svc__calc {
  font-weight: 650; font-size: .95rem; color: var(--svc-ink); text-decoration: none;
  padding: .55rem 1rem; border: 1.5px solid currentColor; border-radius: var(--r-pill);
  transition: background-color .25s var(--ease-out);
}
.svc__calc:hover { background: color-mix(in oklab, var(--svc) 10%, transparent); }

/* desktop: kaarten stapelen zich tijdens het scrollen */
@media (min-width: 900px) and (min-height: 680px) {
  .services__stack { gap: 12vh; padding-bottom: 4vh; }
  .svc { position: sticky; top: calc(96px + var(--i) * 26px); }
  .svc__card { min-height: min(560px, calc(100svh - 160px)); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .svc__hex { animation: hexturn linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes hexturn { from { rotate: -40deg; scale: .85; } to { rotate: 25deg; scale: 1.05; } }
    .svc__photo { animation: photodrift linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes photodrift { from { scale: 1.1; } to { scale: 1; } }
    .services__head > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    @keyframes rise { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
  }
}

@media (max-width: 899px) {
  .services { padding-block: var(--s-8) var(--s-7); }
  .services__head { grid-template-columns: 1fr; gap: var(--s-4); margin-bottom: var(--s-6); }
  .svc__card { grid-template-columns: 1fr; }
  .svc__visual { min-height: 220px; }
  .svc__visual--photo { aspect-ratio: 1; }
  .svc__hex { width: 170px; }
  .svc__list li { font-size: .9rem; }
}

/* ---------- USP's ---------- */
.usp { background: var(--paper); padding: var(--s-9) var(--gutter); }
.usp__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
.usp__aside { position: sticky; top: 18vh; align-self: start; }
.usp__heading { margin: 0; font-size: var(--fs-4); line-height: 1.05; font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; max-width: 14ch; }
.usp__counter { position: relative; display: flex; margin-top: var(--s-6); width: min(100%, 22rem); aspect-ratio: 1; justify-content: center; align-items: center; }
.usp__counter-hex { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--mist); stroke: var(--line); stroke-width: .4; transition: rotate .9s var(--ease-out); }
.usp__counter-num { position: relative; overflow: clip; height: 1em; line-height: 1; font-size: clamp(6rem, 4rem + 6vw, 10rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.usp__counter-num > span { display: block; }
.usp__counter-of { position: relative; align-self: flex-end; margin: 0 0 32% .3rem; font-size: var(--fs-3); font-weight: 600; color: var(--ink-soft); }
.usp__rail { display: flex; gap: .5rem; list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.usp__rail li { width: 14px; height: 16px; background: var(--line); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background-color .4s var(--ease-out), transform .4s var(--ease-out); }
.usp__rail li.is-on { background: var(--orange-500); transform: scale(1.2); }

.usp__list { list-style: none; margin: 0; padding: 12vh 0 18vh; display: grid; gap: 18vh; }
.usp__item { position: relative; padding-left: var(--s-6); border-left: 2px solid var(--line); }
.usp__item::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 100%; background: var(--orange-500); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease-out); }
.usp__item.is-active::before { transform: scaleY(1); }
.usp__n { display: none; }
.usp__title { margin: 0; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.02; font-weight: 800; font-stretch: 112%; letter-spacing: -.025em; text-wrap: balance; }
.usp__text { margin: var(--s-4) 0 0; font-size: var(--fs-2); color: var(--ink-soft); max-width: 34rem; }
.usp__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.usp__chips li { padding: .5rem 1rem; border: 1.5px solid var(--navy-900); border-radius: var(--r-pill); font-weight: 650; font-size: .95rem; }
.usp__phone { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s-5); font-size: var(--fs-3); font-weight: 700; font-stretch: 110%; text-decoration: none; color: var(--navy-950);
  background: linear-gradient(var(--orange-500), var(--orange-500)) 0 100% / 100% 3px no-repeat; padding-bottom: .15rem; }

/* tekst licht op als hij het midden van het scherm passeert */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .usp__item > :not(.usp__n) { animation: usp-focus linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
    @keyframes usp-focus { 0% { opacity: .18; } 35%, 65% { opacity: 1; } 100% { opacity: .18; } }
  }
}

@media (max-width: 899px) {
  .usp { padding-block: var(--s-8); }
  .usp__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .usp__aside { position: static; }
  .usp__counter, .usp__rail { display: none; }
  .usp__list { padding: 0; gap: var(--s-7); }
  .usp__n { display: block; margin-bottom: var(--s-2); font-size: 2.6rem; font-weight: 800; font-stretch: 125%; line-height: 1; color: var(--orange-ink); }
  .usp__item { padding-left: var(--s-5); }
}

/* ---------- rekentool ---------- */
.calc__body[data-tint="verwarmen"] { --t: var(--orange-500); --t-ink: var(--orange-ink); }
.calc__body[data-tint="duurzaam"]  { --t: var(--green-500);  --t-ink: var(--green-ink); }
.calc__body[data-tint="koelen"]    { --t: var(--blue-400);   --t-ink: var(--blue-ink); }

.calc { background: var(--mist); padding: var(--s-9) var(--gutter); }
.calc__inner { max-width: var(--maxw); margin: 0 auto; }
.calc__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; margin-bottom: var(--s-6); }
.calc__title { margin: 0; font-size: clamp(2.3rem, 1rem + 4.6vw, 5rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.calc__intro { margin: 0; font-size: var(--fs-2); color: var(--ink-soft); max-width: 30rem; }

.calc__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.calc__tab {
  display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.2rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--paper); font-weight: 650; font-size: .95rem; cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.calc__tab i { font-size: 1.2rem; }
.calc__tab[data-tint="verwarmen"] i { color: var(--orange-ink); }
.calc__tab[data-tint="duurzaam"] i { color: var(--green-ink); }
.calc__tab[data-tint="koelen"] i { color: var(--blue-ink); }
.calc__tab:hover { border-color: var(--navy-900); }
.calc__tab[aria-selected="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); }
.calc__tab[aria-selected="true"][data-tint="verwarmen"] i { color: var(--orange-500); }
.calc__tab[aria-selected="true"][data-tint="duurzaam"] i { color: var(--green-500); }
.calc__tab[aria-selected="true"][data-tint="koelen"] i { color: var(--blue-400); }

.calc__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-4); align-items: start; }
.calc__inputs { background: var(--paper); border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: 0 1px 0 var(--line); }
.tool { display: grid; gap: var(--s-6); }
.tool-panel[hidden] { display: none; }
.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); width: 100%; padding: 0; margin-bottom: var(--s-3); font-weight: 700; font-size: var(--fs-1); }
.field output { font-weight: 700; color: var(--t-ink); font-variant-numeric: tabular-nums; }
.field__hint { margin: var(--s-2) 0 0; font-size: var(--fs-0); color: var(--ink-soft); }
.calc__more { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: color-mix(in oklab, var(--blue-400) 9%, var(--paper)); text-decoration: none; font-size: .95rem; transition: background-color .2s var(--ease-out); }
.calc__more > i { flex-shrink: 0; font-size: 1.4rem; color: var(--blue-ink); }
.calc__more:hover { background: color-mix(in oklab, var(--blue-400) 15%, var(--paper)); }
.calc__more:hover > i:last-child { transform: translateX(3px); }
.calc__more > i:last-child { transition: transform .25s var(--ease-out); }

.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-2); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: grid; gap: .15rem; height: 100%; padding: .9rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-weight: 700; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.seg small { font-weight: 450; font-size: var(--fs-0); color: var(--ink-soft); }
.seg label:hover span { border-color: var(--ink-soft); }
.seg input:checked + span { border-color: var(--t); background: color-mix(in oklab, var(--t) 9%, var(--paper)); box-shadow: inset 0 0 0 1px var(--t); }
.seg input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 4px; }
.stepper button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--mist); cursor: pointer; font-size: 1.1rem; transition: background-color .2s; }
.stepper button:hover { background: var(--line); }
.stepper button:active { transform: scale(.94); }
.stepper input { width: 3.5rem; border: 0; background: none; text-align: center; font: inherit; font-size: var(--fs-3); font-weight: 700; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.range { --p: .3; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--t) calc(var(--p) * 100%), var(--line) 0); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--t) calc(var(--p) * 100%), var(--line) 0); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy-900); box-shadow: 0 2px 6px rgb(3 30 85 / .2); transition: transform .15s var(--ease-out); }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy-900); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }

select {
  width: 100%; padding: .85rem 2.75rem .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-md);
  font: inherit; font-weight: 600; color: var(--ink); background: var(--paper) no-repeat right 1rem center / 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23031E55' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
select:hover { border-color: var(--ink-soft); }

.result {
  position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--s-5);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg);
  color: var(--on-dark); background-color: var(--navy-900);
  background-image: radial-gradient(90% 60% at 100% 0%, color-mix(in oklab, var(--t) 30%, transparent), transparent 70%);
  transition: background-image .5s;
}
.result__figure { display: grid; gap: .2rem; }
.result__label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.result__big { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1.02; font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.result__sub { font-size: var(--fs-0); color: var(--on-dark-soft); }
.result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.result__grid > :last-child { grid-column: 1 / -1; }
.result__grid .result__figure:first-child .result__big { color: var(--on-dark); }
.result__grid .result__big { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); }
.result__lines { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid rgb(255 255 255 / .12); display: grid; gap: .45rem; color: var(--on-dark-soft); }
.result__lines li { display: flex; align-items: center; gap: .6rem; }
.result__lines li::before { content: ''; flex-shrink: 0; width: .55rem; height: .62rem; background: var(--t); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.result__extra { margin: var(--s-3) 0 0; color: var(--on-dark-soft); }
.result__note { margin: 0; font-size: var(--fs-0); color: var(--on-dark-soft); padding-top: var(--s-4); border-top: 1px solid rgb(255 255 255 / .12); }
.result__note a { color: var(--on-dark); font-weight: 600; }
.result__actions { display: grid; gap: var(--s-3); justify-items: start; }
.result__ask { margin: 0; font-size: var(--fs-0); color: var(--on-dark-soft); }
.result__ask a { color: var(--on-dark); font-weight: 650; }

.bars { display: grid; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid rgb(255 255 255 / .12); }
.bars__row { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: var(--s-3); font-size: var(--fs-0); color: var(--on-dark-soft); }
.bars__row b { color: var(--on-dark); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.bars__track { height: 10px; border-radius: 5px; background: rgb(255 255 255 / .08); overflow: clip; }
.bars__track i { display: block; height: 100%; border-radius: inherit; background: var(--on-dark-soft); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.bars__row:last-child i { background: var(--t); }

.calc__why { max-width: 52rem; margin: var(--s-6) 0 0; padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.calc__why h3 { margin: 0; font-size: var(--fs-3); font-weight: 800; }
.calc__why p { margin: var(--s-3) 0 0; color: var(--ink-soft); }
@media (max-width: 899px) {
  .calc { padding-block: var(--s-8); }
  .calc__head { grid-template-columns: 1fr; gap: var(--s-4); }
  .calc__tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .calc__tab { justify-content: center; padding-inline: .6rem; font-size: .875rem; }
  .calc__body { grid-template-columns: 1fr; }
  .result { position: static; }
  .bars__row { grid-template-columns: 6.5rem 1fr auto; }
}

/* ---------- over Sabir ---------- */
.btn--navy { background: var(--navy-900); color: var(--on-dark); }
.btn--navy:hover { background: var(--navy-800); }
.btn--line { border-color: var(--navy-900); color: var(--navy-900); }
.btn--line:hover { background: var(--mist); }

.about { background: var(--paper); padding: var(--s-9) var(--gutter); }
.about__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.about__visual { position: relative; max-width: 34rem; }
.about__frame {
  aspect-ratio: 100 / 112; max-width: 34rem;
  clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%);
  background: var(--navy-900);
}
.about__portrait {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: clip;
  background:
    radial-gradient(70% 55% at 30% 20%, color-mix(in oklab, var(--blue-400) 40%, transparent), transparent 70%),
    radial-gradient(60% 50% at 80% 90%, color-mix(in oklab, var(--orange-500) 30%, transparent), transparent 70%),
    var(--navy-900);
}
.about__frame img { width: 100%; height: 100%; object-fit: cover; }
.about__facets { position: absolute; width: 130%; opacity: .14; rotate: 12deg; }
.about__initials { position: relative; font-size: clamp(5rem, 3rem + 8vw, 11rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.04em; color: var(--on-dark); }
.about__badge {
  position: absolute; right: 0; bottom: 8%; margin: 0; display: flex; align-items: center; gap: var(--s-3);
  max-width: 17rem; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg);
  background: var(--orange-500); color: var(--navy-950); font-weight: 650; line-height: 1.3;
  box-shadow: 0 24px 40px -24px rgb(3 30 85 / .5);
}
.about__badge-num { font-size: 3.6rem; line-height: 1; font-weight: 800; font-stretch: 125%; font-variant-numeric: tabular-nums; }

.about__title { margin: 0; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; font-size: clamp(2.2rem, 1rem + 3.4vw, 4rem); line-height: .98; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.about__title span { color: var(--ink-soft); }
.about__lead { margin: var(--s-6) 0 0; font-size: var(--fs-3); font-weight: 600; line-height: 1.35; max-width: 36rem; }
.about__text { margin: var(--s-4) 0 0; font-size: var(--fs-2); color: var(--ink-soft); max-width: 36rem; }
.about__facts { margin: var(--s-6) 0 0; display: grid; border-top: 1px solid var(--line); }
.about__facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.about__facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: .2rem; }
.about__facts dd { margin: 0; color: var(--ink-soft); }
.about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.about__more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--navy-950); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .about__frame { animation: about-frame linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes about-frame { from { clip-path: polygon(50% 30%, 70% 40%, 70% 60%, 50% 70%, 30% 60%, 30% 40%); } to { clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); } }
    .about__facets { animation: about-turn linear both; animation-timeline: view(); }
    @keyframes about-turn { from { rotate: -20deg; } to { rotate: 40deg; } }
    .about__copy > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}

@media (max-width: 899px) {
  .about { padding-block: var(--s-8); }
  .about__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .about__visual { max-width: 24rem; }
  .about__badge { right: -.5rem; bottom: 4%; max-width: 13rem; padding: var(--s-3) var(--s-4); }
  .about__badge-num { font-size: 2.8rem; }
  .about__facts > div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ---------- werkwijze: de ene donkere sectie midden op de pagina ---------- */
.steps { background: var(--navy-950); color: var(--on-dark); overflow: clip; }
.steps__pin { max-width: var(--maxw); margin: 0 auto; padding: var(--s-9) var(--gutter); }
.steps__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; margin-bottom: var(--s-7); }
.steps__title { margin: 0; font-size: clamp(2.3rem, 1rem + 4.6vw, 5rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.steps__intro { margin: 0; font-size: var(--fs-2); color: var(--on-dark-soft); max-width: 28rem; }
.steps__viewport { position: relative; }
.steps__progress { position: absolute; left: 0; right: 0; top: 2.6rem; height: 2px; background: rgb(255 255 255 / .12); }
.steps__progress span { display: block; height: 100%; background: var(--orange-500); transform-origin: left; transform: scaleX(0); }
.steps__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); position: relative; }
.step { position: relative; }
.step__mark { position: relative; width: 5.2rem; height: 5.2rem; display: grid; place-items: center; }
.step__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--navy-950); stroke: rgb(255 255 255 / .3); stroke-width: 2.5; transition: fill .4s var(--ease-out), stroke .4s var(--ease-out); }
.step__mark span { position: relative; font-weight: 800; font-stretch: 120%; font-size: 1.3rem; transition: color .4s var(--ease-out); }
.step.is-active .step__mark svg, .step.is-done .step__mark svg { fill: var(--orange-500); stroke: var(--orange-500); }
.step.is-active .step__mark span, .step.is-done .step__mark span { color: var(--navy-950); }
.step__icon { display: block; margin-top: var(--s-5); font-size: 1.8rem; color: var(--on-dark-soft); }
.step__title { margin: var(--s-3) 0 0; font-size: var(--fs-3); font-weight: 750; font-stretch: 110%; line-height: 1.15; }
.step__text { margin: var(--s-3) 0 0; color: var(--on-dark-soft); }

/* desktop met GSAP: vastgezet, de stappen schuiven horizontaal voorbij */
.steps.is-pinned .steps__pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-7); }
.steps.is-pinned .steps__track { display: flex; gap: var(--s-6); width: max-content; padding-right: 30vw; }
.steps.is-pinned .step { width: clamp(17rem, 27vw, 23rem); }
.steps.is-pinned .steps__progress { right: auto; width: 100%; }

@media (max-width: 899px) {
  .steps__pin { padding-block: var(--s-8); }
  .steps__head { grid-template-columns: 1fr; gap: var(--s-4); }
  .steps__progress { display: none; }
  .steps__track { grid-template-columns: 1fr; gap: var(--s-6); }
  .step { display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--s-4); }
  .step__mark { width: 4rem; height: 4rem; grid-row: span 3; }
  .step__mark span { font-size: 1.05rem; }
  .step__icon { display: none; }
  .step__title { margin-top: .3rem; }
  .step:not(:last-child)::after { content: ''; position: absolute; left: 2rem; top: 4.4rem; bottom: calc(-1 * var(--s-6) + .4rem); width: 2px; background: rgb(255 255 255 / .14); }
}

/* ---------- garantie en onderhoud ---------- */
.care { background: var(--paper); padding: var(--s-9) var(--gutter); }
.care__inner { max-width: var(--maxw); margin: 0 auto; }
.care__title { margin: 0 0 var(--s-7); font-size: clamp(2.3rem, 1rem + 4.6vw, 5rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.care__title span { color: var(--ink-soft); }
.care__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-4); }

.warranty { padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); border-radius: var(--r-lg); background: var(--mist); }
.warranty__big { margin: 0; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: .95; font-weight: 800; font-stretch: 125%; letter-spacing: -.04em; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.warranty__lead { margin: var(--s-3) 0 0; font-size: var(--fs-3); font-weight: 700; max-width: 34rem; }
.warranty__text { margin: var(--s-3) 0 0; max-width: 36rem; color: var(--ink-soft); }

.timeline { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
.timeline__row { display: grid; gap: var(--s-2); }
.timeline__label { font-weight: 700; font-size: .95rem; }
.timeline__track { height: 14px; border-radius: 7px; background: var(--paper); overflow: clip; box-shadow: inset 0 0 0 1px var(--line); }
.timeline__track i { display: block; height: 100%; border-radius: inherit; transform-origin: left; }
.timeline__row--ours i { width: 40%; background: var(--orange-500); }
/* einde vervaagt: de duur hangt af van het merk */
.timeline__row--maker i { width: 100%; background: linear-gradient(90deg, var(--navy-900) 55%, transparent); }
.timeline__axis { position: relative; height: 2.6rem; margin-top: var(--s-1); border-top: 1.5px solid var(--navy-900); font-size: var(--fs-0); color: var(--ink-soft); }
.timeline__axis span { position: absolute; top: .55rem; left: calc(var(--at) * 100%); translate: calc(var(--at) * -100%) 0; white-space: nowrap; }
.timeline__axis span::before { content: ''; position: absolute; top: -.85rem; left: calc(var(--at) * 100%); width: 2px; height: .55rem; background: var(--navy-900); translate: -50% 0; }
.timeline__axis span:nth-child(2) { translate: -50% 0; font-weight: 700; color: var(--orange-ink); }
.timeline__axis span:nth-child(2)::before { left: 50%; }
@media (max-width: 700px) {
  .timeline__axis { height: 4rem; }
  .timeline__axis span:nth-child(2) { top: 2.05rem; }
  .timeline__axis span:nth-child(2)::before { top: -2.35rem; height: 2.05rem; width: 1.5px; }
}

.upkeep { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); border-radius: var(--r-lg); border: 1.5px solid var(--line); }
.upkeep__icon { font-size: 2.4rem; color: var(--navy-900); }
.upkeep__title { margin: var(--s-4) 0 0; font-size: var(--fs-4); line-height: 1.08; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; text-wrap: balance; }
.upkeep__text { margin: var(--s-4) 0 0; color: var(--ink-soft); font-size: var(--fs-2); }
.upkeep__list { list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; display: grid; gap: var(--s-2); align-self: stretch; }
.upkeep__list li { border-bottom: 1px solid var(--line); }
.upkeep__list a { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; font-weight: 650; text-decoration: none; }
.upkeep__list a::before { content: ''; width: .7rem; height: .8rem; background: var(--svc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.upkeep__list a::after { content: '→'; margin-left: auto; transition: translate .25s var(--ease-out); }
.upkeep__list a:hover::after { translate: 4px 0; }
.upkeep__list li[data-svc="verwarmen"] { --svc: var(--orange-500); }
.upkeep__list li[data-svc="duurzaam"] { --svc: var(--green-500); }
.upkeep__list li[data-svc="koelen"] { --svc: var(--blue-400); }
.upkeep .btn { margin-top: auto; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .timeline__track i { animation: grow linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .timeline__row--maker i { animation-range: entry 30% cover 55%; }
    @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

@media (max-width: 899px) {
  .care { padding-block: var(--s-8); }
  .care__title { margin-bottom: var(--s-6); }
  .care__grid { grid-template-columns: 1fr; }
}

/* ---------- reviews (alleen zichtbaar met echte reviews) ---------- */
.reviews[hidden] { display: none; }
.reviews { background: var(--paper); padding: var(--s-8) var(--gutter); border-top: 1px solid var(--line); }
.reviews__inner { max-width: var(--maxw); margin: 0 auto; }
.reviews__title { margin: 0 0 var(--s-6); font-size: var(--fs-4); font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; }
.reviews__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s-4); }
.review { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--mist); }
.review__stars { margin: 0; color: var(--orange-ink); display: flex; gap: 2px; }
.review__text { margin: 0; font-size: var(--fs-2); }
.review__who { margin: auto 0 0; font-size: var(--fs-0); color: var(--ink-soft); }
.review__who strong { color: var(--ink); }
.reviews.is-placeholder .review__stars { color: var(--line); }
.reviews.is-placeholder .review__text { color: var(--ink-soft); font-style: italic; }
.reviews__google { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-5); font-weight: 650; }

/* ---------- veelgestelde vragen ---------- */
.faq { background: var(--mist); padding: var(--s-9) var(--gutter); }
.faq__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
.faq__aside { position: sticky; top: 110px; align-self: start; }
.faq__title { margin: 0; hyphens: auto; overflow-wrap: break-word; font-size: clamp(2.2rem, .8rem + 3vw, 3.6rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; text-wrap: balance; }
.faq__ask { margin: var(--s-5) 0 0; font-size: var(--fs-2); color: var(--ink-soft); }
.faq__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; }
.faq__links a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
.faq__links a:hover { color: var(--orange-ink); }
.faq__list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--navy-900); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { margin: 0; }
.faq__q button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: var(--fs-3); font-weight: 700; font-stretch: 106%; line-height: 1.3;
}
.faq__icon { position: relative; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--paper); transition: background-color .3s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform .35s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__q button:hover .faq__icon { background: var(--line); }
.faq__q button[aria-expanded="true"] .faq__icon { background: var(--orange-500); }
.faq__q button[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
/* openklappen via grid-rijen, geen hoogte-animatie */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 3.5rem var(--s-5) 0; color: var(--ink-soft); font-size: var(--fs-2); max-width: 46rem; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

@media (max-width: 899px) {
  .faq { padding-block: var(--s-8); }
  .faq__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .faq__aside { position: static; }
  .faq__q button { font-size: var(--fs-2); padding-block: var(--s-4); }
  .faq__a p { padding-right: 0; font-size: var(--fs-1); }
}

/* ---------- contact en offerte ---------- */
.contact { background: var(--paper); padding: var(--s-9) var(--gutter); }
.contact__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.contact__aside { position: sticky; top: 110px; }
.contact__title { margin: 0; font-size: clamp(2.3rem, 1rem + 4vw, 4.6rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; text-wrap: balance; }
.contact__intro { margin: var(--s-5) 0 0; font-size: var(--fs-2); color: var(--ink-soft); max-width: 28rem; }
.direct { list-style: none; margin: var(--s-6) 0 var(--s-5); padding: 0; border-top: 1px solid var(--line); }
.direct li { border-bottom: 1px solid var(--line); }
.direct__row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none; }
.direct__row i { flex-shrink: 0; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; font-size: 1.5rem; color: var(--navy-950); background: var(--mist);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); transition: background-color .25s var(--ease-out); }
.direct__row span { display: grid; min-width: 0; }
.direct__row small { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.direct__row strong { font-size: var(--fs-3); font-weight: 700; font-stretch: 106%; overflow-wrap: anywhere; }
.direct__row:hover i { background: var(--orange-500); }
.contact__meta { display: flex; gap: .5rem; margin: var(--s-2) 0 0; color: var(--ink-soft); font-size: .95rem; }
.contact__meta i { font-size: 1.2rem; margin-top: .1rem; color: var(--navy-900); }

.quote { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-lg); background: var(--mist); }
.quote__form { display: grid; gap: var(--s-5); }
.quote__prefill { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .75rem 1rem; border-radius: var(--r-md); background: color-mix(in oklab, var(--orange-500) 14%, var(--paper)); font-weight: 600; font-size: .95rem; }
.quote__prefill i { font-size: 1.3rem; color: var(--orange-ink); }
.quote__prefill[hidden] { display: none; }
.qf { display: grid; gap: .45rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.qf > label, .qf > legend, .qf__label { padding: 0; font-weight: 700; font-size: .95rem; }
.qf legend { margin-bottom: .45rem; }
.req { color: var(--orange-ink); }
.opt { font-weight: 450; color: var(--ink-soft); }
.qf__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.qf__row--pc { grid-template-columns: 2fr 3fr; }
.qf__cond { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--paper); }
.qf__cond[hidden] { display: none; }
.quote input[type="text"], .quote input[type="email"], .quote input[type="tel"], .quote textarea {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  font: inherit; color: var(--ink); transition: border-color .2s var(--ease-out);
}
.quote textarea { resize: vertical; min-height: 7rem; }
.quote input:hover, .quote textarea:hover { border-color: var(--ink-soft); }
.quote input:focus-visible, .quote textarea:focus-visible, .quote select:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 1px; border-color: var(--navy-900); }
.quote [aria-invalid="true"] { border-color: #C2261D; }
.qf__error { margin: 0; font-size: var(--fs-0); font-weight: 600; color: #B3261E; }
.qf__error:empty { display: none; }

.qf__services { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.qf__opt { position: relative; display: grid; }
.qf__services label { position: relative; display: grid; cursor: pointer; }
.qf__x {
  position: absolute; top: 8px; right: 8px; display: none; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--navy-900); cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
/* eigen maat: anders erft het icoon de 1.5rem van de dienst-iconen */
.qf__services .qf__x i { font-size: .8rem; color: inherit; }
.qf__x:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); }
.qf__opt:has(input:checked) .qf__x { display: grid; }
.qf__services input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.qf__services span { display: grid; justify-items: center; gap: .3rem; padding: .9rem .4rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); font-weight: 700; font-size: .9rem; text-align: center; transition: border-color .2s, background-color .2s; }
.qf__services i { font-size: 1.5rem; color: var(--svc-ink); }
.qf__services [data-svc="verwarmen"] { --svc: var(--orange-500); --svc-ink: var(--orange-ink); }
.qf__services [data-svc="duurzaam"] { --svc: var(--green-500); --svc-ink: var(--green-ink); }
.qf__services [data-svc="koelen"] { --svc: var(--blue-400); --svc-ink: var(--blue-ink); }
.qf__services [data-svc="onderhoud"] { --svc: var(--navy-900); --svc-ink: var(--navy-900); }
.qf__services label:hover span { border-color: var(--ink-soft); }
.qf__services input:checked + span { border-color: var(--svc); box-shadow: inset 0 0 0 1px var(--svc); background: color-mix(in oklab, var(--svc) 9%, var(--paper)); }
.qf__services input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.drop { position: relative; display: grid; justify-items: center; gap: .3rem; padding: var(--s-5); border: 1.5px dashed var(--ink-soft); border-radius: var(--r-md); background: var(--paper); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--navy-900); background: color-mix(in oklab, var(--blue-400) 6%, var(--paper)); }
.drop:has(input:focus-visible) { outline: 3px solid var(--blue-400); outline-offset: 2px; }
.drop i { font-size: 2rem; color: var(--navy-900); }
.drop small { max-width: 30rem; color: var(--ink-soft); font-size: var(--fs-0); }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--s-2); }
.thumbs:empty { display: none; }
.thumbs li { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: clip; background: var(--line); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--navy-950); color: var(--on-dark); cursor: pointer; }

.check { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; cursor: pointer; }
.check input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--navy-900); }
.qf--visit { padding: var(--s-4); border-radius: var(--r-md); background: var(--paper); }
.visit { display: grid; gap: var(--s-4); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.visit[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: block; min-width: 3.2rem; padding: .55rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-weight: 650; font-size: .95rem; text-align: center; transition: background-color .2s, border-color .2s, color .2s; }
.chips input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); }
.chips input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

.quote__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.quote__small { margin: 0; font-size: var(--fs-0); color: var(--ink-soft); }
.btn.is-busy { opacity: .7; cursor: progress; }
.quote__status { margin: 0; font-weight: 650; color: #B3261E; }
.quote__status:empty { display: none; }

.quote__done { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-6) 0; outline: none; }
.quote__done[hidden] { display: none; }
.quote__done-hex { width: 5rem; }
.quote__done-hex polygon { fill: var(--orange-500); }
.quote__done-hex path { fill: none; stroke: var(--navy-950); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: tick .6s .25s var(--ease-out) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.quote__done h3 { margin: var(--s-2) 0 0; font-size: var(--fs-4); font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; }
.quote__done p { margin: 0; font-size: var(--fs-2); max-width: 32rem; }
.quote__done-small { color: var(--ink-soft); font-size: var(--fs-1) !important; }

@media (max-width: 899px) {
  .contact { padding-block: var(--s-8); }
  .contact__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .contact__aside { position: static; }
  .qf__services { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .qf__row, .qf__row--pc, .qf__cond { grid-template-columns: 1fr; }
  .quote__submit .btn { width: 100%; }
}

/* ---------- footer ---------- */
.footer { background: var(--navy-950); color: var(--on-dark); padding: var(--s-9) var(--gutter) var(--s-5); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer a { text-decoration: none; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-6); padding-bottom: var(--s-7); border-bottom: 1px solid rgb(255 255 255 / .12); }
.footer__claim { margin: 0; font-size: clamp(2.2rem, 1rem + 4vw, 4.6rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.footer__claim span { color: var(--on-dark-soft); }
.footer__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.footer__phone { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-3); font-weight: 700; font-stretch: 108%; }
.footer__phone:hover { color: var(--orange-500); }

.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: var(--s-6); padding: var(--s-7) 0; }
.footer__brand p, .footer__col p { margin: var(--s-4) 0 0; color: var(--on-dark-soft); max-width: 22rem; }
.footer__col h2 { margin: 0 0 var(--s-4); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.footer__col p { margin-top: 0; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer__col li { color: var(--on-dark-soft); overflow-wrap: anywhere; }
.footer__col a { color: var(--on-dark); font-weight: 550; }
.footer__col a:hover { color: var(--orange-500); }
.footer__socials { display: flex !important; gap: var(--s-2) !important; margin-top: var(--s-5) !important; }
.footer__socials[hidden] { display: none !important; }
.footer__socials a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font-size: 1.35rem; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .2); transition: border-color .25s, color .25s; }
.footer__socials a:hover { border-color: var(--orange-500); }

.footer__maker { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid rgb(255 255 255 / .12); text-align: center; }
.footer__maker p { margin: 0; font-size: var(--fs-0); color: var(--on-dark-soft); }
.footer__maker img { width: min(220px, 60vw); height: auto; opacity: .9; transition: opacity .25s; }
.footer__maker a:hover img { opacity: 1; }

.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / .12); font-size: var(--fs-0); color: var(--on-dark-soft); }
.footer__legal p { margin: 0; }
.footer__legal a:hover { color: var(--on-dark); }

@media (max-width: 899px) {
  .footer { padding-top: var(--s-8); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__cols { grid-template-columns: 1fr; }
  .footer__cta .btn { width: 100%; }
}

/* ---------- WhatsApp-knop, altijd zichtbaar ---------- */
.wa-float {
  position: fixed; z-index: 40;
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; height: 3.5rem; padding: 0 1.05rem; border-radius: var(--r-pill);
  --wa: #0E9F4F; --wa-hover: #0B8A44;
  background: var(--wa); color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 24px -8px rgb(1 11 36 / .45);
  transition: background-color .25s var(--ease-out), transform .2s var(--ease-out);
  animation: wa-in .6s .8s var(--ease-out) both;
}
.wa-float i { font-size: 1.6rem; }
/* label als los label links van de knop: alleen opacity en transform animeren */
.wa-float__label {
  position: absolute; right: calc(100% + .6rem); top: 50%; padding: .45rem .8rem; border-radius: var(--r-pill);
  background: var(--navy-950); color: var(--on-dark); font-size: .875rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(6px, -50%); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.wa-float:hover { background: var(--wa-hover); }
.wa-float:active { transform: scale(.95); }
@media (hover: hover) {
  .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); }
}
@keyframes wa-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
html:has(.nav.is-open) .wa-float { visibility: hidden; }

/* ---------- sticky actiebalk mobiel ---------- */
.mbar { display: none; }
@media (max-width: 760px) {
  .wa-float { display: none; }
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .mbar {
    position: fixed; z-index: 45; left: .6rem; right: .6rem; bottom: max(.6rem, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: auto auto 1fr; gap: .4rem; padding: .4rem; border-radius: var(--r-pill);
    background: var(--navy-950); box-shadow: 0 14px 30px -12px rgb(1 11 36 / .55);
    /* translate (niet transform): de inschuifanimatie gebruikt transform, zo zitten ze elkaar niet in de weg */
    transition: translate .35s var(--ease-out), visibility .35s;
  }
  .mbar__item { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 0; min-height: 3rem; padding: 0 .95rem; white-space: nowrap; border-radius: var(--r-pill); color: var(--on-dark); font-weight: 700; font-size: .9rem; text-decoration: none; background: color-mix(in oklab, var(--paper) 9%, var(--navy-950)); }
  .mbar__item i { font-size: 1.25rem; }
  .mbar__item--wa i { color: #3DDC84; }
  .mbar__item--cta { background: var(--orange-500); color: var(--navy-950); }
  .mbar__item:active { transform: scale(.96); }
  /* uit beeld (en direct niet meer aanklikbaar) zolang het menu open is, er getypt wordt,
     of een formulier/tool in beeld is: anders vangt de balk tikken op velden die erachter liggen */
  html:has(.nav.is-open) .mbar, html:has(input:focus, textarea:focus, select:focus) .mbar, html.mbar-off .mbar { translate: 0 140%; visibility: hidden; pointer-events: none; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* schuift in zodra de bezoeker begint te scrollen */
    .mbar { animation: mbar-in linear both; animation-timeline: scroll(root); animation-range: 0 220px; }
  }
}
@keyframes mbar-in { from { transform: translateY(140%); opacity: 0; } }
@media (max-width: 360px) { .mbar__item span { display: none; } .mbar__item--cta span { display: inline; } }

/* ---------- hero: woning met de installaties, beeld per dienst ---------- */
.sc { --mode: var(--orange-500); --mode-ink: var(--orange-ink);
  position: relative; isolation: isolate; overflow: clip; min-height: 100svh; display: grid; align-items: center;
  padding: 6.25rem var(--gutter) var(--s-6); transition: --mode .9s var(--ease-out); }
.sc[data-mode="duurzaam"] { --mode: var(--green-500); --mode-ink: var(--green-ink); }
.sc[data-mode="koelen"]   { --mode: var(--blue-400);  --mode-ink: var(--blue-ink); }
.sc[data-mode="geen"]     { --mode: var(--navy-900);  --mode-ink: var(--navy-900); }
.sc__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: var(--s-7); align-items: center; }
.sc-title { margin: 0; font-size: clamp(2.1rem, 1rem + 2.7vw, 3.6rem); line-height: .97; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.sc-modecopy { margin-top: var(--s-4); min-height: 8rem; }
.sc-tag { margin: 0 0 var(--s-2); display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-0); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mode-ink); }
.sc-tag::before { content: ''; width: 1.6rem; height: 2px; background: currentColor; }
.sc-line { margin: 0; font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.sc-sub { margin: var(--s-2) 0 0; max-width: 32rem; color: var(--ink-soft); }
.sc-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
/* iets compacter dan btn--lg: Sabir's knopteksten zijn lang en moeten naast elkaar passen */
.sc-ctas .btn--lg { --pad-x: 1.35rem; font-size: 1.05rem; }
.nowrap { white-space: nowrap; }
.sc-direct { display: flex; gap: var(--s-5); margin: var(--s-5) 0 0; font-size: var(--fs-0); }
.sc-direct { flex-wrap: wrap; align-items: center; color: var(--ink-soft); }
.sc-direct a:hover { color: var(--mode-ink); }
.sc-direct a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-decoration: none; }

/* schakelaar met drie diensten */
.sc-switch { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.sc-switch button {
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--paper); font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.sc-switch button i { font-size: 1.2rem; }
.sc-switch [data-mode="verwarmen"] i { color: var(--orange-ink); }
.sc-switch [data-mode="duurzaam"] i { color: var(--green-ink); }
.sc-switch [data-mode="koelen"] i { color: var(--blue-ink); }
.sc-switch button:hover { border-color: var(--ink-soft); }
.sc-switch button[aria-checked="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); }
.sc-switch button[aria-checked="true"] i { color: var(--mode); }

/* deeltjes per dienst: sneeuwvlokken, warmte, blad en zon */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx i {
  position: absolute; left: var(--x); top: var(--y); font-size: var(--s); color: var(--c); opacity: 0;
  animation: fx-move var(--dur) linear forwards;
}
@keyframes fx-move {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  15% { opacity: var(--o, .9); }
  80% { opacity: var(--o, .9); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}

.sc--huis { background: linear-gradient(180deg, #F8FAFD 0%, #EEF2F7 70%, #E4E9F0 100%); }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes spin { to { rotate: 360deg; } }
/* --- hero 4, realistische woning: render met hotspots en effecten erover --- */
/* vrijstaande woning; camera (zoom naar het apparaat) en muiskanteling op aparte lagen */
.real { position: relative; aspect-ratio: 4 / 3; perspective: 1600px; }
.real__cam {
  --fx: 50; --fy: 54; --z: 1;
  position: absolute; inset: 0;
  /* alleen inzoomen: het huis blijft staan, de zoom gaat om het apparaat heen */
  transform-origin: calc(var(--fx) * 1%) calc(var(--fy) * 1%);
  transform: scale(var(--z));
  transition: transform 1.2s cubic-bezier(.65, 0, .25, 1), transform-origin 0s;
}
/* focus (waar omheen gezoomd wordt) en zoom zijn gescheiden: de focus wisselt alleen als het huis
   uitgezoomd is, zodat het huis nooit verschuift */
.sc--huis[data-focus="verwarmen"] .real__cam { --fx: 57; --fy: 50; }
.sc--huis[data-focus="koelen"] .real__cam    { --fx: 48; --fy: 26; }
.sc--huis[data-focus="duurzaam"] .real__cam  { --fx: 70; --fy: 84; }
.sc--huis[data-cam="overview"] .real__cam { transition-duration: .6s, 0s; }
.sc--huis[data-cam="verwarmen"] .real__cam { --z: 1.14; }
.sc--huis[data-cam="koelen"] .real__cam    { --z: 1.3; }
.sc--huis[data-cam="duurzaam"] .real__cam  { --z: 1.26; }
/* mobiel: geen zoom (te weinig ruimte boven het huis), wel spotlicht en effecten */
@media (max-width: 899px) { .sc--huis[data-cam] .real__cam { --z: 1; } }
.real__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.real__shadow { position: absolute; left: 18%; right: 18%; bottom: 3.5%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(3 30 85 / .28), transparent); filter: blur(6px); }
/* spotlicht: alles behalve het gekozen apparaat zakt iets weg, alleen binnen de woning zelf */
.real__dim { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-out), background .9s;
  /* zelfde schaal als object-fit: contain van de foto, anders schuift het silhouet van de woning */
  -webkit-mask: url(/assets/img/hero/woning-vrij-1200.webp) center / contain no-repeat; mask: url(/assets/img/hero/woning-vrij-1200.webp) center / contain no-repeat;
  background: radial-gradient(circle at calc(var(--fx) * 1%) calc(var(--fy) * 1%), transparent 12%, rgb(1 11 36 / .38) 42%); }
.sc--huis:not([data-cam="overview"]) .real__dim { opacity: 1; }
.real__tint { position: absolute; left: 29.4%; width: 39.6%; mix-blend-mode: multiply; opacity: 0; transition: opacity .8s var(--ease-out), background-color .8s; }
.real__tint--top { top: 29%; height: 19.4%; }
.real__tint--bottom { top: 51.6%; height: 37%; }
.sc--huis[data-mode="verwarmen"] .real__tint { background: #FFD9B8; opacity: .55; }
.sc--huis[data-mode="koelen"] .real__tint--top { background: #CFE6FF; opacity: .7; }
.sc--huis[data-mode="duurzaam"] .real__tint { background: #E3F2D6; opacity: .4; }

.real__pipes { position: absolute; inset: 0; width: 100%; height: 100%; }
.real__pipe { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 12; opacity: 0; transition: opacity .6s; animation: flow 1.3s linear infinite; }
.real__pipe--heat { stroke: var(--orange-500); }
.real__pipe--wp { stroke: var(--green-500); }
.sc--huis[data-mode="verwarmen"] .real__pipe--heat, .sc--huis[data-mode="duurzaam"] .real__pipe--wp { opacity: .9; }

/* vage merktekens op de apparaten wegpoetsen */
.real__patch { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: 3px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

.real__spot { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: 10px;
  box-shadow: 0 0 0 2.5px var(--mode), 0 0 0 9px color-mix(in oklab, var(--mode) 22%, transparent);
  opacity: 0; transform: scale(.94); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.sc--huis[data-mode="verwarmen"] [data-spot="verwarmen"],
.sc--huis[data-mode="duurzaam"] [data-spot="duurzaam"],
.sc--huis[data-mode="koelen"] [data-spot="koelen"] { opacity: 1; transform: none; animation: spot-pulse 2.4s ease-in-out infinite; }
.real__spot--quiet { box-shadow: 0 0 0 2px color-mix(in oklab, var(--mode) 70%, transparent); }
@keyframes spot-pulse { 50% { box-shadow: 0 0 0 2.5px var(--mode), 0 0 0 14px color-mix(in oklab, var(--mode) 10%, transparent); } }
.real__label { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; scale: calc(1 / var(--z)); transform-origin: 50% 100%; display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--navy-900); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.real__label i { color: var(--mode); font-size: 1rem; }
[data-spot="duurzaam"] .real__label { bottom: auto; top: calc(100% + 10px); }

.real__sun { position: absolute; right: 7%; top: 8%; font-size: clamp(2.2rem, 5vw, 3.6rem); color: #FFC24D; opacity: 0; transform: scale(.7); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.sc--huis[data-mode="duurzaam"] .real__sun { opacity: 1; transform: none; animation: spin 40s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .real__pipe, .real__spot, .real__sun { animation: none !important; }
  .real__cam { --z: 1 !important; }
}
@media (max-width: 899px) {
  .sc { padding-top: 6.5rem; align-items: start; }
  .sc__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .sc--huis .sc__visual { order: -1; }
  .sc-modecopy { min-height: 9.5rem; }
}
@media (max-width: 560px) {
  .sc-ctas .btn { width: 100%; }
  .sc-switch { display: grid; grid-template-columns: repeat(3, 1fr); }
  .sc-switch button, .sc-switch--big button { flex-direction: column; justify-content: center; gap: .2rem; padding: .6rem .3rem; border-radius: var(--r-md); font-size: .85rem; white-space: nowrap; }
}
/* ---------- dienstpagina's ---------- */
.svc-page[data-svc="verwarmen"] { --svc: var(--orange-500); --svc-ink: var(--orange-ink);
  --ix: .597; --iy: .323; --zw: 260%; --rw: 19%; --ra: .6; }
.svc-page[data-svc="duurzaam"]  { --svc: var(--green-500); --svc-ink: var(--green-ink);
  --ix: .702; --iy: .838; --zw: 230%; --rw: 28%; --ra: 1.3;
  /* buitenunit staat onderaan: beeld op de bodem uitlijnen, kader mee omlaag */
  --mt: -47.5%; --rt: 77.6%; --mt-m: -72.5%; --rt-m: 72%; }
.svc-page[data-svc="koelen"]    { --svc: var(--blue-400); --svc-ink: var(--blue-ink);
  --ix: .478; --iy: .249; --zw: 280%; --rw: 30%; --ra: 2.8; }

.sp-hero { padding: 7rem var(--gutter) var(--s-8);
  background: radial-gradient(60% 70% at 85% 30%, color-mix(in oklab, var(--svc) 12%, transparent), transparent 70%), linear-gradient(180deg, #F8FAFD, #EEF2F7); }
.sp-hero__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--fs-0); color: var(--ink-soft); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs i { font-size: .8rem; }
.sp-tag { display: inline-flex; align-items: center; gap: .45rem; margin: var(--s-5) 0 0; font-size: var(--fs-0); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--svc-ink); }
.sp-tag i { font-size: 1.1rem; }
.sp-title { hyphens: auto; overflow-wrap: break-word; margin: var(--s-5) 0 0; font-size: clamp(2.5rem, 1rem + 4.4vw, 5rem); line-height: .96; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.sp-lead { margin: var(--s-5) 0 0; max-width: 36rem; font-size: var(--fs-2); color: var(--ink-soft); }
.sp-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.sp-chips { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; margin: var(--s-5) 0 0; padding: 0; font-size: .95rem; font-weight: 600; }
.sp-chips li { display: inline-flex; align-items: center; gap: .45rem; }
.sp-chips i { font-size: 1.2rem; color: var(--svc-ink); }

/* uitsnede uit dezelfde woning als op de homepage, ingezoomd op het apparaat */
.sp-hero__visual { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 45%, #fff, transparent 75%), color-mix(in oklab, var(--svc) 14%, #fff); }
.sp-hero__visual img { position: absolute; top: 0; max-width: none; width: var(--zw); height: auto;
  left: calc(50% - var(--ix) * var(--zw)); margin-top: var(--mt, calc(62.5% - var(--iy) * .75 * var(--zw))); }
.sp-ring { position: absolute; left: 50%; top: var(--rt, 50%); width: var(--rw); aspect-ratio: var(--ra); translate: -50% -50%; border-radius: 14px;
  box-shadow: 0 0 0 3px var(--svc), 0 0 0 12px color-mix(in oklab, var(--svc) 20%, transparent); animation: spot-pulse 2.4s ease-in-out infinite; --mode: var(--svc); }
.sp-float { position: absolute; bottom: 14%; left: var(--x); font-size: 1.7rem; color: var(--svc); opacity: 0; animation: sp-rise 3.6s var(--d) ease-out infinite; }
.sp-float--fall { bottom: auto; top: 58%; animation-name: sp-fall; }
@keyframes sp-fall { 0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(.7); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(150px) rotate(160deg) scale(1); } }
@keyframes sp-rise { 0% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-160px) scale(1); } }

.sp-sec { padding: var(--s-8) var(--gutter); background: var(--paper); }
.sp-sec--mist { background: var(--mist); }
.sp-sec__inner { max-width: var(--maxw); margin: 0 auto; }
.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.sp-h2 { margin: 0; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.2rem); line-height: 1.02; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.sp-text { margin: var(--s-4) 0 0; max-width: 34rem; font-size: var(--fs-2); color: var(--ink-soft); }
.sp-note { margin: var(--s-5) 0 0; color: var(--ink-soft); }
.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.sp-checks li { display: flex; gap: .7rem; align-items: flex-start; padding: var(--s-4); border-radius: var(--r-md); background: var(--mist); font-size: var(--fs-2); }
.sp-checks i { flex-shrink: 0; font-size: 1.4rem; color: var(--svc-ink); margin-top: .1rem; }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.sp-card { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.sp-card__icon { font-size: 2rem; color: var(--svc-ink); }
.sp-card h3 { margin: var(--s-3) 0 0; font-size: var(--fs-3); font-weight: 800; line-height: 1.2; }
.sp-card ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; color: var(--ink-soft); }
.sp-card li { display: flex; gap: .6rem; }
.sp-card li::before { content: ''; flex-shrink: 0; width: .55rem; height: .62rem; margin-top: .45rem; background: var(--svc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.sp-compare__item { padding: var(--s-6) var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-lg); }
.sp-compare__item h3 { margin: 0; font-size: var(--fs-3); font-weight: 800; }
.sp-compare__item p { margin: var(--s-3) 0 0; color: var(--ink-soft); font-size: var(--fs-2); }
.sp-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.sp-brands li { display: grid; align-content: center; min-height: 7rem; padding: var(--s-4); border-radius: var(--r-lg); background: var(--paper);
  font-size: var(--fs-3); font-weight: 800; letter-spacing: -.01em; text-align: center; box-shadow: 0 1px 0 var(--line); }
.sp-brands span { display: block; margin-top: .2rem; font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); }
.sp-hint { padding: 0 var(--gutter); background: var(--mist); }
.sp-hint__inner { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5);
  padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: color-mix(in oklab, var(--green-500) 14%, var(--paper)); }
.sp-hint__inner i.ph-leaf { font-size: 1.8rem; color: var(--green-ink); }
.sp-hint__inner p { margin: 0; flex: 1; min-width: 14rem; font-size: var(--fs-2); }
.sp-hint__inner a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--navy-950); }
.svc-page .calc { padding-top: var(--s-8); }
.sp-cta { padding: var(--s-8) var(--gutter); background: var(--paper); }
.sp-cta__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 1rem + 4vw, 4rem); border-radius: var(--r-lg); text-align: center;
  background: radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--svc) 18%, transparent), transparent 70%), var(--mist); }
.sp-cta__title { margin: 0; font-size: clamp(2rem, 1rem + 3vw, 3.6rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.sp-cta__inner > p { margin: var(--s-4) auto 0; max-width: 32rem; font-size: var(--fs-2); color: var(--ink-soft); }
.sp-cta .sp-ctas { justify-content: center; }

@media (max-width: 899px) {
  .sp-hero { padding-top: 6rem; }
  .sp-hero__inner, .sp-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .sp-hero__visual { max-width: 26rem; aspect-ratio: 1; }
  .sp-hero__visual img { margin-top: var(--mt-m, calc(50% - var(--iy) * .75 * var(--zw))); }
  .sp-ring { top: var(--rt-m, 50%); }
  .sp-cards, .sp-compare { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-ctas .btn { width: 100%; }
  .sp-brands { grid-template-columns: 1fr; }
  .sp-brands li { min-height: 4.5rem; }
}

/* dienstpagina: proces, onderhoud, merklogo's, foto's */
.sp-steps { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); counter-reset: none; }
.sp-step { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--line); }
.sp-step::before { content: ''; position: absolute; left: 0; top: -2px; width: 2.5rem; height: 2px; background: var(--svc); }
.sp-step__n { font-size: var(--fs-0); font-weight: 800; letter-spacing: .1em; color: var(--svc-ink); }
.sp-step h3 { margin: var(--s-2) 0 0; font-size: var(--fs-2); font-weight: 800; }
.sp-step p { margin: var(--s-2) 0 0; color: var(--ink-soft); font-size: .95rem; }
.sp-care { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: start; }
.sp-benefits { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.sp-benefits li { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-2); font-weight: 600; }
.sp-benefits i { flex-shrink: 0; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-size: 1.2rem; color: var(--svc-ink); background: color-mix(in oklab, var(--svc) 14%, var(--paper)); }
.sp-care__card { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 30px 50px -40px rgb(3 30 85 / .4); }
.sp-care__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sp-care__big { margin: 0; font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--svc-ink); }
.sp-care__line { margin: 0; color: var(--ink-soft); }
.sp-care__line strong { color: var(--ink); }
.sp-care__card .btn { margin-top: var(--s-2); }
.sp-brands--logos li { min-height: 8rem; padding: var(--s-5) var(--s-6); }
.sp-brands--logos img { width: auto; height: 2.4rem; max-width: min(11rem, 100%); margin: 0 auto; object-fit: contain; }
.sp-brands--logos img[src*="lg.svg"] { height: 3.1rem; }
.sp-brands--logos img[src*="mitsubishi"] { height: auto; width: 11rem; max-width: 100%; }
.sp-brands--logos img[src*="intergas"] { height: auto; width: 10rem; max-width: 100%; }
.sp-brands--logos img[src*="remeha"] { height: 2.2rem; }
.sp-brands--logos img + span { margin-top: .6rem; }
.sp-gallery[hidden] { display: none; }
.sp-gallery__grid { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s-3); }
.sp-gallery__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 1100px) { .sp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .sp-care { grid-template-columns: 1fr; } .sp-steps { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- over Novaro ---------- */
.ap-hero { padding: 7rem var(--gutter) var(--s-8); background: radial-gradient(60% 70% at 85% 30%, color-mix(in oklab, var(--blue-400) 10%, transparent), transparent 70%), linear-gradient(180deg, #F8FAFD, #EEF2F7); }
.ap-hero__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
.ap-hero__visual { justify-self: end; width: 100%; max-width: 26rem; }
.ap-values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ap-values li { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-lg); background: var(--mist); }
.ap-values i { flex-shrink: 0; font-size: 1.8rem; color: var(--navy-900); }
.ap-values h3 { margin: 0; font-size: var(--fs-2); font-weight: 800; }
.ap-values p { margin: .25rem 0 0; color: var(--ink-soft); }
.ap-card__text { margin: var(--s-3) 0 0; color: var(--ink-soft); }
.ap-icon--blue { color: var(--blue-ink) !important; }
.ap-icon--orange { color: var(--orange-ink) !important; }
.ap-icon--green { color: var(--green-ink) !important; }
.ap-services { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ap-services [data-svc="verwarmen"] { --svc: var(--orange-500); --svc-ink: var(--orange-ink); }
.ap-services [data-svc="duurzaam"] { --svc: var(--green-500); --svc-ink: var(--green-ink); }
.ap-services [data-svc="koelen"] { --svc: var(--blue-400); --svc-ink: var(--blue-ink); }
.ap-services a { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); border: 1.5px solid var(--line); text-decoration: none; transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out); }
.ap-services a:hover { border-color: var(--svc); background: color-mix(in oklab, var(--svc) 6%, var(--paper)); }
.ap-services a > i:first-child { flex-shrink: 0; display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.5rem; border-radius: 50%; color: var(--svc-ink); background: color-mix(in oklab, var(--svc) 14%, var(--paper)); }
.ap-services span { display: grid; flex: 1; }
.ap-services strong { font-size: var(--fs-2); font-weight: 800; }
.ap-services small { color: var(--ink-soft); font-size: .9rem; }
.ap-services__go { font-size: 1.2rem; transition: transform .25s var(--ease-out); }
.ap-services a:hover .ap-services__go { transform: translateX(4px); }
.ap-sub { margin: var(--s-7) 0 var(--s-4); font-size: var(--fs-3); font-weight: 800; }
.ap-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ap-brands li { background: var(--mist); box-shadow: none; }
.ap-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ap-info__block { padding: var(--s-6); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.ap-info__block > i { font-size: 2rem; color: var(--navy-900); }
.ap-info__title { margin: var(--s-3) 0 0; font-size: var(--fs-3); font-weight: 800; }
.ap-info__block > p { margin: var(--s-3) 0 0; color: var(--ink-soft); font-size: var(--fs-2); }
.ap-facts { margin: var(--s-3) 0 0; display: grid; gap: .4rem; }
.ap-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); }
.ap-facts dt { font-weight: 700; }
.ap-facts dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 1060px) { .ap-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .ap-hero { padding-top: 6rem; }
  .ap-hero__inner, .ap-info, .ap-services { grid-template-columns: minmax(0, 1fr); }
  .ap-hero__visual { justify-self: start; max-width: 22rem; }
  .ap-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- algemene voorwaarden ---------- */
.av-hero { padding: 7rem var(--gutter) var(--s-7); background: linear-gradient(180deg, #F8FAFD, #EEF2F7); }
.av-hero__inner { max-width: var(--maxw); margin: 0 auto; }
.av-hero .btn { margin-top: var(--s-5); }
.av-body { max-width: var(--maxw); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-9); display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.av-toc { position: sticky; top: 100px; max-height: calc(100svh - 120px); overflow: auto; padding-right: var(--s-3); }
.av-toc__title { margin: 0 0 var(--s-3); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.av-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.av-toc a { display: flex; gap: .6rem; padding: .35rem .5rem; border-radius: var(--r-sm); font-size: .9rem; text-decoration: none; color: var(--ink-soft); }
.av-toc a span { min-width: 1.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.av-toc a:hover { background: var(--mist); color: var(--ink); }
.av-text { max-width: 48rem; }
.av-art { scroll-margin-top: 100px; padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.av-art h2 { margin: 0 0 var(--s-4); font-size: var(--fs-3); font-weight: 800; line-height: 1.25; }
.av-art h2 span { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .2rem; }
.av-art p, .av-art li { color: var(--ink-soft); line-height: 1.65; }
.av-art p { margin: 0 0 var(--s-3); }
.av-list { margin: 0; padding-left: 1.5rem; display: grid; gap: var(--s-3); }
.av-list > li::marker { font-weight: 700; color: var(--ink); }
.av-sub { margin: var(--s-2) 0 0; padding-left: 1.4rem; display: grid; gap: var(--s-2); }
.av-art ul { margin: var(--s-2) 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; list-style: disc; }
@media (max-width: 899px) {
  .av-hero { padding-top: 6rem; }
  .av-body { grid-template-columns: 1fr; gap: var(--s-6); }
  .av-toc { position: static; max-height: none; padding: var(--s-4); border-radius: var(--r-md); background: var(--mist); }
}
@media (prefers-reduced-motion: reduce) { .sp-ring, .sp-float { animation: none !important; } .sp-float { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================
   Airco-pagina: waarom-lijst, configurator, bedankpagina
   ================================================================ */
.sp-why { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.sp-why li { padding-top: var(--s-4); border-top: 2px solid var(--navy-900); }
.sp-why__n { display: block; font-size: clamp(2.6rem, 1.6rem + 2.4vw, 4rem); line-height: .9; font-weight: 800; font-stretch: 118%; letter-spacing: -.04em; color: var(--svc-ink); }
.sp-why h3 { margin: var(--s-3) 0 0; font-size: var(--fs-2); font-weight: 800; line-height: 1.25; }
.sp-why p { margin: var(--s-2) 0 0; color: var(--ink-soft); font-size: .95rem; }
.sp-note--link { color: var(--ink); }
.sp-note--link a { display: inline-flex; align-items: center; gap: .35rem; margin-left: .25rem; font-weight: 700; color: var(--svc-ink); text-decoration: none; }
.sp-note--link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-cta__inner > p.sp-cta__strong { margin-top: var(--s-3); color: var(--ink); font-weight: 650; }
@media (max-width: 1060px) { .sp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sp-why { grid-template-columns: 1fr; } }

/* ---------- configurator ---------- */
.ac {
  --ac-line: rgb(255 255 255 / .12);
  position: relative; isolation: isolate; padding: var(--s-9) var(--gutter); color: var(--on-dark); overflow: clip; background: var(--navy-950);
}
/* lichtval van de koude kant: op een eigen laag, zodat de sectie zelf effen navy blijft */
.ac::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 85% 0%, color-mix(in oklab, var(--blue-400) 28%, transparent), transparent 70%), radial-gradient(40% 40% at 0% 100%, color-mix(in oklab, var(--blue-400) 14%, transparent), transparent 70%); }
.ac__inner { max-width: var(--maxw); margin: 0 auto; }
.ac__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; margin-bottom: var(--s-6); }
.ac__title { margin: 0; font-size: clamp(2.4rem, 1rem + 5vw, 5.4rem); line-height: .92; font-weight: 800; font-stretch: 118%; letter-spacing: -.035em; text-wrap: balance; }
.ac__intro { margin: 0; font-size: var(--fs-2); color: var(--on-dark-soft); max-width: 30rem; }

.ac__steps { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); scroll-margin-top: 6rem; }
.ac__steps button {
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem .5rem; border: 1.5px solid var(--ac-line); border-radius: var(--r-pill);
  background: transparent; color: var(--on-dark-soft); font-weight: 650; font-size: .95rem; cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.ac__steps button span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgb(255 255 255 / .08); font-size: .85rem; font-weight: 800; color: var(--on-dark); }
.ac__steps button:disabled { cursor: default; opacity: .55; }
.ac__steps button:not(:disabled):not([aria-current]):hover { border-color: var(--on-dark-soft); color: var(--on-dark); }
.ac__steps li.is-done button { color: var(--on-dark); }
.ac__steps li.is-done button span { background: var(--blue-400); color: var(--navy-950); }
.ac__steps button[aria-current] { background: var(--paper); border-color: var(--paper); color: var(--navy-950); }
.ac__steps button[aria-current] span { background: var(--navy-900); color: var(--on-dark); }

.ac__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-4); align-items: start; }
.ac__panel { min-width: 0; padding: clamp(1.4rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); }
.ac__step { min-width: 0; margin: 0; padding: 0; border: 0; outline: none; }
.ac__step[hidden] { display: none; }
.ac__q { display: block; margin: 0; padding: 0; font-size: var(--fs-3); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.ac__hint { margin: var(--s-2) 0 var(--s-5); color: var(--ink-soft); max-width: 40rem; }
.ac__hint--tight { margin: 0 0 var(--s-3); font-size: .95rem; }
.ac__sub { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ac__sub[hidden] { display: none; }
.ac__sub .ac__q { margin-bottom: var(--s-4); font-size: var(--fs-2); }
.ac__error { margin: var(--s-4) 0 0; font-weight: 650; color: #B3261E; }
.ac__error:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ac__step.is-in { animation: ac-in .5s var(--ease-out) both; }
}
@keyframes ac-in { from { opacity: 0; transform: translateY(14px); } }

/* aantallen */
.ac-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.ac-nums--sm { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); max-width: 26rem; }
.ac-num { position: relative; cursor: pointer; }
.ac-num input, .ac-opt input, .ac-brand input, .ac-model input, .ac-iso input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ac-num > span {
  display: grid; place-items: center; gap: .1rem; aspect-ratio: 1 / .9; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ac-num--sm > span { aspect-ratio: auto; padding: .7rem 0; }
.ac-num b { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.ac-num--sm b { font-size: 1.5rem; }
.ac-num small { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.ac-num:hover > span { border-color: var(--ink-soft); }
.ac-num input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); transform: translateY(-2px); }
.ac-num input:checked + span small { color: var(--on-dark-soft); }
.ac-num input:focus-visible + span, .ac-opt input:focus-visible + span, .ac-brand input:focus-visible + span, .ac-model input:focus-visible + .ac-model__card, .ac-iso input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* opstellingen */
.ac-opst { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--s-2); }
.ac-opt { position: relative; display: grid; cursor: pointer; }
.ac-opt > span { display: grid; align-content: start; gap: .3rem; padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.ac-opt strong { font-size: 1rem; line-height: 1.3; }
.ac-opt small { font-size: .875rem; color: var(--ink-soft); }
.ac-opt:hover > span { border-color: var(--ink-soft); }
.ac-opt input:checked + span { border-color: var(--blue-400); box-shadow: inset 0 0 0 1px var(--blue-400); background: color-mix(in oklab, var(--blue-400) 7%, var(--paper)); }
.ac-opt__map { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-height: 2.4rem; margin-bottom: .35rem; }
.ac-opt__map > i { font-size: 1.9rem; color: var(--blue-ink); }
.ac-mini { display: inline-flex; align-items: center; gap: 3px; padding: 4px 4px 4px 6px; border-radius: 6px; background: var(--mist); }
.ac-mini i { width: 7px; height: 20px; border-radius: 2px; background: var(--blue-400); }
.ac-mini b { width: 20px; height: 20px; margin-left: 4px; border-radius: 4px; background: var(--navy-900); }
.ac-opt--advies > span { border-style: dashed; }

/* velden */
.ac-field { display: grid; gap: .4rem; min-width: 0; }
.ac-field > label, .ac-field__label { margin: 0; font-weight: 700; font-size: .95rem; }
.ac input[type="text"], .ac input[type="email"], .ac input[type="tel"], .ac select, .ac textarea {
  width: 100%; min-width: 0; padding: .8rem .95rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  font: inherit; color: var(--ink); transition: border-color .2s var(--ease-out);
}
.ac select { appearance: none; padding-right: 2.4rem; cursor: pointer;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23031E55' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.ac textarea { resize: vertical; min-height: 6rem; }
.ac input:hover, .ac select:hover, .ac textarea:hover { border-color: var(--ink-soft); }
.ac input:focus-visible, .ac select:focus-visible, .ac textarea:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 1px; border-color: var(--navy-900); }
.ac [aria-invalid="true"] { border-color: #C2261D; }
.ac-field__err { margin: 0; font-size: var(--fs-0); font-weight: 600; color: #B3261E; }
.ac-field__err:empty { display: none; }
.ac-unit { position: relative; display: block; }
.ac-unit input { padding-right: 2.8rem !important; }
.ac-unit em { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 650; color: var(--ink-soft); pointer-events: none; }

/* ruimtes */
.ac-rooms { display: grid; gap: var(--s-3); }
.ac-room { padding: var(--s-5); border-radius: var(--r-md); background: var(--mist); }
.ac-room__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-4); }
.ac-room__head h3 { margin: 0; font-size: var(--fs-2); font-weight: 800; }
.ac-tag { padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--paper); font-size: .8rem; font-weight: 700; color: var(--blue-ink); }
.ac-room__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: var(--s-3); }
.ac-iso { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; border: 0; min-width: 0; }
.ac-iso legend { float: left; margin-right: var(--s-2); padding: 0; font-weight: 700; font-size: .95rem; }
.ac-iso label { position: relative; cursor: pointer; }
.ac-iso span { display: block; padding: .5rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-weight: 650; font-size: .95rem; transition: background-color .2s, border-color .2s, color .2s; }
.ac-iso input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); }
.ac-room__kw { display: flex; gap: .55rem; align-items: flex-start; margin: var(--s-4) 0 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--paper); font-size: .95rem; color: var(--ink-soft); }
.ac-room__kw.is-on { color: var(--ink); background: color-mix(in oklab, var(--blue-400) 10%, var(--paper)); }
.ac-room__kw i { margin-top: .15rem; font-size: 1.1rem; color: var(--blue-ink); }

/* merk en model */
.ac-systems { display: grid; gap: var(--s-6); }
.ac-sys + .ac-sys { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.ac-sys__title { margin: 0 0 var(--s-3); font-size: var(--fs-2); font-weight: 800; }
.ac-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ac-brand { position: relative; cursor: pointer; }
.ac-brand > span { display: grid; place-items: center; height: 5rem; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
.ac-brand img { width: auto; max-width: 100%; height: 1.8rem; object-fit: contain; }
.ac-brand img[src*="lg.svg"] { height: 2.4rem; }
.ac-brand img[src*="mitsubishi"] { height: auto; width: 9rem; }
.ac-brand:hover > span { border-color: var(--ink-soft); }
.ac-brand input:checked + span { border-color: var(--blue-400); box-shadow: inset 0 0 0 1px var(--blue-400); background: color-mix(in oklab, var(--blue-400) 6%, var(--paper)); }
.ac-pick { margin-top: var(--s-5); }
.ac-pick__head { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-3); }
.ac-pick__head strong { font-size: 1.05rem; }
.ac-pick__head span { font-size: .875rem; font-weight: 700; color: var(--blue-ink); }
.ac-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-3); }
.ac-model { position: relative; display: grid; cursor: pointer; }
.ac-model__card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: clip; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); transition: border-color .2s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.ac-model__card::after { content: ''; position: absolute; top: .75rem; right: .75rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper) no-repeat center / 60%; transition: background-color .2s, border-color .2s; }
.ac-model__img { display: block; aspect-ratio: 16 / 10; background: linear-gradient(170deg, var(--mist), #E3EAF4); border-bottom: 1px solid var(--line); }
/* multiply: de witte fotoachtergrond verdwijnt in de tegel, de witte unit blijft zichtbaar */
.ac-model__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease-out); }
.ac-model__body { display: grid; align-content: start; gap: .45rem; padding: var(--s-4); }
.ac-model__body strong { font-size: 1.05rem; line-height: 1.25; }
.ac-model__txt { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.ac-model__feat { display: grid; gap: .3rem; margin-top: .3rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.ac-model__feat span { display: flex; gap: .4rem; font-size: .85rem; line-height: 1.4; }
.ac-model__feat i { flex-shrink: 0; margin-top: .15rem; color: var(--blue-ink); }
.ac-model:hover .ac-model__card { border-color: var(--ink-soft); transform: translateY(-3px); box-shadow: 0 18px 30px -24px rgb(3 30 85 / .45); }
.ac-model:hover .ac-model__img img { transform: scale(1.04); }
.ac-model input:checked + .ac-model__card { border-color: var(--blue-400); box-shadow: inset 0 0 0 1px var(--blue-400); }
.ac-model input:checked + .ac-model__card::after { border-color: var(--blue-400);
  background: var(--blue-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23010B24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 62%; }
.ac-copy { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--s-3); padding: .55rem 1rem; border: 1.5px solid var(--navy-900); border-radius: var(--r-pill); background: transparent; font-weight: 650; font-size: .9rem; cursor: pointer; transition: background-color .2s var(--ease-out); }
.ac-copy:hover { background: var(--mist); }

/* overzicht */
.ac-sum__setup { margin: var(--s-2) 0 var(--s-5); font-size: var(--fs-2); font-weight: 650; }
.ac-sum__sys { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.ac-sum__sys-head { display: flex; flex-wrap: wrap; gap: .2rem var(--s-3); align-items: baseline; margin: 0 0 var(--s-2); }
.ac-sum__sys-head span { color: var(--ink-soft); font-size: .95rem; }
.ac-sum__sys ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ac-sum__sys li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--s-3); padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--mist); }
.ac-sum__room { font-weight: 700; }
.ac-sum__sys li > span:nth-child(2) { font-weight: 650; text-align: right; }
.ac-sum__sys li small { grid-column: 1 / -1; color: var(--ink-soft); font-size: .85rem; }
.ac-sum__costs { margin: var(--s-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.ac-sum__costs div { display: flex; justify-content: space-between; gap: var(--s-3); padding: .6rem 0; border-bottom: 1px solid var(--line); }
.ac-sum__costs dt { color: var(--ink-soft); }
.ac-sum__costs dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-sum__total { align-items: baseline; border-bottom: 0 !important; padding-top: var(--s-4) !important; }
.ac-sum__total dt { color: var(--ink); font-weight: 800; }
.ac-sum__total dd { font-size: var(--fs-4); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.ac__disclaimer { display: flex; gap: .6rem; margin: var(--s-4) 0 0; padding: var(--s-4); border-radius: var(--r-md); background: var(--mist); font-size: .95rem; color: var(--ink-soft); }
.ac__disclaimer i { flex-shrink: 0; font-size: 1.25rem; color: var(--navy-900); }
.ac-incl { margin-top: var(--s-3); border: 1.5px solid var(--line); border-radius: var(--r-md); }
.ac-incl summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4); font-weight: 700; cursor: pointer; list-style: none; }
.ac-incl summary::-webkit-details-marker { display: none; }
.ac-incl summary i { transition: transform .3s var(--ease-out); }
.ac-incl[open] summary i { transform: rotate(180deg); }
.ac-incl ul { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-4); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem var(--s-4); }
.ac-incl li { display: flex; gap: .5rem; font-size: .95rem; }
.ac-incl li i { flex-shrink: 0; margin-top: .2rem; color: var(--green-ink); }

/* aanvraag */
.ac-form { display: grid; gap: var(--s-4); }
.ac-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ac-form__row--pc { grid-template-columns: 2fr 1.2fr; max-width: 26rem; }
.ac-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ac-photo { display: grid; gap: var(--s-2); align-content: start; }
.ac-photo__drop { position: relative; display: grid; justify-items: center; gap: .2rem; padding: var(--s-4) var(--s-3); border: 1.5px dashed var(--ink-soft); border-radius: var(--r-md); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.ac-photo__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ac-photo__drop i { font-size: 1.7rem; color: var(--navy-900); }
.ac-photo__drop strong { font-size: .95rem; }
.ac-photo__drop small { font-size: .8rem; color: var(--ink-soft); }
.ac-photo__drop:hover, .ac-photo__drop.is-over { border-color: var(--navy-900); background: color-mix(in oklab, var(--blue-400) 6%, var(--paper)); }
.ac-photo__drop:has(input:focus-visible) { outline: 3px solid var(--blue-400); outline-offset: 2px; }
.ac-photo.has-photos .ac-photo__drop { border-style: solid; border-color: var(--blue-400); }
.ac-photo__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.ac-photo__thumbs:empty { display: none; }
.ac-photo__thumbs li { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: clip; background: var(--line); }
.ac-photo__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ac-photo__thumbs button { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--navy-950); color: var(--on-dark); font-size: .75rem; cursor: pointer; }
.ac__small { margin: 0; font-size: var(--fs-0); color: var(--ink-soft); }

.ac__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ac__nav [data-next], .ac__nav [data-send] { margin-left: auto; }
.ac__nav [hidden] { display: none; }

/* live opstelling */
.ac__live { position: sticky; top: 6rem; display: grid; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--ac-line); border-radius: var(--r-lg); background: rgb(255 255 255 / .04); }
.ac__live-label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.ac__live-empty { margin: 0; color: var(--on-dark-soft); font-size: .95rem; }
.ac__live-empty[hidden] { display: none; }
.ac-map { display: grid; gap: var(--s-4); }
.ac-map:empty { display: none; }
.ac-rig { display: grid; grid-template-columns: minmax(0, 1fr) 56px 4.75rem; align-items: center; }
.ac-rig__in { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ac-rig__in li { display: grid; align-content: center; height: 46px; padding: 0 .8rem; border-radius: 10px; background: color-mix(in oklab, var(--blue-400) 16%, var(--navy-950)); overflow: hidden; }
.ac-rig__in b { font-size: .9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-rig__in small { font-size: .75rem; line-height: 1.3; color: var(--on-dark-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-rig__pipes { width: 56px; overflow: visible; }
.ac-rig__pipes path { fill: none; stroke: var(--blue-400); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ac-rig__pipes.is-open path { stroke: var(--on-dark-soft); stroke-dasharray: .035 .03; }
.ac-out { display: grid; place-items: center; align-content: center; gap: .1rem; aspect-ratio: 1; border-radius: 12px; background: var(--on-dark); color: var(--navy-950); }
.ac-out i { font-size: 1.9rem; }
.ac-out small { max-width: 100%; padding: 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-out--open { background: transparent; border: 1.5px dashed var(--on-dark-soft); color: var(--on-dark-soft); }
@media (prefers-reduced-motion: no-preference) {
  .ac-rig { animation: ac-in .45s var(--d, 0ms) var(--ease-out) both; }
  .ac-rig__pipes:not(.is-open) path { stroke-dashoffset: 1; animation: ac-draw .7s calc(var(--d, 0ms) + .15s) var(--ease-out) forwards; }
  .ac-out:not(.ac-out--open) i { animation: ac-spin 2.4s linear infinite; }
}
@keyframes ac-draw { to { stroke-dashoffset: 0; } }
@keyframes ac-spin { to { transform: rotate(360deg); } }

.ac-total { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--ac-line); }
.ac-total dt { font-size: .95rem; font-weight: 650; color: var(--on-dark-soft); }
.ac-total dd { display: grid; margin: .2rem 0 0; }
.ac-total output { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); line-height: 1; font-weight: 800; font-stretch: 115%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ac-total output.is-empty { font-size: var(--fs-3); font-weight: 700; font-stretch: 100%; letter-spacing: 0; color: var(--on-dark-soft); }
.ac-total small { margin-top: .35rem; font-size: .85rem; color: var(--on-dark-soft); }
.ac__voorlopig { display: flex; gap: .45rem; align-items: flex-start; margin: 0; padding: .6rem .8rem; border-radius: var(--r-sm); background: color-mix(in oklab, var(--orange-500) 16%, var(--navy-950)); color: #FFC79A; font-size: .875rem; font-weight: 600; }
.ac__voorlopig[hidden] { display: none; }
.ac__voorlopig i { margin-top: .1rem; }

@media (max-width: 1060px) {
  .ac__body { grid-template-columns: 1fr; }
  .ac__live { position: static; order: -1; }
  .ac-room__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .ac { padding-block: var(--s-8); }
  .ac__head { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 560px) {
  .ac__steps { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .25rem; scrollbar-width: none; }
  .ac__steps button { white-space: nowrap; }
  .ac-nums { gap: 6px; }
  .ac-num small { display: none; }
  .ac-room { padding: var(--s-4); }
  .ac-form__row, .ac-photos, .ac-incl ul { grid-template-columns: 1fr; }
  .ac-room__grid > :first-child, .ac-room__grid > :last-child { grid-column: 1 / -1; }
  .ac__live { order: 0; }
  .ac-brands { grid-template-columns: 1fr; }
  .ac-brand > span { height: 4rem; }
  .ac__nav .btn { flex: 1; }
}

/* ---------- bedankpagina ---------- */
.ty { display: grid; place-items: center; min-height: 80vh; padding: 9rem var(--gutter) var(--s-8);
  background: radial-gradient(50% 50% at 50% 0%, rgb(247 110 6 / .12), transparent 70%), var(--paper); }
.ty__inner { display: grid; justify-items: center; max-width: 44rem; text-align: center; }
.ty__hex { width: 6rem; }
.ty__hex polygon { fill: var(--orange-500); }
.ty__hex path { fill: none; stroke: var(--navy-950); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: tick .6s .3s var(--ease-out) forwards; }
.ty__title { margin: var(--s-5) 0 0; font-size: clamp(2.6rem, 1.2rem + 5vw, 5.4rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.035em; text-wrap: balance; }
.ty__title span { color: var(--orange-ink); }
.ty__lead { margin: var(--s-5) 0 0; font-size: var(--fs-3); line-height: 1.45; }
.ty__total { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--mist); color: var(--ink-soft); }
.ty__total strong { color: var(--ink); }
.ty__total[hidden] { display: none; }
.ty__next { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); width: 100%; }
.ty__label { margin: 0 0 var(--s-3); font-weight: 700; }
.ty__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }

/* ---------- cv-pagina: lange titel en intro ---------- */
.sp-title--long { font-size: clamp(2.2rem, 1rem + 3.4vw, 4rem); }
.sp-lead strong { color: var(--ink); font-weight: 700; }
.sp-intro { margin: var(--s-3) 0 0; max-width: 36rem; color: var(--ink-soft); }

/* ---------- cv-ketel aanvraagtool (bouwt op .ac) ---------- */
.cvt::before { background: radial-gradient(55% 45% at 85% 0%, color-mix(in oklab, var(--orange-500) 22%, transparent), transparent 70%), radial-gradient(40% 40% at 0% 100%, color-mix(in oklab, var(--orange-500) 10%, transparent), transparent 70%); }
.cvt .ac__steps li.is-done button span { background: var(--orange-500); }
.cvt-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.cvt-fields > * { grid-column: 1 / -1; }
.cvt-fields > .is-half { grid-column: span 2; }
.cvt-fields > .is-quarter { grid-column: span 1; }
/* velden naast elkaar lijnen bovenaan uit en rekken niet mee met een hulptekst in de buurkolom */
.cvt-fields > .ac-field { align-content: start; }
.cvt-step > legend + .cvt-fields { margin-top: var(--s-5); }
.cvt-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.cvt-group legend { margin-bottom: .55rem; padding: 0; }
.cvt-group .ac__hint--tight { margin-top: -.3rem; }
.cvt-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cvt-chips label { position: relative; cursor: pointer; }
.cvt-chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cvt-chips span { display: block; padding: .6rem 1.05rem; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-weight: 650; font-size: .95rem; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out); }
.cvt-chips label:hover span { border-color: var(--ink-soft); }
.cvt-chips input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--on-dark); }
.cvt-chips input[type="checkbox"]:checked + span::before { content: '✓ '; }
.cvt-chips input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }
.cvt-group[aria-invalid="true"] .cvt-chips span, .cvt-group:has(.ac-field__err:not(:empty)) .cvt-chips span { border-color: #C2261D; }

/* keuze: installatie / onderhoud / storing */
.cvt-kind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.cvt-kind__opt { position: relative; display: grid; cursor: pointer; }
.cvt-kind__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cvt-kind__opt > span { display: grid; align-content: start; gap: .4rem; padding: var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .3s var(--ease-out); }
.cvt-kind__opt i { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .4rem; font-size: 1.6rem; color: var(--navy-950); background: color-mix(in oklab, var(--orange-500) 18%, var(--paper));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.cvt-kind__opt[data-kind="storing"] i { background: color-mix(in oklab, #E5484D 18%, var(--paper)); }
.cvt-kind__opt strong { font-size: var(--fs-2); }
.cvt-kind__opt small { color: var(--ink-soft); font-size: .95rem; }
.cvt-kind__opt:hover > span { border-color: var(--ink-soft); transform: translateY(-3px); }
.cvt-kind__opt input:checked + span { border-color: var(--orange-500); box-shadow: inset 0 0 0 1px var(--orange-500); background: color-mix(in oklab, var(--orange-500) 6%, var(--paper)); }
.cvt-kind__opt input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* fotovakken met voorbeeld */
.cvt-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.cvt-photo { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); overflow: clip; border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color .2s var(--ease-out), opacity .2s var(--ease-out); }
.cvt-photo.has-photos { border-color: var(--green-500); }
.cvt-photo.is-nvt { opacity: .7; }
.cvt-photo__ex { position: relative; min-height: 10rem; margin: 0; background: var(--mist); }
.cvt-photo__ex img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cvt-photo__ex figcaption { position: absolute; left: .5rem; top: .5rem; padding: .15rem .5rem; border-radius: var(--r-pill); background: var(--navy-950); color: var(--on-dark); font-size: .75rem; font-weight: 700; }
.cvt-photo__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); min-width: 0; }
/* uploadknop onderaan de kaart: naast elkaar staande fotovakken lijnen zo altijd gelijk uit */
.cvt-photo__body .ac-photo__drop { margin-top: auto; }
.cvt-photo__title { margin: 0; font-weight: 800; }
.cvt-photo__txt { margin-bottom: var(--s-2) !important; }
.cvt-photo__txt { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.cvt-photo .ac-photo__drop { grid-auto-flow: column; justify-content: center; align-items: center; gap: .5rem; padding: .6rem var(--s-3); }
.cvt-photo .ac-photo__drop i { font-size: 1.3rem; }
.cvt-photo .ac-photo__drop:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.cvt-photo .ac-photo__drop:has(input:disabled) input { cursor: not-allowed; }
.cvt-nvt { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
.cvt-nvt input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--navy-900); }
.cvt input[type="date"] { width: 100%; min-width: 0; padding: .75rem .95rem; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--paper); font: inherit; color: var(--ink); }

/* zijpaneel */
.cvt-side { gap: var(--s-5); }
.cvt-side__kind { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.cvt-side__kind i { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; font-size: 1.6rem; color: var(--navy-950); background: var(--orange-500);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.cvt-side__kind span { display: grid; }
.cvt-side__kind small { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.cvt-side__kind strong { font-size: var(--fs-3); font-weight: 800; font-stretch: 110%; }
.cvt-side__progress { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cvt-side__progress:empty { display: none; }
.cvt-side__progress li { display: flex; align-items: center; gap: .6rem; color: var(--on-dark-soft); font-weight: 600; }
.cvt-side__progress li i { font-size: 1.2rem; }
.cvt-side__progress li.is-done { color: var(--on-dark); }
.cvt-side__progress li.is-done i { color: var(--orange-500); }
.cvt-side__progress li.is-now { color: var(--on-dark); }
.cvt-side__progress li.is-now i { color: var(--on-dark); }
.cvt-side__help { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--ac-line); }
.cvt-side__spoed { display: none; gap: .55rem; align-items: flex-start; margin: 0 0 var(--s-2); padding: .8rem .9rem; border-radius: var(--r-sm); background: color-mix(in oklab, #E5484D 20%, var(--navy-950)); font-size: .95rem; }
.cvt-side__spoed i { margin-top: .15rem; color: #FF9B9E; }
.cvt.is-storing .cvt-side__spoed { display: flex; }
.cvt-side__label { margin: 0; font-size: .95rem; font-weight: 650; color: var(--on-dark-soft); }
.cvt-side__row { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: var(--r-sm); background: color-mix(in oklab, var(--paper) 7%, var(--navy-950)); font-weight: 700; font-size: var(--fs-2); text-decoration: none; transition: background-color .2s var(--ease-out); }
.cvt-side__row:hover { background: color-mix(in oklab, var(--paper) 13%, var(--navy-950)); }
.cvt-side__row i { font-size: 1.3rem; color: var(--orange-500); }
.cvt-side__hours { margin: 0; font-size: .875rem; color: var(--on-dark-soft); }

@media (max-width: 1060px) { .cvt-side { order: 0; } }
@media (max-width: 760px) {
  .cvt-kind { grid-template-columns: 1fr; }
  .cvt-kind__opt > span { grid-template-columns: auto 1fr; column-gap: var(--s-3); padding: var(--s-4); }
  .cvt-kind__opt i { grid-row: span 2; margin: 0; }
  .cvt-photos { grid-template-columns: 1fr; }
  .cvt-photo { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr); }
  .cvt-photo__body { padding: var(--s-3); }
  .cvt-photo .ac-photo__drop strong { font-size: .9rem; }
  .cvt-fields { grid-template-columns: 1fr 1fr; }
  .cvt-fields > .is-half { grid-column: 1 / -1; }
}

/* ---------- contactpagina ---------- */
.crumbs--dark { color: var(--on-dark-soft); }
.crumbs--dark a:hover { color: var(--on-dark); }
.ct__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; }
.ct__side { position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column; padding: 8.5rem clamp(1.25rem, 1rem + 3vw, 4rem) var(--s-8); background: var(--navy-950); color: var(--on-dark); }
.ct__side::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 45% at 0% 100%, color-mix(in oklab, var(--orange-500) 22%, transparent), transparent 70%), radial-gradient(50% 35% at 100% 0%, color-mix(in oklab, var(--blue-400) 18%, transparent), transparent 70%); }
.ct__title { margin: var(--s-5) 0 0; font-size: clamp(3rem, 1.4rem + 5vw, 6.2rem); line-height: .9; font-weight: 800; font-stretch: 120%; letter-spacing: -.04em; }
.ct__title span { color: var(--orange-500); }
.ct__intro { margin: var(--s-5) 0 0; max-width: 26rem; font-size: var(--fs-2); color: var(--on-dark-soft); }
.ct__direct { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .12); }
.ct__direct li { border-bottom: 1px solid rgb(255 255 255 / .12); }
.ct__row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none; }
.ct__row > i:first-child { flex-shrink: 0; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; font-size: 1.5rem; color: var(--navy-950); background: var(--on-dark);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); transition: background-color .25s var(--ease-out), transform .35s var(--ease-spring); }
.ct__row span { display: grid; min-width: 0; flex: 1; }
.ct__row small { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.ct__row strong { font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 700; font-stretch: 106%; overflow-wrap: anywhere; }
.ct__row strong[data-cfg="email"] { font-size: clamp(1rem, .9rem + .45vw, 1.2rem); }
.ct__go { font-size: 1.3rem; color: var(--on-dark-soft); transition: transform .3s var(--ease-out), color .2s; }
.ct__row:hover > i:first-child { background: var(--orange-500); transform: rotate(-8deg) scale(1.06); }
.ct__row:hover .ct__go { color: var(--orange-500); transform: translate(3px, -3px); }
.ct__meta { display: grid; gap: var(--s-4); margin: auto 0 0; padding-top: var(--s-7); }
.ct__meta div { display: grid; gap: .15rem; }
.ct__meta dt { display: flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); }
.ct__meta dt i { font-size: 1rem; color: var(--orange-500); }
.ct__meta dd { margin: 0; font-size: var(--fs-1); }

.ct__main { display: grid; align-items: center; padding: 8.5rem clamp(1.25rem, 1rem + 3vw, 4rem) var(--s-8); background: var(--mist); }
.ct__card { max-width: 46rem; width: 100%; background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 40px 60px -50px rgb(3 30 85 / .45); }
.ct__form { display: grid; gap: var(--s-5); }
.ct__h2 { margin: 0; font-size: var(--fs-4); line-height: 1.05; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.ct__topics span { display: inline-flex; align-items: center; gap: .45rem; }
.ct__topics i { font-size: 1.1rem; }
.ct__card input, .ct__card textarea { background: var(--paper); }
.ct__files li { display: grid; }
.ct__pdf { display: grid; place-items: center; align-content: center; gap: .2rem; height: 100%; padding: .3rem; font-size: .7rem; line-height: 1.2; text-align: center; word-break: break-all; color: var(--ink); }
.ct__pdf i { font-size: 1.6rem; color: #B3261E; }

@media (prefers-reduced-motion: no-preference) {
  .ct__side > * { animation: ac-in .7s var(--ease-out) both; }
  .ct__side > :nth-child(2) { animation-delay: .06s; }
  .ct__side > :nth-child(3) { animation-delay: .12s; }
  .ct__direct li { animation: ct-row .6s var(--ease-out) both; }
  .ct__direct li:nth-child(1) { animation-delay: .2s; }
  .ct__direct li:nth-child(2) { animation-delay: .28s; }
  .ct__direct li:nth-child(3) { animation-delay: .36s; }
  .ct__card { animation: ac-in .8s .15s var(--ease-out) both; }
}
@keyframes ct-row { from { opacity: 0; transform: translateX(-18px); } }

@media (max-width: 1000px) {
  .ct__wrap { grid-template-columns: 1fr; min-height: 0; }
  .ct__side { padding-top: 7rem; }
  .ct__meta { margin-top: 0; }
  .ct__main { padding-top: var(--s-6); }
}

/* ---------- gedeelde dienstkleuren voor losse kaarten ---------- */
.rel__card[data-svc="verwarmen"], .nf__links [data-svc="verwarmen"], .case[data-svc="verwarmen"] { --svc: var(--orange-500); --svc-ink: var(--orange-ink); }
.rel__card[data-svc="duurzaam"], .nf__links [data-svc="duurzaam"], .case[data-svc="duurzaam"] { --svc: var(--green-500); --svc-ink: var(--green-ink); }
.rel__card[data-svc="koelen"], .nf__links [data-svc="koelen"], .case[data-svc="koelen"] { --svc: var(--blue-400); --svc-ink: var(--blue-ink); }
.rel__card[data-svc="onderhoud"], .nf__links [data-svc="onderhoud"] { --svc: var(--navy-900); --svc-ink: var(--navy-900); }

/* ---------- andere diensten (interne links) ---------- */
.rel { padding: var(--s-8) var(--gutter) 0; background: var(--paper); }
.rel__inner { max-width: var(--maxw); margin: 0 auto; }
.rel__title { margin: 0 0 var(--s-5); font-size: var(--fs-4); font-weight: 800; letter-spacing: -.02em; }
.rel__list, .nf__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.rel__card, .nf__links a { display: flex; align-items: center; gap: var(--s-4); height: 100%; padding: var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-lg); text-decoration: none; transition: border-color .25s var(--ease-out), transform .3s var(--ease-out); }
.rel__card > i:first-child, .nf__links a > i:first-child { flex-shrink: 0; display: grid; place-items: center; width: 3rem; height: 3rem; font-size: 1.5rem; color: var(--navy-950); background: color-mix(in oklab, var(--svc) 22%, var(--paper));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.rel__card span, .nf__links a span { display: grid; flex: 1; min-width: 0; }
.rel__card strong, .nf__links strong { font-size: var(--fs-2); font-weight: 800; }
.rel__card small, .nf__links small { color: var(--ink-soft); font-size: .95rem; }
.rel__card > i:last-child, .nf__links a > i:last-child { color: var(--svc-ink); font-size: 1.2rem; transition: transform .25s var(--ease-out); }
.rel__card:hover, .nf__links a:hover { border-color: var(--svc); transform: translateY(-3px); }
.rel__card:hover > i:last-child, .nf__links a:hover > i:last-child { transform: translateX(4px); }
@media (max-width: 899px) { .rel__list, .nf__links { grid-template-columns: 1fr; } }

/* ---------- uitgevoerde projecten (alleen zichtbaar met echte cases) ---------- */
.cases { padding: var(--s-9) var(--gutter); background: var(--mist); }
.cases__inner { max-width: var(--maxw); margin: 0 auto; }
.cases__title { margin: 0 0 var(--s-6); font-size: clamp(2.2rem, 1rem + 4vw, 4.4rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.03em; }
.cases__list { display: grid; gap: var(--s-5); }
.case { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); overflow: clip; border-radius: var(--r-lg); background: var(--paper); }
.case:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.case:nth-child(even) .case__img { order: 2; }
.case__img { margin: 0; min-height: 22rem; background: var(--line); }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case__body { display: grid; align-content: center; gap: var(--s-4); padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.case__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0; color: var(--ink-soft); font-size: .95rem; }
.case__tag { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--svc) 14%, var(--paper)); color: var(--navy-950); font-weight: 700; font-size: .85rem; }
.case__tag i { color: var(--svc-ink); }
.case__title { margin: 0; font-size: var(--fs-4); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.case__story { display: grid; gap: var(--s-3); margin: 0; }
.case__story dt { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--svc-ink); }
.case__story dd { margin: .15rem 0 0; color: var(--ink-soft); }
.case__specs { list-style: none; margin: 0; padding: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); border-top: 1px solid var(--line); }
.case__specs li { padding: .3rem .75rem; border-radius: var(--r-pill); background: var(--mist); font-size: .875rem; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .case { animation: ac-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    .case__img img { animation: case-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes case-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@media (max-width: 899px) {
  .case, .case:nth-child(even) { grid-template-columns: 1fr; }
  .case:nth-child(even) .case__img { order: 0; }
  .case__img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- 404 ---------- */
.nf { padding: 9rem var(--gutter) var(--s-9); background: radial-gradient(45% 40% at 50% 0%, color-mix(in oklab, var(--orange-500) 12%, transparent), transparent 70%), var(--paper); }
.nf__inner { max-width: 62rem; margin: 0 auto; display: grid; justify-items: start; }
.nf__pipe { width: min(30rem, 100%); height: auto; overflow: visible; }
.nf__pipe path { fill: none; stroke: var(--orange-ink); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.nf__pipe rect { fill: var(--navy-900); }
.nf__pipe .nf__drip { stroke: var(--blue-400); stroke-width: 8; }
.nf__code { margin: var(--s-4) 0 0; font-size: clamp(5rem, 2rem + 14vw, 12rem); line-height: .8; font-weight: 800; font-stretch: 125%; letter-spacing: -.05em; color: var(--navy-900); }
.nf__title { margin: var(--s-4) 0 0; font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5rem); line-height: .95; font-weight: 800; font-stretch: 118%; letter-spacing: -.035em; text-wrap: balance; }
.nf__title span { color: var(--orange-ink); }
.nf__lead { margin: var(--s-5) 0 var(--s-6); max-width: 36rem; font-size: var(--fs-2); color: var(--ink-soft); }
.nf__links { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s-6); }
@media (max-width: 760px) { .nf__links { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .nf__pipe .nf__drip { animation: nf-drip 1.8s .6s var(--ease-out) infinite; }
}
@keyframes nf-drip { 0% { d: path('M270 40 v0'); opacity: 1; } 60% { d: path('M270 40 v46'); opacity: 1; } 100% { d: path('M270 96 v6'); opacity: 0; } }

/* zoekwoord als eerste regel van de H1, klein boven de slogan */
.h1-kicker { display: block; margin-bottom: .55em; font-size: max(.95rem, .26em); line-height: 1.3; font-weight: 700; font-stretch: 100%; letter-spacing: .01em; color: var(--ink-soft); text-wrap: balance; }
.svc-page .h1-kicker { color: var(--svc-ink); }

/* ================================================================
   Bewegingslaag dienstpagina's (.svc-page) en Over Novaro (.about-page): scroll-driven CSS.
   Alleen individuele translate/rotate/scale, zodat hover-transforms
   en de bestaande hero-animaties ongemoeid blijven.
   Stagger via --i per kind; zonder ondersteuning of met reduced
   motion staat alles gewoon stil op zijn plek.
   ================================================================ */
:is(.svc-page, .about-page) :is(.sp-why, .sp-cards, .sp-checks, .sp-steps, .sp-brands, .faq__list, .rel__list, .sp-compare, .ap-values, .ap-services, .ap-info) > :nth-child(1) { --i: 0; }
:is(.svc-page, .about-page) :is(.sp-why, .sp-cards, .sp-checks, .sp-steps, .sp-brands, .faq__list, .rel__list, .sp-compare, .ap-values, .ap-services, .ap-info) > :nth-child(2) { --i: 1; }
:is(.svc-page, .about-page) :is(.sp-why, .sp-cards, .sp-checks, .sp-steps, .sp-brands, .faq__list, .rel__list, .sp-compare, .ap-values, .ap-services, .ap-info) > :nth-child(3) { --i: 2; }
:is(.svc-page, .about-page) :is(.sp-why, .sp-cards, .sp-checks, .sp-steps, .sp-brands, .faq__list, .rel__list, .sp-compare, .ap-values, .ap-services, .ap-info) > :nth-child(4) { --i: 3; }
:is(.svc-page, .about-page) :is(.sp-why, .sp-cards, .sp-checks, .sp-steps, .sp-brands, .faq__list, .rel__list, .sp-compare, .ap-values, .ap-services, .ap-info) > :nth-child(5) { --i: 4; }
:is(.svc-page, .about-page) :is(.sp-why, .sp-cards, .sp-checks, .sp-steps, .sp-brands, .faq__list, .rel__list, .sp-compare, .ap-values, .ap-services, .ap-info) > :nth-child(n+6) { --i: 5; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* hero: twee lagen op verschillende snelheden + lichte kanteling */
    .svc-page .sp-hero__inner { perspective: 1400px; }
    .svc-page .sp-hero__visual { animation: mv-hero-visual linear both; animation-timeline: scroll(root); animation-range: 0 90vh; transform-origin: 50% 0; }
    .svc-page .sp-hero__copy { animation: mv-hero-copy linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }

    /* koppen stijgen op uit een masker */
    :is(.svc-page, .about-page) :is(.sp-h2, .ac__title, .faq__title, .rel__title, .sp-cta__title) { animation: mv-mask linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
    :is(.svc-page, .about-page) :is(.sp-text, .sp-note, .ac__intro, .faq__ask) { animation: mv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }

    /* gestaffelde lijsten */
    :is(.svc-page, .about-page) :is(.sp-checks, .sp-brands, .faq__list, .rel__list) > * { animation: mv-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(45% + var(--i) * 6%); }

    /* waarom: cijfers stijgen op, de lijn erboven tekent zich */
    :is(.svc-page, .about-page) .sp-why li { position: relative; border-top-color: transparent; animation: mv-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) entry calc(50% + var(--i) * 5%); }
    :is(.svc-page, .about-page) .sp-why li::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--navy-900); transform-origin: 0 50%;
      animation: mv-line linear both; animation-timeline: view(); animation-range: entry calc(10% + var(--i) * 5%) cover 40%; }
    :is(.svc-page, .about-page) .sp-why__n { animation: mv-num linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 5%) entry calc(70% + var(--i) * 5%); }

    /* vergelijking: twee panelen draaien vanuit tegengestelde kanten naar elkaar toe */
    :is(.svc-page, .about-page) .sp-compare { perspective: 1200px; }
    :is(.svc-page, .about-page) .sp-compare__item:nth-child(1) { transform-origin: 0 50%; animation: mv-swing-l linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    :is(.svc-page, .about-page) .sp-compare__item:nth-child(2) { transform-origin: 100% 50%; animation: mv-swing-r linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }

    /* dienstkaarten kantelen vanuit de diepte omhoog */
    :is(.svc-page, .about-page) .sp-cards { perspective: 1200px; }
    :is(.svc-page, .about-page) .sp-card { transform-origin: 50% 100%; animation: mv-tilt-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 7%) entry calc(70% + var(--i) * 7%); }

    /* proces: één lijn tekent mee met de scroll, stappen lichten op als hij ze bereikt */
    @media (min-width: 1101px) {
      :is(.svc-page, .about-page) .sp-steps { position: relative; }
      :is(.svc-page, .about-page) .sp-step { border-top-color: transparent; }
      :is(.svc-page, .about-page) .sp-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
      :is(.svc-page, .about-page) .sp-steps::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--svc); transform-origin: 0 50%;
        animation: mv-line linear both; animation-timeline: view(); animation-range: cover 20% cover 45%; }
      :is(.svc-page, .about-page) .sp-step::before { display: none; }
      /* stap i licht op op het moment dat de lijn (20% → 45%) zijn positie bereikt */
      :is(.svc-page, .about-page) .sp-steps .sp-step > * { animation-range: cover calc(17% + var(--i) * 5.5%) cover calc(25% + var(--i) * 5.5%); }
    }
    @media (max-width: 1100px) {
      :is(.svc-page, .about-page) .sp-step::before { transform-origin: 0 50%; animation: mv-line linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
    }
    :is(.svc-page, .about-page) .sp-step > * { animation: mv-up linear both; animation-timeline: view(); animation-range: entry calc(30% + var(--i) * 6%) entry calc(80% + var(--i) * 6%); }
    :is(.svc-page, .about-page) .sp-step__n { display: inline-block; animation-name: mv-pop; }

    /* onderhoudskaart en hint */
    :is(.svc-page, .about-page) .sp-care__card { animation: mv-card linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    :is(.svc-page, .about-page) .sp-hint__inner { animation: mv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }

    /* configurator / aanvraagtool: titel schuift mee, paneel stijgt op */
    :is(.svc-page, .about-page) .ac__title { animation: mv-mask linear both, mv-drift linear both; animation-timeline: view(), view(); animation-range: entry 5% entry 65%, cover 0% cover 100%; }
    :is(.svc-page, .about-page) .ac__body { animation: mv-up-lg linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }

    /* slot: het CTA-blok groeit naar volle grootte */
    :is(.svc-page, .about-page) .sp-cta__inner { animation: mv-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}

@keyframes mv-hero-visual { to { translate: 0 18vh; rotate: x 10deg; scale: .94; opacity: .55; } }
@keyframes mv-hero-copy { to { translate: 0 -10vh; opacity: 0; } }
@keyframes mv-mask { from { opacity: 0; translate: 0 .6em; clip-path: inset(0 0 100% 0); } to { opacity: 1; translate: 0 0; clip-path: inset(0 0 -20% 0); } }
@keyframes mv-up { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
@keyframes mv-up-lg { from { opacity: 0; translate: 0 90px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mv-line { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes mv-num { from { opacity: 0; translate: 0 .5em; scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes mv-pop { from { opacity: 0; scale: .4; } 70% { scale: 1.15; } to { opacity: 1; scale: 1; } }
@keyframes mv-swing-l { from { opacity: 0; rotate: y 34deg; } to { opacity: 1; rotate: y 0deg; } }
@keyframes mv-swing-r { from { opacity: 0; rotate: y -34deg; } to { opacity: 1; rotate: y 0deg; } }
@keyframes mv-tilt-up { from { opacity: 0; translate: 0 70px; rotate: x 32deg; } to { opacity: 1; translate: 0 0; rotate: x 0deg; } }
@keyframes mv-card { from { opacity: 0; translate: 0 80px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes mv-drift { from { translate: 4% 0; } to { translate: -3% 0; } }
@keyframes mv-grow { from { scale: .88; opacity: .3; } to { scale: 1; opacity: 1; } }

/* telefoon: kortere afstanden, geen 3D, verticale proceslijn */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .svc-page .sp-hero__visual { animation-name: mv-up; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    .svc-page .sp-hero__copy { animation: none; }
    :is(.svc-page, .about-page) :is(.sp-compare__item:nth-child(n), .sp-card, .sp-care__card, .ap-info__block) { animation-name: mv-up; }
    :is(.svc-page, .about-page) .ac__title { animation: mv-mask linear both; animation-timeline: view(); animation-range: entry 5% entry 65%; }
  }
}

/* ---------- Over Novaro: eigen accenten ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* hero: het portret stijgt sneller dan de tekst (diepte), tekst vervaagt */
    .about-page .ap-hero__visual { animation: mv-ap-visual linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    .about-page .ap-hero__copy { animation: mv-hero-copy linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    /* kernwaarden schuiven gestaffeld vanaf rechts binnen */
    .about-page .ap-values { perspective: 1100px; }
    .about-page .ap-values li { transform-origin: 100% 50%; animation: mv-from-right linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 7%) entry calc(55% + var(--i) * 7%); }
    .about-page .ap-values i { animation: mv-pop linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--i) * 7%) entry calc(70% + var(--i) * 7%); }
    /* diensten en infoblokken */
    .about-page .ap-services li { animation: mv-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(50% + var(--i) * 6%); }
    .about-page .ap-services a > i:first-child { animation: mv-pop linear both; animation-timeline: view(); animation-range: entry calc(25% + var(--i) * 6%) entry calc(75% + var(--i) * 6%); }
    .about-page .ap-info { perspective: 1200px; }
    .about-page .ap-info__block { transform-origin: 50% 100%; animation: mv-tilt-up linear both; animation-timeline: view(); animation-range: entry calc(var(--i) * 6%) entry calc(65% + var(--i) * 6%); }
    .about-page .ap-sub { animation: mv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .about-page .ap-hero__visual, .about-page .ap-hero__copy { animation: none; }
    .about-page .ap-values li { animation-name: mv-up; }
  }
}
@keyframes mv-ap-visual { to { translate: 0 -14vh; rotate: 6deg; scale: .92; opacity: .6; } }
@keyframes mv-from-right { from { opacity: 0; rotate: y -40deg; } to { opacity: 1; rotate: y 0deg; } }

/* ---------- contact: lichtvlek volgt de muis, kaart en velden op mobiel bij binnenkomst ---------- */
.ct__side::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-out);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--orange-500) 16%, transparent), transparent 70%); }
.ct__side.is-lit::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ct__side::before { animation: mv-glow-shift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .ct__form > * { animation: mv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
    .ct__topics label { animation: mv-pop linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    @media (max-width: 1000px) { .ct__card { animation: mv-up-lg linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } }
  }
}
@keyframes mv-glow-shift { to { translate: 0 -12%; scale: 1.15; } }

/* ---------- juridische pagina's: rustig ---------- */
/* actief artikel in de inhoudsopgave, koppen kort in beeld */
.legal-page .av-toc a.is-current { background: color-mix(in oklab, var(--orange-500) 12%, var(--paper)); color: var(--ink); }
.legal-page .av-toc a.is-current span { color: var(--orange-ink); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .legal-page .av-art h2 { animation: mv-up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* Over Novaro: persoonlijk blok "Maak kennis met Sabir" */
.ap-meet__kicker { margin: 0 0 var(--s-3); font-size: var(--fs-1); font-weight: 700; color: var(--orange-ink); }
.ap-meet__text .sp-text { max-width: 40rem; }
.ap-meet__text .sp-text:first-child { margin-top: 0; color: var(--ink); font-weight: 650; }
.ap-meet__sign { display: grid; gap: .1rem; margin: var(--s-5) 0 0; }
.ap-meet__sign strong { font-size: var(--fs-3); font-weight: 800; }
.ap-meet__sign span { color: var(--ink-soft); font-size: .95rem; }

/* contactformulier: korte uitleg, meerdere onderwerpen, spoedmelding */
.ct__lead { margin: calc(var(--s-3) * -1) 0 0; color: var(--ink-soft); }
.ct__hint { margin: 0 0 .2rem; font-size: var(--fs-0); color: var(--ink-soft); }
.ct__topics input[type="checkbox"]:checked + span::before { content: none; }
.ct__topics input:checked + span { box-shadow: 0 0 0 2px var(--orange-500); }
.ct__spoed { display: flex; gap: .6rem; align-items: flex-start; margin: var(--s-2) 0 0; padding: .8rem 1rem; border-radius: var(--r-md); background: color-mix(in oklab, #E5484D 12%, var(--paper)); font-size: .95rem; }
.ct__spoed[hidden] { display: none; }
.ct__spoed i { margin-top: .15rem; font-size: 1.2rem; color: #B3261E; }
.ct__spoed a { font-weight: 700; color: inherit; }

/* onderhoudskaart met titel i.p.v. vaste termijn; lijst met externe links */
.sp-care__title { margin: 0; font-size: var(--fs-3); line-height: 1.2; font-weight: 800; color: var(--svc-ink); }
.sp-links { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.sp-links a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--svc-ink); text-decoration: none; }
.sp-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* configurator: modelkaart "Advies gewenst" en overzichtsregels */
.ac-model--advies .ac-model__img { display: grid; place-items: center; }
.ac-model--advies .ac-model__img i { font-size: 3rem; color: var(--blue-ink); }
.ac-sum__costs dt small { font-weight: 450; color: var(--ink-soft); }
.ac-sum__muted { font-weight: 600 !important; color: var(--ink-soft); text-align: right; }
.ac-sum__note { margin: var(--s-3) 0 0; font-size: .95rem; color: var(--ink-soft); }

/* twee dienstkaarten: geen lege derde kolom */
.sp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) { .sp-cards--2 { grid-template-columns: 1fr; } }

/* smalle schermen: lange knopteksten mogen afbreken in plaats van de pagina te verbreden */
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; } }