/* Airco Bergen op Zoom: "Koelen en verwarmen"
   Ubuntu Sans only, self-hosted. One accent that follows the season (summer blue, winter red-brown).
   The thermostat scale (a ruled line with ticks and one sliding marker) appears on the hero price block and on price tables only. */

@font-face {
  font-family: "Ubuntu Sans";
  src: url("fonts/ubuntu-sans-latin-ext.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ubuntu Sans";
  src: url("fonts/ubuntu-sans-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* palette */
  --white: #FFFFFF;
  --charcoal: #2A2E33;
  --neutral: #F2F3F3;
  --summer: #2D64A8;
  --winter: #A93F22;
  --line: #D5D8DA;
  --slate: #555C63;   /* tint of charcoal: secondary text */
  --edge: #6E757C;    /* tint of charcoal: form control borders, 3:1 on white */
  --error: #A8003C;   /* crimson-pink, hue 339: clearly apart from the winter red-brown (hue 13); 7.7:1 on white, 6.9:1 on the form grey */

  --accent: var(--summer);
  --focus: var(--charcoal);
  /* thermostat scale: a 1 px line with ticks, drawn in currentColor (the season accent, tinted, set where it is used) */
  --scale:
    linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 40px) left bottom / 100% 10px no-repeat;

  /* type */
  --font: "Ubuntu Sans", system-ui, "Segoe UI", "Helvetica Neue", sans-serif;
  --t-s: 0.9375rem;                                  /* 15, the smallest text on the page */
  --t-0: 1.0625rem;                                  /* 17 */
  --t-1: 1.25rem;                                    /* 20 */
  --t-2: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);   /* h3 */
  --t-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);        /* h2 inside running text */
  --t-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);     /* h2 of a home section */
  --t-4: clamp(2.125rem, 1.5rem + 2.6vw, 3.9rem);    /* h1 */

  /* space (4 px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --gutter: 16px;
  --gap: 24px;
  --max: 1200px;
  --measure: 41rem;   /* one content measure: paragraphs, h2, notes, tables, FAQ and quote cards share it */
  --sec: 64px;
  --radius: 6px;
  --header-h: 72px;
  --hero-measure: 42.5rem;   /* lead and price block in the hero end on the same right edge */
  --dock-h: 72px;
}
html[data-season="winter"] { --accent: var(--winter); }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --gap: 32px; --sec: 96px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (max-width: 899px) { html { scroll-padding-bottom: calc(var(--dock-h) + 16px); } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  font-kerning: normal;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-weight: 700;
  font-stretch: 90%;
  letter-spacing: -0.012em;
  line-height: 1.12;
  text-wrap: balance;
}
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-2); font-weight: 650; line-height: 1.2; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  padding: var(--s3) var(--s4); background: var(--charcoal); color: var(--white); font-weight: 600;
}
.skip:focus { top: var(--s4); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--s { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 48px; padding: 10px 22px;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent), #000 18%); text-decoration: none; }
.btn--ghost { background: var(--white); color: var(--charcoal); border-color: var(--charcoal); }
.btn--ghost:hover { background: var(--neutral); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--neutral); color: var(--slate); border-color: var(--line); cursor: not-allowed; transform: none;
}
.textlink { font-weight: 600; }
.textlink--icon { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; }
.svc-row .textlink { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--white);
  border-top: 6px solid var(--accent);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: calc(var(--header-h) - 6px); gap: 0 var(--s4);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 48px; color: var(--charcoal); text-decoration: none;
}
.wordmark__mark { color: var(--charcoal); }
.wordmark__mark--img { width: 32px; height: 32px; object-fit: contain; }
.wordmark__air { stroke: var(--accent); }
.wordmark__text { font-weight: 700; font-stretch: 90%; font-size: 1.1875rem; letter-spacing: -0.01em; white-space: nowrap; }

.nav { order: 3; width: 100%; }
.nav__list { list-style: none; display: flex; flex-direction: column; }
.nav__list a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--s2);
  color: var(--charcoal); font-weight: 500; text-decoration: none; border-top: 1px solid var(--line);
}
.nav__list a:hover { color: var(--accent); }
.nav__list a[aria-current="page"] { font-weight: 700; }
.nav__list a[aria-current="true"] { font-weight: 600; }   /* the section a child page belongs to (kennisbank/* marks Kennisbank) */
.site-header__actions { display: flex; align-items: center; gap: var(--s2); }
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  font: inherit;
  background: var(--white); color: var(--charcoal);
  border: 2px solid var(--charcoal); border-radius: var(--radius); cursor: pointer;
}
.menu-btn:hover { background: var(--neutral); }
.menu-btn .icon--close { display: none; }
.menu-btn[aria-expanded="true"] .icon--open { display: none; }
.menu-btn[aria-expanded="true"] .icon--close { display: block; }
.btn--quote { display: none; min-height: 48px; padding-inline: 16px; white-space: nowrap; }
/* the header call action is the phone icon alone (its name is "Bel ons"); the words sit in the hero, the closing band and the contact page */
.btn--call { display: none; width: 48px; min-height: 48px; padding: 0; }
.btn__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.js .menu-btn { display: inline-flex; }
.js .nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 3px solid var(--charcoal);
  box-shadow: 0 18px 28px -14px rgb(42 46 51 / 0.45);
  padding: 0 var(--gutter) var(--s4);
}
.js .nav.is-open { display: block; }
.js .nav__list { width: min(100%, var(--max)); margin-inline: auto; }
.js .nav__list li:first-child a { border-top: 0; }
/* secondary rows of the phone menu: under a rule, quieter */
.nav__more { list-style: none; margin-top: var(--s2); border-top: 2px solid var(--charcoal); }
.nav__more a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--s2);
  color: var(--slate); font-weight: 500; text-decoration: none; border-top: 1px solid var(--line);
}
.nav__more li:first-child a { border-top: 0; }
.nav__more a:hover { color: var(--accent); }
.nav__more a[aria-current="page"] { color: var(--charcoal); font-weight: 700; }
.js .nav__more { width: min(100%, var(--max)); margin-inline: auto; }
/* the quote action at the foot of the phone menu */
.nav__cta { margin-top: var(--s4); }
.nav__cta .btn { width: 100%; min-height: 52px; }
.nav__cta .btn:hover { color: var(--white); }
/* backdrop behind the open phone menu (site.js shows it); the header stays above it */
.menu-backdrop { position: fixed; z-index: 29; inset: 0; background: rgb(42 46 51 / 0.5); }

/* One quote action on a phone: the bottom bar carries it (with JS); the header button comes back from 900 px.
   Without JS the short button stays in the header from 360 px, because there is no bottom bar. */
@media (min-width: 360px) { .btn--quote { display: inline-flex; } }
@media (max-width: 899px) { .js .btn--quote { display: none; } }
@media (min-width: 900px) { .btn--call { display: inline-flex; } }
@media (max-width: 419px) {
  .wordmark { gap: var(--s2); }
  .wordmark__mark { width: 26px; height: 26px; }
  .wordmark__text { font-size: 1rem; }
  .site-header__bar { gap: 0 var(--s2); }
  .site-header__actions { gap: 6px; }
  .btn--quote { padding-inline: 14px; }
}
@media (max-width: 389px) {
  .wordmark__text { font-size: 0.9375rem; letter-spacing: -0.015em; }
  .btn--quote { padding-inline: 12px; }
  .menu-btn { width: 44px; }
  .site-header__actions { gap: 4px; }
}
@media (max-width: 359px) {
  .wordmark { gap: 6px; }
  .wordmark__mark { width: 24px; height: 24px; }
  .wordmark__text { font-size: 0.9375rem; letter-spacing: -0.015em; }
}
@media (min-width: 1100px) {
  .nav { order: 0; width: auto; }
  .nav__list, .js .nav__list { flex-direction: row; gap: 0; width: auto; }
  .nav__list a, .js .nav__list li:first-child a {
    border-top: 0; padding: 0 10px; min-height: 48px; position: relative;
  }
  .nav__list a::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
  }
  .nav__list a:hover::after, .nav__list a[aria-current]::after { transform: scaleX(1); }
  .js .nav, .js .nav.is-open { display: block; position: static; padding: 0; border: 0; background: none; box-shadow: none; }
  .menu-btn, .js .menu-btn { display: none; }
  .site-header__bar { flex-wrap: nowrap; }
  .nav__list a, .btn--call { white-space: nowrap; }
  .nav__more, .nav__cta, .menu-backdrop { display: none !important; }
}
@media (min-width: 1280px) {
  .btn__more { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav__list a::after { transition: transform 0.18s ease-out; }
}

/* ---------- the thermostat scale: ticks and one marker that slides with the season ---------- */
.scale {
  position: relative; height: 10px; margin-bottom: var(--s2);
  background: var(--scale); color: color-mix(in srgb, var(--accent) 58%, #fff);
}
.scale::after { content: ""; position: absolute; top: -1px; left: 12%; width: 3px; height: 14px; background: var(--accent); }
html[data-season="winter"] .scale::after { left: 88%; }
/* the price block of an inner page: the marker stands where the lower amount sits on the euro range of the home's price table (--mark, set by the page), in both seasons */
.pricefig .scale::after, html[data-season="winter"] .pricefig .scale::after { left: calc(var(--mark, 12%) - 1.5px); }
@media (prefers-reduced-motion: no-preference) {
  .scale::after { transition: left 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), background-color 0.2s ease; }
}

/* ---------- hero: the season switch ---------- */
/* Phones and tablets: the photo comes first as a strip and the switch hangs over its lower edge, so toggling visibly
   changes the picture. The crop of the summer photo keeps the unit and the bed in view. From 900 px: copy left, tall photo right. */
.hero { padding-block: 0 var(--s7); }
.hero__grid { display: grid; gap: 0; }
.hero__copy { min-width: 0; }

.switch {
  position: relative; z-index: 2; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(100%, 440px); margin-top: -28px; padding: 4px;
  border: 2px solid var(--charcoal); border-radius: 10px; background: var(--white);
}
.switch__thumb {
  position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: var(--radius); background: var(--accent);
}
html[data-season="winter"] .switch__thumb { transform: translateX(100%); }
.switch__btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 56px; padding: 6px var(--s3);
  background: none; border: 0; border-radius: var(--radius);
  font: inherit; font-weight: 600; line-height: 1.2; color: var(--charcoal); text-align: left; cursor: pointer;
}
.switch__btn .icon { width: 24px; height: 24px; }
.switch__btn[aria-pressed="true"] { color: var(--white); }
.js[data-season="zomer"] .switch__btn[data-season-btn="winter"],
.js[data-season="winter"] .switch__btn[data-season-btn="zomer"] { color: var(--charcoal); }
.js[data-season="zomer"] .switch__btn[data-season-btn="zomer"],
.js[data-season="winter"] .switch__btn[data-season-btn="winter"] { color: var(--white); }
.switch__btn:not([aria-pressed="true"]):hover { background: var(--neutral); }
/* focus: a 3 px charcoal ring stands 2 px outside the track (a 2 px white gap between it and the track border, also over the photo), so it can not be mistaken for the border;
   inside the track the focused button also gets its own ring, so it is clear which of the two has focus */
.switch:has(.switch__btn:focus-visible) {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--charcoal);   /* white gap, then the ring: readable over the photo too */
  outline: 3px solid transparent; outline-offset: 2px;             /* forced-colours mode shows this one */
}
.switch__btn:focus-visible { outline: 3px solid var(--charcoal); outline-offset: -3px; }
.switch__btn[aria-pressed="true"]:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.switch__label span { white-space: nowrap; }
.switch__label span:first-child { font-weight: 700; }
@media (max-width: 479px) {
  .switch__label span { display: block; }
  .switch__btn { justify-content: flex-start; padding-inline: var(--s4); }
}
/* colour changes with the thumb (no tween: blue to red would pass through a muddy mid-tone) */
@media (prefers-reduced-motion: no-preference) {
  .switch__thumb { transition: transform 0.28s cubic-bezier(0.3, 0.7, 0.2, 1); }
  .switch__btn { transition: color 0.2s ease; }
}

.hero__title {
  margin-top: var(--s5);
  font-size: var(--t-4); line-height: 1.04; font-weight: 700; letter-spacing: -0.018em;
}
.hero__place { display: block; }
.hero__seasons { display: grid; margin-top: var(--s2); }
.hero__season { grid-area: 1 / 1; font-size: 0.78em; line-height: 1.1; font-weight: 340; font-stretch: 92%; letter-spacing: -0.012em; }

/* the two states are flat siblings in .states so that ONE scale (and one sliding marker) sits between lead and price rows */
.states { margin-top: var(--s4); }
[data-state="zomer"] { --accent: var(--summer); }
[data-state="winter"] { --accent: var(--winter); }
.state__title { display: none; }
.state__lead { font-size: 1.125rem; line-height: 1.5; max-width: var(--hero-measure); text-wrap: pretty; }
@media (min-width: 640px) { .state__lead { font-size: var(--t-1); } }
@media (max-width: 389px) { .hero__title { font-size: 1.9rem; } }
@media (max-width: 359px) { .hero__title { font-size: 1.75rem; } .hero__season { font-size: 0.74em; } }
@media (max-width: 639px) { .js .lead__more, .js .focus__row--more { display: none; } }

.focus { max-width: var(--hero-measure); }
.focus__row { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.focus__row:last-child { border-bottom: 1px solid var(--line); }
.focus dt { font-size: var(--t-s); color: var(--slate); }
.focus dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.fig {
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); font-weight: 650; font-stretch: 75%;
  line-height: 1.15; letter-spacing: -0.005em; color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.fig__note { font-size: var(--t-s); color: var(--slate); }
@media (min-width: 760px) {
  .focus__row { display: grid; grid-template-columns: 14rem 1fr; gap: 0 var(--s4); align-items: baseline; }
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s5); }
.hero__actions .btn { flex: 1 1 100%; }
.hero__note { margin-top: var(--s4); max-width: 34em; font-size: var(--t-s); color: var(--slate); line-height: 1.5; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }
@media (max-width: 899px) { .js .hero__actions { display: none; } }

.hero__media { order: -1; display: grid; grid-template-columns: minmax(0, 1fr); margin-inline: calc(-1 * var(--gutter)); }
.shot { grid-area: 1 / 1; aspect-ratio: 3 / 2; overflow: hidden; background: var(--neutral); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--zomer img { object-position: 50% 60%; }
.shot--winter img { object-position: 50% 20%; }

@media (min-width: 640px) {
  .hero { padding-block: var(--s5) var(--s7); }
  .hero__media { margin-inline: 0; }
  .shot { aspect-ratio: 16 / 9; border-radius: var(--radius); }
  .shot--zomer img { object-position: 50% 56%; }
  .shot--winter img { object-position: 50% 18%; }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--s6) var(--s9); }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
  .hero__copy { grid-column: 1 / 8; }
  .hero__media { order: 0; grid-column: 8 / 13; max-width: none; align-self: stretch; }
  .switch { margin-top: 0; }
  .hero__title { margin-top: var(--s6); }
  .states { margin-top: var(--s5); }
  .shot { aspect-ratio: auto; min-height: 520px; }
  .shot--zomer img { object-position: 46% 34%; }
  .shot--winter img { object-position: 38% 22%; }
}
/* laptop screens (1366 x 768): the first action stays inside the fold */
@media (min-width: 900px) and (max-height: 860px) {
  .hero { padding-block: var(--s5) var(--s8); }
  .hero__title { margin-top: var(--s5); font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.4rem); }
  .states { margin-top: var(--s4); }
  .state__lead { font-size: 1.125rem; }
  .focus__row { padding-block: var(--s2); }
  .hero__actions { margin-top: var(--s4); }
}

/* state swapping, JS on: lead texts share one grid cell and the price rows share another, so the height is the taller one.
   Text is sequenced: the outgoing state fades out first, then the incoming one fades in (no ghost text). */
.js .states { display: grid; grid-template-columns: minmax(0, 1fr); }
.js .states > .state__lead { grid-area: 1 / 1; }
.js .states > .scale { grid-area: 2 / 1; margin-top: var(--s5); max-width: var(--hero-measure); width: 100%; }
.js .states > .focus { grid-area: 3 / 1; }
.js .hero [data-state]:not(.shot) { opacity: 0; visibility: hidden; }
.js[data-season="zomer"] .hero [data-state="zomer"]:not(.shot),
.js[data-season="winter"] .hero [data-state="winter"]:not(.shot) { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-state]:not(.shot) { transition: opacity 0.12s ease, visibility 0s linear 0.12s; }
  .js[data-season="zomer"] .hero [data-state="zomer"]:not(.shot),
  .js[data-season="winter"] .hero [data-state="winter"]:not(.shot) { transition: opacity 0.18s ease 0.12s, visibility 0s linear 0s; }
}
/* Photos cross-fade instead: the incoming photo fades in on top of the outgoing one, which stays fully
   visible underneath until the fade has ended (then it is hidden), so the hero is never blank. */
.js .hero .shot { opacity: 0; visibility: hidden; z-index: 0; }
.js[data-season="zomer"] .hero .shot--zomer,
.js[data-season="winter"] .hero .shot--winter { opacity: 1; visibility: visible; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .shot { transition: opacity 0s linear 0.25s, visibility 0s linear 0.25s; }
  .js[data-season="zomer"] .hero .shot--zomer,
  .js[data-season="winter"] .hero .shot--winter { transition: opacity 0.25s ease, visibility 0s linear 0s; }
}

/* JS off: summer first, winter as the following block with its own heading, no switch, no marker */
html:not(.js) .switch, html:not(.js) [data-season-status], html:not(.js) .states > .scale { display: none; }
html:not(.js) .hero__title { margin-top: var(--s5); }
html:not(.js) .hero__season[data-state="winter"] { display: none; }
html:not(.js) .states { display: flex; flex-direction: column; }
html:not(.js) .states > .focus { margin-top: var(--s5); }
html:not(.js) .state__lead[data-state="zomer"] { order: 1; }
html:not(.js) .focus[data-state="zomer"] { order: 2; }
html:not(.js) .state__title { display: block; order: 3; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--t-2); }
html:not(.js) .state__lead[data-state="winter"] { order: 4; margin-top: var(--s3); }
html:not(.js) .focus[data-state="winter"] { order: 5; }
html:not(.js) .hero__media { gap: var(--s4); }
html:not(.js) .shot { grid-area: auto; min-height: 0; }
@media (max-width: 899px) { html:not(.js) .shot--winter { display: none; } }
@media (min-width: 900px) { html:not(.js) .shot { aspect-ratio: 4 / 3; } }

/* ---------- band: koelen versus verwarmen ---------- */
.band { padding-block: var(--s7); background: var(--neutral); border-block: 1px solid var(--line); }
.band__title { font-size: var(--t-3); }
.compare { display: grid; gap: var(--s6); margin-top: var(--s6); }
.compare__col { border-top: 4px solid var(--summer); padding-top: var(--s4); }
.compare__col--winter { border-top-color: var(--winter); }
.compare__head { font-size: var(--t-2); }
.compare__col--zomer .compare__head { color: var(--summer); }
.compare__col--winter .compare__head { color: var(--winter); }
.facts { margin-top: var(--s3); font-size: 1rem; line-height: 1.5; }
.fact { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.fact__label { margin: 0; font-weight: 650; }
.fact__text { max-width: 52ch; }
.fact summary { list-style: none; }
.fact summary::-webkit-details-marker { display: none; }
.band__src { margin-top: var(--s5); font-size: var(--t-s); color: var(--slate); }
/* phone: every fact after the first folds into a row you can open (the text stays in the page);
   from 640 px all rows are open and the label is plain text (site.js keeps them open) */
@media (max-width: 639px) {
  .fact summary {
    position: relative; display: block; min-height: 44px; padding: var(--s2) 2rem var(--s2) 0; cursor: pointer;
  }
  .fact summary::after {
    content: ""; position: absolute; right: var(--s2); top: 50%; width: 9px; height: 9px; margin-top: -7px;
    border-right: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); transform: rotate(45deg);
  }
  .fact[open] summary::after { margin-top: -2px; transform: rotate(225deg); }
  .fact summary:hover { color: var(--accent); }
  .fact summary:focus-visible { outline-offset: 2px; }
  .fact[open] .fact__text { padding-bottom: var(--s2); }
  .fact:not(details) .fact__text { margin-top: var(--s1); }
}
@media (min-width: 640px) {
  .fact { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s4); }
  .fact summary { pointer-events: none; cursor: default; }
}
@media (min-width: 900px) {
  .band { padding-block: var(--s8); }
  .compare { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
}

/* ---------- sections of the home ---------- */
.section { padding-block: var(--sec); }
.section--tint { background: var(--neutral); }
.section__head { display: grid; gap: var(--s4); }
.section__intro { font-size: var(--t-1); line-height: 1.5; max-width: 36em; text-wrap: pretty; }
@media (min-width: 900px) {
  .section__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .section__head h2 { grid-column: 1 / 6; }
  .section__head .section__intro { grid-column: 7 / 13; }
  /* stacked variant (prices): headline over intro, so the page does not repeat one head layout */
  .section__head--stack { display: block; }
  .section__head--stack .section__intro { margin-top: var(--s4); }
}

/* services: four different structures, no cards */
.svc__body > * + * { margin-top: var(--s4); }
.svc--install { display: grid; gap: var(--s5); margin-top: var(--s7); }
.svc__photo { overflow: hidden; border-radius: var(--radius); background: var(--neutral); }
.svc__photo img { width: 100%; height: auto; }
.svc--install .svc__photo img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 62% 50%; }
.pair > div { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.pair > div:last-child { border-bottom: 1px solid var(--line); }
.pair dt { font-weight: 650; }
.svc__body p { max-width: 36em; }
@media (min-width: 900px) {
  .svc--install { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: center; }
}

.svc-row { display: grid; gap: var(--s7); margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--line); }
.svc-row > article > * + * { margin-top: var(--s3); }
.svc-row p { max-width: 34em; }
.plain { list-style: none; }
.plain li { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.plain li:last-child { border-bottom: 1px solid var(--line); }
.svc__photo--small { margin-block: var(--s4); }
.svc__photo--small img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  /* stretch: every column rule runs the full height of the row */
  .svc-row { grid-template-columns: 1fr 1.2fr 1fr; align-items: stretch; gap: 0; }
  .svc-row > article { padding-inline: var(--s6); }
  .svc-row > article:first-child { padding-left: 0; }
  .svc-row > article + article { border-left: 1px solid var(--line); }
  .svc-row > article:last-child { padding-right: 0; }
}

/* ---------- prices (home section and the price_table macro) ---------- */
.prices-wrap { container-type: inline-size; container-name: prices; margin-top: var(--s3); }
.section .prices-wrap { margin-top: var(--s6); }
.prose > .prices-wrap { margin-top: var(--s5); }
.prices { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.prices caption { caption-side: top; padding: 0 0 var(--s3); text-align: left; font-size: var(--t-s); color: var(--slate); line-height: 1.4; }
.prices thead th {
  padding: 0 var(--s4) var(--s3); text-align: left; font-size: var(--t-s); font-weight: 600; color: var(--slate);
  border-bottom: 2px solid var(--charcoal);
}
.prices th, .prices td { padding: var(--s4); text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.prices tbody th { font-weight: 650; }
.prices .num { text-align: right; white-space: nowrap; }
.prices tbody .num { font-size: var(--t-1); font-weight: 650; font-stretch: 85%; }
.prices tbody tr:last-child th, .prices tbody tr:last-child td { border-bottom-color: var(--charcoal); }
.js[data-season="zomer"] .prices tr[data-focus="zomer"],
.js[data-season="winter"] .prices tr[data-focus="winter"] { background: var(--white); }
.js[data-season="zomer"] .prices tr[data-focus="zomer"] > *,
.js[data-season="winter"] .prices tr[data-focus="winter"] > * { box-shadow: inset 0 3px 0 var(--accent), inset 0 -3px 0 var(--accent); border-bottom-color: transparent; }
.js[data-season="zomer"] .prices tr[data-focus="zomer"] .num,
.js[data-season="winter"] .prices tr[data-focus="winter"] .num { color: var(--accent); }
.prices__foot { margin-top: var(--s4); font-size: var(--t-s); color: var(--slate); line-height: 1.5; max-width: 66ch; }
.prices__notes { display: grid; gap: var(--s4); margin-top: var(--s6); max-width: 70ch; }
.prices__notes p { font-size: 1rem; line-height: 1.55; }

/* The thermostat scale with real numbers: the scale sits in the head of the price column (labelled ends, ticks at round amounts), every row's band is a
   span with an end mark on each side on that same scale. The season's row takes the accent, the other bands stay grey (--edge, 4.7:1 on white).
   --grid (set on the table by price_table) draws a hairline at every major amount behind the bands, so a band can be read against the scale from its own row. */
.prices--bands .num { min-width: 15rem; }
@container prices (min-width: 56rem) { .prices--bands .num { width: 22rem; } .prices--bands tbody th { width: 28%; } }
.prices--bands thead th.num { padding-bottom: var(--s2); }
.pscale__label { display: block; margin-bottom: var(--s2); }
.pscale { position: relative; display: block; height: 36px; color: color-mix(in srgb, var(--accent) 80%, #fff); }   /* rule and ticks 3.5:1 on white and on the grey section (graphics need 3:1) */
.pscale__lo, .pscale__hi {
  position: absolute; top: 0; font-size: var(--t-s); font-weight: 600; line-height: 1.2; color: var(--slate);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.pscale__lo { left: 0; }
.pscale__hi { right: 0; }
.pscale__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-bottom: 1px solid currentColor; }
.pscale__tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: currentColor; }
.pscale__tick--major { height: 10px; }
.pscale__tick--end { height: 14px; width: 2px; background: var(--edge); }
.pscale__tick--end[style*="100%"] { margin-left: -2px; }
.pband { position: relative; display: block; height: 16px; margin-top: var(--s2); background: var(--grid, none); font-weight: 400; }
.pband::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.pband i { position: absolute; top: 5px; bottom: 5px; left: var(--a); width: max(var(--w), 3px); background: var(--edge); }
.pband i::before, .pband i::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 3px; background: inherit; }
.pband i::before { left: 0; }
.pband i::after { right: 0; }
.js[data-season="zomer"] .prices tr[data-focus="zomer"] .pband i,
.js[data-season="winter"] .prices tr[data-focus="winter"] .pband i { background: var(--accent); }

/* a narrow table (a phone, or a text column) turns every row into a block */
@container prices (max-width: 38rem) {
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices, .prices caption, .prices tbody, .prices tr, .prices th, .prices td { display: block; }
  .prices tbody tr { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
  .prices th, .prices td { padding: var(--s1) var(--s4); border: 0 !important; }
  .prices tbody th { padding-top: var(--s2); font-size: var(--t-1); line-height: 1.25; }
  .prices td::before { content: attr(data-label) ": "; color: var(--slate); font-size: var(--t-s); }
  .prices td.num { text-align: left; padding-bottom: var(--s2); }
  .prices td.num::before { display: block; }
  .js[data-season="zomer"] .prices tr[data-focus="zomer"] > *,
  .js[data-season="winter"] .prices tr[data-focus="winter"] > * { box-shadow: none; }
  .js[data-season="zomer"] .prices tr[data-focus="zomer"],
  .js[data-season="winter"] .prices tr[data-focus="winter"] { box-shadow: inset 0 3px 0 var(--accent), inset 0 -3px 0 var(--accent); }
  /* with bands the head stays: its price cell holds the scale, which becomes the first block under the caption (the other heads stay for screen readers only) */
  .prices--bands thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; }
  .prices--bands thead tr { padding: 0 0 var(--s2); border-bottom: 2px solid var(--charcoal); }
  .prices--bands thead th:not(.num) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .prices--bands thead th.num { padding: 0 var(--s4) !important; }
  .prices--bands .pscale__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices--bands .num { min-width: 0; }
  .prices--bands tbody tr:first-child { border-top: 0; }
}
@media (min-width: 900px) {
  .prices__notes { grid-template-columns: 1fr 1fr; max-width: none; column-gap: var(--s7); }
}

/* ---------- steps (a real sequence: numbering is allowed here) ---------- */
.steps-wrap { display: grid; gap: var(--s6); }
.steps { list-style: none; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 var(--s6) 4.25rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -0.04em;
  font-size: 3rem; line-height: 1; font-weight: 700; font-stretch: 75%; color: var(--accent);
  font-variant-numeric: lining-nums;
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.8rem; top: 3.4rem; bottom: 0.6rem; width: 2px; background: var(--line);
}
.steps__head .section__intro { margin-top: var(--s4); font-size: var(--t-0); }
.steps h3 { margin-bottom: var(--s2); }
.steps p { max-width: 38em; }
@media (min-width: 900px) {
  .steps-wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .steps__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
  .steps-wrap > .steps { grid-column: 6 / 13; }
  .steps li { padding-bottom: var(--s7); }
}

/* ---------- long text ---------- */
.info { display: grid; gap: var(--s7); }
.prose { font-size: var(--t-0); }
/* from 900 px the running text is 18 px on 1.65 (same column: about 75 characters to a line) */
@media (min-width: 900px) {
  .prose, .faq__body { font-size: 1.125rem; line-height: 1.65; }
}
.prose > * { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.prose > h2 { font-size: var(--t-h2); margin-top: var(--s8); }
.prose > h3 { font-size: var(--t-2); margin-top: var(--s6); }
.prose > :first-child { margin-top: 0; }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--s3); }
.prose > h2 + h3 { margin-top: var(--s4); }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; }
.prose li + li { margin-top: var(--s2); }
.prose ul:not([class]) li::marker, .prose ol:not([class]) li::marker { color: var(--accent); }
.prose a { color: var(--accent); }
/* a button inside the text (the inline quote panel) keeps its own colours: .prose a alone would paint the label in the button's own colour */
.prose a.btn { text-decoration: none; }
.prose a.btn--primary { color: var(--white); }
.prose a.btn--ghost { color: var(--charcoal); }
.prose strong { font-weight: 650; }
.prose > .figure--tall { max-width: 24rem; }
.prose > .scale { margin-top: var(--s6); }

/* tables in running text and the table of the home: plain ruled tables.
   With JavaScript, site.js wraps every such table in .tablebox: the caption moves out of the scroll box (the real <caption> stays in the table for
   screen readers), and a table that is wider than its column scrolls inside .tablebox__scroll with a fade on its right edge and a "veeg" cue.
   Without JavaScript a wide table scrolls as a block on phones (the caption then scrolls with it). */
.prose > table, .data { width: 100%; margin-top: var(--s5); border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; font-size: 1rem; }
.prose > table caption, .data caption { caption-side: top; padding-bottom: var(--s3); text-align: left; font-weight: 650; line-height: 1.35; }
.prose > table th, .prose > table td, .data th, .data td { padding: var(--s3) var(--s3) var(--s3) 0; text-align: left; border-bottom: 1px solid var(--line); }
.prose > table thead th, .data thead th { font-size: var(--t-s); font-weight: 600; color: var(--slate); border-bottom: 2px solid var(--charcoal); vertical-align: bottom; }
.prose > table tbody th, .data tbody th { font-weight: 400; }
.prose > table .num, .data .num { text-align: right; padding-right: 0; padding-left: var(--s3); }
.prose > table tbody .num, .data tbody .num { white-space: nowrap; }
.prose > table tbody tr:last-child > *, .data tbody tr:last-child > * { border-bottom-color: var(--charcoal); }

.tablebox { position: relative; margin-top: var(--s5); min-width: 0; }   /* its width comes from .prose > * (the measure), never wider than the column */
.tablebox__cap { padding-bottom: var(--s3); font-weight: 650; line-height: 1.35; }
.tablebox__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.tablebox__scroll:focus-visible { outline-offset: 2px; }
.tablebox .data { margin-top: 0; }
.tablebox__hint { display: none; margin-top: var(--s2); font-size: var(--t-s); color: var(--slate); line-height: 1.4; }
.tablebox__frame { position: relative; }
.tablebox.has-more .tablebox__frame::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / 0), var(--fade-bg, #fff));
}
.tablebox.has-more .tablebox__hint { display: block; }
.section--tint { --fade-bg: var(--neutral); }
@media (max-width: 479px) {
  .prose > table, .data { font-size: var(--t-s); }
  .prose > table th, .prose > table td, .data th, .data td { padding: 8px 6px 8px 0; }
  .prose > table .num, .data .num { padding-left: 6px; padding-right: 0; }
  .prose > table tbody .num, .data tbody .num { white-space: normal; }
  .prose > table thead th, .data thead th { line-height: 1.25; }
}
/* no JavaScript: a table that is still too wide scrolls as a block instead of widening the page */
@media (max-width: 479px) {
  html:not(.js) .prose > table, html:not(.js) .data { display: block; max-width: 100%; overflow-x: auto; }
}

.note {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3);
  padding: var(--s4) var(--s5); background: var(--neutral); border-radius: var(--radius);
}
.note > .icon { margin-top: 0.2em; color: var(--accent); }
.note__title { font-weight: 650; }
.note__body > * + * { margin-top: var(--s2); }
.note--let-op { background: var(--white); border: 2px solid var(--charcoal); }

.figure img { width: 100%; height: auto; border-radius: var(--radius); background: var(--neutral); }
.figure figcaption { margin-top: var(--s2); font-size: var(--t-s); line-height: 1.4; color: var(--slate); }
.figure--tall { max-width: 24rem; }
.layout__main > .figure { margin-bottom: var(--s6); }

/* ---------- faq ---------- */
.faq { margin-top: var(--s8); }
.prose .faq { max-width: var(--measure); }
.faq__title { font-size: var(--t-h2); margin-bottom: var(--s4); }
.faq__list { border-bottom: 1px solid var(--charcoal); }
.faq details { border-top: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--charcoal); }
.faq summary {
  position: relative; display: block; min-height: 56px; padding: var(--s4) 2.75rem var(--s4) var(--s3);
  font-weight: 650; font-size: var(--t-1); line-height: 1.3; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); transform: rotate(45deg);
}
.faq details[open] summary::after { margin-top: -2px; transform: rotate(225deg); }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline-offset: -3px; }
.faq__body { padding: 0 var(--s3) var(--s5); }
.faq__body p { max-width: 62ch; }
.faq__body p + p { margin-top: var(--s3); }

/* ---------- sources ---------- */
.sources-block { margin-top: var(--s8); }
.aside-title { font-size: var(--t-1); font-stretch: 90%; line-height: 1.25; }
.sources { list-style: none; margin-top: var(--s3); font-size: var(--t-s); line-height: 1.4; }
.sources li { border-top: 1px solid var(--line); }
.sources a { display: block; padding: var(--s3) 0; min-height: 44px; }
/* on phones and tablets the list folds into one row (the links stay in the page, site.js closes it below 900 px
   and keeps it open from 900 px, where the heading above carries the label) */
.sources-fold > summary {
  position: relative; display: block; min-height: 56px; padding: var(--s4) 2.75rem var(--s4) 0;
  border-top: 2px solid var(--charcoal); font-weight: 650; font-size: var(--t-1); line-height: 1.3; cursor: pointer; list-style: none;
}
.sources-fold > summary::-webkit-details-marker { display: none; }
.sources-fold > summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); transform: rotate(45deg);
}
.sources-fold[open] > summary::after { margin-top: -2px; transform: rotate(225deg); }
.sources-fold > summary:hover { color: var(--accent); }
.sources-fold > summary:focus-visible { outline-offset: 2px; }
.sources-fold > .sources { margin-top: 0; }
.sources a { color: var(--charcoal); text-decoration-color: color-mix(in srgb, var(--charcoal) 40%, transparent); }
.sources a:hover { color: var(--charcoal); text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.sources-block { container-type: inline-size; container-name: sources; }
@container sources (min-width: 36rem) {
  .sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
}
@container sources (min-width: 62rem) {
  .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .sources-fold:not([open]) > summary { border-bottom: 1px solid var(--line); }
  .sources-block > .aside-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) {
  .sources-fold > summary { display: none; }
  .sources-fold > .sources { margin-top: var(--s3); }
}
.aside-note { margin-top: var(--s4); font-size: var(--t-s); color: var(--slate); }
.info__aside .sources-block { margin-top: 0; }
@media (min-width: 1000px) {
  .info { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .info__text { grid-column: 1 / 9; }
  .info__aside { grid-column: 10 / 13; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- related pages: a lighter version of the hub cards (a short tick stub that runs out on hover), three across on a desktop ---------- */
.related { margin-top: var(--s8); }
.related__title { font-size: var(--t-h2); margin-bottom: var(--s5); }
.related__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--s6); }
.related__list li { position: relative; padding-top: var(--s4); }
.related__list li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 10px;
  background: var(--scale); color: color-mix(in srgb, var(--accent) 58%, #fff);
}
.related__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-1); font-weight: 650; color: var(--charcoal); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.related__link::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.related__link:hover { color: var(--accent); }
.related__link:focus-visible { outline-offset: 2px; }
.related__list li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; }
.related__list li:has(a:focus-visible) a:focus-visible { outline: 0; }
.related__list p { max-width: 34em; font-size: var(--t-s); line-height: 1.5; color: var(--slate); }
@media (min-width: 760px) { .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s6); } }
@media (prefers-reduced-motion: no-preference) {
  .related__list li::before { transition: width 0.3s cubic-bezier(0.3, 0.7, 0.2, 1); }
}
.related__list li:hover::before, .related__list li:has(a:focus-visible)::before { width: 100%; }

/* ---------- reviews (only rendered when the site has reviews) ---------- */
.reviews { margin-top: var(--s8); }
.section .reviews { margin-top: 0; }
.reviews__title { font-size: var(--t-h2); margin-bottom: var(--s4); }
.reviews__list { list-style: none; border-top: 2px solid var(--charcoal); }
.review { display: grid; gap: var(--s3); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.review__text { font-size: var(--t-1); line-height: 1.45; font-weight: 450; max-width: 40em; }
.review__meta { font-size: var(--t-s); line-height: 1.5; color: var(--slate); }
.review__who strong { color: var(--charcoal); }
.review__stars { display: inline-flex; gap: 2px; vertical-align: -3px; }
.star { width: 16px; height: 16px; fill: none; stroke: var(--charcoal); stroke-width: 1.5; stroke-linejoin: round; }
.star--on { fill: var(--charcoal); }
@media (min-width: 900px) {
  .review { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gap); align-items: start; }
}

/* ---------- quote call to action ---------- */
.cta-band { padding-block: var(--s7); background: var(--neutral); border-block: 1px solid var(--line); }
.cta { display: grid; gap: var(--s5); align-items: center; }
.cta__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; font-stretch: 90%; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
.cta__text p + p { margin-top: var(--s3); max-width: 38em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cta__actions .btn { flex: 1 1 100%; }
@media (min-width: 560px) { .cta__actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) {
  .cta-band { padding-block: var(--s8); }
  .cta { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s8); }
}
.cta--inline { padding: var(--s5); background: var(--neutral); border-radius: var(--radius); }
.cta--inline .cta__title { font-size: var(--t-1); }
@media (min-width: 900px) { .cta--inline { grid-template-columns: 1fr; } }

/* ---------- inner pages: head, crumbs, layout ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0; font-size: var(--t-s); line-height: 1.3; }
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "/"; padding-inline: var(--s2); color: var(--edge); }
.crumbs a { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 44px; min-height: 44px; color: var(--slate); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { font-weight: 600; }

.pagehead { padding-block: var(--s3) var(--s7); border-bottom: 1px solid var(--line); }
.pagehead__title { margin-top: var(--s4); font-size: var(--t-4); line-height: 1.06; letter-spacing: -0.018em; max-width: 17em; }
.pagehead__lead { margin-top: var(--s4); font-size: var(--t-1); line-height: 1.5; max-width: 36em; text-wrap: pretty; }
@media (min-width: 640px) { .pagehead__lead { font-size: 1.375rem; } }
.pagehead__grid { display: grid; gap: var(--s6); }
.pagehead__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--radius); background: var(--neutral); }
.pagehead__media figcaption { margin-top: var(--s2); font-size: var(--t-s); line-height: 1.4; color: var(--slate); }
/* the quote button under the price (desktop only: on a phone or tablet the bottom bar carries the action) */
.pagehead__actions { display: none; }
@media (min-width: 900px) {
  .pagehead { padding-block: var(--s4) var(--s8); }
  /* the photo column is as high as the copy beside it: the image grows to fill (cover), so no white void stands under the photo */
  .pagehead__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
  .pagehead__copy { grid-column: 1 / 8; }
  .pagehead--photo .pagehead__media { grid-column: 8 / 13; display: flex; flex-direction: column; min-width: 0; padding-top: var(--s4); }
  .pagehead__media img { flex: 1 1 0; height: auto; min-height: 360px; aspect-ratio: auto; }
  .pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s5); }
}
/* price under the lead (service pages with a price): the home's big condensed figure with the thermostat scale above it */
.pricefig { margin-top: var(--s5); max-width: 34rem; }
.pricefig .scale { margin-top: 0; }
.pricefig__label { font-size: var(--t-s); color: var(--slate); line-height: 1.4; }
.pricefig__range {
  margin-top: var(--s1);
  font-size: clamp(2.125rem, 1.55rem + 2.6vw, 3.75rem); font-weight: 650; font-stretch: 75%; line-height: 1.08; letter-spacing: -0.008em;
  color: var(--accent); font-variant-numeric: lining-nums tabular-nums;
}
/* words in front of the figure ("ongeveer") are small, so only the figure is large */
.pricefig__pre { font-size: max(0.36em, 1rem); font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--slate); }
.pricefig__note { margin-top: var(--s2); font-size: var(--t-s); color: var(--slate); line-height: 1.45; max-width: 32rem; }
@media (max-width: 359px) { .pricefig__range { font-size: 1.9rem; } }
/* phones and tablets: the photo of a page with a price is a slim strip, so the price stays in the first screen */
@media (max-width: 899px) { .pagehead--price .pagehead__media img { aspect-ratio: 16 / 7; } }
@media (min-width: 640px) and (max-width: 899px) { .pagehead--price .pagehead__media img { aspect-ratio: 16 / 9; } }
/* 900 to 1099 px: the photo column is narrow beside the copy, so the picture keeps a 4:3 frame instead of filling the height (it would be cut to a thin slice of the photo);
   the page sets a focus point (meta image.pos) when the subject sits off centre */
@media (min-width: 900px) and (max-width: 1099px) {
  .pagehead__copy { grid-column: 1 / 7; }
  .pagehead--photo .pagehead__media { grid-column: 7 / 13; }
  .pagehead--photo:not(.pagehead--hub) .pagehead__media img { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
}
.pagehead--local .pagehead__area { align-self: end; }
@media (min-width: 900px) { .pagehead--local .pagehead__area { grid-column: 9 / 13; } }

/* local page: the werkgebied list in the head, an optional wide strip under it */
.area__title { font-size: var(--t-1); font-weight: 650; font-stretch: 90%; line-height: 1.25; }
.area__list { list-style: none; margin-top: var(--s3); max-width: 22rem; border-top: 2px solid var(--charcoal); }
.area__list li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.area__list li[aria-current="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--accent); border-bottom-color: transparent; }
.local__strip { padding-top: var(--s6); }
.local__photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
.local__photo figcaption { margin-top: var(--s2); font-size: var(--t-s); line-height: 1.4; color: var(--slate); }
@media (max-width: 639px) { .local__photo img { aspect-ratio: 16 / 10; } }

.layout { display: flex; flex-direction: column; gap: var(--s7); padding-block: var(--s7); }
.layout__aside { order: -1; min-width: 0; }
/* below 1000 px the quote card is hidden (the closing band carries the action): an aside with nothing else in it goes away too */
@media (max-width: 999px) { .layout__aside:not(:has(.shortfacts .pair > div:not(.fact--dup), .guide__date, .toc--fold)) { display: none; } }
.layout__main { min-width: 0; }
/* the FAQ of a page keeps the text's measure, so the whole column ends on one edge */
.layout__main > .faq { max-width: var(--measure); }
.layout__main > .figure:not(.figure--tall) { max-width: var(--measure); }
.layout__main > .faq:first-child { margin-top: 0; }
.shortfacts__title { font-size: var(--t-1); font-stretch: 90%; line-height: 1.25; margin-bottom: var(--s3); }
.panel + .shortfacts, .toc + .shortfacts, .panel + .toc { margin-top: var(--s5); }
.shortfacts .pair { border-bottom: 1px solid var(--line); }
.shortfacts .pair > div:last-child { border-bottom: 0; }
/* on phones and tablets the box sits above the text: a row whose euro amounts all stand in the page's own price table is left out (they are not shown three times),
   and a box with nothing left goes away */
@media (max-width: 999px) {
  .fact--dup { display: none; }
  .shortfacts:not(:has(.pair > div:not(.fact--dup))) { display: none; }
}
.panel { display: none; padding: var(--s4) var(--s5) var(--s5); background: var(--neutral); border-radius: var(--radius); }
.panel__title { font-size: var(--t-1); font-weight: 700; font-stretch: 90%; line-height: 1.2; text-wrap: balance; }
.panel__actions { display: grid; gap: var(--s2); margin-top: var(--s3); }
.guide__date { margin-top: var(--s4); font-size: var(--t-s); color: var(--slate); }
.layout__aside > .guide__date { margin: 0 0 var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.pagehead--legal .guide__date { margin-top: var(--s5); }

/* the jump list "Op deze pagina": a closed fold under the lead on phones and tablets (44 px rows), a compact block in the side column on a desktop */
.toc__list { list-style: none; counter-reset: toc; }
.toc__list a { display: flex; align-items: center; color: var(--charcoal); text-decoration: none; }
.toc__list a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.toc--fold { border-bottom: 1px solid var(--line); }
.toc--fold > summary {
  position: relative; display: block; min-height: 56px; padding: var(--s4) 2.75rem var(--s4) 0;
  border-top: 2px solid var(--charcoal); font-weight: 650; font-size: var(--t-1); line-height: 1.3; cursor: pointer; list-style: none;
}
.toc--fold > summary::-webkit-details-marker { display: none; }
.toc--fold > summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); transform: rotate(45deg);
}
.toc--fold[open] > summary::after { margin-top: -2px; transform: rotate(225deg); }
.toc--fold > summary:hover { color: var(--accent); }
.toc--fold > summary:focus-visible { outline-offset: 2px; }
.toc--fold .toc__list { padding-bottom: var(--s2); }
.toc--fold .toc__list li { border-top: 1px solid var(--line); }
.toc--fold .toc__list a { min-height: 44px; padding: var(--s2) 0; line-height: 1.3; }
.toc--side { display: none; }
.legal__toc { margin-bottom: var(--s6); max-width: var(--measure); }
@media (min-width: 900px) { .legal__toc { margin-bottom: var(--s7); } }

@media (min-width: 1000px) {
  /* text and side column: the column is a fixed, modest width and about 120 px stands between it and the text */
  .layout--side, .layout--guide { display: grid; column-gap: 3rem; justify-content: space-between; align-items: start; }
  .layout--side { grid-template-columns: minmax(0, var(--measure)) clamp(15rem, 29vw, 26rem); }
  .layout--guide { grid-template-columns: clamp(15rem, 29vw, 26rem) minmax(0, var(--measure)); }
  .layout--side > .layout__main { grid-column: 1; }
  .layout--side > .layout__aside { grid-column: 2; order: 0; }
  .layout--guide > .layout__aside { grid-column: 1; order: 0; }
  .layout--guide > .layout__main { grid-column: 2; }
  .layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
  .panel { display: block; }
  .layout__aside .toc--fold { display: none; }
  .toc--side { display: block; }
  .toc__title { font-size: var(--t-1); font-stretch: 90%; font-weight: 700; line-height: 1.25; margin-bottom: var(--s2); }
  .toc--side .toc__list { border-top: 1px solid var(--line); }
  .toc--side .toc__list li { border-bottom: 1px solid var(--line); }
  .toc--side .toc__list a { min-height: 28px; padding: 3px 0; font-size: var(--t-s); line-height: 1.25; }
  /* "In het kort" shows its first four rows here (the article repeats the rest); nothing in the column scrolls or fades */
  .layout__aside .shortfacts .pair > div:nth-child(n+5) { display: none; }
  .layout__aside .shortfacts .pair { font-size: var(--t-s); line-height: 1.4; }
  .layout__aside .shortfacts .pair > div { padding: 9px 0; }
  .layout__aside .shortfacts .pair > div:nth-child(4) { border-bottom: 0; }
  .layout__aside .shortfacts .pair { border-bottom: 1px solid var(--line); }
}
/* a short screen (a laptop, a landscape tablet): the column does not stick, so nothing in it is ever cut off; site.js does the same when the column is taller than the screen */
@media (min-width: 1000px) and (max-height: 860px) { .layout__aside { position: static; } }
.layout__aside.is-tall { position: static; }

/* the price table of a page runs the full width: the text column closes before it and opens again after it */
.layout--pre { padding-bottom: 0; }
.pricewide { padding-block: var(--s6) var(--s5); }
.pricewide .prices-wrap { margin-top: 0; }
.layout--post { padding-top: 0; }
.layout--post > .layout__main > .prose > :first-child { margin-top: 0; }
@media (min-width: 900px) { .pricewide { padding-block: var(--s7) var(--s6); } }

/* after the article, full width: the sources (small text in columns) and the related pages */
.endblocks { padding-top: var(--s7); padding-bottom: var(--sec); }
.endblocks > * + * { margin-top: var(--s8); }
.endblocks > .sources-block, .endblocks > .related { margin-top: 0; }
.endblocks > .sources-block + .related { margin-top: var(--s8); }

/* hub: head with a wide crop, the list of child pages directly under it, then the service-page layout for the text */
.pagehead--hub { padding-bottom: var(--s6); border-bottom: 0; }
.pagehead--hub .pagehead__title { max-width: 15em; }
.pagehead--hub .pagehead__media img, .hubhero__fig img {
  width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: var(--pos, 50% 50%);
  border-radius: var(--radius); background: var(--neutral);
}
.hubhero__fig figcaption { margin-top: var(--s2); font-size: var(--t-s); line-height: 1.4; color: var(--slate); }
@media (min-width: 900px) {
  .pagehead--hub .pagehead__media, .hubhero__fig { display: flex; flex-direction: column; min-width: 0; }
  .pagehead--hub .pagehead__media { padding-top: var(--s4); }
  .hubhero__fig { flex: 1 1 auto; }
  .pagehead--hub .pagehead__media img, .hubhero__fig img { flex: 1 1 0; aspect-ratio: auto; height: auto; min-height: 300px; }
}
.hub { padding-bottom: var(--s7); }
.hub__list { list-style: none; display: grid; gap: var(--s6) var(--gap); grid-template-columns: minmax(0, 1fr); }
.hub__item { position: relative; display: block; min-width: 0; }
.hub__item .scale { margin-bottom: var(--s3); }
.hub__name { font-size: var(--t-2); line-height: 1.2; }
.hub__name a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--charcoal);
  text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em;
}
.hub__name a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.hub__name a:hover { color: var(--accent); }
.hub__name a:focus-visible { outline-offset: 2px; }
.hub__item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; }
.hub__item:has(a:focus-visible) a:focus-visible { outline: 0; }
.hub__text { margin-top: var(--s1); max-width: 34em; color: var(--slate); font-size: 1rem; line-height: 1.5; }
.hub__empty { padding: var(--s6) 0; font-size: var(--t-1); }
/* a thermostat tick for every child: the marker sits at the cool end and runs to the other end when the row is pointed at */
.scale--item { width: 56px; }
.scale--item::after { left: 0; }
html[data-season="winter"] .scale--item::after { left: 0; }
.hub__item:hover .scale--item, .hub__item:has(a:focus-visible) .scale--item { width: 100%; }
.hub__item:hover .scale--item::after, .hub__item:has(a:focus-visible) .scale--item::after { left: calc(100% - 3px); }
@media (prefers-reduced-motion: no-preference) {
  .scale--item { transition: width 0.32s cubic-bezier(0.3, 0.7, 0.2, 1); }
}
@media (min-width: 640px) { .hub__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .hub__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s7); }
  .hub__list[data-n="2"], .hub__list[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hub__layout { padding-top: var(--s7); border-top: 1px solid var(--line); }

/* faq page: head and quote card side by side, the "Onderwerpen" index as columns, then every group of questions with its name on the left (desktop) */
.faqpage { display: grid; gap: var(--s6); padding-block: var(--s2) var(--s7); }
.faqpage .pagehead__title { margin-top: 0; }
.faqpage__cta { display: none; }
.faqpage__list .faq:first-child { margin-top: 0; }
.faqpage__list .faq__list { max-width: none; }
.pagehead--faq { padding-bottom: 0; border-bottom: 0; }
.faqpage__topics .prose > details { max-width: none; }
.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: var(--s6); padding-bottom: var(--s4); }
.topic > p { margin-top: 20px; font-size: 13px; line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.topic > p strong { font-weight: 600; }
.topic .plain { margin-top: var(--s1); }
.topic .plain li:first-child { border-top: 0; }
@media (min-width: 1000px) {
  .faqpage { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); align-items: start; }
  .faqpage__head { grid-column: 1 / 8; grid-row: 1; }
  .faqpage__cta { display: block; grid-column: 9 / 13; grid-row: 1; align-self: end; }
  .faqpage__topics { grid-column: 1 / -1; grid-row: 2; }
  .faqpage__list { grid-column: 1 / -1; grid-row: 3; }
  .faqpage .faq--grouped { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); align-items: start; }
  .faqpage .faq--grouped > .faq__group, .faqpage .faq--grouped .faq__list + .faq__group { grid-column: 1 / 5; margin: 0; position: sticky; top: calc(var(--header-h) + 24px); }
  .faqpage .faq--grouped > .faq__list { grid-column: 5 / 13; }
}

/* legal */
.legal { padding-block: var(--s7) var(--sec); }
.legal .prose > h2 { font-size: var(--t-2); margin-top: var(--s7); }
.legal .prose > h3 { font-size: var(--t-1); }

/* 404 */
.lost { padding-block: var(--s7) var(--sec); }
.lost__grid { display: grid; gap: var(--s7); }
.lost__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.lost__actions .btn { flex: 1 1 100%; }
.lost__list a { display: block; padding-block: var(--s3); min-height: 44px; }
.lost__list li { padding: 0; }
@media (min-width: 560px) { .lost__actions .btn { flex: 0 0 auto; } }
/* thank-you page: the 'what happens next' text keeps its distance from the lead (and from the call buttons when they are set) */
.thanks__next { margin-top: var(--s7); }
.thanks__next > h2:first-child { margin-top: 0; }
@media (min-width: 900px) {
  .lost__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .lost__copy { grid-column: 1 / 8; }
  .lost__nav { grid-column: 9 / 13; }
  .lost { padding-block: var(--s8) var(--sec); }
}

/* ---------- quote form (home section and contact page) ---------- */
.quote-page { padding-block: 0 var(--sec); }
.quote-page .quote { margin-top: var(--s4); }
.quote-page .quote__head .pagehead__title { margin-top: 0; }
.quote__steps { margin-top: var(--s2); }
.quote { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.quote__head > * + * { margin-top: var(--s4); }
.quote__head .pagehead__title, .quote__head .crumbs + h1 { margin-top: var(--s3); }
.quote__more > * + * { margin-top: var(--s4); }
.quote__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.quote__actions .btn { flex: 1 1 11rem; }
.quote__note { font-size: var(--t-s); color: var(--slate); max-width: 34em; }
.quote__area { font-size: var(--t-s); color: var(--slate); max-width: 34em; }
@media (min-width: 900px) {
  .quote { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); row-gap: var(--s5); align-items: start; }
  .quote__head { grid-column: 1 / 6; grid-row: 1; }
  .quote__form { grid-column: 7 / 13; grid-row: 1 / span 2; }
  .quote__more { grid-column: 1 / 6; grid-row: 2; }
  .quote__actions .btn { flex: 0 1 auto; }
}

.form { padding: var(--s5) var(--gutter); background: var(--neutral); border-radius: var(--radius); }
.form > * + * { margin-top: var(--s5); }
.form__summary { padding: var(--s3) var(--s4); background: var(--white); border: 2px solid var(--error); border-radius: var(--radius); }
.form__summary p { display: flex; align-items: flex-start; gap: var(--s2); font-weight: 650; }
.form__summary p::before, .field__error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8003C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 7.2v5.6M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form__summary ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.form__summary a { color: var(--charcoal); }
.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.field > label, legend {
  display: block; padding: 0; margin-bottom: var(--s2); font-weight: 650; font-size: 1rem; line-height: 1.3;
}
.optional { font-weight: 400; color: var(--slate); }
.field input[type="text"], .field input[type="tel"], .field select, .field textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; color: var(--charcoal); background: var(--white);
  border: 1.5px solid var(--edge); border-radius: var(--radius);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2E33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--charcoal); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; border-color: var(--charcoal); }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: #E6E8E9; color: var(--slate); border-color: var(--line); cursor: not-allowed;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border: 2px solid var(--error); padding: 11.5px 13.5px; }
.field select[aria-invalid="true"] { padding-right: 43.5px; }
.field__hint { margin-top: var(--s2); font-size: var(--t-s); color: var(--slate); line-height: 1.4; }
.field__error { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--s2); font-size: var(--t-s); font-weight: 700; color: var(--error); line-height: 1.4; }   /* icon + bold text in the error colour (6.9:1 on the form grey) */
.field-row { display: grid; gap: var(--s5); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
/* the honeypot: out of sight, out of the tab order, never announced */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.choice__grid { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--s4);
  background: var(--white); border: 1.5px solid var(--edge); border-radius: var(--radius); line-height: 1.2;
}
.chip:hover span { border-color: var(--charcoal); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--white); font-weight: 650; }
.chip input:focus-visible + span { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.chip input:disabled + span { background: #E6E8E9; color: var(--slate); border-color: var(--line); cursor: not-allowed; }

.form__submit { display: grid; gap: var(--s3); }
.form__submit .btn { width: 100%; }
.form__privacy { font-size: var(--t-s); color: var(--slate); }
.form__done { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s4); background: color-mix(in srgb, var(--accent) 10%, #fff); border-radius: var(--radius); font-weight: 600; }
.form__done .icon { margin-top: 0.2em; color: var(--accent); }
.form__soon { padding: var(--s3) var(--s4); background: var(--white); border-radius: var(--radius); font-weight: 600; }
@media (min-width: 640px) {
  .form { padding: var(--s7) var(--s7); }
  .form__submit { grid-template-columns: auto 1fr; align-items: center; gap: var(--s5); }
  .form__submit .btn { width: auto; min-width: 14rem; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--charcoal); color: var(--white); padding-block: var(--s8) var(--s6); --focus: var(--white); }
.site-footer a { color: var(--white); }
.footer__grid { display: grid; gap: var(--s6); }
.footer__word { font-size: var(--t-2); font-weight: 700; font-stretch: 90%; margin-bottom: var(--s3); }
.footer__brand p + p { margin-top: var(--s2); color: var(--line); }
.footer__brand p a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__title { font-size: var(--t-0); font-stretch: 100%; font-weight: 700; margin-bottom: var(--s3); letter-spacing: 0; }
.footer__groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5) var(--gap); }
.footer__group h3 { padding-bottom: var(--s2); border-bottom: 2px solid color-mix(in srgb, var(--accent) 50%, #fff); font-size: 1rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; }
.footer__group ul { list-style: none; }
.footer__group li { border-bottom: 1px solid #50565D; }
.footer__group a { display: flex; align-items: center; min-height: 44px; padding: var(--s1) 0; font-size: 1rem; line-height: 1.3; }
.footer__small { display: grid; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid #50565D; font-size: var(--t-s); color: var(--line); }
.footer__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 360px) { .footer__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  /* baseline: the brand line and the four column headings sit on one line */
  .footer__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s8); align-items: baseline; }
  .footer__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__small { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s7); }
}

/* ---------- bottom bar (phones and tablets) ---------- */
.dock { display: none; }
@media (max-width: 899px) {
  .js .dock {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    display: flex; gap: var(--s2); padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    background: var(--white); border-top: 1px solid var(--line);
  }
  .js .dock.is-hidden { transform: translateY(100%); visibility: hidden; }
  .dock__main { flex: 1 1 auto; min-width: 0; }
  .dock__icon { flex: none; width: 48px; padding: 0; }
  .dock__main { padding-inline: 12px; }
  .js .site-footer { padding-bottom: calc(var(--s6) + var(--dock-h)); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .dock { transition: transform 0.2s ease, visibility 0s linear 0s; }
  .js .dock.is-hidden { transition: transform 0.2s ease, visibility 0s linear 0.2s; }
}

/* grid children may shrink below their content, so nothing pushes the page wider than the screen */
.hero__grid > *, .compare > *, .svc--install > *, .svc-row > *, .steps-wrap > *, .info > *, .quote > *, .footer__grid > *, .section__head > *, .field-row > *,
.pagehead__grid > *, .layout > *, .faqpage > *, .lost__grid > *, .hub__item > *, .review > *, .cta > * { min-width: 0; }

/* ---------- reduced motion: nothing fades or slides ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* commander follow-ups after site critic r1: the FAQ "Onderwerpen" toggle in prose (same look as the
   sources fold), whole-row links in plain lists, subscript that does not push the line apart */
.prose > details > summary {
  position: relative; display: block; min-height: 56px; padding: var(--s4) 2.75rem var(--s4) 0;
  border-top: 2px solid var(--charcoal); font-weight: 650; font-size: var(--t-1); line-height: 1.3; cursor: pointer; list-style: none;
}
.prose > details > summary::-webkit-details-marker { display: none; }
.prose > details > summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--charcoal); border-bottom: 2px solid var(--charcoal); transform: rotate(45deg);
}
.prose > details[open] > summary::after { margin-top: -2px; transform: rotate(225deg); }
.prose > details > summary:hover { color: var(--accent); }
.plain a { display: block; min-height: 44px; padding-block: var(--s2); }
.plain li:has(> a:only-child) { padding: 0; }
.prose .plain li + li { margin-top: 0; }   /* the ruled rows touch: the gap of a text list would leave the link floating above its rule */
sub { font-size: .7em; line-height: 0; vertical-align: -.25em; }
th { hyphens: manual; overflow-wrap: normal; }

/* ---------- design round 2: grouped FAQ, standalone links, the steps in a row under the quote form ---------- */
/* a grouped FAQ: one h2 per group, one ruled list under it */
.faq--grouped { margin-top: 0; }
.prose + .faq--grouped { margin-top: var(--s7); }
.faq__group { margin-top: var(--s7); margin-bottom: var(--s3); font-size: var(--t-2); font-weight: 650; line-height: 1.2; }
.faq--grouped > .faq__group:first-child { margin-top: 0; }
.faq--grouped .faq__list + .faq__group { margin-top: var(--s7); }
.faq--grouped .faq__list { max-width: none; }

/* a link that stands alone in its paragraph (site.js adds .linkrow): 44 px to hit */
.linkrow { display: inline-flex; align-items: center; min-height: 44px; }
/* the last link of a sentence: the line stays as tall as the text, the hit area grows above and below it */
.linkinline { padding-block: 12px; }

/* what happens after the request (the body of the contact page): under the form on a phone, three steps in a row under both columns from 900 px, down the left
   column beside the tall form from 1100 px (a real sequence: the numbers stay) */
@media (min-width: 900px) {
  .quote-page .quote { grid-template-rows: auto 1fr auto; }
  .quote-page .quote__form { grid-row: 1 / span 2; }
  .quote__steps { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s5); }
  .quote__steps .prose > .steps { max-width: none; margin-top: var(--s6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s7); }
  .quote__steps .steps li, .quote__steps .steps li + li { margin-top: 0; padding: var(--s4) 0 0; border-top: 2px solid var(--charcoal); }
  .quote__steps .steps li:last-child { padding-bottom: 0; }
  .quote__steps .steps li::before { position: static; display: block; margin-bottom: var(--s2); }
  .quote__steps .steps li:not(:last-child)::after { content: none; }
  .quote__steps .steps p { max-width: 30em; }
}
@media (min-width: 1100px) {
  .quote-page .quote { grid-template-rows: auto auto 1fr; }
  .quote-page .quote__form { grid-row: 1 / span 3; }
  .quote__steps { grid-column: 1 / 6; grid-row: 3; margin-top: var(--s5); }
  .quote__steps .prose > .steps { display: block; margin-top: var(--s5); }
  .quote__steps .steps li, .quote__steps .steps li + li { margin-top: 0; padding: 0 0 var(--s6) 4.25rem; border-top: 0; }
  .quote__steps .steps li:last-child { padding-bottom: 0; }
  .quote__steps .steps li::before { position: absolute; display: block; margin-bottom: 0; }
  .quote__steps .steps li:not(:last-child)::after { content: ""; }
}