/* ============================================================
   HARMANUS — site v2 (dark cinematic)
   Loads after styles.css. Base = black, panels = dark green,
   details = light green, red micro-accents only.
   Approved & untouched: header, hero/banner, footer, FAQ.
   ============================================================ */

/* ============================================================
   Dark base
   ============================================================ */
body {
  background: var(--c-black);
  color: var(--text-inverse);
}

/* Header scrolled state: solid black, matcht de donkere secties */
.site-header.is-scrolled {
  background: #000;
  color: var(--text-inverse);
  border-bottom-color: var(--border-on-dark);
}
.site-header.is-scrolled .btn-primary {
  background: var(--surface-dark);
  color: var(--text-inverse);
}

/* Default text colors on the dark base */
.eyebrow { color: var(--accent-soft); }
.section-head p,
.section-head-row .head-left p { color: var(--text-muted-on-dark); }
.btn-link { color: var(--text-inverse); }
.btn-ghost { color: var(--text-inverse); border-color: var(--border-on-dark); }
.btn-ghost:hover,
.btn-ghost:focus-visible { background: rgba(244, 243, 237, 0.06); border-color: var(--detail); }

/* Section tints — rhythm between black and dark green */
.sec-black { background: #000; }
.sec-grad-down { background: linear-gradient(180deg, var(--c-black) 0%, #101b15 100%); }
.sec-line-top { border-top: 1px solid var(--border-on-dark); }

/* ============================================================
   Page hero (subpages) — unchanged pattern, approved vibe
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 64vh;
  background: var(--bg-cinematic);
  color: var(--text-inverse);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-top: 140px;
  padding-bottom: var(--s-8);
}
@media (max-width: 639px) { .page-hero { min-height: 70vh; } }

.page-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero .hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
}
.page-hero .hero-overlay { z-index: 1; }
.page-hero .hero-grain { z-index: 1; }
.page-hero .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--s-5);
}
.page-hero .t-display-hero {
  font-size: clamp(44px, 7vw, 104px);
  max-width: 16ch;
}
.page-hero .hero-sub { max-width: 56ch; }
.page-hero .hero-actions { margin-top: var(--s-3); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  color: rgba(244, 243, 237, 0.6);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.breadcrumbs a { color: rgba(244, 243, 237, 0.78); transition: color var(--dur-base) var(--ease-std); }
.breadcrumbs a:hover { color: var(--accent-soft); }
.breadcrumbs .sep { color: var(--accent-soft); }
.breadcrumbs [aria-current] { color: var(--text-inverse); }

/* ============================================================
   Horizontal scroll gallery (GSAP-pinned; native fallback)
   ============================================================ */
.hscroll {
  position: relative;
  overflow: hidden;
}
.hscroll-track {
  display: flex;
  gap: var(--s-5);
  padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}
/* Fallback (no JS / reduced motion / touch): native swipe */
.no-js .hscroll,
.hscroll.is-native {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hscroll.is-native::-webkit-scrollbar { display: none; }
.hscroll.is-native .hscroll-track > * { scroll-snap-align: start; }

.hscroll-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
/* ============================================================
   Video course card (.vcard) — photo/video, cinematic
   ============================================================ */
.vcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 380px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid var(--border-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.vcard:hover {
  border-color: rgba(166, 221, 204, 0.55);
  box-shadow: var(--el-cinematic);
}
.vcard-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.vcard-media img,
.vcard-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-in);
  filter: saturate(0.85) contrast(1.05);
}
.vcard:hover .vcard-media img,
.vcard:hover .vcard-media video { transform: scale(1.08); }
.vcard-media::after {
  /* filmic green-black wash + readable bottom */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 12, 11, 0.10) 0%, rgba(11, 12, 11, 0.05) 40%, rgba(11, 12, 11, 0.92) 100%),
    linear-gradient(180deg, rgba(19, 33, 25, 0.25), rgba(19, 33, 25, 0.05) 50%);
}
.vcard-top {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vcard-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(244, 243, 237, 0.75);
}
.vcard-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--accent-soft);
  border-radius: var(--r-xs);
  padding: 5px 9px;
}
.vcard-chip.outline {
  background: rgba(11, 12, 11, 0.45);
  color: var(--text-inverse);
  border: 1px solid rgba(244, 243, 237, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vcard-cta {
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(11, 12, 11, 0.45);
  border: 1px solid rgba(166, 221, 204, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.vcard-cta .arr {
  transition: transform var(--dur-base) var(--ease-std);
}
.vcard:hover .vcard-cta {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-color: transparent;
}
.vcard:hover .vcard-cta .arr { transform: translateX(3px); }
.vcard-body {
  position: relative;
  z-index: 1;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: grid;
  gap: var(--s-3);
}
.vcard-body .t-label { color: var(--accent-soft); display: inline-flex; align-items: center; gap: var(--s-2); }
.vcard-body .t-label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--detail);
}
.vcard-body h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-inverse);
  max-width: 16ch;
}
.vcard-body p {
  color: rgba(244, 243, 237, 0.72);
  font-size: 14px;
  line-height: 1.55;
  max-width: 34ch;
}
.vcard-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(4px, 0.65vw, var(--s-3));
  color: rgba(244, 243, 237, 0.62);
  font-size: clamp(9px, 0.72vw, 12px);
  letter-spacing: 0.025em;
  white-space: nowrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-on-dark);
}
.vcard-meta li { display: inline-flex; align-items: center; min-width: 0; }
.vcard-meta li::before { content: "/"; color: var(--accent-soft); margin-right: 4px; }

/* Grid layout (cursussen page) */
.vcard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.vcard-grid .vcard { width: auto; aspect-ratio: 4 / 5; }
@media (max-width: 1023px) {
  .vcard-grid { grid-template-columns: 1fr; }
  .vcard-grid .vcard { aspect-ratio: 4 / 5; }
}
@media (max-width: 639px) {
  .vcard-grid .vcard { aspect-ratio: 3 / 4; }
}

/* ============================================================
   Testimonial video card (.tcard) — portrait, scrollable
   ============================================================ */
.tcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(240px, 23vw, 320px);
  aspect-ratio: 9 / 14;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid var(--border-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.tcard:hover { transform: translateY(-6px); border-color: rgba(166, 221, 204, 0.45); }
.tcard-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tcard-media img,
.tcard-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 900ms var(--ease-in);
  filter: saturate(0.8) contrast(1.05);
}
.tcard:hover .tcard-media img,
.tcard:hover .tcard-media video { transform: scale(1.1); }
.tcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 11, 0.15) 0%, rgba(11, 12, 11, 0.05) 35%, rgba(11, 12, 11, 0.92) 100%);
}
.tcard-play {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(11, 12, 11, 0.4);
  border: 1px solid rgba(244, 243, 237, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: var(--text-inverse);
  transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}
.tcard-play svg { width: 14px; height: 14px; margin-left: 2px; }
.tcard:hover .tcard-play { background: var(--accent-soft); color: var(--text-on-accent); border-color: transparent; }
.tcard-body {
  position: relative;
  z-index: 1;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.tcard-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--text-inverse);
}
.tcard-quote::before { content: "“"; }
.tcard-quote::after { content: "”"; }
.tcard-attrib {
  display: grid;
  gap: var(--s-2);
}
.tcard-attrib .hairline { width: 24px; }
.tcard-attrib .who {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 243, 237, 0.7);
}

/* ============================================================
   Plan picker — interactive pricing (vanilla port of the
   selectable-rows + billing-toggle concept)
   ============================================================ */
.plan-picker-wrap {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--s-9);
  align-items: start;
}
@media (max-width: 1023px) { .plan-picker-wrap { grid-template-columns: 1fr; gap: var(--s-7); } }

.plan-picker {
  background: var(--surface-dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  display: grid;
  gap: var(--s-5);
  box-shadow: var(--el-inset);
  max-width: 560px;
  width: 100%;
}
@media (max-width: 639px) { .plan-picker { padding: var(--s-5); } }

.billing-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(11, 12, 11, 0.5);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-sm);
  padding: 4px;
  height: 52px;
}
.billing-toggle .toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: rgba(166, 221, 204, 0.14);
  border: 1px solid rgba(166, 221, 204, 0.4);
  border-radius: 3px;
  transition: transform 380ms var(--ease-in);
  pointer-events: none;
}
.billing-toggle[data-cycle="yearly"] .toggle-thumb { transform: translateX(100%); }
.billing-toggle button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 243, 237, 0.55);
  transition: color var(--dur-base) var(--ease-std);
  border-radius: 3px;
}
.billing-toggle button[aria-pressed="true"] { color: var(--text-inverse); }
.billing-toggle .save-chip {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-radius: var(--r-xs);
  padding: 3px 6px;
  white-space: nowrap;
}

.plan-options { display: grid; gap: var(--s-3); }
.plan-option {
  position: relative;
  width: 100%;
  text-align: left;
  background: rgba(11, 12, 11, 0.35);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  padding: var(--s-5);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
  color: var(--text-inverse);
  font-family: var(--font-sans);
}
.plan-option:hover { border-color: rgba(166, 221, 204, 0.35); }
.plan-option.is-selected {
  border-color: var(--accent-soft);
  background: rgba(166, 221, 204, 0.06);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.plan-option-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-4);
  align-items: center;
}
.plan-radio {
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(244, 243, 237, 0.25);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-base) var(--ease-std);
  flex-shrink: 0;
}
.plan-option.is-selected .plan-radio { border-color: var(--accent-soft); }
.plan-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  transform: scale(0);
  transition: transform 300ms var(--ease-in);
}
.plan-option.is-selected .plan-radio::after { transform: scale(1); }
.plan-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.plan-desc {
  display: block;
  font-size: 12px;
  color: rgba(244, 243, 237, 0.55);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.plan-price {
  text-align: right;
  display: grid;
  gap: 2px;
}
.plan-price .amount {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan-price .cycle {
  font-size: 11px;
  color: rgba(244, 243, 237, 0.5);
  letter-spacing: 0.06em;
}
.plan-features-wrap {
  overflow: hidden;
  height: 0;
}
.plan-features {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid var(--border-on-dark);
}
.plan-features li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(244, 243, 237, 0.82);
}
.plan-features li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  flex-shrink: 0;
  position: relative;
  top: -2px;
}
.plan-option .plan-flag {
  position: absolute;
  top: -9px;
  right: var(--s-5);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-radius: var(--r-xs);
  padding: 3px 8px;
}
.plan-picker .btn { width: 100%; }
.plan-picker-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(244, 243, 237, 0.55);
}
.plan-picker-note::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--detail);
  border-radius: var(--r-pill);
}
.plan-trial {
  margin: calc(var(--s-2) * -1) auto 0;
  max-width: 44ch;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(244, 243, 237, 0.58);
}
.plan-courses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.plan-courses .tf-choice span {
  border-color: rgba(244, 243, 237, 0.22);
  color: rgba(244, 243, 237, 0.75);
}
.plan-courses .tf-choice input:checked + span,
.plan-courses .tf-choice.is-active span {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-color: var(--accent-soft);
}
.plan-picker--course {
  max-width: none;
  padding: var(--s-5);
  gap: var(--s-4);
}
.plan-picker--course .plan-option { padding: var(--s-4); }
.plan-picker--course .plan-name { font-size: 15px; }
.plan-picker--course .plan-desc { font-size: 11px; }
.plan-picker--course .plan-price .amount { font-size: 24px; }
.plan-picker--course .plan-features { padding-top: var(--s-4); margin-top: var(--s-4); }
.course-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  width: auto;
  margin-top: var(--s-5);
  color: var(--text-inverse);
}
.course-proof .g-stars { color: #f5b301; letter-spacing: 0.08em; }
.course-proof .fr-text { font-size: 12px; color: rgba(244, 243, 237, 0.72); }
.curriculum-list { max-width: none; margin-top: var(--s-6); }
.curriculum-list .faq-q {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  padding: var(--s-4) 0;
}
.curriculum-list .faq-a > p {
  padding: 0 calc(22px + var(--s-3)) var(--s-5) calc(24px + var(--s-3));
}
.sec-light .curriculum-list .faq-item { border-color: var(--border-subtle); }
.sec-light .curriculum-list .faq-q { color: var(--text-primary); }
.sec-light .curriculum-list .faq-q-num { color: var(--text-muted); }
.sec-light .curriculum-list .faq-a > p { color: var(--text-secondary); }
.sec-light .curriculum-list .bar { background: var(--text-primary); }
.curriculum-chip {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.contact-actions .btn { min-width: 148px; }
.trajectory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.trajectory-card { display: flex; flex-direction: column; gap: var(--s-5); }
.trajectory-card h3 { color: var(--text-inverse); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.trajectory-card .check-list { color: rgba(244, 243, 237, 0.8); }
.trajectory-price { color: var(--accent-soft); font-weight: 600; line-height: 1.55; }
.trajectory-card .tariff-cta { margin-top: auto; }
@media (max-width: 900px) { .trajectory-grid { grid-template-columns: 1fr; } }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.team-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); overflow: hidden; }
.team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card-body { padding: var(--s-5); display: grid; gap: var(--s-2); }
.team-card-body h3 { font-size: 24px; }
.team-card-body p { color: var(--text-muted); }
.media-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); }
.media-links-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-link-card { min-height: 240px; padding: var(--s-6); border: 1px solid var(--border-on-dark); border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; color: var(--text-inverse); background: rgba(244, 243, 237, 0.04); transition: transform var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); }
.media-link-card:hover { transform: translateY(-4px); border-color: var(--accent-soft); }
.media-link-card h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.media-link-type { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); }
.media-link-card--light { color: var(--text-primary); border-color: var(--border-subtle); background: var(--surface); }
@media (max-width: 760px) { .team-grid, .media-links-grid, .media-links-grid--two { grid-template-columns: 1fr; } }

/* ============================================================
   Detail layout (course / masterclass) — dark
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-9);
  align-items: start;
}
@media (max-width: 1023px) { .detail-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

.detail-body .lede { font-size: 19px; line-height: 1.6; color: rgba(244, 243, 237, 0.82); max-width: 60ch; }
.detail-body .lede + p { margin-top: var(--s-5); color: var(--text-muted-on-dark); max-width: 60ch; }
.detail-body h2 { margin-bottom: var(--s-5); }
.learn-list { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.learn-list li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  line-height: 1.6;
  max-width: 56ch;
  color: rgba(244, 243, 237, 0.82);
}
.learn-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  flex-shrink: 0;
  position: relative;
  top: -2px;
}

/* ============================================================
   Curriculum / module list — dark
   ============================================================ */
.module-list { display: grid; gap: var(--s-3); }
.module-item {
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  background: rgba(244, 243, 237, 0.02);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  transition: background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std);
}
.module-item:hover {
  background: rgba(166, 221, 204, 0.06);
  border-color: rgba(166, 221, 204, 0.25);
  transform: translateX(4px);
}
.module-item .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  min-width: 44px;
}
.module-item h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.005em; color: var(--text-inverse); }
.module-item p { margin-top: 6px; color: var(--text-muted-on-dark); font-size: 14px; line-height: 1.55; max-width: 56ch; }
.module-item .dur {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(244, 243, 237, 0.45);
  white-space: nowrap;
}
@media (max-width: 639px) {
  .module-item { grid-template-columns: 1fr; gap: var(--s-3); }
  .module-item .num { min-width: 0; }
}

/* ============================================================
   Steps — dark default
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
}
@media (max-width: 1023px) { .steps-grid { grid-template-columns: 1fr; max-width: 560px; } }
.step {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-on-dark);
}
.step .step-num {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1;
  color: var(--accent-soft);
}
.step h3 { font-size: 20px; letter-spacing: -0.005em; color: var(--text-inverse); }
.step p { color: var(--text-muted-on-dark); font-size: 14px; line-height: 1.6; max-width: 34ch; }

/* ============================================================
   Stats strip — dark
   ============================================================ */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
}
@media (max-width: 1023px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
.stat { display: grid; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--border-on-dark); }
.stat .num {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  color: var(--text-inverse);
}
.stat .lab {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* ============================================================
   Timeline — dark
   ============================================================ */
.timeline { display: grid; gap: 0; }
.timeline-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--border-on-dark);
}
.timeline-item:last-child { border-bottom: 1px solid var(--border-on-dark); }
.timeline-item .year {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
  padding-top: 4px;
}
.timeline-item h3 { font-size: 20px; letter-spacing: -0.005em; color: var(--text-inverse); }
.timeline-item p { margin-top: var(--s-2); color: var(--text-muted-on-dark); font-size: 15px; line-height: 1.6; max-width: 56ch; }
@media (max-width: 639px) { .timeline-item { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ============================================================
   Comparison table — dark
   ============================================================ */
.compare-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
  color: rgba(244, 243, 237, 0.82);
}
.compare-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid rgba(244, 243, 237, 0.4);
}
.compare-table th:first-child { padding-left: 0; }
.compare-table td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-on-dark);
  vertical-align: top;
  line-height: 1.5;
}
.compare-table td:first-child { padding-left: 0; font-weight: 600; color: var(--text-inverse); }
.compare-table .yes { color: var(--accent-soft); font-weight: 600; }
.compare-table .no { color: rgba(244, 243, 237, 0.4); }

/* ============================================================
   Media embed (video block)
   ============================================================ */
.media-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-cinematic);
  border-radius: var(--r-md);
  border: 1px solid var(--border-on-dark);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.media-embed .play-btn {
  width: 72px;
  height: 72px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--text-on-accent);
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std);
  position: relative;
  z-index: 2;
}
.media-embed .play-btn:hover { transform: scale(1.05); background: var(--c-light-green-hover); }
.media-embed .play-btn svg { width: 22px; height: 22px; margin-left: 3px; }
.media-embed .embed-caption {
  position: absolute;
  left: var(--s-5);
  bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(244, 243, 237, 0.5);
  z-index: 2;
}
.media-embed .embed-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.8) contrast(1.05);
}
.media-embed .embed-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 11, 0.25), rgba(11, 12, 11, 0.65));
}

/* ============================================================
   Forms — dark
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-9);
  align-items: start;
}
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* Contact-info als zwart kader (onderscheid van het formulier rechts) */
.contact-channels {
  display: grid;
  gap: 0;
  background: var(--c-black);
  color: var(--text-inverse);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  align-self: start;
}
.contact-channel {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--border-on-dark);
}
.contact-channels .contact-channel:first-child { border-top: 0; padding-top: 0; }
.contact-channels .contact-channel:last-child { padding-bottom: 0; }
.contact-channel .lab {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.contact-channel a { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-inverse); }
.contact-channel a:hover { color: var(--accent-soft); }
.contact-channel p { color: var(--text-muted-on-dark); font-size: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
.form-grid .field-full { grid-column: 1 / -1; }
@media (max-width: 639px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--s-2); }
.field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 243, 237, 0.6);
}
.field input,
.field select,
.field textarea {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-on-dark);
  border-radius: 0;
  font: inherit;
  font-size: 16px;
  color: var(--text-inverse);
  padding: var(--s-3) 0 var(--s-4);
  transition: border-color var(--dur-base) var(--ease-std);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(244, 243, 237, 0.4); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--detail);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6ddcc' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}
.field select option { background: var(--c-dark-green); color: var(--text-inverse); }
.field-check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-muted-on-dark);
  line-height: 1.5;
}
.field-check input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--c-light-green);
  flex-shrink: 0;
}
.form-actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-2); }
.form-actions .btn-primary { background: var(--accent-soft); color: var(--text-on-accent); }
.form-actions .btn-primary:hover,
.form-actions .btn-primary:focus-visible { background: var(--c-light-green-hover); }
.form-note { font-size: 12px; letter-spacing: 0.04em; color: rgba(244, 243, 237, 0.55); display: flex; align-items: center; gap: var(--s-2); }
.form-note::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--detail);
  border-radius: var(--r-pill);
}

/* ============================================================
   USPs on dark (overrides for styles.css .usps)
   ============================================================ */
.usps { background: transparent; border-top: 1px solid var(--border-on-dark); }
.usp { border-top-color: var(--border-on-dark); }
.usp h3 { color: var(--text-inverse); }
.usp p { color: var(--text-muted-on-dark); }
.usp .usp-icon { color: var(--accent-soft); }

/* Sectiekoppen op donker */
.section-head-row .head-left p { color: var(--text-muted-on-dark); }

/* ============================================================
   Abonnement teaser (dark green, kept from v1)
   ============================================================ */
/* ===== Academy lidmaatschap — Container Scroll Animation ===== */
.abo-scroll {
  background: var(--c-white);
  color: var(--text-primary);
  overflow: hidden;
}
.abo-scroll-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-8);
  display: grid;
  gap: var(--s-4);
  justify-items: center;
}
.abo-scroll-head .eyebrow.t-label { color: var(--accent); }
.abo-scroll-title { max-width: 20ch; }
.abo-scroll-sub { color: var(--text-muted); font-size: clamp(17px, 2vw, 20px); }

/* perspective wrapper — drives the 3D tilt of the card */
.abo-scroll-perspective {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  perspective: 1000px;
}

/* the device frame */
.abo-scroll-card {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border: 4px solid #6c6c6c;
  border-radius: 30px;
  background: #222;
  padding: var(--s-3);
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042,
    0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
}
@media (min-width: 768px) { .abo-scroll-card { padding: var(--s-5); } }

/* the screen */
.abo-scroll-screen {
  position: relative;
  width: 100%;
  height: 26rem;
  overflow: hidden;
  border-radius: 16px;
  background: var(--c-black);
}
@media (min-width: 768px) { .abo-scroll-screen { height: 40rem; } }

.abo-scroll-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.85) contrast(1.05);
}
/* filmic green-black wash — darker left so the stacked copy stays legible */
.abo-scroll-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 12, 11, 0.82) 0%, rgba(11, 12, 11, 0.40) 46%, rgba(11, 12, 11, 0.04) 78%),
    linear-gradient(180deg, rgba(11, 12, 11, 0.34) 0%, rgba(11, 12, 11, 0.10) 50%, rgba(11, 12, 11, 0.50) 100%),
    linear-gradient(180deg, rgba(19, 33, 25, 0.22), rgba(19, 33, 25, 0.04) 55%);
}
.abo-scroll-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: clamp(24px, 4vw, 60px);
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s-5);
  color: var(--text-inverse);
}
.abo-scroll-headline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--c-white);
}
.abo-scroll-price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.abo-scroll-price .vanaf {
  color: var(--accent-soft);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
}
.abo-scroll-price .price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.abo-scroll-price .per { color: rgba(244, 243, 237, 0.70); font-size: clamp(14px, 1.4vw, 18px); }
.abo-scroll-copy {
  max-width: 44ch;
  color: rgba(244, 243, 237, 0.82);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.6;
}

/* call to action — sits under the iPad */
.abo-scroll-cta {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
  margin-top: var(--s-8);
}
.abo-scroll-cta .btn { min-width: 280px; }
.abo-scroll-note { color: var(--text-muted); }

/* ============================================================
   Utility
   ============================================================ */
.on-dark .t-h2, .on-dark .t-h3 { color: var(--text-inverse); }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-dark-green);
  color: var(--text-inverse);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
}
.skip-link:focus-visible { left: var(--s-3); top: var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  .vcard-media img, .vcard-media video,
  .tcard-media img, .tcard-media video { transition: none; }
  .billing-toggle .toggle-thumb { transition: none; }
}

/* ============================================================
   v3 — feedbackronde 2
   ============================================================ */

/* --- Cijfers nooit in serif --- */
.stat .num,
.plan-price .amount,
.step .step-num,
.docent-credentials .num {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Light blocks (beige editorial secties) --- */
.sec-light {
  background: var(--c-beige);
  color: var(--text-primary);
}
.sec-light .eyebrow { color: var(--text-muted); }
.sec-light .section-head p,
.sec-light .section-head-row .head-left p { color: var(--text-muted); }
.sec-light .t-h1, .sec-light .t-h2, .sec-light .t-h3 { color: var(--text-primary); }
.sec-light .btn-link { color: var(--text-primary); }
.sec-light .btn-ghost { color: var(--text-primary); border-color: var(--border-subtle); }
.sec-light .btn-ghost:hover,
.sec-light .btn-ghost:focus-visible { background: rgba(11, 12, 11, 0.04); border-color: var(--detail); }
.sec-light .usps,
.sec-light.usps { border-top-color: var(--border-subtle); }
.sec-light .usp { border-top-color: var(--border-subtle); }
.sec-light .usp h3 { color: var(--text-primary); }
.sec-light .usp p { color: var(--text-muted); }
.sec-light .usp .usp-icon { color: var(--accent); }
.sec-light .learn-list li { color: var(--text-secondary); }
.sec-light .detail-body .lede { color: var(--text-secondary); }
.sec-light .detail-body .lede + p { color: var(--text-muted); }
.sec-light .module-item {
  background: var(--surface);
  border-color: var(--border-subtle);
}
.sec-light .module-item h3 { color: var(--text-primary); }
.sec-light .module-item p { color: var(--text-muted); }
.sec-light .module-item .num { color: var(--accent); }
.sec-light .module-item .dur { color: var(--text-muted); }
.sec-light .module-item:hover { background: rgba(166, 221, 204, 0.18); border-color: rgba(19, 33, 25, 0.18); }
.sec-light .step { border-top-color: var(--border-subtle); }
.sec-light .step .step-num { color: var(--accent); }
.sec-light .step h3 { color: var(--text-primary); }
.sec-light .step p { color: var(--text-muted); }
.sec-light .timeline-item { border-color: var(--border-subtle); }
.sec-light .timeline-item .year { color: var(--detail); }
.sec-light .timeline-item h3 { color: var(--text-primary); }
.sec-light .timeline-item p { color: var(--text-muted); }
.sec-light .contact-channel { border-top-color: var(--border-subtle); }
.sec-light .contact-channel .lab { color: var(--text-muted); }
.sec-light .contact-channel a { color: var(--text-primary); }
.sec-light .contact-channel a:hover { color: var(--accent); }
.sec-light .contact-channel p { color: var(--text-muted); }
/* Binnen het zwarte contact-kader blijven de kleuren licht-op-donker */
.sec-light .contact-channels .contact-channel { border-top-color: var(--border-on-dark); }
.sec-light .contact-channels .contact-channel .lab { color: var(--accent-soft); }
.sec-light .contact-channels .contact-channel a { color: var(--text-inverse); }
.sec-light .contact-channels .contact-channel a:hover { color: var(--accent-soft); }
.sec-light .contact-channels .contact-channel p { color: var(--text-muted-on-dark); }
.sec-light .field label { color: var(--text-muted); }
.sec-light .field input,
.sec-light .field select,
.sec-light .field textarea {
  color: var(--text-primary);
  border-bottom-color: var(--border-subtle);
}
.sec-light .field input::placeholder,
.sec-light .field textarea::placeholder { color: var(--text-muted); }
.sec-light .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b0c0b' stroke-width='1.5'/%3E%3C/svg%3E");
}
.sec-light .field select option { background: var(--c-white); color: var(--text-primary); }
.sec-light .field-check { color: var(--text-muted); }
.sec-light .field-check input { accent-color: var(--c-dark-green); }
.sec-light .form-actions .btn-primary { background: var(--surface-dark); color: var(--text-inverse); }
.sec-light .form-actions .btn-primary:hover,
.sec-light .form-actions .btn-primary:focus-visible { background: var(--c-black); }
.sec-light .form-note { color: var(--text-muted); }
.sec-light .compare-table { color: var(--text-secondary); }
.sec-light .compare-table th { color: var(--text-muted); border-bottom-color: var(--text-primary); }
.sec-light .compare-table td { border-bottom-color: var(--border-subtle); }
.sec-light .compare-table td:first-child { color: var(--text-primary); }
.sec-light .compare-table .yes { color: var(--accent); }
.sec-light .compare-table .no { color: var(--text-muted); }
.sec-light .stat { border-top-color: var(--border-subtle); }
.sec-light .stat .num { color: var(--text-primary); }
.sec-light .stat .lab { color: var(--accent); }
.sec-light .breadcrumbs { color: var(--text-muted); }

/* --- Image banner (statement-secties met full-bleed beeld) --- */
.image-banner {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg-cinematic);
  color: var(--text-inverse);
  padding-block: var(--s-10);
}
.image-banner .banner-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  filter: saturate(0.85) contrast(1.05);
}
.image-banner .banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(0.85) contrast(1.05);
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .image-banner .banner-video { display: none; }
}
.image-banner .banner-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 12, 11, 0.45) 0%, rgba(11, 12, 11, 0.25) 40%, rgba(11, 12, 11, 0.82) 100%),
    linear-gradient(90deg, rgba(11, 12, 11, 0.55) 0%, rgba(11, 12, 11, 0.12) 55%, rgba(11, 12, 11, 0.35) 100%);
}
.image-banner .banner-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--s-5);
}
.image-banner .banner-inner > * { max-width: 640px; }
.image-banner .t-h1 { color: var(--text-inverse); }
.image-banner .banner-sub {
  color: rgba(244, 243, 237, 0.82);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  max-width: 54ch;
}
.image-banner .hero-actions { margin-top: var(--s-3); }
@media (max-width: 639px) { .image-banner { min-height: 64vh; } }

/* --- Carousel met pijlen --- */
.carousel { position: relative; }
.carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-track {
  display: flex;
  gap: var(--s-5);
  padding: 0 var(--gutter);
  width: max-content;
  margin-inline: auto; /* centres the cards when they fit; scrolls from start when they overflow */
}
.carousel-track > * { scroll-snap-align: start; }

/* Flanking nav arrows (desktop). Mobile: hidden, native swipe takes over. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-on-dark);
  background: rgba(11, 12, 11, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  transition: background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std);
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow--prev { left: var(--s-5); }
.carousel-arrow--next { right: var(--s-5); }
.carousel-arrow:hover:not(:disabled),
.carousel-arrow:focus-visible:not(:disabled) {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-color: transparent;
}
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 767px) { .carousel-arrow { display: none; } }
/* vcard-media: extra schaal zodat parallax nooit randen toont */
.vcard-media img,
.vcard-media video { transform: scale(1.12); }
.vcard:hover .vcard-media img,
.vcard:hover .vcard-media video { transform: scale(1.18); }

/* ============================================================
   Visueel verborgen, leesbaar voor screenreaders
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Blog overview (.blog-grid / .post-card)
   ============================================================ */
.blog-grid {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.post-card:hover {
  border-color: rgba(166, 221, 204, 0.55);
  box-shadow: var(--el-cinematic);
}
.post-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-in);
  filter: saturate(0.85) contrast(1.05);
}
.post-card:hover .post-media img { transform: scale(1.08); }
.post-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-5);
}
.post-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.post-meta span + span { color: var(--text-muted-on-dark); }
.post-meta span + span::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--text-muted-on-dark);
}
.post-body h3 {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-inverse);
}
.post-body p {
  color: rgba(244, 243, 237, 0.72);
  font-size: 14px;
  line-height: 1.55;
}
.post-link {
  margin-top: 0;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-soft);
}

@media (max-width: 639px) {
  .vcard-meta {
    gap: 4px;
    font-size: 9px;
    letter-spacing: 0;
  }
  .vcard-meta li::before { margin-right: 3px; }
  .curriculum-list .faq-q {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--s-2);
    padding: var(--s-4) 0;
  }
  .curriculum-list .faq-a > p {
    padding: 0 0 var(--s-5);
  }
}
.post-link .arr { transition: transform var(--dur-base) var(--ease-std); }
.post-card:hover .post-link .arr { transform: translateX(3px); }
@media (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Nieuwsbrief (subtiele aanmeld-band)
   ============================================================ */
/* Light green band on a light section, no outline */
.newsletter-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6) var(--s-8);
  flex-wrap: wrap;
  padding: var(--s-8);
  background: var(--accent-soft);
  border: 0;
  border-radius: var(--r-lg);
}
@media (max-width: 639px) { .newsletter-band { padding: var(--s-6); } }
.newsletter-copy { display: grid; gap: var(--s-2); max-width: 46ch; }
.newsletter-band .eyebrow { color: var(--text-on-accent); }
.newsletter-band .eyebrow::before {
  animation: dotPulse 2.6s var(--ease-in) infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(0.72); }
}
.newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: var(--w-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-on-accent);
}
.newsletter-copy p { color: rgba(19, 33, 25, 0.72); font-size: 14px; line-height: 1.5; }
.newsletter-form {
  display: flex;
  gap: var(--s-3);
  flex: 1 1 320px;
  max-width: 440px;
}
.newsletter-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--r-sm, 4px);
  background: var(--c-white);
  border: 1px solid rgba(19, 33, 25, 0.16);
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
}
.newsletter-input::placeholder { color: var(--text-muted); }
.newsletter-input:focus-visible {
  outline: none;
  border-color: var(--c-dark-green);
}
/* Dark-green button pops against the mint band */
.newsletter-form .btn-secondary {
  background: var(--surface-dark);
  color: var(--text-inverse);
  flex: 0 0 auto;
}
.newsletter-form .btn-secondary:hover,
.newsletter-form .btn-secondary:focus-visible { background: var(--c-deep-blue); }
.newsletter-form .btn { flex: 0 0 auto; }
.newsletter-band--ebook .newsletter-copy { gap: var(--s-3); }
.newsletter-band--ebook .dl-format {
  background: rgba(19, 33, 25, 0.12);
  color: var(--text-on-accent);
  border: 1px solid rgba(19, 33, 25, 0.16);
}
@media (max-width: 639px) {
  .newsletter-form { flex-basis: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .newsletter-band .eyebrow::before { animation: none; }
}

/* Decorative blob removed site-wide (hero-blob in the banner is separate) */

.footer-credit a {
  color: rgba(244, 243, 237, 0.78);
  transition: color var(--dur-base) var(--ease-std);
  position: relative;
}
.footer-credit a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--detail);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-std);
}
.footer-credit a:hover { color: var(--text-inverse); }
.footer-credit a:hover::after { transform: scaleX(1); }

/* ============================================================
   v4 — feedbackronde 3
   ============================================================ */

/* --- Fullscreen light green CTA banner --- */
.cta-light {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--s-12);
  overflow: hidden;
}
@media (max-width: 1023px) { .cta-light { min-height: 80vh; } }
.cta-light-inner {
  display: grid;
  gap: var(--s-5);
  max-width: 880px;
}
.cta-light .eyebrow { color: var(--text-on-accent); }
.cta-light .eyebrow::before { background: var(--detail); }
.cta-light-title {
  color: var(--text-on-accent);
  font-size: clamp(48px, 7vw, 104px);
  max-width: 14ch;
}
.cta-light-sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  max-width: 56ch;
  color: rgba(19, 33, 25, 0.82);
}
.cta-light-sub a {
  color: var(--text-on-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cta-light-sub a:hover { text-decoration-color: var(--detail); }
.cta-light .hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.cta-light .btn-primary { background: var(--surface-dark); color: var(--text-inverse); }
.cta-light .btn-primary:hover,
.cta-light .btn-primary:focus-visible { background: var(--c-deep-blue); }
.cta-light .btn-ghost { color: var(--text-on-accent); border-color: rgba(19, 33, 25, 0.25); }
.cta-light .btn-ghost:hover,
.cta-light .btn-ghost:focus-visible { background: rgba(19, 33, 25, 0.06); border-color: var(--detail); }
.cta-light .small {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(19, 33, 25, 0.6);
}
.cta-light .small::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--detail);
}

/* ============================================================
   v5 — feedbackronde 4: consistentie
   ============================================================ */

/* Eyebrow altijd minimalistisch 12px — overrule .section-head p (18px),
   die door specificiteit anders de eyebrow opblies. */
.eyebrow.t-label,
.hero-eyebrow.t-label,
.section-head .eyebrow,
.section-head-row .eyebrow,
.faq-intro .eyebrow,
.docent-text .eyebrow {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.18em;
}

/* Sectie-omschrijvingen overal gelijk: 18px, rustige regelafstand */
.section-head > p:not(.eyebrow),
.section-head-row .head-left > p:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.6;
}

/* ============================================================
   v6 — cursussen: filter, routes, cta-video
   ============================================================ */

/* --- Filter bar --- */
.course-filter {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border-on-dark);
}
.course-filter .filter-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(244, 243, 237, 0.7);
  background: transparent;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  transition: color var(--dur-base) var(--ease-std), background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.filter-chip:hover { color: var(--text-inverse); border-color: rgba(166, 221, 204, 0.4); }
.filter-chip.is-active {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-color: transparent;
}
.filter-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(244, 243, 237, 0.5);
}
.vcard.is-hidden { display: none; }
@media (max-width: 639px) {
  .filter-count { margin-left: 0; width: 100%; }
}

/* --- Route cards (light section, colored blocks like the homepage) --- */
.route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1023px) { .route-grid { grid-template-columns: 1fr; } }
.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 360px;
  padding: var(--s-7);
  border-radius: var(--r-lg);
  border: 0;
  background: var(--surface-dark);
  color: var(--text-inverse);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.route-card:hover { transform: translateY(-4px); box-shadow: var(--el-cinematic); }
/* Alle route-kaarten zwart; hover kleurt langzaam naar donkergroen */
.route-grid .route-card {
  background: var(--c-black);
  color: var(--text-inverse);
  transition: background-color 0.9s var(--ease-std), transform var(--dur-base) var(--ease-std), box-shadow var(--dur-base) var(--ease-std);
}
.route-grid .route-card:hover { background: var(--surface-dark); }
.route-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.route-card h3 {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin-top: var(--s-2);
}
.route-card p { font-size: 14px; line-height: 1.6; opacity: 0.78; max-width: 40ch; }
.route-foot {
  margin-top: auto;
  padding-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border-top: 1px solid currentColor;
}
.route-foot { border-top-color: rgba(127, 127, 127, 0.25); }
.route-price { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.route-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.route-card .arr { transition: transform var(--dur-base) var(--ease-std); }
.route-card:hover .arr { transform: translateX(4px); }
.route-flag {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--detail);
  color: var(--c-white);
  border-radius: var(--r-xs);
  padding: 4px 8px;
}

/* --- CTA video frame inside intro-cta --- */
.intro-cta .cta-video { width: 100%; }

/* figure reset voor media-embed */
figure.media-embed { margin: 0; }

/* ============================================================
   v7 — cursussen vervolg
   ============================================================ */

/* Stacked head actions (rechtsboven sectie) */
.head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-3);
}
@media (max-width: 767px) { .head-actions { align-items: flex-start; } }

/* Card CTA hover: rode streep onder de CTA — alleen route-kaarten.
   (vcard-CTA is al een volledige pill-knop; daar is een streep niet relevant.) */
.route-cta {
  position: relative;
  padding-bottom: 5px;
}
.route-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--detail);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-std);
}
.route-card:hover .route-cta::after { transform: scaleX(1); }

/* Twijfel-je-nog CTA op licht: 2-koloms split */
.cta-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-9);
  align-items: center;
}
@media (max-width: 1023px) { .cta-split { grid-template-columns: 1fr; gap: var(--s-7); } }
.sec-light .cta-split .play-btn { background: var(--accent-soft); color: var(--text-on-accent); }
.sec-light .media-embed { border-color: rgba(11, 12, 11, 0.10); }

/* ============================================================
   v9 — pijlers: solid dark green, geen outline, geen border-beam
   ============================================================ */
.pillar { border: 0; }
.pillar::before,
.pillar::after { display: none !important; }

/* ============================================================
   v14 — Google reviews feature (info-paneel links, 1 review per keer rechts)
   ============================================================ */
.greviews-feature .gf-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--s-7), 6vw, var(--s-9));
  align-items: end;
}
.gf-info { display: grid; gap: var(--s-4); }
.gf-info .gf-sub { color: var(--text-secondary); max-width: 46ch; }
.gf-stats { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-5); }
.gf-stat {
  flex: 1 1 0;
  min-width: 110px;
  display: grid;
  gap: 6px;
  align-content: center;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.gf-stat .gf-num {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.gf-stat--stars .g-stars { margin-bottom: 2px; }
.gf-stat .gf-lab { font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); }
.gf-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.gf-nav { display: flex; align-items: center; gap: var(--s-3); }
.gf-arrow {
  width: 46px; height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.gf-arrow:hover { background: var(--accent-soft); color: var(--text-on-accent); border-color: transparent; }
.gf-arrow svg { width: 18px; height: 18px; }
.gf-counter { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); min-width: 62px; text-align: center; }

/* Horizontale paginaslider: track schuift, 1 review in beeld */
.gf-viewport { overflow: hidden; }
.gf-track { display: flex; transition: transform 0.55s var(--ease-std); will-change: transform; align-items: stretch; }
.gf-slide { flex: 0 0 100%; min-width: 100%; display: grid; gap: var(--s-4); align-content: stretch; }
/* Kader: bottom lijnt met 'Neem contact op'; tekst max 6 regels, dan Lees meer */
.gf-card { min-height: clamp(300px, 26vw, 352px); }
.gf-card .greview-text {
  /* font-size komt van .greview-card (15px) — hier alleen de line-clamp */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gf-card.is-expanded .greview-text { -webkit-line-clamp: unset; overflow: visible; }
.gf-readmore {
  justify-self: start;
  margin-top: var(--s-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-std);
}
.gf-readmore[hidden] { display: none; }
.gf-readmore:hover { color: var(--detail); }

@media (max-width: 899px) {
  .greviews-feature .gf-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .gf-actions { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-track { transition: none; }
}

/* ============================================================
   v21 — Blog artikel: sticky TOC + promo-banner + recent/gerelateerd
   ============================================================ */
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.article-layout .article-body { max-width: none; margin: 0; }
.article-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 2px;
}
.article-toc .toc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.article-toc a {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--border-subtle);
  transition: color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.article-toc a:hover { color: var(--text-primary); }
.article-toc a.is-active { color: var(--text-primary); border-left-color: var(--detail); font-weight: 500; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-toc { position: static; top: auto; margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border-subtle); }
}

/* Universele promo-banner (CMS: 3 varianten, kies per blog via class promo-banner--a/b/c) */
.promo-banner {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  padding: clamp(var(--s-6), 5vw, var(--s-8));
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.promo-banner .pb-eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.promo-banner .pb-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--detail); }
.promo-banner h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.promo-banner p { max-width: 54ch; font-size: 16px; line-height: 1.6; opacity: 0.92; }
.promo-banner--a { background: var(--surface-dark); color: var(--text-inverse); }
.promo-banner--b { background: var(--accent-soft); color: var(--text-on-accent); }
.promo-banner--c { background: var(--c-black); color: var(--text-inverse); }
.promo-banner--a .pb-eyebrow, .promo-banner--c .pb-eyebrow { color: var(--accent-soft); }
.promo-banner--b .pb-eyebrow { color: var(--text-on-accent); }

/* Recent + Gerelateerd, titel-only lijsten (donkere sectie) */
.article-lists {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
}
.article-list .al-head {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-soft);
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.article-list .al-head::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--detail); }
.article-list ul { display: grid; gap: 0; }
.article-list li { border-top: 1px solid var(--border-on-dark); }
.article-list li:last-child { border-bottom: 1px solid var(--border-on-dark); }
.article-list a {
  display: block;
  padding: var(--s-4) 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-inverse);
  transition: color var(--dur-base) var(--ease-std), padding-left var(--dur-base) var(--ease-std);
}
.article-list a:hover { color: var(--accent-soft); padding-left: var(--s-2); }
@media (max-width: 720px) { .article-lists { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ============================================================
   v20 — Video-embed placeholder + tarieven-overzicht
   ============================================================ */
.video-embed { margin: 0; display: grid; gap: var(--s-3); }
.video-embed-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-dark-green);
}
.video-embed-media img,
.video-embed-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-embed-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,12,11,0.05), rgba(11,12,11,0.35));
  pointer-events: none;
}
.video-tag {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-inverse);
  background: rgba(11, 12, 11, 0.55);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.video-embed-cap { font-size: 13px; color: var(--text-muted); }
.video-embed--wide { max-width: 920px; margin-left: auto; margin-right: auto; margin-top: var(--s-6); }
.sec-black .video-embed-cap { color: var(--text-muted-on-dark); text-align: center; }

/* Tilburg intro: tekst + praktisch-kaart (2 kolommen i.p.v. lange lap tekst) */
.tilburg-intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: start;
}
@media (max-width: 899px) { .tilburg-intro { grid-template-columns: 1fr; } }
.tilburg-copy { display: grid; gap: var(--s-4); max-width: 62ch; }
.tilburg-copy .lede { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--text-primary); }
.tilburg-copy p { font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.tilburg-copy h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin-top: var(--s-4); }
.facts-card {
  position: sticky;
  top: 96px;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.facts-card .facts-head { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.facts-row { display: grid; gap: 3px; padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); }
.facts-row:first-of-type { padding-top: 0; border-top: 0; }
.facts-row .k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.facts-row .v { font-size: 15px; line-height: 1.4; color: var(--text-primary); }
@media (max-width: 899px) { .facts-card { position: static; top: auto; } }

/* Tarievenpaneel */
.tariff-panel {
  background: var(--surface-dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  display: grid;
  gap: var(--s-5);
  box-shadow: var(--el-inset);
}
@media (max-width: 639px) { .tariff-panel { padding: var(--s-5); } }
.tariff-rows { display: grid; }
.tariff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border-on-dark);
}
.tariff-row:first-child { border-top: 0; padding-top: 0; }
.tariff-row .tariff-label { display: grid; gap: 2px; font-size: 15px; font-weight: 600; color: var(--text-inverse); }
.tariff-row .tariff-sub { font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--text-muted-on-dark); }
.tariff-row .tariff-price { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; }
.tariff-row .tariff-price .amount { font-family: var(--font-sans); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-inverse); }
.tariff-row .tariff-price .cycle { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted-on-dark); }
.tariff-cta { width: 100%; }
.tariff-foot { text-align: center; font-size: 12px; color: var(--text-muted-on-dark); }

/* Aanbod: verwijzing naar offline priveles onder de routes */
.route-extra {
  margin-top: var(--s-6);
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
}
.route-extra a { color: var(--text-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.route-extra a:hover { color: var(--detail); }

/* ============================================================
   v19 — Priveles-promo (split image+tekst) + checklist
   ============================================================ */
.promo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  align-items: stretch;
}
.promo-text { display: grid; gap: var(--s-4); align-content: center; }
.promo-text .lede { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--text-primary); }
.check-list { display: grid; gap: var(--s-2); }
.check-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 5px; top: 8px;
  width: 4px; height: 7px;
  border: solid var(--text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media (max-width: 767px) {
  .promo-split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ============================================================
   v18 — Kernwaarden (5 schone kolommen op een regel, geen kaders,
   dunne hairline-dividers tussen de waarden)
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.value-card {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-1) var(--s-5);
  border-left: 1px solid var(--border-subtle);
  transition: border-color var(--dur-base) var(--ease-std);
}
.value-card:first-child { padding-left: 0; border-left: 0; }
.value-card:last-child { padding-right: 0; }
.value-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-std);
}
.value-card:hover .value-num { color: var(--detail); }
.value-title {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-primary);
}
.value-body { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* tablet: 5 wordt te smal -> 3 kolommen, dividers blijven verticaal */
@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-6); }
  .value-card { padding: var(--s-1) var(--s-4); }
  .value-card:first-child { padding-left: var(--s-4); border-left: 1px solid var(--border-subtle); }
  .value-card:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
/* klein: 2 kolommen */
@media (max-width: 600px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card:nth-child(3n+1) { padding-left: var(--s-4); border-left: 1px solid var(--border-subtle); }
  .value-card:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* mobiel: 1 kolom, horizontale dividers boven elke waarde */
@media (max-width: 420px) {
  .values-grid { grid-template-columns: 1fr; row-gap: 0; }
  .value-card,
  .value-card:nth-child(3n+1),
  .value-card:nth-child(odd) {
    border-left: 0;
    padding: var(--s-5) 0;
    border-top: 1px solid var(--border-subtle);
  }
  .value-card:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   v11 — Blog: vaste (sticky) categoriemenu + artikel-detailpagina
   ============================================================ */
.post-card.is-hidden { display: none; }

/* Sticky categoriemenu op de blog-index */
.blog-filter {
  position: sticky;
  top: 72px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: nowrap;
  margin: 0 0 var(--s-7) 0;
  padding: var(--s-4) 0;
  background: var(--c-black);
  border-bottom: 1px solid var(--border-on-dark);
}
.blog-filter .filter-label { flex-shrink: 0; }
.blog-filter .filter-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.blog-filter .filter-chips::-webkit-scrollbar { display: none; }
.blog-filter .filter-chip { flex: 0 0 auto; }
.blog-filter .filter-count { flex-shrink: 0; }
@media (max-width: 639px) {
  .blog-filter { gap: var(--s-3); }
  .blog-filter .filter-count { display: none; }
}

/* Artikel-detail */
.article-hero { position: relative; }
.article-hero .breadcrumbs { margin-bottom: var(--s-5); }
.article-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.article-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.article-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(244, 243, 237, 0.7);
}
.article-byline .author { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-inverse); }
.article-byline .avatar {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  object-fit: cover;
}
.article-byline .dot { width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--detail); }
.article-views {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Compact auteursblok direct boven het artikel */
.author-note { padding: var(--s-7) 0 0; }
.author-note-inner {
  max-width: 72ch;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.author-note img {
  width: 76px;
  height: 76px;
  border-radius: var(--r-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.author-note h2 {
  margin: 2px 0 var(--s-2);
  font-size: 22px;
  color: var(--text-primary);
}
.author-note p {
  margin: 0 0 var(--s-2);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* WordPress koppelpunt voor waardering en reacties */
.article-reactions {
  max-width: 72ch;
  margin: var(--s-7) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: 14px;
}
.article-reactions button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.article-reactions button:hover,
.article-reactions button:focus-visible { color: var(--detail); }
@media (max-width: 559px) {
  .author-note-inner { align-items: flex-start; }
  .author-note img { width: 60px; height: 60px; }
  .article-reactions { align-items: flex-start; flex-direction: column; }
}

/* Leeskolom */
.article-body {
  max-width: 72ch;
  margin: 0 auto;
}
.article-body > * + * { margin-top: var(--s-5); }
.article-body .lede {
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.5;
  color: var(--text-primary);
}
.article-body p { font-size: 17px; line-height: 1.72; color: var(--text-secondary); }
.article-body h2 {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
  margin-top: var(--s-8);
}
.article-body h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--s-6);
}
.article-body ul, .article-body ol { padding-left: 1.3em; display: grid; gap: var(--s-2); }
.article-body li { font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.article-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--detail); }
.article-body blockquote {
  margin: var(--s-7) 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--detail);
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.4;
  color: var(--text-primary);
}
.article-body hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-8) 0; }

/* ============================================================
   v12 — Dropdown-nav onder Aanbod (desktop hover + mobiel sublink)
   ============================================================ */
.site-nav { align-items: center; }
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item > a,
.nav-item > button { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(45deg); transition: transform var(--dur-base) var(--ease-std); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: translateY(1px) rotate(225deg); }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 250px;
  background: var(--c-dark-green);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  padding: var(--s-2);
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std), visibility var(--dur-base) var(--ease-std);
  z-index: 60;
}
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(6px);
}
.nav-dropdown a {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-inverse);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: rgba(166, 221, 204, 0.12); color: var(--accent-soft); }
.nav-dropdown a .nd-sub { display: block; font-size: 11px; letter-spacing: 0.02em; color: rgba(244, 243, 237, 0.5); margin-top: 2px; text-transform: none; }
/* Mobiel: sub-link onder Aanbod / Kennisbank */
.menu-links .menu-sub { font-size: 0.46em; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; padding-left: var(--s-4); }
.menu-links .menu-sub::before { content: "↳ "; color: var(--accent-soft); }

/* Kleine layout-utilities (voorheen inline styles) */
.mt-7 { margin-top: var(--s-7); }
.section-head--center { text-align: center; justify-items: center; }

/* Contextkleuren (voorheen inline styles) */
/* Footer toont het volledige logo (met beeldmerk), light beige, hover light green, klik naar home */
.site-footer .wordmark {
  color: var(--c-beige);
  width: clamp(186px, 14.9vw, 236px);
  aspect-ratio: 1 / 1;
  -webkit-mask-image: url('../img/harmanus-logo-full.svg');
  mask-image: url('../img/harmanus-logo-full.svg');
  transition: color var(--dur-base) var(--ease-std);
}
.site-footer a.wordmark:hover,
.site-footer a.wordmark:focus-visible { color: var(--c-light-green); }
.menu-meta a.t-meta { color: var(--accent-soft); }

/* Login-link in header (rechts, naast CTA); verborgen op mobiel -> zit in menu */
.nav-login {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  padding: var(--s-2) 0;
  position: relative;
  transition: color var(--dur-base) var(--ease-std);
}
.nav-login::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--detail);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-std);
}
.nav-login:hover::after { transform: scaleX(1); }
@media (max-width: 1023px) { .nav-login { display: none; } }

/* ============================================================
   v13 — Gratis materiaal (downloads), juridische pagina's, hero-varianten
   ============================================================ */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 899px) { .dl-grid { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; } }
.dl-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  align-content: start;
}
.dl-format {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-on-accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 4px 12px;
}
.dl-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.dl-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.dl-form { display: flex; gap: var(--s-4) var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.dl-form input {
  flex: 1 1 160px;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 16px;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
}
.dl-form input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.dl-form .btn { flex: 0 0 auto; }
.dl-note { text-align: center; margin-top: var(--s-6); color: var(--text-muted); }

/* Juridische conceptmelding */
.doc-note {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-accent);
  color: var(--text-on-accent);
  border-radius: var(--r-md);
  font-size: 15px !important;
  line-height: 1.5;
}
.page-hero--short { min-height: 56vh; }
.page-hero--center .hero-inner { align-items: center; justify-items: center; text-align: center; }
.page-hero--center .hero-eyebrow { justify-content: center; }
.page-hero--center .hero-sub { margin-left: auto; margin-right: auto; }
.page-hero--center .hero-actions { justify-content: center; }

/* Auteur-blok onder artikel */
.article-author {
  max-width: 72ch;
  margin: var(--s-9) auto 0;
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.article-author img { width: 64px; height: 64px; border-radius: var(--r-pill); object-fit: cover; flex-shrink: 0; }
.article-author .who { font-weight: 600; font-size: 16px; color: var(--text-primary); }
.article-author .role { font-size: 13px; color: var(--text-muted); margin-bottom: var(--s-2); }
.article-author p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
@media (max-width: 559px) {
  .article-author { flex-direction: column; gap: var(--s-3); }
}

/* ============================================================
   v10 — Google reviews (sectie, summary, kaarten, footer-badge)
   Herbruikbaar component. Goudkleurige sterren = Google-element.
   ============================================================ */
.g-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.g-stars svg { width: 17px; height: 17px; fill: #fbbc04; flex-shrink: 0; }
.g-stars--sm svg { width: 14px; height: 14px; }

/* Google review-kaart */
.greview-card {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-primary);
}
.greview-head { display: flex; align-items: center; gap: var(--s-3); }
.greview-avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-on-accent);
  background: var(--accent-soft);
}
.greview-id { display: grid; gap: 2px; min-width: 0; }
.greview-id .name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.greview-id .when { font-size: 12px; opacity: 0.6; letter-spacing: 0.01em; }
.greview-card .greview-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.greview-card .g-glyph {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  width: 18px; height: 18px;
  opacity: 0.9;
}

/* Footer Google-review kaart (stars boven, score + count, summary) */
a.footer-review {
  display: grid;
  gap: var(--s-2);
  max-width: 300px;
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-std);
}
/* geen rode hover-onderlijn (footer-cols a::after) op de review-kaart */
a.footer-review::after { display: none !important; content: none !important; }
a.footer-review:hover { border-color: rgba(166, 221, 204, 0.4); }
.footer-review .fr-top { display: flex; align-items: center; gap: var(--s-3); }
.footer-review .fr-top .g-logo { width: 20px; height: 20px; flex-shrink: 0; }
.footer-review .fr-score { font-family: var(--font-sans); font-size: 21px; font-weight: 400; letter-spacing: -0.01em; color: var(--text-inverse); line-height: 1; }
.footer-review .fr-score strong { font-weight: 700; }
.footer-review .fr-count { font-size: 15px; color: rgba(244, 243, 237, 0.6); }
.footer-review .fr-text { font-size: 12px; letter-spacing: 0.01em; color: rgba(244, 243, 237, 0.5); }

/* Footer juridische links inline */
.footer-legal-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.footer-legal a { color: rgba(244, 243, 237, 0.6); }
.footer-legal a:hover { color: var(--accent-soft); }

/* ============================================================
   v14 — kernwaarden-icons, introvideo play-knop, method-deck
   ============================================================ */

/* --- Kernwaarden: icon naast het cijfer --- */
.value-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }

/* --- Introvideo: play-knop, Roy spreekt met geluid --- */
.video-play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  width: 100%; border: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.video-play .vp-circle {
  display: grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--accent-soft); color: var(--text-on-accent);
  transition: transform var(--dur-base) var(--ease-std);
}
.video-play .vp-circle svg { width: 30px; height: 30px; margin-left: 4px; }
.video-play:hover .vp-circle { transform: scale(1.07); }
.video-play:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
[data-video-cta].is-playing .video-play { opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-std); }

/* --- Method-deck: fullscreen pijlers schuiven over elkaar (GSAP pin) --- */
.method-deck { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--c-black); }
.deck-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.deck-slide + .deck-slide { transform: translateX(100%); }
.deck-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.deck-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 11, 0.25) 0%, rgba(11, 12, 11, 0.35) 50%, rgba(11, 12, 11, 0.88) 100%);
}
.deck-inner {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-3);
  max-width: 760px;
  padding: clamp(32px, 6vw, 96px);
  color: var(--text-inverse);
}
.deck-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--accent-soft); }
.deck-title { font-family: var(--font-sans); font-weight: 600; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -0.015em; }
.deck-text { max-width: 52ch; font-size: 17px; line-height: 1.6; color: rgba(244, 243, 237, 0.82); }

/* Laatste slide: quote, gecentreerd, geen eyebrow */
.deck-slide--quote { align-items: center; justify-content: center; text-align: center; }
.deck-inner--quote { justify-items: center; max-width: 980px; }
.deck-quote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 4vw, 64px); line-height: 1.15; letter-spacing: -0.01em;
  max-width: 22ch;
}
.deck-attrib { color: rgba(244, 243, 237, 0.7); font-size: 13px; letter-spacing: 0.04em; }

/* Fallback zonder GSAP / touch / reduced motion: slides onder elkaar */
.method-deck.is-static { height: auto; overflow: visible; }
.method-deck.is-static .deck-slide { position: relative; min-height: 100svh; transform: none; }

/* ============================================================
   v27 — Studenten carousel: 2 zichtbare kaarten, pijlen links/
   rechts naast de kaarten, HARMANUS tekstlogo gecentreerd erboven
   ============================================================ */
.tslider-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-4);
  margin-bottom: var(--s-9);
}
/* tekstlogo ~+38% t.o.v. standaard wordmark, met ruime witruimte */
.tslider-head .tslider-mark {
  width: clamp(176px, 12.4vw, 215px);
  margin-bottom: var(--s-5);
}
.tslider-head .t-h2 { margin-top: var(--s-2); }
.tslider {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(var(--s-4), 3vw, var(--s-7));
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tslider-viewport {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tslider-viewport::-webkit-scrollbar { display: none; }
.tslider-track {
  display: flex;
  gap: var(--s-5);
}
.tslider .tcard {
  width: calc((100% - var(--s-5)) / 2);
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.tslider-btn {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-on-dark);
  color: var(--text-inverse);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std);
}
.tslider-btn svg { width: 20px; height: 20px; }
.tslider-btn:hover { background: var(--accent-soft); color: var(--text-on-accent); border-color: transparent; }
.tslider-btn[disabled] { opacity: 0.3; pointer-events: none; }
@media (max-width: 767px) {
  .tslider { gap: var(--s-3); padding-inline: var(--s-4); }
  .tslider .tcard { width: 100%; }
  .tslider-btn { width: 44px; height: 44px; }
}

/* Pijlknoppen op lichte secties */
.sec-light .tslider-btn { border-color: rgba(11, 12, 11, 0.22); color: var(--text-primary); }
.sec-light .tslider-btn:hover { background: var(--accent-soft); color: var(--text-on-accent); border-color: transparent; }

/* ============================================================
   v28 — image-banner variant: full-bleed video met parallax en
   één review (masterclass-expression); gescoped op .image-banner
   zodat de v29 quote-banner (testimonial-slider) er los van staat
   ============================================================ */
.image-banner.quote-banner { min-height: 78vh; }
.image-banner.quote-banner .banner-video {
  inset: auto 0;
  top: -12%;
  height: 124%;
  will-change: transform;
}
.quote-banner-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-6);
}
.image-banner.quote-banner .banner-inner > * { max-width: 820px; }
.image-banner.quote-banner .t-quote {
  color: var(--text-inverse);
  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.4;
}
.image-banner.quote-banner .attrib { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.image-banner.quote-banner .attrib .hairline { width: 28px; background: var(--detail); }
.image-banner.quote-banner .who { color: rgba(244, 243, 237, 0.75); }

/* ============================================================
   v29 — header: navlogo 15% groter
   ============================================================ */
.site-header .wordmark {
  width: clamp(147px, 10.35vw, 179px);
}

/* ============================================================
   v29 — quote-banner: fullscreen parallax testimonial-slider
   (vervangt de mint review-kaarten op alle subpagina's)
   ============================================================ */
section.quote-banner {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-inverse);
  text-align: center;
  background: var(--c-black);
}
.qb-media { position: absolute; inset: 0; z-index: 0; }
.qb-photo {
  position: absolute;
  inset: -14% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.qb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 11, 0.5) 0%, rgba(11, 12, 11, 0.72) 100%);
}
.qb-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  padding: var(--s-9) var(--gutter);
  display: grid;
  gap: var(--s-7);
  justify-items: center;
}
.qb-slides { position: relative; display: grid; width: 100%; }
.qb-slide {
  grid-area: 1 / 1;
  margin: 0;
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-std), transform 0.45s var(--ease-std), visibility 0s linear 0.45s;
}
.qb-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--ease-std) 0.15s, transform 0.6s var(--ease-std) 0.15s, visibility 0s;
}
.qb-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 24ch;
}
.qb-quote::before { content: "“"; margin-right: 2px; }
.qb-quote::after { content: "”"; margin-left: 2px; }
.qb-who { color: var(--accent-soft); }
.qb-nav { display: flex; align-items: center; gap: var(--s-5); }
.qb-counter { color: rgba(244, 243, 237, 0.65); min-width: 64px; }
.qb-arrow { flex: 0 0 auto; }
@media (max-width: 639px) {
  section.quote-banner { min-height: 88vh; }
  .qb-quote { font-size: clamp(22px, 6.4vw, 28px); }
}

/* ============================================================
   v29 — masterclass eventpagina: video in de page-hero
   ============================================================ */
.page-hero .banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   v30 — masterclass tickets: fullwidth event-kaarten met
   perforatie-rand, alsof je een concertticket koopt
   ============================================================ */
.ticket-stack { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); }
.ticket-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  border-radius: var(--r-md);
  overflow: hidden;
}
.ticket-media {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}
.ticket-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease-std);
}
.ticket-card:hover .ticket-media img { transform: scale(1.05); }
.ticket-media .tm-num {
  position: absolute;
  top: var(--s-5);
  left: var(--s-5);
  color: var(--text-inverse);
  opacity: 0.85;
}
.ticket-media .tm-chip {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
}

/* Body = licht beige zodat het ticket van de donkere achtergrond pop-t;
   perforatie = dunne gestippelde lijn + twee inkepingen (halve rondjes) */
.ticket-body {
  position: relative;
  background: var(--c-beige, #f4f3ed);
  color: var(--text-primary);
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  padding-left: calc(clamp(var(--s-6), 4vw, var(--s-8)) + 28px);
  display: grid;
  gap: var(--s-4);
  align-content: center;
}
.ticket-body::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  border-left: 1px dashed rgba(11, 12, 11, 0.35);
}
.ticket-notch-top,
.ticket-notch-bottom {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-black);
  z-index: 2;
  transform: translateX(-50%);
}
.ticket-notch-top { top: -15px; }
.ticket-notch-bottom { bottom: -15px; }

/* Verticale ticket-tekst langs de perforatie */
.ticket-side {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(11, 12, 11, 0.38);
  white-space: nowrap;
}
.ticket-body .t-label { color: var(--text-muted); }
.ticket-body h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  color: var(--text-primary);
}
.ticket-body > p { color: var(--text-secondary); max-width: 58ch; }
.ticket-body .meta-strip { margin-top: var(--s-2); color: var(--text-muted); }
.ticket-body .meta-strip li::before { color: var(--detail); }
.ticket-body .btn-link { color: var(--text-primary); }
.ticket-actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-3); }

@media (max-width: 860px) {
  .ticket-card { grid-template-columns: 1fr; }
  .ticket-media { min-height: 0; aspect-ratio: 16 / 9; }
  .ticket-body { padding: var(--s-6); padding-top: calc(var(--s-6) + 16px); }
  .ticket-body::before { left: 16px; right: 16px; top: 0; bottom: auto; border-left: 0; border-top: 1px dashed rgba(11, 12, 11, 0.35); }
  .ticket-side { display: none; }
  .ticket-notch-top, .ticket-notch-bottom { display: none; }
}

/* ============================================================
   v30 — programma-tabs: kies je masterclass, onderkant wisselt
   ============================================================ */
.mc-tabs {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.mc-tab {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: var(--s-4) var(--s-6);
  border: 1px solid rgba(11, 12, 11, 0.22);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-primary);
  transition: background var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
}
.mc-tab .mc-tab-name {
  font-weight: 600;
  font-size: 15px;
}
.mc-tab .mc-tab-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
}
.mc-tab:hover { border-color: var(--detail); }
.mc-tab.is-active {
  background: var(--c-dark-green, #14211a);
  border-color: transparent;
  color: var(--text-inverse);
}
.mc-tab.is-active .mc-tab-meta { color: var(--accent-soft); opacity: 1; }
.mc-panel { display: none; }
.mc-panel.is-active { display: block; }
.mc-day-label {
  margin: var(--s-6) 0 var(--s-4);
  color: var(--text-muted);
}
.mc-panel .mc-day-label:first-child { margin-top: 0; }

/* ============================================================
   v30 — interesse-formulier: intake aanvragen als ticket-claim
   ============================================================ */
.interest-banner .banner-inner { max-width: none; width: min(1320px, calc(100% - 2 * var(--gutter))); }
.interest-banner .banner-inner > * { max-width: none; }
.interest-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--s-7), 7vw, var(--s-10));
  align-items: center;
  text-align: left;
  width: 100%;
}
.interest-grid .ticket-form { width: 100%; max-width: 560px; justify-self: end; }
.interest-title {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(48px, 5.5vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
  text-wrap: balance;
  margin-top: var(--s-5);
}
.tf-phone {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: var(--s-2);
}
.tf-phone select {
  width: 100%;
  padding: 14px 10px;
  border: 1px solid rgba(11, 12, 11, 0.22);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--text-primary);
  font-size: 14px;
}
.tf-phone select:focus-visible { outline: 2px solid var(--detail); outline-offset: 1px; }
.ticket-form {
  position: relative;
  background: var(--c-beige, #f4f3ed);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: clamp(var(--s-6), 3vw, var(--s-7));
  display: grid;
  gap: var(--s-4);
}
.tf-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 2px dashed rgba(11, 12, 11, 0.18);
}
.tf-head .t-label { color: var(--text-primary); white-space: nowrap; }
.tf-head .tf-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--text-muted); white-space: nowrap; }
.tf-choices { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tf-choice { position: relative; }
.tf-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tf-choice span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(11, 12, 11, 0.22);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.tf-choice input:checked + span { background: var(--surface-dark, #14211a); color: var(--text-inverse); border-color: transparent; }
.tf-choice input:focus-visible + span { outline: 2px solid var(--detail); outline-offset: 2px; }
.tf-fields { display: grid; gap: var(--s-3); }
.tf-fields label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tf-fields input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(11, 12, 11, 0.22);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--text-primary);
  font-size: 15px;
}
.tf-fields input:focus-visible { outline: 2px solid var(--detail); outline-offset: 1px; }
.tf-fields input.is-invalid { border-color: #c0392b; }
.ticket-form .btn { width: 100%; justify-content: center; }
.tf-note { font-size: 12px; color: var(--text-muted); text-align: center; }
.tf-success { display: none; text-align: center; padding: var(--s-6) 0; }
.ticket-form.is-sent .tf-success { display: grid; gap: var(--s-3); justify-items: center; }
.ticket-form.is-sent .tf-choices,
.ticket-form.is-sent .tf-fields,
.ticket-form.is-sent .btn,
.ticket-form.is-sent .tf-note { display: none; }
.tf-success .tf-check {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--text-on-accent);
  display: grid;
  place-items: center;
}
.tf-success .tf-check svg { width: 24px; height: 24px; }
.tf-success h3 { font-family: var(--font-serif); font-weight: 400; font-size: 26px; }
.tf-success p { color: var(--text-muted); max-width: 34ch; }
@media (max-width: 860px) {
  .interest-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   v29 — aanbod-overzicht: 3 opties, beeld met hover-zoom,
   tekst + CTA's ernaast (beeld wisselt van kant per rij)
   ============================================================ */
.offer-rows { display: grid; gap: clamp(var(--s-8), 8vw, var(--s-10)); }
.offer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: center;
}
.offer-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
}
.offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease-std);
}
.offer-row:hover .offer-media img,
.offer-media:focus-visible img { transform: scale(1.06); }
.offer-row:nth-child(even) .offer-media { order: 2; }
.offer-text { display: grid; gap: var(--s-4); }
.offer-num {
  color: var(--accent-soft);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.offer-num::after { content: ""; width: 40px; height: 1px; background: var(--border-on-dark); }
.offer-text > p { color: var(--text-muted-on-dark); max-width: 52ch; }
.offer-chip {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--text-on-accent);
}
@media (max-width: 767px) {
  .offer-row { grid-template-columns: 1fr; gap: var(--s-5); }
  .offer-row:nth-child(even) .offer-media { order: 0; }
  .offer-media { aspect-ratio: 16 / 10; }
}

/* ============================================================
   v29 — split-promo (home): fullbleed 50/50, foto links tot het
   midden met zoom bij hover, tekst + CTA rechts
   ============================================================ */
.split-promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: min(760px, 88vh);
}
.split-promo-media {
  position: relative;
  display: block;
  overflow: hidden;
}
.split-promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease-std);
}
.split-promo-media:hover img,
.split-promo-media:focus-visible img { transform: scale(1.06); }
.split-promo-body {
  display: flex;
  align-items: center;
  padding: clamp(var(--s-8), 8vw, var(--s-10)) clamp(var(--s-6), 6vw, var(--s-9));
}
.split-promo-text { display: grid; gap: var(--s-4); max-width: 560px; }
.split-promo-text .lede {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--text-primary);
}
@media (max-width: 767px) {
  .split-promo { grid-template-columns: 1fr; min-height: 0; }
  .split-promo-media { aspect-ratio: 16 / 10; }
  .split-promo-body { padding: var(--s-7) var(--gutter); }
}

/* ============================================================
   v34 — mobile layout fixes
   ============================================================ */

/* Grid children may shrink instead of widening the viewport. */
.detail-grid > *,
.contact-grid > * {
  min-width: 0;
}

/* Curriculum on a light background needs an explicit light theme. */
.sec-light .curriculum-list .faq-q-text {
  color: var(--text-primary);
}
.sec-light .curriculum-list .faq-item:hover .faq-q-text,
.sec-light .curriculum-list .faq-item.is-open .faq-q-text {
  color: var(--accent);
}
.sec-light .curriculum-list .faq-icon,
.sec-light .curriculum-list .faq-item:hover .faq-icon,
.sec-light .curriculum-list .faq-item.is-open .faq-icon {
  color: var(--text-primary);
}

/* Long contact links wrap inside the black information panel. */
.contact-channels,
.contact-channel {
  min-width: 0;
  max-width: 100%;
}
.contact-channel a {
  overflow-wrap: anywhere;
}

/* The course plan picker never uses its button as an intrinsic width. */
.plan-picker--course {
  min-width: 0;
  max-width: 100%;
}
.plan-picker--course .plan-option,
.plan-picker--course .plan-option-head,
.plan-picker--course .plan-name-wrap,
.plan-picker--course .plan-price {
  min-width: 0;
}

@media (max-width: 1023px) {
  /* Keep the mobile wordmark exactly centred, independent of the menu button. */
  .site-header .header-inner {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .site-header .header-inner > .wordmark {
    width: 162px;
    flex: 0 0 auto;
  }
  .site-header .header-cta {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    transform: translateY(-50%);
  }
}

@media (max-width: 639px) {
  /* Stack the email field and download action at full available width. */
  .newsletter-form {
    flex: 1 1 100%;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .newsletter-input,
  .newsletter-form .btn {
    width: 100%;
    max-width: 100%;
  }
  .newsletter-form .btn {
    white-space: normal;
    text-align: center;
  }

  /* Course overview metadata may wrap without widening the card. */
  .vcard-grid .vcard-body {
    min-width: 0;
  }
  .vcard-grid .vcard-meta {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    white-space: normal;
    row-gap: 4px;
  }
  .vcard-grid .vcard-cta {
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
  }

  /* Compact plan rows and allow the action label to wrap. */
  .plan-picker--course {
    width: 100%;
    padding: var(--s-4);
  }
  .plan-picker--course .plan-option {
    padding: var(--s-3);
  }
  .plan-picker--course .plan-option-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-2);
  }
  .plan-picker--course .plan-name {
    font-size: 14px;
  }
  .plan-picker--course .plan-desc {
    font-size: 10px;
    line-height: 1.35;
  }
  .plan-picker--course .plan-price .amount {
    font-size: 20px;
  }
  .plan-picker--course .plan-price .cycle {
    font-size: 9px;
  }
  .plan-picker--course .btn {
    padding-inline: var(--s-3);
    white-space: normal;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .plan-picker--course .plan-picker-note {
    align-items: flex-start;
  }

  .contact-channels {
    width: 100%;
    padding: var(--s-5);
  }
}

/* ===========================================================================
   Aanpassingen na oplevering van het ontwerp
   ---------------------------------------------------------------------------
   19-08-2026 — Reviews: op mobiel stonden de scrollpijltjes bóven de reviews.
   Ze zitten in de linkerkolom (.gf-info > .gf-actions), en die kolom stapelt op
   mobiel boven de reviews. Alleen met `order` is dat niet te verplaatsen, want
   ze zitten een niveau dieper. Daarom hier: de pijltjes onderaan het blok
   pinnen en onder de reviews ruimte reserveren. Desktop blijft ongemoeid.
   =========================================================================== */
@media (max-width: 899px) {
  .greviews-feature .gf-grid { position: relative; }
  /* De reveal-animatie eindigt op translateY(0). Die transform doet visueel niets, maar maakt
     .gf-info wél het ankerpunt voor absoluut gepositioneerde kinderen — waardoor de pijltjes
     onderaan de tékstkolom bleven hangen in plaats van onder de reviews. Alleen de eindstand
     neutraliseren. Het script zet die transform inline, vandaar !important; gevolg is dat dit
     ene tekstblok op mobiel invaart zonder schuifbeweging (de fade blijft). */
  .greviews-feature .gf-info.reveal.is-visible { transform: none !important; }
  .greviews-feature .gf-viewport { margin-bottom: calc(46px + var(--s-4)); }
  .greviews-feature .gf-nav {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
  }
}

/* 19-08-2026 — Vergelijkingstabel (Academy lidmaatschap) scrollt op mobiel horizontaal.
   De standaard scrollbalk is grijs en valt nauwelijks op, waardoor bezoekers niet doorhebben
   dat er nog kolommen naast staan. In de huisstijlkleur (rood) is hij een stuk duidelijker.
   Let op: iOS toont een eigen systeembalk die niet te kleuren is — daarom staat de balk hier
   ook altíjd zichtbaar in plaats van alleen tijdens het scrollen. */
.compare-wrap {
  scrollbar-color: var(--c-red) rgba(0, 0, 0, 0.06);   /* Firefox + nieuwe Chrome */
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.compare-wrap::-webkit-scrollbar { height: 6px; }
.compare-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.06); border-radius: 3px; }
.compare-wrap::-webkit-scrollbar-thumb { background: var(--c-red); border-radius: 3px; }

/* 19-08-2026 — Eigen scroll-indicator onder brede tabellen (zie inc/main-scrollhint.js).
   Altijd zichtbaar en in de huisstijlkleur, zodat op elk apparaat duidelijk is dat er
   naast het zichtbare deel nog kolommen staan. */
.scroll-hint {
  position: relative;
  height: 4px;
  margin-top: var(--s-3);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.scroll-hint-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 24px;
  border-radius: 999px;
  background: var(--c-red);
  transition: left 0.12s linear, width 0.12s linear;
}
.compare-wrap:focus-visible { outline: 2px solid var(--c-red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-bar { transition: none; }
}

/* 20-08-2026 — Mobiel menu: hoofdkoppen iets kleiner, subitems groter.
   De subitems stonden op 0.46em, maar `em` rekent tegen de <nav> (16px) en niet tegen de
   40px van de links ernaast — dat gaf 7,36px, praktisch onleesbaar. Bedoeld was klaarblijkelijk
   0,46 × de linkgrootte. Die verhouding is hier hersteld met een vaste maat. */
.menu-overlay .menu-links a,
.menu-overlay .menu-links .menu-label {
  font-size: clamp(32px, 8.2vw, 58px);
}
.menu-overlay .menu-links .menu-sub {
  font-size: 15px;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

/* 20-08-2026 — Homepage-hero op mobiel: de genreknoppen stonden 72px onder de metaregel
   (grid-gap van 48px plus 24px margin op de knoppenrij). Daardoor zakten ze te ver weg op
   kleine schermen. Nu 20px totaal, zodat ze direct onder "Docent Roy Harmanus · Nederland
   & België" staan. Alleen de homepage-hero: .page-hero op de andere pagina's blijft ongemoeid. */
@media (max-width: 1023px) {
  .hero .hero-inner { gap: var(--s-5); }
  .hero .hero-picker { margin-top: 0; }
}
@media (max-width: 640px) {
  .hero .hero-inner { gap: var(--s-4); }
}

/* 05-10-2026 — Roy heeft de herotekst ingekort, waardoor er onder de genreknoppen
   ruimte overbleef en het blok krap aanvoelde. De knoppen krijgen daarom weer wat
   lucht boven zich: 32px op mobiel, 24px op tablet. De hero is hoog genoeg (de
   knoppen eindigden op 664 van 760px), dus ze blijven ruim binnen beeld. */
@media (max-width: 1023px) {
  .hero .hero-picker { margin-top: var(--s-5); }
}
@media (max-width: 640px) {
  .hero .hero-picker { margin-top: var(--s-6); }
}

/* 20-08-2026 — Stijlknoppen in de hero klikken vast op hun plek bij het schuiven, zodat
   duidelijk is welke actief wordt (zie inc/main-heroslider.js). Alleen waar de knoppen
   daadwerkelijk een horizontale strook vormen. */
@media (max-width: 1023px) {
  .hero-picker-list { scroll-snap-type: x mandatory; scroll-padding-left: 0; }
  .hero-picker-list .style-btn { scroll-snap-align: start; }
}

/* ===========================================================================
   10-09-2026 — Contactformulier uit MailBlue (ActiveCampaign)
   ---------------------------------------------------------------------------
   Roy beheert het contactformulier zelf in MailBlue. De embedcode zet zijn
   eigen opmaak in de pagina: een mintgroen kader, een eigen lettertype en
   velden met een randje rondom. Hieronder trekken we dat terug naar de
   huisstijl — dezelfde labels, onderlijnen en knop als bij de andere
   formulieren op de site.

   Over de selectors: ActiveCampaign hangt zijn regels aan een id
   (#_form_xxxxx) dat per formulier verschilt en verandert zodra Roy een nieuw
   formulier aanmaakt, en gebruikt daarbij zelf !important. Daar valt met
   klassen alleen niet tegenop te schrijven. Daarom staat er een eigen id op
   de wrapper (#hz-embeds) en is elke selector hieronder net iets zwaarder
   dan die van ActiveCampaign — dat werkt ongeacht welk formulier erin staat.
   =========================================================================== */
#hz-embeds { width: 100%; }

/* Het kader, de marges en het lettertype van ActiveCampaign eraf. */
#hz-embeds ._form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  color: var(--text-primary) !important;
}
#hz-embeds ._form * { font-family: inherit !important; }

/* Zelfde raster als het ingebouwde formulier: voor- en achternaam naast elkaar. */
#hz-embeds ._form div._form-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--s-5);
  width: 100% !important;
  margin: 0 !important;
}
#hz-embeds ._form ._form_element {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}
/* Op veldnaam selecteren en niet op volgorde: dan blijft de indeling kloppen
   wanneer Roy in MailBlue een veld toevoegt of verplaatst. Alleen naast elkaar
   als er ook echt een achternaam-veld is — een losse voornaam op halve breedte
   met een e-mailadres op volle breedte eronder oogt scheef. */
#hz-embeds ._form ._form-content:has(input[name="lastname"]) ._form_element:has(input[name="firstname"]),
#hz-embeds ._form ._form-content:has(input[name="firstname"]) ._form_element:has(input[name="lastname"]) { grid-column: span 1; }
@media (max-width: 639px) {
  #hz-embeds ._form div._form-content { grid-template-columns: 1fr; }
}

/* Labels: klein, uppercase, gespatieerd — gelijk aan .field label. */
#hz-embeds ._form ._form_element ._form-label {
  display: block;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin: 0 0 var(--s-2) !important;
}
#hz-embeds ._form .field-required { color: var(--detail) !important; }

/* Invoervelden: geen kader, alleen een onderlijn. */
#hz-embeds ._form ._form_element ._field-wrapper input,
#hz-embeds ._form ._form_element ._field-wrapper select,
#hz-embeds ._form ._form_element ._field-wrapper textarea {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  padding: var(--s-3) 0 var(--s-4) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--text-primary) !important;
  transition: border-color var(--dur-base) var(--ease-std);
}
#hz-embeds ._form ._form_element ._field-wrapper input::placeholder,
#hz-embeds ._form ._form_element ._field-wrapper textarea::placeholder {
  color: var(--text-muted) !important;
}
#hz-embeds ._form ._form_element ._field-wrapper input:focus,
#hz-embeds ._form ._form_element ._field-wrapper select:focus,
#hz-embeds ._form ._form_element ._field-wrapper textarea:focus {
  outline: none;
  border-bottom-color: var(--detail) !important;
}
#hz-embeds ._form ._form_element ._field-wrapper textarea {
  resize: vertical;
  min-height: 120px !important;
}
#hz-embeds ._form ._form_element ._field-wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b0c0b' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  cursor: pointer;
}
#hz-embeds ._form ._form_element ._field-wrapper select option {
  background: var(--c-white);
  color: var(--text-primary);
}

/* Aankruisvakjes (bv. een akkoordvraag) in de stijl van .field-check. */
#hz-embeds ._form ._form_element input[type="checkbox"],
#hz-embeds ._form ._form_element input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin: 2px var(--s-3) 0 0 !important;
  accent-color: var(--c-dark-green);
  flex-shrink: 0;
}
#hz-embeds ._form ._form_element ._checkbox-radio label,
#hz-embeds ._form ._form_element ._form-checkbox-option-label {
  display: flex;
  align-items: flex-start;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none;
  color: var(--text-muted) !important;
  line-height: 1.5;
}

/* reCAPTCHA. Het blok van Google is 304px breed en krimpt niet mee. Of dat
   past hangt niet af van het scherm maar van de ruimte waarin het formulier
   staat: op de contactpagina is dat een brede kolom, in een downloadkaart maar
   288px. Vandaar een container query op de wrapper zelf. */
#hz-embeds .hz-embed { container-type: inline-size; }
#hz-embeds ._form ._form_element .g-recaptcha { max-width: 100%; }
@container (max-width: 320px) {
  #hz-embeds ._form ._form_element .g-recaptcha {
    transform: scale(0.88);
    transform-origin: 0 0;
    height: 70px;
  }
}

/* Verzendknop: gelijk aan .btn-primary in een lichte sectie. */
#hz-embeds ._form div._button-wrapper { margin: 0 !important; }
#hz-embeds ._form button._submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin: 0 !important;
  padding: 16px 32px !important;
  background: var(--surface-dark) !important;
  color: var(--text-inverse) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  line-height: 1 !important;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-std);
}
#hz-embeds ._form button._submit:hover,
#hz-embeds ._form button._submit:focus-visible { background: var(--c-black) !important; }

/* Foutmeldingen. ActiveCampaign hangt ze als rode ballon boven of onder het
   veld, zwevend over het volgende label heen. Hier zetten we ze gewoon in de
   tekststroom, direct onder het veld waar ze bij horen. */
#hz-embeds ._form ._form_element ._error {
  position: static !important;
  display: block !important;
  padding: 0 !important;
  margin-top: 6px !important;
}
#hz-embeds ._form ._form_element ._error ._error-arrow { display: none !important; }
#hz-embeds ._form ._error-inner,
#hz-embeds ._form ._form_element ._error-inner {
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  color: var(--detail) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
}
/* Het veld zelf krijgt een rode onderlijn, in plaats van een rood kader. */
#hz-embeds ._form ._form_element ._field-wrapper input._has_error,
#hz-embeds ._form ._form_element ._field-wrapper select._has_error,
#hz-embeds ._form ._form_element ._field-wrapper textarea._has_error {
  border-bottom-color: var(--detail) !important;
}
#hz-embeds ._form div._form-thank-you {
  font-size: 18px !important;
  line-height: 1.5;
  color: var(--text-primary) !important;
  text-align: left !important;
  padding: var(--s-5) 0 !important;
}

/* Het ActiveCampaign-logo onder het formulier blijft staan (dat hoort bij het
   pakket), maar hoeft niet mee te schreeuwen. Helemaal uitzetten kan in
   MailBlue zelf, bij de instellingen van het formulier. */
#hz-embeds ._form div._form-branding {
  margin-top: var(--s-6) !important;
  font-size: 11px !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
}
#hz-embeds ._form div._form-branding:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   Variant: het MailBlue-formulier in een downloadkaart (/gratis-materiaal/).
   Daar zijn de invoervelden omkaderd in plaats van onderstreept, dus volgt het
   formulier de kaart en niet de contactpagina. Zelfde velden, andere jas.
   --------------------------------------------------------------------------- */
#hz-embeds .dl-card ._form div._form-content {
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
#hz-embeds .dl-card ._form ._form_element ._form-label {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 6px !important;
}
#hz-embeds .dl-card ._form ._form_element ._field-wrapper input,
#hz-embeds .dl-card ._form ._form_element ._field-wrapper select,
#hz-embeds .dl-card ._form ._form_element ._field-wrapper textarea {
  font-size: 15px !important;
  padding: 12px 16px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-sm) !important;
}
#hz-embeds .dl-card ._form ._form_element ._field-wrapper input:focus,
#hz-embeds .dl-card ._form ._form_element ._field-wrapper select:focus,
#hz-embeds .dl-card ._form ._form_element ._field-wrapper textarea:focus {
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
  border-color: var(--border-subtle) !important;
}
#hz-embeds .dl-card ._form ._form_element ._field-wrapper input._has_error,
#hz-embeds .dl-card ._form ._form_element ._field-wrapper textarea._has_error {
  border-color: var(--detail) !important;
}
/* In de kaart is de knop over de volle breedte, net als in het oorspronkelijke
   downloadformulier. */
#hz-embeds .dl-card ._form button._submit {
  width: 100% !important;
  padding: 14px 24px !important;
}
#hz-embeds .dl-card ._form div._form-branding {
  margin-top: var(--s-4) !important;
  font-size: 10px !important;
}

/* ActiveCampaign kan losse tekstblokken in een formulier zetten (bij de
   downloads: de akkoordregel over privacybeleid en voorwaarden). Dat is
   bijtekst, geen veld — dus kleiner en gedempt, zodat het de invoervelden niet
   beconcurreert. Herkenbaar aan: een blok zonder veld, label of captcha erin. */
#hz-embeds ._form ._form_element:not(:has(input, select, textarea, ._form-label, .g-recaptcha)) {
  font-size: 12px !important;
  line-height: 1.5;
  color: var(--text-muted) !important;
}
#hz-embeds ._form ._form_element:not(:has(input, select, textarea, ._form-label, .g-recaptcha)) * {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
#hz-embeds ._form ._form_element:not(:has(input, select, textarea, ._form-label, .g-recaptcha)) a {
  color: var(--text-secondary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Het e-bookblok zonder e-mailveld: de knop staat dan los in de mintgroene
   band in plaats van in het formulier. Zonder deze regel zou hij de gewone
   mintgroene knopkleur krijgen — onzichtbaar op een mintgroene achtergrond. */
.newsletter-band > .newsletter-cta {
  flex: 0 0 auto;
  background: var(--surface-dark);
  color: var(--text-inverse);
}
.newsletter-band > .newsletter-cta:hover,
.newsletter-band > .newsletter-cta:focus-visible { background: var(--c-deep-blue); }

/* 10-09-2026 — "Bekijk cursus" permanent groen.
   In het ontwerp is die knop doorzichtig en wordt hij pas mintgroen als je met
   de muis over de kaart gaat. Op aanraakschermen bestaat dat moment niet, dus
   zag niemand die groene staat ooit. Nu is groen de gewone staat en dient
   hover alleen nog als bevestiging.
   Eerst alleen op /cursussen/ toegepast; op verzoek van Roy dezelfde dag
   uitgebreid naar de kaarten op de homepage (sectie #aanbod). De scope is er
   daarom af: `.vcard-cta` bestaat alleen in die twee secties, en zo blijven
   ze gelijk als de kaart ergens anders wordt hergebruikt. */
.vcard-cta {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vcard:hover .vcard-cta,
.vcard:focus-within .vcard-cta {
  background: var(--c-light-green-hover);
  color: var(--text-on-accent);
}

/* 10-09-2026 — WhatsApp-CTA overal in dezelfde groene stijl.
   In het ontwerp was dit per pagina een andere knop (doorzichtig naast een
   gevulde, of andersom). Het thema hangt er nu `btn-whatsapp` aan zodra het
   label WhatsApp noemt; zie hz_btn_class() in functions.php. */
.btn.btn-whatsapp,
.btn.btn-whatsapp.on-dark {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  /* Dun donker lijntje eromheen (verzoek Roy 10-09-2026), in dezelfde geest als
     de omlijnde knop "Meteen starten" in de hero. Nodig omdat de slot-CTA op
     /abonnement/ zélf een mintgroene achtergrond heeft: zonder lijn viel de
     mintgroene knop daar volledig weg en las hij als losse tekst. De lijn ligt
     op de mint van de knop zelf, dus hij werkt op zowel lichte als donkere
     secties. */
  border: 1px solid rgba(11, 12, 11, 0.38);
}
.btn.btn-whatsapp:hover,
.btn.btn-whatsapp:focus-visible,
.btn.btn-whatsapp.on-dark:hover,
.btn.btn-whatsapp.on-dark:focus-visible {
  background: var(--c-light-green-hover);
  color: var(--text-on-accent);
}

/* Zonder video wordt het CTA-blok op /cursussen/ één kolom, zodat de tekst de
   volle breedte pakt in plaats van een halve met een gat ernaast. */
.cta-split--solo { grid-template-columns: 1fr; }

/* 10-09-2026 — "Over deze cursus": tweede alinea gelijk aan de eerste.
   In het ontwerp is alinea 1 (.lede) 19px op 82% dekking en zakt alinea 2
   naar 16px op 62%. Dat verschil las als twee losse stukjes tekst in plaats
   van één verhaal. Nu delen ze grootte, regelafstand en kleur; de extra
   ruimte tussen de twee alinea's blijft staan.
   Geldt voor alle cursusdetailpagina's — ze gebruiken hetzelfde blok. */
.detail-body .lede + p {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(244, 243, 237, 0.82);
}
.sec-light .detail-body .lede + p { color: var(--text-secondary); }
/* 10-09-2026 — "Voor wie": de drie blokken naast elkaar.
   In het ontwerp staat de tekst links (5fr) en de blokken rechts (7fr). Met
   drie blokken werd dat 2 + 1, met een gat rechtsonder. Drie kolommen binnen
   die rechterkolom kan niet: 588px gedeeld door drie is 180px per blok, en
   dan breekt een kop als "Je speelt al, maar alleen van papier." in zes
   regels. Daarom krijgt het blok de volle breedte: tekst erboven, drie
   kaarten van ±350px eronder.

   Alleen bij drie of meer blokken. De instapcursus heeft er twee, en die
   staan met de oorspronkelijke indeling juist netjes — een raster van drie
   zou daar een leeg vak opleveren.
   `.methode-grid` en `.pillars` bestaan alleen op de cursusdetailpagina's. */
@media (min-width: 900px) {
  .methode-grid:has(.pillars > :nth-child(3)) {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  /* De introtekst niet over de volle breedte laten uitlopen: onleesbaar lang. */
  .methode-grid:has(.pillars > :nth-child(3)) > *:first-child { max-width: 62ch; }
  .methode-grid:has(.pillars > :nth-child(3)) .pillars { grid-template-columns: repeat(3, 1fr); }
}
/* Onder 900px liever onder elkaar dan opnieuw een scheve 2 + 1. */
@media (max-width: 899px) {
  .methode-grid:has(.pillars > :nth-child(3)) .pillars { grid-template-columns: 1fr; }
}

/* ===========================================================================
   10-09-2026 — Uitlijning op mobiel: twee blokken die breder werden dan hun kader
   ---------------------------------------------------------------------------
   Allebei hetzelfde patroon: een kind met een onwrikbare minimumbreedte duwt
   zijn ouder open, waardoor de inhoud niet meer uitlijnt met de rest.
   =========================================================================== */

/* 1. Ticketblok op de masterclass-pagina.
   "Schrijf je in" en "Jouw event ticket" staan allebei op white-space: nowrap
   en samen zijn ze 284px. Op een telefoon is er 310px beschikbaar, dus de
   kaart werd 348px breed en stak buiten de banner uit. Ze mogen nu onder
   elkaar; min-width: 0 zorgt dat het rasteritem ook echt mag krimpen. */
.interest-grid,
.interest-grid > * { min-width: 0; }
@media (max-width: 599px) {
  .tf-head { flex-wrap: wrap; gap: var(--s-2); }
  .tf-head .tf-num { white-space: normal; }
}

/* 2. Downloadkaarten met een MailBlue-formulier.
   Het reCAPTCHA-blok van Google is 304px breed en krimpt niet. De schaling
   die we eerder toepasten is puur visueel — voor de opmaak telt nog steeds
   304px, en dus rekte de rasterkolom mee. Daardoor staken de invoervelden,
   labels en de DOWNLOAD-knop 20px buiten de tekst van de kaart uit.
   minmax(0, 1fr) laat de kolom wél krimpen; de captcha wordt netjes
   afgekapt op de kaartbreedte (visueel valt er niets weg, want geschaald
   is hij 267px).
   Let op: de contactpagina houdt hier zijn twee kolommen (voornaam naast
   achternaam), vandaar twee keer minmax en niet één kolom. */
#hz-embeds ._form div._form-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 639px) {
  #hz-embeds ._form div._form-content { grid-template-columns: minmax(0, 1fr); }
}
#hz-embeds .dl-card ._form div._form-content { grid-template-columns: minmax(0, 1fr); }
#hz-embeds ._form ._form_element { min-width: 0; }
#hz-embeds ._form ._form_element:has(.g-recaptcha) { overflow: hidden; }

/* 10-09-2026 — "Voor wie": koppen op gelijke hoogte.
   In het ontwerp heeft de h3 `margin-top: auto`, waardoor het blok tegen de
   onderkant van de kaart wordt geduwd. De kaarten zijn even hoog, maar de
   bodytekst verschilt in lengte — en dus schoof de kop mee omhoog bij een
   langere tekst (gemeten: 107 / 83 / 107). Nu staat alles vanaf de bovenkant
   gestapeld, zodat nummer, kop en tekst in alle kaarten op dezelfde hoogte
   beginnen. Het verschil in tekstlengte komt daarmee onderaan te liggen.
   `.pillar` bestaat alleen in dit blok op de cursusdetailpagina's. */
.pillar h3 { margin-top: 0; }

/* ===========================================================================
   10-09-2026 — Prijsschakelaar: jaarlijks eerst, en passend op mobiel
   ---------------------------------------------------------------------------
   1. Volgorde omgedraaid (jaarlijks links). Het schuifje stond op
      `[data-cycle="yearly"] → translateX(100%)`; met de knoppen omgewisseld
      moet het precies andersom, anders licht de verkeerde helft op.

   2. Op mobiel paste de schakelaar niet. De knop "Jaarlijks" draagt het label
      "2 mnd gratis" naast zich; samen 187px, terwijl de andere helft er 115
      kreeg. Twee gevolgen: het schuifje (altijd 50% breed) stond scheef over
      de labels, en de minimumbreedte van de schakelaar duwde de hele
      prijskaart 12px breder dan de tekst erboven — vandaar dat de kaart tegen
      de schermrand plakte terwijl links wél marge zat.
      Onder 600px zetten we het label onder elkaar in plaats van ernaast. Dan
      is de smalste helft ~88px, vallen beide helften weer gelijk en past de
      kaart binnen dezelfde marges als de rest van de pagina.
   =========================================================================== */
.billing-toggle[data-cycle="yearly"] .toggle-thumb { transform: none; }
.billing-toggle[data-cycle="monthly"] .toggle-thumb { transform: translateX(100%); }

@media (max-width: 599px) {
  .billing-toggle {
    height: auto;
    min-height: 52px;
  }
  .billing-toggle button {
    flex-direction: column;
    gap: 3px;
    padding-block: 8px;
    line-height: 1.2;
  }
  .billing-toggle .save-chip { font-size: 8px; padding: 2px 5px; }
}

/* 10-09-2026 — Prijsregels op mobiel: naam niet laten afbreken.
   `.plan-option-head` is `auto 1fr auto`; de laatste kolom is de prijs en die
   claimt zijn volle inhoud. In de jaarstand staat er "/ mnd · jaarlijks"
   onder het bedrag, waardoor die kolom van 48 naar 91px sprong en er voor de
   plannaam nog 105px overbleef — "Academy Basis" brak dan over twee regels.
   Op smalle schermen mag dat bijschrift zelf afbreken; de kolom blijft dan
   zo breed als het bedrag en de namen passen weer op één regel. */
@media (max-width: 599px) {
  .plan-price { min-width: 0; }
  .plan-price .cycle {
    white-space: normal;
    line-height: 1.3;
    max-width: 9ch;
    margin-left: auto;
  }
}

/* ===========================================================================
   10-09-2026 — Mobiel menu: subkoppen iets kleiner, en alles binnen beeld
   ---------------------------------------------------------------------------
   1. Subitems van 15px naar 14px. Ze stonden op 20-08 te klein (7px door een
      em-fout), toen op 15px, en dat was net te fors.

   2. "Gratis proefperiode" onderaan viel buiten beeld. Twee oorzaken:
      - De overlay staat op `inset: 0` en gebruikt daarmee de volledige
        layouthoogte. Op een telefoon is het zíchtbare deel kleiner, want de
        adresbalk van de browser ligt eroverheen. `100dvh` volgt wél dat
        zichtbare deel.
      - Met twaalf items en 24px tussenruimte vulde de lijst het scherm al
        helemaal: op 375×667 eindigde de onderste regel op 666 van 667 px.
        Tussenruimte terug naar 16px scheelt ~88px.
      Daarbovenop mag de overlay nu scrollen, zodat er op een klein scherm
      nooit meer iets wegvalt. De auto-marges van .menu-links houden het menu
      verticaal gecentreerd zolang er ruimte over is, en worden vanzelf 0
      zodra de inhoud niet meer past.
   =========================================================================== */
@media (max-width: 1023px) {
  .menu-overlay {
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menu-links { gap: var(--s-4); }
  .menu-overlay .menu-links .menu-sub { font-size: 14px; }
}
/* Op een héél kort scherm (oude iPhone SE, of een browser met veel balken)
   kwam de onderste regel nog 18px tekort. Tussenruimte daar nog wat krapper;
   de lettergroottes blijven ongemoeid. */
@media (max-width: 1023px) and (max-height: 620px) {
  .menu-links { gap: var(--s-3); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Pianoles Tilburg — drie correcties (10 sep 2026)
   .promo-split, .video-embed in een promo-split, .trajectory-card en
   .tariff-cta komen alléén op deze pagina voor; de rest van de site blijft
   dus ongemoeid.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Bijschrift onder de introvideo kleefde niet aan de video.
      De figure staat in een tweekolomsraster en wordt uitgerekt tot de hoogte
      van de tekstkolom ernaast; die extra ruimte werd gelijk verdeeld over de
      twee grid-rijen (align-content is standaard stretch), waardoor er op
      1440px 101px tussen video en bijschrift stond in plaats van de bedoelde
      12px. Op mobiel klopte het al, want daar wordt niets uitgerekt. */
.promo-split .video-embed { align-content: start; }

/* 2. De knoppen in de twee tarieffkaarten stonden niet op gelijke hoogte.
      .trajectory-card zet display:flex zodat `.tariff-cta { margin-top:auto }`
      de knop naar de onderkant duwt, maar .tariff-panel zet verderop in dit
      bestand display:grid — en in een grid-cel doet margin-top:auto niets.
      Hier wint de combinatie van beide klassen, dus flex komt terug. */
.trajectory-card.tariff-panel { display: flex; flex-direction: column; }

/* 3. De twee intake-knoppen in de tarieffkaarten in mintgroen. */
.btn-primary.tariff-cta {
  background: var(--accent-soft);
  color: var(--text-on-accent);
}
.btn-primary.tariff-cta:hover,
.btn-primary.tariff-cta:focus-visible { background: var(--c-light-green-hover); }

/* 4. De twee knoppen op gelijke hoogte. De rechterkaart heeft onder zijn knop
      nog een voetregel ("Gratis kennismaking ..."), de linkerkaart niet — die
      knop zakte daardoor 43px verder door tot de bodem. Hier reserveren we in
      een kaart zónder voetregel dezelfde ruimte: een leeg regeltje met exact de
      typografie van .tariff-foot (12px / 19,2px) plus de kaart-gap van 24px.
      Door :has() geldt dit alleen zolang die voetregel daar ontbreekt; vult
      iemand hem later alsnog, dan vervalt de reservering vanzelf. */
.trajectory-card:not(:has(.tariff-foot))::after {
  content: "\00a0";
  font-size: 12px;
  visibility: hidden;
  pointer-events: none;
}

/* 5. Tussen 901 en ~955px brak de voetregel over twee regels, waardoor de
      reservering hierboven één regel tekort kwam en de knoppen daar 20px
      scheef stonden. De zin in de CSS herhalen is geen optie — die is
      instelbaar en al eens gewijzigd. Daarom vallen de kaarten nu iets eerder
      onder elkaar: vanaf 960px past de voetregel altijd op één regel en liggen
      de knoppen exact gelijk. Onder 960px staat alles toch al in één kolom,
      dus dan speelt uitlijnen niet. */
@media (max-width: 959px) { .trajectory-grid { grid-template-columns: 1fr; } }

/* 6. "Wat je krijgt" volgt direct op de video-sectie en beide zijn sec-light,
      dus je kreeg 128px onderpadding + 128px bovenpadding = 256px beige tussen
      twee blokken van dezelfde kleur. Zonder kleurwissel leest dat niet als een
      sectiegrens maar als een gat. Bovenpadding hier weg; de 128px van de
      sectie erboven blijft als scheiding staan.
      Gericht op :has(.tilburg-intro) zodat alleen deze pagina het krijgt —
      /over-roy/ heeft dezelfde opeenvolging maar valt onder de 1:1-parity met
      het oorspronkelijke ontwerp en moet dus ongemoeid blijven. */
.section:has(.tilburg-intro) { padding-top: 0; }

/* 10-09-2026 — Teamfoto's kleiner (verzoek Roy: past niet op een 13"-scherm).
   De kaarten liepen mee met de volle contentbreedte: 536px breed met een
   portretfoto van 4:5, dus 668px hoog. Twee kaarten naast elkaar maakten het
   blok 1213px hoog, terwijl er op een 13-inch scherm zo'n 830px zichtbaar is.
   De verhouding 4:5 blijft — dat is de goede uitsnede voor een portret — maar
   het raster is nu gemaximeerd, zodat de foto's evenredig meekrimpen. */
.team-grid {
  max-width: 720px;
  margin-inline: auto;
}

/* 10-09-2026 — Cursusdetail zonder prijsblok (verzoek Roy voor pop en jazz).
   `.detail-grid` is 7fr/5fr met de tekst links en de prijskiezer rechts. Valt
   die rechterkolom weg, dan zou de tekst in een smalle kolom blijven staan met
   een leeg vak ernaast. Deze variant maakt er één kolom van en houdt de
   regellengte leesbaar. */
.detail-grid--solo { grid-template-columns: 1fr; }
.detail-grid--solo .detail-body { max-width: 68ch; }

/* 10-09-2026 — Knoppen verspringen niet meer bij hover.
   Het ontwerp laat bij hover een rood stipje vóór de tekst verschijnen:
   `.btn::before` groeit van 0 naar 6px breed plus 10px marge. De knop wordt
   daarmee 16px breder. In het ontwerp stond erbij "no layout jump", maar dat
   klopt niet: staat een knoppenrij krap, dan duwt die 16px de buurknop naar de
   volgende regel. Gemeten op de cursuspagina: de rij "Stuur een WhatsApp" +
   "Mail ons" heeft 13px speling, dus bij hover sprong "Mail ons" eronder.

   Oplossing: het stipje krijgt een negatieve linkermarge van precies zijn
   eigen voetafdruk (6 + 10 = 16px), zodat het per saldo geen breedte toevoegt.
   Het verschijnt daarmee in de bestaande binnenruimte van de knop, vlak voor
   de tekst. Dit werkt bij elke knop — een eerdere poging die de padding liet
   krimpen ging mis bij de headerknop, die een andere binnenruimte heeft. */
.btn:hover::before,
.btn:focus-visible::before {
  margin-left: -16px;
}
/* De stip groeit geleidelijk (width en margin-right animeren), dus de
   compensatie moet in hetzelfde tempo meebewegen. Stond margin-left niet in de
   overgang, dan sprong die meteen naar -16px terwijl de rest nog onderweg was —
   en bij het weghalen van de muis andersom. Precies dat gaf de korte sprong van
   de buurknop. Nu animeren alle vier samen en is de optelsom altijd nul. */
.btn::before {
  transition:
    width var(--dur-base) var(--ease-std),
    margin-right var(--dur-base) var(--ease-std),
    margin-left var(--dur-base) var(--ease-std),
    opacity var(--dur-base) var(--ease-std);
}

/* 10-09-2026 — Opsommingen in het maatwerkblok waren onleesbaar.
   `.check-list li` zet hard `color: var(--text-secondary)` — donkergroen,
   bedoeld voor de lichte blokken waar deze lijst verder overal staat. In de
   trajectkaart staat de lijst op een donkergroene achtergrond (#132119), dus
   donker-op-donker.
   Het ontwerp probeerde dat al te ondervangen met
   `.trajectory-card .check-list { color: ... }`, maar die regel hangt aan de
   <ul>. De kleur op de <li> is een directe regel en wint van een geërfde
   waarde, dus hij kwam nooit aan. Daarom hier op de <li> zelf, in dezelfde
   kleur als de kop erboven. */
.trajectory-card .check-list li { color: var(--text-inverse); }

/* 10-09-2026 — Intakeformulier in het slotblok van de privélespagina.
   Dat blok is gecentreerd en mintgroen. Het formulier krijgt daarin een eigen
   breedte en staat links uitgelijnd, want gecentreerde invoervelden lezen
   slecht. Verder erft het de opmaak van #hz-embeds (zelfde onderstreepte
   velden als op de contactpagina).
   11-09: de scheidingslijn en de extra ruimte erboven zijn eruit. Sinds de
   knop "Plan een kennismaking" weg is, staat de regel "Reactie binnen 48 uur"
   direct boven het formulier en hoort die er gewoon bij — een lijn en 72px
   lucht maakten er twee losse blokken van. Nu 32px ertussen. */
/* Let op de specificiteit: `#hz-embeds { width: 100% }` hierboven is een
   id-selector en wint van een losse klasse, vandaar beide gecombineerd. */
#hz-embeds.hz-embed--intake {
  width: min(100%, 520px);
  /* De omhullende kolom heeft zelf al 24px tussenruimte; 8px erbij maakt 32,
     iets krapper dan de 36px boven de notitie. Zo horen de regel "Reactie
     binnen 48 uur" en het formulier zichtbaar bij elkaar. */
  margin: var(--s-2) auto 0;
  text-align: left;
}

/* Telefoonveld met landenkiezer (intl-tel-input, gebruikt door het
   intakeformulier). De vlag met landcode staat als los blok ín het veld, links.
   Onze algemene regel hierboven zet de linkerruimte van invoervelden op 0 —
   daardoor viel de tekst onder die vlag. Ruimte teruggeven ter breedte van dat
   blok (72px) plus wat lucht. */
#hz-embeds ._form ._form_element ._field-wrapper .iti input.iti__tel-input {
  padding-left: 80px !important;
}

/* 10-09-2026 — Minder leegte onder het team.
   Elke sectie heeft 128px ruimte boven en onder, dus tussen twee secties zit
   256px. Overal is dat in balans met de inhoud, maar sinds de teamfoto's
   kleiner zijn (720px raster in plaats van de volle breedte) is het blok een
   stuk korter en valt die crèmekleurige leegte eronder op — zeker omdat de
   sectie erna zwart is. Onderruimte hier gehalveerd. */
section[aria-labelledby="team-title"] { padding-bottom: var(--s-8); }

/* 10-09-2026 — SoundCloud-spelers onder de playlistkaarten (/over-roy/).
   Zelfde raster als de kaarten erboven, zodat speler en kaart onder elkaar
   staan. Onder 760px stapelen ze, net als de kaarten. */
.sc-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
@media (max-width: 760px) { .sc-players { grid-template-columns: 1fr; } }
.sc-player {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}

/* 10-09-2026 — Promo-banner onder een artikel: knop zichtbaar + twee knoppen.
   `.promo-banner--a` heeft `background: var(--surface-dark)` en de knop
   `.btn-primary` heeft exact dezelfde kleur — de knop was dus onzichtbaar tot
   je erover ging (hover maakt hem zwart). Nu andersom: zwart in rust, en bij
   hover het donkergroen als bevestiging. Zelfde behandeling voor variant c,
   die op zwart staat: daar wordt de knop juist donkergroen. */
.promo-banner--a .btn-primary { background: var(--c-black); }
.promo-banner--a .btn-primary:hover,
.promo-banner--a .btn-primary:focus-visible { background: var(--surface-dark); }
.promo-banner--c .btn-primary { background: var(--surface-dark); }
.promo-banner--c .btn-primary:hover,
.promo-banner--c .btn-primary:focus-visible { background: var(--c-black); }

/* Twee knoppen naast elkaar, en op smalle schermen onder elkaar.
   11-09-2026 bijgesteld. Twee dingen klopten niet:
   1. Het omslagpunt lag op 480px, maar naast elkaar hebben de knoppen 591px
      nodig terwijl het promoblok pas rond 760px zoveel binnenruimte heeft.
      Tussen 480 en 760px stond de rij dus buiten het blok.
   2. Onder elkaar liep het ook mis: `.btn` is `white-space: nowrap`, dus
      "Start een gratis proefperiode" blijft 334px breed terwijl er op een
      telefoon 286px beschikbaar is. Een flexkolom krimpt niet onder de
      breedte van zijn inhoud, dus de hele rij schoof 16px naar rechts,
      buiten het blok — dat is wat je op de mobiel scheef zag staan.
   Daarom mag het label hier over twee regels; de knop blijft dan binnen het
   blok, ongeacht hoe lang de tekst is die Roy invult. */
.pb-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 760px) {
  .pb-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .pb-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
  }
}

/* 10-09-2026 — Afbeeldingen in artikelen lijnen uit met de tekst.
   De <figure>-elementen in de artikeltekst hadden nooit eigen opmaak
   gekregen, dus stond er nog de standaardwaarde van de browser:
   `margin: 1em 40px`. Daardoor was elke afbeelding 40px smaller ingesprongen
   dan de alinea's eromheen — op álle 42 artikelen, want ze delen één sjabloon.
   Nu volle kolombreedte, met verticale ruimte in het ritme van de tekst. */
.article-body figure {
  margin: var(--s-6) 0;
}
.article-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}
.article-body figcaption {
  margin-top: var(--s-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* 11-09-2026 — Slotblok mét intakeformulier: minder lucht eromheen.
   `.cta-light` heeft 200px ruimte boven en onder — passend voor een blok met
   alleen een kop en een knop, maar met een volledig formulier erin werd het
   een zee van mintgroen. Alleen waar het formulier staat teruggebracht naar
   128px; de andere slot-CTA's (contact, gratis materiaal) blijven ongemoeid. */
#intake.cta-light {
  padding-top: var(--s-10);
  padding-bottom: var(--s-10);
}

/* 11-09-2026 — Hero van de subpagina's op mobiel: knoppen binnen beeld.
   Op /prive-pianoles-tilburg/ vielen de twee CTA's onder de vouw: op een
   iPhone SE eindigde de onderste knop op 658 van 667px, en dat is zónder de
   adresbalk van de browser. Naast elkaar passen ze niet — samen 432px in een
   scherm van 350 — dus stapelen blijft, maar het blok mag hoger staan.
   Twee bronnen van ruimte: 140px boven de hero (nodig om de vaste balk van
   72px vrij te houden, dus 104 volstaat) en 24px tussen elk onderdeel.
   Samen ~90px winst. Alleen op telefoons; op grotere schermen verandert niets. */
@media (max-width: 639px) {
  .page-hero {
    padding-top: 104px;
    padding-bottom: var(--s-7);
  }
  .page-hero .hero-inner { gap: var(--s-4); }
}

/* 11-09-2026 — Minder lucht tussen het docentblok en de FAQ.
   Op de privélespagina's volgt de FAQ direct op het docentblok en beide zijn
   zwart. De standaard 128px onder + 128px boven leest daardoor als één groot
   gat van 264px tussen "Over ons" en de eerste FAQ-regel; er is geen
   kleurwissel die die ruimte rechtvaardigt. Teruggebracht naar 64+64.
   Alleen waar die twee elkaar opvolgen — op de homepage komt na #docent een
   andere sectie, dus daar verandert niets. */
#docent:has(+ #faq) { padding-bottom: var(--s-8); }
#docent + #faq { padding-top: var(--s-8); }

/* 11-09-2026 — YouTube-video's op /over-roy/ in een carousel.
   Eerst stonden de vijftien video's onder elkaar in een raster. Dat werkte,
   maar het blok was op een telefoon 4.372px hoog — ruim een vijfde van de hele
   pagina, zo'n vijf schermen scrollen. Nu schuiven ze horizontaal, in dezelfde
   carousel als het cursusoverzicht op de homepage (`.carousel` + de pijlen uit
   main.js), dus dat gedrag is al bekend voor de bezoeker.

   De kaartbreedte is vast, want de carousel schuift per kaart: 78vw op een
   telefoon (de volgende kaart piept er nog net langs, zodat zichtbaar is dat
   er meer is) en 400px zodra daar ruimte voor is. */
.yt-carousel { margin-top: var(--s-7); }
/* `.carousel-track` heeft `margin-inline: auto` om de kaarten te centreren als
   ze passen. Vijftien video's passen nooit, en bij overloop verdeelt de browser
   die ruimte over beide kanten — de strook begon dan middenin de eerste kaart.
   Links uitlijnen dus, op de rand van de kop erboven. */
.yt-carousel .carousel-track { align-items: start; margin-inline: 0; }
/* Daarnaast snapt de strook op de kaartrand. Zonder scroll-padding valt die
   rand samen met de rand van het venster en schuift de binnenruimte van de
   track weg — de kaart plakte dan tegen de schermrand.

   De beginruimte is niet simpelweg de gutter maar de linkerrand van de kop
   erboven: `.container` is maximaal 1200px breed en gecentreerd, met 48px
   binnenruimte. Op een breed scherm begint de tekst dus verder naar binnen dan
   de gutter, en een kaart die daar niet mee uitlijnt oogt scheef. Op smalle
   schermen valt de berekening onder de gutter en wint `max()`. */
.yt-carousel .carousel-track,
.yt-carousel .carousel-viewport {
  --yt-start: max(var(--gutter), calc((100% - 1200px) / 2 + var(--gutter)));
}
.yt-carousel .carousel-track { padding-left: var(--yt-start); }
.yt-carousel .carousel-viewport { scroll-padding-left: var(--yt-start); }
.yt-item { flex: 0 0 400px; max-width: 400px; }
@media (max-width: 639px) { .yt-item { flex-basis: 78vw; max-width: 78vw; } }

.yt-item { margin: 0; display: grid; gap: var(--s-3); }

/* De voorvertoning: dezelfde maat en afronding als de speler die er na een
   klik voor in de plaats komt, zodat er niets verspringt. */
.yt-item .yt-play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(244, 243, 237, 0.06);
  cursor: pointer;
}
.yt-item .yt-play img {
  display: block;
  width: 100%;
  height: 100%;
  /* hqdefault is 4:3 met zwarte balken; cover snijdt die weg. */
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std);
}
.yt-item .yt-play .yt-play-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.yt-item .yt-play .yt-play-icon svg {
  width: 64px;
  height: 64px;
  padding: 18px;
  border-radius: var(--r-pill);
  background: rgba(11, 12, 11, 0.62);
  color: var(--c-white);
  transition: background var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std);
}
.yt-item .yt-play:hover img,
.yt-item .yt-play:focus-visible img { transform: scale(1.03); opacity: 0.85; }
.yt-item .yt-play:hover .yt-play-icon svg,
.yt-item .yt-play:focus-visible .yt-play-icon svg {
  background: var(--accent-soft);
  color: var(--text-on-accent);
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .yt-item .yt-play img,
  .yt-item .yt-play .yt-play-icon svg { transition: none; }
  .yt-item .yt-play:hover img,
  .yt-item .yt-play:focus-visible img { transform: none; }
  .yt-item .yt-play:hover .yt-play-icon svg,
  .yt-item .yt-play:focus-visible .yt-play-icon svg { transform: none; }
}

.yt-item .yt-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r-md);
  background: rgba(244, 243, 237, 0.06);
}
.yt-item figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted-on-dark);
}

/* 11-09-2026 — Naam en sterren in de reviewkaarten sluiten weer aan.
   `.greview-card` is een raster met `min-height: 352px` (alle kaarten even
   hoog in de slider). De overgebleven ruimte werd over álle rijen verdeeld:
   de rij met de naam werd 94px hoog en die met de sterren 68px, terwijl de
   inhoud maar 18 en 14px is. Daardoor stond er 50px tussen de naam en de
   sterren in plaats van de bedoelde 12.
   Nu vangt alleen de reviewtekst de overruimte op — de natuurlijke plek, want
   een langere review vult die rij vanzelf. De kaarten blijven even hoog. */
.greview-card {
  grid-template-rows: auto auto auto 1fr auto;
}

/* 11-09-2026 — Opsommingen in blogartikelen hadden geen bolletje of nummer.
   `styles.css` regel 131 zet site-breed `ul, ol { list-style: none }` — nodig
   voor de menu's, kaartlijsten en check-lijsten, die hun eigen icoon meebrengen.
   In de artikeltekst bleef die reset óók gelden: `.article-body ul, ol` gaf de
   lijsten wel hun inspringing terug (padding-left: 1.3em) maar niet de marker.
   Gevolg: opsommingen lazen als alinea's die zonder aanleiding inspringen —
   op mobiel, waar de kolom 350px breed is, valt dat meteen op als scheve
   uitlijning. Alle 42 geïmporteerde artikelen gebruiken lijsten.
   De marker krijgt de accentkleur zodat hij bij de rest van de opmaak past;
   `list-style-position: outside` houdt de tekstregels onderling uitgelijnd,
   ook als een punt over meerdere regels loopt. */
.article-body ul { list-style: disc outside; }
.article-body ol { list-style: decimal outside; }
.article-body li::marker { color: var(--detail); }

/* 11-09-2026 — Intakeformulier op de mintgroene sectie: witte invoervelden.
   Het MailBlue-formulier volgt de algemene embedstijl hierboven: doorzichtige
   achtergrond met alleen een onderlijn. Op de lichte contactpagina en in de
   downloadkaarten klopt dat, maar de CTA-sectie van de twee privélespagina's
   is mintgroen (--accent-soft) en de onderlijn is 8% zwart — daar zag je de
   invulvelden nauwelijks nog. Alleen in deze variant (.hz-embed--intake)
   krijgen ze een wit vlak, zodat meteen duidelijk is waar je kunt typen.
   De selector herhaalt #hz-embeds omdat de basisregels op dat id staan en met
   !important werken; een losse klasse legt het dan af tegen het id. */
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper input,
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper select,
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper textarea {
  background-color: var(--c-white) !important;
  border: 1px solid rgba(11, 12, 11, 0.14) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--s-3) var(--s-4) !important;
}
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper input:focus,
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper select:focus,
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper textarea:focus {
  border-color: var(--detail) !important;
}
/* Het pijltje van de keuzelijst is een achtergrondafbeelding; die stond tegen
   de rand omdat het veld geen binnenruimte had. Nu meeschuiven met de padding. */
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper select {
  background-position: right var(--s-4) center !important;
}
/* Het telefoonveld: de vlagkiezer staat als los blok links ín het veld en houdt
   geen rekening met de nieuwe binnenruimte. Blok en tekst allebei opschuiven. */
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper .iti input.iti__tel-input {
  padding-left: 92px !important;
}
#hz-embeds.hz-embed--intake ._form ._form_element ._field-wrapper .iti .iti__flag-container {
  left: var(--s-3);
}

/* 11-09-2026 — Alle intake-knoppen mintgroen op de twee privélespagina's.
   In september kregen alleen de twee knoppen in de tariefkaarten
   (.btn-primary.tariff-cta) de mintgroene stijl; de andere twee — in de hero
   en onder de introvideo — bleven bewust donkergroen omdat er nog geen besluit
   was. Dat besluit is er nu: alle knoppen die naar het intakeformulier leiden
   zien er hetzelfde uit.
   Er is geen eigen klasse om op te mikken, dus we mikken op de bestemming.
   Dat is hier veilig: #intake bestaat alleen op /prive-pianoles-tilburg/ en
   /prive-solfegeles-tilburg/ (gecontroleerd op alle andere pagina's), en het
   anker wordt door het thema gezet zodra het formulierveld gevuld is. Haalt
   Roy het formulier weg, dan verdwijnt de knop zelf ook al. */
a.btn.btn-primary[href$="#intake"] {
  background: var(--accent-soft);
  color: var(--text-on-accent);
}
a.btn.btn-primary[href$="#intake"]:hover,
a.btn.btn-primary[href$="#intake"]:focus-visible { background: var(--c-light-green-hover); }

/* 11-09-2026 — Twee gaten in de spacing op /over-roy/ (desktop).
   Elke sectie heeft 128px ruimte boven én onder. Waar de achtergrondkleur
   wisselt valt dat niet op, maar op deze pagina staan twee keer twee secties
   van dezelfde kleur achter elkaar. Dan lopen de twee marges aan elkaar vast
   tot één leeg vlak van 256 à 280px — ruim een kwart scherm zonder inhoud:

   1. "Van conservatorium tot eigen lesmethodiek" (crème) gevolgd door
      "De mensen achter Harmanus Music" (crème): 280px.
   2. Het cijferblok "Twintig jaar lespraktijk" (zwart) gevolgd door
      "De methode: drie pijlers" (zwart): 256px.

   In beide gevallen de bovenruimte van de tweede sectie weghalen; de
   onderruimte van de eerste blijft staan en is precies de 128px die de rest
   van de pagina ook aanhoudt. Allebei de selectors komen alléén op deze
   pagina voor (gecontroleerd in de templates).
   De overgangen waar de kleur wél wisselt blijven ongemoeid.

   Alleen vanaf 1024px, het breekpunt waarop het ontwerp zelf naar 128px gaat.
   Op tablet (96px) en mobiel (64px) is de ruimte kleiner en viel het niet op;
   dáár niets veranderen, want daar was Roy tevreden over. */
@media (min-width: 1024px) {
  section[aria-labelledby="team-title"] { padding-top: 0; }
  .section.methode-intro { padding-top: 0; }
}

/* 11-09-2026 — Hoofdstukkenknop bij artikelen op mobiel.
   De inhoudsopgave staat op mobiel één keer bovenaan en is daarna weg; op
   desktop scrollt hij als kolom mee. Deze vaste knop rechtsonder brengt de
   hoofdstukken terug zodra je die lijst voorbij bent. Opgebouwd door
   inc/main-blogtoc.js uit de lijst die al in de pagina staat.

   Alleen onder 900px — precies het punt waarop de kolomweergave wegvalt.
   z-index 45 houdt hem onder de vaste balk (50) en onder het mobiele menu
   (60), zodat hij nooit over een geopend menu heen ligt. */
.toc-fab { display: none; }
.toc-fab[hidden] { display: none !important; }

@media (max-width: 900px) {
  .toc-fab {
    position: fixed;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-3);
  }
  .toc-fab-knop {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-black);
    color: var(--text-inverse);
    box-shadow: 0 6px 20px rgba(11, 12, 11, 0.28);
    cursor: pointer;
  }
  .toc-fab-knop svg { width: 22px; height: 22px; }
  /* Eén knop, twee iconen: lijst als hij dicht is, kruisje als hij open staat. */
  .toc-fab-knop .toc-ico-sluit,
  .toc-fab-knop[aria-expanded="true"] .toc-ico-lijst { display: none; }
  .toc-fab-knop[aria-expanded="true"] .toc-ico-sluit { display: block; }
  .toc-fab-knop[aria-expanded="true"] {
    background: var(--accent-soft);
    color: var(--text-on-accent);
  }

  /* Zonder deze regel stond het paneel altijd open: het `hidden`-attribuut
     zet `display:none` via de browserstijl, maar élke eigen stijlregel wint
     daarvan — ook eentje met lagere specificiteit. De `display:grid` hieronder
     zette het dus weer aan zodra de knop verscheen. */
  .toc-fab-paneel[hidden] { display: none !important; }
  .toc-fab-paneel {
    width: min(320px, calc(100vw - (2 * var(--gutter))));
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: var(--s-5);
    display: grid;
    gap: 2px;
    background: var(--c-white);
    border-radius: var(--r-md);
    box-shadow: 0 12px 34px rgba(11, 12, 11, 0.22);
  }
  .toc-fab-titel {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--s-3);
  }
  .toc-fab-paneel nav { display: grid; gap: 2px; }
  .toc-fab-paneel a {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-muted);
    padding: 8px 0 8px 14px;
    border-left: 2px solid var(--border-subtle);
  }
  .toc-fab-paneel a.is-active {
    color: var(--text-primary);
    border-left-color: var(--detail);
    font-weight: 500;
  }
}

/* Een sprong naar een hoofdstuk zette de kop onder de vaste balk (gemeten:
   24px erboven, dus onzichtbaar). De balk is 72px; met wat lucht erbij komt de
   kop netjes onder de rand uit. Geldt ook voor de kolom op desktop. */
.article-body h2 { scroll-margin-top: 96px; }


/* 11-09-2026 — "De methode" nog wat dichter op het cijferblok (desktop).
   Eerder vandaag ging het gat daar van 256 naar 128px door de bovenruimte van
   deze sectie weg te halen. Wat overbleef is de ónderruimte van het cijferblok
   erboven, en die mag voor Roy nog iets krapper: 128 → 64px.
   Alleen dit ene cijferblok op /over-roy/ — het gedeelde docentblok op de
   homepage en de twee privélespagina's heeft een eigen id (#docent) en blijft
   dus ongemoeid. Op tablet en mobiel verandert er niets. */
@media (min-width: 1024px) {
  .section.docent[aria-label="Roy in cijfers"] { padding-bottom: var(--s-8); }
}

/* 11-09-2026 — Bovenrandje van de eerste genreknop in de hero (mobiel).
   Op desktop staan de genres onder elkaar en is `border-top` de scheidslijn
   tússen twee regels; bij de eerste hoort die er dus niet te staan, vandaar
   `.style-btn:first-of-type { border-top: 0 }` in styles.css.
   Onder 1023px worden het losse kaartjes met een rand rondom — en daar bleef
   die regel óók gelden, want `:first-of-type` weegt zwaarder dan de `border`
   in de mediaquery. Gevolg: "01 Pop" had wel een linker-, rechter- en
   onderrand maar geen bovenkant; het kaartje stond open.

   De kleur moet er apart bij: `border-top: 0` is een verkorte schrijfwijze en
   zet naast de breedte óók de kleur terug op de standaard (de tekstkleur,
   62% wit) — het randje van 01 werd daardoor lichter dan dat van 02 t/m 05.
   Die kleur zetten we alleen wanneer de knop níet actief is; staat hij aan,
   dan kleurt `.style-btn.is-active` het hele kaartje mintgroen en moet de
   bovenrand meekleuren in plaats van grijs te blijven. */
@media (max-width: 1023px) {
  .style-btn:first-of-type { border-top-width: 1px; border-top-style: solid; }
  .style-btn:first-of-type:not(.is-active) { border-top-color: rgba(244, 243, 237, 0.14); }
}

/* 11-09-2026 — Cursuskaarten op de homepage plakten tegen de linkerrand (mobiel).
   De strook heeft wel 20px binnenruimte, maar `scroll-snap` klikt vast op de
   rand van de kaart zélf en negeert die ruimte: de browser schoof de strook
   dus meteen 20px op en "Pop / Pop Piano Cursus" raakte de schermrand.
   Met scroll-padding telt die ruimte wél mee bij het vastklikken, zodat de
   eerste kaart uitlijnt met de kop erboven.

   Geldt voor elke `.carousel`; de videocarousel op /over-roy/ heeft een eigen,
   specifiekere regel (uitlijnen op de tekstkolom) en houdt die. Op tablet en
   desktop past de rij binnen het scherm — daar valt er niets te schuiven en
   verandert er dus niets. */
.carousel-viewport { scroll-padding-left: var(--gutter); }

/* 11-09-2026 — Citaat en naam in de quote-banner weer aan elkaar.
   Alle citaten liggen op elkaar in hetzelfde vak (`grid-area: 1/1`), dus dat
   vak is zo hoog als het langste citaat. De rijen binnen een citaat staan op
   `auto`, en bij `align-content: normal` verdeelt de browser de overgebleven
   hoogte over die rijen: de regel met het citaat werd uitgerekt en duwde de
   naam naar beneden. Hoe korter het citaat, hoe groter het gat — gemeten op
   de privélespagina: 27px onder het eerste citaat, maar 113 tot 142px onder
   de volgende. Precies wat Roy zag vanaf het tweede citaat.
   Met `align-content: start` houden de rijen hun eigen hoogte en staat de naam
   overal even strak onder het citaat; de overgebleven ruimte valt onderaan.
   Geldt voor elke quote-banner (privéles, cursussen, cursusdetail, over-roy,
   abonnement) — dezelfde scheefheid zat daar ook. */
.qb-slide { align-content: start; }

/* 15-09-2026 — Quote-banner ("Wat studenten zeggen") past op een laptop in
   één scherm: citaat, naam én pijlen tegelijk in beeld.
   Roy op een 13"-laptop (viewport ~650–790px hoog): het blok was 874–1103px
   hoog, dus je kon nooit lezen en bladeren tegelijk. Drie oorzaken:
   1. Alle citaten liggen op elkaar (grid-area 1/1), dus het vak is zo hoog
      als het LANGSTE citaat. Eerste versie liet het vak het actieve citaat
      volgen (inactieve absoluut), maar dan verspringen de pijlen bij elk
      klikje — Roy: "irritant tijdens snel klikken". Daarom: vakhoogte blijft
      die van het langste citaat (pijlen staan vast), en het actieve citaat
      staat verticaal gecentreerd in dat vak (`align-content: center`; het
      11-09-blok hierboven zet `start`, dus de rijen rekken nog steeds niet).
   2. 44px op 24ch gaf tot 12 regels voor het langste citaat (358 tekens).
      De lettergrootte schaalt nu mee met de schermHOOGTE (4vh, 22–40px) en
      de kolom mag 30ch breed, zodat de langste citaten in ~10 regels passen.
   3. 96px padding + 48px gap boven en onder: nu 64 + 24.
   Alleen vanaf 640px — mobiel was volgens Roy goed en blijft ongemoeid.
   Geldt in één keer voor alle acht pagina's met dit blok. */
@media (min-width: 640px) {
  .qb-slide { align-content: center; }
  .qb-inner { padding-block: var(--s-8); gap: var(--s-5); }
  .qb-quote { font-size: clamp(22px, 4vh, 40px); max-width: 30ch; }
}

/* 15-09-2026 — "METHODE / De methode" op /over-roy/: eyebrow dichter op de kop,
   en weer lucht boven de eyebrow.
   Het cijferblok (rgb 11,12,11) en de methode-sectie (zwart) zijn twee tinten
   zwart, dus de kleurgrens is zichtbaar. Na de twee ingrepen van 11-09 stond
   "METHODE" nog maar 24px onder die grens, terwijl er 32px tussen eyebrow en
   kop zat — de eyebrow leek dus bij het cijferblok te horen in plaats van bij
   "De methode". Wat Roy bedoelde: de eyebrow hoort bij de kop.
   Nu: 64px boven de eyebrow (gelijk aan de 64px onder het cijferblok, dus de
   kleurgrens ligt precies in het midden) en 16px tussen eyebrow en kop
   (alleen hier; elders op de site blijft het patroon van 32px staan). */
@media (min-width: 1024px) {
  .section.methode-intro { padding-top: var(--s-8); }
}
.section.methode-intro .section-head .eyebrow { margin-bottom: 0; }

/* 17-09-2026 — Video achter de play-knop van de studentenkaarten (homepage).
   Roy vroeg waar hij de video's achter die knopjes kwijt kan; in het ontwerp
   was de knop decoratief. Nu: veld "Video" per testimonial (YouTube-link of
   eigen MP4-upload), afspelen via inc/main-tcardvideo.js. Tijdens het
   afspelen (.is-playing) wijken de foto, het verloop en de quote, zodat de
   video het hele kaartvlak krijgt en de eigen controls onderaan vrij staan.
   De play-knop wordt dan een stop-knop op dezelfde plek. */
.tcard .tcard-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--c-black);
  object-fit: contain;
  z-index: 1;
  filter: none;
  transform: none;
}
/* Specifieker dan `.tcard:hover .tcard-media video` (scale 1.1), anders vallen de controls buiten de kaart. */
.tcard.is-playing .tcard-media .tcard-player,
.tcard.is-playing:hover .tcard-media .tcard-player { transform: none; filter: none; }
.tcard.is-playing .tcard-media::after { opacity: 0; }
.tcard.is-playing .tcard-media img { visibility: hidden; }
.tcard.is-playing .tcard-body { opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-std); }
.tcard.is-playing:hover { transform: none; }
.tcard.is-playing .tcard-play { z-index: 2; }
button.tcard-play { cursor: pointer; font: inherit; }

/* 17-09-2026 (2) — Studentenkaarten: hele kaart klikbaar, video vult het vlak.
   Roy: "men hoeft niet letterlijk op de playknop te drukken" → de kaart met
   video krijgt een handje; het klikken zelf zit in main-tcardvideo.js.
   "Hij vult niet het hele vlak, zwarte rand": Roy's video is een YouTube
   Short (9:16), de kaart is 9:14. In een 9:14-iframe zet YouTube de video op
   hoogte en laat links en rechts zwart. Daarom krijgt het iframe de hoogte van
   een 9:16-vlak op kaartbreedte (16/14 = 114%), onderaan uitgelijnd: de video
   vult de breedte, de bediening van YouTube blijft onderaan zichtbaar en de
   bovenste ~12% (YouTube-titelbalk + koptekst van het beeld) valt buiten de
   kaart. Een eigen MP4 wordt met object-fit: cover gevuld — die snijdt
   symmetrisch (~6% boven en onder bij 9:16). */
.tcard[data-video], .tcard[data-yt] { cursor: pointer; }
.tcard.is-playing .tcard-media video.tcard-player { object-fit: cover; }
.tcard.is-playing .tcard-media iframe.tcard-player { top: auto; bottom: 0; height: calc(100% * 16 / 14); }

/* 18-09-2026 — Docentblok op de privélespagina's een tint zwarter.
   Sinds de videoreviews (18-09) staan daar drie secties in dezelfde tint
   (#0b0c0b): studentenkaarten → docentblok → FAQ. Roy wil het docentblok
   kunnen onderscheiden. Zelfde `:has(+ #faq)`-scope als de spacing-regel van
   11-09: alleen waar het docentblok direct door de FAQ wordt gevolgd (privé
   pianoles + solfège). Op de homepage volgt #aanbod (al puur zwart) op het
   docentblok — daar zou puur zwart juist samensmelten, dus die blijft. */
#docent:has(+ #faq) { background: #000; }

/* 18-09-2026 — Masterclasspagina: videosectie onder de hero + reviewbanner
   met meerdere citaten.
   1. #masterclass-video hergebruikt de brede video-embed van /over-roy/ en
      /abonnement/. Nieuw is alleen de YouTube-variant: de voorvertoning van
      hz_youtube_facade() vult het 16:9-kader, en de speler die er na een klik
      voor in de plaats komt ook.
   2. De reviewbanner (.image-banner.quote-banner) kon één citaat tonen; nu
      een repeater rv_slides met dezelfde crossfade als de quote-banners
      elders (.qb-slide/.is-active) en de pijltjes eronder. Het citaat en de
      naam houden hun oorspronkelijke opmaak (.t-quote/.attrib). */
.mv-intro { max-width: 62ch; margin: var(--s-5) auto 0; color: var(--text-muted-on-dark); }
.video-embed-media--yt .yt-play { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.video-embed-media--yt .yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-embed-media--yt .yt-play-icon { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text-on-accent); display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-std); }
.video-embed-media--yt .yt-play-icon svg { width: 30px; height: 30px; margin-left: 4px; }
.video-embed-media--yt .yt-play:hover .yt-play-icon { transform: translate(-50%, -50%) scale(1.07); }
.video-embed-media--yt::after { display: none; } /* geen verloop over de speler heen */
.video-embed-media--yt .yt-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.image-banner.quote-banner .rv-slides { width: 100%; max-width: none; }
.image-banner.quote-banner .rv-slides .qb-slide { max-width: 820px; margin-inline: auto; }
.image-banner.quote-banner .rv-slides .attrib { justify-content: center; }
.image-banner.quote-banner .rv-nav { justify-content: center; margin-top: var(--s-6); }

/* 18-09-2026 — Inhoudsopgave op desktop: scrollbaar als hij niet in beeld past.
   Roy zette een artikel met 13 hoofdstukken over; de vastgezette kolom
   (sticky, top 96px) was 917px hoog en een scherm van 700–900px toont dan
   alleen de eerste zeven à negen — de rest was onbereikbaar ("blijft
   vastzitten"). De kolom krijgt nu een maximumhoogte van de schermhoogte
   min de balk en wat lucht, en scrolt intern; het actieve hoofdstuk wordt
   door inc/main-blogtoc.js in beeld gehouden. Dunne scrollbalk in de kleur
   van de rand, zodat hij bij korte lijsten onzichtbaar blijft (alleen
   wanneer er iets te scrollen valt tekent de browser hem). Geldt voor alle
   artikelen; onder 900px staat de lijst gewoon in de tekst en scrolt de
   pagina zelf. */
@media (min-width: 901px) {
  .article-toc {
    max-height: calc(100vh - 96px - var(--s-7));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
    padding-right: var(--s-2);
  }
}

/* ===========================================================================
   Masterclass: agendakaartje in #interesse (22-09-2026)
   Kies M·01/M·02, zie de data van die masterclass, elk met een eigen
   inschrijflink (geneste repeater `dates` in `in_choices`). Zonder data
   verandert er niets.
   =========================================================================== */
.tf-agenda-group:not(.is-active) { display: none; }
.tf-agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.tf-date {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(11, 12, 11, 0.12);
}
.tf-date:first-child { padding-top: 0; }
.tf-date:last-child { border-bottom: 0; padding-bottom: 0; }
.tf-date-badge {
  display: grid;
  justify-items: center;
  min-width: 60px;
  padding: 8px 6px;
  border-radius: var(--r-sm, 8px);
  background: var(--surface-dark, #14211a);
  color: var(--text-inverse);
  line-height: 1;
}
.tf-date-day { font-family: var(--font-serif); font-size: 28px; font-weight: 400; }
.tf-date-month { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px; opacity: 0.8; }
.tf-date-info { display: grid; gap: 2px; min-width: 0; }
.tf-date-title { font-family: var(--font-serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.tf-date-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ticket-form .tf-date-btn { width: auto; padding: 10px 18px; white-space: nowrap; }
.tf-date.is-closed .tf-date-badge { opacity: 0.55; }
.tf-agenda-empty { color: var(--text-muted); text-align: center; padding: var(--s-4) 0; }
@media (max-width: 479px) {
  .tf-date { grid-template-columns: auto 1fr; }
  .tf-date-btn { grid-column: 1 / -1; }
  .ticket-form .tf-date-btn { width: 100%; justify-content: center; }
}

/* Video in het previewblok van een cursuspagina (02-10-2026).
   De speelknop was decoratief; nu kan er een YouTube-video of eigen MP4 achter
   zitten. Zonder deze regels krijgt het ingevoegde iframe de standaardmaat
   300x150 en staat het als een postzegel in het blok. */
.media-embed .embed-video,
.media-embed .yt-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }

/* Previewvideo op de cursuspagina's smaller (02-10-2026, verzoek Roy).
   Op een laptop vulde het 16:9-blok de hele container (1104px breed), waardoor
   de kop "Bekijk de introductie." buiten beeld viel. Alleen vanaf 900px, zodat
   mobiel ongemoeid blijft. */
@media (min-width: 900px) {
  /* Breedte volgt ook de schermHOOGTE: op een 13"-laptop (±650px hoog) viel de
     onderkant anders nog buiten beeld. 300px is de ruimte boven + onder het
     blok (balk, kop, sectiemarge); de rest wordt via 16:9 teruggerekend. */
  #preview .media-embed { max-width: min(820px, calc((100vh - 300px) * 16 / 9)); margin-inline: auto; }
}

/* ===========================================================================
   Hero-stroken: bijsnijden in plaats van uitrekken (05-10-2026, melding Roy)
   ---------------------------------------------------------------------------
   De hero op de homepage bestaat uit 8 verticale stroken die samen één foto
   tonen. In het ontwerp staat per strook `background-size: 800% 100%`: de foto
   wordt dan over de volle hoogte én breedte van het hero-vak geplet. Op een
   breed scherm valt dat niet op, op een telefoon (390 breed, 760 hoog) wordt
   een liggende foto flink uitgerekt — zichtbaar anders dan dezelfde foto op de
   cursuspagina's, waar `background-size: cover` staat.

   Oplossing: elke strook krijgt een laag ter grootte van de hele hero met
   `cover`, horizontaal verschoven naar zijn eigen positie. Het beeld wordt dus
   bijgesneden zoals overal elders, en de strokenanimatie blijft intact.
   =========================================================================== */
.hero-slide .slice {
  position: relative;
  overflow: hidden;
  background-image: none;   /* de laag hieronder neemt het over */
}
.hero-slide .slice::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(var(--i) * -100%);
  width: 800%;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/*
 * De scheidingslijn zat als `border-left` op de strook. Een rand valt buiten het
 * gebied dat `overflow: hidden` toont, dus lag er geen foto meer onder die
 * halfdoorzichtige lijn en kleurde hij mee met de donkere pagina — de lijnen
 * oogden daardoor harder dan in het ontwerp (melding Roy 05-10-2026). De lijn
 * ligt nu als dun laagje óver de foto, precies zoals eerst.
 */
.hero-slide .slice + .slice { border-left: 0; }
/*
 * De zeven lijnen worden in één keer over de hele hero getekend in plaats van
 * per strook (05-10-2026, melding Roy: ze stonden ongelijk uit elkaar). Een
 * strook is 1/8 van de breedte en dat is zelden een heel aantal pixels — op een
 * telefoon met retina-scherm werd de afstand afwisselend 98 en 100 pixels en
 * werd de ene lijn donkerder dan de andere. Als doorlopend patroon krijgt elke
 * lijn exact dezelfde positieberekening en dus hetzelfde beeld.
 */
.hero-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(100% / 8 - 1px),
    rgba(11, 12, 11, 0.18) calc(100% / 8 - 1px) calc(100% / 8)
  );
}

/* Cursusoverzicht: kaarten even groot als op de homepage (05-10-2026, verzoek Roy).
   De grid zette twee kaarten van 540px naast elkaar, waardoor het filtersysteem
   eronder buiten beeld viel. Nu dezelfde maat als de kaarten in de homepage-
   carrousel: clamp(280px, 26vw, 380px) met verhouding 3/4, links uitgelijnd en
   zoveel kaarten naast elkaar als er passen. Mobiel/tablet blijft ongewijzigd. */
@media (min-width: 1024px) {
  .vcard-grid {
    grid-template-columns: repeat(auto-fill, clamp(280px, 26vw, 380px));
    justify-content: start;
  }
  .vcard-grid .vcard { aspect-ratio: 3 / 4; }
}

/* Abonnementenpagina: keuzekaarten mogen niet breder worden dan hun kolom
   (05-10-2026, melding Roy). Bij "Academy Basis" verschijnen twee cursuschips
   naast elkaar; de grid-kolom stond op automatische breedte en groeide mee met
   die chips (377px), waardoor de kaart op mobiel 32px buiten het scherm viel en
   de prijs half wegviel. minmax(0, 1fr) houdt de kolom op de beschikbare
   breedte; de chips (die al flex-wrap hebben) zakken dan netjes onder elkaar. */
.plan-picker-wrap,
.plan-picker,
.plan-options { min-width: 0; }                       /* anders groeien ze mee met de inhoud */
.plan-picker-wrap,
.plan-picker { grid-template-columns: minmax(0, 1fr); }
.plan-options { grid-template-columns: minmax(0, 1fr); }
/* De knop eronder krijgt bij Basis het gekozen cursuslabel erbij
   ("Start met Basis · Pop Piano Cursus"). `.btn` is site-breed `nowrap`, dus die
   tekst liep op mobiel buiten de knop. Hier mag hij over twee regels. */
@media (max-width: 639px) {
  .plan-picker .btn { white-space: normal; line-height: 1.35; }
}

/* Contactpagina op mobiel: eerst het formulier, dan de gegevens (05-10-2026,
   verzoek Roy). Op desktop staan de gegevens links naast het formulier; op
   mobiel kwamen ze daardoor bóven het formulier, waardoor je eerst langs e-mail,
   Instagram en WhatsApp scrolt. Alleen de volgorde draait om — de HTML blijft
   gelijk, dus voor schermlezers en zoekmachines verandert er niets wezenlijks. */
@media (max-width: 1023px) {
  .contact-grid > .contact-channels { order: 2; }
  .contact-grid > .hz-embed { order: 1; }
}

/* De hero-ondertitel staat sinds 05-10-2026 als <h2> in de HTML (zodat de
   kernterm in een kop staat), maar moet er exact hetzelfde uitzien als eerst.
   Een h2 erft standaard het vette browsergewicht; de rest van de opmaak kwam
   al uit .hero-sub. Hiermee is het beeld pixel-identiek aan de oude alinea. */
.hero-sub {
  font-family: var(--font-sans);
  font-weight: 400;
}