/* BFZ — Resultaten (okt 2026), in de taal van de homepage en Personal Coaching.
   Een crème intro met de Google-regel, daarna twee donkere delen met haarlijnen: de vier trajecten (cijfer links,
   film of voor/na rechts in een afgerond kader) en de reviews (cijfer links, rechtopstaand citaat rechts).
   De cijfers staan in BFZ Grotesk-kapitalen: de waarde vet, de rest licht. Ze rollen één keer op als een teller
   (js/bfz-resultaten.js); zonder JS of met reduced motion staan ze er gewoon. */

/* ---------- gedeeld ---------- */
body.v2 .res-oog {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 2vw, 28px);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: #b9885e;
}
body.v2 .res-oog::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
body.v2 .res-regel { display: block; }
body.v2 h2.res-intro__heading, body.v2 h2.res-kop__heading { margin: 0; text-align: left; }

/* ---------- intro op crème ---------- */
body.v2 .res-intro {
  --bg: #efeae3; --bg-deep: #efeae3; --fg: #171411; --fg-muted: #3d362f; --fg-faint: #6b6157; --accent-line: rgba(23, 20, 17, 0.16);
  position: relative; padding: clamp(104px, 12vw, 184px) var(--gutter); background: #efeae3; color: #171411; color-scheme: light;
}
body.v2 .res-intro ::selection { background: #171411; color: #efeae3; }
body.v2 .res-intro__inner {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start;
}
body.v2 .res-intro__kop { grid-column: 1 / 6; }
body.v2 .res-intro .res-oog { color: #9a6c45; }
body.v2 .res-intro__tekst { grid-column: 7 / -1; max-width: 60ch; }
body.v2 .res-intro__tekst p { margin: 0; font-size: 16px; line-height: 1.75; font-weight: 300; color: #4a433c; }
body.v2 .res-intro__tekst p + p { margin-top: 20px; }
body.v2 .res-intro .intro__trust { margin-top: 30px; color: #3d362f; }
@media (hover: hover) and (pointer: fine) { body.v2 .res-intro .intro__trust:hover { color: #171411; } }

/* ---------- donkere delen ---------- */
body.v2 .res-sectie {
  --res-lijn: rgba(243, 238, 231, 0.14);
  position: relative; padding: clamp(112px, 12vw, 184px) var(--gutter) clamp(48px, 6vw, 96px); background: #121010; color: #f3eee7;
}
body.v2 .res-sectie + .res-sectie { padding-top: clamp(72px, 8vw, 128px); }
body.v2 .res-sectie--reviews { padding-bottom: clamp(104px, 11vw, 168px); }
body.v2 .res-sectie__inner { max-width: var(--container); margin: 0 auto; }
body.v2 .res-kop { margin: 0 0 clamp(56px, 6vw, 96px); }

/* ---------- het cijfer: kapitalen, de waarde vet, de eenheid licht; elke regel blijft heel ---------- */
body.v2 .res-cijfer {
  margin: 0; font-family: var(--font-display); font-stretch: var(--wide, 112%); font-style: normal; font-weight: 300;
  font-size: clamp(56px, 7vw, 120px); line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase;
  color: #f3eee7; font-variant-numeric: tabular-nums lining-nums;
}
body.v2 .res-cijfer--klein { font-size: clamp(40px, 4.6vw, 76px); }
body.v2 .res-cijfer__regel { display: block; white-space: nowrap; }
body.v2 .res-cijfer__vet { font-weight: 700; }
/* de teller: elk cijfer een kolom met een strook 0-9 die naar zijn plaats rolt (zoals 'Onze club' op de homepage) */
body.v2 .res-cijfer .rol { display: inline-flex; }
body.v2 .res-cijfer .rol__k { position: relative; display: inline-block; height: 1em; overflow: visible; clip-path: inset(0 -0.12em); }
body.v2 .res-cijfer .rol__s { display: flex; flex-direction: column; will-change: transform, filter; }
body.v2 .res-cijfer .rol__s > span { display: block; height: 1em; line-height: 1; text-align: center; }
body.v2 .res-cijfer .rol__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- de vier trajecten: haarlijnrijen ---------- */
body.v2 .res-rij {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start;
  padding: clamp(32px, 3.4vw, 48px) 0 clamp(72px, 8vw, 128px); border-top: 1px solid var(--res-lijn);
  scroll-margin-top: 72px;
}
body.v2 .res-rij:last-child { padding-bottom: 0; }
body.v2 .res-rij__tekst { grid-column: 1 / 7; position: sticky; top: clamp(104px, 14vh, 150px); }
body.v2 .res-rij__nr { display: block; margin: 0 0 clamp(28px, 3vw, 44px); font-size: 11px; line-height: 1; letter-spacing: 0.12em; color: #b9885e; font-variant-numeric: tabular-nums; }
body.v2 .res-rij__wie { margin: clamp(22px, 2.2vw, 30px) 0 0; font-family: var(--font-label); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: #b5aba0; }
body.v2 .res-rij__uitleg { margin: 14px 0 0; max-width: 38ch; font-size: 15px; line-height: 1.65; font-weight: 300; color: #d6d0c8; }
body.v2 .res-rij__beeld { grid-column: 8 / -1; }

/* film van Sophie: zelfde hoogte als de voor/na-kaders (9:16 op driekwart van de breedte) */
body.v2 .res-film { position: relative; width: 75%; margin-left: auto; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #1a1714; }
body.v2 .res-film video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; cursor: pointer; }
body.v2 .res-film__geluid {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; min-height: 36px; padding: 0 15px; border: 0; border-radius: 999px;
  background: rgba(18, 16, 16, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f3eee7; cursor: pointer;
  font-family: var(--font-label); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.35s ease, color 0.35s ease;
}
@media (hover: hover) and (pointer: fine) { body.v2 .res-film__geluid:hover { background: #f3eee7; color: #171411; } }
body.v2 .res-film__geluid:focus-visible { outline: 2px solid #b49b78; outline-offset: 3px; }

/* voor/na: sleep de lijn */
body.v2 .ba { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #1a1714; isolation: isolate; }
body.v2 .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; filter: saturate(0.9) contrast(1.02); }
body.v2 .ba__img--before { clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
body.v2 .ba__line { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); z-index: 2; width: 1px; margin-left: -0.5px; background: rgba(243, 238, 231, 0.85); }
body.v2 .ba__handle {
  position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(18, 16, 16, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.7);
  transition: transform 0.3s var(--ease-cinema);
}
body.v2 .ba__handle::before, body.v2 .ba__handle::after { content: ''; width: 6px; height: 6px; border-top: 1px solid #f3eee7; border-left: 1px solid #f3eee7; }
body.v2 .ba__handle::before { transform: rotate(-45deg); }
body.v2 .ba__handle::after { transform: rotate(135deg); }
@media (hover: hover) and (pointer: fine) { body.v2 .ba:hover .ba__handle { transform: translate(-50%, -50%) scale(1.08); } }
body.v2 .ba.is-grabbing .ba__handle { transform: translate(-50%, -50%) scale(1.14); }
body.v2 .ba__tag {
  position: absolute; top: 14px; z-index: 2; padding: 7px 11px; border-radius: 999px;
  background: rgba(18, 16, 16, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-label); font-size: 9.5px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: #f3eee7;
}
body.v2 .ba__tag--before { left: 14px; }
body.v2 .ba__tag--after { right: 14px; }
body.v2 .ba__range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
body.v2 .ba:has(.ba__range:focus-visible) { outline: 2px solid #b49b78; outline-offset: 4px; }

/* ---------- reviews: cijfer links, citaat rechts, Google als bron ---------- */
body.v2 .res-reviews { margin: 0; padding: 0; }
body.v2 .res-review {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(16px, 2vw, 32px);
  margin: 0; padding: clamp(40px, 4.4vw, 64px) 0; border-top: 1px solid var(--res-lijn);
}
body.v2 .res-review__cijfer { grid-column: 1 / 7; grid-row: 1 / span 2; }
body.v2 .res-review__wat { margin: clamp(18px, 1.8vw, 24px) 0 0; font-family: var(--font-label); font-size: 11px; font-weight: 500; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: #b5aba0; }
body.v2 .res-review__tekst {
  grid-column: 7 / -1; grid-row: 1; margin: 0; max-width: 40ch; padding-top: 0.15em;
  font-family: var(--font-display); font-stretch: 100%; font-style: normal; font-weight: 300;
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.45; letter-spacing: -0.005em; color: #f3eee7; text-wrap: pretty; hanging-punctuation: first;
}
body.v2 .res-review__wie {
  grid-column: 7 / -1; grid-row: 2; margin: 24px 0 0;
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: #b5aba0;
}
body.v2 .res-review__wie .g-sterren { letter-spacing: 0.2em; }
body.v2 .res-meer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); padding-top: 22px; border-top: 1px solid var(--res-lijn); }
body.v2 a.res-meer__link {
  grid-column: 7 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-family: var(--font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #f3eee7; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 100% 1px no-repeat;
  transition: color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) { body.v2 a.res-meer__link:hover { color: #b9885e; } }
body.v2 a.res-meer__link:focus-visible { outline: 2px solid #b49b78; outline-offset: 4px; }

/* ---------- tablet en gsm ---------- */
@media (max-width: 1100px) and (min-width: 881px) {
  body.v2 .res-rij__beeld { grid-column: 7 / -1; }
  body.v2 .res-rij__tekst { grid-column: 1 / 7; }
}
@media (max-width: 880px) {
  body.v2 .res-intro { padding: 88px var(--gutter) 96px; }
  body.v2 .res-intro__inner, body.v2 .res-rij, body.v2 .res-review, body.v2 .res-meer { grid-template-columns: minmax(0, 1fr); }
  body.v2 .res-intro__kop, body.v2 .res-intro__tekst { grid-column: 1; }
  body.v2 .res-intro__tekst { margin-top: 32px; }
  body.v2 .res-sectie { padding: 96px var(--gutter) 40px; }
  body.v2 .res-sectie + .res-sectie { padding-top: 64px; }
  body.v2 .res-sectie--reviews { padding-bottom: 104px; }
  body.v2 .res-kop { margin-bottom: 48px; }
  body.v2 .res-cijfer { font-size: clamp(54px, 17vw, 84px); }
  body.v2 .res-cijfer--klein { font-size: clamp(36px, 10.4vw, 56px); }
  body.v2 .res-rij { padding: 28px 0 72px; }
  body.v2 .res-rij__tekst { grid-column: 1; position: static; }
  body.v2 .res-rij__nr { margin-bottom: 24px; }
  body.v2 .res-rij__beeld { grid-column: 1; margin-top: 36px; }
  body.v2 .res-film { width: 100%; border-radius: 12px; }
  body.v2 .ba { border-radius: 12px; }
  body.v2 .res-review { grid-template-rows: none; padding: 36px 0 44px; }
  body.v2 .res-review__cijfer, body.v2 .res-review__tekst, body.v2 .res-review__wie { grid-column: 1; grid-row: auto; }
  body.v2 .res-review__tekst { margin-top: 28px; font-size: 19px; }
  body.v2 .res-review__wie { margin-top: 20px; }
  body.v2 a.res-meer__link { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.v2 .ba__handle, body.v2 .res-film__geluid, body.v2 a.res-meer__link { transition: none; }
}