/* Hallmark · genre: editorial · macrostructure: Letter · theme: custom
 * vibe: "warm, vertrouwd, premium goud" · paper: oklch(97.5% 0.010 84) · accent: oklch(54% 0.095 74)
 * display: Bricolage Grotesque · body: Hanken Grotesque · axes: light / geometric-sans / chromatic-gold ~78
 * studied: no · context: user-provided (logo colours) · pre-emit critique: P5 H4 E5 S4 R5 V4
 * Het Balanskantoor, lonen en administraties
 */

:root {
  /* --- Merkgoud, letterlijk uit het logo --- */
  --gold-light: #dec386;
  --gold-mid:   #d1a96b;
  --gold-deep:  #a27640;
  --gradient-gold: linear-gradient(118deg, var(--gold-light) 0%, var(--gold-mid) 46%, var(--gold-deep) 100%);

  /* --- Papier & inkt (warm ivoor / espresso) --- */
  --color-paper:        oklch(97.5% 0.010 84);
  --color-paper-2:      oklch(95% 0.015 84);
  --color-paper-3:      oklch(92.5% 0.019 82);
  --color-ink:          oklch(27% 0.020 66);
  --color-ink-2:        oklch(43% 0.018 70);
  --color-muted:        oklch(54% 0.016 74);

  /* --- Donkere espresso-sectie (logo straalt hier) --- */
  --color-panel:        oklch(24% 0.022 64);
  --color-panel-2:      oklch(29% 0.022 64);
  --color-on-panel:     oklch(95% 0.012 84);
  --color-on-panel-2:   oklch(80% 0.014 82);

  /* --- Lijnen --- */
  --color-rule:         oklch(88% 0.014 82);
  --color-rule-2:       oklch(91% 0.011 82);
  --color-rule-panel:   oklch(36% 0.020 64);

  /* --- Accent (bronsgoud voor links, kleine accenten) --- */
  --color-accent:       oklch(52% 0.095 72);
  --color-accent-hover: oklch(46% 0.098 68);
  --color-accent-ink:   oklch(24% 0.022 64);   /* donkere tekst op goudvlak */
  --color-focus:        oklch(56% 0.13 74);

  /* --- Type --- */
  --font-display: "Bricolage Grotesque", ui-serif, Georgia, serif;
  --font-body:    "Hanken Grotesque", system-ui, sans-serif;

  --text-xs:    0.78rem;
  --text-sm:    0.9rem;
  --text-base:  1.06rem;
  --text-lg:    1.2rem;
  --text-xl:    1.45rem;
  --text-2xl:   1.9rem;
  --text-3xl:   clamp(2.1rem, 4.4vw, 3.1rem);
  --text-4xl:   clamp(2.7rem, 6vw, 4.4rem);
  --text-display: clamp(3.2rem, 8vw, 6rem);

  /* --- Ruimte (4pt) --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;
  --space-4xl: 8rem;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Rules / motion --- */
  --rule-hair: 1px;
  --dur-fast: 140ms;
  --dur-mid:  320ms;
  --dur-slow: 640ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --measure: 62ch;
  --shadow-soft: 0 1px 2px oklch(27% 0.02 66 / 0.05), 0 12px 30px oklch(27% 0.02 66 / 0.07);
  --shadow-lift: 0 2px 6px oklch(27% 0.02 66 / 0.08), 0 20px 44px oklch(27% 0.02 66 / 0.11);
}

/* Het Balanskantoor, pagina-stijl. Tokens in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}
.narrow { max-width: 54rem; }

/* ---------- Buttons & links ---------- */
.btn {
  --_bg: var(--gradient-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-accent-ink);
  background: var(--_bg);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
  box-shadow: 0 6px 18px oklch(58% 0.1 74 / 0.28);
}
.btn:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.03); box-shadow: 0 10px 26px oklch(58% 0.1 74 / 0.34); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-rule);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gold-deep); filter: none; background: var(--color-paper-2); }

.btn--on-panel { color: var(--color-accent-ink); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  background-image: linear-gradient(var(--gold-deep), var(--gold-deep));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-mid) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tlink:hover { background-size: 100% 1.5px; color: var(--color-accent-hover); }
.tlink:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 3px; }
.tlink svg { transition: transform var(--dur-fast) var(--ease-out); }
.tlink:hover svg { transform: translateX(3px); }

/* ---------- Section rhythm ---------- */
section { padding-block: var(--space-3xl); }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}
.lead { font-size: var(--text-lg); color: var(--color-ink-2); max-width: var(--measure); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
}
.nav.is-stuck { border-bottom-color: var(--color-rule); box-shadow: 0 1px 0 var(--color-rule-2); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 74px;
  padding-block: 0.6rem;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 30px; width: auto; }
.nav__links {
  display: flex;
  gap: var(--space-lg);
  margin-inline: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}
.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  padding: 0.4rem 0.1rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--color-ink); }
.nav__cta { display: flex; align-items: center; gap: var(--space-md); }
.nav__phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: var(--text-sm); text-decoration: none; color: var(--color-ink);
  white-space: nowrap;
}
.nav__phone svg { color: var(--color-accent); }
.nav__phone:hover { color: var(--color-accent); }
.nav__burger { display: none; }

/* ---------- Hero (Letter) ---------- */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) var(--space-3xl); position: relative; overflow: clip; }
.hero .wrap { position: relative; z-index: 1; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 82% 8%, oklch(80% 0.09 84 / 0.35), transparent 70%);
  pointer-events: none; z-index: -1;
}
.hero__salut {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.hero h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  max-width: 18ch;
  margin-bottom: var(--space-lg);
}
.hero h1 .glow { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__body { max-width: 54ch; font-size: var(--text-lg); color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.hero__body strong { color: var(--color-ink); font-weight: 600; }
.hero__mission {
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  font-style: italic;
  line-height: 1.22;
  color: var(--color-ink);
  margin-block: var(--space-xl);
}
.hero__mission .glow {
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: normal; font-weight: 700;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-xl); }
.hero__note { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Foto's (van haar huidige site) ---------- */
.hero__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.hero__photo { position: relative; }
.hero__photo img { width: 100%; aspect-ratio: 3 / 2.1; object-fit: cover; object-position: center 30%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.hero__photo::before { content: ""; position: absolute; inset: auto -16px -16px auto; width: 58%; height: 58%; border-radius: var(--radius-lg); background: var(--gradient-gold); opacity: 0.18; z-index: -1; filter: blur(6px); }

.service { overflow: hidden; }
.service__img { margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-md); aspect-ratio: 3 / 2; overflow: hidden; }
.service__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.service:hover .service__img img { transform: scale(1.04); }

.about__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start; }
.about__photo { position: relative; }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.about__photo::before { content: ""; position: absolute; inset: -14px auto auto -14px; width: 52%; height: 52%; border-radius: var(--radius-lg); background: var(--gradient-gold); opacity: 0.16; z-index: -1; filter: blur(6px); }

/* ---------- Situaties (herkenbaar) ---------- */
.recog { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.recog__head { max-width: 44ch; margin-bottom: var(--space-2xl); }
.recog__head h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.recog__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-rule);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.recog__item {
  background: var(--color-paper);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  transition: background var(--dur-fast) var(--ease-out);
}
.recog__item:hover { background: var(--color-paper-3); }
.recog__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gold-deep);
  min-width: 2ch;
  padding-top: 0.15em;
  font-variant-numeric: tabular-nums;
}
.recog__item p { font-size: var(--text-base); color: var(--color-ink); }

/* ---------- Diensten ---------- */
.services__head { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-2xl); }
.services__head h2 { font-size: var(--text-3xl); max-width: 16ch; }
.services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.service {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--gold-mid) 55%, var(--color-rule)); }
.service__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--gold-light) 30%, var(--color-paper));
  color: var(--gold-deep);
  margin-bottom: var(--space-md);
}
.service__icon svg { width: 24px; height: 24px; }
.service h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.service p { color: var(--color-ink-2); font-size: var(--text-base); }

/* ---------- Panel (donkere espresso-sectie: werkwijze) ---------- */
.panel { background: var(--color-panel); color: var(--color-on-panel); position: relative; overflow: hidden; }
.panel::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 15% 0%, oklch(45% 0.06 74 / 0.35), transparent 60%);
  pointer-events: none;
}
.panel .wrap { position: relative; z-index: 1; }
.panel h2 { color: var(--color-on-panel); font-size: var(--text-3xl); max-width: 20ch; margin-bottom: var(--space-md); }
.panel .lead { color: var(--color-on-panel-2); margin-bottom: var(--space-2xl); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.step { padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-panel); }
.step__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl);
  background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--space-xs);
}
.step h3 { color: var(--color-on-panel); font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.step p { color: var(--color-on-panel-2); font-size: var(--text-sm); }

/* ---------- Starters ---------- */
.starters .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: center; }
.starters__card {
  background: var(--gradient-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  color: var(--color-accent-ink);
  box-shadow: var(--shadow-soft);
}
.starters__card h2 { color: var(--color-accent-ink); font-size: var(--text-2xl); margin-bottom: var(--space-sm); max-width: 18ch; }
.starters__card p { color: oklch(30% 0.03 66); margin-bottom: var(--space-lg); max-width: 42ch; }
.starters__list { list-style: none; padding: 0; margin: 0 0 var(--space-lg); display: grid; gap: var(--space-sm); }
.starters__list li { display: flex; gap: var(--space-sm); align-items: center; font-weight: 500; color: oklch(28% 0.03 66); }
.starters__list svg { flex: none; color: var(--color-accent-ink); }
.starters__aside h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); max-width: 14ch; }
.starters__aside p { color: var(--color-ink-2); max-width: 40ch; }

/* ---------- Over Jacqueline ---------- */
.about { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.about .wrap { max-width: 60rem; }
.about h2 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); max-width: 20ch; }
.about__lead { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-2xl); color: var(--color-ink); max-width: 26ch; margin-bottom: var(--space-lg); line-height: 1.2; }
.about p + p { margin-top: var(--space-md); }
.about p { color: var(--color-ink-2); max-width: var(--measure); }
.about__sign { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); color: var(--gold-deep); margin-top: var(--space-lg); }

/* ---------- Contact ---------- */
.contact .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); }
.contact__intro h2 { font-size: var(--text-3xl); margin-bottom: var(--space-md); max-width: 16ch; }
.contact__intro p { color: var(--color-ink-2); margin-bottom: var(--space-xl); max-width: 40ch; }
.contact__details { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.contact__details li { display: flex; gap: var(--space-md); align-items: flex-start; }
.contact__details .ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--gold-light) 26%, var(--color-paper)); color: var(--gold-deep); }
.contact__details .lbl { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.contact__details a, .contact__details span.val { font-weight: 600; color: var(--color-ink); text-decoration: none; font-size: var(--text-base); }
.contact__details a:hover { color: var(--color-accent); }

.form {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-soft);
}
.field { margin-bottom: var(--space-lg); }
.field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); color: var(--color-ink); }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:hover, .field textarea:hover { border-color: color-mix(in oklab, var(--gold-mid) 40%, var(--color-rule)); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--gold-deep);
  background: var(--color-paper);
  box-shadow: 0 0 0 3px oklch(58% 0.1 74 / 0.18);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.consent { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.consent input { margin-top: 0.2em; width: 18px; height: 18px; accent-color: var(--gold-deep); flex: none; }
.consent a { color: var(--color-accent); font-weight: 600; }
.form__submit { width: 100%; justify-content: center; }
.form__status { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); min-height: 1.2em; }

/* ---------- Footer (brief-afsluiting) ---------- */
.foot { background: var(--color-panel); color: var(--color-on-panel-2); padding-block: var(--space-2xl); }
.foot__close { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); color: var(--color-on-panel); margin-bottom: var(--space-xl); max-width: 22ch; }
.foot__close .name { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; font-weight: 700; }
.foot__bar { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; justify-content: space-between; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-panel); }
.foot__bar img { height: 26px; opacity: 0.95; }
.foot__meta { font-size: var(--text-sm); color: var(--color-on-panel-2); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.foot__meta a { color: var(--color-on-panel); text-decoration: none; }
.foot__meta a:hover { color: var(--gold-light); }

/* ---------- Staafdiagram-motief (uit het logo) ---------- */
/* Klein accent bij sectiekoppen: staafjes die omhoog groeien */
.bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-bottom: var(--space-md);
}
.bars i {
  display: block;
  width: 8px;
  border-radius: 2px;
  background: var(--gradient-gold);
  transform: scaleY(0.04);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease-out);
}
.bars i:nth-child(1) { height: 42%; transition-delay: 60ms; }
.bars i:nth-child(2) { height: 100%; transition-delay: 170ms; }
.bars i:nth-child(3) { height: 68%; transition-delay: 280ms; }
.reveal.in .bars i, .bars.in i { transform: scaleY(1); }
.bars--sm { height: 24px; }
.bars--sm i { width: 6px; }
.bars--panel i { background: var(--gradient-gold); box-shadow: 0 0 18px oklch(70% 0.1 80 / 0.4); }

/* Groot, zacht staaf-watermerk als sfeer op de achtergrond */
.motif {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, 2.6vw, 30px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
}
.motif i {
  display: block;
  width: clamp(24px, 4vw, 50px);
  height: 100%;
  border-radius: 8px;
  background: var(--gradient-gold);
  transform-origin: bottom;
  transform: scaleY(var(--hi, 0.8));
  animation: dataPulse var(--d, 8s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
/* 3 staafjes, elk eigen ritme, zodat het als levende data op en neer deint */
.motif i:nth-child(1) { --lo: 0.30; --hi: 0.55; --d: 8.5s;  --dl: 0s; }
.motif i:nth-child(2) { --lo: 0.62; --hi: 1.00; --d: 10.5s; --dl: 0.9s; }
.motif i:nth-child(3) { --lo: 0.40; --hi: 0.72; --d: 7.5s;  --dl: 0.4s; }
@keyframes dataPulse {
  0%, 100% { transform: scaleY(var(--lo)); }
  50%      { transform: scaleY(var(--hi)); }
}
.motif--hero { left: clamp(0.5rem, 3vw, 3rem); bottom: -3%; height: clamp(170px, 24vw, 300px); opacity: 0.11; }
.motif--panel { left: 4%; top: -2%; height: clamp(200px, 30vw, 360px); opacity: 0.15; }
.motif--panel i { box-shadow: 0 0 40px oklch(70% 0.1 80 / 0.35); }

/* Equalizer-band: rij gouden staafjes als handtekening-strip */
.equalizer {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.7vw, 7px);
  height: 40px;
  overflow: hidden;
  margin-bottom: var(--space-xl);
}
.equalizer i {
  flex: 1 1 0;
  min-width: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--gradient-gold);
  transform: scaleY(0.05);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease-out);
  opacity: 0.85;
}
.equalizer.in i { transform: scaleY(var(--h, 0.5)); }
.equalizer i:nth-child(7n+1) { --h: 0.50; transition-delay: 20ms; }
.equalizer i:nth-child(7n+2) { --h: 0.82; transition-delay: 60ms; }
.equalizer i:nth-child(7n+3) { --h: 0.34; transition-delay: 100ms; }
.equalizer i:nth-child(7n+4) { --h: 1.00; transition-delay: 140ms; }
.equalizer i:nth-child(7n+5) { --h: 0.60; transition-delay: 180ms; }
.equalizer i:nth-child(7n+6) { --h: 0.90; transition-delay: 220ms; }
.equalizer i:nth-child(7n+7) { --h: 0.44; transition-delay: 260ms; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 62rem) {
  .starters .wrap, .contact .wrap { grid-template-columns: 1fr; }
  .hero__grid, .about__grid { grid-template-columns: 1fr; }
  .hero__photo { max-width: 32rem; }
  .about__photo { max-width: 24rem; }
  .steps { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 48rem) {
  .nav__links { display: none; }
  .nav__phone .txt { display: none; }
  .nav__burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 1.5px solid var(--color-rule); background: var(--color-paper);
    border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink);
  }
  .nav__inner { gap: var(--space-md); }
  .nav__links.open {
    display: flex; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule);
    box-shadow: var(--shadow-soft);
  }
  .nav__links.open li { border-top: var(--rule-hair) solid var(--color-rule-2); }
  .nav__links.open a { display: block; padding: var(--space-md) clamp(1.15rem, 4vw, 2.5rem); }
  .recog__grid, .services__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  section { padding-block: var(--space-2xl); }
  .starters__card, .form { padding: var(--space-xl); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: opacity 150ms linear; transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .motif i { animation: none !important; transform: scaleY(var(--hi)) !important; }
}

/* ============================================================
   Kennisbank (blog-overzicht) + artikelpagina
   ============================================================ */
.kb { padding-block: var(--space-3xl); }
.kb-hero { max-width: 48ch; margin: 0 auto var(--space-xl); text-align: center; }
.kb-hero .eyebrow { display: block; }
.kb-hero h1 { font-size: var(--text-3xl); margin-bottom: var(--space-md); }
.kb-hero p { color: var(--color-ink-2); font-size: var(--text-lg); margin: 0 auto; }

.kb-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-2xl); }
.kb-chip { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); background: var(--color-paper-2); border: 1px solid var(--color-rule); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.kb-chip:hover { border-color: var(--gold-deep); color: var(--color-ink); }
.kb-chip.is-active { background: var(--gradient-gold); color: var(--color-accent-ink); border-color: transparent; }

.kb .wp-block-post-template.is-layout-grid { gap: var(--space-lg); }
.kb-card { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.kb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: color-mix(in oklab, var(--gold-mid) 50%, var(--color-rule)); }
.kb-card__img { margin: 0; }
.kb-card__img a, .kb-card__img img { display: block; }
.kb-card__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.kb-card:hover .kb-card__img img { transform: scale(1.05); }
.kb-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.kb-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.kb-card__meta .wp-block-post-terms a { color: var(--gold-deep); text-decoration: none; font-weight: 700; }
.kb-card__title { margin: 0.1rem 0; }
.kb-card__title a { color: var(--color-ink); text-decoration: none; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; }
.kb-card__title a:hover { color: var(--gold-deep); }
.kb-card__excerpt { color: var(--color-ink-2); font-size: var(--text-base); margin: 0; }

.kb .wp-block-query-pagination { justify-content: center; margin-top: var(--space-2xl); gap: var(--space-md); }
.kb .wp-block-query-pagination a:hover { color: var(--gold-deep); }

/* Artikelpagina */
.article { padding-block: var(--space-2xl) var(--space-3xl); }
.article__wrap { max-width: 46rem; margin-inline: auto; }
.article__back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: var(--space-lg); color: var(--color-accent); font-weight: 600; text-decoration: none; }
.article__back:hover { color: var(--gold-deep); }
.article__meta { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--space-md); }
.article__meta .wp-block-post-terms a { color: var(--gold-deep); font-weight: 700; text-decoration: none; }
.article__title { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.article__img { margin: 0 0 var(--space-xl); }
.article__img img { width: 100%; max-height: 470px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.article__content { font-size: 1.12rem; line-height: 1.75; }
.article__content > * { margin-bottom: var(--space-md); }
.article__content h2 { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-xl); margin-bottom: var(--space-sm); line-height: 1.15; }
.article__content h3 { font-family: var(--font-display); font-size: var(--text-xl); margin-top: var(--space-lg); margin-bottom: var(--space-xs); }
.article__content a { color: var(--gold-deep); }
.article__content img { border-radius: var(--radius-md); }
.article__content ul, .article__content ol { padding-left: 1.4em; }
.article__content li { margin-bottom: 0.4em; }

@media (max-width: 40rem) {
  .article__title { font-size: var(--text-2xl); }
  .kb-hero h1 { font-size: var(--text-2xl); }
}

/* ============================================================
   Artikel: brede kopfoto + sidebar
   ============================================================ */
.article__hero { margin: 0 auto var(--space-xl); max-width: 1120px; }
.article__hero img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); display: block; }
.article__body { max-width: 1120px; margin-inline: auto; }
.article__head { margin-bottom: var(--space-lg); }
.article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.article__main { min-width: 0; }
.article__main .article__content { max-width: 44rem; }

.article__side { position: sticky; top: 90px; display: grid; gap: var(--space-lg); }
.side-card { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-lg); }
.side-card__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--color-accent); margin: 0 0 var(--space-sm); }
.side-author { text-align: center; }
.side-author__img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: center 20%; margin: 0 auto var(--space-sm); box-shadow: var(--shadow-soft); }
.side-author__name { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-2xs); }
.side-author__txt { font-size: var(--text-sm); color: var(--color-ink-2); margin: 0 0 var(--space-md); }
.btn--sm { padding: 0.6rem 1.15rem; min-height: 42px; font-size: var(--text-xs); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.side-item { display: grid; grid-template-columns: 58px 1fr; gap: var(--space-sm); align-items: center; }
.side-item__thumb { display: block; }
.side-item__thumb img { width: 58px; height: 58px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.side-item__title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.2; color: var(--color-ink); text-decoration: none; }
.side-item__title:hover { color: var(--gold-deep); }

@media (max-width: 60rem) {
  .article__layout { grid-template-columns: 1fr; }
  .article__side { position: static; }
  .article__main .article__content { max-width: none; }
  .article__hero img { aspect-ratio: 16 / 9; }
}