/* ClimaService Brabant — premium homepage
   Merk: blauw #2a4b9b, rood #e52320, wit. Systeemlettertype (SF Pro op Apple-apparaten). */

:root {
  --blue: #2a4b9b;
  --blue-ink: #1d3672;
  --navy: #0d1a36;
  --red: #e52320;
  --white: #ffffff;
  --paper: #fbfbfd;
  --mist: #f3f5f9;
  --ink: #0b1220;
  --ink-2: #4a5468;
  --ink-3: #5f6878;        /* kleine tekst: WCAG AA (5,4:1 op --paper) */
  --red-text: #c81e1b;     /* rood voor tekst: WCAG AA (5,6:1); --red blijft voor accenten */
  --line: rgba(11, 18, 32, 0.09);

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0); /* gespiegeld voor de terugweg */

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }

.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none;
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 70%, white); outline-offset: 3px; border-radius: 6px; }

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

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .7); }
.section--mist { background: var(--mist); }
.section--dark { background: var(--navy); color: #fff; }

/* ───────── Typografie: letterafstand en regelhoogte per formaat ───────── */
.display {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(2.9rem, 8.2vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.display--md { font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: 1.03; letter-spacing: -0.04em; }

.title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.title .muted, .muted { color: var(--ink-3); }
.section--dark .title .muted { color: rgba(255,255,255,.55); }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 38em;
}
.section--dark .lede { color: rgba(255,255,255,.74); }

.eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;      /* klein formaat: positieve letterafstand */
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 1.1rem;
}
.eyebrow--light { color: rgba(255,255,255,.86); }

.section__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); max-width: 48rem; }
.section__head .eyebrow { margin-bottom: -.25rem; }

/* ───────── Knoppen: feedback direct bij indrukken ───────── */
.btn {
  --bg: var(--blue);
  --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.1rem; padding: .85rem 1.5rem;
  border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg);
  font: 600 1rem/1 inherit; letter-spacing: -0.01em; text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover { --bg: var(--blue-ink); }
.btn:active, .btn.is-pressed { transform: scale(0.965); transition-duration: 60ms; }
.btn--small { min-height: 2.35rem; padding: .55rem 1.05rem; font-size: .9rem; }
.btn--light { --bg: #fff; --fg: var(--ink); }
.btn--light:hover { --bg: #f1f3f8; }
.btn--ghost { --bg: transparent; --fg: var(--blue); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { --bg: rgba(42, 75, 155, .06); }
.btn--glass {
  --bg: rgba(255,255,255,.14); --fg: #fff;
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn--glass:hover { --bg: rgba(255,255,255,.22); }

.link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; color: var(--blue); text-decoration: none; letter-spacing: -0.01em;
}
.link span { display: inline-block; transition: transform 220ms var(--ease-out); }
.link:hover span { transform: translateX(4px); }
.link:active { opacity: .6; }
.link--light { color: #fff; }

.round {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0;
  display: grid; place-items: center;
  background: rgba(11,18,32,.06); color: var(--ink); cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 200ms, opacity 200ms;
  -webkit-tap-highlight-color: transparent;
}
.round svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.round:hover { background: rgba(11,18,32,.1); }
.round:active { transform: scale(.92); transition-duration: 50ms; }
.round[disabled] { opacity: .35; cursor: default; }

/* ───────── Navigatie: doorschijnend materiaal ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background-color 300ms ease, box-shadow 300ms ease, -webkit-backdrop-filter 300ms ease, backdrop-filter 300ms ease;
}
.nav__inner {
  width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto;
  height: 4.25rem; display: flex; align-items: center; gap: 2rem;
}
.nav__logo { flex: none; display: block; }
.nav__logo img { width: clamp(168px, 18vw, 220px); height: auto; }
.nav__links { display: flex; gap: 1.75rem; margin-inline: auto; }
.nav__links a, .nav__phone {
  font-size: .9rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none;
  color: var(--ink); opacity: .82; transition: opacity 160ms, color 300ms;
}
.nav__links a:hover, .nav__phone:hover { opacity: 1; }
.nav__actions { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.nav__links + .nav__actions { margin-left: 0; }
.nav__phone { display: inline-flex; align-items: center; gap: .45rem; }
.nav__phone svg { width: 1rem; height: 1rem; fill: currentColor; }
.nav.is-solid {
  background: rgba(251, 251, 253, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(11,18,32,.06);
}

.nav__toggle {
  display: none; width: 2.6rem; height: 2.6rem; margin-right: -.4rem; border: 0; background: transparent;
  position: relative; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.nav__toggle span {
  position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.6px; border-radius: 2px;
  background: currentColor; transition: transform 320ms var(--ease-out);
}
.nav__toggle span:first-child { transform: translate(-50%, -4px); }
.nav__toggle span:last-child { transform: translate(-50%, 3px); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translate(-50%, 0) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translate(-50%, 0) rotate(-45deg); }
.nav__toggle:active { opacity: .6; }

/* ───────── Mobiel menu (sheet vanuit de knop) ───────── */
.menu { position: fixed; inset: 0; z-index: 45; }
.menu[hidden] { display: none; }
.menu__scrim { position: absolute; inset: 0; background: rgba(11,18,32,.28); opacity: 0; }
.menu__sheet {
  position: absolute; right: .75rem; top: calc(env(safe-area-inset-top) + 4.6rem);
  width: min(22rem, calc(100% - 1.5rem));
  padding: 1.1rem; border-radius: var(--radius-l);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 30px 80px rgba(11,18,32,.24), inset 0 0 0 1px rgba(255,255,255,.6);
  transform-origin: calc(100% - 1.6rem) -1.2rem; /* verankerd aan de menuknop */
  opacity: 0;
}
.menu__sheet nav { display: grid; }
.menu__sheet nav a {
  padding: .8rem .6rem; border-radius: 12px; text-decoration: none;
  font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em;
}
.menu__sheet nav a:active { background: rgba(11,18,32,.06); }
.menu__cta { display: grid; gap: .6rem; margin-top: .9rem; }

/* ───────── Hero ───────── */
.hero { position: relative; background: var(--paper); }
.hero__content {
  padding-top: calc(env(safe-area-inset-top) + clamp(8rem, 18vh, 11rem));
  padding-bottom: clamp(3rem, 7vh, 5rem);
  text-align: center; display: grid; justify-items: center;
  will-change: transform, opacity;
}
.hero .display span { color: var(--blue); }
.hero__lede {
  margin-top: 1.6rem; max-width: 34rem;
  font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.5; letter-spacing: -0.014em;
  color: var(--ink-2);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }

/* De foto start als ingelijst beeld en groeit bij scrollen uit tot de volle breedte */
.hero__stage { --inset: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.hero__frame {
  height: min(78svh, 56vw); min-height: 22rem; overflow: hidden;
  clip-path: inset(0 var(--inset) round var(--radius-l));
  will-change: clip-path;
}
.hero__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transform-origin: 50% 50%; will-change: transform;
}
.hero__stage figcaption { margin-top: 1rem; font-size: .82rem; color: var(--ink-3); text-align: right; }

/* Hero met staande foto: tekst links, foto rechts (op telefoon onder elkaar) */
.hero--split .hero__split {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: calc(env(safe-area-inset-top) + clamp(6.5rem, 13vh, 8.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.hero--split .hero__content { padding: 0; text-align: left; justify-items: start; }
.hero--split .display { font-size: clamp(2.9rem, 6vw, 5.4rem); }
.hero--split .hero__cta, .hero--split .trust { justify-content: flex-start; }
.hero--split .hero__stage { --inset: 0px; }
.hero--split .hero__frame {
  height: auto; min-height: 0; width: 100%; aspect-ratio: 4 / 5; max-height: min(82svh, 46rem);
  clip-path: none; border-radius: var(--radius-l); will-change: auto;
}
.hero--split .hero__frame img { object-position: 60% 28%; }
.hero--split .hero__stage figcaption { text-align: left; }
@media (max-width: 900px) {
  .hero--split .hero__split { grid-template-columns: 1fr; padding-top: calc(env(safe-area-inset-top) + 7rem); }
  .hero--split .hero__frame { max-height: 76svh; }
}

/* ───────── Statement ───────── */
.statement__text {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(1.7rem, 3.7vw, 2.9rem); line-height: 1.16; letter-spacing: -0.03em; font-weight: 700;
  max-width: 22em;
}
.statement__text span { color: var(--ink-3); }
.statement { padding-bottom: calc(var(--section) * .55); }
.facts {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  border-top: 1px solid var(--line); padding-top: 2rem;
}
.facts dt {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  color: var(--blue);
}
.facts dd { margin-top: .5rem; color: var(--ink-2); font-size: .95rem; line-height: 1.45; max-width: 15em; }

/* ───────── Galerij / carrousel ───────── */
.gallery__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.gallery__head .title { max-width: 14em; }
.gallery__nav { display: flex; gap: .6rem; flex: none; }
.carousel {
  overflow: hidden; cursor: grab;
  touch-action: pan-y; /* verticaal scrollen blijft van de browser */
  outline: none;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.carousel:focus-visible { box-shadow: inset 0 0 0 3px rgba(42,75,155,.4); }
.carousel.is-dragging { cursor: grabbing; }
.carousel__track { display: flex; gap: clamp(.9rem, 2vw, 1.5rem); will-change: transform; }
.slide { flex: 0 0 min(84vw, 46rem); user-select: none; -webkit-user-select: none; }
.slide img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m);
  background: var(--mist); pointer-events: none;
}
.slide p { margin-top: 1rem; color: var(--ink-2); font-size: .95rem; }
.slide strong { display: block; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; font-size: 1.02rem; }
.gallery__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
.dots { display: flex; gap: .45rem; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(11,18,32,.18); transition: width 380ms var(--ease-out), background-color 300ms; }
.dots i.is-on { width: 22px; background: var(--ink); }

/* ───────── Merken ───────── */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.brand {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.6rem 1.5rem 1.5rem; border-radius: var(--radius-l);
  background: #fff; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(11,18,32,.04), 0 0 0 1px var(--line);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.brand:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -24px rgba(11,18,32,.25), 0 0 0 1px var(--line); }
.brand:active { transform: scale(.985); transition-duration: 90ms; }
/* De logobestanden hebben verschillende witranden; per merk op gelijk optisch gewicht gebracht */
.brand__logo-box { height: 2.8rem; display: flex; align-items: center; }
.brand__logo { width: auto; max-width: none; mix-blend-mode: multiply; margin-left: -.35rem; }
.brand__logo--toshiba { height: 3.9rem; margin-left: -.9rem; }
.brand__logo--daikin { height: 5rem; margin-left: -1.6rem; }
.brand__logo--panasonic { height: 3.6rem; margin-left: -.8rem; }
.brand__logo--lg { height: 3rem; margin-left: -.6rem; }
.brand__product {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain; mix-blend-mode: multiply;
  transition: transform 700ms var(--ease-out);
}
.brand:hover .brand__product { transform: scale(1.04); }
.brand p { color: var(--ink-2); font-size: .94rem; line-height: 1.5; flex: 1; }
.brand__more { font-weight: 600; color: var(--blue); font-size: .94rem; }
.brands__note { margin-top: 2rem; color: var(--ink-2); }
.brands__note a { color: var(--blue); font-weight: 600; text-decoration: none; }

/* ───────── Seizoenen ───────── */
.seasons__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.seasons__copy { display: grid; gap: 1.6rem; justify-items: start; }
.seasons__copy .eyebrow { margin-bottom: -.6rem; }
.segmented {
  --w: 8.2rem;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: var(--w);
  padding: 4px; border-radius: 999px; background: rgba(11,18,32,.07);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.segmented button {
  position: relative; z-index: 1; height: 2.6rem; border: 0; background: transparent;
  font: 600 .95rem/1 inherit; letter-spacing: -0.01em; color: var(--ink-2); cursor: pointer;
  border-radius: 999px; -webkit-tap-highlight-color: transparent;
  transition: color 250ms ease;
}
.segmented button[aria-checked="true"] { color: var(--ink); }
.segmented__thumb {
  position: absolute; z-index: 0; top: 4px; left: 4px; height: 2.6rem; width: var(--w);
  border-radius: 999px; background: #fff;
  box-shadow: 0 3px 10px rgba(11,18,32,.12), 0 0 0 .5px rgba(11,18,32,.06);
  will-change: transform; cursor: grab;
}
.segmented.is-dragging .segmented__thumb { cursor: grabbing; }
.seasons__panels { display: grid; min-height: 12rem; }
.season-panel { grid-area: 1 / 1; display: grid; gap: 1.2rem; align-content: start; }
.season-panel[hidden] { display: grid; visibility: hidden; opacity: 0; }
.season-panel { transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s; }
.season-panel:not(.is-active) { opacity: 0; transform: translateY(6px); pointer-events: none; }
.ticks { display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.seasons__media { position: relative; border-radius: var(--radius-l); overflow: hidden; }
.seasons__media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; transition: filter 900ms var(--ease-out), transform 1200ms var(--ease-out); }
.seasons[data-season="winter"] .seasons__media img { filter: sepia(.28) saturate(1.25) hue-rotate(-12deg) brightness(1.02); transform: scale(1.03); }
.seasons__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(42,75,155,.28), transparent 55%);
  transition: background 900ms var(--ease-out);
}
.seasons[data-season="winter"] .seasons__media::after { background: linear-gradient(200deg, rgba(229,35,32,.26), transparent 55%); }
.seasons__media figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .5rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; letter-spacing: .01em; color: #fff;
  background: rgba(13,26,54,.42);
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
}

/* ───────── Vakmanschap ───────── */
.section__head--light .eyebrow { color: #ff6b5e; }
.craft__grid {
  display: grid; gap: 1rem;
  grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto;
}
.tile { position: relative; overflow: hidden; border-radius: var(--radius-m); background: #16244a; }
.tile--tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 900ms var(--ease-out); }
.tile--tall img { aspect-ratio: auto; min-height: 100%; }
.tile:hover img { transform: scale(1.035); }
.tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 3rem 1.2rem 1.1rem;
  background: linear-gradient(0deg, rgba(8,14,30,.86), rgba(8,14,30,0));
  font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.78);
}
.tile figcaption strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: .15rem; }

/* ───────── Werkwijze ───────── */
.step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: s; }
.step { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.step::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 2.5rem; background: var(--red);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease-out) var(--d, 0ms);
}
.step.is-in::before { --p: 1; }
.step__n { font-size: .85rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.step h3 { margin: .85rem 0 .6rem; font-size: 1.28rem; letter-spacing: -0.022em; line-height: 1.2; }
.step p { color: var(--ink-2); font-size: .97rem; }
.steps__note { margin-top: 3rem; max-width: 46rem; color: var(--ink-3); font-size: .92rem; }

/* ───────── Service + werkgebied ───────── */
.duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card {
  display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.8rem, 4vw, 3rem); border-radius: var(--radius-l); background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.card .eyebrow { margin-bottom: 0; }
.card__title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); letter-spacing: -0.03em; line-height: 1.12; }
.card > p { color: var(--ink-2); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.price span { flex-basis: 100%; font-size: .85rem; color: var(--ink-3); }
.price strong { font-size: 2.4rem; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.price small { color: var(--ink-3); }
.places { display: flex; flex-wrap: wrap; gap: .5rem; }
.places li {
  padding: .5rem .9rem; border-radius: 999px; background: var(--mist); font-size: .92rem; font-weight: 500;
}
.places li:first-child { background: var(--blue); color: #fff; }

/* ───────── FAQ ───────── */
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 6rem); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.45rem 3rem 1.45rem 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: -0.015em;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%; width: .7rem; height: .7rem;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform 350ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:active { opacity: .6; }
.faq__body { overflow: hidden; }
.faq__body p { padding-bottom: 1.5rem; color: var(--ink-2); max-width: 40rem; }

/* ───────── Afsluitende oproep ───────── */
.closing { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; }
.closing__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,26,54,.72), rgba(13,26,54,.86)); }
.closing__inner { width: min(100% - 2 * var(--gutter), 52rem); margin-inline: auto; padding-block: clamp(6rem, 14vw, 11rem); display: grid; gap: 1.5rem; justify-items: center; }
.closing__inner > p { font-size: 1.2rem; color: rgba(255,255,255,.82); }
.closing__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .8rem; }

/* ───────── Footer ───────── */
.footer { background: var(--paper); padding: 4.5rem 0 calc(2rem + env(safe-area-inset-bottom)); font-size: .92rem; color: var(--ink-2); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer__brand img { width: 220px; height: auto; margin-bottom: 1rem; }
.footer__brand p { max-width: 18rem; }
.footer h4 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-bottom: .9rem; }
.footer p + p { margin-top: .6rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer ul { display: grid; gap: .45rem; }
.footer .small { font-size: .82rem; color: var(--ink-3); }
.footer__base { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

/* ───────── Mobiele dock ───────── */
.dock { display: none; }

/* ───────── Verschijnen bij scrollen ───────── */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ───────── Tablet ───────── */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__links + .nav__actions { margin-left: auto; }
  .nav__toggle { display: inline-block; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .step-list { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .craft__grid { grid-template-columns: 1fr 1fr; }
  .tile--tall { grid-column: span 2; grid-row: auto; }
  .tile--tall img { aspect-ratio: 16 / 9; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ───────── Mobiel ───────── */
@media (max-width: 720px) {
  body { font-size: 1rem; }
  .nav__phone span, .nav .btn--small { display: none; }
  .nav__phone { width: 2.6rem; height: 2.6rem; justify-content: center; border-radius: 50%; }
  .nav__phone svg { width: 1.15rem; height: 1.15rem; }
  .nav__actions { gap: .2rem; }
  .hero__content { padding-top: calc(env(safe-area-inset-top) + 7.5rem); text-align: left; justify-items: start; }
  .hero__cta { justify-content: flex-start; }
  .hero__frame { height: 62svh; min-height: 20rem; }
  .hero__stage figcaption { text-align: left; }
  .gallery__head { flex-direction: column; align-items: start; }
  .gallery__nav { display: none; }
  .brand-grid, .duo__grid, .seasons__grid, .faq__grid, .step-list { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .craft__grid { grid-template-columns: 1fr; }
  .tile--tall { grid-column: auto; }
  .seasons__media { order: -1; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .footer__base { flex-direction: column; }

  .dock {
    position: fixed; z-index: 40; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: auto 1fr; gap: .5rem; padding: .4rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 12px 40px rgba(11,18,32,.18), inset 0 0 0 1px rgba(255,255,255,.55);
    transform: translateY(160%); transition: transform 520ms var(--ease-out);
  }
  .dock.is-visible { transform: none; }
  .dock a {
    display: grid; place-items: center; min-height: 2.9rem; padding: 0 1.2rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform 120ms var(--ease-out);
  }
  .dock a:active { transform: scale(.96); transition-duration: 50ms; }
  .dock__call { background: rgba(11,18,32,.06); color: var(--ink); }
  .dock__main { background: var(--blue); color: #fff; }
}

/* ───────── Toegankelijkheid: beweging, transparantie, contrast ───────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity 300ms ease; }
  .hero__frame img, .hero__content { transform: none !important; opacity: 1 !important; }
  .brand, .brand__product, .tile img, .seasons__media img, .link span, .dock { transition-duration: 1ms; }
  .brand:hover, .brand:hover .brand__product, .tile:hover img { transform: none; }
  .season-panel { transition: opacity 250ms ease; transform: none !important; }
  .step::before { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-solid, .menu__sheet, .dock, .btn--glass, .seasons__media figcaption {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav.is-solid { background: var(--paper); }
  .menu__sheet, .dock { background: #fff; }
  .btn--glass { background: rgba(13,26,54,.9); }
  .seasons__media figcaption { background: var(--navy); }
}
@media (prefers-contrast: more) {
  :root { --ink-2: #2b3445; --ink-3: #4a5468; --line: rgba(11,18,32,.3); }
  .nav.is-solid { background: #fff; box-shadow: 0 1px 0 rgba(11,18,32,.4); }
  .brand, .card { box-shadow: 0 0 0 1.5px rgba(11,18,32,.45); }
}

/* ═════════════════════════ Subpagina's ═════════════════════════ */
.section--first { padding-top: clamp(2.5rem, 5vw, 4rem); }
.title--sm { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -0.03em; }
.section__head--row { margin-bottom: 2rem; max-width: none; }

/* Paginakop */
.page-hero { padding-top: calc(env(safe-area-inset-top) + clamp(6.5rem, 12vh, 8.5rem)); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.page-hero .wrap { display: grid; justify-items: start; }
.crumbs { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); font-size: .85rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.crumbs li + li::before { content: "/"; color: rgba(11,18,32,.22); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--blue); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero__logo { height: 3.4rem; width: auto; margin: -.5rem 0 1rem -.6rem; mix-blend-mode: multiply; }
.page-hero__title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: clamp(2.3rem, 5.8vw, 4.6rem); line-height: 1.02; letter-spacing: -0.042em; font-weight: 700;
  max-width: 17em; text-wrap: balance;
}
.page-hero__lede {
  margin-top: 1.4rem; max-width: 40rem; color: var(--ink-2);
  font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.5; letter-spacing: -0.012em; text-wrap: pretty;
}
.page-hero__media { margin-top: 2.5rem; }
.page-hero__media img { width: 100%; max-height: 70svh; object-fit: cover; }

/* Lopende tekst */
.prose { color: var(--ink-2); font-size: 1.06rem; line-height: 1.65; text-wrap: pretty; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { color: var(--ink); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.03em; margin-top: 1.6em; text-wrap: balance; }
.prose h3 { color: var(--ink); font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.02em; margin-top: 1.6em; }
.prose h4 { color: var(--ink); font-size: 1.05rem; margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose a.btn { color: var(--fg); text-decoration: none; background-image: none; }
.prose ul, .prose ol { display: grid; gap: .45rem; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .42rem; height: .42rem; border-radius: 50%; background: var(--blue); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 1.8rem; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; color: var(--blue); font-weight: 600; }
.prose img { border-radius: var(--radius-s); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose td, .prose th { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose--center { max-width: 46rem; }
.prose--long { max-width: 46rem; }
.prose--long h2 { scroll-margin-top: 6rem; padding-top: 1.2em; border-top: 1px solid var(--line); }
.prose--long h2:first-child { border-top: 0; padding-top: 0; }

.article__grid { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.toc { position: sticky; top: 6rem; font-size: .9rem; }
.toc ol { display: grid; gap: .1rem; border-left: 1px solid var(--line); }
.toc a { display: block; padding: .32rem 0 .32rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; transition: color 200ms, border-color 200ms; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }

/* Product / installatie */
.product__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.product__grid--noimg { grid-template-columns: minmax(0, 46rem); }
.pg { position: sticky; top: 5.5rem; }
.product__info { min-width: 0; }
.product__info h2:first-child { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.pg { min-width: 0; align-self: start; }
.carousel--single { padding-inline: 0; border-radius: var(--radius-l); background: var(--mist); }
.carousel--single .carousel__track { gap: 0; }
.slide--full { flex: 0 0 100%; }
.pg__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.carousel.is-dragging .pg__zoom { cursor: grabbing; }
.pg__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pg .pg__img.pg__img--fit { object-fit: contain; background: #fff; padding: 12%; }
.pg__expand {
  position: absolute; right: .9rem; bottom: .9rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(13,26,54,.38);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  opacity: 0; transform: scale(.9); transition: opacity 250ms var(--ease-out), transform 300ms var(--ease-out);
}
.pg__expand svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg__zoom:hover .pg__expand, .pg__zoom:focus-visible .pg__expand { opacity: 1; transform: none; }
.pg__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.pg__thumbs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.pg__thumbs::-webkit-scrollbar { display: none; }
.pg__thumb {
  flex: none; width: 4.4rem; height: 3.3rem; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--mist); opacity: .55; box-shadow: 0 0 0 0 var(--blue);
  transition: opacity 200ms, box-shadow 250ms var(--ease-out), transform 120ms var(--ease-out);
}
.pg__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pg__thumb:hover { opacity: .85; }
.pg__thumb:active { transform: scale(.95); }
.pg__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--blue); }
.pg__arrows { display: flex; gap: .5rem; flex: none; }

/* Lightbox: groeit vanuit de aangeklikte foto en keert langs hetzelfde pad terug */
.lightbox { position: fixed; inset: 0; z-index: 80; touch-action: none; }
.lightbox[hidden] { display: none; }
.lightbox__scrim { position: absolute; inset: 0; background: rgba(6,10,20,.92); opacity: 0; }
.lightbox__img { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; border-radius: 0; user-select: none; -webkit-user-drag: none; max-width: none; }
.lightbox__close {
  position: absolute; top: calc(env(safe-area-inset-top) + 1rem); right: 1rem; z-index: 2;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; line-height: 1;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0;
}
.lightbox__close:active { transform: scale(.92); }

/* Uitvoeringen & prijzen */
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.model {
  display: grid; gap: .35rem; align-content: start; padding: 1.6rem 1.5rem 1.4rem; border-radius: var(--radius-m);
  background: #fff; box-shadow: 0 0 0 1px var(--line);
}
.model__title { font-size: 1.12rem; letter-spacing: -0.02em; line-height: 1.25; }
.model__code { font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.model__specs { display: grid; gap: .55rem; margin: 1.1rem 0 1.2rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.model__specs li { display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: .4rem; font-size: .95rem; color: var(--ink-2); }
.model__specs strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.model__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.model__icon--cool svg { stroke: var(--blue); }
.model__icon--heat svg { stroke: var(--red); }
.model__price { display: flex; align-items: baseline; gap: .4rem; }
.model__from { font-size: .85rem; color: var(--ink-3); }
.model__price strong { font-size: 1.7rem; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Downloads */
.downloads__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; }
.files { display: grid; gap: .6rem; }
.file {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; border-radius: var(--radius-s); background: #fff; box-shadow: 0 0 0 1px var(--line);
  text-decoration: none; color: var(--ink); transition: box-shadow 250ms, transform 120ms var(--ease-out);
}
.file:hover { box-shadow: 0 0 0 1px rgba(42,75,155,.4), 0 10px 30px -18px rgba(11,18,32,.35); }
.file:active { transform: scale(.99); }
.file__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.file__name { font-weight: 500; overflow-wrap: anywhere; font-size: .97rem; }
.file__size { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.file__go { color: var(--blue); font-weight: 600; }

/* Video */
.videos__grid { display: grid; gap: 1rem; }
.videos__grid--two { grid-template-columns: 1fr 1fr; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Afwisselende tekst + beeld */
.splits .wrap { display: grid; gap: clamp(4rem, 9vw, 7rem); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.split--flip .split__media { order: 2; }
.split__media { border-radius: var(--radius-l); overflow: hidden; background: var(--mist); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__text h2:first-child { font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.08; }

/* Oproepband */
.cta-band { padding-block: clamp(2rem, 5vw, 4rem); }
.cta-band__inner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.8rem; justify-items: start;
  padding: clamp(2.2rem, 6vw, 4.5rem); border-radius: var(--radius-l); background: var(--navy); color: #fff;
}
.cta-band__inner::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, rgba(42,75,155,.75), transparent);
}
.cta-band__inner::after {
  content: ""; position: absolute; inset: auto auto -50% -15%; width: 45%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(closest-side, rgba(229,35,32,.28), transparent);
}
.cta-band__title { font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.1; letter-spacing: -0.035em; max-width: 20em; text-wrap: balance; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Kaarten */
.tcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.tcard {
  display: flex; flex-direction: column; border-radius: var(--radius-l); overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.tcard:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -26px rgba(11,18,32,.3), 0 0 0 1px var(--line); }
.tcard:active { transform: scale(.985); transition-duration: 90ms; }
.tcard__media { overflow: hidden; background: var(--mist); }
.tcard__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 800ms var(--ease-out); }
.tcard:hover .tcard__media img { transform: scale(1.04); }
.tcard__body { display: grid; gap: .6rem; padding: 1.35rem 1.4rem 1.5rem; flex: 1; align-content: start; }
.tcard__title { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.tcard__text { color: var(--ink-2); font-size: .94rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tcard--full .tcard__text { display: block; overflow: visible; -webkit-line-clamp: unset; }
.tcard__more { margin-top: auto; padding-top: .4rem; color: var(--blue); font-weight: 600; font-size: .94rem; }
.tcard__more span { display: inline-block; transition: transform 220ms var(--ease-out); }
.tcard:hover .tcard__more span, .bcard:hover .tcard__more span { transform: translateX(4px); }
.tcard--noimg .tcard__body { padding-top: 1.6rem; }

/* Merkkaarten */
.bcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.bcard {
  display: grid; gap: 1rem; align-content: start; padding: 1.8rem 1.6rem; border-radius: var(--radius-l);
  background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink-2);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.bcard:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -26px rgba(11,18,32,.3), 0 0 0 1px var(--line); }
.bcard:active { transform: scale(.985); transition-duration: 90ms; }
.bcard__logo-box { height: 3.4rem; display: flex; align-items: center; }
.bcard__logo { height: 4.2rem; width: auto; max-width: none; margin-left: -.8rem; mix-blend-mode: multiply; }
.bcard__logo-box--daikin .bcard__logo { height: 5.6rem; margin-left: -1.8rem; }
.bcard__logo-box--lg .bcard__logo { height: 3.4rem; margin-left: -.6rem; }
.bcard p { line-height: 1.55; }

/* Contact */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact__main { display: grid; gap: 2.5rem; }
.contact__side { display: grid; gap: 1rem; position: sticky; top: 6rem; }
.form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.4rem); border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.field { display: grid; gap: .45rem; }
.field__label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.req { color: var(--red-text); margin-left: .15rem; }
.field__help { font-size: .85rem; color: var(--ink-3); margin-top: -.2rem; }
.field__help a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.field__help a:hover { color: var(--blue); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; font: inherit; color: var(--ink); padding: .85rem 1rem; border-radius: 12px; border: 0;
  background: var(--mist); box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 200ms, background-color 200ms;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px rgba(42,75,155,.12); }
.field.is-invalid input, .field.is-invalid textarea { box-shadow: inset 0 0 0 1.5px var(--red); background: #fff; }
.field.is-valid input, .field.is-valid textarea { box-shadow: inset 0 0 0 1px rgba(42,75,155,.35); }
.field__error { font-size: .85rem; color: #c11a17; min-height: 0; }
.field__error:empty { display: none; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; cursor: pointer; color: var(--ink-2); font-size: .95rem; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { width: 1.35rem; height: 1.35rem; border-radius: 7px; background: var(--mist); box-shadow: inset 0 0 0 1.5px rgba(11,18,32,.2); transition: background-color 180ms, box-shadow 180ms, transform 120ms var(--ease-out); display: grid; place-items: center; margin-top: .05rem; }
.check__box::after { content: ""; width: .75rem; height: .75rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform 260ms var(--ease-out); }
.check input:checked + .check__box { background: var(--blue); box-shadow: none; }
.check input:checked + .check__box::after { transform: scale(1); }
.check:active .check__box { transform: scale(.9); }
.check input:focus-visible + .check__box { outline: 3px solid rgba(42,75,155,.4); outline-offset: 2px; }
.form .btn { justify-self: start; }
.form__status { padding: 1rem 1.1rem; border-radius: 12px; background: rgba(42,75,155,.08); color: var(--blue-ink); font-size: .95rem; }
.info-card { display: grid; gap: .9rem; padding: 1.6rem; border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.info-card__title { font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); }
.info-card__row { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; color: var(--ink-2); }
.info-card__row svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: .15rem; }
.info-card__row svg path[d^="M6.6"] { fill: var(--blue); stroke: none; }
.info-card__row a { color: var(--ink); font-weight: 600; text-decoration: none; }
.info-card p { color: var(--ink-2); }
.info-card small { color: var(--ink-3); }
.info-card--area { background: var(--mist); box-shadow: none; }
.info-card--area .places li { background: #fff; }
.info-card--note { gap: 0; padding: .85rem 1.05rem; border-radius: var(--radius-m); font-size: .9rem; line-height: 1.5; }
.info-card--note .info-card__row { grid-template-columns: 1.1rem 1fr; gap: .6rem; }
.info-card--note .info-card__row svg { width: 1.05rem; height: 1.05rem; }
.info-card--note .info-card__title { font-size: .9rem; font-weight: 600; letter-spacing: -0.01em; }
.info-card--note p + p { margin-top: .3rem; }
.info-card--area .places li:first-child { background: var(--blue); }

.nav__links a[aria-current="page"], .nav__links a.is-section { opacity: 1; color: var(--blue); }

/* Subpagina's: tablet en mobiel */
@media (max-width: 1080px) {
  .tcard-grid, .bcard-grid { grid-template-columns: repeat(2, 1fr); }
  .product__grid { grid-template-columns: 1fr; }
  .pg { position: static; }
  .article__grid { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; }
  .toc a { padding: .4rem .8rem; margin: 0; border: 0; border-radius: 999px; background: var(--mist); font-size: .85rem; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__side { position: static; }
}
@media (max-width: 720px) {
  .page-hero { padding-top: calc(env(safe-area-inset-top) + 6rem); }
  .tcard-grid, .bcard-grid, .split, .downloads__grid, .videos__grid--two { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .pg__arrows { display: none; }
  .carousel--single { border-radius: var(--radius-m); }
  .file { grid-template-columns: auto 1fr; }
  .file__size { grid-column: 2; margin-top: -.6rem; }
  .file__go { display: none; }
  .cta-band__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tcard, .bcard, .tcard__media img, .pg__expand, .file { transition-duration: 1ms; }
  .tcard:hover, .bcard:hover, .tcard:hover .tcard__media img { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pg__expand, .lightbox__close { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--navy); }
}

/* Productkaarten: het hele toestel in beeld, op wit — net als de Standard Plus */
.tcard--product .tcard__media { background: #fff; padding: 1.4rem 1.6rem .4rem; }
.tcard--product .tcard__media img { aspect-ratio: 16 / 10; object-fit: contain; mix-blend-mode: multiply; }
.tcard--product:hover .tcard__media img { transform: scale(1.03); }

/* Video: eigen afspeelknop, YouTube laadt pas na een klik */
.video { isolation: isolate; background: var(--navy); }
.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.85); transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out); }
.video::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(13,26,54,.1), rgba(13,26,54,.65)); pointer-events: none; }
.video__play {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: .9rem;
  border: 0; background: none; color: #fff; cursor: pointer; font: 600 1rem/1 inherit; letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.video__btn {
  width: 4.6rem; height: 4.6rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  transition: transform 160ms var(--ease-out), background-color 250ms;
}
.video__btn svg { width: 1.6rem; height: 1.6rem; fill: #fff; margin-left: .2rem; }
.video__play:hover .video__btn { background: rgba(255,255,255,.28); transform: scale(1.04); }
.video__play:active .video__btn { transform: scale(.94); transition-duration: 60ms; }
.video:hover .video__poster { opacity: .65; transform: scale(1.02); }
.video__note {
  position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 1rem; padding: .9rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.94); color: var(--ink); font-size: .9rem; line-height: 1.45;
}
.video__note a { color: var(--blue); font-weight: 600; }
.video.is-playing .video__poster, .video.is-playing .video__play, .video.is-playing::after { display: none; }
@media (prefers-reduced-transparency: reduce) { .video__btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--blue); } }

/* Reviews */
.reviews[hidden] { display: none; }
.reviews__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.reviews__score { display: flex; align-items: center; gap: .9rem; }
.reviews__score strong { font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.reviews__score div { display: grid; gap: .3rem; }
.reviews__score span:not(.stars) { font-size: .9rem; color: var(--ink-2); }
.stars { display: inline-flex; gap: 2px; }
.stars i { width: 1rem; height: 1rem; background: rgba(11,18,32,.15);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.stars i.on { background: #f5a623; }
.reviews__rail .slide { flex: 0 0 min(84vw, 24rem); }
.review figure { height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem; border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.review__text { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.review.is-open .review__text { -webkit-line-clamp: unset; display: block; }
.review__more { align-self: start; margin-top: -.4rem; padding: 0; border: 0; background: none; color: var(--blue); font: 600 .92rem/1.2 inherit; cursor: pointer; }
.review figcaption { margin-top: auto; display: flex; align-items: center; gap: .75rem; font-size: .92rem; }
.review figcaption strong { display: block; color: var(--ink); }
.review figcaption small { color: var(--ink-3); }
.review__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 600; flex: none; }
.review--demo figure { box-shadow: 0 0 0 1.5px rgba(229,35,32,.35); background: repeating-linear-gradient(135deg, #fff 0 12px, #fbfbfd 12px 24px); }

[hidden].link, .link[hidden] { display: none; }

/* Officieel partner + reactiebelofte */
.partner-badge {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; padding: .4rem .8rem .4rem .6rem;
  border-radius: 999px; background: rgba(42,75,155,.08); color: var(--blue); font-size: .82rem; font-weight: 600; letter-spacing: .01em;
}
.partner-badge::before { content: ""; width: .95rem; height: .95rem; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; }
.form__promise { font-size: .9rem; color: var(--ink-2); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin-top: 1.8rem; font-size: .88rem; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: .4rem; }
.trust li::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--red); }
@media (max-width: 720px) { .trust { justify-content: flex-start; } }

/* WhatsApp in de mobiele balk en op de contactpagina */
@media (max-width: 720px) {
  .dock { grid-template-columns: auto auto 1fr; gap: .4rem; }
  .dock a { padding: 0 1rem; }
  .dock__wa { display: inline-flex !important; align-items: center; gap: .4rem; background: rgba(37,211,102,.14); color: #0b7a3b; }
  .dock__wa svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
}
.info-card__row--wa svg { fill: #1faa55; stroke: none; }

@media (max-width: 720px) { .dock a { white-space: nowrap; } .dock__main { font-size: .9rem; padding: 0 .9rem !important; } .dock__call { padding: 0 .9rem !important; } }

.review__text { white-space: pre-line; }

/* ═════════ Prijzen per model ═════════ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.models__note { margin-top: .6rem; color: var(--ink-2); font-size: .95rem; }
.models__note a { color: var(--blue); font-weight: 600; text-decoration: none; }
.model__cta { margin-top: .9rem; font-weight: 600; font-size: .92rem; color: var(--blue); text-decoration: none; }
.model__cta span { display: inline-block; transition: transform 220ms var(--ease-out); }
.model__cta:hover span { transform: translateX(4px); }

.pfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-bottom: 2rem; }
.pfilter__group { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 0; border-radius: 999px; padding: .55rem 1rem; font: 500 .92rem/1 inherit; cursor: pointer;
  background: rgba(11,18,32,.06); color: var(--ink); -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms, color 200ms, transform 120ms var(--ease-out);
}
.chip:hover { background: rgba(11,18,32,.1); }
.chip:active { transform: scale(.95); transition-duration: 50ms; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pfilter__sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-2); margin-left: auto; }
.pfilter__sort select { font: inherit; color: var(--ink); padding: .5rem 2rem .5rem .8rem; border-radius: 10px; border: 0; background: rgba(11,18,32,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%230b1220' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right .6rem center / .75rem no-repeat; -webkit-appearance: none; appearance: none; }
.pfilter__count { flex-basis: 100%; font-size: .88rem; color: var(--ink-3); margin-top: -.2rem; }

.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pm { display: flex; flex-direction: column; border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.pm[hidden] { display: none; }
.pm__media { display: block; background: #fff; padding: 1.2rem 1.4rem 0; }
.pm__img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; mix-blend-mode: multiply; transition: transform 700ms var(--ease-out); }
.pm:hover .pm__img { transform: scale(1.03); }
.pm__body { display: grid; gap: .55rem; padding: 1.1rem 1.4rem 1.4rem; flex: 1; align-content: start; }
.pm__meta { font-size: .8rem; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; font-weight: 600; }
.pm__name { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.25; }
.pm__name a { text-decoration: none; color: var(--ink); }
.pm__from { display: flex; align-items: baseline; gap: .4rem; }
.pm__from span { font-size: .85rem; color: var(--ink-3); }
.pm__from strong { font-size: 1.7rem; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.price-incl { margin-top: .15rem; font-size: .85rem; color: var(--ink-3); }
.pm__from--ask { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); }
.pm__variants { border-top: 1px solid var(--line); padding-top: .6rem; }
.pm__variants summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--blue); list-style: none; }
.pm__variants summary::-webkit-details-marker { display: none; }
.pm__variants summary::after { content: " ▾"; font-size: .8em; }
.pm__variants[open] summary::after { content: " ▴"; }
.pm__variants table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pm__variants th { text-align: left; font-weight: 600; color: var(--ink-3); padding: .3rem .3rem .3rem 0; font-size: .78rem; }
.pm__variants td { padding: .45rem .3rem .45rem 0; border-top: 1px solid var(--line); color: var(--ink); }
.pm__code { color: var(--ink-2) !important; font-size: .8rem; overflow-wrap: anywhere; }
.pm__price { font-weight: 600; white-space: nowrap; }
.pm__offer { color: var(--blue); font-weight: 600; text-decoration: none; }
.pm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: auto; padding-top: .6rem; }

.included__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.included__grid .eyebrow { margin-bottom: 1rem; }
.included__grid .title { margin-bottom: 1rem; }
.ticks--cols { margin-top: 1.4rem; grid-template-columns: 1fr 1fr; gap: .6rem 1.6rem; }
.included__terms { margin-top: 1.6rem; color: var(--ink-2); font-size: .95rem; max-width: 40rem; }
.included__media { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.included__media figure { border-radius: var(--radius-m); overflow: hidden; position: relative; }
.included__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.included__media figcaption { position: absolute; left: .7rem; bottom: .7rem; padding: .35rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(13,26,54,.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

.extras__table { border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.extras__table table { width: 100%; border-collapse: collapse; }
.extras__table th, .extras__table td { text-align: left; padding: 1rem 1.4rem; border-top: 1px solid var(--line); vertical-align: top; }
.extras__table thead th { border-top: 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--mist); }
.extras__table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.extras__table td { color: var(--ink-2); }
.extras__table .num { text-align: right; white-space: nowrap; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

.form__prefill { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(42,75,155,.08); color: var(--blue-ink); font-size: .92rem; }

@media (max-width: 1080px) { .pm-grid { grid-template-columns: repeat(2, 1fr); } .included__grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .pm-grid, .ticks--cols { grid-template-columns: 1fr; }
  .pfilter__sort { margin-left: 0; }
  .extras__table th, .extras__table td { padding: .8rem 1rem; }
  .extras__table thead { display: none; }
  .extras__table tr { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); padding: .3rem 0; }
  .extras__table tbody th, .extras__table td { border-top: 0; padding: .35rem 1rem; }
  .extras__table td:not(.num) { grid-column: 1 / -1; order: 3; padding-top: 0; }
}

/* DEKRA-keurmerk */
.trust li.trust__seal { gap: .55rem; font-weight: 600; color: var(--ink); }
.trust li.trust__seal::before { display: none; }
.trust__seal img { height: 2.4rem; width: auto; }
.facts .facts__seal { display: flex; align-items: center; gap: 1rem; }
.facts__seal img { height: 6rem; width: auto; flex: none; }
.footer__seal { display: block; height: 4rem !important; width: auto !important; margin: .2rem 0 1rem; }
@media (max-width: 720px) { .facts__seal img { height: 4.2rem; } }

/* ═════════ Prijsindicatie ═════════ */
.calc__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.calc__steps { display: grid; gap: 1rem; }
.cstep { margin: 0; border: 0; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 1.3rem; min-width: 0; }
.cstep legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: .7rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.cstep legend + * { clear: both; }
.cstep__n { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: .95rem; }
.cfield { display: grid; gap: .6rem; }
.cfield label, .cfield__label { font-weight: 600; font-size: .95rem; color: var(--ink); display: flex; justify-content: space-between; gap: 1rem; }
.cfield output { font-variant-numeric: tabular-nums; color: var(--blue); }
.cfield__hint { font-size: .9rem; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* schuifregelaar: groot, direct reagerend, duidelijk thumb */
.cfield input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; background: none; cursor: pointer; touch-action: pan-y; }
.cfield input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(11,18,32,.1); }
.cfield input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(11,18,32,.1); }
.cfield input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: -.55rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(11,18,32,.25), 0 0 0 .5px rgba(11,18,32,.1); transition: transform 120ms var(--ease-out); }
.cfield input[type="range"]::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(11,18,32,.25); }
.cfield input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.cfield input[type="range"]:focus-visible { outline: none; }
.cfield input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(42,75,155,.3), 0 2px 8px rgba(11,18,32,.25); }
.cneed { display: grid; gap: .2rem; padding: 1rem 1.2rem; border-radius: var(--radius-m); background: rgba(42,75,155,.07); }
.cneed span { font-size: .85rem; color: var(--ink-2); }
.cneed strong { font-size: 2rem; letter-spacing: -0.035em; color: var(--blue); font-variant-numeric: tabular-nums; }
.cneed small { font-size: .82rem; color: var(--ink-2); }
.cmodels { display: grid; gap: .5rem; max-height: 30rem; overflow-y: auto; padding: 2px; margin: -2px; overscroll-behavior: contain; }
.cmodel { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: .9rem; padding: .6rem .9rem .6rem .6rem; border: 0; border-radius: 14px; background: var(--mist); text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: box-shadow 200ms, background-color 200ms, transform 120ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.cmodel:hover { background: #eceff5; }
.cmodel:active { transform: scale(.985); transition-duration: 60ms; }
.cmodel[aria-checked="true"] { background: #fff; box-shadow: 0 0 0 2px var(--blue), 0 8px 24px -12px rgba(42,75,155,.45); }
.cmodel img { width: 4.5rem; height: 3.2rem; object-fit: cover; border-radius: 8px; background: #fff; }
.cmodel__txt { display: grid; gap: .15rem; min-width: 0; }
.cmodel__txt strong { font-size: .98rem; letter-spacing: -0.01em; }
.cmodel__txt small { font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.cmodel__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.copts { display: grid; gap: .8rem; }
.copts .check em { font-style: normal; font-weight: 600; color: var(--ink); white-space: nowrap; margin-left: .3rem; }
.cresult { position: sticky; top: 5.5rem; display: grid; gap: .9rem; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-l); background: var(--navy); color: #fff; }
.cresult .eyebrow { color: #ff8a80; margin: 0; }
.cresult__total { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.cresult__model { color: rgba(255,255,255,.8); font-size: .95rem; }
.cresult__lines { display: grid; gap: .45rem; padding: .9rem 0; border-block: 1px solid rgba(255,255,255,.14); font-size: .9rem; }
.cresult__lines:empty { display: none; }
.cresult__lines li { display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,255,255,.85); }
.cresult__lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; color: #fff; }
.cresult__cta { --bg: #fff; --fg: var(--ink); justify-self: start; }
.cresult__cta:hover { --bg: #eef1f7; }
.cresult__note { font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.5; }
.cresult__note a { color: #fff; }
@media (max-width: 1080px) { .calc__grid { grid-template-columns: 1fr; } .cresult { position: static; } }
@media (max-width: 720px) { .cmodel { grid-template-columns: 3.6rem 1fr; } .cmodel img { width: 3.6rem; height: 2.7rem; } .cmodel__price { grid-column: 2; } }

.hero__cta--left { justify-content: flex-start; margin-top: 1.6rem; }

/* ═════════ Kennis & media ═════════ */
.kcard { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.6rem, 4vw, 3rem); border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.kcard__main { display: grid; gap: 1.1rem; justify-items: start; }
.kcard__main .eyebrow { margin: 0; }
.kcard__src { color: var(--ink-3); font-size: .9rem; margin-top: -.6rem; }
.kcard__main .ticks { margin: .3rem 0 .6rem; }
.kcard__side { display: grid; gap: .6rem; align-content: start; padding: 1.4rem; border-radius: var(--radius-m); background: var(--mist); }
.kcard__sidetitle { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: .2rem; }
.kcard__link { display: grid; gap: .15rem; padding: .8rem .9rem; border-radius: 12px; background: #fff; text-decoration: none; color: var(--ink-2); font-size: .9rem; transition: box-shadow 200ms, transform 120ms var(--ease-out); }
.kcard__link strong { color: var(--ink); font-size: .95rem; }
.kcard__link:hover { box-shadow: 0 0 0 1px rgba(42,75,155,.35); }
.kcard__link:active { transform: scale(.985); }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.news { display: grid; gap: .8rem; align-content: start; padding: 1.6rem; border-radius: var(--radius-l); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.news__meta { display: flex; gap: .8rem; font-size: .82rem; color: var(--ink-3); }
.news__meta span { font-weight: 700; color: var(--red-text); letter-spacing: .02em; text-transform: uppercase; }
.news__title { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.news__title a { color: var(--ink); text-decoration: none; }
.news__title a:hover { color: var(--blue); }
.news__text { color: var(--ink-2); font-size: .97rem; line-height: 1.55; }
.news__kern { border-top: 1px solid var(--line); padding-top: .7rem; }
.news__kern summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--blue); list-style: none; }
.news__kern summary::-webkit-details-marker { display: none; }
.news__kern summary::after { content: " ▾"; font-size: .8em; }
.news__kern[open] summary::after { content: " ▴"; }
.news__kern .ticks { margin-top: .7rem; font-size: .93rem; }
.news__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: .2rem; font-size: .9rem; }
.news__more { color: var(--ink-2); text-decoration: none; }
.news__more:hover { color: var(--ink); }
.news__ours { color: var(--blue); font-weight: 600; text-decoration: none; }
.kvideo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kvideo { margin: 0; display: grid; gap: .7rem; }
.kvideo .video { aspect-ratio: 16 / 9; }
.kvideo figcaption { display: grid; gap: .2rem; font-size: .9rem; color: var(--ink-2); }
.kvideo figcaption strong { color: var(--ink); font-size: 1rem; letter-spacing: -0.01em; }
.kvideo .video__btn { width: 3.6rem; height: 3.6rem; }
@media (max-width: 1080px) { .kcard { grid-template-columns: 1fr; } .kvideo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .news-grid, .kvideo-grid { grid-template-columns: 1fr; } }
/* Besparingscalculator */
.money { display: flex; align-items: center; gap: .5rem; max-width: 10rem; padding: .55rem .9rem; border-radius: var(--radius-m); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.money span { color: var(--ink-2); }
.money input { width: 100%; border: 0; background: none; font: inherit; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.money input:focus { outline: none; }
.money:focus-within { box-shadow: 0 0 0 2px var(--blue); }
.cresult__lines em { font-style: normal; color: rgba(255,255,255,.65); }
.cresult__warn { padding: .8rem 1rem; border-radius: var(--radius-m); background: rgba(255,255,255,.08); font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.cresult__warn strong { color: #fff; }
.calc-link { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-m); background: rgba(42,75,155,.07); }
.calc-link span { flex: 1 1 16rem; font-size: .95rem; color: var(--ink-2); }
.calc-link a.btn, .prose .calc-link a.btn { color: #fff; text-decoration: none; background-image: none; }

/* ───────── Homepage-hero: tekst links, foto rechts (op telefoon foto boven) ───────── */
.hero-home__grid {
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); grid-template-areas: "text media";
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: calc(env(safe-area-inset-top) + clamp(6.5rem, 12vh, 8rem)); padding-bottom: clamp(3rem, 7vh, 5rem);
}
.hero-home__media { grid-area: media; margin: 0; }
.hero-home__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 78svh;
  object-fit: cover; object-position: 80% 0%; border-radius: var(--radius-l);
}
.hero-home__content { grid-area: text; }
.hero-home .eyebrow { margin-bottom: 1.2rem; }
.hero-home .display { font-size: clamp(2.5rem, 4.2vw, 3.7rem); line-height: 1.04; letter-spacing: -0.035em; }
.hero-home .display span { display: block; }
.hero-home .hero__lede { margin-top: 1.4rem; max-width: 30rem; font-size: 1.12rem; }
.hero-home__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
.hero-home__wa { --bg: #fff; --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(11,18,32,.16); }
.hero-home__wa:hover { --bg: #f1f3f8; }
.hero-home__wa svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.hero-home__trust { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin-top: 1.8rem; font-size: .86rem; white-space: nowrap; color: var(--ink-2); }
.hero-home__trust li, .hero-home__trust a { display: inline-flex; align-items: center; gap: .5rem; }
.hero-home__trust a { color: inherit; text-decoration: none; }
.hero-home__trust a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.hero-home__icon { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .hero-home__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; gap: 1.4rem; padding-top: calc(env(safe-area-inset-top) + 5rem); padding-bottom: 2.4rem; }
  .hero-home__media img { aspect-ratio: 4 / 3; max-height: none; object-position: 50% 0%; }
  .hero-home .display span { display: inline; }
}
@media (max-width: 720px) {
  .hero-home__media img { aspect-ratio: 358 / 330; object-position: 80% 0%; }
  .hero-home .eyebrow { margin-bottom: .7rem; font-size: .72rem; }
  .hero-home .display { font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.08; }
  .hero-home .hero__lede { display: none; }
  .hero-home__cta { flex-wrap: nowrap; margin-top: 1.2rem; }
  .hero-home__cta .btn:first-child { flex: 1 1 auto; }
  .hero-home__wa { flex: none; width: 3.1rem; padding: 0; }
  .hero-home__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-home__trust { flex-direction: column; gap: .55rem; margin-top: 1.2rem; font-size: .88rem; }
}

/* ───────── Logo: groter in de navigatie ───────── */
.nav__logo img { width: clamp(205px, calc(215px + (100vw - 1100px) * .31), 320px); }
@media (max-width: 1080px) {
  .nav__inner { gap: .6rem; }
  .nav__logo img { width: min(calc(100vw - 8.2rem), 300px); }
}

/* ───────── Onderbalk: past op alle telefoons ───────── */
@media (max-width: 720px) {
  .dock { grid-template-columns: minmax(0, 1fr) auto; }
  .dock__main { min-width: 13rem; }
  .dock__wa { justify-content: center; }
}
@media (max-width: 379px) { .dock__main { min-width: 0; } .dock__wa { padding: 0 .75rem !important; } }