/* ============================================================
   MEER DAN WARMTE — site.css
   NEO Agency · lichte basis met donkere ankersecties
   Tokens: assets/css/tokens.css (uit BRIEFING.md §5–6)
   Mobile-first. Gemeten op 375 / 390 / 430 / 1024 / 1440.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted, woff2) ---------- */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var-latin.woff2") format("woff2");
  font-weight: 600 700;
  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;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var-latin-ext.woff2") format("woff2");
  font-weight: 600 700;
  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: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  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;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  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: "Instrument Serif";
  src: url("../fonts/instrument-serif-400-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  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;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-400-italic-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  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;
}

/* ---------- 2. Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* GEEN scroll-behavior: smooth. Dat vecht met elke programmatische scroll
     (en met smooth-scroll-libraries) en laat het scrollen vastlopen.
     De ankerlinks in site.js doen het zelf, met respect voor reduced motion. */
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Vangnet: niets mag ooit breder worden dan zijn container, en een SVG
   zonder expliciete maat mag nooit zijn eigen hoogte bepalen. Elementen met
   een eigen width/height in de CSS hieronder winnen op specificiteit. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { max-height: 100%; }
img { height: auto; }

a { color: inherit; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 2px;
}

::selection { background: var(--brand-orange); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-2);
  top: -100px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--s-1) var(--s-2);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-1); }

/* ---------- 3. Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  /* ankerlinks stoppen onder de sticky header, niet eronder */
  scroll-margin-top: calc(76px + var(--s-2));
  padding-block: var(--section-gap);
  background: var(--surface);
  color: var(--text);
  position: relative;
}
.section--alt { background: var(--surface-alt); }

/* Twee ankersecties achter elkaar delen dezelfde achtergrond. Zonder correctie
   staat er 2x --section-gap tussen: dat leest als een gat in plaats van als
   een overgang. Hairline + halve ruimte houdt het ritme herkenbaar. */
.section--ink + .section--ink,
.section--ink + .footer {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.section--ink:has(+ .section--ink),
.section--ink:has(+ .footer) { padding-bottom: var(--s-5); }

/* Donkere ankersectie: variabelen om, componenten gelijk (BRIEFING §6) */
.section--ink {
  --surface: var(--ink);
  --surface-alt: var(--ink-2);
  --surface-card: var(--ink-2);
  --line: #22364F;
  --text: var(--on-ink);
  --text-muted: var(--on-ink-muted);
  --text-orange: var(--accent-on-ink-small);
  --cta-secondary-border: #FFFFFF;
  background: var(--surface);
  color: var(--text);
}

.section__head { max-width: 46rem; }
.section__head + * { margin-top: var(--s-5); }

/* ---------- 4. Typografie ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-orange);
  margin-bottom: var(--s-2);
}
.eyebrow--muted { color: var(--text-muted); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-orange);
  display: block;
}
.section--ink .accent { color: var(--accent-on-ink-small); }

.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 40rem;
}
.muted { color: var(--text-muted); }

.mono-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Cijfer dat meetelt in een gewone zin: wel stabiele breedte tijdens de
   count-up, geen monospace-cel die een gat achter het getal laat. */
.num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Knoppen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--radius-cta);
  background: var(--cta-bg);
  color: var(--cta-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--cta-bg-hover); }
.btn:active { background: var(--cta-bg-active); transform: translateY(1px); }

.btn--outline {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 2px var(--cta-secondary-border);
}
.btn--outline:hover {
  background: var(--cta-secondary-border);
  color: var(--surface);
}
.section--ink .btn--outline:hover { color: var(--ink); }

.btn--sm { min-height: var(--tap-min); font-size: 0.9375rem; padding: 0 var(--s-2); }
.btn--block { width: 100%; }

.btn__icon { width: 18px; height: 18px; flex: none; }

/* Tekstlink met stroomlijn-onderstreping */
.link-flow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap-min);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  position: relative;
}
.link-flow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 2px;
  background: var(--flow-gradient);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.link-flow:hover::after { transform: scaleX(1.06); }
.link-flow .btn__icon { transition: transform var(--t-base) var(--ease); }
.link-flow:hover .btn__icon { transform: translateX(4px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* ---------- 6. Review-badge ---------- */

.reviewbadge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--s-1);
  min-height: var(--tap-min);
  padding: 6px 16px 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.3;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.reviewbadge:hover { border-color: var(--brand-orange); }

.stars {
  display: inline-flex;
  gap: 1px;
  flex: none;
}
.stars svg { width: 15px; height: 15px; fill: var(--star); }
.section--ink .stars svg { fill: var(--star-on-ink); }

.reviewbadge__score { font-weight: 700; font-family: var(--font-mono); }
.reviewbadge__meta { color: var(--text-muted); }

/* ---------- 7. Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Dekkende achtergrond, geen backdrop-filter: een blur op een sticky balk
     dwingt de browser de hele pagina achter de header per frame opnieuw te
     samenstellen. Op een lange pagina met grote foto's loopt dat vast. */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 64px;
  padding-block: var(--s-1);
}

.header__logo { flex: none; display: block; line-height: 0; }
.header__logo img { width: 148px; height: auto; }

.header__spacer { flex: 1 1 auto; }

.header__nav { display: none; }
.header__badge { display: none; }
.header__cta { display: none; }

.navlist {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.navlist a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.navlist a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 2px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.navlist a:hover::after,
.navlist a[aria-current="page"]::after { transform: scaleX(1); }

/* Hamburger */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--s-1);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-cta);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
}
.menu-toggle__bars { display: block; width: 18px; height: 10px; position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { bottom: 0; }
[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(4px) rotate(45deg); }
[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-4px) rotate(-45deg); }

/* Mobiel volledig-scherm menu */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--s-2) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility is een discrete eigenschap: in een gewone transition klapt hij
     pas halverwege om, waardoor het menu de eerste 150 ms niet focusbaar is.
     Daarom: bij openen direct zichtbaar, bij sluiten pas ná de fade. */
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility 0s linear var(--t-base);
}
.mobilemenu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility 0s;
}
.mobilemenu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  margin-bottom: var(--s-3);
}
.mobilemenu__close {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  border-radius: var(--radius-cta);
  background: none;
  border: 1px solid #22364F;
  color: inherit;
  cursor: pointer;
  font-size: 1.25rem;
}
.mobilemenu .btn { margin-bottom: var(--s-4); }
.mobilemenu__links { display: grid; gap: 2px; }
.mobilemenu__links a {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid #22364F;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
}
.mobilemenu__foot {
  margin-top: auto;
  padding-top: var(--s-4);
  color: var(--on-ink-muted);
  font-size: 0.9375rem;
}
.mobilemenu__foot a { font-weight: 700; color: var(--on-ink); text-decoration: none; }

body[data-menu="open"] { overflow: hidden; }

/* ---------- 8. Hero ---------- */

.hero {
  position: relative;
  padding-block: var(--s-5) var(--s-6);
  overflow: hidden;
}

.hero__grid { display: grid; gap: var(--s-4); }

.hero__title { margin-bottom: var(--s-3); }
.hero__lede { margin-bottom: var(--s-4); }
.hero__badge { margin-bottom: var(--s-3); }
.hero__cta { margin-bottom: var(--s-3); }

.hero__note {
  font-size: 0.875rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--s-1);
}
.hero__note svg { width: 16px; height: 16px; flex: none; fill: var(--green-fill); margin-top: 4px; }

.hero__media { position: relative; }
.hero__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 62% 50%;
  border-radius: var(--radius-card);
}

/* Luchtstroom-laag over het hero-beeld, exact binnen de beeldrand geklemd */
.hero__flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__flow path { fill: none; stroke-linecap: round; }


@media (min-width: 900px) {
  .hero { padding-block: var(--s-6) var(--s-7); }
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: center;
  }
  .hero__media img { aspect-ratio: 5 / 4; }
}

/* ---------- 9. Vertrouwensregel ---------- */

.trust {
  /* klantwens 04-09: dezelfde ink-achtergrond als de andere donkere blokken.
     Kleuren komen via .section--ink uit de tokens; hier alleen de structuur. */
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--s-3);
}
.trust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px var(--s-4);
}
.trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.trust__item svg { width: 18px; height: 18px; flex: none; fill: var(--green-on-ink); }
.trust__logos {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 0 100%;
  padding-top: var(--s-1);
}
.trust__logos img {
  height: 30px;
  width: auto;
  /* op ink als wit silhouet: het blauwe Daikin-logo valt weg op donkerblauw */
  filter: brightness(0) invert(1);
  opacity: .92;
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.trust__logos img:hover { filter: none; opacity: 1; }

@media (min-width: 1100px) {
  .trust__logos { flex: 0 0 auto; margin-left: auto; padding-top: 0; }
  .trust__logos img { height: 34px; }
}

/* ---------- 10. Kaarten & bento ---------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
a.card:hover {
  border-color: color-mix(in srgb, var(--brand-orange) 45%, var(--line));
  box-shadow: 0 10px 30px rgba(11, 26, 43, .09);
  transform: translateY(-3px);
}
.card__title { margin-bottom: var(--s-1); }
.card__body { color: var(--text-muted); margin-bottom: var(--s-3); }
.card__foot { margin-top: auto; display: flex; align-items: center; gap: var(--s-1); font-weight: 700; }
.card__foot svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
a.card:hover .card__foot svg { transform: translateX(4px); }

.card__list {
  display: grid;
  gap: 10px;
  margin: 0 0 var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.card__list svg { width: 16px; height: 16px; flex: none; margin-top: 5px; fill: var(--green-fill); }

.card__tag {
  align-self: flex-start;
  display: inline-block;
  margin-bottom: var(--s-2);
  padding: 5px 12px;
  background: var(--green-tint);
  color: var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .04em;
}
/* Op donkere secties draaien alleen de twee kleuren om die niet uit een
   token komen. De rest erft gewoon van .section--ink. */
.section--ink .card__list svg { fill: var(--green-on-ink); }
.section--ink .card__tag { background: var(--green-on-ink); }

/* Kaartbeeld: overal dezelfde verhouding, zodat de kaarten in een rij
   dezelfde ritmiek houden. object-fit voorkomt vervorming bij elk formaat. */
.card__img {
  /* negatieve marges links en rechts trekken het beeld tot de kaartrand;
     de breedte moet die twee marges dus meetellen, anders bloedt het maar
     aan één kant af */
  width: calc(100% + var(--card-pad) * 2);
  max-width: none;   /* heft het globale max-width:100%-vangnet op, dat het
                        beeld anders terugklemt tot binnen de kaartpadding */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* uitgesneden productfoto's staan anders als los object op wit */
  background: var(--surface-alt);
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: transform var(--t-slow) var(--ease);
}
a.card { isolation: isolate; }
a.card:hover .card__img { transform: scale(1.03); }

.bento { display: grid; gap: var(--card-gap); }
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item--wide { grid-column: span 2; }
  .bento__item--wide .card { min-height: 260px; }
}
@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }
  .bento__item--wide  { grid-column: 1 / 3; grid-row: 1; }
  .bento__item--tall  { grid-column: 3;     grid-row: 1 / 3; }
  .bento__item--under { grid-column: 1 / 3; grid-row: 2; }
  .bento__item > .card { height: 100%; }

  .bento__item--wide .card,
  .bento__item--under .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    gap: var(--s-3);
    align-items: stretch;      /* beeld vult de volle kaarthoogte */
  }
  .bento__item--wide .card > div,
  .bento__item--under .card > div {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* de tekst blijft wel gecentreerd */
  }
  .bento__item--wide .card__img,
  .bento__item--under .card__img {
    aspect-ratio: auto;
    width: calc(100% + var(--card-pad));
    /* de negatieve marges verschuiven alleen; de hoogte moet de padding
       aan boven- en onderkant zelf meetellen om de kaart echt te vullen */
    height: calc(100% + var(--card-pad) * 2);
    align-self: stretch;
    margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
    border-bottom: 0;
    border-left: 1px solid var(--line);
    order: 2;
  }
  .bento__item--tall .card__img { aspect-ratio: 4 / 3; }
}

/* ---------- 11. Stappen ("Zo werkt het bij jou thuis") ---------- */

.steps__layout { display: grid; gap: var(--s-4); }

.steps__viz { display: none; }

.steps__viz p {
  margin-top: var(--s-3);
  max-width: 24ch;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.steps__list { display: grid; gap: var(--s-3); counter-reset: step; }

.step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--s-2);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }

.step__num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-orange);
  padding-top: 4px;
}
.step__title { margin-bottom: 6px; }
.step__body { color: var(--text-muted); }

@media (min-width: 900px) {
  .steps__layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .steps__viz {
    display: block;
    position: sticky;
    top: calc(76px + var(--s-4));
    /* één breedte-declaratie, bewust begrensd: dit is decoratie en mag de
       sectiehoogte nooit bepalen */
    width: clamp(170px, 17vw, 240px);
    max-width: 100%;
    margin-inline: auto;
  }
  .steps__viz .mark { aspect-ratio: 1; }
  .steps__viz svg { width: 100%; height: auto; max-height: 240px; }
  .step { padding: var(--s-4) 0; }
}

/* ---------- 12. Reviews ---------- */

.reviews__top {
  display: grid;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.reviews__score {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.reviews__score b {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
.reviews__score span { color: var(--text-muted); font-size: 0.9375rem; }

@media (min-width: 800px) {
  .reviews__top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
  }
}

.quotes { display: grid; gap: var(--card-gap); }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.quote blockquote {
  font-size: var(--fs-body-lg);
  line-height: 1.45;
}
.quote figcaption {
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--text-muted);
}
.quote figcaption b { color: var(--text); display: block; font-size: 0.9375rem; }

/* ---------- 13. Projecten ---------- */

.projects { display: grid; gap: var(--card-gap); }
@media (min-width: 700px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.project { padding: 0; }
.project__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.project__meta { padding: var(--s-3); display: flex; flex-direction: column; flex: 1; }
.project__place {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.project__title { font-size: 1.125rem; margin-bottom: var(--s-1); }
.project__result { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- 14. USP's ---------- */

.usps { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .usps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .usps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.usp {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 2px solid var(--ink);
}
.usp svg { width: 24px; height: 24px; fill: var(--brand-orange); }
.usp h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.usp p { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- 15. FAQ ---------- */

.faq__layout { display: grid; gap: var(--s-4); }
.faq__layout .section__head + * { margin-top: 0; }

@media (min-width: 1000px) {
  .faq__layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .faq__layout .section__head { position: sticky; top: calc(76px + var(--s-4)); }
}

.faq { max-width: 52rem; }

.link-inline {
  white-space: nowrap;
  font-weight: 700;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--brand-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link-inline:hover { color: var(--text-orange); }

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding: var(--s-3) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  color: inherit;
}
.faq__q:hover { color: var(--text-orange); }

.faq__icon {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.faq__icon::before { top: 10px; left: 2px; right: 2px; height: 2px; }
.faq__icon::after  { left: 10px; top: 2px; bottom: 2px; width: 2px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding-bottom: var(--s-3);
  color: var(--text-muted);
  max-width: 44rem;
}
.faq__a p + p { padding-top: var(--s-2); }

/* ---------- 16. Slot-CTA ---------- */

.finalcta__inner { display: grid; gap: var(--s-4); }
.finalcta h2 { max-width: 20ch; }
.finalcta__side {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-top: var(--s-1);
}
.finalcta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--tap-min);
}
.finalcta__phone svg { width: 22px; height: 22px; fill: currentColor; }

@media (min-width: 860px) {
  .finalcta__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
}

/* ---------- 17. Footer ---------- */

.footer {
  padding-block: var(--s-6) var(--s-4);
  border-top: 1px solid var(--line);
}
.footer__grid { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: var(--s-4); } }

.footer h3 {
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer ul { display: grid; gap: 10px; }
.footer address { font-style: normal; color: var(--text-muted); line-height: 1.7; }
.footer address b { color: var(--text); }

.footer__hours { display: grid; grid-template-columns: auto auto; gap: 6px var(--s-2); justify-content: start; color: var(--text-muted); font-size: 0.9375rem; }
.footer__hours dt { color: var(--text); }
.footer__hours dd { margin: 0; font-variant-numeric: tabular-nums; }

.footer__logo { --mark-size: 64px; margin-bottom: var(--s-3); }

.footer__bottom {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* ---------- 18. Sticky mobiele CTA-balk ---------- */

.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform var(--t-base) var(--ease);
}
.stickybar[data-visible="true"] { transform: none; }
.stickybar[hidden] { display: none; }

.stickybar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 56px;
  padding: 0 var(--s-2);
  background: var(--surface);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9375rem;
}
.stickybar a svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.stickybar .stickybar__primary { background: var(--cta-bg); color: var(--cta-text); }

@media (min-width: 900px) { .stickybar { display: none; } }

/* ---------- 19. Header/sticky desktop-varianten ---------- */

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .header__nav { display: block; }
  .header__cta { display: inline-flex; }
  .header__inner { min-height: 76px; gap: var(--s-2); }
  .header__logo img { width: 156px; }
}
@media (min-width: 1200px) {
  .header__inner { gap: var(--s-3); }
  .header__badge { display: inline-flex; }
  .header__logo img { width: 168px; }
  .navlist { gap: var(--s-4); }
  /* in de header alleen sterren + score: het aantal staat in de hero en de footer.
     Voluit duwt de badge de navigatie of de CTA weg (gemeten op 1200-1440). */
  .header__badge .reviewbadge__meta { display: none; }
}

/* ---------- 20. Luchtstroom-signature ---------- */

/* De doorlopende stroomlijn: onder elke sectiekop dezelfde 2px-gradient,
   die bij binnenkomst uitloopt. Zo loopt één lijn door de pagina zonder
   dat er een losse grafische laag over de tekst hangt. */
.section__head .eyebrow {
  position: relative;
  padding-bottom: 10px;
}
.section__head .eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 2px;
  background: var(--flow-gradient);
  transform-origin: left;
}

/* Het beeldmerk is decoratief en mag NOOIT de hoogte van zijn sectie bepalen.
   Daarom: een expliciete breedte op .mark, en de SVG schaalt daar binnen mee
   op zijn eigen verhouding. Geen `height: 100%` — dat resolvet in WebKit tegen
   een container zonder vaste hoogte en kan het beeldmerk laten exploderen. */
.mark {
  width: var(--mark-size, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  flex: none;
}
.mark svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

/* ---------- 20b. Flowdivider: de luchtstroom óver de sectiegrens ----------
   Eén element tussen twee secties, hoogte 0, met de SVG er absoluut overheen
   gecentreerd. Zo lopen de drie lijnen ononderbroken van het ene blok in het
   andere in plaats van afgesneden te worden op de rand. Bepaalt nooit hoogte,
   kan nooit horizontale scroll veroorzaken (breedte 100%). De lijnen blijven
   binnen ±70 px van de grens en raken dus alleen sectie-padding (≥ 80 px),
   nooit inhoud. */
.flowdivider {
  position: relative;
  height: 0;
  z-index: 2;              /* boven de achtergrond van beide buursecties */
  pointer-events: none;
}
.flowband {
  position: absolute;
  left: 0; right: 0;
  top: -70px;
  width: 100%;
  height: 140px;
  max-height: none;  /* heft het globale svg { max-height:100% }-vangnet op:
                        100 % van een 0-hoge .flowdivider zou 0 px zijn */
  opacity: .62;
}
.flowband path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.flowband__drift {
  animation: flow-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.flowband__drift:nth-child(2) { animation-duration: 27s; animation-delay: -9s; }
.flowband__drift:nth-child(3) { animation-duration: 31s; animation-delay: -17s; }
@keyframes flow-drift {
  from { transform: translateX(-2.5%); }
  to   { transform: translateX(2.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .flowband__drift { animation: none; }
}

/* ---------- 21. Scroll-reveal (JS voegt data-reveal toe) ---------- */

[data-reveal] { will-change: transform, opacity; }

/* ---------- 22. data-verify: onbevestigde gegevens ---------- */

body[data-verify="on"] [data-verify] {
  outline: 2px dashed var(--brand-orange);
  outline-offset: 3px;
  background: rgba(235, 83, 40, .08);
}
body[data-verify="on"] [data-verify]::after {
  content: " ⚠︎";
  color: var(--brand-orange);
}

/* ---------- 23. Reduced motion ---------- */

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