/* ============================================================================
   Evenwicht Boekhouding · demo boekhouding
   Eigen compositie bovenop scrollcraft.css (tokens + devices). Niets hier
   restylet [data-sc-*]: dat is het mechanisme.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts -- */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------- tokens -- */
:root {
  --sc-canvas:      #10161A;   /* diepe leisteen, de paginagond */
  --sc-surface:     #172127;   /* licht verhoogd vlak */
  --sc-ink:         #EAF0EE;   /* koel wit */
  --sc-ink-soft:    #9DB0B0;   /* koel grijs, getint */
  --sc-accent:      #E9B86A;   /* lamplicht */
  --sc-accent-ink:  #10161A;
  --sc-papier:      #C9D3CF;   /* papiertint, materiaalverwijzing */

  --sc-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --sc-font-text:    "Instrument Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------ skip-link -- */
.skip {
  position: fixed;
  top: var(--sc-2);
  left: var(--sc-2);
  z-index: 100;
  padding: var(--sc-2) var(--sc-4);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  border-radius: var(--sc-r-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

section[id] { scroll-margin-top: 4.5rem; }

/* ------------------------------------------------------------------ nav -- */
.bk-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--sc-z-chrome);
  display: flex;
  align-items: center;
  gap: var(--sc-5);
  height: 60px;
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 74%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sc-hairline);
}
.bk-nav__merk {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
  white-space: nowrap;
}
.bk-nav__links {
  display: flex;
  gap: var(--sc-5);
  margin-inline: auto;
}
.bk-nav__links a {
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.bk-nav__links a:hover { color: var(--sc-ink); }

/* ------------------------------------------------------------------ cta -- */
.bk-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-2);
  padding: var(--sc-3) var(--sc-5);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
  border-radius: var(--sc-r-pill);
  box-shadow: var(--sc-e1);
  transition: translate var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.bk-cta:hover { translate: 0 -2px; box-shadow: var(--sc-e2); }
.bk-link {
  color: var(--sc-hout);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.bk-link:hover { color: var(--sc-accent); }

/* ----------------------------------------------------------------- hero -- */
/* Timelapse: één doorlopende opname van zonsopgang tot avond, als losse beelden
   op een canvas, zodat scrollen vooruit en achteruit even vlot spoelt. Het
   posterbeeld is het eerste frame en blijft staan tot het canvas tekent; zonder
   JS of bij reduced motion is het de hele hero. */
.bk-tl { background: #15120E; }
.bk-tl__poster,
.bk-tl__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.bk-tl__canvas { opacity: 0; transition: opacity 0.5s ease; }
.bk-tl.is-live .bk-tl__canvas { opacity: 1; }
/* De scrim mag het bouwen niet toedekken: alleen links onder voor de tekst. */
.bk-tl .sc-scrim--lead { opacity: 0.78; }

.bk-tl__fase {
  position: absolute; z-index: var(--sc-z-copy, 20);
  left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem);
  max-width: 26rem;
  pointer-events: none;
}
.bk-tl__fase p {
  margin: var(--sc-2, 0.5rem) 0 var(--sc-2, 0.5rem);
  font-family: var(--sc-font-display, inherit);
  font-size: clamp(1.9rem, min(3.6vw, 7vh), 3.6rem);
  line-height: 1; color: #fff;
  text-wrap: balance;
}
.bk-tl__fase small {
  display: block; font-size: 1rem; line-height: 1.5;
  color: rgb(255 255 255 / 0.78);
}
.bk-tl__slot { max-width: min(40rem, 52vw); }
.bk-tl__slot .bk-hero__h1 { margin: var(--sc-3, 0.75rem) 0 var(--sc-6, 2rem); }

/* Klok en voortgang: de dag als maat, rechts onder. */
.bk-tl__klok {
  position: absolute; z-index: var(--sc-z-copy, 20);
  right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem);
  display: grid; justify-items: end; gap: 0.7rem;
  pointer-events: none;
}
.bk-tl__tijd {
  font-family: var(--sc-font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem); letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
}
.bk-tl__balk {
  position: relative; width: clamp(8rem, 14vw, 13rem); height: 2px;
  background: rgb(255 255 255 / 0.22); overflow: hidden;
}
.bk-tl__balk i {
  position: absolute; inset: 0; background: var(--sc-accent, #E8A33D);
  transform-origin: left; transform: scaleX(var(--bk-dag, 0));
}
.bk-tl__ai {
  position: absolute; z-index: var(--sc-z-copy, 20);
  right: var(--sc-gutter); bottom: 1rem; margin: 0;
  font-size: 0.68rem; letter-spacing: 0.08em;
  color: rgb(255 255 255 / 0.5);
}

.bk-hero__scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 2.2rem;
  translate: -50% 0;
  display: grid; justify-items: center; gap: 0.6rem;
  font-family: var(--sc-font-mono, ui-monospace, monospace);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
  opacity: calc(1 - clamp(0, var(--sc-p, 0) * 8, 1));
  pointer-events: none;
}
.bk-hero__scroll::after {
  content: ""; width: 1px; height: 2.6rem;
  background: linear-gradient(rgb(255 255 255 / 0.7), transparent);
  transform-origin: top;
  animation: bb-scroll 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bb-scroll {
  0%   { transform: scaleY(0); opacity: 1; }
  55%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-hero__scroll::after { animation: none; }
}
.bk-hero__copy { max-width: min(44rem, 52vw); }
/* Kop maximaal drie regels en altijd onder de menubalk, ook op lage schermen. */
.bk-hero__h1 { font-size: clamp(2.5rem, min(5.6vw, 10.5vh), 6.25rem); line-height: 0.98; }
.bk-hero__copy .sc-body { margin-top: var(--sc-4); margin-bottom: var(--sc-6); max-width: 32rem; }

/* -------------------------------------------------------------- methode -- */
#methode { padding-block-start: calc(var(--sc-section) * 0.4); }
.bk-methode__lijst {
  margin-top: var(--sc-8);
  display: grid;
  gap: var(--sc-7);
}
.bk-waarheid {
  max-width: 33rem;
  padding-left: var(--sc-4);
  border-left: 1px solid var(--sc-hairline-strong);
}
.bk-waarheid h3 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
}
.bk-waarheid h3::before {
  content: "";
  display: block;
  width: var(--sc-5);
  height: 4px;
  margin-bottom: var(--sc-3);
  background: var(--sc-hout);
  border-radius: var(--sc-r-sm);
}
.bk-waarheid:nth-child(2) { margin-left: 16%; }
.bk-waarheid:nth-child(3) { margin-left: 6%; }
.bk-waarheid:nth-child(4) { margin-left: 28%; }

/* ----------------------------------------------------------------- peak -- */
.bk-peak__f {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: opacity, transform;
}
.bk-peak__f:first-child { opacity: 1; }
.bk-peak__kop {
  position: absolute;
  left: var(--sc-gutter);
  bottom: calc(clamp(3rem, 12vh, 9rem) + 3.6rem);
  z-index: var(--sc-z-copy);
}
.bk-peak__fase {
  position: absolute;
  left: var(--sc-gutter);
  bottom: clamp(3rem, 12vh, 9rem);
  z-index: var(--sc-z-copy);
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  letter-spacing: var(--sc-track-tight);
}

/* --------------------------------------------------------------- aanpak -- */
.bk-aanpak {
  display: grid;
  place-content: center;
  gap: var(--sc-7);
  padding-inline: var(--sc-gutter);
}
.bk-aanpak__kop { max-width: 40rem; }
.bk-aanpak__inhoud {
  display: grid;
  grid-template-columns: minmax(0, 38rem) auto;
  gap: clamp(2rem, 8vw, var(--sc-9));
  align-items: center;
}
.bk-stappen {
  position: relative;
  min-height: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bk-stappen li { position: absolute; inset: 0 auto auto 0; max-width: 30rem; }
.bk-stappen h3 {
  display: flex;
  align-items: baseline;
  gap: var(--sc-3);
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-2xl);
  letter-spacing: var(--sc-track-tight);
}
.bk-stappen h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sc-hairline-strong);
}
.bk-lijn {
  position: relative;
  width: 2px;
  height: min(44vh, 420px);
  background: var(--sc-hairline);
}
.bk-lijn__vul {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(var(--sc-p, 0) * 100%);
  background: var(--sc-accent);
}
.bk-lijn__punt {
  position: absolute;
  left: 50%;
  top: calc(var(--t) * 100%);
  translate: -50% -50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sc-canvas);
  border: 2px solid var(--sc-hairline-strong);
  transition: background var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.bk-lijn__punt.is-aan {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
}

/* -------------------------------------------------------------- offerte -- */
#offerte { padding-block-start: calc(var(--sc-section) * 0.4); }
.bk-offerte { display: grid; gap: var(--sc-7); }
.sc-offerte__demo { color: var(--sc-hout); }
.bk-noscript {
  padding: var(--sc-5);
  border: 1px dashed var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
}
.bk-form { display: grid; gap: var(--sc-7); }
.bk-step { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.bk-step legend {
  display: flex;
  align-items: center;
  gap: var(--sc-3);
  padding: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
}
.bk-step legend span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: var(--sc-t-sm);
  font-weight: 600;
  color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 16%, transparent);
  border-radius: var(--sc-r-sm);
}
.bk-keuzes { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.bk-keuzes label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sc-2);
  padding: var(--sc-3) var(--sc-5);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  cursor: pointer;
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.bk-keuzes label small { color: inherit; opacity: 0.7; }
.bk-keuzes label:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.bk-keuzes label:has(input:checked) {
  color: var(--sc-ink);
  border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 12%, transparent);
}
.bk-keuzes label:has(input:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.bk-keuzes input { position: absolute; opacity: 0; pointer-events: none; }
.bk-keuzes--sm label { padding: var(--sc-2) var(--sc-4); }

.bk-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sc-4); }
.bk-slider label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.bk-slider output {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bk-slider input[type="range"] { width: 100%; height: 28px; }

.bk-naar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); }
.bk-naar label { display: block; margin-bottom: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.bk-naar input {
  width: 100%;
  padding: var(--sc-3) var(--sc-4);
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-md);
}
.bk-naar input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 60%, transparent); }

.bk-uitkomst {
  display: grid;
  gap: var(--sc-3);
  padding-top: var(--sc-7);
  border-top: 1px solid var(--sc-hairline);
}
.bk-uitkomst__som { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.bk-uitkomst__bedrag {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: var(--sc-t-3xl);
  letter-spacing: var(--sc-track-tight);
  font-variant-numeric: tabular-nums;
}
.bk-uitkomst__range { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.bk-uitkomst__knoppen { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-2); }
.bk-btn {
  padding: var(--sc-3) var(--sc-5);
  background: transparent;
  border: 1px solid var(--sc-hairline-strong);
  border-radius: var(--sc-r-pill);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  cursor: pointer;
  transition: border-color var(--sc-d-base) var(--sc-ease-out);
}
.bk-btn:hover { border-color: var(--sc-accent); }

/* ------------------------------------------------------------------ over -- */
.bk-over__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bk-over__copy { max-width: 30rem; }

/* ------------------------------------------------------------------- faq -- */
.bk-faq__lijst { margin-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
.bk-vraag { border-bottom: 1px solid var(--sc-hairline); }
.bk-vraag h3 { margin: 0; }
.bk-vraag button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  padding: var(--sc-5) 0;
  background: none;
  border: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-snug);
  text-align: left;
  cursor: pointer;
}
.bk-vraag button i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.bk-vraag button i::before,
.bk-vraag button i::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  translate: 0 -50%;
  background: var(--sc-accent);
  border-radius: var(--sc-r-sm);
  transition: rotate var(--sc-d-base) var(--sc-ease-out);
}
.bk-vraag button i::after { rotate: 90deg; }
.bk-vraag button[aria-expanded="true"] i::after { rotate: 0deg; }
.bk-antwoord { padding-bottom: var(--sc-5); }

/* --------------------------------------------------------------- contact -- */
.bk-close__licht {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    620px circle at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 8%, transparent),
    transparent 72%
  );
}
.bk-close__inner {
  display: grid;
  place-content: center;
  gap: var(--sc-4);
  height: 100%;
  max-width: 44rem;
  padding-inline: var(--sc-gutter);
}
.bk-close__inner .sc-body { max-width: 34rem; }
.bk-close__inner .bk-cta { justify-self: start; margin-top: var(--sc-2); }
.bk-contactmid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-5);
  margin-top: var(--sc-2);
  font-style: normal;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
}
.bk-contactmid a:hover { color: var(--sc-accent); }
.bk-voet {
  position: absolute;
  inset: auto var(--sc-gutter) var(--sc-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sc-3);
  font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft);
}
.bk-voet p { margin: 0; }
.bk-voet__klein { opacity: 0.75; }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  
  .bk-lijn__punt { transition: none; }
}

/* -------------------------------------------------------------- mobiel -- */
@media (max-width: 767px) {
  .bk-nav { gap: var(--sc-3); height: 56px; }
  .bk-nav__links { display: none; }
    /* Staand scherm: een 16:9-film op volle hoogte toont maar een kwart van de
     breedte (geen kraan, alleen gevel). Daarom de bovenste 68 %, zacht
     overlopend in donker, met de tekst eronder. */
  .bk-tl__poster, .bk-tl__canvas {
    height: 68%; object-position: 45% 50%;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }
  .bk-hero__scroll { display: none; }
  .bk-tl__fase { right: var(--sc-gutter); bottom: 2.5rem; }
  .bk-tl__slot { max-width: none; }
  .bk-tl__klok { top: 72px; bottom: auto; }
  .bk-tl__balk { width: 6.5rem; }
  .bk-hero__copy { max-width: none; }
  .bk-hero__copy .sc-body { margin-bottom: var(--sc-5); }
  .bk-waarheid:nth-child(n) { margin-left: 0; }
  .bk-aanpak__inhoud { grid-template-columns: 1fr; }
  .bk-lijn { display: none; }
  .bk-naar { grid-template-columns: 1fr; }
  .bk-voet { flex-direction: column; gap: var(--sc-1); }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  body { background: #fff; color: #000; }
  .bk-nav, .sc-grain, [data-sc-progress], .skip,
  #hero, #methode, #peak, #aanpak, #over, #faq, #contact,
  .bk-form, .bk-uitkomst__knoppen { display: none !important; }
  #offerte { display: block; padding: 0; }
  #offerte * { color: #000 !important; }
  .bk-uitkomst { border-color: #000; }
  .bk-uitkomst__bedrag { font-size: 2.4rem; }
}


/* ------------------------------------------------- layout vóór de engine --
   Dezelfde waarden als de engine na mount zet, zodat er niets verspringt (CLS)
   en zonder JS de hero zichtbaar blijft. */
[data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
#hero { height: 600vh; }
#over, #contact { height: 125vh; }
#peak { height: 250vh; }
#aanpak { height: 170vh; }

/* ------------------------------------------------------------ typografie -- */
body { font-family: var(--sc-font-text); }
.sc-display { font-weight: 800; letter-spacing: -0.035em; hanging-punctuation: first; }
.sc-display em, .bk-nav__merk span { font-style: normal; color: var(--sc-accent); }
.bk-nav__merk { font-weight: 800; letter-spacing: -0.02em; }
.bk-nav__merk span { font-weight: 600; }
.bk-waarheid h3, .bk-stappen h3, .bk-paneel h3 { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -0.02em; }
.bk-nav__cta {
  font-size: var(--sc-t-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 0.55rem 1rem; border-radius: 999px;
  transition: translate var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.bk-nav__cta:hover { translate: 0 -1px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }

/* ------------------------------------------------ signature: de balans -- */
/* De weegschaal in de menubalk staat scheef (veel papier links) en komt bij
   het scrollen in evenwicht. --hk loopt van 0 naar 1 over de hele pagina. */
.schaal { color: var(--sc-ink-soft); display: grid; place-items: center; order: 2; }
.bk-nav__links { margin-inline: auto 0; }
.bk-nav__cta { order: 3; }
.schaal svg { overflow: visible; }
.schaal .balk {
  transform-box: view-box; transform-origin: 28px 12px;
  rotate: calc((1 - clamp(0, var(--hk, 0) / 0.8, 1)) * -9deg);
}
.schaal .bak { transform-box: fill-box; transform-origin: 50% 0; rotate: calc((1 - clamp(0, var(--hk, 0) / 0.8, 1)) * 9deg); }
.schaal.f4 { color: var(--sc-accent); }
.schaal .balk, .schaal .bak { transition: none; }

/* ------------------------------------------------------------ profielen -- */
.bk-profiel { display: grid; gap: var(--sc-7); }
.bk-tabs { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.bk-tabs button {
  padding: 0.7rem 1.3rem; background: transparent; color: var(--sc-ink-soft);
  border: 1px solid var(--sc-hairline-strong); border-radius: 999px;
  font: inherit; font-size: var(--sc-t-sm); font-weight: 600; cursor: pointer;
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.bk-tabs button:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.bk-tabs button[aria-checked="true"] { color: var(--sc-ink); border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); }
.bk-tabs button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.bk-paneel {
  display: grid; gap: var(--sc-6); padding: clamp(1.5rem, 4vw, var(--sc-8));
  background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: 10px;
  box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.7);
}
.bk-paneel__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-3); }
.bk-paneel h3 { margin: 0; font-size: var(--sc-t-2xl); line-height: 1.05; }
.bk-paneel__ritme { margin: 0; font-size: var(--sc-t-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.bk-paneel__kolommen { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(1.5rem, 5vw, var(--sc-9)); }
.bk-paneel ul { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: grid; gap: var(--sc-3); }
.bk-paneel li { position: relative; padding-left: 1.4rem; color: var(--sc-ink-soft); line-height: 1.45; }
.bk-paneel li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 1px; background: var(--sc-accent); }
.bk-paneel__kolommen > div:last-child li::before { background: var(--sc-ink-soft); }

/* ------------------------------------------------------------- overigen -- */
.bk-offerte__demo { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-style: italic; }
.bk-uitkomst__bedrag small { font-size: 0.34em; font-weight: 600; color: var(--sc-ink-soft); letter-spacing: 0; }
.bk-peak__fase { font-weight: 800; }
.bk-over { background: var(--sc-canvas); }

@media (max-width: 767px) {
  .schaal { display: none; }
  .bk-nav__cta { margin-left: auto; padding: 0.5rem 0.85rem; }
  .bk-paneel__kolommen { grid-template-columns: 1fr; }
}
@media print {
  #profiel { display: none !important; }
}

/* Leeg-scherm: op mobiel staat de kop van de scrub bovenaan de stage, zodat de
   stage die van onderen binnenschuift meteen tekst draagt en geen kaal beeld. */
@media (max-width: 767px) {
  .bk-peak__kop { bottom: auto; top: 5rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
}