/* Energieattesten.be — landing page (compact): price first, three short screens */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.page-home {
  --forest: #0b3519;
  --forest-line: rgba(201, 240, 182, .13);
  --mint: #c9f0b6;
  --leaf: #54b435;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --x-wrap: 1320px;
  --edge: max(var(--gutter), calc((100vw - var(--x-wrap)) / 2));
}
.page-home .site-footer { margin-top: 0; }
.page-home .wrap { max-width: calc(var(--x-wrap) + var(--gutter) * 2); }
.x-wrap { width: 100%; max-width: calc(var(--x-wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }

/* Buttons */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 54px; padding: .85rem 1.45rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s, color .2s, transform .12s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.x-btn .ic { width: 1.15em; height: 1.15em; transition: transform .25s var(--ease-out); }
.x-btn:hover .ic:last-child { transform: translateX(3px); }
.x-btn:active { transform: scale(.97); transition-duration: .08s; }
.x-btn--ink { background: var(--ink); color: #fff; box-shadow: 0 12px 28px -14px rgba(14, 26, 18, .7); }
.x-btn--ink:hover { background: #1d2e23; color: #fff; }
.x-btn--ghost { border-color: var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, .75); }
.x-btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); background: #fff; }
.x-btn--green { background: var(--green); color: #fff; box-shadow: 0 10px 24px -12px rgba(29, 116, 50, .7); }
.x-btn--green:hover { background: var(--green-hover); color: #fff; }
.x-btn--leaf { background: var(--leaf); color: #06230f; }
.x-btn--leaf:hover { background: #63c544; color: #06230f; }
.x-btn--line { border-color: rgba(201, 240, 182, .4); color: #fff; }
.x-btn--line:hover { border-color: var(--mint); background: rgba(201, 240, 182, .08); color: #fff; }

/* Fold-outs that keep the long copy one tap away */
.more { margin-top: 1rem; border-top: 1px solid var(--line); }
.more summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 0 .2rem; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 620; color: var(--ink-2); }
.more summary::-webkit-details-marker { display: none; }
.more summary .ic { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease-out); }
.more[open] summary .ic { transform: rotate(180deg); }
.more summary:hover { color: var(--ink); }
.more__body { padding-top: .6rem; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.more__body p { margin: 0 0 .7rem; }
.more__body b { color: var(--ink); }
.more--dark { border-top-color: var(--forest-line); }
.more--dark summary { color: rgba(225, 240, 218, .85); }
.more--dark summary:hover { color: #fff; }
.more--dark .more__body { color: rgba(225, 240, 218, .8); }
.more--dark .more__body b { color: #fff; }
.allprices { margin: .2rem 0 1rem; padding: 0; list-style: none; }
.allprices li { display: flex; justify-content: space-between; gap: .3rem 1rem; flex-wrap: wrap; padding: .45rem 0; border-top: 1px dashed var(--line-strong); }
.allprices li span { color: var(--ink-2); }

/* ---------- Screen 1: headline + label + price certificate ---------- */
.lh {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  min-height: min(calc(100svh - var(--header-h)), 900px);
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) var(--edge);
  background:
    linear-gradient(rgba(29, 116, 50, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(29, 116, 50, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #fbfdf9, #fff);
}
.lh h1 { font-size: clamp(2.5rem, 1.3rem + 3.3vw, 4.4rem); line-height: .98; letter-spacing: -.04em; font-weight: 800; max-width: 12ch; hyphens: manual; }
.lh h1 span { color: var(--green); }
.lh__promise { margin: 1.25rem 0 0; max-width: 32ch; font-size: clamp(1.1rem, 1.02rem + .4vw, 1.35rem); line-height: 1.4; font-weight: 540; letter-spacing: -.012em; }
.lh__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Energy scale: horizontal, draggable */
.escale { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); max-width: 520px; user-select: none; -webkit-user-select: none; }
.escale__q { margin: 0 0 .4rem; font-weight: 650; font-size: .9688rem; }
.escale__q span { font-weight: 500; color: var(--ink-3); }
.escale__track { position: relative; padding-top: 50px; }
.escale__segs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.escale__segs li {
  display: grid; place-items: center; height: 40px; background: var(--c); color: #fff; cursor: pointer;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
  transition: opacity .25s, transform .3s var(--ease-out);
}
.escale__segs li:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); border-radius: 8px 0 0 8px; }
.escale__segs li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); border-radius: 0 8px 8px 0; }
.escale__segs li.dk { color: var(--ink); }
.escale.is-live .escale__segs li:not(.is-on) { opacity: .45; }
.escale__segs li.is-on { transform: scaleY(1.12); }
.escale__ptr {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .8rem;
  border-radius: 10px; background: var(--ink); color: #fff; white-space: nowrap; cursor: grab; touch-action: none; will-change: transform;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .55);
}
.escale__ptr::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.escale.is-dragging .escale__ptr { cursor: grabbing; }
.escale__ptr b { font-size: 1.125rem; font-weight: 800; }
.escale__ptr em { font-style: normal; font-family: var(--mono); font-size: .75rem; color: var(--mint); }
.escale__ptr:focus-visible { outline: 3px solid #5aa9e6; outline-offset: 3px; }
.escale__m { margin: .9rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.escale__m span { font-weight: 640; color: var(--ink); }
.escale__m a { color: var(--green); }
.js .escale__ptr { opacity: 0; transition: opacity .3s; }
.js .escale.is-ready .escale__ptr { opacity: 1; }

/* Price certificate */
.cert {
  position: relative; overflow: hidden; background: #fff; border-radius: 22px;
  padding: 1.4rem 1.5rem 1.1rem;
  box-shadow: 0 1px 2px rgba(14, 26, 18, .06), 0 40px 80px -36px rgba(14, 26, 18, .38), 0 0 0 1px rgba(14, 26, 18, .05);
}
.cert__band { position: absolute; left: 0; right: 0; top: 0; display: flex; height: 6px; }
.cert__band i { flex: 1; }
.cert__band i:nth-child(1) { background: var(--lbl-f); } .cert__band i:nth-child(2) { background: var(--lbl-e); } .cert__band i:nth-child(3) { background: var(--lbl-d); }
.cert__band i:nth-child(4) { background: var(--lbl-c); } .cert__band i:nth-child(5) { background: var(--lbl-b); } .cert__band i:nth-child(6) { background: var(--lbl-a); } .cert__band i:nth-child(7) { background: var(--lbl-ap); }
.cert__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .3rem 0 .9rem; margin-bottom: 1rem; border-bottom: 2px solid var(--ink); }
.cert__head h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); letter-spacing: -.03em; font-weight: 780; }
.cert__head .mono { color: var(--green); }

.types { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
.types button { display: grid; justify-items: center; gap: .2rem; padding: .55rem .15rem .45rem; border: 0; border-radius: 11px; background: #f2f5f0; color: var(--ink-3); cursor: pointer; font-size: .7188rem; font-weight: 600; transition: background-color .2s, box-shadow .25s var(--ease-out), color .2s, transform .12s; }
.types button:hover { background: #e9efe6; color: var(--ink-2); }
.types button:active { transform: scale(.95); }
.types button[aria-checked="true"] { background: #effae9; color: var(--green-deep); box-shadow: inset 0 0 0 2px var(--green); }
.types .house { width: 38px; height: 27px; }
.types button[aria-checked="true"] .house { color: var(--green); }

.lines { display: grid; margin-top: .6rem; }
.line { position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .65rem; padding: .62rem 0; margin: 0; cursor: pointer; }
.line + .line { border-top: 1px solid #edf1ea; }
.line input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.line__box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .15s, box-shadow .15s; }
.line__box .ic { width: 14px; height: 14px; color: #fff; stroke-width: 2.8; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .3s var(--ease-out); }
.line input:checked ~ .line__box { background: var(--green); box-shadow: none; }
.line input:checked ~ .line__box .ic { opacity: 1; transform: none; }
.line input:focus-visible ~ .line__box { outline: 3px solid #5aa9e6; outline-offset: 2px; }
.line:has(input:not(:checked)) .line__name, .line:has(input:not(:checked)) .line__price { color: var(--ink-3); }
.line:has(input:not(:checked)) .line__price { text-decoration: line-through; text-decoration-thickness: 1px; }
.line__name { font-weight: 620; font-size: 1rem; line-height: 1.25; }
.line__name small { display: block; font-weight: 500; font-size: .8125rem; color: var(--ink-3); }
.line__dots { height: 1px; border-bottom: 2px dotted var(--line-strong); }
.line__price { font-weight: 720; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.line--minus { cursor: default; grid-template-columns: 1fr auto; padding-left: calc(22px + .65rem); color: var(--green-deep); }
.line--minus .line__name { font-weight: 560; font-size: .9375rem; }
.line--minus .line__price { color: var(--green); }
.line[hidden] { display: none; }

.cert__foot { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; margin-top: .6rem; padding-top: .9rem; border-top: 2px solid var(--ink); }
.stamp {
  display: grid; place-items: center; align-content: center; gap: 0;
  width: 112px; height: 112px; border-radius: 50%; color: var(--green-deep); transform: rotate(-8deg);
  border: 3px solid var(--green-deep); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px var(--green-deep);
  background: rgba(29, 116, 50, .04);
}
.stamp .mono { font-size: .625rem; font-weight: 700; letter-spacing: .12em; }
.stamp output { font-size: 1.7rem; font-weight: 800; letter-spacing: -.05em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cert__cta .x-btn { width: 100%; }
.cert__cta p { margin: .55rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }

/* ---------- Partners ---------- */
.partners-x { background: #fff; border-block: 1px solid var(--line); }
.partners-x__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 3rem; flex-wrap: wrap; padding-block: 1.6rem; }
.partners-x h2 { font-size: .9375rem; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.partners-x ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.75rem; margin: 0; padding: 0; list-style: none; }
.partners-x img { height: 40px; width: auto; }
.partner-text { display: inline-block; font-weight: 750; font-size: 1.3rem; letter-spacing: -.02em; color: #3b5a7a; line-height: 1; }

/* ---------- Screen 2: services + how it works ---------- */
.desk { position: relative; padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); color: #fff; overflow: hidden;
  background: radial-gradient(50rem 30rem at 85% 0%, rgba(84, 180, 53, .22), transparent 70%), var(--forest); }
.desk::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(var(--forest-line) 1px, transparent 1px), linear-gradient(90deg, var(--forest-line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); pointer-events: none; }
.desk .x-wrap { position: relative; }
.desk__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.desk h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 790; }
.desk__head p { margin: 0; max-width: 46ch; color: rgba(225, 240, 218, .8); }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.doc {
  position: relative; display: flex; flex-direction: column; gap: .75rem; overflow: hidden;
  padding: 1.6rem 1.5rem 1.3rem; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .15), 0 30px 50px -24px rgba(0, 0, 0, .65);
  transform: rotate(var(--r, 0deg)); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.doc--epc { --r: -1.4deg; } .doc--asbest { --r: .8deg; } .doc--elek { --r: -.6deg; }
.doc:hover { --r: 0deg; color: var(--ink); transform: rotate(0) translateY(-6px); }
.doc:active { transform: rotate(0) translateY(-2px) scale(.99); }
.doc__band { position: absolute; left: 0; right: 0; top: 0; height: 7px; }
.doc--epc .doc__band { background: linear-gradient(90deg, var(--lbl-f), var(--lbl-e), var(--lbl-d), var(--lbl-c), var(--lbl-b), var(--lbl-a), var(--lbl-ap)); }
.doc--asbest .doc__band { background: var(--lbl-e); }
.doc--elek .doc__band { background: var(--lbl-c); }
.doc__meta { display: flex; justify-content: space-between; padding-bottom: .55rem; border-bottom: 1px solid var(--ink); color: var(--ink-3); }
.doc h3 { font-size: clamp(1.45rem, 1.25rem + .6vw, 1.8rem); letter-spacing: -.03em; font-weight: 790; }
.doc p { margin: 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.doc__foot { display: flex; align-items: baseline; gap: .45rem; margin-top: auto; padding-top: .8rem; border-top: 1px dashed var(--line-strong); }
.doc__foot .mono { color: var(--ink-3); }
.doc__foot b { font-size: 1.6rem; font-weight: 790; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.doc__go { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; color: var(--green); font-weight: 650; }
.doc__go .ic { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease-out); }
.doc:hover .doc__go .ic { transform: translateX(4px); }

.steps-x { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--forest-line); }
.steps-x__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem) !important; letter-spacing: -.02em !important; margin-bottom: 1.1rem; }
.steps-x ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.steps-x li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: start; padding-right: 1rem; }
.steps-x li:not(:last-child)::after { content: ""; position: absolute; right: -.25rem; top: 13px; width: 14px; height: 2px; background: var(--mint); opacity: .5; }
.steps-x li .mono { grid-row: span 2; display: grid; place-items: center; height: 28px; padding: 0 .5rem; border-radius: 7px; background: var(--mint); color: var(--forest); font-weight: 700; }
.steps-x li b { font-size: 1.0625rem; color: #fff; line-height: 1.3; }
.steps-x li span:last-child { font-size: .875rem; color: rgba(225, 240, 218, .75); line-height: 1.4; }
.steps-x .more { max-width: 760px; }

/* ---------- Screen 3: trust + close ---------- */
.trust { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); background: var(--bg-soft); }
.trust__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.trust h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 790; }
.vows { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.vows li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; color: var(--ink-2); line-height: 1.5; }
.vows li > .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 2.6; margin-top: .1rem; }
.vows b { color: var(--ink); }
.stats-x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.75rem 0 0; border-block: 2px solid var(--ink); }
.stats-x div { display: flex; flex-direction: column; padding: 1rem .75rem 1rem 0; }
.stats-x div + div { padding-left: 1rem; border-left: 1px solid var(--line-strong); }
.stats-x dd { order: -1; margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats-x dt { margin-top: .4rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.trust__cta { position: relative; border-radius: 24px; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; box-shadow: var(--shadow-lg); }
.trust__cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.trust__card { position: relative; margin: 1rem; padding: 1.5rem; border-radius: 18px; color: #fff;
  background: rgba(11, 53, 25, .88); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
@media (prefers-reduced-transparency: reduce) { .trust__card { background: var(--forest); backdrop-filter: none; } }
.trust__card h2 { color: #fff; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); letter-spacing: -.03em; }
.trust__card p { margin: .6rem 0 0; color: rgba(225, 240, 218, .85); }
.trust__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .lh { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
  .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-x ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .steps-x li:nth-child(2)::after { display: none; }
}
@media (max-width: 960px) {
  .lh { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
  .lh__copy { display: contents; }
  .lh h1 { order: 1; max-width: 14ch; }
  .lh__promise { order: 2; }
  .cert { order: 3; margin-top: 1.5rem; }
  .lh__actions { order: 4; }
  .escale { order: 5; max-width: none; }
  .trust__grid { grid-template-columns: 1fr; }
  .trust__cta { min-height: 380px; }
  /* services become a swipeable row */
  .docs { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: .75rem var(--gutter) 1.5rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .docs::-webkit-scrollbar { display: none; }
  .doc { flex: 0 0 min(82%, 360px); scroll-snap-align: start; scroll-margin-left: var(--gutter); --r: 0deg !important; }
}
@media (max-width: 680px) {
  .lh h1 { font-size: 9vw; max-width: none; }
  .lh__actions { display: none; }
  .cert { padding: 1.2rem 1rem 1rem; }
  .cert__foot { grid-template-columns: 96px 1fr; gap: .9rem; }
  .stamp { width: 96px; height: 96px; }
  .stamp output { font-size: 1.4rem; }
  .escale__segs li { font-size: .9375rem; }
  .steps-x ol { grid-template-columns: 1fr; }
  .steps-x li::after { display: none; }
  .desk__head { margin-bottom: 1rem; }
  .stats-x div + div { padding-left: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .doc { transition: none; }
}
.escale__ptr::after { left: var(--notch, 50%); }

/* =========================================================
   v5: daring hero (forest field, label wedge, choreographed entrance)
   ========================================================= */
.lh {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(52rem 36rem at 92% 12%, rgba(84, 180, 53, .28), rgba(84, 180, 53, 0) 70%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(84, 180, 53, .14), rgba(84, 180, 53, 0) 70%),
    var(--forest);
}
.lh > .lh__copy, .lh > .cert { position: relative; z-index: 2; }
.lh__topline { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; height: 6px; transform-origin: left; }
.lh__topline i { flex: 1; }
.lh__topline i:nth-child(1) { background: var(--lbl-f); } .lh__topline i:nth-child(2) { background: var(--lbl-e); } .lh__topline i:nth-child(3) { background: var(--lbl-d); }
.lh__topline i:nth-child(4) { background: var(--lbl-c); } .lh__topline i:nth-child(5) { background: var(--lbl-b); } .lh__topline i:nth-child(6) { background: var(--lbl-a); } .lh__topline i:nth-child(7) { background: var(--lbl-ap); }

/* the label wedge: seven arrows growing out of the left edge, behind the copy */
.lh__backdrop { position: absolute; z-index: 1; left: 0; bottom: 8%; width: min(64vw, 980px); display: grid; gap: clamp(6px, .8vw, 12px); pointer-events: none; will-change: transform; }
.lh__backdrop i { display: block; height: clamp(26px, 4.4vh, 52px); width: var(--w); background: var(--c); opacity: .13; transform-origin: left; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }

.lh h1 { color: #fff; }
.lh h1 .g { color: var(--mint); }
.lh h1 .w { display: inline-block; }
.lh__promise { color: rgba(236, 248, 230, .92); }
.lh .x-btn--ink { background: var(--leaf); color: #06230f; box-shadow: 0 12px 30px -12px rgba(84, 180, 53, .75); }
.lh .x-btn--ink:hover { background: #63c544; color: #06230f; }
.lh .x-btn--ghost { background: transparent; border-color: rgba(201, 240, 182, .38); color: #fff; }
.lh .x-btn--ghost:hover { background: rgba(201, 240, 182, .08); border-color: var(--mint); color: #fff; }
.lh a:focus-visible, .lh button:focus-visible, .lh .escale__ptr:focus-visible { outline-color: var(--mint); }

.lh .escale__q { color: #fff; }
.lh .escale__q span { color: rgba(225, 240, 218, .7); }
.lh .escale__ptr { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); }
.lh .escale__ptr::after { background: #fff; }
.lh .escale__ptr em { color: var(--green); }
.lh .escale.is-live .escale__segs li:not(.is-on) { opacity: .38; }
.lh .escale__m { color: rgba(225, 240, 218, .8); }
.lh .escale__m span { color: #fff; }
.lh .escale__m a { color: var(--mint); }

/* entrance: plays once; without JS everything is simply visible */
.js .lh__topline { transform: scaleX(0); }
.js .lh__backdrop i { transform: scaleX(0); }
.js .lh h1 .w { opacity: 0; transform: translateY(.45em); filter: blur(10px); }
.js .lh__promise, .js .lh__actions, .js .lh .escale { opacity: 0; transform: translateY(16px); }
.js .lh .cert { opacity: 0; transform: translateY(44px) rotate(2.5deg); }
.js .lh .escale__segs li { opacity: 0; transform: translateY(-14px); }

.lh.is-in .lh__topline { transform: none; transition: transform 1.1s var(--ease-out); }
.lh.is-in .lh__backdrop i { transform: none; transition: transform 1.3s var(--ease-out); }
.lh.is-in .lh__backdrop i:nth-child(2) { transition-delay: .05s; } .lh.is-in .lh__backdrop i:nth-child(3) { transition-delay: .1s; }
.lh.is-in .lh__backdrop i:nth-child(4) { transition-delay: .15s; } .lh.is-in .lh__backdrop i:nth-child(5) { transition-delay: .2s; }
.lh.is-in .lh__backdrop i:nth-child(6) { transition-delay: .25s; } .lh.is-in .lh__backdrop i:nth-child(7) { transition-delay: .3s; }
.lh.is-in h1 .w { opacity: 1; transform: none; filter: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out); }
.lh.is-in h1 > .w { transition-delay: .15s; }
.lh.is-in h1 .g .w:nth-child(1) { transition-delay: .3s; }
.lh.is-in h1 .g .w:nth-child(2) { transition-delay: .4s; }
.lh.is-in .lh__promise { opacity: 1; transform: none; transition: opacity .7s .55s, transform .9s .55s var(--ease-out); }
.lh.is-in .lh__actions { opacity: 1; transform: none; transition: opacity .7s .65s, transform .9s .65s var(--ease-out); }
.lh.is-in .escale { opacity: 1; transform: none; transition: opacity .7s .75s, transform .9s .75s var(--ease-out); }
.lh.is-in .cert { opacity: 1; transform: none; transition: opacity .6s .35s, transform 1.1s .35s cubic-bezier(.2, 1.15, .35, 1); }
.lh.is-in .escale__segs li { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .6s var(--ease-out); }
.lh.is-in .escale__segs li:nth-child(1) { transition-delay: .85s; } .lh.is-in .escale__segs li:nth-child(2) { transition-delay: .9s; }
.lh.is-in .escale__segs li:nth-child(3) { transition-delay: .95s; } .lh.is-in .escale__segs li:nth-child(4) { transition-delay: 1s; }
.lh.is-in .escale__segs li:nth-child(5) { transition-delay: 1.05s; } .lh.is-in .escale__segs li:nth-child(6) { transition-delay: 1.1s; }
.lh.is-in .escale__segs li:nth-child(7) { transition-delay: 1.15s; }
/* after the entrance, segments return to quick interactive transitions */
.lh.is-settled .escale__segs li { transition: opacity .25s, transform .3s var(--ease-out); transition-delay: 0s !important; }
.lh.is-settled .escale__segs li.is-on { transform: scaleY(1.12); }

@media (prefers-reduced-motion: reduce) {
  .js .lh__topline, .js .lh__backdrop i { transform: none; }
  .js .lh h1 .w, .js .lh__promise, .js .lh__actions, .js .lh .escale, .js .lh .cert, .js .lh .escale__segs li { opacity: 1; transform: none; filter: none; }
}

/* =========================================================
   v5: price overview — six cards, one look
   ========================================================= */
.overview { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); background: #fff; }
.overview__head { display: flex; justify-content: space-between; align-items: end; gap: .75rem 3rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.overview h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem); line-height: 1.04; letter-spacing: -.038em; font-weight: 790; }
.overview__head p { margin: 0; max-width: 54ch; font-size: .9375rem; color: var(--ink-2); }
.pcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.pc {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.1rem 1rem 1rem; border-radius: 18px;
  background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .25s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.pc:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-md); transform: translateY(-3px); }
.pc.is-active { background: #fff; box-shadow: inset 0 0 0 2px var(--green), var(--shadow-md); }
.pc__pick { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.pc__pick:focus-visible { outline: 3px solid #5aa9e6; outline-offset: 2px; }
.pc__head { display: flex; flex-direction: column; gap: .45rem; min-height: 4.6rem; }
.pc .house { width: 44px; height: 31px; color: var(--ink-3); transition: color .25s; }
.pc.is-active .house { color: var(--green); }
.pc__name { font-weight: 680; font-size: 1rem; line-height: 1.2; letter-spacing: -.01em; }
.pc__name small { font-weight: 500; color: var(--ink-3); font-size: .8125rem; }
.pc dl { margin: .7rem 0 0; display: grid; gap: .1rem; }
.pc dl div { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .32rem 0; border-top: 1px dashed var(--line-strong); }
.pc dt { font-family: var(--mono); font-size: .6875rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.pc dd { margin: 0; font-size: 1.1875rem; font-weight: 760; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pc__quote { margin: .9rem 0 0; font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.pc__combi { margin: auto 0 0; padding-top: .6rem; font-size: .8125rem; color: var(--green-deep); }
.pc__combi b { font-variant-numeric: tabular-nums; }
.pc__link { position: relative; z-index: 2; color: var(--green); font-weight: 650; }
@media (max-width: 1100px) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .pc { padding: .85rem .8rem .8rem; }
  .pc__head { min-height: 0; flex-direction: row; align-items: center; gap: .5rem; }
  .pc .house { width: 32px; height: 23px; flex: none; }
  .pc__name { font-size: .875rem; }
  .pc__name small { display: none; }
  .pc dd { font-size: 1rem; }
}

/* v5 fixes */
.lh h1 .w { color: #fff; }
.lh h1 .w.g { color: var(--mint); }
.lh .cert { color: var(--ink); }
.lh__backdrop { top: 11%; bottom: auto; }
.lh__backdrop i { opacity: .1; }
.lh .escale.is-live .escale__segs li:not(.is-on) { opacity: .55; }
.lh.is-in h1 .w.g { transition-delay: .32s; }
@media (max-width: 680px) { .lh__backdrop { display: none; } }

/* =========================================================
   v6: shorter hero, sections that overlap
   ========================================================= */
/* the hero lets its price card hang over the edge; its own layers are clipped separately */
.lh { overflow: visible; z-index: 2; min-height: 0; align-items: start; padding-block: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem); }
.lh__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lh h1 { font-size: clamp(2.4rem, 1.3rem + 2.9vw, 3.9rem); }
.lh__promise { margin-top: 1rem; }
.lh__actions { margin-top: 1.4rem; }
.escale { margin-top: 1.75rem; }
.lh__backdrop { top: 9%; }

/* overlap 1: the price card straddles the hero's bottom edge */
.lh > .cert { z-index: 3; margin-bottom: -10rem; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 50px 90px -30px rgba(6, 30, 14, .55), 0 0 0 1px rgba(14, 26, 18, .05); }

/* overlap 2: the six price cards sit across the white / forest boundary */
.overview { position: relative; z-index: 1; padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-bottom: 0; }
.overview__head { display: block; max-width: calc(100% - 600px); margin-bottom: 1.5rem; }
.overview__head p { margin-top: .75rem; }
.pcards { position: relative; z-index: 2; margin-bottom: -6rem; }
.pc { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -28px rgba(6, 30, 14, .5); }
.pc:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 50px -28px rgba(6, 30, 14, .6); }
.pc.is-active { box-shadow: inset 0 0 0 2px var(--green), 0 30px 50px -26px rgba(6, 30, 14, .65); }

/* partners move into the forest band as a quiet light strip, so the cards land on green */
.desk { padding-top: calc(6rem + clamp(2.5rem, 2rem + 2vw, 3.5rem)); padding-bottom: clamp(9rem, 7rem + 5vw, 12rem); }

/* overlap 3: the photo card rises into the forest band */
.trust { position: relative; z-index: 2; padding-top: 0; }
.trust__grid { align-items: start; }
.trust__body { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.trust__cta { margin-top: clamp(-9rem, -6rem - 3vw, -6rem); min-height: 520px; box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 50px 90px -30px rgba(6, 30, 14, .6); }

@media (max-width: 1100px) {
  .overview__head { max-width: calc(100% - 500px); }
}
@media (max-width: 960px) {
  .lh > .cert { margin-bottom: 0; }
  .overview__head { max-width: none; }
  .trust__cta { margin-top: 0; min-height: 380px; }
  .trust__body { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .trust { padding-bottom: 3rem; }
  .desk { padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
}
@media (max-width: 680px) {
  .pcards { margin-bottom: -4rem; }
  .desk { padding-top: calc(4rem + 2.5rem); }
}
.trust__partners { margin-top: 1.75rem; }
.trust__partners h3 { font-size: .875rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-bottom: .8rem; }
.trust__partners .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; }
.trust__partners img { height: 32px; width: auto; }
.trust__partners .partner-text { font-size: 1.1rem; }
/* v6 fixes: real overhang (the grid swallows negative margins), phone width */
.lh > .cert { margin-bottom: 0; top: 9.5rem; }
.cert__cta { min-width: 0; }
@media (max-width: 960px) { .lh > .cert { top: 0; } }
@media (max-width: 680px) { .cert__cta .x-btn { white-space: normal; padding-inline: 1rem; text-align: center; } }
.overview { background: transparent; }

/* =========================================================
   v7: fresh logo green, flowing wave border, shorter hero
   ========================================================= */
.page-home {
  --fresh-1: #1f7a34;   /* deep end: carries white text at AA */
  --fresh-2: #2e9a3e;   /* logo green */
  --fresh-3: #54b435;   /* logo leaf */
  --mint: #e6f8da;
  --forest: #1c6e30;    /* bands and cards that sat on the old forest now use the fresh family */
  --forest-line: rgba(255, 255, 255, .14);
}

/* hero field */
.lh {
  background:
    radial-gradient(46rem 30rem at 88% 0%, rgba(140, 214, 90, .55), rgba(140, 214, 90, 0) 70%),
    linear-gradient(115deg, var(--fresh-1) 0%, #24843a 42%, var(--fresh-2) 72%, #43a93a 100%);
  padding-top: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  padding-bottom: clamp(6.5rem, 5rem + 4vw, 8.5rem); /* room for the wave */
}
.lh__backdrop { display: none; }
.lh h1 { font-size: clamp(2.3rem, 1.2rem + 2.7vw, 3.6rem); max-width: none; line-height: 1; }
.lh h1 .w.g { color: var(--mint); }
.lh__promise { color: #fff; max-width: 36ch; }
.lh .x-btn--ink { background: #fff; color: var(--fresh-1); box-shadow: 0 12px 30px -14px rgba(10, 50, 20, .55); }
.lh .x-btn--ink:hover { background: var(--mint); color: #155d27; }
.lh .x-btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.lh .x-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* the price card no longer pushes the hero taller: it hangs over the wave */
.lh > .cert { top: 0; margin-bottom: -20rem; }

/* wave border with flowing spectrum lines */
.lh__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; width: 100%; height: clamp(90px, 6rem + 3vw, 150px); pointer-events: none; overflow: visible; }
.wave-line { fill: none; stroke: var(--c); stroke-width: 2.25; opacity: var(--o, .95); vector-effect: non-scaling-stroke; stroke-linecap: round; }
.wave-fill { fill: #fff; }
.js .wave-lines { clip-path: inset(0 100% 0 0); }
.lh.is-in .wave-lines { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.33, .9, .3, 1) .2s; }
@media (prefers-reduced-motion: reduce) { .js .wave-lines { clip-path: none; } }

/* overview: start under the wave, keep clear of the hanging card */
.overview { padding-top: .5rem; }

/* services band in the fresh family */
.desk { background: radial-gradient(50rem 30rem at 90% 0%, rgba(140, 214, 90, .35), transparent 70%), linear-gradient(160deg, #1b6a2f, #22803a 60%, #2a913d); }
.desk__head { align-items: center; }
.desk__head > div:first-child { max-width: 46ch; }
.desk__head > div:first-child p { margin-top: 1rem; color: rgba(255, 255, 255, .85); }
.steps-x li .mono { background: #fff; color: var(--fresh-1); }
.steps-x li span:last-child { color: rgba(255, 255, 255, .8); }
.more--dark summary { color: rgba(255, 255, 255, .88); }
.more--dark .more__body { color: rgba(255, 255, 255, .85); }
.trust__card { background: rgba(28, 110, 48, .9); }

/* label slider, now in the services band */
.escale--dark { margin-top: 0; width: min(100%, 480px); }
.escale--dark .escale__q { color: #fff; }
.escale--dark .escale__q span { color: rgba(255, 255, 255, .75); }
.escale--dark .escale__ptr { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); }
.escale--dark .escale__ptr::after { background: #fff; }
.escale--dark .escale__ptr em { color: var(--fresh-1); }
.escale--dark.is-live .escale__segs li:not(.is-on) { opacity: .6; }
.escale--dark .escale__m { color: rgba(255, 255, 255, .85); }
.escale--dark .escale__m span { color: #fff; }
.escale--dark .escale__m a { color: #fff; }

@media (max-width: 960px) {
  .lh { padding-bottom: clamp(5rem, 4rem + 4vw, 6.5rem); }
  .lh > .cert { margin-bottom: 0; }
  .lh__wave { height: 80px; }
  .escale--dark { width: 100%; }
}
@media (max-width: 680px) {
  .lh h1 { font-size: 8.6vw; }
}
.overview { padding-top: 2.25rem; }
@media (max-width: 960px) { .overview { padding-top: 1rem; } }
.escale--dark.is-live .escale__segs li:not(.is-on) { opacity: .78; }

/* =========================================================
   v8: photo duotone hero, orange CTAs, reworked tarieven card
   ========================================================= */
.page-home { --cta: #cf4410; --cta-hover: #b83a0b; --cta-press: #a2330a; }

/* Orange calls to action (white text at 4.7:1) */
.x-btn--cta { background: var(--cta); color: #fff; font-weight: 700; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 28px -12px rgba(207, 68, 16, .75); }
.x-btn--cta:hover { background: var(--cta-hover); color: #fff; }
.x-btn--cta:active { background: var(--cta-press); }
.page-home .site-header .btn--primary, .page-home .action-bar .btn--primary { background: var(--cta); box-shadow: 0 10px 24px -12px rgba(207, 68, 16, .7); }
.page-home .site-header .btn--primary:hover, .page-home .action-bar .btn--primary:hover { background: var(--cta-hover); }
.page-home .site-footer .btn--primary { background: var(--cta); }

/* Hero: the inspector at the door, toned into the green, slow settle + parallax */
.lh { background: linear-gradient(115deg, #17652a 0%, #1f7a34 45%, #2e9a3e 100%); }
.lh__photo { position: absolute; inset: -6% 0 0 0; will-change: transform; }
.lh__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; filter: grayscale(1) contrast(1.12) brightness(1.05); mix-blend-mode: multiply; opacity: .9; transform-origin: 70% 40%; }
.lh__tint { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 96, 40, .94) 0%, rgba(24, 108, 44, .82) 34%, rgba(34, 128, 52, .38) 62%, rgba(46, 154, 62, .12) 100%),
    radial-gradient(40rem 26rem at 85% 10%, rgba(150, 220, 100, .35), rgba(150, 220, 100, 0) 70%); }
.lh__topline, .lh__backdrop { z-index: 2; }
.js .lh__photo img { transform: scale(1.14); }
.lh.is-in .lh__photo img { transform: scale(1); transition: transform 3.2s cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) { .js .lh__photo img { transform: none; } }
@media (max-width: 960px) {
  .lh__photo img { object-position: 70% 20%; }
  .lh__tint { background: linear-gradient(180deg, rgba(20, 96, 40, .9), rgba(24, 108, 44, .78) 45%, rgba(31, 122, 52, .9)); }
}

/* ---------- Tarieven card ---------- */
.calc {
  position: relative; z-index: 3; overflow: hidden; color: var(--ink);
  background: #fff; border-radius: 26px; padding: 1.5rem 1.5rem 1.15rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 50px 90px -30px rgba(6, 30, 14, .55), 0 0 0 1px rgba(14, 26, 18, .05);
  top: 0; margin-bottom: -20rem;
}
.calc__band { position: absolute; left: 0; right: 0; top: 0; display: flex; height: 5px; }
.calc__band i { flex: 1; }
.calc__band i:nth-child(1) { background: var(--lbl-f); } .calc__band i:nth-child(2) { background: var(--lbl-e); } .calc__band i:nth-child(3) { background: var(--lbl-d); }
.calc__band i:nth-child(4) { background: var(--lbl-c); } .calc__band i:nth-child(5) { background: var(--lbl-b); } .calc__band i:nth-child(6) { background: var(--lbl-a); } .calc__band i:nth-child(7) { background: var(--lbl-ap); }
.calc__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.calc__head h2 { font-size: clamp(1.45rem, 1.25rem + .6vw, 1.8rem); letter-spacing: -.03em; font-weight: 790; }
.calc__chip { padding: .3rem .65rem; border-radius: 999px; background: #eef6e9; color: var(--fresh-1); font-size: .8125rem; font-weight: 620; }
.calc__label { margin: 0 0 .55rem; font-size: .8125rem; font-weight: 640; color: var(--ink-3); }
.calc .types { margin-bottom: 1.1rem; }
.calc .types button { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); font-size: .75rem; }
.calc .types button:hover { box-shadow: inset 0 0 0 1px var(--ink-3); background: #fbfcfa; }
.calc .types button[aria-checked="true"] { background: var(--fresh-1); color: #fff; box-shadow: 0 8px 18px -10px rgba(31, 122, 52, .8); }
.calc .types button[aria-checked="true"] .house { color: #fff; }

.svcs { display: grid; gap: .45rem; }
.svc-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .8rem; padding: .7rem .75rem .7rem .7rem; border-radius: 16px; background: #f5f8f2; cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.svc-row:hover { background: #eef4ea; }
.svc-row:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 1.5px #bfe0b0; }
.svc-row__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #e4f3dc; color: var(--fresh-1); }
.svc-row__ic .ic { width: 20px; height: 20px; }
.svc-row:has(input:not(:checked)) .svc-row__ic { background: #eceeea; color: var(--ink-3); }
.svc-row__name { font-weight: 640; font-size: 1rem; line-height: 1.2; }
.svc-row__name small { display: block; margin-top: .15rem; font-weight: 500; font-size: .8125rem; color: var(--ink-3); }
.svc-row__price { font-weight: 760; font-size: 1.125rem; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.svc-row:has(input:not(:checked)) .svc-row__name, .svc-row:has(input:not(:checked)) .svc-row__price { color: var(--ink-3); }
.toggle { position: relative; width: 46px; height: 28px; flex: none; }
.toggle input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: #d3dbcf; transition: background-color .25s; }
.toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--ease-out); }
.toggle input:checked + span { background: var(--fresh-1); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 3px solid #5aa9e6; outline-offset: 2px; }

.calc__total { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.calc__total-label { display: block; font-weight: 680; font-size: 1rem; }
.calc__save { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; padding: .25rem .6rem; border-radius: 999px; background: #e4f3dc; color: #155d27; font-size: .8125rem; font-weight: 650; white-space: nowrap; transition: opacity .25s, transform .3s var(--ease-out); }
.calc__save .ic { width: 14px; height: 14px; }
.calc__save s { color: var(--ink-3); font-weight: 500; }
.calc__save[hidden] { display: inline-flex; opacity: 0; transform: translateY(4px); visibility: hidden; }
.calc__sum { font-size: clamp(2.4rem, 2rem + 1.2vw, 3rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.calc__cta { width: 100%; min-height: 58px; margin-top: 1rem; font-size: 1.1875rem; }
.calc__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; margin: .8rem 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--ink-2); }
.calc__trust li { display: inline-flex; align-items: center; gap: .3rem; }
.calc__trust .ic { width: 15px; height: 15px; color: var(--fresh-1); stroke-width: 2.4; }
.calc__more { margin-top: .9rem; }

/* entrance + overlap rules follow the old .cert */
.js .lh .calc { opacity: 0; transform: translateY(44px) rotate(2deg); }
.lh.is-in .calc { opacity: 1; transform: none; transition: opacity .6s .35s, transform 1.1s .35s cubic-bezier(.2, 1.15, .35, 1); }
@media (prefers-reduced-motion: reduce) { .js .lh .calc { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .lh > .calc { order: 3; margin-top: 1.5rem; margin-bottom: 0; }
}
@media (max-width: 680px) {
  .calc { padding: 1.2rem 1rem 1rem; }
  .svc-row { gap: .6rem; padding: .65rem .6rem; }
  .svc-row__ic { width: 34px; height: 34px; }
  .svc-row__name small { font-size: .75rem; }
}
/* v8 fixes: phone copy above the photo layer; keep the green hero short on desktop */
.lh h1, .lh__promise, .lh__actions, .lh__intro { position: relative; z-index: 2; }
.calc { margin-bottom: -27rem; }
.overview { padding-top: 6.5rem; }
@media (max-width: 1100px) { .overview { padding-top: 4.5rem; } }
@media (max-width: 960px) { .overview { padding-top: 1rem; } .lh > .calc { margin-bottom: 0; } }
@media (min-width: 1101px) { .overview { padding-top: 8rem; } }
/* v9: 20px more hero; calmer wave tones */
.lh { padding-bottom: calc(clamp(6.5rem, 5rem + 4vw, 8.5rem) + 20px); }
.calc { margin-bottom: calc(-27rem + 20px); }
.wave-line { stroke-width: 2; }
@media (max-width: 960px) { .lh { padding-bottom: calc(clamp(5rem, 4rem + 4vw, 6.5rem) + 20px); } .lh > .calc { margin-bottom: 0; } }
.page-home { --wave-orange: #f26b1d; }
.wave-line { stroke-width: 2.25; }
/* v12: flowing-line variants (pick one) */
.wv { display: none; }
.lh[data-wave="ribbon"] .wv--ribbon, .lh[data-wave="contour"] .wv--contour, .lh[data-wave="contour"] .wv--contour-edge, .lh[data-wave="layers"] .wv--layers { display: block; }
.js .wv-draw { clip-path: inset(0 100% 0 0); }
.lh.is-in .wv-draw { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.33,.9,.3,1) .2s; }
.wv--contour { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.wv-flow path { fill: none; stroke: #fff; stroke-width: 1.2; opacity: .16; vector-effect: non-scaling-stroke; }
.wv-flow path:nth-child(3n) { stroke: #ffb27a; opacity: .45; }
.wv-flow { animation: wvdrift 18s ease-in-out infinite alternate; }
@keyframes wvdrift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.wl1 { fill: rgba(255,255,255,.10); } .wl2 { fill: rgba(255,255,255,.22); }
.wl-accent { fill: none; stroke: #f26b1d; stroke-width: 3; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) { .wv-flow { animation: none; } .js .wv-draw { clip-path: none; } }

/* process demo base (restored) */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.5vw, 2rem); margin: 0; padding: 0; list-style: none; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: calc(196px + 1.5rem + 15px); border-top: 2px dashed var(--line-strong); }
.flow__step { position: relative; display: flex; flex-direction: column; }
.flow__demo { position: relative; height: 196px; padding: 1.1rem; border-radius: 18px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: .8125rem; }
.flow__n { position: relative; align-self: flex-start; display: grid; place-items: center; height: 32px; padding: 0 .7rem; margin-top: 1.5rem; border-radius: 8px; background: var(--ink); color: var(--mint); font-size: .8125rem; font-weight: 700; }
.flow__step h3 { margin: 1rem 0 .5rem; font-size: 1.3rem; letter-spacing: -.02em; }
.flow__step p { margin: 0; color: var(--ink-2); font-size: .9688rem; }
.demo-form, .demo-msg, .demo-check, .demo-doc { display: grid; align-content: start; }
.demo-form { gap: .45rem; }
.df-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.df-row span { color: var(--ink-3); }
.df-row b { font-weight: 620; display: flex; gap: .25rem; }
.chip { font-style: normal; padding: .1rem .45rem; border-radius: 999px; background: #e6f5dd; color: var(--green-deep); font-weight: 650; font-size: .75rem; }
.df-btn { margin-top: .2rem; padding: .55rem; border-radius: 999px; background: var(--ink); color: #fff; text-align: center; font-weight: 650; }
.demo-msg { gap: .6rem; }
.dm-head { display: flex; align-items: center; gap: .65rem; padding: .7rem; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.dm-head b { display: block; font-size: .875rem; }
.dm-head small { color: var(--ink-3); }
.dm-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; flex: none; }
.dm-dot .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.dm-line { height: 8px; border-radius: 4px; background: #dfe8da; margin-inline: .3rem; }
.dm-line--short { width: 60%; }
.dm-cal { display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 10px; background: #e6f5dd; color: var(--green-deep); font-weight: 620; }
.demo-check { gap: .45rem; }
.dc-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-weight: 560; }
.dc-box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--green); color: #fff; flex: none; }
.dc-box .ic { width: 13px; height: 13px; stroke-width: 2.8; }
.demo-doc { gap: .9rem; }
.dd-file { display: flex; align-items: center; gap: .7rem; padding: .7rem; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.dd-file b { display: block; font-size: .875rem; }
.dd-file small { color: var(--ink-3); }
.dd-pdf { display: grid; place-items: center; width: 34px; height: 42px; border-radius: 6px; background: var(--lbl-f); color: #fff; font-size: .6875rem; font-weight: 800; flex: none; }
.dd-scale { display: flex; gap: 4px; padding: .3rem; }
.dd-scale i { flex: 1; height: 26px; border-radius: 5px; background: var(--c); opacity: .35; }
.dd-scale i.on { opacity: 1; transform: scaleY(1.25); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
.js .flow__demo > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.js .flow__step.is-played .flow__demo > * { opacity: 1; transform: none; }
.js .flow__step.is-played .flow__demo > *:nth-child(2) { transition-delay: .12s; }
.js .flow__step.is-played .flow__demo > *:nth-child(3) { transition-delay: .24s; }
.js .flow__step.is-played .flow__demo > *:nth-child(4) { transition-delay: .36s; }
.js .flow__step .flow__n { background: #e7ede4; color: var(--ink-3); transition: background-color .4s, color .4s; }
.js .flow__step.is-played .flow__n { background: var(--ink); color: var(--mint); }

/* =========================================================
   v12: fixed hero, new order (diensten → prijzen → score → proces)
   ========================================================= */
.page-home { --band: radial-gradient(50rem 30rem at 90% 0%, rgba(140, 214, 90, .35), transparent 70%), linear-gradient(160deg, #1b6a2f, #22803a 60%, #2a913d); }

/* Hero: the tarieven card lives in a slot that never sizes the hero */
.lh__slot { position: relative; align-self: stretch; z-index: 3; }
.lh__slot > .calc { margin: 0; }
@media (min-width: 961px) {
  .lh { min-height: 513px; }
  .lh__slot > .calc { position: absolute; top: 0; left: 0; right: 0; }
}
.calc__more-link { display: flex; justify-content: space-between; align-items: center; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9375rem; font-weight: 620; text-decoration: none; }
.calc__more-link:hover { color: var(--ink); }
.calc__more-link .ic { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease-out); }
.calc__more-link:hover .ic { transform: translateX(3px); }

/* ---------- Onze diensten (white) ---------- */
.svcx { position: relative; z-index: 2; background: #fff; padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.svcx__head { max-width: 40rem; margin-bottom: 2.25rem; }
.svcx__head h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 790; }
.svcx__head p { margin: 1rem 0 0; color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.svcx .docs { position: relative; z-index: 2; margin-bottom: -7rem; }
.svcx .doc { box-shadow: 0 1px 2px rgba(14, 26, 18, .08), 0 34px 60px -28px rgba(6, 30, 14, .45), 0 0 0 1px rgba(14, 26, 18, .06); }

/* ---------- Alle prijzen (green band) ---------- */
.overview.overview--green { position: relative; z-index: 1; background: var(--band); color: #fff; padding: calc(7rem + clamp(3rem, 2rem + 3vw, 4.5rem)) 0 clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.overview--green .overview__head { display: flex; justify-content: space-between; align-items: end; gap: .75rem 3rem; flex-wrap: wrap; max-width: none; margin-bottom: 1.75rem; }
.overview--green h2 { color: #fff; }
.overview--green .overview__head p { margin: 0; color: rgba(255, 255, 255, .88); }
.overview--green .pcards { margin-bottom: 0; }
.overview__more { margin-top: 1.5rem; max-width: 760px; }

/* ---------- Hoe scoort jouw woning ---------- */
.score { background: #fff; padding-block: clamp(4rem, 3rem + 3vw, 6rem); }
.score__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.score h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 790; }
.score__text p { margin: 1.1rem 0 1.25rem; color: var(--ink-2); font-size: 1.0625rem; max-width: 52ch; }
.score .escale { margin: 0; max-width: none; padding: 1.75rem 1.75rem 1.5rem; border-radius: 24px; background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.score .escale__track { padding-top: 58px; }
.score .escale__segs { gap: 6px; }
.score .escale__segs li { height: 60px; font-size: 1.375rem; }
.score .escale__ptr { height: 44px; padding: 0 1rem; }
.score .escale__ptr b { font-size: 1.3rem; }
.score .escale__ptr em { color: var(--mint); font-size: .8125rem; }
.score .escale__m { font-size: 1.0625rem; margin-top: 1.1rem; }

/* ---------- Geregeld in 2 minuten (green band, illustrated) ---------- */
.flowx { position: relative; color: #fff; background: var(--band); padding: clamp(4rem, 3rem + 3vw, 6rem) 0 clamp(10rem, 8rem + 5vw, 13rem); overflow: hidden; }
.flowx::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); pointer-events: none; }
.flowx .x-wrap { position: relative; }
.flowx__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.flowx__head h2 { color: #fff; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; }
.flowx__head p { margin: 1.1rem 0 0; color: rgba(255, 255, 255, .88); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }

.flowx .flow { --demo-h: 220px; gap: clamp(1rem, .5rem + 1.5vw, 2rem); }
.flowx .flow::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--demo-h) + 1.5rem + 16px); border-top: 2px dashed rgba(255, 255, 255, .3); }
.flowx .flow::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--demo-h) + 1.5rem + 15px); height: 4px; border-radius: 2px; background: var(--cta); transform-origin: left; transform: scaleX(var(--p, 0)); }
.flowx .flow__demo { height: var(--demo-h); padding: 1.15rem; border-radius: 20px; background: #f6faf3; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); color: var(--ink); font-size: .875rem; }
.flow__meta { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; }
.flowx .flow__n { margin: 0; height: 34px; padding: 0 .75rem; border-radius: 9px; background: #fff; color: var(--fresh-1); font-size: .875rem; font-weight: 750; }
.flow__time { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.flow__time .ic { width: 14px; height: 14px; }
.flowx .flow__step h3 { margin: 1rem 0 .5rem; color: #fff; font-size: 1.4rem; letter-spacing: -.02em; }
.flowx .flow__step p { margin: 0; color: rgba(255, 255, 255, .86); font-size: .9688rem; line-height: 1.55; }
.flowx__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

/* the illustrations, one time, step by step */
.js .flowx .flow__step .flow__n { background: rgba(255, 255, 255, .22); color: #fff; }
.js .flowx .flow__step.is-played .flow__n { background: #fff; color: var(--fresh-1); }
.df-btn { position: relative; overflow: hidden; background: var(--cta); }
.dd-file { position: relative; }
.dd-sent { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e4f3dc; color: var(--fresh-1); }
.dd-sent .ic { width: 15px; height: 15px; }
@keyframes press { 0%, 100% { transform: scale(1); } 45% { transform: scale(.94); } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes fly { 0% { transform: translate(0, 0); opacity: 1; } 60% { transform: translate(18px, -14px); opacity: 0; } 61% { transform: translate(-10px, 8px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes rise { from { transform: scaleY(.2); } to { transform: scaleY(1.3); } }
.js .flow__step.is-played .df-btn { animation: press .5s .9s ease-out both; }
.js .flow__step .dm-dot { transform: scale(0); }
.js .flow__step.is-played .dm-dot { animation: pop .55s .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .flow__step .dc-box { transform: scale(0); }
.js .flow__step.is-played .dc-item:nth-child(1) .dc-box { animation: pop .45s .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .flow__step.is-played .dc-item:nth-child(2) .dc-box { animation: pop .45s .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .flow__step.is-played .dc-item:nth-child(3) .dc-box { animation: pop .45s 1.1s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .flow__step.is-played .dc-item:nth-child(4) .dc-box { animation: pop .45s 1.4s cubic-bezier(.2, 1.3, .4, 1) both; }
.js .flow__step.is-played .dd-sent .ic { animation: fly .9s .7s ease-in-out both; }
.js .flow__step.is-played .dd-scale i.on { animation: rise .6s 1s cubic-bezier(.2, 1.3, .4, 1) both; }

/* trust photo still rises into the band above */
.trust { padding-top: 0; }

@media (max-width: 1100px) {
  .flowx .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
  .flowx .flow::before, .flowx .flow::after { display: none; }
}
@media (max-width: 960px) {
  .lh__slot { order: 3; margin-top: 1.5rem; }
  .svcx .docs { margin-bottom: -4rem; }
  .overview.overview--green { padding-top: calc(4rem + 2.5rem); }
  .score__grid { grid-template-columns: 1fr; }
  .flowx { padding-bottom: clamp(3.5rem, 3rem + 2vw, 4.5rem); }
}
@media (max-width: 680px) {
  .flowx .flow { grid-template-columns: 1fr; }
  .score .escale { padding: 1.25rem 1rem 1rem; }
  .score .escale__segs li { height: 46px; font-size: 1rem; }
  .flowx__cta .x-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .flow__step .dm-dot, .js .flow__step .dc-box { transform: none; }
  .js .flow__step.is-played * { animation: none !important; }
  .flowx .flow::after { transform: scaleX(1); }
}
@media (min-width: 961px) { .svcx { padding-top: calc(clamp(2.5rem, 2rem + 2vw, 3.5rem) + 2rem); } }

/* v12 fixes */
.lh { z-index: 3; }
.overview--green .pc { color: var(--ink); }
.flow__time { background: #2c8a3d; box-shadow: 0 0 0 4px #24803a; }
/* subtle grid on the prices band, same as the old green section */
.overview--green { overflow: hidden; }
.overview--green::before { content: ""; position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(#000, transparent 90%); mask-image: linear-gradient(#000, transparent 90%); pointer-events: none; }
.overview--green .x-wrap { position: relative; }
/* v14: calmer score + process, bigger 3×2 price cards */
.score { padding-block: clamp(3rem, 2.5rem + 2vw, 4.25rem); }
.score h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.score__text p { font-size: 1rem; margin: .9rem 0 1rem; }
.score .escale { padding: 1.25rem 1.4rem 1.1rem; }
.score .escale__track { padding-top: 50px; }
.score .escale__segs li { height: 48px; font-size: 1.125rem; }
.score .escale__ptr { height: 38px; }
.score .escale__ptr b { font-size: 1.125rem; }
.score .escale__m { font-size: 1rem; }

.flowx { padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); padding-bottom: clamp(9rem, 7.5rem + 4vw, 11.5rem); }
.flowx__head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.flowx__head h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem); }
.flowx__head p { font-size: 1.0625rem; }
.flowx .flow { --demo-h: 186px; }
.flowx .flow__demo { padding: 1rem; font-size: .8125rem; }
.flowx .flow__step h3 { font-size: 1.2rem; margin-top: .85rem; }
.flowx .flow__step p { font-size: .9375rem; }
.flowx__cta { margin-top: 2.25rem; }

@media (min-width: 961px) {
  .overview--green .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .overview--green .pc { padding: 1.4rem 1.5rem 1.3rem; border-radius: 22px; }
  .overview--green .pc__head { flex-direction: row; align-items: center; gap: .8rem; min-height: 0; }
  .overview--green .pc .house { width: 52px; height: 37px; flex: none; }
  .overview--green .pc__name { font-size: 1.25rem; }
  .overview--green .pc dl { margin-top: 1rem; }
  .overview--green .pc dl div { padding: .5rem 0; }
  .overview--green .pc dt { font-size: .75rem; }
  .overview--green .pc dd { font-size: 1.5rem; }
  .overview--green .pc__combi { font-size: .9375rem; padding-top: .8rem; }
  .overview--green .pc__quote { font-size: 1rem; }
}
.flowx .flow { --demo-h: 204px; }
.flowx .flow { --demo-h: 214px; }
/* v15: compact score + process */
.score { padding-block: 2.25rem; }
.score__grid { gap: 2rem 3.5rem; }
.score h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.score__text p { font-size: .9688rem; margin: .6rem 0 .7rem; line-height: 1.55; }
.score .escale { padding: 1rem 1.2rem .9rem; border-radius: 18px; }
.score .escale__q { font-size: .875rem; }
.score .escale__track { padding-top: 46px; }
.score .escale__segs li { height: 40px; font-size: 1rem; }
.score .escale__ptr { height: 34px; padding: 0 .8rem; }
.score .escale__ptr b { font-size: 1rem; }
.score .escale__m { font-size: .9375rem; margin-top: .7rem; }

.flowx { padding-top: 2.75rem; padding-bottom: clamp(7.5rem, 6.5rem + 3vw, 9rem); }
.flowx__head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: end; margin-bottom: 1.75rem; }
.flowx__head h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.25rem); }
.flowx__head p { margin: 0; font-size: .9688rem; }
.flowx .flow { --demo-h: 158px; }
.flowx .flow__demo { padding: .75rem; border-radius: 16px; font-size: .75rem; }
.flowx .df-row, .flowx .dc-item { padding: .38rem .55rem; }
.flowx .demo-form, .flowx .demo-check { gap: .3rem; }
.flowx .df-btn { padding: .4rem; }
.flowx .dm-head, .flowx .dd-file { padding: .55rem; }
.flowx .dm-dot { width: 26px; height: 26px; }
.flowx .dd-pdf { width: 30px; height: 36px; }
.flowx .dd-scale i { height: 20px; }
.flow__meta { margin-top: 1rem; }
.flowx .flow::before { top: calc(var(--demo-h) + 1rem + 16px); }
.flowx .flow::after { top: calc(var(--demo-h) + 1rem + 15px); }
.flowx .flow__step h3 { font-size: 1.0625rem; margin: .65rem 0 .3rem; }
.flowx .flow__step p { font-size: .875rem; line-height: 1.5; }
.flowx__cta { margin-top: 1.5rem; }
.flowx__cta .x-btn { min-height: 48px; padding: .7rem 1.2rem; font-size: 1rem; }
@media (max-width: 960px) { .flowx__head { grid-template-columns: 1fr; } .flowx { padding-bottom: 3rem; } }
.flowx .flow { --demo-h: 172px; }
/* v16: price cards — big icon + name, numbers side by side, tighter section */
.overview.overview--green { padding-top: calc(7rem + 2rem); padding-bottom: 2.75rem; }
.overview--green .overview__head { margin-bottom: 1.25rem; }
.overview--green .overview__head h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.overview--green .overview__head p { font-size: .9375rem; max-width: 52ch; }
.overview__more { margin-top: 1rem; }
@media (min-width: 961px) {
  .overview--green .pcards { gap: .85rem; }
  .overview--green .pc { padding: 1.1rem 1.25rem 1rem; }
  .overview--green .pc__head { gap: .9rem; }
  .overview--green .pc .house { width: 64px; height: 46px; color: var(--fresh-1); stroke-width: 1.6; }
  .overview--green .pc__name { font-size: 1.4rem; font-weight: 760; letter-spacing: -.02em; }
  .overview--green .pc__name small { display: block; font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
  .overview--green .pc dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: .9rem; border-top: 1px solid var(--line); }
  .overview--green .pc dl div { flex-direction: column-reverse; align-items: flex-start; gap: .1rem; padding: .7rem 0 .2rem .9rem; border-top: 0; border-left: 1px solid var(--line); }
  .overview--green .pc dl div:first-child { padding-left: 0; border-left: 0; }
  .overview--green .pc dd { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
  .overview--green .pc dt { font-size: .6875rem; }
  .overview--green .pc__combi { padding-top: .65rem; margin-top: .65rem; border-top: 1px dashed var(--line-strong); font-size: .875rem; }
  .overview--green .pc__quote { font-size: 1rem; margin-top: .9rem; }
}
@media (min-width: 961px) { .overview--green .pc dt { font-size: .75rem; color: var(--ink-2); margin-top: .3rem; } }
@media (min-width: 961px) { .overview--green .pc .house { width: 92px; height: 66px; stroke-width: 1.5; } .overview--green .pc__head { gap: 1rem; } }
@media (max-width: 960px) { .pc .house { width: 44px; height: 32px; } }
@media (min-width: 961px) {
  .overview--green .pc__name { font-size: clamp(1.6rem, 1.2rem + .9vw, 1.95rem); font-weight: 780; line-height: 1.1; }
  .overview--green .pc__name small { font-size: .9375rem; }
  .overview--green .pc dd { font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.35rem); }
  .overview--green .pc dt { font-size: .8125rem; }
  .overview--green .pc__combi { font-size: 1rem; }
  .overview--green .pc__quote { font-size: 1.0625rem; }
}
@media (min-width: 961px) { .overview--green .pc__head { margin-bottom: .9rem; } .overview--green .pc dl { margin-top: auto; } .overview--green .pc__quote { margin-top: 0; } .overview--green .pc__quote + .pc__combi { margin-top: auto; } }

/* v20: a little less compact below the hero */
.svcx { padding-top: calc(clamp(3rem, 2.5rem + 2vw, 4.25rem) + 2rem); }
.svcx__head { margin-bottom: 2.75rem; }
.svcx .doc { padding: 1.9rem 1.75rem 1.5rem; gap: .9rem; }
.overview.overview--green { padding-top: calc(7rem + 3rem); padding-bottom: 3.75rem; }
.overview--green .overview__head { margin-bottom: 1.75rem; }
@media (min-width: 961px) { .overview--green .pcards { gap: 1.1rem; } .overview--green .pc { padding: 1.35rem 1.5rem 1.25rem; } }
.score { padding-block: 3.25rem; }
.score__grid { gap: 2.5rem 4.5rem; }
.score .escale { padding: 1.35rem 1.5rem 1.2rem; }
.flowx { padding-top: 3.75rem; }
.flowx__head { margin-bottom: 2.25rem; }
.flowx .flow { gap: 1.5rem; }
.flowx__cta { margin-top: 2rem; }
.trust__body { padding-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.trust { padding-bottom: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.vows { gap: 1.1rem; }
/* deeper overlap: service cards reach well into the green prices band */
@media (min-width: 961px) {
  .svcx .docs { margin-bottom: -12rem; }
  .overview.overview--green { padding-top: calc(12rem + 3.25rem); }
}
.svcx { background: transparent; }

/* v22: more air on the landing page (hero height unchanged) */
.svcx { padding-top: calc(clamp(3.5rem, 3rem + 2vw, 5rem) + 2rem); }
.svcx__head { margin-bottom: 3.25rem; }
.svcx__head p { margin-top: 1.25rem; }
.overview.overview--green { padding-top: calc(12rem + 4.5rem); padding-bottom: 5rem; }
.overview--green .overview__head { margin-bottom: 2.25rem; }
@media (min-width: 961px) { .overview--green .pcards { gap: 1.35rem; } }
.overview__more { margin-top: 1.75rem; }
.score { padding-block: 5rem; }
.score__grid { gap: 3rem 5.5rem; }
.score__text p { margin: 1.1rem 0 1.25rem; font-size: 1.0625rem; }
.score .escale { padding: 1.75rem 1.85rem 1.5rem; }
.flowx { padding-top: 5rem; }
.flowx__head { margin-bottom: 3rem; gap: 1rem 4rem; }
.flowx .flow { gap: 2rem; }
.flowx .flow__step h3 { margin: 1rem 0 .45rem; }
.flowx__cta { margin-top: 2.75rem; }
.trust__body { padding-top: 5.5rem; }
.trust { padding-bottom: 5.5rem; }
.vows { gap: 1.35rem; margin-top: 1.75rem; }
.stats-x { margin-top: 2.25rem; }
.trust__partners { margin-top: 2.25rem; }
@media (max-width: 960px) {
  .overview.overview--green { padding-top: calc(4rem + 3rem); padding-bottom: 3.5rem; }
  .score { padding-block: 3.5rem; }
  .flowx { padding-top: 3.75rem; }
  .trust__body { padding-top: 3.5rem; }
}