/* ═══════════════════════════════════════════════
   SIRCLE · motor.css
   De vormtaal van ronde 3 (homepage, groei, diensten, websites, film, care).
   Op elke pagina geladen, omdat Swup alleen #swup wisselt en de kop laat
   staan: een stijlblad per pagina zou na doorklikken ontbreken.
   Alles is afgebakend met eigen klassen (b-, h-, m-, f-, gt, gc), dus het
   raakt de overige pagina's niet.
   ═══════════════════════════════════════════════ */

:root {
  --b-ease: cubic-bezier(0.625, 0.05, 0, 1);
  --b-groen-mid: #3F6F45;
  --b-8: .5rem; --b-16: 1rem; --b-24: 1.5rem; --b-32: 2rem; --b-48: 3rem; --b-64: 4rem; --b-96: 6rem; --b-128: 8rem;
  --b-max: 1240px;
  --b-rand: clamp(1.25rem, 4vw, 3rem);
  --b-goot: 1.5rem;
  --b-y: clamp(6rem, 11vw, 12rem);
  --b-display: clamp(2.75rem, 5vw, 5rem);
  --b-h2:      clamp(2rem, 3.4vw, 3.25rem);
  --b-lead:    clamp(1.125rem, 1.4vw, 1.375rem);
  --b-body:    1.0625rem;
  --b-label:   .8125rem;
}
.b-sec { position: relative; }
.b-wrap { width: min(100% - 2 * var(--b-rand), var(--b-max)); margin-inline: auto; position: relative; z-index: 1; }
.b-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--b-goot); row-gap: var(--b-32); align-items: center; }
.b-grid--top { align-items: start; }
.b-links, .b-rechts { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) { .b-links { grid-column: 1 / 6; } .b-rechts { grid-column: 7 / 13; } }
.b-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* typografie */
.b-label { display: inline-flex; align-items: center; gap: var(--b-8); font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.b-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid currentColor; }
.b-h1 { font-size: var(--b-display); font-weight: 700; line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.b-h2 { font-size: var(--b-h2); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.b-lead { font-size: var(--b-lead); line-height: 1.45; max-width: 36ch; }
.b-body { font-size: var(--b-body); line-height: 1.55; max-width: 56ch; }
.b-nr { font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
[data-theme="dark"] .b-nr { color: var(--gold); }
[data-theme="light"] .b-nr { color: var(--b-groen-mid); }
.b-gedempt { opacity: .68; }
.b-h1 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--gold); letter-spacing: 0; }
.b-ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid currentColor; flex: none; }
.b-ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .b-ico { color: var(--gold); }
[data-theme="light"] .b-ico { color: var(--b-groen-mid); }

/* sectienummer, alleen voor de feedbackronde */

/* knoppen */
.b-btn { display: inline-flex; align-items: center; gap: var(--b-16); margin: 0; font-size: var(--b-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .5rem .5rem .5rem 1.5rem; border-radius: 999px; border: 1px solid currentColor; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.b-btn__c { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gold); color: var(--green-dark); transition: transform var(--dur-fast) var(--ease); }
.b-btn__c svg { width: 1rem; height: 1rem; }
.b-btn:hover .b-btn__c { transform: rotate(45deg); }
.b-btn--vol { background: var(--cream); color: var(--green-dark); border-color: var(--cream); }
.b-btn--vol .b-btn__c { background: var(--green-dark); color: var(--gold); }
[data-theme="light"] .b-btn--vol { background: var(--green-dark); color: var(--cream); border-color: var(--green-dark); }
[data-theme="light"] .b-btn--vol .b-btn__c { background: var(--gold); color: var(--green-dark); }
.b-google { display: inline-flex; align-items: center; gap: var(--b-8); font-size: var(--b-label); letter-spacing: .04em; }
.b-google b { font-weight: 700; }
.b-google .ster { color: var(--gold); letter-spacing: .05em; }
[data-theme="light"] .b-google .ster { color: var(--b-groen-mid); }

/* marquee: twee gelijke helften, loopt oneindig, staat stil bij hover */
.b-marq { overflow: hidden; width: 100%; }
.b-marq__track { display: flex; width: max-content; animation: marquee 60s linear infinite; will-change: transform; }
.b-marq__half { display: flex; gap: var(--b-16); padding-right: var(--b-16); flex: none; }
.b-marq--terug .b-marq__track { animation-direction: reverse; }
.b-marq:hover .b-marq__track { animation-play-state: paused; }

/* ── 01 HERO: de cirkel opent ─────────────────── */
.b-hero { height: 230vh; background: var(--green-dark); color: var(--cream); }
.b-hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; }
.b-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: circle(var(--r, 18%) at var(--cx, 72%) var(--cy, 52%)); will-change: clip-path; }
.b-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--b-goot); align-items: center; padding-top: var(--b-64); }
.b-hero__tekst { grid-column: 1 / 8; position: relative; z-index: 2; }
.b-hero__ringwrap { grid-column: 8 / 13; display: grid; place-items: center; min-height: 40vmin; }
.b-hero__ring { width: 36vmin; height: 36vmin; border-radius: 50%; border: 1px solid rgba(242,226,164,.55); position: relative; pointer-events: none; }
.b-hero__ring::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; border: 1px dashed rgba(242,226,164,.25); animation: b-draai 40s linear infinite; }
@keyframes b-draai { to { transform: rotate(360deg); } }
.b-hero__tekst .b-h1 { margin-top: var(--b-16); max-width: 13ch; }
.b-hero__sub { margin-top: var(--b-24); }
.b-hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-16) var(--b-32); margin-top: var(--b-32); }
.b-hero__tellers { display: flex; flex-wrap: wrap; gap: var(--b-16) var(--b-48); margin-top: var(--b-48); padding-top: var(--b-24); border-top: 1px solid rgba(243,239,232,.18); }
.b-hero__tellers > div { max-width: 11rem; }
.b-hero__tellers strong { display: block; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.b-hero__tellers span { display: block; margin-top: var(--b-8); font-size: var(--b-label); letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.b-hero__slot { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--b-16); opacity: 0; z-index: 3; pointer-events: none; }
.b-hero__slot p { font-size: clamp(1.75rem, 4vw, 4rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.b-hero__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12,24,15,0) 30%, rgba(12,24,15,.78) 100%); opacity: 0; z-index: 2; pointer-events: none; }
.b-hero__hint { position: absolute; right: max(var(--b-rand), calc((100% - var(--b-max)) / 2)); bottom: var(--b-32); font-size: var(--b-label); letter-spacing: .14em; text-transform: uppercase; opacity: .5; z-index: 3; }
@media (max-width: 899px) {
  .b-hero { height: auto; }
  .b-hero__stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; padding: 5.5rem 0 var(--b-48); }
  .b-hero__grid { display: block; padding-top: 0; order: 1; }
  .b-hero__video { order: 2; position: relative; inset: auto; display: block; width: min(78vw, 22rem); aspect-ratio: 1; height: auto; margin: var(--b-48) auto 0; clip-path: circle(50% at 50% 50%); border-radius: 50%; }
  .b-hero__ringwrap, .b-hero__slot, .b-hero__scrim, .b-hero__hint { display: none; }
}

/* ── 02 HERKENNING ───────────────────────────── */
.b-pijn { background: var(--cream); color: var(--green-dark); padding-block: var(--b-y); }
.b-pijn .b-h2 { margin-top: var(--b-16); }
.b-pijn__foto { margin-top: var(--b-32); border-radius: var(--b-8); overflow: hidden; aspect-ratio: 4/3; max-width: 30rem; }
.b-pijn__foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.75); }
.b-pijn__item { padding-block: var(--b-32); border-top: 1px solid rgba(12,24,15,.14); display: grid; grid-template-columns: 3rem 1fr; gap: var(--b-24); align-items: start; }
.b-pijn__item:first-child { border-top: 0; padding-top: 0; }
.b-pijn__item:last-child { border-bottom: 1px solid rgba(12,24,15,.14); }
.b-pijn__item .b-ico { opacity: .35; transition: opacity .5s var(--b-ease); }
.b-pijn__item p { font-size: var(--b-lead); line-height: 1.4; opacity: .3; transition: opacity .5s var(--b-ease); max-width: 32ch; padding-top: .55rem; }
.b-pijn__item.aan p, .b-pijn__item.aan .b-ico { opacity: 1; }

/* ── 03 ANTWOORD: één alinea, groot, in het midden ── */
.b-antwoord { height: 200vh; background: var(--green-dark); color: var(--cream); }
.b-antwoord .b-bg { position: sticky; top: 0; height: 100svh; opacity: .55; }
.b-antwoord__stage { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding-block: var(--b-64); margin-top: -100svh; }
.b-antwoord__tekst { font-size: clamp(1.625rem, 2.9vw, 3rem); line-height: 1.28; letter-spacing: -.015em; font-weight: 600; text-align: center; max-width: 28ch; margin-inline: auto; text-wrap: balance; }
.b-antwoord__tekst .w { opacity: .16; transition: opacity .3s; }
.b-antwoord__tekst .w.lit { opacity: 1; }
.b-antwoord__tekst .w.goud.lit { color: var(--gold); }

/* ── 03b GIDS: kop, fotoband, klantenmarquee ── */
.b-gids { background: var(--green-dark); color: var(--cream); padding-block: var(--b-y) 0; overflow: hidden; }
.b-gids .b-grid { margin-bottom: var(--b-64); }
.b-gids figure { position: relative; width: clamp(14rem, 22vw, 20rem); aspect-ratio: 4/3; overflow: hidden; border-radius: var(--b-8); flex: none; margin: 0; }
.b-gids figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-gids figcaption { position: absolute; left: var(--b-16); bottom: var(--b-16); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.b-gids .clients { margin-top: var(--b-64); }
.b-gids .clients__track img { opacity: .7; }

/* ── 04 HET SYSTEEM: stapelende panelen met fotografie ── */
.b-sys__paneel { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; overflow: hidden; transform-origin: center top; background: var(--green-dark); color: var(--cream); }
.b-sys__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.b-sys__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,24,15,.94) 0%, rgba(12,24,15,.78) 45%, rgba(12,24,15,.3) 100%); }
@media (max-width: 899px) { .b-sys__scrim { background: linear-gradient(180deg, rgba(12,24,15,.5) 0%, rgba(12,24,15,.92) 55%); } }
.b-sys__dim { position: absolute; inset: 0; background: var(--green-deep); opacity: 0; pointer-events: none; z-index: 2; }
.b-sys__paneel .b-ico { margin-bottom: var(--b-24); }
.b-sys__paneel .b-h2 { margin-top: var(--b-8); }
.b-sys__ritme { display: inline-flex; align-items: center; gap: var(--b-8); margin-top: var(--b-24); font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.b-sys__ritme::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: .6; }
.b-sys__teller { position: absolute; right: max(var(--b-rand), calc((100% - var(--b-max)) / 2)); bottom: var(--b-32); z-index: 3; font-size: var(--b-label); font-weight: 600; letter-spacing: .14em; opacity: .6; font-variant-numeric: tabular-nums; }

/* ── 05 NIVEAUS ─────────────────────────────── */
.b-niv { background: var(--green-dark); color: var(--cream); padding-block: var(--b-y); overflow: hidden; }
.b-niv .b-bg { opacity: .45; }
.b-schakel { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; border: 1px solid rgba(243,239,232,.3); border-radius: 999px; padding: .25rem; margin-top: var(--b-24); }
.b-schakel__glij { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc(50% - .25rem); background: var(--gold); border-radius: 999px; transition: transform .55s var(--b-ease); }
.b-schakel[data-aan="partner"] .b-schakel__glij { transform: translateX(100%); }
.b-schakel button { position: relative; z-index: 1; background: none; border: 0; color: var(--cream); font: inherit; font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .75rem 1.75rem; cursor: pointer; transition: color .4s; }
.b-schakel button[aria-selected="true"] { color: var(--green-dark); }
.b-niv__paneel { margin-top: var(--b-48); padding-top: var(--b-48); border-top: 1px solid rgba(243,239,232,.16); }
.b-niv__naam { font-size: var(--b-h2); font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-top: var(--b-16); }
.b-niv__prijs { margin-top: var(--b-16); font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.b-niv__prijs small { display: block; font-size: var(--b-label); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; opacity: .62; margin-top: var(--b-8); }
.b-niv__extra { margin-top: var(--b-24); min-height: 3.2em; }
.b-niv__rijen { list-style: none; }
.b-niv__rijen li { display: grid; grid-template-columns: 6.5rem 1fr 1fr; gap: var(--b-24); padding-block: var(--b-16); border-bottom: 1px solid rgba(243,239,232,.14); font-size: var(--b-body); line-height: 1.45; }
.b-niv__rijen li:first-child { border-top: 1px solid rgba(243,239,232,.14); }
.b-niv__rijen b { font-weight: 600; font-size: var(--b-label); letter-spacing: .08em; text-transform: uppercase; opacity: .6; padding-top: .2rem; }
.b-niv__rijen span { opacity: .38; transition: opacity .45s var(--b-ease), color .45s; }
.b-niv[data-aan="groei"] .b-niv__rijen span:nth-of-type(1), .b-niv[data-aan="partner"] .b-niv__rijen span:nth-of-type(2) { opacity: 1; }
.b-niv[data-aan="partner"] .b-niv__rijen span:nth-of-type(2) em { color: var(--gold); }
.b-niv__rijen em { font-style: normal; font-weight: 600; }
.b-niv__voet { margin-top: var(--b-32); font-size: var(--b-body); opacity: .62; line-height: 1.5; max-width: 60ch; }
@media (max-width: 640px) { .b-niv__rijen li { grid-template-columns: 5.5rem 1fr; } .b-niv[data-aan="groei"] .b-niv__rijen span:nth-of-type(2), .b-niv[data-aan="partner"] .b-niv__rijen span:nth-of-type(1) { display: none; } }

/* ── 06 DE AFSPRAAK: drie vragen, één belofte, een portret ── */
.b-gar { background: var(--cream); color: var(--green-dark); padding-block: var(--b-y); }
.b-gar__vragen { list-style: none; margin-top: var(--b-32); }
.b-gar__vragen li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--b-24); align-items: center; padding-block: var(--b-16); border-top: 1px solid rgba(12,24,15,.14); font-size: var(--b-lead); }
.b-gar__vragen li:last-child { border-bottom: 1px solid rgba(12,24,15,.14); }
.b-gar__belofte { margin-top: var(--b-32); font-size: var(--b-lead); line-height: 1.45; max-width: 34ch; }
.b-gar__belofte b { font-weight: 700; }
.b-gar__foto { position: relative; border-radius: var(--b-8); overflow: hidden; aspect-ratio: 4/5; max-width: 32rem; margin-left: auto; }
.b-gar__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-gar__badge { position: absolute; left: var(--b-24); bottom: var(--b-24); background: var(--cream); color: var(--green-dark); border-radius: var(--b-8); padding: var(--b-16) var(--b-24); }
.b-gar__badge strong { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.b-gar__badge span { display: block; margin-top: .25rem; font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--b-groen-mid); }
@media (max-width: 899px) { .b-gar__foto { margin-left: 0; } }

/* ── 07 NIET IN ZIT: prijslijst met iconen ────── */
.b-los { background: var(--green-dark); color: var(--cream); padding-block: var(--b-y); overflow: hidden; }
.b-los .b-bg { opacity: .4; }
.b-menu { list-style: none; }
.b-menu li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: start; gap: var(--b-8) var(--b-24); padding-block: var(--b-24); border-bottom: 1px solid rgba(243,239,232,.2); font-size: var(--b-body); }
.b-menu li:first-child { border-top: 1px solid rgba(243,239,232,.2); }
.b-menu li .n { min-width: 0; font-weight: 600; padding-top: .6rem; }
.b-menu li .p { font-weight: 700; color: var(--gold); white-space: nowrap; padding-top: .6rem; }
.b-menu li small { display: block; font-size: var(--b-body); font-weight: 400; opacity: .62; margin-top: var(--b-8); max-width: 46ch; }
.b-fit { margin-top: var(--b-32); }
.b-fit h3 { font-size: var(--b-lead); font-weight: 600; margin-top: var(--b-24); }
.b-fit ul { list-style: none; margin-top: var(--b-16); }
.b-fit li { padding: var(--b-8) 0 var(--b-8) 1.75rem; position: relative; font-size: var(--b-body); opacity: .85; }
.b-fit li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.b-fit .nee li::before { background: transparent; border: 1px solid var(--gold); }

/* ── 08 CASES: twee banden over de volle breedte ── */
.b-cases { background: var(--cream); color: var(--green-dark); padding-block: var(--b-y); overflow: hidden; }
.b-cases .b-grid { margin-bottom: var(--b-64); }
.b-cases .b-marq + .b-marq { margin-top: var(--b-16); }
.b-cases .b-marq__track { animation-duration: 90s; }
.b-case { position: relative; flex: none; width: clamp(18rem, 30vw, 32rem); aspect-ratio: 16/10; overflow: hidden; border-radius: var(--b-8); background: #0C180F; color: var(--cream); display: block; }
.b-case img, .b-case video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--b-ease); }
.b-case:hover img { transform: scale(1.05); }
.b-case video { opacity: 0; transition: opacity .5s; } .b-case:hover video { opacity: 1; }
.b-case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
.b-case span { position: absolute; left: var(--b-16); right: var(--b-16); bottom: var(--b-16); display: flex; justify-content: space-between; align-items: baseline; gap: var(--b-16); z-index: 1; }
.b-case .naam { font-size: 1.125rem; font-weight: 700; font-style: normal; }
.b-case .tag { font-size: .7rem; font-weight: 600; font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }

/* ── 09 STAPPEN + FAQ ─────────────────────────── */
.b-pad { background: var(--green-dark); color: var(--cream); padding-block: var(--b-y); }
.b-pad__lijst { list-style: none; margin-top: var(--b-64); display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .b-pad__lijst { grid-template-columns: repeat(4, 1fr); column-gap: var(--b-goot); } }
.b-pad__lijst li { padding: var(--b-32) 0; border-top: 1px solid rgba(243,239,232,.16); }
@media (min-width: 900px) { .b-pad__lijst li { padding-right: var(--b-16); } }
.b-pad__lijst .b-nr { display: block; margin-top: var(--b-24); }
.b-pad__lijst h3 { font-size: var(--b-lead); font-weight: 600; margin-top: var(--b-8); }
.b-pad__lijst p { margin-top: var(--b-8); font-size: var(--b-body); opacity: .75; line-height: 1.5; }
.b-faq { margin-top: var(--b-y); }
.b-faq details { border-top: 1px solid rgba(243,239,232,.16); }
.b-faq details:last-child { border-bottom: 1px solid rgba(243,239,232,.16); }
.b-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3rem 1fr 2rem; gap: var(--b-16); align-items: baseline; padding-block: var(--b-24); font-size: var(--b-lead); font-weight: 600; }
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary i { font-style: normal; font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; color: var(--gold); }
.b-faq summary b { font-weight: 400; justify-self: end; transition: transform .35s var(--b-ease); }
.b-faq details[open] summary b { transform: rotate(45deg); }
.b-faq details p { padding: 0 0 var(--b-24) 4rem; font-size: var(--b-body); line-height: 1.55; max-width: 60ch; opacity: .8; }
@media (max-width: 640px) { .b-faq details p { padding-left: 0; } }

/* ── 10 CTA ──────────────────────────────────── */
.b-cta { padding-block: 0; }
.b-cta .cta__inner { width: min(100% - 2 * var(--b-rand), var(--b-max)); }
.b-cta .cta__title { text-transform: none; letter-spacing: -.02em; text-wrap: balance; max-width: 14ch; margin-inline: auto; }

/* ── HOME: hero met de video over het hele scherm ── */
.h-hero { position: relative; min-height: 100svh; background: var(--green-dark); color: var(--cream); display: grid; align-items: center; overflow: hidden; }
.h-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; will-change: transform; }
.h-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,24,15,.9) 0%, rgba(12,24,15,.7) 45%, rgba(12,24,15,.25) 100%); }
.h-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--b-goot); padding: 8rem 0 var(--b-64); }
.h-hero__inhoud { grid-column: 1 / 9; }
.h-hero__inhoud .b-h1 { margin-top: var(--b-16); max-width: 13ch; }
.h-hero__sub { margin-top: var(--b-24); }
.h-hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-16) var(--b-32); margin-top: var(--b-32); }
.h-hero__tellers { display: flex; flex-wrap: wrap; gap: var(--b-16) var(--b-48); margin-top: var(--b-48); padding-top: var(--b-24); border-top: 1px solid rgba(243,239,232,.18); max-width: 44rem; }
.h-hero__tellers > div { max-width: 12rem; }
.h-hero__tellers strong { display: block; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.h-hero__tellers span { display: block; margin-top: var(--b-8); font-size: var(--b-label); letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
@media (max-width: 899px) { .h-hero__grid { display: block; padding: 6rem 0 var(--b-48); } .h-hero__scrim { background: linear-gradient(180deg, rgba(12,24,15,.55), rgba(12,24,15,.9)); } }

/* ── ingangen als panelen: prijs en knop in de rechterkolom ── */
.b-prijs { display: block; margin-top: var(--b-24); font-size: var(--b-lead); font-weight: 600; }
.b-prijs small { display: block; font-size: var(--b-label); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; opacity: .62; margin-top: var(--b-8); }
.b-sys__paneel .b-btn { margin-top: var(--b-24); }
.b-sys__paneel .b-lijstje { list-style: none; margin-top: var(--b-24); display: grid; gap: var(--b-8); }
.b-sys__paneel .b-lijstje li { padding-left: 1.4rem; position: relative; font-size: var(--b-body); opacity: .85; }
.b-sys__paneel .b-lijstje li::before { content: ""; position: absolute; left: 0; top: .6rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold); }

/* ── Care: één regel onder de ingangen ── */
.b-care { background: var(--cream); color: var(--green-dark); padding-block: var(--b-48); border-bottom: 1px solid rgba(12,24,15,.12); }
.b-care .b-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-16) var(--b-32); }
.b-care p { font-size: var(--b-lead); max-width: 40ch; }
.b-care a { text-decoration: underline; text-underline-offset: .2em; }

/* ── reviews en journal: de componenten van de site, binnen het raster ── */
.b-reviews { background: var(--cream); color: var(--green-dark); padding-block: var(--b-y); overflow: hidden; }
.b-reviews .b-grid { margin-bottom: var(--b-48); }
.b-reviews .b-faq { margin-top: var(--b-y); }
.b-reviews .b-faq details { border-color: rgba(12,24,15,.14); }
.b-reviews .b-faq summary i { color: var(--b-groen-mid); }
.b-journal { background: var(--green-dark); color: var(--cream); padding-block: var(--b-y); }
.b-journal .b-grid { margin-bottom: var(--b-48); }

/* klantenmarquee in de mockups: dezelfde afstand als op de site, ook op grote schermen */
.b-gids .clients, .h-hero + .clients { padding-block: var(--b-32); }

/* ── niveaus naast elkaar: twee kaarten, geen schakelaar ── */
.b-kaarten { display: grid; grid-template-columns: 1fr; gap: var(--b-24); margin-top: var(--b-64); }
@media (min-width: 900px) { .b-kaarten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .b-kaarten--een { grid-template-columns: 1fr; }
  .b-kaarten--een .b-kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto auto auto auto 1fr; column-gap: var(--b-64); padding: var(--b-48, 3rem); }
  .b-kaarten--een .b-kaart > * { grid-column: 1; }
  .b-kaarten--een .b-kaart__lijst { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
  .b-kaarten--een .b-kaart .b-btn { align-self: end; justify-self: start; }
}
.b-kaart { display: flex; flex-direction: column; padding: var(--b-32); border: 1px solid rgba(243,239,232,.22); border-radius: var(--b-16); background: rgba(12,24,15,.55); backdrop-filter: blur(6px); }
.b-kaart--partner { border-color: var(--gold); background: rgba(12,24,15,.8); }
.b-kaart__naam { font-size: var(--b-h2); font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-top: var(--b-16); }
.b-kaart__prijs { margin-top: var(--b-16); font-size: clamp(2.25rem, 3.4vw, 3.25rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.b-kaart__prijs small { display: block; font-size: var(--b-label); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; opacity: .62; margin-top: var(--b-8); }
.b-kaart .b-body { margin-top: var(--b-16); min-height: 3.2em; }
.b-kaart__lijst { list-style: none; margin-top: var(--b-24); flex: 1; }
.b-kaart__lijst li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--b-16); padding-block: var(--b-16); border-top: 1px solid rgba(243,239,232,.14); font-size: var(--b-body); line-height: 1.45; }
.b-kaart__lijst li:last-child { border-bottom: 1px solid rgba(243,239,232,.14); }
.b-kaart__lijst b { font-weight: 600; font-size: var(--b-label); letter-spacing: .08em; text-transform: uppercase; opacity: .6; padding-top: .2rem; }
.b-kaart__lijst em { font-style: normal; font-weight: 600; color: var(--gold); }
.b-kaart .b-btn { margin-top: var(--b-32); align-self: flex-start; }
@media (max-width: 640px) { .b-kaart__lijst li { grid-template-columns: 5.5rem 1fr; } }

/* ── add-ons: één tarieflijst, één regel per post ── */
.b-tarief { list-style: none; }
.b-tarief li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--b-24); padding-block: var(--b-16); border-bottom: 1px solid rgba(243,239,232,.2); font-size: var(--b-lead); }
.b-tarief li:first-child { border-top: 1px solid rgba(243,239,232,.2); }
.b-tarief b { font-weight: 700; color: var(--gold); white-space: nowrap; }
.b-fit2 { display: grid; grid-template-columns: 1fr; gap: var(--b-32); }
@media (min-width: 640px) { .b-fit2 { grid-template-columns: 1fr 1fr; } }
.b-fit2 h3 { font-size: var(--b-lead); font-weight: 600; }
.b-fit2 ul { list-style: none; margin-top: var(--b-16); }
.b-fit2 li { padding: var(--b-8) 0 var(--b-8) 1.75rem; position: relative; font-size: var(--b-body); opacity: .85; }
.b-fit2 li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gold); }
.b-fit2 .nee li::before { background: transparent; border: 1px solid var(--gold); }

/* ── tablet en telefoon: geen stapel, wel dezelfde inhoud ── */
@media (min-width: 900px) and (max-width: 1100px) {
  .b-hero__tellers > div { max-width: none; flex: 1 1 0; }
}
@media (max-width: 899px) {
  .b-hero__tellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b-16); max-width: none; }
  .b-hero__tellers > div { max-width: none; }
  .b-hero__tellers strong { font-size: 1.75rem; }
  .b-hero__tellers span { font-size: .7rem; letter-spacing: .04em; }
  .b-antwoord { height: 150vh; }
  /* het systeem: vijf blokken onder elkaar, foto boven, tekst eronder */
  .b-sys { background: var(--green-dark); color: var(--cream); padding-block: var(--b-y); }
  .b-sys__paneel { position: static; height: auto; display: block; padding: 0; overflow: visible; background: transparent; transform: none !important; }
  .b-sys__paneel + .b-sys__paneel { margin-top: var(--b-48); padding-top: var(--b-48); border-top: 1px solid rgba(243,239,232,.14); }
  .b-sys__foto { position: relative; inset: auto; width: min(100% - 2 * var(--b-rand), var(--b-max)); height: auto; aspect-ratio: 16 / 10; margin-inline: auto; border-radius: var(--b-8); display: block; transform: none !important; }
  .b-sys__scrim, .b-sys__dim { display: none; }
  .b-sys__paneel .b-grid { margin-top: var(--b-24); row-gap: var(--b-16); }
  .b-sys__paneel .b-ico { margin-bottom: var(--b-16); }
  .b-sys__teller { display: none; }
  /* kaarten: label boven de tekst, minder rand */
  .b-kaart { padding: var(--b-24); }
  .b-kaart__lijst li { grid-template-columns: 1fr; gap: var(--b-8); }
}

/* ── liggende tablet (900 tot 1180 px): stapel blijft, tekst hoger in het paneel ── */
@media (min-width: 900px) and (max-width: 1180px) {
  .b-sys__paneel { align-content: start; padding-top: clamp(6rem, 16vh, 9rem); }
  .b-sys__paneel .b-grid { align-items: start; }
  .b-sys__paneel .b-lead { max-width: 30ch; }
  .b-hero__tellers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b-16); }
  .b-hero__tellers > div { max-width: none; }
  .b-hero__tekst { grid-column: 1 / 8; }
  .b-hero__ringwrap { grid-column: 8 / 13; }
}

/* ── DIENSTEN § 01: het SIRCLE-model bovenaan, schermvullend ── */
.m-hero { position: relative; min-height: 100svh; background: var(--green-dark); color: var(--cream); display: grid; align-items: center; overflow: hidden; }
.m-hero__bg { opacity: 1; }
.m-hero__scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(6,20,10,.94) 0%, rgba(6,20,10,.84) 42%, rgba(6,20,10,.45) 72%, rgba(6,20,10,.6) 100%); }
@media (max-width: 899px) { .m-hero__scrim { background: linear-gradient(180deg, rgba(6,20,10,.9) 0%, rgba(6,20,10,.82) 55%, rgba(6,20,10,.5) 100%); } }
.m-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--b-goot); align-items: center; padding: 7rem 0 var(--b-48); }
.m-hero__inhoud { grid-column: 1 / -1; }
.m-hero__inhoud .b-h1 { margin-top: var(--b-16); max-width: 13ch; }
.m-hero__sub { margin-top: var(--b-24); }
.m-hero__nav { margin-top: var(--b-32); display: flex; flex-direction: column; border-top: 1px solid rgba(243,239,232,.18); max-width: 34rem; }
.m-hero__nav a { display: grid; grid-template-columns: 2.5rem 8.5rem 1fr; align-items: baseline; gap: var(--b-16); padding: .8rem 0; border-bottom: 1px solid rgba(243,239,232,.18); transition: padding-left .4s var(--b-ease), color .3s; }
.m-hero__nav a:hover { padding-left: var(--b-8); }
.m-hero__nav .b-nr { color: var(--gold); }
.m-hero__nav strong { font-size: var(--b-body); font-weight: 600; }
.m-hero__nav span:last-child { font-size: var(--b-label); letter-spacing: .04em; opacity: .62; }
.m-hero__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b-16) var(--b-32); margin-top: var(--b-32); }
.m-hero__model { position: relative; grid-column: 1 / -1; margin: var(--b-32) auto 0; width: min(100%, 22rem); aspect-ratio: 1; }
.m-hero__model img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .5s var(--b-ease); }
.m-hero__model img[data-fase] { opacity: 0; }
.m-hero__model[data-aan="01"] img[data-fase="01"], .m-hero__model[data-aan="02"] img[data-fase="02"], .m-hero__model[data-aan="03"] img[data-fase="03"], .m-hero__model[data-aan="04"] img[data-fase="04"] { opacity: 1; }
@media (min-width: 900px) {
  .m-hero__inhoud { grid-column: 1 / 7; }
  .m-hero__model { grid-column: 8 / 13; margin: 0; width: 100%; }
}
@media (max-width: 899px) { .m-hero { min-height: 0; } .m-hero__grid { padding: 6.5rem 0 var(--b-48); } }

/* ── DIENSTEN § 03 tot § 06: per fase kop, dienstenregels, één case ── */
.f-fase { padding-block: var(--b-y); overflow: hidden; }
.f-fase[data-theme="light"] { background: var(--cream); color: var(--green-dark); }
.f-fase[data-theme="dark"] { background: var(--green-dark); color: var(--cream); }
.f-fase .b-bg { opacity: .4; }
.f-fase .b-h2 { margin-top: var(--b-16); }
.f-fase__prijs { margin-top: var(--b-24); font-size: var(--b-body); font-weight: 600; }
.f-fase__prijs small { display: block; font-weight: 400; opacity: .65; margin-top: var(--b-8); max-width: 44ch; }
.f-fase .b-btn { margin-top: var(--b-24); }
.f-fase__acties { display: flex; flex-wrap: wrap; gap: var(--b-16); }
.f-diensten { list-style: none; margin-top: var(--b-64); }
.f-diensten li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--b-24); row-gap: var(--b-8); align-items: start; padding-block: var(--b-24); border-top: 1px solid currentColor; }
.f-diensten li:last-child { border-bottom: 1px solid currentColor; }
.f-fase[data-theme="light"] .f-diensten li { border-color: rgba(12,24,15,.14); }
.f-fase[data-theme="dark"] .f-diensten li { border-color: rgba(243,239,232,.18); }
.f-diensten h3 { font-size: var(--b-lead); font-weight: 600; line-height: 1.25; align-self: center; }
.f-diensten p { grid-column: 2; font-size: var(--b-body); line-height: 1.5; opacity: .75; max-width: 56ch; }
@media (min-width: 900px) {
  .f-diensten li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--b-goot); align-items: center; }
  .f-diensten .b-ico { grid-column: 1 / 2; }
  .f-diensten h3 { grid-column: 2 / 6; }
  .f-diensten p { grid-column: 7 / 13; max-width: none; }
}
.f-case { display: grid; grid-template-columns: 1fr; gap: var(--b-24); align-items: center; margin-top: var(--b-64); padding: var(--b-24); border-radius: var(--b-16); border: 1px solid currentColor; transition: background .4s; }
.f-fase[data-theme="light"] .f-case { border-color: rgba(12,24,15,.14); } .f-fase[data-theme="light"] .f-case:hover { background: rgba(12,24,15,.04); }
.f-fase[data-theme="dark"] .f-case { border-color: rgba(243,239,232,.18); } .f-fase[data-theme="dark"] .f-case:hover { background: rgba(243,239,232,.05); }
.f-case figure { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--b-8); overflow: hidden; }
.f-case figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--b-ease); }
.f-case:hover figure img { transform: scale(1.04); }
.f-case h3 { font-size: var(--b-h2); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; margin-top: var(--b-8); }
.f-case p { margin-top: var(--b-16); font-size: var(--b-body); line-height: 1.5; opacity: .8; max-width: 44ch; }
.f-case__lees { display: inline-flex; align-items: center; gap: var(--b-16); margin-top: var(--b-24); font-size: var(--b-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.f-case:hover .b-btn__c { transform: rotate(45deg); }
@media (min-width: 900px) {
  .f-case { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--b-goot); padding: var(--b-32); }
  .f-case figure { grid-column: 1 / 7; }
  .f-case > div { grid-column: 8 / 13; }
}

/* ── DIENSTEN § 07: FAQ op crème ── */
.f-faq { background: var(--cream); color: var(--green-dark); padding-block: var(--b-y); }
.f-faq .b-faq details, .f-faq .b-faq details:last-child { border-color: rgba(12,24,15,.14); }
.f-faq .b-faq summary i { color: var(--b-groen-mid); }

/* ── bewijs dicht bij de prijs: één regel met de VLIJT-meting ── */
.b-niv__bewijs { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: var(--b-24); align-items: center; margin-top: var(--b-32); padding: var(--b-16); border: 1px solid rgba(242,226,164,.45); border-radius: var(--b-16); transition: background .4s; }
.b-niv__bewijs:hover { background: rgba(243,239,232,.05); }
.b-niv__bewijs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border-radius: var(--b-8); display: block; }
.b-niv__bewijs p { font-size: var(--b-body); line-height: 1.5; opacity: .88; max-width: 64ch; }
.b-niv__bewijs b { color: var(--gold); font-weight: 600; }
.b-niv__bewijs:hover .b-btn__c { transform: rotate(45deg); }
@media (max-width: 599px) { .b-niv__bewijs { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; } .b-niv__bewijs .b-btn__c { display: none; } }


/* ── HET GROEITRAJECT ─────────────────────────── */
/* De sectie heeft een achtergrondbeeld. home.css zet dan overflow: hidden,
   en daarmee plakt de baan niet meer. clip knipt wel af, maar maakt er geen
   scrollcontainer van. Het id wint van de :has-regel in home.css. */
#groeitraject { overflow: clip; }
@supports not (overflow: clip) { #groeitraject { overflow: visible; } }

.gt__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
}
.gt__lead { font-size: var(--t-large); line-height: 1.45; max-width: 36rem; opacity: .9; }
.gt__feiten {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.gt__feiten strong {
  display: block;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.gt__feiten span {
  display: block;
  margin-top: .6rem;
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
}

/* de baan: vijf onderdelen en het bewijs, van links naar rechts */
.gt__baan { position: relative; margin-top: var(--head-gap); z-index: 1; }
.gt__plak { position: relative; }
.gt__spoor {
  --rand: calc((100vw - var(--container)) / 2);
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--rand);
}
.gt__deel, .gt__bewijs { flex: none; width: clamp(17rem, 29vw, 34rem); }
/* home.css geeft elk article de sectiekleur; hier moet het verloop erdoor */
.gt__deel { background: none; }
.gt__deel figure {
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(6, 20, 10, .6);
}
.gt__deel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt__nr {
  display: block;
  margin-top: 1.5rem;
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.gt__deel h3 {
  margin-top: .6rem;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.gt__deel p { margin-top: .75rem; font-size: var(--t-body); line-height: 1.5; opacity: .75; max-width: 30rem; }

.gt__bewijs {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(6, 20, 10, .55);
  transition: background var(--dur-fast) var(--ease);
}
.gt__bewijs:hover { background: rgba(6, 20, 10, .8); }
.gt__bewijs .gt__nr { margin-top: 0; }
.gt__bewijs strong {
  display: block;
  margin-top: 1rem;
  font-size: clamp(3rem, 5.5vw, 5.25rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--gold);
}
.gt__bewijs p { margin-top: 1rem; font-size: var(--t-body); line-height: 1.5; opacity: .85; }
.gt__lees {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.75rem;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.gt__bewijs:hover .btn__circle { transform: rotate(45deg); }

.gt__voortgang { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.gt__teller { font-size: var(--t-label); letter-spacing: .12em; font-variant-numeric: tabular-nums; opacity: .7; white-space: nowrap; }
.gt__lijn { position: relative; flex: 1; height: 1px; background: var(--line); }
.gt__lijn span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(.05);
}

/* desktop: de baan plakt en schuift mee met het scrollen (js zet .is-plak) */
.gt__baan.is-plak .gt__plak {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.gt__baan.is-plak .gt__spoor { width: max-content; will-change: transform; }
.gt__baan.is-plak .gt__deel figure img { width: 116%; max-width: none; margin-left: -8%; }

/* telefoon, tablet en zonder animatie: een baan om te vegen */
.gt__baan:not(.is-plak) .gt__spoor {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.gt__baan:not(.is-plak) .gt__spoor::-webkit-scrollbar { display: none; }
.gt__baan:not(.is-plak) .gt__deel,
.gt__baan:not(.is-plak) .gt__bewijs { scroll-snap-align: start; width: min(80vw, 24rem); }

/* de twee pakketten */
.gt__prijzen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.75rem);
  margin-top: clamp(4.5rem, 9vw, 9rem);
}
.gt__kaart {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 20, 10, .5);
  backdrop-filter: blur(6px);
}
.gt__kaart--partner { border-color: var(--gold); background: rgba(6, 20, 10, .72); }
.gt__prijzen--een { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .gt__prijzen--een .gt__kaart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
  .gt__prijzen--een .gt__kaart > * { grid-column: 1; }
  .gt__prijzen--een .gt__kaart ul { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
  .gt__prijzen--een .gt__kaart .btn { align-self: end; justify-self: start; }
}
.gt__label { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.gt__kaart h3 { margin-top: .75rem; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; text-transform: uppercase; line-height: 1; }
.gt__prijs { margin-top: 1rem; font-size: clamp(2.5rem, 4.4vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gt__prijs small { display: block; margin-top: .6rem; font-size: var(--t-label); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.gt__zin { margin-top: 1rem; font-size: var(--t-body); line-height: 1.5; opacity: .75; min-height: 3em; }
.gt__kaart ul { list-style: none; margin-top: 1.5rem; flex: 1; }
.gt__kaart li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .9rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-body);
  line-height: 1.45;
}
.gt__kaart li:last-child { border-bottom: 1px solid var(--line); }
.gt__kaart li b { font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; padding-top: .2rem; }
.gt__kaart em { font-style: normal; font-weight: 600; color: var(--gold); }
.gt__kaart .btn { align-self: flex-start; margin-top: 2rem; }
.gt__voet { margin-top: 2rem; font-size: var(--t-body); line-height: 1.5; opacity: .72; max-width: 62rem; }
.gt__voet strong { font-weight: 600; }

/* ── DE QUICKSCAN ─────────────────────────────── */
/* de kaart plakt naast de tekst; daarvoor mag de sectie niet hidden afknippen */
#quickscan { overflow: clip; }
@supports not (overflow: clip) { #quickscan { overflow: visible; } }
.gc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.gc__lead { margin-top: 1.75rem; font-size: var(--t-large); line-height: 1.45; max-width: 34rem; opacity: .85; }

/* het pdf-voorbeeld: zo ziet de quickscan eruit */
.gc__papier { position: relative; margin-top: clamp(2.5rem, 4.5vw, 4rem); margin-left: 1rem; width: min(100% - 2rem, 25rem); }
.gc__vel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border-radius: .5rem;
  background: var(--warm-white);
  color: var(--green-dark);
  box-shadow: 0 34px 70px -34px rgba(6, 20, 10, .5), 0 2px 6px rgba(6, 20, 10, .08);
  transform: rotate(-3deg);
}
.gc__vel--voor { position: relative; min-height: 31rem; }
.gc__vel--achter { background: #E9E2D6; transform: rotate(3.5deg) translate(1rem, .5rem); }
.gc__vel-kop { display: flex; align-items: center; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid rgba(12, 24, 15, .12); }
.gc__vel-kop img { height: 1.3rem; width: auto; }
.gc__vel-kop span { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gc__vel-voor { margin-top: 1.2rem; }
.gc__vel-voor small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.gc__vel-voor b { display: block; margin-top: .3rem; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc__vel-lijst { list-style: none; margin-top: 1rem; }
.gc__vel-lijst li { display: grid; grid-template-columns: 1.7rem 6.2rem minmax(0, 1fr); align-items: center; gap: .5rem; padding-block: .55rem; border-bottom: 1px solid rgba(12, 24, 15, .1); font-size: .82rem; }
.gc__vel-lijst span { font-size: .64rem; font-weight: 600; letter-spacing: .1em; color: #3F6F45; }
.gc__vel-lijst b { font-weight: 600; }
.gc__vel-lijst i { display: block; height: .42rem; border-radius: 99px; background: rgba(12, 24, 15, .12); transform-origin: left center; }
.gc__vel-lijst li:nth-child(1) i { width: 78%; } .gc__vel-lijst li:nth-child(2) i { width: 52%; }
.gc__vel-lijst li:nth-child(3) i { width: 64%; } .gc__vel-lijst li:nth-child(4) i { width: 40%; }
.gc__vel-lijst li:nth-child(5) i { width: 58%; }
.gc__vel-advies { margin-top: auto; padding: .95rem 1rem; border-radius: .4rem; background: var(--green-dark); color: var(--cream); display: grid; gap: .45rem; }
.gc__vel-advies b { font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gc__vel-advies i { display: block; height: .38rem; border-radius: 99px; background: rgba(243, 239, 232, .22); transform-origin: left center; }
.gc__vel-advies i:nth-of-type(2) { width: 86%; } .gc__vel-advies i:nth-of-type(3) { width: 58%; }

/* de kaart met de stappen */
.gc__kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 36rem;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  border-radius: calc(var(--radius) * 1.4);
  background: var(--green-dark);
  color: var(--cream);
  box-shadow: 0 40px 90px -40px rgba(6, 20, 10, .55);
  overflow: hidden;
}
.gc__kaart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/branding/gradients/gradient-1.webp") center / cover;
  opacity: .35;
  pointer-events: none;
}
.gc__kaart > * { position: relative; }
.gc [hidden] { display: none !important; }
.gc__kop { display: flex; align-items: center; gap: 1.25rem; }
.gc__stap { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; opacity: .7; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc__balk { flex: 1; height: 2px; border-radius: 2px; background: rgba(243, 239, 232, .14); overflow: hidden; }
.gc__balk span { display: block; height: 100%; width: 25%; background: var(--gold); transition: width .7s var(--ease); }

.gc__vraag { border: 0; padding: 0; margin: 2.75rem 0 0; min-width: 0; }
.gc__vraag legend, .gc__vraagkop { padding: 0; font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 700; line-height: 1.15; max-width: 20ch; }
.gc__opties { margin-top: 1.75rem; display: grid; gap: .75rem; }
.gc__opties button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.6rem;
  padding: .45rem .5rem .45rem 1.4rem;
  border: 1px solid rgba(243, 239, 232, .2);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--t-body);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.gc__opties button::after {
  content: "";
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C180F' stroke-width='1.6'%3E%3Cpath d='M5 12h14m0 0l-6-6m6 6l-6 6'/%3E%3C/svg%3E") center / 1rem no-repeat;
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.gc__opties button:hover,
.gc__opties button:focus-visible { border-color: var(--gold); background: rgba(243, 239, 232, .05); padding-left: 1.75rem; outline: none; }
.gc__opties button:hover::after,
.gc__opties button:focus-visible::after,
.gc__opties button.is-gekozen::after { transform: scale(1); }
.gc__opties button.is-gekozen { border-color: var(--gold); background: rgba(242, 226, 164, .1); }

/* de gegevens */
.gc__velden { margin-top: 1.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.gc__veld--breed { grid-column: 1 / -1; }
.gc__veld span { display: block; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.gc__veld input {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid rgba(243, 239, 232, .28);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: var(--t-body);
  transition: border-color var(--dur-fast) var(--ease);
}
.gc__veld input::placeholder { color: rgba(243, 239, 232, .35); }
.gc__veld input:focus { outline: none; border-bottom-color: var(--gold); }
.gc__veld.is-fout input { border-bottom-color: #E8A08A; }
.gc__honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gc__fout { margin-top: 1.25rem; font-size: var(--t-body); color: #F0B9A8; }
.gc__verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.gc__verstuur .btn { margin-top: 0; }
.gc__verstuur .btn[disabled] { opacity: .6; cursor: progress; }
.gc__verstuur .gc__terug { margin-top: 0; }
.gc__akkoord { margin-top: 1.5rem; font-size: .8rem; line-height: 1.5; opacity: .55; max-width: 40rem; }
.gc__akkoord a { border-bottom: 1px solid currentColor; }

.gc__terug {
  margin-top: 1.5rem;
  padding: 0 0 .2rem;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.gc__terug:hover { opacity: 1; }

/* na het versturen */
.gc__uitkomst { margin-top: 2.75rem; }
.gc__label { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.gc__uitkomst h3 { margin-top: .75rem; font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.02; }
.gc__tekst { margin-top: 1.5rem; font-size: var(--t-large); line-height: 1.45; max-width: 34rem; }
.gc__tekst b { font-weight: 600; color: var(--gold); }
.gc__extra { margin-top: 1rem; font-size: var(--t-body); line-height: 1.5; opacity: .75; max-width: 34rem; }
.gc__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.gc__acties .btn { margin-top: 0; }

/* ── tablet en telefoon ───────────────────────── */
@media (max-width: 899px) {
  .gt__intro { grid-template-columns: 1fr; gap: 2rem; }
  .gt__feiten { gap: 1rem; }
  .gt__prijzen { grid-template-columns: 1fr; }
  .gt__kaart li { grid-template-columns: 1fr; gap: .25rem; }
  .gc__grid { grid-template-columns: 1fr; }
  .gc__kaart { min-height: 0; }
  .gc__papier { width: min(100% - 2.5rem, 17rem); margin: 2.5rem auto 3.5rem; }
  .gc__vel--voor { min-height: 0; }
  .gc__vel-advies { margin-top: 1.25rem; }
  .gc__velden { grid-template-columns: 1fr; }
}

/* ── AFSPRAAKKEUZE: groeicheck of kennismaking ── */
.afspraak { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: var(--b-16); }
.afspraak[hidden] { display: none; }
.afspraak__achter { position: absolute; inset: 0; background: rgba(6, 20, 10, .62); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--b-ease); }
.afspraak__paneel { position: relative; width: min(100%, 52rem); max-height: calc(100svh - 2rem); overflow: auto; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.5rem; background: var(--green-dark); color: var(--cream); border: 1px solid rgba(242, 226, 164, .22); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .35s var(--b-ease), transform .5s var(--b-ease); }
.afspraak.is-open .afspraak__achter { opacity: 1; }
.afspraak.is-open .afspraak__paneel { opacity: 1; transform: none; }
.afspraak__sluit { position: absolute; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(243, 239, 232, .22); background: none; cursor: pointer; }
.afspraak__sluit span { position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.5px; background: var(--cream); }
.afspraak__sluit span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .afspraak__sluit span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.afspraak__label { font-size: var(--b-label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.afspraak__kop { margin-top: .75rem; font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; max-width: 16ch; }
.afspraak__opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.afspraak__optie { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1rem; border: 1px solid rgba(243, 239, 232, .18); background: rgba(243, 239, 232, .03); transition: border-color .3s, background .3s, transform .4s var(--b-ease); }
.afspraak__optie:first-child { border-color: rgba(242, 226, 164, .55); }
.afspraak__optie:hover, .afspraak__optie:focus-visible { border-color: var(--gold); background: rgba(242, 226, 164, .07); transform: translateY(-2px); outline: none; }
.afspraak__duur { font-size: var(--b-label); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.afspraak__optie strong { margin-top: .5rem; font-size: 1.6rem; font-weight: 700; }
.afspraak__tekst { margin-top: .6rem; font-size: 1rem; line-height: 1.5; opacity: .8; flex: 1; }
.afspraak__knop { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.5rem; font-size: var(--b-label); letter-spacing: .1em; text-transform: uppercase; }
.afspraak__optie:hover .btn__circle { transform: rotate(45deg); }
.afspraak__voet { margin-top: 1.5rem; font-size: .95rem; opacity: .75; }
.afspraak__voet a { border-bottom: 1px solid currentColor; }
html.afspraak-open { overflow: hidden; }
@media (max-width: 640px) { .afspraak { align-items: end; padding: 0; } .afspraak__paneel { border-radius: 1.5rem 1.5rem 0 0; max-height: 92svh; } .afspraak__opties { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .afspraak__paneel, .afspraak__achter { transition: none; } }

/* ── contact: de twee afspraken naast de tekst ── */
.ct-keuze { display: grid; gap: .75rem; max-width: 34rem; }
.ct-keuze__optie { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.1rem 1.1rem 1.1rem 1.4rem; border-radius: 1rem; border: 1px solid rgba(243, 239, 232, .2); background: rgba(243, 239, 232, .04); transition: border-color .3s, background .3s; }
.ct-keuze__optie:first-child { background: var(--cream); color: var(--green-dark); border-color: var(--cream); }
.ct-keuze__optie:first-child .btn__circle { background: var(--green-dark); color: var(--gold); }
.ct-keuze__optie:hover { border-color: var(--gold); }
.ct-keuze__optie:hover .btn__circle { transform: rotate(45deg); }
.ct-keuze__tekst b { display: block; font-size: 1.15rem; font-weight: 700; }
.ct-keuze__tekst span { display: block; margin-top: .25rem; font-size: .95rem; opacity: .75; line-height: 1.4; }
.ct-keuze .btn__circle { flex: none; }
.ct-noot { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; max-width: 34rem; }
.ct-noot__avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; border: 1px solid rgba(242, 226, 164, .4); }
.ct-noot__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-noot .ct-boek__noot { margin: 0; font-size: .95rem; opacity: .75; }

/* ── BRUG: van film of website naar het groeitraject ── */
.brug__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.brug__tekst { margin-top: 1.5rem; font-size: var(--t-large); line-height: 1.45; max-width: 34rem; opacity: .88; }
.brug__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.brug__kaarten--een { grid-template-columns: 1fr; }
.brug__kaart { display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(6, 20, 10, .5); transition: border-color .3s, transform .4s var(--ease); }
.brug__kaart--goud { border-color: var(--gold); }
.brug__kaart:hover { border-color: var(--gold); transform: translateY(-3px); }
.brug__kaart span { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.brug__kaart strong { margin-top: .6rem; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 700; text-transform: uppercase; }
.brug__kaart b { margin-top: .75rem; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.brug__kaart b small { font-size: var(--t-label); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.brug__kaart em { margin-top: 1rem; font-style: normal; font-size: var(--t-body); line-height: 1.5; opacity: .75; }
@media (max-width: 899px) { .brug__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .brug__kaarten { grid-template-columns: 1fr; } }

/* het resultaat bij VLIJT: foto, groot getal */
.gt__bewijs { position: relative; overflow: hidden; }
.gt__bewijs > *:not(.gt__bewijs-foto) { position: relative; }
.gt__bewijs-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; transition: opacity .5s, transform 1.2s var(--ease); }
.gt__bewijs::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,10,.3), rgba(6,20,10,.92) 60%); z-index: 0; }
.gt__bewijs:hover .gt__bewijs-foto { opacity: .38; transform: scale(1.04); }
.gt__eenheid { display: block; margin-top: .35rem; font-size: var(--t-large); font-weight: 600; }

/* ── OOK LOS: diensten als prijslijst, beeld bij hover ── */
.los__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
.los__lead { margin-top: 1.5rem; font-size: var(--t-large); line-height: 1.45; max-width: 30rem; opacity: .85; }
.los__lijst { list-style: none; border-top: 1px solid var(--line); }
.los__rij { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto 2.6rem; align-items: center; gap: 1.25rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease); }
.los__rij:hover { padding-left: .75rem; }
.los__nr { font-size: var(--t-label); letter-spacing: .1em; color: #3F6F45; }
.los__duim { display: none; }
.los__tekst strong { display: block; font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.los__tekst span { display: block; margin-top: .4rem; font-size: var(--t-body); line-height: 1.45; opacity: .72; max-width: 34rem; }
.los__prijs { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: .45rem .8rem; border-radius: 99px; border: 1px solid var(--line); }
.los__pijl { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--green-dark); color: var(--gold); transition: transform .3s var(--ease); }
.los__pijl svg { width: 1rem; height: 1rem; }
.los__rij:hover .los__pijl { transform: rotate(45deg); }
.los__zweef { position: fixed; left: 0; top: 0; z-index: 40; width: 17rem; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .25s, transform .35s var(--ease); box-shadow: 0 30px 60px -30px rgba(6,20,10,.6); }
.los__zweef.aan { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.los__zweef img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
  .los__grid { grid-template-columns: 1fr; }
  .los__rij { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem 1rem; }
  .los__nr, .los__pijl { display: none; }
  .los__duim { display: block; grid-row: span 2; width: 4.5rem; height: 4.5rem; border-radius: .75rem; object-fit: cover; }
  .los__prijs { justify-self: start; }
  .los__zweef { display: none; }
}

/* ── gratis quickscan als band op film, websites en care ── */
.qsb__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
.qsb__tekst { margin: 1.5rem 0 0; font-size: var(--t-large); line-height: 1.45; max-width: 34rem; opacity: .85; }
.qsb .btn { margin-top: 2rem; }
.qsb__papier { position: relative; width: min(100% - 2rem, 21rem); margin-inline: auto; transform: rotate(2deg); }
.qsb__papier .gc__vel--voor { min-height: 26rem; }
@media (max-width: 899px) { .qsb__grid { grid-template-columns: 1fr; } .qsb__papier { width: min(100% - 2.5rem, 16rem); } .qsb__papier .gc__vel--voor { min-height: 0; } .qsb__papier .gc__vel-advies { margin-top: 1.25rem; } }

/* ── mockups in de baan: Pijplijn (bord met aanvragen) en Dashboard (grafiek en bronnen) ── */
.gt__mockfig { display: grid; place-items: center; padding: 5% 6%; background: radial-gradient(120% 90% at 80% 0%, #2d4a33 0%, #10200f 60%, #0a150c 100%); }
.gt__baan.is-plak .gt__deel figure .mp, .gt__baan.is-plak .gt__deel figure .md { width: 100%; margin: 0; max-width: none; }
.mp, .md { position: relative; width: 100%; height: 100%; border-radius: .7rem; font-family: var(--font-sans); color: var(--cream); background: rgba(9, 18, 11, .82); border: 1px solid rgba(242, 226, 164, .16); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(243, 239, 232, .06); }
.mp { padding: .75rem; display: flex; flex-direction: column; gap: .55rem; }
.mp__kop, .md__kop { display: flex; align-items: baseline; gap: .6rem; }
.mp__kop b { font-size: .85rem; font-weight: 700; }
.mp__kop span { font-size: .55rem; opacity: .55; }
.mp__kop i, .md__kop i { margin-left: auto; font-style: normal; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); padding: .18rem .45rem; border-radius: 99px; border: 1px solid rgba(242, 226, 164, .3); }
.mp__bord { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; min-height: 0; }
.mp__kol { display: flex; flex-direction: column; gap: .35rem; padding: .4rem; border-radius: .5rem; background: rgba(243, 239, 232, .035); min-width: 0; }
.mp__kol p { display: flex; align-items: center; gap: .3rem; font-size: .52rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.mp__kol small { margin-left: auto; font-size: .5rem; opacity: .6; }
.mp__stip { width: .38rem; height: .38rem; border-radius: 50%; background: rgba(243, 239, 232, .45); }
.mp__stip--goud { background: var(--gold); } .mp__stip--groen { background: #8FAF8A; }
.mp__kaart { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .1rem .35rem; align-items: center; padding: .38rem; border-radius: .4rem; background: rgba(243, 239, 232, .07); border: 1px solid rgba(243, 239, 232, .06); }
.mp__kaart--warm { border-color: rgba(242, 226, 164, .45); background: rgba(242, 226, 164, .08); }
.mp__av { grid-row: span 2; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #3F6F45; font-size: .42rem; font-weight: 700; }
.mp__kaart b { font-size: .5rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp__kaart em { font-style: normal; font-size: .44rem; opacity: .6; }
.mp__kaart u { grid-column: 2; text-decoration: none; font-size: .5rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.mp__melding { position: absolute; right: -4%; bottom: 12%; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: .6rem; background: var(--cream); color: var(--green-dark); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .7); animation: mp-in 5s var(--ease) infinite; }
.mp__melding b { display: block; font-size: .56rem; } .mp__melding em { font-style: normal; font-size: .46rem; opacity: .65; }
.mp__puls { position: relative; width: .55rem; height: .55rem; border-radius: 50%; background: #3F6F45; }
.mp__puls::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3F6F45; animation: mp-puls 1.8s ease-out infinite; }
@keyframes mp-puls { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes mp-in { 0%, 8% { transform: translateY(12px); opacity: 0; } 16%, 86% { transform: none; opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
.md { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); overflow: hidden; }
.md__zij { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding-top: .8rem; border-right: 1px solid rgba(243, 239, 232, .07); background: rgba(243, 239, 232, .02); }
.md__zij i { width: .7rem; height: .7rem; border-radius: .2rem; background: rgba(243, 239, 232, .16); }
.md__zij i.aan { background: var(--gold); }
.md__hoofd { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.md__kop small { display: block; font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.md__kop b { display: block; margin-top: .15rem; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.md__kop b em { font-style: normal; font-size: .55rem; font-weight: 600; color: #8FAF8A; vertical-align: middle; }
.md__grafiek { width: 100%; height: 3.6rem; display: block; }
.md__lijn { stroke-dasharray: 420; stroke-dashoffset: 0; animation: md-teken 4.5s var(--ease) infinite; }
@keyframes md-teken { 0% { stroke-dashoffset: 420; } 35%, 100% { stroke-dashoffset: 0; } }
.md__maanden { display: flex; justify-content: space-between; font-size: .44rem; opacity: .45; }
.md__onder { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin-top: .25rem; padding-top: .45rem; border-top: 1px solid rgba(243, 239, 232, .07); }
.md__ring { position: relative; width: 2.6rem; height: 2.6rem; }
.md__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.md__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .5rem; }
.md__bron { list-style: none; display: grid; gap: .15rem; font-size: .48rem; }
.md__bron li { display: flex; align-items: center; gap: .3rem; } .md__bron span { margin-left: auto; opacity: .7; }
.md__bron i { width: .4rem; height: .4rem; border-radius: .1rem; }
.md__cpa small { display: block; font-size: .44rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.md__cpa b { font-size: .85rem; color: var(--gold); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .mp__melding, .mp__puls::after, .md__lijn { animation: none; } }

.gc__optin { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.5rem; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.gc__optin input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--gold); }
.gc__optin span { opacity: .85; }

/* ── /quickscan: eigen pagina voor campagnes ── */
.qs-pagina { padding-top: clamp(8rem, 14vw, 11rem); }
.qs-krijgt__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); gap: clamp(3rem, 7vw, 8rem); align-items: start; }
@media (min-width: 900px) { .qs-krijgt__kop { position: sticky; top: 7rem; } }
.qs-krijgt__voet { margin-top: 1.5rem; font-size: var(--t-large); line-height: 1.45; max-width: 30rem; opacity: .85; }
.qs-krijgt__feiten { list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.qs-krijgt__feiten b { display: block; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1; color: var(--gold); }
.qs-krijgt__feiten span { display: block; margin-top: .5rem; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.qs-krijgt .btn { margin-top: 2.5rem; }
.qs-krijgt__lijst { list-style: none; border-top: 1px solid var(--line); }
.qs-krijgt__lijst li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.75rem 0; border-bottom: 1px solid var(--line); transition: padding-left .4s var(--ease); }
.qs-krijgt__lijst li:hover { padding-left: .6rem; }
.qs-krijgt__ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid rgba(242, 226, 164, .35); color: var(--gold); transition: background .3s, color .3s; }
.qs-krijgt__lijst li:hover .qs-krijgt__ico { background: var(--gold); color: var(--green-dark); }
.qs-krijgt__ico svg { width: 1.4rem; height: 1.4rem; }
.qs-krijgt__lijst b { display: block; font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 700; text-transform: uppercase; line-height: 1.15; padding-top: .35rem; }
.qs-krijgt__lijst p { margin-top: .5rem; font-size: var(--t-body); line-height: 1.5; opacity: .72; max-width: 34rem; }
@media (max-width: 899px) { .qs-krijgt__grid { grid-template-columns: 1fr; } .qs-krijgt__feiten { gap: 1.5rem; } }
.qs-pagina .gc__grid { align-items: start; }
@media (max-width: 899px) {
  .qs-pagina .gc__grid { row-gap: 0; }
  .qs-pagina .gc__links { display: contents; }
  .qs-pagina .gc__links > * { order: 1; }
  .qs-pagina .gc__kaart { order: 2; margin-top: 2rem; }
  .qs-pagina .gc__papier { order: 3; margin-top: 3.5rem; }
  .qs-pagina .gc__lead { font-size: 1.05rem; }
}
/* sectie met achtergrondbeeld krijgt overflow:hidden uit home.css; clip laat sticky werken */
section.section.qs-krijgt:has(> .section-bg) { overflow: clip; }
@supports not (overflow: clip) { section.qs-krijgt { overflow: visible; } }

/* Logo in de menubalk: img{max-width:100%} liet het in een krimpende flexcel wegvallen (27 sep 2026) */
.nav__logo { flex: none; }
.nav__logo-img { max-width: none; }

/* Groei-hero: zachte lichtval en fijne korrel als laag (27 sep 2026) */
.b-hero__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 60% at 74% 48%, rgba(242,226,164,.10), transparent 70%),
    radial-gradient(60% 70% at 8% 100%, rgba(63,111,69,.28), transparent 72%),
    radial-gradient(40% 45% at 30% 0%, rgba(243,239,232,.05), transparent 70%); }
.b-hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 220px 220px; }
.b-hero__grid { position: relative; z-index: 2; }

/* ── het aanbod: lichte prijskaart links, wat je krijgt rechts, vier cijfers eronder ── */
.b-aanbod { display: grid; grid-template-columns: 1fr; gap: var(--b-32); margin-top: var(--b-64); }
.b-aanbod__prijs { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: var(--b-32); border-radius: var(--b-16); background: var(--cream); color: var(--green-dark); }
.b-aanbod__prijs::before, .b-aanbod__prijs::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(12,24,15,.09); pointer-events: none; }
.b-aanbod__prijs::before { width: 34rem; height: 34rem; right: -19rem; top: -15rem; }
.b-aanbod__prijs::after { width: 22rem; height: 22rem; right: -12rem; top: -8rem; }
.b-aanbod__prijs > * { position: relative; }
.b-aanbod__naam { margin-top: var(--b-16); font-size: var(--b-h2); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.b-aanbod__bedrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b-8) var(--b-16); margin-top: var(--b-48); font-size: clamp(3.75rem, 6.4vw, 5.75rem); font-weight: 700; letter-spacing: -.045em; line-height: .88; font-variant-numeric: tabular-nums; }
.b-aanbod__bedrag small { font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.b-aanbod__totaal { margin-top: var(--b-16); font-size: var(--b-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .62; line-height: 1.5; }
.b-aanbod__zin { margin-top: var(--b-24); max-width: 28ch; font-size: var(--b-body); line-height: 1.5; }
.b-aanbod__prijs .b-btn { margin-top: var(--b-32); }
.b-aanbod__garantie { display: flex; align-items: center; gap: .6rem; align-self: stretch; margin-top: var(--b-32); padding-top: var(--b-24); border-top: 1px solid rgba(12,24,15,.14); font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.b-aanbod__garantie svg { flex: none; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.b-aanbod__inhoud > .b-label, .b-aanbod__na > .b-label { opacity: 1; color: var(--gold); }
.b-aanbod__lijst { list-style: none; margin-top: var(--b-16); }
.b-aanbod__lijst li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--b-24); align-items: start; padding-block: var(--b-24); border-top: 1px solid rgba(243,239,232,.16); }
.b-aanbod__lijst li:last-child { border-bottom: 1px solid rgba(243,239,232,.16); }
.b-aanbod__lijst .b-ico { color: var(--gold); background: rgba(242,226,164,.06); }
.b-aanbod__deel { display: block; font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.b-aanbod__deel i { font-style: normal; color: rgba(243,239,232,.55); }
.b-aanbod__deel i::before { content: "·"; margin-inline: .6em; }
.b-aanbod__lijst strong { display: block; margin-top: .4rem; font-size: clamp(1.3125rem, 1.75vw, 1.625rem); font-weight: 700; letter-spacing: -.012em; line-height: 1.18; }
.b-aanbod__lijst p { margin-top: .5rem; max-width: 48ch; font-size: var(--b-body); line-height: 1.5; color: rgba(243,239,232,.72); }
.b-aanbod__lijst p em { font-style: normal; font-weight: 600; color: var(--gold); }
.b-aanbod__tijd { margin-top: var(--b-24); font-size: var(--b-body); line-height: 1.5; color: rgba(243,239,232,.8); }
.b-aanbod__tijd b { margin-right: var(--b-16); font-size: var(--b-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.b-aanbod__na { margin-top: var(--b-64); padding-top: var(--b-32); border-top: 1px solid rgba(243,239,232,.16); }
.b-aanbod__cijfers { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-32) 0; margin-top: var(--b-32); }
.b-aanbod__cijfers li { padding-inline: var(--b-24); border-left: 1px solid rgba(243,239,232,.16); }
.b-aanbod__cijfers li:nth-child(odd) { padding-left: 0; border-left: 0; }
.b-aanbod__cijfers strong { display: block; margin-left: -.06em; font-size: clamp(2.75rem, 4.4vw, 4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.b-aanbod__na + .b-niv__voet { margin-top: var(--b-48); }
.b-aanbod__cijfers span { display: block; margin-top: var(--b-8); font-size: var(--b-body); line-height: 1.4; color: rgba(243,239,232,.72); }
@media (min-width: 900px) {
  .b-niv:has(.b-aanbod) { overflow: clip; }
  .b-aanbod { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--b-64); align-items: start; }
  .b-aanbod__prijs { position: sticky; top: 7rem; padding: var(--b-48); }
  .b-aanbod__cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .b-aanbod__cijfers li:nth-child(odd) { padding-left: var(--b-24); border-left: 1px solid rgba(243,239,232,.16); }
  .b-aanbod__cijfers li:first-child { padding-left: 0; border-left: 0; }
}