/* Subpagina's – stijl "Klassiek" (zie STIJLRICHTLIJN.md). De bouwstenen staan in site.css;
   hier de standaard paginakop en de onderdelen die alleen op subpagina's voorkomen. */

/* ================= Paginakop ("above the fold") =================
   Hetzelfde donkere merkvlak als de hero en de panelen: antraciet, merkfade 23%, korrel.
   Loopt over de volle breedte onder de (doorzichtige) menubalk en eindigt onderaan in de
   ronding van de hero-kaart, zodat de lichte pagina er zichtbaar onder verdergaat. */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(520px, 86svh, 820px);
  padding: calc(var(--sc-masthead-h) + var(--sc-space-5)) 0 clamp(var(--sc-space-7), 5vw, 72px);
  background: var(--sc-ink);
  color: var(--sc-white);
  border-radius: 0 0 var(--sc-radius-xl) var(--sc-radius-xl);
  box-shadow: var(--sc-shadow-3);
}
/* Zonder foto rechts: compacter, de tekst draagt het vlak */
.page-hero:not(.page-hero--media) { min-height: clamp(400px, 56svh, 600px); }

/* 1. Optionele achtergrondfoto (zonder personen), gedimd zoals in de hero */
.page-hero__bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.5) saturate(.8);
}
/* 2. Merkfade op 23% */
.page-hero__scrim {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(90deg, rgba(50, 50, 50, .75) 0%, rgba(50, 50, 50, .45) 50%, rgba(50, 50, 50, .1) 100%);
}
@media (max-width: 720px) {
  .page-hero__scrim { background: linear-gradient(180deg, rgba(50, 50, 50, .55), rgba(50, 50, 50, .7)); }
}
.page-hero__fade { position: absolute; inset: 0; z-index: -2; background: var(--sc-fade); opacity: var(--sc-fade-dark); }
/* 3. Korrel */
.page-hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: .25;
}

.page-hero__inner { flex: 1; display: flex; flex-direction: column; gap: var(--sc-space-6); width: 100%; }

/* Kruimelpad: waar ben ik? Klein en rustig, zodat de kop de aandacht houdt */
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--sc-fs-small); color: var(--sc-on-dark-muted);
}
.crumbs li + li::before { content: "/"; margin-right: var(--sc-space-2); color: var(--sc-on-dark-line); }
.crumbs a { color: inherit; text-decoration: none; border-radius: 4px; }
.crumbs a:hover { color: var(--sc-white); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a[aria-current] { color: var(--sc-white); font-weight: 500; }

.page-hero__grid {
  flex: 1;
  display: grid; grid-template-columns: 1fr; gap: var(--sc-space-7);
  align-items: end;
}
@media (min-width: 960px) {
  .page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: var(--sc-space-8); }
}

.page-hero__body { max-width: 760px; }

/* 4. Kop: dezelfde letter als de pay-off (Jost 800, strak gespatieerd), regel 2 in lime */
.page-hero__title {
  margin: 0;
  font-size: clamp(2.75rem, 1.7rem + 3.4vw, 4.5rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: .95;
}
.page-hero__line { display: block; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
/* Smalle telefoons: lange samenstellingen (bijv. "Procesmanagement") passen op één regel */
@media (max-width: 420px) { .page-hero__title { font-size: min(2.75rem, 10.4vw); } }
.page-hero__line--accent { color: var(--sc-lime); }

.page-hero__intro {
  margin: var(--sc-space-5) 0 0; max-width: var(--sc-measure);
  font-size: clamp(var(--sc-fs-lead), 1rem + .4vw, 1.25rem); line-height: 1.5;
  color: var(--sc-on-dark-muted);
}
.page-hero__intro a { color: var(--sc-white); text-underline-offset: 3px; }

.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-6); }

/* Kerncijfers: dezelfde opbouw als de cijferbalk op de homepage, maar dan op donker */
.page-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--sc-space-4) var(--sc-space-7);
  list-style: none; margin: var(--sc-space-6) 0 0; padding: var(--sc-space-5) 0 0;
  border-top: 1px solid var(--sc-on-dark-line);
}
.page-hero__facts li { display: flex; flex-direction: column; gap: var(--sc-space-1); max-width: 16ch; }
.page-hero__facts strong { white-space: nowrap; font-size: var(--sc-fs-stat); font-weight: 700; line-height: var(--sc-lh-tight); letter-spacing: var(--sc-tracking-tight); }
.page-hero__facts span { font-size: var(--sc-fs-small); color: var(--sc-on-dark-muted); line-height: var(--sc-lh-snug); }
@media (max-width: 520px) {
  .page-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-space-5) var(--sc-space-4); }
  /* Een lange waarde (bijv. "€14,50 – €22,35" op Werken bij) past niet in een halve kolom:
     dan mag hij na het streepje doorlopen op de volgende regel, in plaats van van het scherm te vallen. */
  .page-hero__facts li { min-width: 0; max-width: none; }
  .page-hero__facts strong { white-space: normal; overflow-wrap: break-word; }
}

/* 5. Foto: echte consultants, helderste laag in beeld, zelfde kader als de foto's in de panelen */
.page-hero__media {
  margin: 0; overflow: hidden;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-on-dark-line);
  box-shadow: var(--sc-shadow-3);
}
.page-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) {
  .page-hero__media { aspect-ratio: 3 / 2; }
}

@media (max-width: 720px) {
  .page-hero { min-height: 0; border-radius: 0 0 var(--sc-radius-lg) var(--sc-radius-lg); }
  .page-hero:not(.page-hero--media) { min-height: 0; }
  .page-hero__inner { gap: var(--sc-space-6); }
  .page-hero__actions .btn { padding: 10px 18px; font-size: var(--sc-fs-small); }
}

/* Bij laden: waar ben ik → kop → toelichting → actie → beeld, in die volgorde */
.js .crumbs,
.js .page-hero__line,
.js .page-hero__intro,
.js .page-hero__actions,
.js .page-hero__facts,
.js .page-hero__media { animation: sc-rise var(--sc-dur-reveal) var(--sc-ease-out) both; }
.js .page-hero__line--accent { animation-delay: calc(1 * var(--sc-stagger)); }
.js .page-hero__intro { animation-delay: calc(2 * var(--sc-stagger)); }
.js .page-hero__actions { animation-delay: calc(3 * var(--sc-stagger)); }
.js .page-hero__facts { animation-delay: calc(4 * var(--sc-stagger)); }
.js .page-hero__media { animation-delay: calc(2 * var(--sc-stagger)); }

@media (prefers-reduced-motion: reduce) {
  .js .crumbs, .js .page-hero__line, .js .page-hero__intro, .js .page-hero__actions,
  .js .page-hero__facts, .js .page-hero__media { animation: none; }
}

/* ================= Onderdelen voor subpagina's ================= */

/* Raster met klikbare kaarten (andere pagina's in dezelfde rubriek, diensten, klantcases) */
.link-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Kaart met lime streep bovenaan = de actieve-menu-markering uit de menubalk */
.card--streep::before {
  content: ""; display: block; width: 32px; height: 3px; border-radius: 3px;
  background: var(--sc-lime); margin-bottom: var(--sc-space-5);
}
.cards-3 {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* Tekst naast een lijst: introductie links, opsomming in een kaart rechts */
.intro-split { display: grid; grid-template-columns: 1fr; gap: var(--sc-space-7); align-items: start; }
@media (min-width: 960px) { .intro-split { grid-template-columns: 1.1fr 1fr; gap: var(--sc-space-8); } }
.intro-split__text p { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-lead); color: var(--sc-ink-muted); max-width: var(--sc-measure); }
.intro-split__text p:last-child { margin-bottom: 0; }

.check-list { padding: var(--sc-space-6); }
.check-list__title { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); }
.check-list ul { list-style: none; margin: 0; padding: 0; display: grid; }
.check-list li + li { border-top: 1px solid var(--sc-line); }
.check-list ul a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-space-4);
  padding: var(--sc-space-3) 0; color: inherit; text-decoration: none; font-weight: 500;
  transition: color var(--sc-dur-fast) var(--sc-ease);
}
.check-list ul a::after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
  color: var(--sc-blue);
}
.check-list ul a:hover { color: var(--sc-blue); }

/* Tijdelijke inhoud ("in de maak") */
.placeholder { padding: clamp(var(--sc-space-6), 5vw, var(--sc-space-8)); }
.placeholder__title { margin: 0 0 var(--sc-space-2); font-size: var(--sc-fs-h3); font-weight: 700; }
.placeholder p { margin: 0; color: var(--sc-ink-muted); max-width: var(--sc-measure); }

/* Lopende tekst (bijv. een klantcase) */
.prose { max-width: 720px; }
.prose h2 { margin: var(--sc-space-6) 0 var(--sc-space-2); font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-lead); color: var(--sc-ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .check-list ul a { transition: none; }
}

/* ================= Mensen ================= */
/* Raster met personenkaarten: foto in dezelfde verhouding als op de oude site (4:5) */
.team-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.team-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* Compact raster voor lange teamoverzichten (onze consultants): op de telefoon drie
   per rij, op een breed scherm zes, zodat je niet eindeloos hoeft te scrollen. */
.team-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-3); }
@media (min-width: 640px) { .team-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-space-4); } }
@media (min-width: 1024px) { .team-grid--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.team-grid--compact .person__body { padding: var(--sc-space-2) var(--sc-space-3) var(--sc-space-3); }
.team-grid--compact .person__naam { font-size: var(--sc-fs-small); overflow-wrap: anywhere; hyphens: auto; }
.team-grid--compact .person__rol,
.team-grid--compact .person__mail { font-size: var(--sc-fs-small); overflow-wrap: anywhere; hyphens: auto; }
.team-grid--compact .person__mail { padding-top: var(--sc-space-2); text-underline-offset: 3px; }
/* Alleen op de telefoon compact (dienstpagina's, 4 tot 6 consultants): drie per rij;
   op grotere schermen blijft het gewone raster. */
@media (max-width: 639px) {
  .team-grid--compact-mobiel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-3); }
  .team-grid--compact-mobiel .person__body { padding: var(--sc-space-2) var(--sc-space-3) var(--sc-space-3); }
  .team-grid--compact-mobiel .person__naam { font-size: var(--sc-fs-small); overflow-wrap: anywhere; hyphens: auto; }
  .team-grid--compact-mobiel .person__rol,
  .team-grid--compact-mobiel .person__tekst,
  .team-grid--compact-mobiel .person__mail { font-size: var(--sc-fs-small); overflow-wrap: anywhere; hyphens: auto; }
  .team-grid--compact-mobiel .person__mail { padding-top: var(--sc-space-2); text-underline-offset: 3px; }
}
.person { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.person__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--sc-blue-soft); }
.person__body { display: flex; flex-direction: column; flex: 1; padding: var(--sc-space-4) var(--sc-space-5) var(--sc-space-5); }
.person__naam { margin: 0; font-size: var(--sc-fs-body); font-weight: 700; line-height: var(--sc-lh-snug); }
.person__rol { margin: var(--sc-space-1) 0 0; font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.person__tekst { margin: var(--sc-space-3) 0 0; font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.person__mail {
  margin-top: auto; padding-top: var(--sc-space-3);
  font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-blue);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}

/* Snelkoppelingen naar onderdelen van een lange pagina (bijv. de hubs) */
.jump-links { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); list-style: none; margin: 0; padding: 0; }
.jump-links a {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius-pill);
  background: var(--sc-white); color: var(--sc-ink); text-decoration: none;
  font-size: var(--sc-fs-small); font-weight: 500;
  transition: background-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
}
.jump-links a:hover { background: var(--sc-blue-soft); color: var(--sc-blue); }

/* Sectie met kop + tekst naast elkaar boven een raster */
.hub__head { display: grid; gap: var(--sc-space-4) var(--sc-space-8); margin-bottom: var(--sc-space-6); }
@media (min-width: 960px) { .hub__head { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.hub__head .section__title { margin: 0; }
.hub__intro p { margin: 0 0 var(--sc-space-3); color: var(--sc-ink-muted); max-width: 70ch; }
.hub__intro p:last-child { margin-bottom: 0; }
[id] { scroll-margin-top: calc(var(--sc-header-h) + var(--sc-space-4)); }

@media (prefers-reduced-motion: reduce) { .jump-links a { transition: none; } }

/* Kaart met foto bovenaan (rand tot rand) */
.card--media { overflow: hidden; }
.card--media .card__img {
  display: block; width: calc(100% + 2 * var(--sc-space-6)); max-width: none; height: auto; aspect-ratio: 2 / 1; object-fit: cover;
  margin: calc(-1 * var(--sc-space-6)) calc(-1 * var(--sc-space-6)) var(--sc-space-5);
}

/* ================= Logo's en profielen ================= */
.logo-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.logo-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sc-space-4); height: 100%; padding: var(--sc-space-5); text-align: center; }
.logo-card img { display: block; width: auto; max-width: 100%; height: 72px; object-fit: contain; }
.logo-card p { margin: 0; font-size: var(--sc-fs-small); font-weight: 600; line-height: var(--sc-lh-snug); }

/* Uitgelichte partner/persoon: logo of foto naast tekst */
.feature { display: grid; gap: var(--sc-space-6); padding: clamp(var(--sc-space-6), 4vw, var(--sc-space-7)); align-items: center; }
@media (min-width: 860px) { .feature { grid-template-columns: 280px 1fr; gap: var(--sc-space-7); } }
.feature__media { display: grid; place-items: center; }
.feature__media img { display: block; max-width: 100%; height: auto; max-height: 220px; object-fit: contain; }
.feature__media--rond img { width: 220px; height: 220px; max-height: none; border-radius: 50%; object-fit: cover; }
.feature__label { margin: 0 0 var(--sc-space-2); font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-blue); }
.feature__title { margin: 0 0 var(--sc-space-1); font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight: 700; line-height: var(--sc-lh-tight); letter-spacing: var(--sc-tracking-tight); }
.feature__sub { margin: 0 0 var(--sc-space-4); color: var(--sc-ink-muted); font-weight: 500; }
.feature__body p { margin: 0 0 var(--sc-space-3); color: var(--sc-ink-muted); max-width: 70ch; }
.feature__body p:last-child { margin-bottom: 0; }
.feature__body a:not(.btn) { color: var(--sc-blue); }
.stack { display: grid; gap: var(--sc-space-5); }
.plain-list { margin: var(--sc-space-3) 0 0; }
.plain-list li { padding: var(--sc-space-3) 0; color: var(--sc-ink); }
.note { margin-top: var(--sc-space-6); max-width: none; }

/* ================= Klantcases ================= */
.case-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
.case-card__logo {
  display: flex; align-items: center; height: 56px; margin-bottom: var(--sc-space-5);
}
.case-card__logo img { display: block; max-height: 56px; max-width: 160px; width: auto; height: auto; object-fit: contain; }
.case-logo-lg { display: block; max-height: 120px; max-width: 260px; width: auto; height: auto; margin-bottom: var(--sc-space-5); }
.check-list__title--spaced { margin-top: var(--sc-space-6); }
.panel__label { margin: 0 0 var(--sc-space-3); font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-lime); }
.panel .panel__text--wide { max-width: 64ch; }

/* ================= Publicaties ================= */
.pub-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sc-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.pub-card { overflow: hidden; }
.pub-card__img {
  display: block; width: calc(100% + 2 * var(--sc-space-6)); max-width: none; height: auto; aspect-ratio: 600 / 370; object-fit: cover;
  margin: calc(-1 * var(--sc-space-6)) calc(-1 * var(--sc-space-6)) var(--sc-space-5);
  background: var(--sc-blue-soft);
}
/* Lopende artikeltekst */
.prose--artikel { max-width: 820px; margin: 0 auto; }
.prose h3 { margin: var(--sc-space-5) 0 var(--sc-space-2); font-size: var(--sc-fs-body); font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 var(--sc-space-4); padding-left: 1.25em; color: var(--sc-ink-muted); font-size: var(--sc-fs-lead); }
/* juridische teksten: lange lappen tekst, dus iets kleiner en rustiger */
.prose--juridisch p, .prose--juridisch ul, .prose--juridisch ol { font-size: var(--sc-fs-body); }
.prose--juridisch li { margin-bottom: var(--sc-space-2); }
.prose li { margin-bottom: var(--sc-space-1); }
.prose a:not(.btn) { color: var(--sc-blue); }
.prose strong { color: var(--sc-ink); }
.prose blockquote { margin: var(--sc-space-5) 0; padding-left: var(--sc-space-5); border-left: 3px solid var(--sc-lime); }
.prose blockquote p { color: var(--sc-ink); font-weight: 500; }
.prose__img { display: block; width: 100%; height: auto; margin: var(--sc-space-5) 0; border-radius: var(--sc-radius-sm); }
/* Artikelen: alle tekstblokken op dezelfde leesbreedte, logo klein bovenaan, staande foto's niet
   over de volle breedte, en het downloadblok voor de checklist */
.prose--artikel > :not(.actions):not(.prose__download):not(.prose__img) { max-width: var(--sc-measure); }
.prose--artikel h2 { margin-top: var(--sc-space-7); }
.prose--artikel h3 { margin: var(--sc-space-7) 0 var(--sc-space-2); font-size: var(--sc-fs-h3); line-height: var(--sc-lh-snug); color: var(--sc-ink); }
.prose--artikel .case__meta + h2, .prose--artikel .prose__logo + h2 { margin-top: 0; }
.prose__logo { display: block; width: auto; height: auto; max-width: 220px; max-height: 64px; margin: 0 0 var(--sc-space-6); }
.prose__foto { display: block; width: 100%; max-width: 360px; height: auto; margin: var(--sc-space-5) 0; border-radius: var(--sc-radius-sm); }
.prose__download {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-5);
  margin: var(--sc-space-6) 0; padding: var(--sc-space-5); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-lg);
}
.prose__download img { width: 120px; height: auto; border-radius: var(--sc-radius-sm); }
.prose__download div { flex: 1 1 240px; }
.prose .prose__download-titel { margin: 0 0 var(--sc-space-4); color: var(--sc-ink); font-weight: 600; }
.prose__avatar { display: block; width: 120px; height: 150px; object-fit: cover; margin: var(--sc-space-5) 0 var(--sc-space-2); border-radius: var(--sc-radius-sm); }
.plain-list--check { list-style: none; padding: 0; }
.plain-list--check li { position: relative; padding: var(--sc-space-2) 0 var(--sc-space-2) var(--sc-space-6); color: var(--sc-ink-muted); }
.plain-list--check li::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--sc-space-2) + .45em); width: 12px; height: 6px;
  border-left: 2px solid var(--sc-blue); border-bottom: 2px solid var(--sc-blue); transform: rotate(-45deg);
}
.card__text--spaced + .card__text--spaced { margin-top: var(--sc-space-3); }
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, 1fr); } }
.subhead { margin: var(--sc-space-7) 0 var(--sc-space-4); font-size: var(--sc-fs-h3); font-weight: 700; }

/* ================= Oproep met persoon =================
   Donker merkvlak met rechts een vrijstaande consultant (stijl "Klassiek"): de persoon staat op de
   onderrand van het vlak, wordt daar afgesneden en steekt met het hoofd boven het vlak uit.
   De persoon is de helderste laag; tekst en knoppen blijven links, nooit over het gezicht. */
.cta-persoon { position: relative; margin-top: clamp(var(--sc-space-6), 6vw, var(--sc-space-8)); }
.cta-persoon .panel { min-height: 340px; }
.cta-persoon .panel > * { max-width: min(560px, 58%); }
.cta-persoon__img {
  position: absolute; z-index: 2; bottom: 0; right: clamp(var(--sc-space-5), 7vw, 120px);
  height: calc(100% + clamp(40px, 6vw, 88px)); width: auto; max-width: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
  pointer-events: none;
}
/* Smal scherm: tekst boven, persoon eronder op de onderrand */
@media (max-width: 760px) {
  .cta-persoon .panel { padding-bottom: 340px; }
  .cta-persoon .panel > * { max-width: none; }
  .cta-persoon__img { height: 320px; right: 50%; transform: translateX(50%); }
}
/* Groep: brede foto van meerdere consultants naast elkaar, met een vaste, bescheiden maat
   (groeit niet mee met een hoog vlak) */
.cta-persoon--groep .cta-persoon__img { height: clamp(240px, 22vw, 320px); right: clamp(var(--sc-space-4), 3vw, var(--sc-space-6)); }
@media (max-width: 760px) {
  .cta-persoon--groep .panel { padding-bottom: 230px; }
  .cta-persoon--groep .cta-persoon__img { height: auto; width: min(92%, 380px); right: 50%; }
}

/* ================= Filterbalk (publicaties, klantcases) =================
   Blijft onder de menubalk staan tijdens het scrollen, zodat je altijd kunt bijsturen. */
.filterbar {
  position: sticky; top: calc(var(--sc-header-h) + var(--sc-space-2)); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-space-3);
  margin-bottom: var(--sc-space-3); padding: var(--sc-space-2);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: var(--sc-glass-blur); backdrop-filter: var(--sc-glass-blur);
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius-lg);
  box-shadow: var(--sc-shadow-1);
}
.filterbar__chips { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sc-space-2);
  padding: 8px 14px; border: 1px solid var(--sc-line); border-radius: var(--sc-radius-pill);
  background: var(--sc-white); color: var(--sc-ink);
  font: inherit; font-size: var(--sc-fs-small); font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color var(--sc-dur-fast) var(--sc-ease), border-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
}
.chip:hover { background: var(--sc-blue-soft); color: var(--sc-blue); border-color: transparent; }
/* actieve keuze = de primaire knop: lime met antraciet */
.chip[aria-pressed="true"] { background: var(--sc-lime); border-color: var(--sc-lime); color: var(--sc-ink); font-weight: 600; }
.chip__count {
  min-width: 22px; padding: 1px 6px; border-radius: var(--sc-radius-pill);
  background: var(--sc-blue-soft); color: var(--sc-blue); font-size: .75rem; font-weight: 600; text-align: center;
}
.chip[aria-pressed="true"] .chip__count { background: rgba(50, 50, 50, .12); color: var(--sc-ink); }
.chip:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }

/* Keuzelijsten (klantcases: sector en dienst): dezelfde pil als de knoppen, met een pijltje; een gekozen waarde is lime */
.filterbar__keuzes { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); }
.filterkeuze { position: relative; display: flex; min-width: 0; }
.filterkeuze__select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; padding: 8px 36px 8px 14px;
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius-pill);
  background: var(--sc-white); color: var(--sc-ink);
  font: inherit; font-size: var(--sc-fs-small); font-weight: 500; line-height: 1.2;
  text-overflow: ellipsis; cursor: pointer;
  transition: background-color var(--sc-dur-fast) var(--sc-ease), border-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
}
.filterkeuze__select:hover { background: var(--sc-blue-soft); color: var(--sc-blue); border-color: transparent; }
.filterkeuze__select.is-actief { background: var(--sc-lime); border-color: var(--sc-lime); color: var(--sc-ink); font-weight: 600; }
.filterkeuze__select:focus-visible { outline: 2px solid var(--sc-focus); outline-offset: 2px; }
.filterkeuze__select option { background: var(--sc-white); color: var(--sc-ink); font-weight: 400; }
.filterkeuze__pijl { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.filterkeuze:hover .filterkeuze__pijl { color: var(--sc-blue); }
.filterkeuze:has(.is-actief) .filterkeuze__pijl { color: var(--sc-ink); }

.filterbar__search {
  display: flex; align-items: center; gap: var(--sc-space-2);
  flex: 1 1 240px; max-width: 340px;
  padding: 0 var(--sc-space-4); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-pill);
  background: var(--sc-white); color: var(--sc-ink-muted);
}
.filterbar__search:focus-within { border-color: var(--sc-blue); box-shadow: 0 0 0 3px var(--sc-blue-soft); }
.filterbar__search input {
  flex: 1; min-width: 0; padding: 10px 0; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--sc-fs-small); color: var(--sc-ink);
}

.filterbar__status { margin: 0 0 var(--sc-space-5); font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.filter-context { margin: calc(-1 * var(--sc-space-3)) 0 var(--sc-space-5); font-weight: 600; }
.filter-context a { color: var(--sc-blue); text-underline-offset: 3px; }
.filter-empty { padding: var(--sc-space-7) 0; text-align: center; color: var(--sc-ink-muted); }
.link-button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--sc-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Na filteren komen de kaarten kort omhoog in beeld: laat zien dat de lijst is bijgewerkt */
[data-filter-item].is-filtered-in { animation: sc-rise var(--sc-dur-slow) var(--sc-ease-out); }

/* Mobiel: chips in één veegrij, keuzelijsten naast elkaar, zoekveld op volle breedte */
@media (max-width: 720px) {
  .filterbar { top: calc(var(--sc-header-h) + var(--sc-space-1)); }
  .filterbar__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -2px; padding: 2px; width: 100%; }
  .filterbar__chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .filterbar__keuzes { flex-wrap: nowrap; width: 100%; }
  .filterkeuze { flex: 1 1 0; }
  .filterbar__search { max-width: none; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .filterkeuze__select { transition: none; }
  [data-filter-item].is-filtered-in { animation: none; }
}


/* ================= Paginakop met onderwerp-beeld (dienstpagina's) =================
   Van achter naar voren: illustratie van het onderwerp → licht doorschijnend antraciet vlak →
   merkfade 23% → korrel. Zo schemert het onderwerp heel licht door het merkvlak heen, rechts
   van de tekst, zonder de leesbaarheid van de kop te raken. */
.page-hero__illus { position: absolute; inset: var(--sc-masthead-h) 0 var(--sc-space-5); z-index: -5; pointer-events: none; }
.page-hero__illus img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: right center;
  /* loopt naar links weg, zodat de tekstkant rustig blijft */
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 60%);
}
.page-hero__veil { position: absolute; inset: 0; z-index: -4; background: var(--sc-ink); opacity: .76; }

@media (max-width: 860px) {
  /* smal scherm: beeld achter de tekst, dus nog iets zachter */
  .page-hero__illus img { object-fit: cover; object-position: 78% center; -webkit-mask-image: none; mask-image: none; }
  .page-hero__veil { opacity: .84; }
}

@media (prefers-reduced-motion: no-preference) {
  /* bij laden schemert het beeld rustig op; bij scrollen schuift het iets langzamer mee (diepte) */
  .js .page-hero__illus img { animation: sc-illus-in calc(var(--sc-dur-reveal) * 1.6) var(--sc-ease-out) both; }
  @supports (animation-timeline: scroll()) {
    .page-hero__illus { animation: sc-illus-drift linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
  }
}
@keyframes sc-illus-in { from { opacity: 0; transform: scale(1.04); } }
@keyframes sc-illus-drift { to { transform: translateY(8%); } }

/* ================= Hubkaart (Over ons) =================
   Nederland in het midden, de hubs met hun consultants links en rechts ervan. Lijntjes van elke
   groep naar de hub op de kaart worden door site.js getekend. Smal scherm: kaart boven, groepen eronder. */
.hubmap { position: relative; display: grid; gap: var(--sc-space-6); grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .hubmap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-space-6); align-items: center; }
}
@media (max-width: 1099px) { .hubmap__kaart { order: -1; max-width: 520px; margin: 0 auto; } }
.hubmap__col { display: grid; gap: var(--sc-space-5); position: relative; z-index: 1; }
.hubmap__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.hubmap__lines path { fill: none; stroke: var(--sc-blue); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .45; transition: opacity var(--sc-dur-base) var(--sc-ease), stroke var(--sc-dur-base) var(--sc-ease); }
.hubmap__lines path.is-active { opacity: 1; stroke: var(--sc-ink); stroke-dasharray: none; }
@media (max-width: 1099px) { .hubmap__lines { display: none; } }

/* De kaart: Nederland in de merkfade (licht), buurlanden heel subtiel */
.hubmap__kaart { margin: 0; position: relative; z-index: 1; }
.hubmap__kaart svg { display: block; width: 100%; height: auto; overflow: hidden; }
.hubmap__land { fill: url(#nl-fade); fill-opacity: .22; stroke: var(--sc-blue); stroke-opacity: .45; stroke-width: 1; stroke-linejoin: round; }
.hubmap__verbinding { stroke: var(--sc-ink); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .5; }
.hubmap__punt { fill: var(--sc-lime); stroke: var(--sc-ink); stroke-width: 2.5; transition: transform var(--sc-dur-base) var(--sc-ease-out); transform-box: fill-box; transform-origin: center; }
.hubmap__punt--klein { fill: var(--sc-white); stroke-width: 2; }
.hubmap__pulse { fill: var(--sc-lime); opacity: .5; transform-box: fill-box; transform-origin: center; animation: hub-pulse 2.6s var(--sc-ease-out) infinite; }
.hubmap__stad { font: 500 13px var(--sc-font); fill: var(--sc-ink-muted); paint-order: stroke; stroke: var(--sc-white); stroke-width: 3px; stroke-linejoin: round; }
.hubmap__stad--hoofd { font-weight: 700; font-size: 15px; fill: var(--sc-ink); }
.hubmap__hub.is-active .hubmap__punt { transform: scale(1.25); }
@keyframes hub-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }

/* Hubgroep: kop met lime punt, daaronder de consultants als kleine kaartjes */
.hubcard { padding: var(--sc-space-4) var(--sc-space-5); transition: box-shadow var(--sc-dur-base) var(--sc-ease), border-color var(--sc-dur-base) var(--sc-ease); }
.hubcard.is-active { box-shadow: var(--sc-shadow-2); border-color: var(--sc-blue); }
.hubcard__head { display: flex; align-items: flex-start; gap: var(--sc-space-3); margin-bottom: var(--sc-space-3); }
.hubcard__dot { flex: 0 0 14px; height: 14px; margin-top: 5px; border-radius: 50%; background: var(--sc-lime); border: 2.5px solid var(--sc-ink); }
.hubcard__naam { margin: 0; font-size: var(--sc-fs-body); font-weight: 700; line-height: var(--sc-lh-snug); }
.hubcard__meta { margin: 2px 0 0; font-size: var(--sc-fs-small); color: var(--sc-ink-muted); }
.hubcard__link {
  display: inline-block; margin-top: var(--sc-space-3);
  font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-blue);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.hubcard--centraal { margin-top: var(--sc-space-6); }
/* Vacaturestand (Vacatures): per hub de vacature met een knop in plaats van de consultants */
.hubcard__naam { overflow-wrap: anywhere; }
.hubcard--vacature { padding: var(--sc-space-5); }
.hubcard__knop { margin-top: var(--sc-space-2); }
.hubcard--centraal .minis { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }

.minis { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-space-2); grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 520px) { .minis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mini { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.mini img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 8px; background: var(--sc-blue-soft);
  box-shadow: 0 0 0 1px var(--sc-line);
  transition: transform var(--sc-dur-fast) var(--sc-ease);
}
.mini--lead img { box-shadow: 0 0 0 2px var(--sc-lime); }
.mini:hover img { transform: translateY(var(--sc-lift)) scale(1.04); }
.mini__naam { max-width: 100%; font-size: 10.5px; line-height: 1.2; color: var(--sc-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .hubmap__pulse { animation: none; opacity: 0; }
  .hubmap__punt, .hubcard, .mini img, .hubmap__lines path { transition: none; }
}

/* Twee personen in de oproep: de achterste iets kleiner en naar links, net achter de voorste */
.cta-persoon--duo .cta-persoon__img { right: clamp(var(--sc-space-5), 4vw, 72px); }
.cta-persoon--duo .cta-persoon__img--achter {
  z-index: 1; right: clamp(150px, 17vw, 270px);
  height: calc(92% + clamp(32px, 5vw, 72px));
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35)) brightness(.96);
}
@media (max-width: 760px) {
  .cta-persoon--duo .cta-persoon__img { right: 50%; transform: translateX(70%); }
  .cta-persoon--duo .cta-persoon__img--achter { right: 50%; height: 290px; transform: translateX(-5%); }
}

/* Formulier in een witte kaart (bijv. de brochure op /brochure-download/) */
.form-slot:not(.placeholder) { padding: clamp(var(--sc-space-5), 4vw, var(--sc-space-7)); align-self: start; }

/* ================= Wereldkaart (achtergrond Over ons) =================
   Vaste laag achter de inhoud: Nederland gekleurd zoals op de hubkaart, buurlanden en de wereld als dunne
   lijnen. site.js zet de uitsnede zó dat Nederland precies onder de hubkaart ligt, en zoomt uit bij het
   scrollen naar "Waar we voor staan". Lijnen blijven 1px dik op elk zoomniveau (non-scaling-stroke). */
.wereld { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--sc-dur-reveal) var(--sc-ease); }
/* stand "pagina": ligt in de pagina en scrolt vanzelf mee (maten zet site.js) */
.wereld.is-pagina { position: absolute; inset: auto; }
html.wereld-aan .wereld { opacity: 1; }
.wereld svg { display: block; width: 100%; height: 100%; }
.wereld path { fill: none; stroke: var(--sc-blue); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wereld__ver { stroke-opacity: .26; }
.wereld__buren { stroke-opacity: .32; }
.wereld .wereld__nl { fill: url(#wereld-nl-fade); fill-opacity: .22; stroke-opacity: .45; }
/* de hubkaart laat haar eigen Nederland weg; dat van de achtergrond ligt er precies onder */
html.wereld-aan .hubmap__land { fill: none; stroke: none; }
/* tijdens het zoomen ligt het hubblok als miniatuur op de kaart: achter de inhoud, niet klikbaar */
.is-gezoomd { z-index: -1; pointer-events: none; }
.hubcard.is-gezoomd { position: relative; }

/* Case op een dienstpagina: logo van de klant in een witte tegel rechts in het donkere vlak */
.dienst-case { display: grid; gap: var(--sc-space-6); align-items: center; }
@media (min-width: 900px) { .dienst-case { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sc-space-8); } }
.dienst-case__logo {
  display: grid; place-items: center; aspect-ratio: 16 / 10; padding: var(--sc-space-6);
  border-radius: var(--sc-radius-lg); background: var(--sc-white); box-shadow: var(--sc-shadow-3);
  transition: transform var(--sc-dur-base) var(--sc-ease-out);
}
.dienst-case__logo:hover { transform: translateY(var(--sc-lift)); }
.dienst-case__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 899px) { .dienst-case__logo { order: -1; width: min(260px, 70%); } }


/* Subdiensten: kop boven de extra rij doorklikkaarten op de dienstpagina, en het downloadblok */
.dienst-sub__kop { margin: var(--sc-space-8) 0 var(--sc-space-5); font-size: var(--sc-fs-h3); font-weight: 700; line-height: var(--sc-lh-snug); }
.subdienst__acties { justify-content: flex-start; }
.subdienst-downloads { display: grid; gap: var(--sc-space-5); }
.subdienst-download { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-space-5); }
.subdienst-download > div { flex: 1 1 420px; }
.subdienst-download__label { margin: 0 0 var(--sc-space-2); font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-blue); }
.subdienst-lijst li { position: relative; padding: var(--sc-space-3) 0 var(--sc-space-3) var(--sc-space-5); color: var(--sc-ink-muted); }
.subdienst-lijst li::before { content: ""; position: absolute; left: 2px; top: calc(var(--sc-space-3) + .6em); width: 8px; height: 8px; border-radius: 50%; background: var(--sc-lime); }

/* ================= Kernwaarden als sterrenbeeld (Werken bij) =================
   Zes sterren vormen samen de raket uit het logo. Bij binnenkomst verschijnen eerst de sterren,
   dan de verbindingslijnen; daarna zweeft de raket licht en flakkert de stuwkracht. De gekozen
   waarde licht lime op. Alleen transform/opacity, en stil bij "minder beweging". */
.kernwaarden { display: grid; gap: var(--sc-space-6); align-items: center; }
@media (min-width: 900px) {
  .kernwaarden { grid-template-columns: minmax(280px, 5fr) 7fr; gap: var(--sc-space-8); }
}
.kernwaarden__beeld { max-width: 440px; width: 100%; margin-inline: auto; }
.sterrenbeeld { display: block; width: 100%; height: auto; overflow: visible; }
.sterrenbeeld * { transform-box: fill-box; transform-origin: center; }
.sterrenbeeld__lucht circle { fill: var(--sc-white); opacity: .35; }
.sterrenbeeld__lijnen line { stroke: var(--sc-on-dark-line); stroke-width: 1.5; stroke-linecap: round; }
.sterrenbeeld__venster { fill: none; stroke: var(--sc-on-dark-line); stroke-width: 1.5; stroke-dasharray: 3 6; }
.sterrenbeeld__hoeken circle { fill: var(--sc-white); opacity: .6; }
.ster { cursor: pointer; }
.ster__raak { fill: transparent; }
.ster__kern { fill: var(--sc-white); transition: fill var(--sc-dur-base) var(--sc-ease), transform var(--sc-dur-slow) var(--sc-ease-out); }
.ster__halo { fill: var(--sc-lime); opacity: 0; transform: scale(.4); transition: opacity var(--sc-dur-slow) var(--sc-ease), transform var(--sc-dur-slow) var(--sc-ease-out); }
.ster__label {
  font-family: inherit; font-size: 17px; font-weight: 600; fill: var(--sc-lime);
  opacity: 0; transform: translateY(4px); transition: opacity var(--sc-dur-slow) var(--sc-ease), transform var(--sc-dur-slow) var(--sc-ease-out);
  pointer-events: none;
}
.ster:hover .ster__kern { transform: scale(1.25); }
.ster.is-actief .ster__kern { fill: var(--sc-lime); transform: scale(1.35); }
.ster.is-actief .ster__halo { opacity: .22; transform: scale(1); }
.ster.is-actief .ster__label { opacity: 1; transform: none; }

.kernwaarden__intro { max-width: 46ch; }
.kernwaarden__tabs { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); margin: var(--sc-space-5) 0; }
.kernwaarden__tabs [role="tab"] {
  font: inherit; font-size: var(--sc-fs-small); font-weight: 500; cursor: pointer;
  padding: var(--sc-space-2) var(--sc-space-4); border-radius: var(--sc-radius-pill);
  border: 1px solid var(--sc-on-dark-line); background: transparent; color: var(--sc-white);
  transition: background-color var(--sc-dur-fast) var(--sc-ease), border-color var(--sc-dur-fast) var(--sc-ease), color var(--sc-dur-fast) var(--sc-ease);
}
.kernwaarden__tabs [role="tab"]:hover { border-color: var(--sc-white); }
.kernwaarden__tabs [role="tab"][aria-selected="true"] { background: var(--sc-lime); border-color: var(--sc-lime); color: var(--sc-ink); }
.kernwaarden__tabs [role="tab"]:focus-visible { outline: 2px solid var(--sc-lime); outline-offset: 2px; }
html:not(.js) .kernwaarden__tabs { display: none; }

/* uitleg van de gekozen waarde in een glazen kaart (.glass), los van de knoppen erboven */
.kernwaarden__panelen { display: grid; padding: clamp(var(--sc-space-5), 3vw, var(--sc-space-6)); }
.panel .kernwaarden__paneel p:last-child { margin-bottom: 0; }
.js .kernwaarden__paneel { grid-area: 1 / 1; }
html:not(.js) .kernwaarden__paneel + .kernwaarden__paneel { margin-top: var(--sc-space-6); }
.kernwaarden__paneel[hidden] { display: none; }
/* alle uitleg op dezelfde plek: de kaart houdt de hoogte van de langste, dus niets verspringt */
.js .kernwaarden__paneel[hidden] { display: block; visibility: hidden; }
.kernwaarden__titel { margin: 0; font-size: var(--sc-fs-stat); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.panel .kernwaarden__beeldzin { margin: var(--sc-space-3) 0; font-size: var(--sc-fs-h3); font-weight: 500; color: var(--sc-white); max-width: 34ch; }
.panel .kernwaarden__uitleg { font-size: var(--sc-fs-body); max-width: 52ch; }
@media (max-width: 899px) { .kernwaarden__beeld { max-width: 300px; } }

@media (prefers-reduced-motion: no-preference) {
  /* binnenkomst: sterren springen op, daarna tekenen de lijnen zich één voor één */
  .js .sterrenbeeld:not(.is-visible) .ster,
  .js .sterrenbeeld:not(.is-visible) .sterrenbeeld__hoeken circle { opacity: 0; transform: scale(0); }
  .js .sterrenbeeld:not(.is-visible) .sterrenbeeld__lijnen line,
  .js .sterrenbeeld:not(.is-visible) .sterrenbeeld__venster { opacity: 0; }
  .js .sterrenbeeld .ster,
  .js .sterrenbeeld .sterrenbeeld__hoeken circle { transition: opacity var(--sc-dur-slow) var(--sc-ease), transform 600ms var(--sc-ease-out); }
  .js .sterrenbeeld.is-visible .ster { transition-delay: calc(var(--i) * 120ms); }
  .js .sterrenbeeld.is-visible .sterrenbeeld__hoeken circle { transition-delay: calc(700ms + var(--i) * 60ms); }
  .js .sterrenbeeld .sterrenbeeld__lijnen line,
  .js .sterrenbeeld .sterrenbeeld__venster { transition: opacity 500ms var(--sc-ease); }
  .js .sterrenbeeld.is-visible .sterrenbeeld__lijnen line { transition-delay: calc(1000ms + var(--i) * 90ms); }
  .js .sterrenbeeld.is-visible .sterrenbeeld__venster { transition-delay: 2100ms; }

  /* daarna: de raket zweeft licht, de stuwkracht flakkert, de lucht fonkelt zacht */
  .sterrenbeeld.is-visible { animation: kw-zweef 6s var(--sc-ease) 2.4s infinite alternate; }
  .ster--vuur .ster__halo { animation: kw-vuur 1.4s var(--sc-ease) infinite alternate; }
  .ster.is-actief .ster__halo { animation: kw-puls 2.4s var(--sc-ease) infinite; }
  .sterrenbeeld__lucht circle { animation: kw-fonkel 3.2s var(--sc-ease) infinite alternate; animation-delay: calc(var(--i) * -0.7s); }
}
@keyframes kw-zweef { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes kw-vuur { from { opacity: .08; transform: scale(.7); } to { opacity: .3; transform: scale(1.1); } }
@keyframes kw-puls { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .1; transform: scale(1.35); } }
@keyframes kw-fonkel { from { opacity: .12; } to { opacity: .55; } }

/* ================= Sectorpagina (sectorpagina.njk) =================
   Vaste opbouw onder de paginakop: klanten, vraagstukken, hoe wij helpen, uitgelichte case,
   meer cases, quotes, samenwerkingsvormen. Alleen tokens en bestaande bouwstenen. */
.sector-intro { display: grid; grid-template-columns: 1fr; gap: var(--sc-space-7); align-items: start; }
@media (min-width: 960px) { .sector-intro { grid-template-columns: 1.1fr 1fr; gap: var(--sc-space-8); } }
.sector-intro .intro-split__text p { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-lead); color: var(--sc-ink-muted); max-width: var(--sc-measure); }

/* Draaiende cirkel met de logo's van de klanten in deze sector. De baan draait langzaam rond; elk
   logo draait even hard terug, zodat het rechtop blijft. Stopt bij aanwijzen en bij "minder beweging". */
.sector-ring {
  --r: 34cqi; --duur: 60s;
  position: relative; container-type: inline-size; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto;
}
.sector-ring--vol { --r: 39cqi; }   /* veel klanten: grotere cirkel */
.sector-ring::before, .sector-ring::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.sector-ring--vol::before { inset: 11%; }
.sector-ring::before { inset: 16%; border: 1px solid var(--sc-line); }
.sector-ring::after { inset: 31%; background: linear-gradient(var(--sc-wash), var(--sc-wash)), var(--sc-fade); box-shadow: var(--sc-shadow-1); }
.sector-ring__kern { position: absolute; inset: 31%; z-index: 1; display: grid; place-items: center; }
.sector-ring__kern img { width: 46%; height: auto; border-radius: 22%; box-shadow: var(--sc-shadow-1); }
.sector-intro .actions { margin-top: var(--sc-space-6); }
.sv { scroll-margin-top: var(--sc-header-h); }
.sector-ring__baan { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 2; animation: sector-ring var(--duur) linear infinite; }
.sector-ring__baan > li {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(-1 * var(--r))) rotate(calc(var(--i) * -360deg / var(--n)));
}
.sector-ring__logo {
  position: absolute; left: 0; top: 0; display: grid; place-items: center;
  /* breedte past zich aan het aantal logo's aan, zodat ze elkaar op de cirkel nooit raken */
  --w: min(28cqi, calc(2 * var(--r) * sin(180deg / var(--n)) * .88));
  width: var(--w); height: calc(var(--w) / 2); padding: calc(var(--w) * .08) calc(var(--w) * .1);
  background: var(--sc-white); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-sm); box-shadow: var(--sc-shadow-1);
  color: var(--sc-ink); text-decoration: none; font-weight: 700; font-size: var(--sc-fs-small); text-align: center;
  transform: translate(-50%, -50%); animation: sector-ring-terug var(--duur) linear infinite;
  transition: border-color var(--sc-dur-fast) var(--sc-ease), box-shadow var(--sc-dur-fast) var(--sc-ease);
}
.sector-ring__logo:hover { border-color: var(--sc-blue); box-shadow: var(--sc-shadow-2); }
.sector-ring__logo img { display: block; max-width: 100%; max-height: calc(var(--w) * .34); width: auto; height: auto; object-fit: contain; }
.sector-ring:hover .sector-ring__baan, .sector-ring:hover .sector-ring__logo,
.sector-ring:focus-within .sector-ring__baan, .sector-ring:focus-within .sector-ring__logo { animation-play-state: paused; }
@keyframes sector-ring { to { transform: rotate(360deg); } }
@keyframes sector-ring-terug { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .sector-ring__baan, .sector-ring__logo { animation: none; } }

/* ---- Vraagstukken: scrollverhaal (sectorpagina.njk + sector-vraagstukken.js) ----
   Hoe het werkt: links een podium dat met position: sticky blijft staan (de browser doet het plakken,
   er loopt niets achter); rechts de stappen. Het script zet data-active="<index>" op de sectie; die
   bepaalt hieronder welk beeld zichtbaar is. Beelden liggen op elkaar en wisselen met een korte fade
   omhoog. Geen overflow: hidden op de sectie of een ouder (dan plakt niets); het vlak gebruikt clip.
   Een vraagstuk toevoegen: één regel extra onder "vraagstukken" in de front matter van de sector;
   stap, beeld, stip en voortgang tellen vanzelf mee. Zonder JavaScript staat stap 1 actief en is
   alles gewoon onder elkaar leesbaar. */
/* het donkere merkvlak loopt beeldvullend van rand tot rand; boven en onder afgerond met schaduw,
   net als de paginakop, zodat het als één vlak boven de lichte ondergrond ligt */
.sv {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: var(--sc-section-y); padding-block: var(--sc-section-y);
  background: var(--sc-ink); color: var(--sc-white);
  border-radius: var(--sc-radius-xl); box-shadow: var(--sc-shadow-3);
}
@media (max-width: 880px) { .sv { border-radius: var(--sc-radius-lg); } }
.sv::before, .sv::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sv::before { background: var(--sc-fade); opacity: var(--sc-fade-dark); }
.sv::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: .25;
}
.sv__head { max-width: 46rem; margin: 0 auto; text-align: center; }
.sv__head .section__title { margin: 0 0 var(--sc-space-3); color: var(--sc-white); }
.sv__head p { margin: 0 auto; font-size: var(--sc-fs-lead); color: var(--sc-on-dark-muted); }

.sv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-space-8); margin-top: var(--sc-space-7); }
.sv__podium {
  position: sticky; top: 0; height: 100svh; min-height: 600px;
  display: flex; align-items: center; padding-top: var(--sc-masthead-h);
}
.sv__beelden { position: relative; width: 100%; aspect-ratio: 4 / 3.4; }
.sv__beeld {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; overflow: clip;
  border-radius: var(--sc-radius-lg); border: 1px solid var(--sc-on-dark-line);
  background: var(--sc-glass-bg); box-shadow: var(--sc-shadow-3);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out);
}
.sv__foto { width: 100%; height: 100%; object-fit: cover; }
/* met sfeerbeelden: logo bovenin, daaronder drie kleine foto's naast elkaar */
.sv__beeld--sfeer { background: transparent; border: 0; box-shadow: none; overflow: visible; gap: var(--sc-space-3); }
.sv__beeld--sfeer .sv__logo { border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-3); }
/* plek voor een sfeerbeeld dat nog moet komen: zelfde maat als een foto, met de beschrijving erin */
.sv__plek {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; aspect-ratio: 16 / 10; padding: 6px 8px; overflow: hidden;
  border-radius: var(--sc-radius-sm); border: 1px dashed var(--sc-on-dark-line); background: rgba(255, 255, 255, .06);
  font-size: 11px; line-height: 1.25; color: var(--sc-on-dark-muted); text-align: center;
}
.sv__plek span { font-weight: 700; color: var(--sc-lime); text-transform: none; }
/* de sfeerbeelden hebben altijd dezelfde vaste verhouding (ook bij staande foto's), het logo vult de rest */
.sv__sfeer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-space-3); flex: none; }
.sv__sfeer img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-on-dark-line); box-shadow: var(--sc-shadow-3);
}
/* Portretten van consultants zijn staand en het hoofd zit bovenin: bijsnijden vanaf de bovenkant,
   anders valt het hoofd weg in het liggende vlak (bijv. Nathan Koster bij Ausnutria) */
.sv__sfeer img[src*="/assets/img/team/"] { object-position: 50% 12%; }
.sv__logo { flex: 1; display: grid; place-items: center; padding: 12% 14%; background: var(--sc-white); }
.sv__logo img { max-width: 100%; max-height: 120px; width: auto; height: auto; object-fit: contain; }
.sv__logo strong { color: var(--sc-ink); font-size: var(--sc-fs-h2); font-weight: 700; text-align: center; }

/* welk beeld zichtbaar is, volgt uit data-active op de sectie (tot 12 stappen) */
.sv[data-active="0"] [data-sv-beeld="0"], .sv[data-active="1"] [data-sv-beeld="1"], .sv[data-active="2"] [data-sv-beeld="2"],
.sv[data-active="3"] [data-sv-beeld="3"], .sv[data-active="4"] [data-sv-beeld="4"], .sv[data-active="5"] [data-sv-beeld="5"],
.sv[data-active="6"] [data-sv-beeld="6"], .sv[data-active="7"] [data-sv-beeld="7"], .sv[data-active="8"] [data-sv-beeld="8"],
.sv[data-active="9"] [data-sv-beeld="9"], .sv[data-active="10"] [data-sv-beeld="10"], .sv[data-active="11"] [data-sv-beeld="11"] {
  opacity: 1; transform: none; pointer-events: auto;
}

.sv__stappen { position: relative; padding-left: var(--sc-space-7); }
.sv__lijn { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--sc-on-dark-line); border-radius: 2px; }
.sv__vulling {
  position: absolute; inset: 0; border-radius: 2px; background: var(--sc-lime);
  transform-origin: top; transform: scaleY(var(--progress, 0));
}
/* de lijst krijgt boven en onder ruimte, zodat het midden van de eerste (en laatste) stap gelijk
   ligt met het midden van het podiumbeeld: de tekst begint naast het logo */
.sv__lijst {
  list-style: none; margin: 0;
  --sv-uitlijn: calc((max(100svh, 600px) - var(--sc-masthead-h) - min(78svh, 700px)) / 2 + var(--sc-masthead-h));
  padding: var(--sv-uitlijn) 0 calc(var(--sv-uitlijn) - var(--sc-masthead-h));
}
.sv__stap {
  position: relative; min-height: min(78svh, 700px); display: flex; align-items: center;
  opacity: .45; transition: opacity 500ms var(--sc-ease-out);
}
.sv__stap.is-active { opacity: 1; }
.sv__stip {
  position: absolute; left: calc(-1 * var(--sc-space-7) + 1px); top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: var(--sc-ink); border: 2px solid var(--sc-on-dark-line);
  transition: background-color 300ms var(--sc-ease-out), border-color 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
.sv__stap.is-active .sv__stip { background: var(--sc-lime); border-color: var(--sc-lime); box-shadow: 0 0 0 6px rgba(221, 229, 54, .18), 0 0 18px rgba(221, 229, 54, .45); }
.sv__inhoud { padding: var(--sc-space-6) 0; }
.sv__titel { margin: 0 0 var(--sc-space-3); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 700; line-height: var(--sc-lh-tight); letter-spacing: var(--sc-tracking-tight); }
.sv__tekst { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-lead); color: var(--sc-on-dark-muted); max-width: var(--sc-measure); }
.sv__aanpak { margin: 0 0 var(--sc-space-5); color: var(--sc-on-dark-muted); max-width: var(--sc-measure); }
.sv__aanpak strong { color: var(--sc-white); font-weight: 600; }

/* Bronvermelding van de sfeerbeelden: klein en ingeklapt onderaan het vlak */
.sv__bronnen { margin-top: var(--sc-space-6); font-size: var(--sc-fs-small); color: var(--sc-on-dark-muted); }
.sv__bronnen summary { cursor: pointer; width: fit-content; }
.sv__bronnen ul { margin: var(--sc-space-3) 0 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: 12px; }
.sv__bronnen a { color: var(--sc-white); }

/* Beeld per stap: alleen op mobiel zichtbaar (op desktop staat het op het podium) */
.sv__stapbeeld { display: none; }

/* Mobiel en tablet: geen podium en geen scrollwerking. Elk vraagstuk is een eigen kaart met het beeld
   bovenaan en de tekst eronder; de kaarten staan gewoon onder elkaar, met een dunne lijn en een
   genummerde stip die ze verbinden. */
@media (max-width: 880px) {
  .sv__grid { display: block; margin-top: var(--sc-space-6); }
  .sv__podium { display: none; }
  .sv__stappen { padding-left: 0; }
  .sv__lijn { display: none; }
  .sv__lijst { padding: 0; display: grid; gap: var(--sc-space-5); counter-reset: sv; }
  .sv__stap { min-height: 0; display: block; opacity: 1; }
  .sv__stip { display: none; }
  .sv__inhoud {
    padding: var(--sc-space-4) var(--sc-space-4) var(--sc-space-5);
    border-radius: var(--sc-radius-lg); border: 1px solid var(--sc-on-dark-line);
    background: var(--sc-glass-bg);
  }
  .sv__stapbeeld { display: flex; flex-direction: column; margin: 0 0 var(--sc-space-5); }
  .sv__stapbeeld .sv__logo { aspect-ratio: 16 / 7; padding: 8% 14%; border-radius: var(--sc-radius-sm); }
  .sv__stapbeeld .sv__logo img { max-height: 56px; }
  .sv__stapbeeld .sv__foto { aspect-ratio: 16 / 9; height: auto; border-radius: var(--sc-radius-sm); }
  .sv__stapbeeld.sv__beeld--sfeer { gap: var(--sc-space-2); }
  .sv__stapbeeld .sv__logo, .sv__stapbeeld .sv__sfeer img { box-shadow: none; }
  .sv__stapbeeld .sv__sfeer { gap: var(--sc-space-2); }
  .sv__stapbeeld .sv__sfeer img, .sv__stapbeeld .sv__plek { aspect-ratio: 4 / 3; border-radius: var(--sc-radius-sm); }
  .sv__inhoud > :not(.sv__stapbeeld) { margin-inline: var(--sc-space-2); }
  .sv__titel::before {
    counter-increment: sv; content: counter(sv, decimal-leading-zero);
    display: block; margin-bottom: var(--sc-space-2); font-size: var(--sc-fs-small); font-weight: 700; color: var(--sc-lime);
  }
  .sv__inhoud .actions { margin-top: var(--sc-space-4); }
}

/* Tablet: beeld links, tekst rechts binnen de kaart */
@media (min-width: 600px) and (max-width: 880px) {
  .sv__inhoud { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--sc-space-5); align-items: start; padding: var(--sc-space-4); }
  .sv__stapbeeld { grid-row: 1 / span 5; margin: 0; }
  .sv__inhoud > :not(.sv__stapbeeld) { margin-inline: 0; }
}

/* Zonder JavaScript: alle stappen volledig zichtbaar en leesbaar */
.sv:not(.sv--js) .sv__stap { opacity: 1; }
.sv:not(.sv--js) .sv__lijn { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sv__beeld, .sv__stap, .sv__stip, .sv__podium { transition: none; }
  .sv__beeld { transform: none; }
}

/* Stemmen: quotes van opdrachtgevers en/of een consultant */
.sector-stemmen { display: grid; gap: var(--sc-space-5); }
.sector-stemmen .quote { margin: 0; }
.sector-stem .quote__wie a { color: var(--sc-blue); font-weight: 600; }

.sv__stap { scroll-margin-top: calc(var(--sc-header-h) + var(--sc-space-4)); }