:root {
  --kzv-ink: #0a1622;
  --kzv-ink-2: #1a2a3f;
  --kzv-ink-3: #33475e;
  --kzv-sand: #f6efe3;
  --kzv-cream: #fcf9f3;
  --kzv-paper: #ffffff;
  --kzv-gold: #c99a3f;
  --kzv-gold-bright: #e2b95f;
  --kzv-gold-soft: #f4e5c4;
  --kzv-teal: #1e6f68;
  --kzv-teal-deep: #0f423d;
  --kzv-mist: #e9e1d2;
  --kzv-line: rgba(10, 22, 34, 0.14);
  --kzv-line-strong: rgba(10, 22, 34, 0.28);
  --kzv-line-dark: rgba(255, 255, 255, 0.18);
  --kzv-shadow-sm: 0 12px 30px -20px rgba(10, 22, 34, 0.45);
  --kzv-shadow-md: 0 24px 60px -32px rgba(10, 22, 34, 0.5);
  --kzv-shadow-lg: 0 40px 90px -46px rgba(10, 22, 34, 0.6);
  --kzv-radius-lg: 26px;
  --kzv-radius-md: 16px;
  --kzv-radius-sm: 10px;
  --kzv-radius-pill: 999px;
  --kzv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kzv-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --kzv-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --kzv-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--kzv-font);
  font-size: 17px;
  line-height: 1.68;
  color: var(--kzv-ink);
  background-color: var(--kzv-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--kzv-teal);
  text-decoration: none;
  transition: color 0.24s var(--kzv-ease);
}

a:hover {
  color: var(--kzv-ink);
}

h1, h2, h3, h4, h5 {
  font-family: var(--kzv-display);
  color: var(--kzv-ink);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-top: 0;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 5vw + 0.5rem, 4.6rem); }
h2 { font-size: clamp(1.9rem, 2.6vw + 0.7rem, 2.9rem); }
h3 { font-size: clamp(1.35rem, 1.2vw + 0.9rem, 1.75rem); }

p { margin: 0 0 1.1em; }

.kzv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--kzv-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kzv-gold);
  font-weight: 600;
}

.kzv-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.kzv-eyebrow--ink { color: var(--kzv-ink-3); }
.kzv-eyebrow--light { color: var(--kzv-gold-bright); }

.kzv-section {
  padding: clamp(3.5rem, 7vw, 7rem) 0;
  position: relative;
}

.kzv-section--paper { background: var(--kzv-paper); }
.kzv-section--sand { background: var(--kzv-sand); }
.kzv-section--ink {
  background: var(--kzv-ink);
  color: var(--kzv-sand);
}
.kzv-section--ink h1,
.kzv-section--ink h2,
.kzv-section--ink h3 { color: var(--kzv-cream); }

.kzv-container {
  width: min(1180px, 92vw);
  margin-inline: auto;
}

.kzv-container--narrow { width: min(820px, 92vw); }

.kzv-lead {
  font-size: clamp(1.05rem, 0.5vw + 1rem, 1.22rem);
  color: var(--kzv-ink-3);
  max-width: 62ch;
}

.kzv-section--ink .kzv-lead { color: rgba(246, 239, 227, 0.78); }

/* Buttons */
.kzv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--kzv-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.7rem;
  border-radius: var(--kzv-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.28s var(--kzv-ease), background-color 0.28s var(--kzv-ease),
    color 0.28s var(--kzv-ease), box-shadow 0.28s var(--kzv-ease), border-color 0.28s var(--kzv-ease);
}

.kzv-btn:hover { transform: translateY(-2px); }
.kzv-btn:active { transform: translateY(0); }

.kzv-btn--primary {
  background: var(--kzv-gold);
  color: var(--kzv-ink);
  box-shadow: 0 16px 32px -18px rgba(201, 154, 63, 0.85);
}
.kzv-btn--primary:hover {
  background: var(--kzv-gold-bright);
  color: var(--kzv-ink);
  box-shadow: 0 22px 42px -20px rgba(201, 154, 63, 0.9);
}

.kzv-btn--dark {
  background: var(--kzv-ink);
  color: var(--kzv-cream);
}
.kzv-btn--dark:hover { background: var(--kzv-ink-2); color: var(--kzv-cream); }

.kzv-btn--ghost {
  background: transparent;
  color: var(--kzv-ink);
  border-color: var(--kzv-line-strong);
}
.kzv-btn--ghost:hover { border-color: var(--kzv-ink); background: rgba(10, 22, 34, 0.04); }

.kzv-btn--light {
  background: transparent;
  color: var(--kzv-cream);
  border-color: var(--kzv-line-dark);
}
.kzv-btn--light:hover { border-color: var(--kzv-gold); color: var(--kzv-gold-bright); }

/* Header */
.kzv-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(252, 249, 243, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--kzv-ease), box-shadow 0.3s var(--kzv-ease),
    background-color 0.3s var(--kzv-ease);
}

.kzv-header.is-scrolled {
  border-bottom-color: var(--kzv-line);
  box-shadow: 0 18px 34px -30px rgba(10, 22, 34, 0.5);
}

.kzv-header__inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.9rem 0;
}

.kzv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--kzv-display);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--kzv-ink);
  letter-spacing: -0.01em;
}
.kzv-brand:hover { color: var(--kzv-ink); }

.kzv-brand__wordmark { display: inline-block; }
.kzv-brand__accent { color: var(--kzv-gold); }

.kzv-header__meta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
  font-size: 0.88rem;
  color: var(--kzv-ink-3);
}

.kzv-header__meta a,
.kzv-header__meta span {
  color: var(--kzv-ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.kzv-header__meta i { color: var(--kzv-gold); font-size: 0.92rem; }

.kzv-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.kzv-nav a { color: var(--kzv-ink-2); position: relative; }

.kzv-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--kzv-gold);
  transition: width 0.3s var(--kzv-ease);
}
.kzv-nav a:hover::after { width: 100%; }

.kzv-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.3rem;
  color: var(--kzv-ink);
  padding: 0.4rem;
}

/* Hero */
.kzv-hero {
  position: relative;
  padding: clamp(4rem, 9vw, 9rem) 0 clamp(3.5rem, 7vw, 7rem);
  color: var(--kzv-cream);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.kzv-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.kzv-hero h1 { color: var(--kzv-cream); margin-bottom: 1.3rem; }
.kzv-hero p { color: rgba(246, 239, 227, 0.86); max-width: 52ch; }

.kzv-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--kzv-line-dark);
}

.kzv-stat__val {
  font-family: var(--kzv-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--kzv-gold-bright);
  line-height: 1;
}

.kzv-stat__label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 239, 227, 0.7);
  margin-top: 0.35rem;
}

.kzv-hero__card {
  position: relative;
  border-radius: var(--kzv-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--kzv-shadow-lg);
  border: 1px solid var(--kzv-line-dark);
}
.kzv-hero__card img { width: 100%; height: 100%; object-fit: cover; }

/* Cards */
.kzv-card {
  position: relative;
  background: var(--kzv-paper);
  border-radius: var(--kzv-radius-lg);
  border: 1px solid var(--kzv-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--kzv-ease), box-shadow 0.4s var(--kzv-ease),
    border-color 0.4s var(--kzv-ease);
}

.kzv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kzv-shadow-md);
  border-color: rgba(201, 154, 63, 0.5);
}

.kzv-card__media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--kzv-mist);
}
.kzv-card__media img { width: 100%; height: 100%; object-fit: cover; }

.kzv-card__body {
  padding: 1.55rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.kzv-card__title { font-size: 1.32rem; margin: 0; }
.kzv-card__title a { color: var(--kzv-ink); }
.kzv-card__title a:hover { color: var(--kzv-teal); }

.kzv-card__text { color: var(--kzv-ink-3); font-size: 0.95rem; margin: 0; }

.kzv-card__foot {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--kzv-ink-3);
}

.kzv-card__link {
  font-weight: 600;
  color: var(--kzv-teal);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.kzv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--kzv-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--kzv-radius-pill);
  background: var(--kzv-gold-soft);
  color: var(--kzv-ink);
}

/* Steps */
.kzv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  counter-reset: kzv-step;
}

.kzv-step {
  position: relative;
  padding: 1.8rem 1.5rem 1.6rem;
  background: var(--kzv-paper);
  border: 1px solid var(--kzv-line);
  border-radius: var(--kzv-radius-md);
  counter-increment: kzv-step;
}

.kzv-step::before {
  content: "0" counter(kzv-step);
  font-family: var(--kzv-mono);
  font-size: 0.78rem;
  color: var(--kzv-gold);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.7rem;
}

.kzv-step h3 { font-size: 1.15rem; margin: 0 0 0.45rem; }
.kzv-step p { font-size: 0.92rem; color: var(--kzv-ink-3); margin: 0; }

/* Numbers strip */
.kzv-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  text-align: center;
}
.kzv-numbers__item {
  padding: 1.6rem 1rem;
}
.kzv-numbers__val {
  font-family: var(--kzv-display);
  font-size: clamp(2.4rem, 3.5vw, 3.5rem);
  font-weight: 700;
  color: var(--kzv-gold);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.kzv-numbers__label {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kzv-ink-3);
}
.kzv-section--ink .kzv-numbers__label { color: rgba(246, 239, 227, 0.72); }

/* Gallery */
.kzv-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.9rem;
}
.kzv-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--kzv-radius-md);
  aspect-ratio: 4 / 3;
  background: var(--kzv-mist);
}
.kzv-gallery__item:first-child {
  grid-row: span 2;
  aspect-ratio: 3 / 4;
}
.kzv-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--kzv-ease);
}
.kzv-gallery__item:hover img { transform: scale(1.05); }

/* Testimonials */
.kzv-quote {
  background: var(--kzv-paper);
  border-radius: var(--kzv-radius-lg);
  border: 1px solid var(--kzv-line);
  padding: 2rem;
  position: relative;
  box-shadow: var(--kzv-shadow-sm);
}
.kzv-quote::before {
  content: "\201C";
  font-family: var(--kzv-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--kzv-gold);
  position: absolute;
  top: 0.3rem;
  left: 1.4rem;
}
.kzv-quote__text {
  font-size: 1.05rem;
  color: var(--kzv-ink-2);
  margin: 1.6rem 0 1.4rem;
}
.kzv-quote__author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.kzv-quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--kzv-mist);
  flex-shrink: 0;
}
.kzv-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.kzv-quote__name { font-weight: 600; font-size: 0.95rem; }
.kzv-quote__role { font-size: 0.82rem; color: var(--kzv-ink-3); }

/* FAQ */
.kzv-faq {
  border-top: 1px solid var(--kzv-line);
}
.kzv-faq__item {
  border-bottom: 1px solid var(--kzv-line);
  padding: 1.2rem 0;
}
.kzv-faq__q {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.4rem 2.4rem 0.4rem 0;
  text-align: left;
  font-family: var(--kzv-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--kzv-ink);
  cursor: pointer;
  position: relative;
}
.kzv-faq__q::after {
  content: "\2b";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--kzv-font);
  font-size: 1.2rem;
  color: var(--kzv-gold);
  transition: transform 0.3s var(--kzv-ease);
}
.kzv-faq__q[aria-expanded="true"]::after { content: "\2212"; }
.kzv-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--kzv-ease);
  color: var(--kzv-ink-3);
  font-size: 0.96rem;
}
.kzv-faq__a p { margin: 0.8rem 0 0; }
.kzv-faq__a.is-open { max-height: 340px; }

/* Forms */
.kzv-form {
  background: var(--kzv-paper);
  border-radius: var(--kzv-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid var(--kzv-line);
  box-shadow: var(--kzv-shadow-md);
}
.kzv-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.kzv-field { margin-bottom: 1rem; }
.kzv-label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--kzv-ink-2);
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.kzv-input,
.kzv-textarea,
.kzv-select {
  width: 100%;
  font-family: inherit;
  font-size: 0.98rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--kzv-line-strong);
  border-radius: var(--kzv-radius-sm);
  background: var(--kzv-cream);
  color: var(--kzv-ink);
  transition: border-color 0.25s var(--kzv-ease), box-shadow 0.25s var(--kzv-ease);
}
.kzv-textarea { min-height: 130px; resize: vertical; }
.kzv-input:focus,
.kzv-textarea:focus,
.kzv-select:focus {
  outline: none;
  border-color: var(--kzv-gold);
  box-shadow: 0 0 0 4px rgba(201, 154, 63, 0.18);
}
.kzv-input.is-invalid,
.kzv-textarea.is-invalid,
.kzv-select.is-invalid {
  border-color: #b23a3a;
  box-shadow: 0 0 0 4px rgba(178, 58, 58, 0.14);
}

/* Footer */
.kzv-footer {
  background: var(--kzv-ink);
  color: rgba(246, 239, 227, 0.76);
  padding: clamp(3rem, 6vw, 5rem) 0 1.6rem;
  font-size: 0.92rem;
}
.kzv-footer a { color: rgba(246, 239, 227, 0.76); }
.kzv-footer a:hover { color: var(--kzv-gold-bright); }
.kzv-footer h3 {
  color: var(--kzv-cream);
  font-size: 1rem;
  font-family: var(--kzv-font);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.kzv-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--kzv-line-dark);
}
.kzv-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.kzv-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.4rem;
  font-size: 0.84rem;
  color: rgba(246, 239, 227, 0.55);
}
.kzv-footer__brand {
  font-family: var(--kzv-display);
  color: var(--kzv-cream);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* Cookie banner (unique to Keuzepulsveld) */
.kzv-consent {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 140%);
  width: min(960px, 94vw);
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s var(--kzv-ease), opacity 0.4s var(--kzv-ease);
}
.kzv-consent.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.kzv-consent.is-closing {
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
}
.kzv-consent[hidden] { display: none !important; }

.kzv-consent__card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  background: rgba(10, 22, 34, 0.96);
  color: var(--kzv-cream);
  border: 1px solid rgba(201, 154, 63, 0.4);
  border-radius: var(--kzv-radius-lg);
  padding: 1.4rem 1.6rem;
  box-shadow: var(--kzv-shadow-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.kzv-consent__mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--kzv-gold) 0%, var(--kzv-gold-bright) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kzv-ink);
  font-size: 1.35rem;
  flex-shrink: 0;
}
.kzv-consent__body { min-width: 0; }
.kzv-consent__lede {
  font-family: var(--kzv-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: var(--kzv-cream);
}
.kzv-consent__text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(246, 239, 227, 0.78);
  margin: 0 0 0.35rem;
  max-width: 60ch;
}
.kzv-consent__link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--kzv-gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kzv-consent__link:hover { color: var(--kzv-cream); }
.kzv-consent__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.kzv-consent__decline,
.kzv-consent__accept {
  font-family: var(--kzv-font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.7rem 1.15rem;
  border-radius: var(--kzv-radius-pill);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 0.25s var(--kzv-ease), color 0.25s var(--kzv-ease),
    border-color 0.25s var(--kzv-ease);
}
.kzv-consent__decline {
  background: transparent;
  color: rgba(246, 239, 227, 0.82);
  border-color: var(--kzv-line-dark);
}
.kzv-consent__decline:hover {
  color: var(--kzv-cream);
  border-color: rgba(246, 239, 227, 0.5);
}
.kzv-consent__accept {
  background: var(--kzv-gold);
  color: var(--kzv-ink);
}
.kzv-consent__accept:hover {
  background: var(--kzv-gold-bright);
  color: var(--kzv-ink);
}

/* Helpers */
.kzv-cover-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.kzv-shadow-lg { box-shadow: var(--kzv-shadow-lg); }
.kzv-rounded { border-radius: var(--kzv-radius-lg); overflow: hidden; }
.kzv-divider { height: 1px; background: var(--kzv-line); margin: 2.5rem 0; }
.kzv-list-check {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.kzv-list-check li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--kzv-ink-2);
  font-size: 0.96rem;
}
.kzv-list-check i { color: var(--kzv-gold); margin-top: 0.2rem; }

/* Responsive */
@media (max-width: 991.98px) {
  .kzv-hero__grid { grid-template-columns: 1fr; }
  .kzv-hero__card { max-width: 480px; aspect-ratio: 4 / 3; }
  .kzv-gallery { grid-template-columns: 1fr 1fr; }
  .kzv-gallery__item:first-child { grid-row: span 1; aspect-ratio: 4 / 3; }
  .kzv-footer__grid { grid-template-columns: 1fr 1fr; }
  .kzv-nav { display: none; }
  .kzv-nav-toggle { display: inline-flex; margin-left: auto; }
  .kzv-header__meta { display: none; }
  .kzv-consent__card {
    grid-template-columns: auto 1fr;
    align-items: start;
    row-gap: 1rem;
  }
  .kzv-consent__row {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .kzv-consent__mark { width: 46px; height: 46px; font-size: 1.15rem; }
}

@media (max-width: 575.98px) {
  .kzv-form__row { grid-template-columns: 1fr; }
  .kzv-footer__grid { grid-template-columns: 1fr; }
  .kzv-consent { bottom: 0.6rem; width: 96vw; }
  .kzv-consent__card { padding: 1.15rem 1.1rem; }
  .kzv-consent__row { flex-direction: column-reverse; align-items: stretch; }
  .kzv-consent__decline,
  .kzv-consent__accept { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .kzv-card:hover { transform: none; }
  .kzv-btn:hover { transform: none; }
}
/* Contrast fix: gold accent dot in the light header needs a darker gold (>=4.5:1 on cream) */
.kzv-header .kzv-brand__accent {
  color: #8a6a1f;
}

.kzv-header .kzv-brand:hover .kzv-brand__accent {
  color: #6f5619;
}

/* Contrast fix: brand accent dot on light header needs a darker gold (4.5:1+ on cream) */
.kzv-header .kzv-brand__accent,
.kzv-header .kzv-brand__wordmark .kzv-brand__accent {
  color: #7d5a1c;
}

/* Keep the accent legible (bright) on the dark footer background */
.kzv-footer .kzv-brand__accent {
  color: var(--kzv-gold-bright);
}

/* --- Contrast fixes (gold on light backgrounds) --- */
/* Darker gold for the brand accent dot inside the header (cream background) */
.kzv-header .kzv-brand__accent {
  color: #8f6a1c;
}

/* Darker gold for numeric figures sitting on white / sand backgrounds */
.kzv-numbers__val {
  color: #8f6a1c;
}

/* Keep the brighter gold where the figures sit on the dark ink section */
.kzv-section--ink .kzv-numbers__val {
  color: var(--kzv-gold-bright);
}

/* Contrast fix: hero meta role text (Bootstrap .text-white-50 is too faint over the photo) */
.kzv-hero .kzv-quote__role,
.kzv-hero .kzv-quote__role.text-white-50 {
  color: #eef2f6 !important;
  opacity: 1;
}

/* Hero meta: keep the "name" line crisp as well */
.kzv-hero .kzv-quote__name.text-white {
  color: #ffffff !important;
}

/* Contrast fix: cookie consent "Alles accepteren" button.
   Use an explicit opaque gold background + dark ink text so the rendered
   background never falls back to the dark consent card (ratio ~1:1). */
.kzv-consent .kzv-consent__accept,
.kzv-consent__row .kzv-consent__accept {
  background-color: #c99a3f !important;
  background-image: none !important;
  color: #0a1622 !important;
  border-color: #c99a3f !important;
  opacity: 1;
}

.kzv-consent .kzv-consent__accept:hover,
.kzv-consent .kzv-consent__accept:focus,
.kzv-consent .kzv-consent__accept:active,
.kzv-consent__row .kzv-consent__accept:hover,
.kzv-consent__row .kzv-consent__accept:focus,
.kzv-consent__row .kzv-consent__accept:active {
  background-color: #e2b95f !important;
  color: #0a1622 !important;
  border-color: #e2b95f !important;
}

.kzv-consent .kzv-consent__accept:focus-visible {
  outline: 2px solid #fcf9f3;
  outline-offset: 2px;
}

/* --- Layout fix: hero card must grow with its content instead of a fixed 4/5 ratio (content was clipped) --- */
.kzv-hero__card {
  aspect-ratio: auto;
  overflow: hidden;
  height: auto;
}

.kzv-hero__card .kzv-card__body {
  height: auto !important;
  min-height: 0;
}

@media (max-width: 991.98px) {
  .kzv-hero__card {
    aspect-ratio: auto;
  }
}

/* --- Contrast fix: hero statistics sit on the photo, so they get a dark plate behind them --- */
.kzv-hero__stats {
  background: rgba(10, 22, 34, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
}

.kzv-hero__stats .kzv-stat__val {
  color: #f2cf8a;
}

.kzv-hero__stats .kzv-stat__label {
  color: #ffffff;
}

/* --- Layout fix: hamburger toggle was pushed off-canvas by the navbar-collapse sibling --- */
@media (max-width: 991.98px) {
  .kzv-header__inner .navbar-toggler {
    margin-left: auto;
    flex-shrink: 0;
  }
  .kzv-header__inner .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
  }
}

/* --- Overlap fix: full-width cookie card on small screens grew so tall it covered the
   hero heading/lead. Keep it compact, scrollable if needed, and clear of the page edges. --- */
@media (max-width: 991.98px) {
  .kzv-consent {
    bottom: 0.75rem;
  }
  .kzv-consent__card {
    max-height: min(62vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .kzv-consent__text {
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.3rem;
  }
  .kzv-consent__lede {
    font-size: 1.02rem;
  }
  .kzv-consent__row {
    gap: 0.5rem;
  }
  .kzv-consent__decline,
  .kzv-consent__accept {
    padding: 0.62rem 1rem;
  }
}

@media (max-width: 575.98px) {
  .kzv-consent {
    bottom: 0.5rem;
    width: min(96vw, 420px);
  }
  .kzv-consent__card {
    max-height: 58vh;
    padding: 1rem 1rem 1.05rem;
    gap: 0.85rem;
    border-radius: var(--kzv-radius-md);
  }
  .kzv-consent__mark {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .kzv-consent__text {
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

/* --- Overlap fix (follow-up): the consent dialog keeps its fixed bottom position, but the
   hero carousel content is vertically centered in a 720px min-height block, so on short
   mobile viewports the lower part of the copy sits under the dialog. Top-align the hero
   content on small screens so the eyebrow, heading and lead are never covered. --- */
@media (max-width: 991.98px) {
  .kzv-hero .carousel-item {
    min-height: 560px !important;
  }
  .kzv-hero .carousel-item > .kzv-container {
    align-items: flex-start !important;
    min-height: 560px !important;
    padding-top: 2.5rem !important;
    padding-bottom: 9.5rem !important;
  }
}

/* --- Overlap fix (final): give the hero extra bottom breathing room on small screens so the
   fixed consent dialog never covers the lead paragraph while it is shown.
   The dialog itself is anchored to the bottom of the viewport. --- */
@media (max-width: 991.98px) {
  .kzv-hero .carousel-item {
    min-height: 720px !important;
  }
  .kzv-hero .carousel-item > .kzv-container {
    align-items: flex-start !important;
    min-height: 720px !important;
    padding-top: 2.5rem !important;
    padding-bottom: 16rem !important;
  }
  .kzv-hero .carousel-indicators {
    bottom: 0.25rem;
  }
}

/* --- Overlap fix (measured): at 360px the compact consent card is ~300px tall and pinned to
   the bottom of a 720px viewport, so it covers the hero from ~420px down. Reserve that exact
   space inside the first slide: height of viewport minus the card, with the copy top-aligned. --- */
@media (max-width: 575.98px) {
  .kzv-hero .carousel-item:first-child,
  .kzv-hero .carousel-item:first-child > .kzv-container {
    min-height: calc(100svh - 9.5rem) !important;
  }
  .kzv-hero .carousel-item:first-child > .kzv-container {
    padding-bottom: 1.5rem !important;
  }
  .kzv-hero .carousel-item:first-child .kzv-lead {
    margin-bottom: 1rem;
  }
  .kzv-hero .carousel-item:first-child .kzv-btn {
    padding: 0.7rem 1.3rem;
    font-size: 0.9rem;
  }
}

/* --- Overlap fix: the large "4,7" figure (line-height 1) sat on top of its
   "gemiddelde beoordeling" caption on narrow screens. Give the value a real box
   (line-height > 1, block display) and rely on a normal gap instead of the
   negative-looking tight leading. --- */
.kzv-numbers .kzv-numbers__val {
  display: block;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  padding-bottom: 0.1em;
}

@media (max-width: 991.98px) {
  .kzv-numbers .kzv-numbers__item {
    padding: 1.5rem 1rem;
  }
  .kzv-numbers .kzv-numbers__val {
    font-size: clamp(2.6rem, 11vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 0.55rem;
  }
  .kzv-numbers .kzv-numbers__label {
    display: block;
    line-height: 1.45;
  }
}

/* --- Clipping fix: article hero heading was clipped at the left viewport edge.
   Bootstrap's .row/.col negative gutters pull the h1 outside the container's
   inset while .kzv-hero clips overflow; re-inset the content on small screens. --- */
@media (max-width: 991.98px) {
  .kzv-hero > .kzv-container > .row {
    margin-left: 0;
    margin-right: 0;
  }

  .kzv-hero > .kzv-container > .row > [class*="col-"],
  .kzv-hero > .kzv-container > .row > [class*="col"] {
    padding-left: 0;
    padding-right: 0;
  }

  .kzv-hero > .kzv-container > .row h1 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    max-width: 100%;
  }
}

/* --- Clipping fix v2: the previous attempt zeroed the Bootstrap column padding while the
   heading was left-shifted out of the clipped hero. Re-inset the hero text instead of
   removing it, and scope it to the hero row only (article hero = .row > .col-lg-9,
   service/course hero = .kzv-hero__grid). --- */
@media (max-width: 991.98px) {
  /* Undo the over-correction: give the article hero column back its horizontal inset */
  .kzv-hero > .kzv-container > .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

  .kzv-hero > .kzv-container > .row > [class*="col"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Keep long Dutch compound words inside the box without clipping the glyphs */
  .kzv-hero h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    -webkit-hyphens: none;
    hyphens: none;
    text-wrap: balance;
  }

  /* The service/course hero uses a grid container without Bootstrap gutters;
     make sure its heading is also flush inside the clipped section. */
  .kzv-hero__grid h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    -webkit-hyphens: none;
    hyphens: none;
  }
}