/* MatchMatters — application stylesheet.
   Imports brand tokens, then defines reusable component classes
   (ported from the React prototype's inline styles). */

/* De tokens worden nu als losse <link> geladen vanuit app/Views/layouts/app.php, met
   filemtime-cachebusting. Hier stonden ze als @import met een vaste ?v=2. */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
img { max-width: 100%; display: block; }
a { color: var(--text-link); }
button { font-family: inherit; }
::selection { background: var(--mm-mint); color: var(--mm-petrol); }
h1,h2,h3,h4 { font-family: var(--font-display); }

/* Keyboard focus: visible branded ring, never removed. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Layout primitives ---- */
.wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--wrap-pad-x); }
.narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(16px,4vw,40px); }
.section { padding: var(--section-pad-y) 0; }
.section--white { background: var(--mm-cream); }
.section--grey { background: var(--surface-page); }
.section--petrol { background: var(--mm-petrol); color: var(--mm-heading-light); }
.section--stat { background: var(--surface-stat); }
.section--review { background: var(--surface-review); }

.eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin: 0; }
.eyebrow--mint { color: var(--mm-mint); }
.eyebrow--deep { color: var(--mm-petrol-deep); }
.section-head { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin-bottom: 32px; }
.section-head h2 { margin: 0; font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--mm-black); }
.section-head p { margin: 0; font-size: var(--fs-lead); color: var(--text-muted); }
.section-head--light h2 { color: var(--mm-heading-light); }
.section-head--light p { color: var(--mm-on-dark-soft); }
.row-between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  padding: var(--btn-pad-y) var(--btn-pad-x); border: 1px solid transparent; border-radius: var(--radius-0);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn--lg { padding: var(--btn-pad-y-lg) var(--btn-pad-x-lg); font-size: var(--fs-body); }
.btn--primary { background: var(--cta-bg); color: var(--cta-text); clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%); }
.btn--primary:hover { background: var(--cta-bg-hover); }
.btn--secondary { background: var(--cta-secondary-bg); color: var(--cta-secondary-text); border-color: var(--border-on-dark); }
.btn--secondary:hover { background: var(--mm-petrol-hover); }
.btn--on-dark { background: rgba(255,255,255,0.10); color: var(--mm-heading-light); border: 1px solid rgba(255,255,255,0.45); }
.btn--on-dark:hover { background: var(--mm-mint); color: var(--mm-petrol); border-color: var(--mm-mint); }
/* Tekstlink i.p.v. secundaire knop-in-een-blok: naast de diagonale primaire knop oogde een
   rechthoekige knop niet meer passend (Koen ronde 4). */
.cta-textlink { display: inline-flex; align-items: center; gap: 6px; color: var(--mm-mint); font-weight: 700; font-family: var(--font-display); text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.cta-textlink:hover { color: var(--mm-heading-light); }
.cta-textlink .ext-icon { vertical-align: -2px; margin-left: 4px; }
.btn--ghost { background: none; color: var(--mm-petrol); border-color: transparent; padding-left: 0; padding-right: 0; }
.btn--ghost:hover { color: var(--mm-mint-hover); }
.btn--tertiary { background: var(--cta-tertiary-bg); color: var(--cta-tertiary-text); }
.btn .arrow { font-weight: 700; }

/* ---- Badges / chips ---- */
.badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; padding: 3px 9px; border-radius: var(--radius-0); }
.badge--mint { background: var(--mm-mint-soft); color: var(--mm-petrol-deep); }
.badge--petrol { background: var(--mm-petrol); color: var(--mm-heading-light); }
.badge--lime { background: var(--mm-lime); color: var(--mm-petrol-deep); }
.badge--outline { background: transparent; border: 1px solid var(--border-on-light); color: var(--text-muted); }
/* Het handje hoort alleen op een chip waar je echt op kunt klikken. Als span (de skills op een
   rolpagina) suggereerde de basisklasse een link die er niet is. Matthew, ronde 13. */
.chip { display: inline-flex; align-items: center; font-size: var(--fs-small); padding: 7px 14px; border-radius: var(--radius-pill); background: var(--mm-white); border: 1px solid var(--border-on-light); color: var(--mm-ink); }
a.chip, button.chip, label.chip, .chip[role="button"] { cursor: pointer; }
.chip.is-active { background: var(--mm-mint); border-color: var(--mm-mint); color: var(--mm-petrol); font-weight: 600; }

/* ---- Grids ---- */
.grid { display: grid; gap: 16px; }
.grid--silos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .grid--silos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .grid--silos { grid-template-columns: 1fr; } }
.grid--roles { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.grid--reviews { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }

/* ---- Cards ---- */
.silo-card { position: relative; display: block; height: 230px; overflow: hidden; text-decoration: none; color: #fff; background: var(--mm-petrol); }
.silo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.silo-card:hover img { transform: scale(1.05); }
/* Verloop over de tegelfoto. Liep tot 0.86 dekking, en dat is te licht zodra de foto zelf
   licht is: gemeten over alle tegelbeelden haalde de witte naam 4,52:1 en de mint teller
   maar 1,70:1 -- dus AA werd op meerdere tegels niet gehaald, ook al voor deze ronde.
   Vanaf 78% is het nu dekkend petrol, waarmee de naam op 15,66:1 komt en de teller op 5,09:1
   (laagste waarde over alle 26 gemeten beelden). De bovenste 60% van de foto blijft vrij. */
.silo-card .silo-overlay { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,39,51,0) 30%, rgba(2,39,51,0.45) 60%, rgba(2,39,51,1) 78%, rgba(2,39,51,1) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; }
.silo-card .silo-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); }
.silo-card .silo-count { font-size: var(--fs-xs); color: var(--mm-mint); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: 700; }

/* Geen randlaag meer i.p.v. een kleur-matchende hoek-driehoek: die liet naden zien zodra de
   sectie-achtergrond niet exact overeenkwam, en een ::before-randlaag bleek qua stapelvolgorde
   altijd bovenop de eigen achtergrond te schilderen i.p.v. erachter (Koen ronde 4). Een vaste,
   subtiele schaduw geeft nu overal een nette, naadloze rand-illusie, ongeacht de achtergrond. */
.role-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--mm-white); padding: 20px; text-decoration: none; color: var(--mm-ink); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); box-shadow: 0 0 0 1px var(--border-on-light); }
.role-card:hover { box-shadow: 0 0 0 1px var(--border-on-light), var(--shadow-card); transform: translateY(-2px); }
/* Reserve 2 lines for the title so badge/salary/reason align across a row. */
.role-card .rc-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--mm-black); line-height: var(--lh-snug); min-height: calc(2 * var(--fs-h4) * var(--lh-snug)); display: flex; align-items: flex-start; }
.role-card .rc-salary { font-weight: 700; color: var(--mm-petrol-deep); }
/* Sitebrede subtiele hint-tekst; .rc-reason wordt ook buiten role-cards gebruikt (spar/werkgevers/vakgebied/etc). */
.rc-reason { font-size: var(--fs-small); color: var(--text-muted); line-height: var(--lh-body); }
/* Badge hugs its text instead of stretching to a full-width bar. */
.role-card .badge { align-self: flex-start; }
.role-card .rc-more { font-weight: 700; font-size: var(--fs-small); color: var(--mm-petrol-deep); }
.role-card:hover .rc-more { color: var(--mm-mint-hover); }
.role-card.is-quiet { background: var(--mm-white); clip-path: none; }

.stat-box { background: var(--mm-white); border: var(--border-stat); border-top: 3px solid var(--mm-mint); padding: 22px; text-align: left; box-shadow: 0 4px 14px rgba(2,39,51,0.06); transition: transform .15s ease; }
.stat-box:hover { transform: translateY(-2px); }
.stat-box .sb-value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-stat); color: var(--mm-petrol); line-height: 1; }
.stat-box .sb-label { font-size: var(--fs-small); color: var(--text-muted); margin-top: 6px; }

.review-card { background: var(--mm-white); padding: 22px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
/* Quote grows so the name/role block pins to the bottom and aligns across the row. */
.review-card .rv-quote { font-size: var(--fs-body); color: var(--mm-ink); flex: 1 0 auto; margin: 0; }
.review-card .rv-who { display: flex; align-items: center; gap: 12px; }
.review-card .rv-name { font-family: var(--font-display); font-weight: 700; color: var(--mm-black); }
.review-card .rv-role { font-size: var(--fs-small); color: var(--text-muted); }
.rv-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.rv-avatar--0 { background: var(--mm-petrol); }
.rv-avatar--1 { background: var(--mm-mint); color: var(--mm-petrol); }
.rv-avatar--2 { background: var(--mm-petrol-deep); }
.rv-avatar--3 { background: var(--mm-lime); color: var(--mm-petrol); }
.rv-avatar--4 { background: var(--mm-petrol-hover); }

/* ---- CTA block ---- */
.cta-block { background: var(--mm-petrol); color: var(--mm-heading-light); padding: clamp(32px,5vw,56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cta-block h2 { margin: 0; font-size: var(--fs-h2); }
.cta-block p { margin: 0; max-width: 56ch; color: var(--mm-on-dark-soft); }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.cta-topics { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.cta-topics-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 640px; }
.cta-topic { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid var(--border-on-dark); color: var(--mm-heading-light); padding: 9px 16px; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.cta-topic:has(input:checked) { background: var(--mm-mint); color: var(--mm-petrol); border-color: var(--mm-mint); }
.cta-topic input { accent-color: var(--mm-mint); width: 15px; height: 15px; }
.form-topics { margin-bottom: 16px; }
.form-topics-label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 8px; }
.cta-topics-grid--light { justify-content: flex-start; max-width: none; }
.cta-topic--light { background: var(--mm-grey-bg,#f3f5f4); color: var(--mm-petrol); border: 1px solid var(--border-on-light,#dde3e1); }
.cta-topic--light:has(input:checked) { background: var(--mm-mint); border-color: var(--mm-mint); }

/* ---- Hero ---- */
.hero { background: var(--mm-petrol); color: var(--mm-heading-light); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; padding: clamp(40px,6vw,84px) clamp(16px,4vw,40px); }
.hero h1 { margin: 0; font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; text-transform: uppercase; }
@media (max-width: 560px) { .hero h1 { font-size: 2.1rem; } }
/* Alle overige intro-hero-titels (rollen/toolkit/blog/salarisgids/prioriteitenmatrix/etc.) gebruiken
   nog inline font-size:var(--fs-display) op de h1 zelf — die wint van elke class-selector, dus hier
   met !important dezelfde mobiele verkleining toepassen die .hero h1 al kreeg (Koen ronde 4). */
@media (max-width: 560px) { .intro-hero-text h1 { font-size: 2.1rem !important; line-height: 1.08 !important; } }
/* Mobiel: hero-foto en trigger-labels kosten alleen verticale scrollruimte, geen prioriteit. */
@media (max-width: 640px) { .hero-collage, .trigger-strip { display: none; } }
/* Mobiel: homepage-rollengrid max 4 tonen i.p.v. alle 8, scheelt scrollruimte (desktop blijft 8). */
@media (max-width: 640px) { .grid--roles-home > *:nth-child(n+5) { display: none; } }
.hero p { margin: 0; font-size: var(--fs-lead); color: var(--mm-on-dark-soft); max-width: 46ch; }
.hero-left { display: flex; flex-direction: column; gap: 22px; }
.hero-collage { position: relative; min-height: 320px; }
.hero-collage .cg { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; }
.hero-collage .cg img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage .cg img:first-child { grid-row: span 2; }

/* ---- Hero: zwevende telefoon-mockup i.p.v. een statische (AI-)foto (Matthew, ronde 4). ---- */
.hero-mockup-wrap { display: flex; align-items: center; justify-content: center; min-height: 380px; }
.hero-phone { width: 250px; background: var(--mm-petrol-hover); border: 1px solid rgba(255,255,255,0.14); border-radius: 28px; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,0.35); transform: perspective(1100px) rotateY(-10deg) rotateX(5deg) rotateZ(-2deg); animation: heroPhoneFloat 6s ease-in-out infinite alternate; }
.hero-phone-screen { background: var(--mm-white); border-radius: 20px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.hero-phone-topbar { display: flex; gap: 5px; margin-bottom: 4px; }
.hero-phone-topbar span { width: 7px; height: 7px; border-radius: 50%; background: var(--mm-grey-line); }
.hero-phone-screen .badge { align-self: flex-start; }
.hero-phone-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--mm-black); margin-top: 2px; }
.hero-phone-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: -6px; }
.hero-phone-bar { height: 8px; background: var(--mm-grey-track); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.hero-phone-bar span { display: block; height: 100%; background: var(--mm-mint); border-radius: 999px; }
.hero-phone-bar-label { font-size: 11px; color: var(--text-muted); }
.hero-float-card { position: absolute; background: var(--mm-white); color: var(--mm-black); padding: 12px 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.25); display: flex; flex-direction: column; animation: heroCardFloat 5s ease-in-out infinite alternate; }
.hero-float-card--1 { top: 12%; left: 2%; animation-delay: .3s; }
.hero-float-card--2 { bottom: 10%; right: 0; animation-delay: 1.1s; }
.hero-float-value { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--mm-petrol); }
.hero-float-label { font-size: 11px; color: var(--text-muted); max-width: 140px; }
@keyframes heroPhoneFloat { from { transform: perspective(1100px) rotateY(-10deg) rotateX(5deg) rotateZ(-2deg) translateY(0); } to { transform: perspective(1100px) rotateY(-6deg) rotateX(3deg) rotateZ(-1deg) translateY(-14px); } }
@media (max-width: 480px) {
  .hero-mockup-wrap { min-height: 320px; padding: 0 6px; }
  .hero-phone { width: 190px; }
  .hero-phone-title { font-size: 15px; }
  .hero-float-card { padding: 9px 12px; }
  .hero-float-card--1 { top: 2%; left: -6px; }
  .hero-float-card--2 { bottom: 0; right: -6px; }
  .hero-float-value { font-size: 15px; }
}
@keyframes heroCardFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero-phone, .hero-float-card { animation: none; } }

/* ---- Keuzehulp accent strip (home top) ---- */
.kh-strip { background: var(--mm-mint); color: var(--mm-petrol); }
.kh-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.kh-strip .kh-text { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); }
.kh-strip .kh-sub { font-size: var(--fs-small); font-weight: 500; opacity: .85; }

/* ---- Funnel steps ---- */
.steps { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); }
.steps .step-num { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--mm-grey-card); color: var(--mm-petrol); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-xs); }
.steps li.is-done .step-num { background: var(--mm-mint); }
.steps li.is-active .step-num { background: var(--mm-petrol); color: #fff; }
/* On dark backgrounds (hero / petrol sections) make step labels + circles legible. */
.hero .steps li, .section--petrol .steps li { color: var(--mm-on-dark-soft); }
.hero .steps .step-num, .section--petrol .steps .step-num { background: rgba(255,255,255,0.16); color: var(--mm-heading-light); }
.hero .steps li.is-active .step-num, .section--petrol .steps li.is-active .step-num,
.hero .steps li.is-done .step-num, .section--petrol .steps li.is-done .step-num { background: var(--mm-mint); color: var(--mm-petrol); }

/* ---- Trigger strip (home hero): losse statements die kandidaten triggeren ---- */
.trigger-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.trigger-chip { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--mm-heading-light); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); padding: 6px 14px; }

/* ---- DISC-strip (Carrière Verkenner, reflectiestap) ---- */
.disc-strip { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.disc-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.disc-dot--red { background: #d94f4f; }
.disc-dot--yellow { background: #e0b13a; }
.disc-dot--green { background: #4f9e6e; }
.disc-dot--blue { background: #3a6ea5; }
.disc-dot.is-emphasis { box-shadow: 0 0 0 3px rgba(58,110,165,0.22); }
.disc-legend { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---- DISC-kwadrant (stip op het model) ---- */
.disc-quadrant { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 20px auto 32px; background: var(--mm-white); border: 1px solid var(--border-on-light); }
.disc-q-axis { position: absolute; background: var(--border-on-light); }
.disc-q-axis--x { top: 50%; left: 0; right: 0; height: 1px; }
.disc-q-axis--y { left: 50%; top: 0; bottom: 0; width: 1px; }
.disc-q-label { position: absolute; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); padding: 8px; }
.disc-q-label--tl { top: 0; left: 0; }
.disc-q-label--tr { top: 0; right: 0; text-align: right; }
.disc-q-label--bl { bottom: 0; left: 0; }
.disc-q-label--br { bottom: 0; right: 0; text-align: right; }
.disc-q-side { position: absolute; font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); white-space: nowrap; }
.disc-q-side--top { top: -22px; left: 50%; transform: translateX(-50%); }
.disc-q-side--bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }
.disc-q-side--left { left: -8px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.disc-q-side--right { right: -8px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.disc-q-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%,-50%); border: 3px solid var(--mm-white); box-shadow: 0 0 0 1px var(--mm-petrol), 0 2px 6px rgba(0,0,0,.25); }
@media (max-width: 480px) { .disc-quadrant { max-width: 260px; margin-top: 30px; } .disc-q-label { font-size: 10px; padding: 6px; } }
.hero .steps li.is-active, .section--petrol .steps li.is-active { color: var(--mm-heading-light); font-weight: 600; }

/* ---- Salary level table ---- */
.level-table { width: 100%; border-collapse: collapse; background: var(--mm-white); }
.level-table th, .level-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-on-light); }
.level-table th { font-family: var(--font-display); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); }
.level-table tr.is-highlight td { background: var(--mm-mint-soft); font-weight: 600; }

.role-intro p { margin: 0 0 12px; }
.role-intro p:last-child { margin-bottom: 0; }

/* ---- Detail layout ---- */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.panel { background: var(--mm-white); padding: 24px; }
.panel h2, .panel h3 { margin: 0 0 14px; font-size: var(--fs-h3); }
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm-feit { background: var(--mm-lime); color: var(--mm-petrol-deep); padding: 24px; font-size: var(--fs-lead); }
.mm-feit .eyebrow { color: var(--mm-petrol-deep); margin-bottom: 8px; }

/* ---- Compare table ---- */
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--mm-white); }
.compare-table th, .compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-on-light); text-align: left; vertical-align: top; }
.compare-table th { font-family: var(--font-display); }

/* ---- Orientatie strip (above footer) ---- */
.orient { background: var(--mm-petrol-deep); color: var(--mm-heading-light); }
.orient .wrap { padding: clamp(32px,4vw,48px) clamp(16px,4vw,40px); }
.orient h2 { margin: 0 0 6px; font-size: var(--fs-h3); }
.orient p { margin: 0 0 24px; color: var(--mm-on-dark-soft); max-width: 60ch; }
/* Elke groep krijgt een eigen blok met een dunne divider erboven i.p.v. alleen marge —
   leest bij een scan sneller als aparte sectie dan losse witruimte (Matthew/Koen: "10/10"-ronde). */
.orient-groups { display: flex; flex-direction: column; gap: 28px; }
.orient-group { padding-top: 24px; border-top: 1px solid var(--border-on-dark); }
.orient-group:first-child { padding-top: 0; border-top: none; }
.orient-group-title { margin: 0 0 14px; font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mm-mint); }
.orient-links { display: flex; flex-wrap: wrap; gap: 10px; }
.orient-links a { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-on-dark); color: var(--mm-heading-light); text-decoration: none; padding: 9px 16px 9px 9px; font-size: var(--fs-small); font-weight: 600; font-family: var(--font-display); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.orient-links a:hover { background: var(--mm-mint); color: var(--mm-petrol); border-color: var(--mm-mint); }
.orient-links a:hover .orient-icon { background: var(--mm-petrol); color: var(--mm-mint); }
/* Zelfde vierkante lime icoon-badge als op /toolkit, i.p.v. de ronde halftransparante bol — nu
   consistent dezelfde iconentaal sitebreed (Matthew/Koen). */
.orient-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; background: var(--mm-lime); color: var(--mm-petrol-deep); }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--mm-white); border-bottom: 1px solid var(--border-on-light); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--mm-black); text-decoration: none; }
.brand-mark { height: 40px; width: auto; display: block; }
.brand .slash { color: var(--mm-mint); display: inline-block; transform: skewX(-12deg); padding: 0 2px; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; color: var(--mm-ink); font-weight: 600; font-size: var(--fs-small); }
.nav a:hover, .nav a.is-active { color: var(--mm-petrol); }
.nav .btn--primary { color: var(--mm-petrol); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; }

/* ---- Footer ---- */
.site-footer { background: var(--mm-petrol); color: var(--mm-heading-light); padding-top: clamp(40px,5vw,64px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 28px; }
.footer-col h2, .footer-col h3, .footer-col h4 { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--mm-heading-light); }
.footer-col a { display: block; color: var(--mm-on-dark-soft); text-decoration: none; font-size: var(--fs-small); padding: 5px 0; }
.footer-col a:hover { color: var(--mm-mint); }
.footer-intro p { color: var(--mm-on-dark-soft); font-size: var(--fs-small); max-width: 30ch; }
.footer-bottom { margin-top: 40px; border-top: 1px solid var(--border-on-dark); padding: 20px 0 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: var(--mm-on-dark-soft); }
.wa-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mm-whatsapp); color: #fff; text-decoration: none; padding: 9px 16px; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); width: fit-content; }
.footer-logo { height: 32px; width: auto; display: block; margin-bottom: 4px; }
.footer-beeldmerk { height: 26px; width: 26px; display: block; }
.footer-social { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.footer-social-label { font-size: var(--fs-xs); color: var(--mm-on-dark-soft); text-transform: uppercase; letter-spacing: var(--ls-caps); }
/* Tikdoel minimaal 24x24 (WCAG 2.2 AA 2.5.8); het icoon zelf is 18x18. */
.footer-social a { color: var(--mm-on-dark-soft); display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.footer-social a:hover { color: var(--mm-mint); }

/* ---- Wizard ---- */
.wizard { background: var(--mm-petrol); color: var(--mm-heading-light); min-height: 70vh; display: flex; flex-direction: column; }
.wizard .progress { height: 5px; background: rgba(255,255,255,0.12); }
.wizard .progress span { display: block; height: 100%; background: var(--mm-mint); transition: width var(--dur-base) var(--ease-out); }
.wizard-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(32px,6vw,64px) clamp(16px,4vw,40px); max-width: 760px; margin: 0 auto; width: 100%; }
.wizard h1 { margin: 0 0 8px; font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); }
@media (max-width: 560px) { .wizard h1 { font-size: 1.7rem; } }
.wizard .options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wizard .opt { text-align: left; cursor: pointer; padding: 22px 24px; background: rgba(255,255,255,0.04); color: var(--mm-heading-light); border: 1px solid var(--border-on-dark); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background var(--dur-fast), border-color var(--dur-fast); }
.wizard .opt:hover, .wizard .opt.is-picked { background: rgba(129,199,178,0.16); border-color: var(--mm-mint); }
.wizard .opt.is-picked { background: var(--mm-mint); color: var(--mm-petrol); }
.result-row { display: flex; background: var(--mm-white); box-shadow: var(--shadow-soft); margin-bottom: 14px; }
.result-row .score { flex: 0 0 92px; background: var(--mm-grey-card); color: var(--mm-petrol); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.result-row.is-top .score { background: var(--mm-mint); }
.result-row .score b { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.result-row .rr-body { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.result-row .rr-cta { display: flex; align-items: center; border-left: 1px solid var(--border-on-light); padding: 0 22px; color: var(--mm-petrol); font-weight: 700; text-decoration: none; font-family: var(--font-display); }

/* Keuzehulp-uitslag als geleide reis (witte kaarten op de petrol-wizard) */
.wz-sec { background: var(--mm-white); color: var(--mm-ink); padding: 24px; margin: 0 0 16px; }
.wz-sec .eyebrow { margin-bottom: 6px; }
.wz-sec-title { margin: 0 0 14px; color: var(--mm-black); font-size: var(--fs-h4); }
.wz-sub { margin: 0 0 16px; color: var(--text-muted); }
.wz-vak { border-left: 4px solid var(--mm-mint); }
.wz-vak-title { margin: 12px 0 8px; color: var(--mm-black); font-size: var(--fs-h2); }
.wz-vak-blurb { margin: 0 0 18px; color: var(--text-muted); font-size: var(--fs-lead); }
.wz-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wz-role { display: flex; align-items: center; gap: 14px; background: var(--mm-grey-bg); margin-bottom: 10px; padding: 14px 18px; text-decoration: none; color: var(--mm-ink); }
.wz-role.is-top { background: var(--mm-mint-soft); }
.wz-role-title { font-family: var(--font-display); font-weight: 700; color: var(--mm-black); flex: 1; }
.wz-role-salary { font-size: var(--fs-small); color: var(--text-muted); }
.wz-role .rr-cta { color: var(--mm-petrol); font-weight: 700; font-family: var(--font-display); }
.wz-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wz-tool { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; background: var(--mm-white); text-decoration: none; color: var(--mm-ink);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); box-shadow: 0 0 0 1px var(--border-on-light); }
.wz-tool:hover { box-shadow: 0 0 0 1px var(--border-on-light), var(--shadow-card); transform: translateY(-2px); }
.wz-tool-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 6px; background: var(--mm-lime); color: var(--mm-petrol-deep); font-weight: 700; font-size: 15px; }
.wz-tool-label { font-family: var(--font-display); font-weight: 700; color: var(--mm-black); }
.wz-tool-desc { font-size: var(--fs-small); color: var(--text-muted); }
/* Vaste kaartbreedte/-hoogte + "Openen"-CTA: 1 kolom mobiel, 2 vanaf 640px, 3 vanaf 900px (Koen ronde 4). */
.wz-tools--fixed { grid-template-columns: 1fr; }
@media (min-width: 640px) { .wz-tools--fixed { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .wz-tools--fixed { grid-template-columns: repeat(3, 1fr); } }
.wz-tools--fixed .wz-tool { min-height: 178px; }
.wz-tools--fixed .wz-tool-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.wz-tool-cta { margin-top: auto; padding-top: 10px; align-self: flex-end; font-weight: 700; font-family: var(--font-display); color: var(--mm-petrol-deep); }
.wz-tool:hover .wz-tool-cta { color: var(--mm-mint-hover); }
.wz-spar { background: var(--mm-petrol); border: 1px solid var(--border-on-dark); }
.wz-spar-row { display: flex; align-items: flex-start; gap: 18px; }
.wz-spar-photo { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mm-mint); }
@media (max-width: 480px) { .wz-spar-row { flex-direction: column; } .wz-spar-photo { flex-basis: 64px; width: 64px; height: 64px; } }
/* Verfijn-knoppen staan in een witte kaart: donkere variant i.p.v. de licht-op-petrol stijl */
.wz-refine.options .opt { background: var(--mm-grey-bg); color: var(--mm-ink); border-color: var(--border-on-light); font-size: var(--fs-body); padding: 16px 18px; }
.wz-refine.options .opt:hover { background: rgba(129,199,178,0.18); border-color: var(--mm-mint); }
.wz-refine.options .opt.is-picked { background: var(--mm-mint); color: var(--mm-petrol); border-color: var(--mm-mint); }
@media (max-width: 560px) { .wz-tools { grid-template-columns: 1fr; } }

/* Micro-animatie tussen wizard-vragen: fade + subtiele slide (van onder naar boven). */
.wizard-body { transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.wizard-body.wz-anim-out { opacity: 0; transform: translateY(-6px); }
.wizard-body.wz-anim-in { opacity: 0; transform: translateY(14px); }
@media (prefers-reduced-motion: reduce) {
  .wizard-body, .wizard-body.wz-anim-out, .wizard-body.wz-anim-in { transition: none; opacity: 1; transform: none; }
}

/* Percentagebalken: hoe verhoudt de topmatch zich tot de andere richtingen. */
.wz-rank { display: flex; flex-direction: column; gap: 10px; }
.wz-rank-row { display: grid; grid-template-columns: 26px 184px 1fr 44px; align-items: center; gap: 10px; text-decoration: none; color: var(--mm-ink); }
.wz-rank-icon { width: 26px; height: 26px; object-fit: contain; border-radius: 50%; background: var(--mm-grey-bg); }
.wz-rank-label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-rank-track { height: 10px; background: var(--mm-grey-track, var(--mm-grey-card)); border-radius: var(--radius-pill); overflow: hidden; }
.wz-rank-fill { display: block; height: 100%; background: var(--border-on-light); border-radius: var(--radius-pill); transition: width .5s var(--ease-out); }
.wz-rank-row.is-top .wz-rank-fill { background: var(--mm-mint); }
.wz-rank-row.is-top .wz-rank-label { color: var(--mm-petrol); font-weight: 700; }
.wz-rank-pct { font-weight: 700; font-size: var(--fs-small); color: var(--mm-petrol-deep); text-align: right; }
@media (max-width: 560px) { .wz-rank-row { grid-template-columns: 22px 88px 1fr 38px; } .wz-rank-icon { width: 22px; height: 22px; } }

/* Waarom past dit bij mij: chips + per-vraag toelichting (stemwijzer-stijl). */
.wz-why-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wz-why-chip { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--mm-grey-bg); border: 1px solid var(--border-on-light); color: var(--mm-ink); cursor: pointer; }
.wz-why-chip.is-active { background: var(--mm-petrol); border-color: var(--mm-petrol); color: #fff; }
.wz-why-item { border-bottom: 1px solid var(--border-on-light); padding: 16px 0; }
.wz-why-item:last-child { border-bottom: none; padding-bottom: 0; }
.wz-why-q { display: flex; align-items: flex-start; gap: 12px; }
.wz-why-vraag { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; color: var(--mm-black); }
.wz-why-antwoord { margin: 0; color: var(--text-muted); font-size: var(--fs-small); }
.wz-why-toelichting { margin: 8px 0 0 34px; color: var(--text-muted); font-size: var(--fs-small); }
.wz-fit-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; margin-top: 2px; position: relative; }
.wz-fit-icon.is-yes { background: #2E9B5C; }
.wz-fit-icon.is-partial { background: #E8B93A; }
.wz-fit-icon.is-no { background: #D5495B; }
.wz-fit-icon.is-na { background: var(--border-on-light); }
.wz-fit-icon::after { content: ''; position: absolute; inset: 0; }
.wz-fit-icon.is-yes::after { content: '✓'; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.wz-fit-icon.is-partial::after { content: '~'; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; }
.wz-fit-icon.is-no::after { content: '✕'; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 700; }

/* Blijf op de hoogte (lead-opt-in). */
.wz-lead-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wz-lead-row input[type=email] { flex: 1 1 220px; padding: 11px 14px; border: 1px solid var(--border-on-light); font: inherit; }
.wz-lead-row input[type=email]:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.wz-lead-done { color: var(--mm-petrol-deep); font-weight: 600; }

/* Deel je uitslag. */
.wz-share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); padding: 10px 18px; border-radius: var(--radius-md); text-decoration: none; border: none; cursor: pointer; color: #fff; }
.share-btn--whatsapp { background: var(--mm-whatsapp); }
.share-btn--linkedin { background: #0A66C2; }
.share-btn--copy { background: var(--mm-petrol); }
.share-btn:hover { filter: brightness(1.08); }
.wz-share-note { margin: 10px 0 0; color: var(--mm-petrol-deep); font-weight: 600; font-size: var(--fs-small); }

/* Carrièreprofiel: korte samenvatting, in te zien en te kopiëren. */
.wz-profiel-box { background: var(--mm-grey-bg); border-left: 3px solid var(--mm-mint); padding: 14px 16px; margin-bottom: 12px; }
.wz-profiel-box p { margin: 0; font-size: var(--fs-small); color: var(--mm-ink); line-height: var(--lh-body); }

/* Feedback-popup na de uitslag. */
.mm-fb-overlay { position: fixed; inset: 0; background: rgba(2,39,51,0.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; z-index: 200; opacity: 0; transition: opacity .2s var(--ease-out); }
.mm-fb-overlay.is-open { opacity: 1; }
@media (min-width: 640px) { .mm-fb-overlay { align-items: center; } }
.mm-fb-card { background: var(--mm-white); color: var(--mm-ink); padding: 24px; max-width: 380px; width: 100%; box-shadow: var(--shadow-soft); transform: translateY(16px); transition: transform .2s var(--ease-out); }
.mm-fb-overlay.is-open .mm-fb-card { transform: translateY(0); }
.mm-fb-title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--mm-black); text-align: center; }
.mm-fb-smileys { display: flex; justify-content: space-between; margin-bottom: 6px; }
.mm-fb-smiley { background: none; border: 2px solid transparent; border-radius: 50%; font-size: 26px; line-height: 1; padding: 8px; cursor: pointer; }
.mm-fb-smiley:hover, .mm-fb-smiley.is-picked { border-color: var(--mm-mint); background: var(--mm-mint-soft); }
.mm-fb-comment { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border-on-light); font-family: var(--font-body); font-size: var(--fs-small); resize: vertical; min-height: 64px; }
.mm-fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---- Content prose ---- */
.prose p { margin: 0 0 16px; }
.prose h2 { font-size: var(--fs-h3); margin: 32px 0 12px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* ---- Blog-detailpagina: donkere hero + meelopende inhoudsopgave (Koen ronde 4) ---- */
.blog-hero { padding: 28px 0 32px; }
.blog-hero .breadcrumb { margin-bottom: 14px; }
.blog-hero-title { margin: 12px 0 12px; font-weight: 800; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; text-transform: uppercase; color: var(--mm-heading-light); }
@media (max-width: 560px) { .blog-hero-title { font-size: 2.1rem; line-height: 1.08; } }
.blog-hero-excerpt { margin: 0 0 22px; max-width: 68ch; font-size: var(--fs-lead); color: var(--mm-on-dark-soft); }
.blog-hero-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid var(--border-on-dark); }
.blog-hero-author { display: flex; align-items: center; gap: 12px; }
.blog-hero-author .rv-avatar { width: 36px; height: 36px; min-width: 36px; }
.blog-author-name { display: block; font-weight: 700; color: var(--mm-heading-light); font-family: var(--font-display); }
.blog-author-sub { display: block; font-size: var(--fs-xs); color: var(--mm-on-dark-soft); }
.blog-hero-share { display: flex; gap: 10px; }
.blog-hero-share .share-btn { padding: 9px 16px; font-size: var(--fs-xs); }
/* Schermbreed (edge-to-edge), ongeacht de container-breedte van de rest van de pagina (Joachim, na livecheck). */

.blog-detail-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 860px) { .blog-detail-layout { grid-template-columns: 220px 1fr; } }
/* Sticky alleen vanaf de 2-koloms indeling: op mobiel staat de inhoudsopgave gewoon in de
   doorlopende kolom en zou sticky de artikeltekst erachter onleesbaar maken (Joachim, livecheck). */
.blog-toc { background: var(--mm-white); border: 1px solid var(--border-on-light); border-left: 4px solid var(--mm-lime); padding: 18px; }
@media (min-width: 860px) { .blog-toc { position: sticky; top: 88px; } }
.blog-toc .rf-title { margin: 0 0 12px; font-size: var(--fs-xs); }
.blog-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.blog-toc li { font-size: var(--fs-small); }
.blog-toc li.blog-toc-lvl3 { padding-left: 14px; }
.blog-toc a { color: var(--mm-ink); text-decoration: none; }
.blog-toc a:hover { color: var(--mm-petrol-deep); text-decoration: underline; }
.blog-body { min-width: 0; }

/* ---- Breadcrumb ---- */
.crumb { font-size: var(--fs-small); color: var(--text-muted); padding: 16px 0; }
.crumb a { color: var(--text-muted); text-decoration: none; }
.crumb a:hover { color: var(--mm-petrol); }

/* ---- Seasonal theming (lente/zomer/herfst/winter) ---- */
/* Per-season tint on the accent surfaces + hero glow. Brand petrol/mint CTAs stay constant. */
[data-season="lente"] {
  --surface-stat: #A9D9C0; --surface-review: #F4CFDD; --mm-mint-soft: #CDE9DC;
  --accent-secondary: #EFA9C3; --season-hero: rgba(129,199,178,.32);
}
[data-season="zomer"] {
  --surface-stat: #F4E7A8; --surface-review: #BCE0DA; --mm-mint-soft: #F3E9B8;
  --accent-secondary: #F4C84B; --season-hero: rgba(244,200,75,.08);
}
[data-season="herfst"] {
  --surface-stat: #E8C49A; --surface-review: #E7B673; --mm-mint-soft: #E5C9A8;
  --accent-secondary: #C8742E; --season-hero: rgba(200,116,46,.32);
}
[data-season="winter"] {
  --surface-stat: #CFE6E3; --surface-review: #D7E6EF; --mm-mint-soft: #CFE6E3;
  --accent-secondary: #9FC6D8; --season-hero: rgba(182,221,210,.34);
}
/* Seasonal hero glow + photo (photo swaps per season, see home.php) */
.hero { position: relative; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(90% 60% at 85% 5%, var(--season-hero, transparent), transparent 55%); }
.hero > .wrap { position: relative; z-index: 1; }
.hero-photo { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }

/* ---- Seasonal falling effect ---- */
.season-fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.season-fx i { position: absolute; top: -24px; opacity: .8; font-style: normal; will-change: transform, opacity;
  animation: fall var(--d, 8s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }
/* zomer: sun/sparkle — opacity twinkle (composes with fall: different property) + warm glow */
[data-season="zomer"] .season-fx i { filter: drop-shadow(0 0 5px rgba(255,206,84,.85));
  animation: fall var(--d, 8s) linear infinite, twinkle calc(1.4s + var(--d, 8s) / 8) ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
/* lente: blossom — soft pink glow */
[data-season="lente"] .season-fx i { filter: drop-shadow(0 1px 2px rgba(232,160,191,.55)); }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }
@media (max-width: 640px) { .season-fx i { opacity: .55; } }

/* ---- Forms (contact/spar/werkgevers/kandidaatprofiel/AI-tools) ---- */
.mm-form { background: var(--mm-white); border: 1px solid var(--border-on-light); padding: clamp(20px,4vw,32px); }
.mm-form label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 18px; }
.mm-form .opt { font-weight: 400; color: var(--text-muted); }
.mm-form input, .mm-form textarea, .mm-form select { display: block; width: 100%; margin-top: 7px; padding: 12px 14px;
  border: 1px solid var(--border-on-light); background: var(--mm-white); color: var(--mm-ink); font: inherit;
  transition: border-color var(--dur-base) var(--ease-out); }
.mm-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23667' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.mm-form input:hover, .mm-form textarea:hover, .mm-form select:hover { border-color: var(--mm-mint); }
.mm-form input:focus, .mm-form textarea:focus, .mm-form select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; }
.mm-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 4px; }
.mm-form textarea { resize: vertical; }
.mm-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mm-form button[type="submit"] { margin-top: 10px; }
.mm-form .form-note { margin: 12px 0 0; font-size: var(--fs-small); color: var(--text-muted); }
/* Wachtstand bij trage formulieren (AI-tools duren 10 tot 20 seconden). */
.btn.is-busy { opacity: .85; cursor: progress; }
.btn-spinner { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mm-spin .7s linear infinite; }
@keyframes mm-spin { to { transform: rotate(360deg); } }
.form-busy-note { margin: 12px 0 0; font-size: var(--fs-small); color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 2s; } }
.mm-form .form-section-title { margin: 8px 0 4px; padding-top: 20px; border-top: 1px solid var(--border-on-light); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); color: var(--mm-petrol); }
.mm-form .form-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.form-flash { padding: 13px 16px; margin-bottom: 18px; font-size: var(--fs-small); border-left: 3px solid transparent; }
.form-flash--ok { background: #E2F2EC; color: #0E5C44; border-left-color: #0E5C44; }
.form-flash--err { background: #FBE6E6; color: #8A2A2A; border-left-color: #8A2A2A; }
@media (max-width: 560px) { .mm-form .form-row { grid-template-columns: 1fr; } }

/* Fieldset (bijv. extra's-checkboxes) meeliften op dezelfde kaartstijl */
.mm-form .pa-fieldset { border: 1px solid var(--border-on-light); padding: 16px 18px; margin: 4px 0 4px; }
.mm-form .pa-fieldset legend { font-weight: 700; padding: 0 8px; font-family: var(--font-display); color: var(--mm-petrol); }

/* ---- Toolkit ---- */
.article-wrap { max-width: 820px; margin: 0 auto; }
.table-wrap { overflow-x: auto; }
.vraag-lijst { margin: 0; padding-left: 20px; }
.vraag-lijst li { margin: 0 0 10px; line-height: var(--lh-body); }
.pr-grid { display: grid; gap: 10px; }
.pr-row { display: grid; grid-template-columns: 1fr 160px 28px; align-items: center; gap: 14px; }
.pr-label { font-weight: 600; display: block; }
.pr-hint { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.pr-range { width: 100%; accent-color: var(--mm-mint); }
.pr-range::-webkit-slider-thumb { width: 22px; height: 22px; }
.pr-range::-moz-range-thumb { width: 22px; height: 22px; }
.pr-val { font-family: var(--font-display); font-weight: 700; text-align: right; color: var(--mm-petrol); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--mm-grey-bg); border: 1px solid var(--border-on-light); cursor: pointer; }
.pr-result { margin-top: 24px; background: var(--mm-grey-bg); padding: 22px; }
.pr-bar-row { display: grid; grid-template-columns: 220px 1fr 28px; align-items: center; gap: 12px; margin-bottom: 8px; }
.pr-bar-label { font-size: var(--fs-small); font-weight: 600; }
.pr-bar { height: 12px; background: var(--mm-grey-track); }
.pr-bar > span { display: block; height: 100%; background: var(--mm-mint); }
.pr-bar-num { font-weight: 700; text-align: right; color: var(--mm-petrol); }
.aanbod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.aanbod-table { width: 100%; border-collapse: collapse; min-width: 320px; }
.aanbod-table th, .aanbod-table td { border: 1px solid var(--border-on-light); padding: 5px 6px; text-align: center; font-size: var(--fs-small); }
.aanbod-table th { background: var(--mm-petrol); color: var(--mm-heading-light); font-family: var(--font-display); }
.aanbod-table td.ab-crit { text-align: left; font-weight: 600; }
.aanbod-table .ab-score { width: 44px; padding: 4px; text-align: center; border: 1px solid var(--border-on-light); font: inherit; }
.aanbod-table--totaal { min-width: unset; }
.aanbod-table--totaal td:first-child { text-align: left; width: 40%; }
.aanbod-table tfoot td { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h4); background: var(--mm-grey-bg); }
.aanbod-table .ab-total.is-best { background: var(--mm-mint); color: var(--mm-petrol); }
@media (max-width: 720px) { .aanbod-grid { grid-template-columns: 1fr; } }
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pa-pair { display: flex; align-items: center; gap: 10px; background: var(--mm-grey-bg); padding: 10px 12px; }
.pa-opt { flex: 1; cursor: pointer; padding: 10px 12px; background: var(--mm-white); border: 1px solid var(--border-on-light); font: inherit; font-weight: 600; color: var(--mm-ink); }
.pa-opt:hover { border-color: var(--mm-mint); }
.pa-opt.is-picked { background: var(--mm-mint); color: var(--mm-petrol); border-color: var(--mm-mint); }
.pa-grid--pick { gap: 8px; }
.pa-grid--pick .pa-opt { text-align: left; }
.pa-grid--pick .pa-opt.is-picked::before { content: "\2713\00a0"; }
.pa-or { font-size: var(--fs-xs); color: var(--text-muted); }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-chip { background: var(--mm-mint-soft); color: var(--mm-petrol-deep); padding: 6px 12px; font-weight: 600; }
.pa-fieldset { border: 1px solid var(--border-on-light); padding: 16px; margin: 0 0 12px; }
.pa-fieldset legend { font-weight: 600; padding: 0 8px; }
@media (max-width: 640px) {
  .pa-grid { grid-template-columns: 1fr; }
  .pr-row { grid-template-columns: 1fr 28px; grid-template-areas: "label val" "range range"; row-gap: 6px; }
  .pr-row .pr-label { grid-area: label; }
  .pr-row .pr-val { grid-area: val; }
  .pr-row .pr-range { grid-area: range; }
  .pr-bar-row { grid-template-columns: 130px 1fr 24px; }
}

/* ---- Rol-detail hero (compact + overzichtskaart) ---- */
.rol-hero .wrap { padding-top: 28px; padding-bottom: 36px; }
.rol-hero-grid { display: grid; grid-template-columns: 1.4fr 0.95fr; gap: 32px; align-items: start; }
.rol-hero-main h1 { margin: 12px 0 12px; font-weight: 800; font-size: var(--fs-h1); line-height: 1.05; text-transform: uppercase; }
.rol-lead { margin: 0 0 4px; max-width: 56ch; color: var(--mm-on-dark-soft); font-size: var(--fs-lead); }
.rol-quick { background: var(--mm-white); color: var(--mm-ink); padding: 22px; }
.rol-quick h2 { margin: 0 0 14px; font-size: var(--fs-h4); color: var(--mm-black); }
.rol-quick .q-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-on-light); }
.rol-quick .q-k { color: var(--text-muted); font-size: var(--fs-small); }
.rol-quick .q-v { font-weight: 700; text-align: right; color: var(--mm-black); }
.rol-quick .q-skills { padding: 12px 0; border-bottom: 1px solid var(--border-on-light); }
.rol-quick .q-skills .q-k { display: block; margin-bottom: 8px; }
.rol-quick .q-link { display: inline-block; margin-top: 14px; font-weight: 700; font-family: var(--font-display); color: var(--mm-petrol); text-decoration: none; }
.rol-quick .q-link:hover { color: var(--mm-mint-hover); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .rol-hero-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-collage { min-height: 240px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col, .wizard .options { grid-template-columns: 1fr; }
  /* Let wide tables scroll inside their panel instead of pushing the page. */
  .panel { overflow-x: auto; }
  .level-table { min-width: 460px; }
  .kh-strip .wrap { flex-direction: column; align-items: flex-start; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  /* Comfortable tap targets on touch (>=40-44px). */
  .nav-toggle { padding: 10px; margin-right: -10px; }
  .footer-col a { padding: 9px 0; }
  .orient-links a { padding: 11px 18px 11px 10px; }
  .orient-group { padding-top: 20px; }
  .orient-groups { gap: 22px; }
  .nav a { padding: 8px 0; }
  .chip { padding-top: 9px; padding-bottom: 9px; }
  .btn { min-height: 42px; }
  .nav { display: none; }
  .nav.is-open { display: flex; position: absolute; top: 64px; left: 0; right: 0; background: var(--mm-white); flex-direction: column; align-items: stretch; padding: 18px clamp(20px,5vw,28px) 22px; gap: 6px; border-bottom: 1px solid var(--border-on-light); box-shadow: var(--shadow-card); }
  .nav.is-open a:not(.btn) { padding: 12px 2px; text-align: center; border-bottom: 1px solid var(--border-on-light); }
  .nav.is-open a:not(.btn):last-of-type { border-bottom: none; }
  .nav.is-open .btn { width: 100%; justify-content: center; margin-top: 10px; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 24px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-col a { padding: 6px 0; }
}

.cta-ext .ext-icon { margin-left: 2px; }

/* ---- Sfeerafbeelding bij paginaintro's (diagonale lijn, matcht de knop-clip-path) ----
   Foto loopt vol tot de echte viewportrand (geen .wrap-marge); de tekstkolom lijnt links
   uit met de rest van de site via dezelfde inset als .wrap. */
/* De fotokolom liep vroeger als vrije `0.85fr` mee met het scherm terwijl de hoogte op een
   vaste 320px bleef staan. Op 1780px werd het vak daardoor 757x320 (2,4:1) en op 2560px zelfs
   3,4:1, en omdat de foto's staand of vierkant zijn snijdt `cover` daar loodrecht doorheen:
   op /spar was nog maar ruim een derde van de foto in beeld en stond het hoofd paginavullend.
   Nu groeit de hoogte mee met de breedte en is de kolom afgetopt, zodat het vak op elk
   scherm rond 1,75:1 blijft en de uitsnede overal hetzelfde oogt (Matthew, 02-09). */
.intro-hero-grid { display: grid; grid-template-columns: 1fr min(42.5vw, 820px); gap: 0; align-items: stretch; width: 100%; }
/* Banner zonder foto (vakgebieden, rollen): 1 kolom, tekst op leesbare breedte i.p.v.
   vol tegen de rechterrand. */
.intro-hero-grid--notext { grid-template-columns: 1fr; }
.intro-hero-grid--notext .intro-hero-text { padding-right: max(clamp(16px,4vw,40px), calc((100vw - var(--container-max)) / 2)); }
.intro-hero-grid--notext .intro-hero-text > p { max-width: 68ch; }
.intro-hero-text { padding-left: max(clamp(16px,4vw,40px), calc((100vw - var(--container-max)) / 2)); padding-right: clamp(16px,4vw,40px); }
.intro-hero-photo { position: relative; min-height: clamp(320px, 24vw, 470px); }
.intro-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--intro-photo-pos, 50% 30%); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 860px) {
  .intro-hero-grid { grid-template-columns: 1fr; }
  .intro-hero-photo { display: none; }
  .intro-hero-text { padding-left: clamp(16px,4vw,40px); }
}

/* ---- Blog: zoeken/filteren/sorteren ---- */
.blog-panel { background: var(--mm-white); border: 1px solid var(--border-on-light); border-left: 4px solid var(--mm-lime); padding: 20px; margin-bottom: 24px; }
.blog-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.blog-controls .rf-search { max-width: 260px; flex: 1; min-width: 180px; }
.blog-controls .blog-cats { flex-basis: 100%; min-width: 0; width: 100%; max-width: 100%; }
.blog-sort { min-width: 170px; }
/* Horizontaal scrollbaar frame i.p.v. wrappende chips (Koen ronde 4). */
.blog-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 2px; scrollbar-width: thin; }
.blog-cat { background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 8px 16px; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; color: var(--mm-ink); white-space: nowrap; flex: 0 0 auto; }
.blog-cat.is-active { background: var(--mm-petrol); color: var(--mm-heading-light); border-color: var(--mm-petrol); }
.rf-summary { color: var(--text-muted); font-size: var(--fs-small); margin: 0 0 16px; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; align-self: flex-start; }
/* Blog-card: zelfde border-op-maat-techniek als role-card/wz-tool + hapje-hoek. */
.blog-card { position: relative; background: var(--mm-white);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); box-shadow: 0 0 0 1px var(--border-on-light); }
@media (max-width: 480px) { .blog-controls { flex-direction: column; align-items: stretch; } .blog-controls .rf-search, .blog-sort { max-width: none; width: 100%; } }

/* ---- Vergelijken vanuit de rollenlijst (checkbox + zwevende balk) ---- */
.rc-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Vergelijk-keuze op de rolkaart. Stond als klein grijs vinkje in fs-xs onderaan de kaart en
   werd daardoor nauwelijks gebruikt (Matthew, ronde 11). Nu een echte chip met een groter
   vakje, leesbare tekst en een duidelijke aan-stand. */
.rc-compare { display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 6px 12px; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-small); color: var(--mm-petrol); cursor: pointer;
  border: 1.5px solid var(--mm-petrol); background: var(--mm-white);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.rc-compare:hover { background: var(--mm-mint); border-color: var(--mm-mint); color: var(--mm-petrol); }
.rc-compare input { width: 18px; height: 18px; margin: 0; accent-color: var(--mm-petrol); cursor: pointer; }
.rc-compare:has(input:checked) { background: var(--mm-mint); border-color: var(--mm-mint); }
.rc-compare:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Uitlegregel boven de rollenlijst: zonder deze zin ziet niemand dat vergelijken kan. */
.cmp-hint { display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 12px 16px; background: var(--mm-white); border-left: 4px solid var(--mm-mint);
  font-size: var(--fs-small); color: var(--mm-petrol); }
.cmp-hint b { font-family: var(--font-display); }
.cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; background: var(--mm-petrol); color: var(--mm-heading-light); transform: translateY(100%); transition: transform var(--dur-base) var(--ease-out); box-shadow: 0 -4px 16px rgba(0,0,0,.18); }
.cmp-bar.is-open { transform: translateY(0); }
.cmp-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px clamp(16px,4vw,40px); }
.cmp-bar-text { font-weight: 600; font-size: var(--fs-small); }
.cmp-bar-actions { display: flex; align-items: center; gap: 14px; }
.cmp-bar-clear { background: none; border: none; color: var(--mm-on-dark-soft); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--fs-small); }
.cmp-bar #cmpBarGo.is-disabled { opacity: .4; pointer-events: none; }
@media (max-width: 480px) { .cmp-bar-inner { flex-direction: column; align-items: stretch; text-align: center; } .cmp-bar-actions { justify-content: center; } }

/* ---- Vergelijk: visuele compare-layout ---- */
.cmp-picker { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 28px; }
.cmp-picker-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); font-weight: 600; }
.cmp-select { padding: 12px 34px 12px 14px; min-width: 220px; border: 1px solid var(--border-on-light); font: inherit; font-size: var(--fs-small); background: var(--mm-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px; appearance: none; -webkit-appearance: none; }
.cmp-wrap { background: var(--mm-white); border: 1px solid var(--border-on-light); overflow: hidden; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 20px; align-items: start; }
.cmp-head { background: var(--mm-petrol); color: var(--mm-heading-light); padding: 20px 24px; }
.cmp-head-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--mm-on-dark-soft); align-self: center; }
.cmp-head-role { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); }
.cmp-head-tag { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--mm-mint); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-bottom: 4px; }
.cmp-row { padding: 20px 24px; border-bottom: 1px solid var(--border-on-light); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row-label { font-weight: 700; color: var(--mm-black); align-self: center; }
.cmp-bars { display: flex; flex-direction: column; gap: 12px; }
.cmp-bar-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; align-items: center; }
.cmp-bar-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); }
.cmp-bar-track { height: 8px; background: var(--mm-grey-track); }
.cmp-bar-fill { display: block; height: 100%; background: var(--mm-mint); }
.cmp-bar-value { font-weight: 700; font-size: var(--fs-small); white-space: nowrap; }
.cmp-delta { font-size: var(--fs-xs); font-weight: 700; padding: 2px 6px; white-space: nowrap; }
.cmp-delta.is-up { background: var(--mm-mint-soft); color: var(--mm-petrol-deep); }
.cmp-delta.is-down { background: #F3D9D9; color: #7A2A2A; }
.cmp-skills-sub { margin: 0 0 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cmp-chips:last-child { margin-bottom: 0; }
.cmp-chip { background: var(--mm-petrol); color: var(--mm-heading-light); font-size: var(--fs-xs); font-weight: 700; padding: 5px 10px; }
.cmp-chip--shared { background: var(--mm-mint-soft); color: var(--mm-petrol-deep); }
@media (max-width: 760px) {
  .cmp-select { min-width: 0; width: 100%; font-size: 16px; padding: 14px 36px 14px 14px; }
  .cmp-picker { flex-direction: column; align-items: stretch; }
  .cmp-picker .btn { width: 100%; justify-content: center; }
  /* Blijf 2 kolommen (rol A/rol B naast elkaar), net als het design — alleen de labelkolom valt weg en wordt een koptekst boven de rij. */
  .cmp-head { grid-template-columns: 1fr 1fr; padding: 16px; gap: 12px; }
  .cmp-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 16px; }
  .cmp-head-label { display: none; }
  .cmp-row-label { grid-column: 1 / -1; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); font-weight: 700; }
  .cmp-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .cmp-bar-label { flex: 0 0 auto; font-size: 10px; }
  .cmp-bar-value { margin-left: auto; }
  .cmp-bar-track { flex-basis: 100%; order: 3; }
  .cmp-delta { flex-basis: 100%; order: 4; justify-self: start; }
  .cmp-row--cta > div:first-child { display: none; }
  .cmp-row--cta .btn { width: 100%; justify-content: center; font-size: var(--fs-xs); padding: 10px 8px; }
}

/* ---- Salarisgids: sortable table + mobile cards ---- */
.sal-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sal-controls .rf-search { max-width: 320px; flex: 1; }
.sal-table thead tr { background: var(--mm-petrol); }
.sal-table th { color: var(--mm-heading-light); border-bottom: none; white-space: nowrap; }
.sal-table th.is-sortable { cursor: pointer; user-select: none; }
.sal-table th.is-sortable:hover { color: var(--mm-mint); }
.sal-sort-arrow { display: inline-block; width: 10px; color: var(--mm-mint); }
.sal-band-cell { width: 140px; }
.sal-band { position: relative; height: 8px; background: var(--mm-grey-track); width: 120px; }
.sal-band-fill { position: absolute; top: 0; height: 100%; background: var(--mm-mint); }
.sal-cards { display: none; }
.sal-card { display: flex; flex-direction: column; gap: 8px; background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 16px; text-decoration: none; color: var(--mm-ink); margin-bottom: 12px; }
.sal-card-title { font-family: var(--font-display); font-weight: 700; color: var(--mm-black); }
.sal-card-vak { font-size: var(--fs-small); color: var(--text-muted); }
.sal-card .sal-band { width: 100%; margin: 4px 0; }
.sal-card-levels { display: flex; justify-content: space-between; font-size: var(--fs-small); font-weight: 600; color: var(--mm-petrol-deep); }
.sal-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
.sal-page-btn { min-width: 38px; height: 38px; border: 1px solid var(--border-on-light); background: var(--mm-white); font: inherit; font-weight: 600; cursor: pointer; }
.sal-page-btn.is-active { background: var(--mm-petrol); color: var(--mm-heading-light); border-color: var(--mm-petrol); }
@media (max-width: 760px) {
  .sal-table-wrap { display: none; }
  .sal-cards { display: block; }
}

/* ---- Breadcrumb ---- */
.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--mm-on-dark-soft); margin-bottom: 14px; }
.breadcrumb a { color: var(--mm-on-dark-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--mm-mint); text-decoration: underline; }
.breadcrumb .bc-sep { opacity: .6; }
.breadcrumb[data-on="light"], .breadcrumb[data-on="light"] a { color: var(--text-muted); }
.breadcrumb[data-on="light"] a:hover { color: var(--mm-petrol-deep); }

/* ---- Rollen: zoeken los van de filters (Koen ronde 4) ---- */
.rollen-search-row { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.rollen-search-row .rf-search { flex: 1; }

/* ---- Rollen: filter sidebar ---- */
.rollen-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.filter-toggle { display: none; }
.rollen-filters { background: var(--mm-white); border: 1px solid var(--border-on-light); border-left: 4px solid var(--mm-lime); padding: 22px; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 104px); overflow-y: auto; }
.rf-head { display: flex; align-items: center; justify-content: space-between; }
.rf-title { margin: 0; font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.rf-close { display: none; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--mm-ink); }
.rf-group { display: flex; flex-direction: column; gap: 10px; }
.rf-label { margin: 0; font-weight: 700; font-size: var(--fs-small); color: var(--mm-black); }
.rf-search { padding: 10px 12px; border: 1px solid var(--border-on-light); font: inherit; font-size: var(--fs-small); }
.rf-vak-list { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) { .rf-vak-list { max-height: 320px; overflow-y: auto; padding-right: 4px; } }
/* align-items:flex-start i.p.v. center: bij een label dat naar 2 regels wrapt (bv. "Business
   Applications & Low-code") bleven checkbox en aantal anders midden tussen de regels zweven. */
/* flex-shrink:0 nodig: binnen de scrollbare .rf-vak-list (flex-column) perste flexbox anders
   2-regelige labels terug tot min-height i.p.v. de lijst te laten scrollen. */
.rf-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: var(--mm-ink); cursor: pointer; padding: 3px 0; min-height: 24px; flex-shrink: 0; }
.rf-check span:nth-child(2) { flex: 1; padding-top: 2px; }
.rf-check input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; margin-top: 2px; accent-color: var(--mm-mint-hover); cursor: pointer; }
.rf-count { flex-shrink: 0; padding-top: 2px; }
.rf-count { color: var(--text-muted); font-size: var(--fs-xs); }
.rf-range { width: 100%; accent-color: var(--mm-mint); }
.rf-range-value { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.rf-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rf-clear, .rf-clear-inline { background: none; border: none; text-decoration: underline; cursor: pointer; font-size: var(--fs-small); color: var(--mm-ink); font-family: inherit; padding: 0; }
.rf-apply { display: none; width: 100%; justify-content: center; }
.rf-summary { margin: 0 0 20px; color: var(--text-muted); font-size: var(--fs-small); }
.rf-empty { background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 24px; text-align: center; color: var(--text-muted); }

@media (max-width: 860px) {
  .rollen-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 10px 16px; font-weight: 700; font-size: var(--fs-small); font-family: inherit; cursor: pointer; margin-bottom: 20px; }
  .rollen-filters { display: none; position: fixed; inset: 0; z-index: 3600; overflow-y: auto; padding: 20px clamp(20px,5vw,28px) 100px; border: none; }
  .rollen-filters.is-open { display: flex; }
  .rf-head { display: flex; }
  .rf-close { display: block; }
  .rf-apply { display: inline-flex; }
}

/* Desktop: full trail, no back link. Mobile: only a "← Terug" link, no trail. */
.breadcrumb-back { display: none; }
@media (max-width: 767px) {
  .breadcrumb-trail { display: none; }
  .breadcrumb-back { display: inline-flex; color: inherit; text-decoration: none; font-size: var(--fs-xs); }
  .breadcrumb-back:hover { text-decoration: underline; }
}

/* ---- Skill-matrix tool ---- */
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--mm-petrol-deep); text-decoration: underline; cursor: pointer; }
.sm-tool { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.sm-main { display: flex; flex-direction: column; gap: 24px; }
.sm-step h2, .sm-step h3 { margin: 0 0 4px; font-size: var(--fs-h3); }
.sm-vak-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sm-search-row { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.sm-search { flex: 1; padding: 10px 14px; border: 1px solid var(--border-on-light); font: inherit; font-size: var(--fs-small); }
.sm-search-count { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.sm-chosen { background: var(--mm-lime); padding: 14px 16px; margin-bottom: 18px; }
.sm-chosen-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: var(--fs-small); margin-bottom: 10px; }
.sm-chosen-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chip-selected { display: inline-flex; align-items: center; gap: 6px; background: var(--mm-petrol-deep); color: #fff; font-size: var(--fs-xs); padding: 5px 6px 5px 12px; border-radius: var(--radius-pill); }
.sm-chip-selected button { background: none; border: none; color: #fff; cursor: pointer; font-size: var(--fs-xs); opacity: .8; padding: 2px 4px; }
.sm-chip-selected button:hover { opacity: 1; }
.sm-group { border: none; padding: 0; margin: 0 0 22px; }
.sm-group-head { display: flex; justify-content: space-between; width: 100%; font-weight: 700; padding: 0 0 10px; border-bottom: var(--border-hairline); margin-bottom: 12px; }
.sm-group-count { font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.sm-group-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px 16px; }
.sm-skill { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); cursor: pointer; }
.sm-results { position: sticky; top: 90px; }
.sm-results-close { display: none; text-align: right; cursor: pointer; font-size: 18px; margin-bottom: 8px; }
.sm-match-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sm-match-ring { --pct: 0; width: 66px; height: 66px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-small);
  background: conic-gradient(var(--mm-mint) calc(var(--pct) * 1%), var(--mm-grey-track) 0); }
.sm-match-ring span { background: var(--mm-white); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sm-match-top strong { display: block; font-size: var(--fs-small); }
.sm-match-vak { font-size: var(--fs-xs); color: var(--mm-mint-dark, var(--mm-petrol-deep)); font-weight: 600; }
.sm-match-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.sm-match-row { display: block; text-decoration: none; color: inherit; }
.sm-match-row-top { display: flex; justify-content: space-between; font-size: var(--fs-small); font-weight: 600; margin-bottom: 4px; }
.sm-match-bar { display: block; height: 8px; background: var(--mm-grey-track); }
.sm-match-bar span { display: block; height: 100%; background: var(--mm-mint); }
.sm-match-cta { display: block; text-align: center; }
.sm-sticky { display: none; }

@media (max-width: 900px) {
  .sm-tool { grid-template-columns: 1fr; }
  .sm-results { position: fixed; inset: auto 0 0 0; top: auto; max-height: 0; overflow: hidden; background: var(--mm-white); z-index: 3600; padding: 0 20px; transition: max-height var(--dur-base,.2s) var(--ease-out,ease); box-shadow: 0 -8px 24px rgba(0,0,0,.12); }
  .sm-results.is-open-mobile { max-height: 82vh; overflow-y: auto; padding: 20px; padding-bottom: 90px; }
  .sm-results-close { display: block; }
  /* De negatieve marge moet gelijk zijn aan de padding van .wrap, anders steekt de
     balk erbuiten. Met een vaste -20px was dat op 390 px 4 px te veel. */
  .sm-sticky { display: block; position: sticky; bottom: 0; z-index: 3500; margin-inline: calc(-1 * var(--wrap-pad-x)); }
  .sm-sticky-btn { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--mm-petrol-deep); color: #fff; border: none; padding: 14px 20px; font: inherit; text-align: left; cursor: pointer; }
  .sm-sticky-pct { font-weight: 700; font-size: var(--fs-h3); }
  .sm-sticky-text { flex: 1; font-size: var(--fs-xs); }
  .sm-sticky-text strong { display: block; font-size: var(--fs-small); }
  .sm-sticky-arrow { font-size: var(--fs-small); }
}

/* ---- Persoonlijke analyse: 24 stellingen (DISC) ---- */
.pa-card { background: var(--mm-petrol-deep); color: var(--mm-heading-light); padding: 48px clamp(20px,5vw,64px); text-align: center; min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.pa-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: var(--fs-xs); }
.pa-progress { color: var(--mm-mint); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.pa-back { background: none; border: none; color: var(--mm-on-dark-soft); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.pa-back:hover { color: var(--mm-heading-light); }
.pa-statement { font-size: var(--fs-h2); line-height: 1.3; margin: 0 auto 36px; max-width: 44ch; }
.pa-scale { display: flex; justify-content: center; gap: clamp(10px,3vw,28px); flex-wrap: wrap; }
.pa-dot { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--mm-on-dark-soft); font-size: var(--fs-xs); max-width: 90px; }
.pa-dot-circle { width: 40px; height: 40px; border-radius: 50%; border: 2px solid; box-sizing: border-box; }
.pa-dot--a .pa-dot-circle { border-color: #4f9e6e; }
.pa-dot--b .pa-dot-circle { border-color: #8fc79f; }
.pa-dot--c .pa-dot-circle { border-color: #9aa3ab; }
.pa-dot--d .pa-dot-circle { border-color: #cf9a5c; }
.pa-dot--e .pa-dot-circle { border-color: #b2495c; }
.pa-dot--a.is-picked .pa-dot-circle { background: #4f9e6e; }
.pa-dot--b.is-picked .pa-dot-circle { background: #8fc79f; }
.pa-dot--c.is-picked .pa-dot-circle { background: #9aa3ab; }
.pa-dot--d.is-picked .pa-dot-circle { background: #cf9a5c; }
.pa-dot--e.is-picked .pa-dot-circle { background: #b2495c; }
.pa-dot.is-picked { color: var(--mm-heading-light); font-weight: 700; }
.pa-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.pa-reset-link { text-align: center; margin-top: 4px; }
.disc-legend { margin-top: 32px; padding-top: 24px; border-top: var(--border-hairline); }
.disc-legend-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
.disc-legend-item { display: flex; align-items: flex-start; gap: 10px; }
.disc-legend-item strong { display: block; font-size: var(--fs-small); }
.disc-legend-item span { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.disc-legend-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; margin-top: 4px; }
@media (max-width: 640px) {
  .pa-card { padding: 32px 20px; text-align: left; }
  .pa-statement { font-size: var(--fs-h3); margin-bottom: 24px; text-align: left; }
  .pa-scale { flex-direction: column; align-items: stretch; gap: 4px; }
  .pa-dot { flex-direction: row; max-width: none; justify-content: flex-start; padding: 10px 4px; gap: 12px; }
}

/* ---- Aanbiedingen vergelijken: dot-scores + mobile cards (vervangt oude aanbod-* stijl) ---- */
.ab-table { width: 100%; border-collapse: collapse; }
.ab-table th, .ab-table td { border: 1px solid var(--border-on-light); padding: 10px 12px; text-align: center; font-size: var(--fs-small); }
.ab-table th { background: var(--mm-petrol); color: var(--mm-heading-light); font-family: var(--font-display); white-space: nowrap; }
.ab-table td.ab-crit { text-align: left; font-weight: 600; }
.ab-table tfoot td { font-family: var(--font-display); font-weight: 700; background: var(--mm-grey-bg); vertical-align: top; padding-top: 12px; }
.ab-table tfoot td:first-child { text-align: left; }
.ab-dots { display: inline-flex; gap: 6px; }
.ab-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-on-light); background: var(--mm-white); cursor: pointer; padding: 0; }
.ab-dot:hover { border-color: var(--mm-mint); }
.ab-dot.is-picked { background: var(--mm-mint); border-color: var(--mm-mint); }
.ab-total.is-best { background: var(--mm-mint-soft); }
.ab-badge { display: inline-block; background: var(--mm-mint); color: var(--mm-petrol); font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: middle; }
.ab-total-bar { height: 6px; background: var(--mm-grey-track); margin-top: 8px; }
.ab-total-bar span { display: block; height: 100%; background: var(--mm-mint); }
.ab-total-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); margin-top: 4px; }
#ab-cards { display: none; }
.ab-card { background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 14px 16px; margin-bottom: 10px; }
.ab-card h2, .ab-card h3, .ab-card h4 { margin: 0 0 10px; font-size: var(--fs-small); }
.ab-card-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.ab-card-row + .ab-card-row { border-top: 1px solid var(--mm-grey-bg); }
.ab-card-col { font-size: var(--fs-xs); color: var(--text-muted); }
.ab-card--total { background: var(--mm-grey-bg); }
@media (max-width: 720px) {
  #ab-table-wrap { display: none; }
  #ab-cards { display: block; }
}

/* ---- CV-checker: cv-opmaak voorbeeld + voorbeeldbrieven ---- */
.cv-example { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.cv-example-photo { width: 100%; height: auto; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.cv-example-tips { margin: 0; padding-left: 20px; }
.cv-example-tips li { margin-bottom: 12px; line-height: var(--lh-body); }
@media (max-width: 760px) { .cv-example { grid-template-columns: 1fr; } .cv-example-photo { max-width: 320px; margin: 0 auto; display: block; } }

.brief-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.brief-tab { background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.brief-tab.is-active { background: var(--mm-petrol-deep); color: var(--mm-heading-light); border-color: var(--mm-petrol-deep); }
.brief-text { background: var(--mm-grey-bg); padding: 20px; font-size: var(--fs-small); line-height: var(--lh-body); }
.brief-text p { margin: 0 0 14px; }
.brief-text p:last-child { margin-bottom: 0; }

/* ---- Verwijzingen naar relevante blogartikelen ---- */
.blog-verwijzing { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; }
.blog-verwijzing-item { display: flex; flex-direction: column; gap: 10px; justify-content: space-between;
  background: var(--mm-white); border: 1px solid var(--border-on-light); padding: 18px 20px;
  text-decoration: none; color: var(--mm-ink);
  transition: box-shadow var(--dur-base,.2s) var(--ease-out,ease), transform var(--dur-base,.2s) var(--ease-out,ease); }
.blog-verwijzing-item:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.blog-verwijzing-titel { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-body); }
.blog-verwijzing-cta { font-size: var(--fs-small); font-weight: 700; color: var(--mm-petrol-deep); }

/* ---- Over ons (ronde 7, Matthews mail 27-08-2026) ---- */
.about-lead { max-width: 74ch; margin: 0 0 40px; }
.about-lead p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--mm-ink); }

.about-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px,4vw,48px); align-items: center; }
.about-split-text h2 { margin: 0 0 14px; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--mm-black); }
.about-split-text p { margin: 0 0 14px; line-height: var(--lh-body); color: var(--mm-ink); max-width: 60ch; }
.about-split-text p:last-child { margin-bottom: 0; }
.about-split-photo img { display: block; width: 100%; height: 400px; object-fit: cover; object-position: 50% 46%;
  /* Matthew ronde 9: de harde rechthoek mocht "rond" worden. Een cirkel snijdt een
     groepsfoto onbruikbaar bij, dus ruime afgeronde hoeken. */
  border-radius: 22px; }
@media (max-width: 800px) { .about-split { grid-template-columns: 1fr; } .about-split-photo { order: -1; } }

.about-tool { max-width: 760px; }
.about-tool h2 { margin: 6px 0 14px; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--mm-black); }
.about-tool p { margin: 0 0 14px; line-height: var(--lh-body); color: var(--mm-ink); }
.about-questions { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.about-questions li { background: var(--mm-white); border-left: 4px solid var(--mm-mint); padding: 12px 16px;
  font-family: var(--font-display); font-weight: 600; color: var(--mm-black); }

.about-dark-cols { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: clamp(20px,3vw,36px); }
.about-dark-cols p { margin: 0; color: var(--mm-on-dark-soft); line-height: var(--lh-body); }

.team-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: clamp(12px,2vw,22px); }
.team-card { text-align: center; }
.team-photo { display: block; width: 152px; height: 152px; max-width: 100%; object-fit: cover;
  border-radius: 50%; margin: 0 auto 12px; background: var(--mm-grey-card);
  box-shadow: 0 0 0 1px var(--border-on-light); }
.team-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: var(--mm-black); line-height: 1.25; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(3,1fr); row-gap: 26px; } }
@media (max-width: 520px) { .team-grid { grid-template-columns: repeat(2,1fr); } .team-photo { width: 124px; height: 124px; } }


/* ============================================================
   Ronde 8 (Matthew, 31-08-2026)
   6. Uitlijning: koppen en inleidingen braken af met een enkel woord op de laatste
      regel ("... aan de / bovenkant."), en de H1 van de salarisgids brak middenin
      "IT-ER". Dat las als een harde enter. text-wrap regelt dat per regel, zonder
      dat er ergens een vaste breedte hoeft te veranderen.
   7. Witruimte: aangrenzende secties met dezelfde achtergrond tellen hun padding op.
   ============================================================ */
h1, h2, h3,
.section-head h2,
.wz-sec-title,
.hero h1,
.wizard h1 { text-wrap: balance; }

.section-head p,
.hero p,
.prose p,
.rc-reason,
.intro-hero-text p,
.orient p { text-wrap: pretty; }

/* Een koppelteken is geen afbreekpunt in een functietitel of woord als "IT-er". */
h1, h2, h3, .section-head h2 { hyphens: manual; }

/* Twee banden met dezelfde achtergrond lopen visueel door: dan hoort er een gat te
   staan, geen dubbel gat. */
.section--white  + .section--white,
.section--grey   + .section--grey,
.section--petrol + .section--petrol,
.section--stat   + .section--stat { padding-top: var(--section-pad-y-tight); }

/* Precies vijf kaarten in vier kolommen liet er een alleen op de tweede rij staan, met een
   lege halve rij ernaast. Op een breed scherm passen ze op een regel. */
@media (min-width: 1100px) { .grid--five { grid-template-columns: repeat(5, 1fr); } }

/* ---- Voorbeeld-cv op /cv-opmaak -------------------------------------------
   Was een stockfoto van een cv op een bureau: je kon er niets op lezen, terwijl
   juist de INDELING het punt is (Matthew, 31-08). Nu uitgeschreven in HTML, dus
   scherp op elk scherm en leesbaar op mobiel. Rubrieken = die van de CV-checker. */
.cv-mock { background: #fff; box-shadow: 0 6px 20px rgba(2,39,51,.12); border: 1px solid var(--border-on-light);
  font-size: 12px; line-height: 1.45; color: var(--mm-black); }
.cv-mock-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  background: var(--mm-petrol); color: var(--mm-heading-light); padding: 16px 18px; }
.cv-mock-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.15; }
.cv-mock-title { margin: 2px 0 0; color: var(--mm-mint); font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.cv-mock-contact { margin: 0; padding: 0; list-style: none; text-align: right; color: var(--mm-on-dark-soft); font-size: 11px; }
.cv-mock-contact li { margin-bottom: 2px; }
.cv-mock-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; }
.cv-mock-main { padding: 16px 18px; }
.cv-mock-side { padding: 16px 18px; background: var(--surface-page); border-left: 1px solid var(--border-on-light); }
.cv-mock-block { margin-bottom: 14px; }
.cv-mock-block:last-child { margin-bottom: 0; }
.cv-mock-block h3, .cv-mock-block h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--mm-petrol);
  border-bottom: 2px solid var(--mm-mint); padding-bottom: 3px; }
.cv-mock-block p { margin: 0 0 6px; }
.cv-mock-block p:last-child { margin-bottom: 0; }
.cv-mock-job { margin-bottom: 10px; }
.cv-mock-job:last-child { margin-bottom: 0; }
.cv-mock-job-head, .cv-mock-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-weight: 600; }
.cv-mock-period { font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.cv-mock-job ul { margin: 4px 0 4px; padding-left: 16px; }
.cv-mock-job li { margin-bottom: 2px; }
.cv-mock-tools { color: var(--text-muted); font-size: 11px; }
.cv-mock-skill { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px !important; }
.cv-mock-dots { display: inline-flex; gap: 3px; flex: none; }
.cv-mock-dots i { width: 8px; height: 8px; background: var(--mm-grey-track); display: block; }
.cv-mock-dots i.on { background: var(--mm-mint); }
.cv-mock-legend { color: var(--text-muted); font-size: 10px; margin-top: 6px !important; }
@media (max-width: 900px) { .cv-mock-body { grid-template-columns: 1fr; }
  .cv-mock-side { border-left: 0; border-top: 1px solid var(--border-on-light); } }
/* Het voorbeeld is nu een blok met echte tekst: dat verdient meer breedte dan de oude 300px-foto. */
.cv-example { grid-template-columns: minmax(0, 2.1fr) minmax(230px, 1fr); gap: 28px; }
@media (max-width: 760px) { .cv-example { grid-template-columns: 1fr; } }

/* De zijkaart op een rol-pagina is een stuk hoger dan de tekst ernaast, waardoor er
   linksonder een groot leeg vlak in de donkere band stond (Matthew, 31-08). De tekst
   staat nu op ooghoogte met de kaart in plaats van bovenaan. */
@media (min-width: 861px) { .rol-hero-grid { align-items: center; } }

/* .cta-textlink is mint en werkt alleen op een donkere ondergrond. Op /over-ons staat
   hij los in een licht blok, en dan is mint op lichtgrijs 1,61:1: onleesbaar. Daar dus
   petrol. Let op de afbakening: .cta-block is zelf petrol en staat vaak BINNEN een
   lichte sectie, dus een regel op sectieniveau alleen zou de link daar onzichtbaar
   maken (petrol op petrol). Vandaar de directe koppeling aan .cta-actions in een licht
   blok dat geen .cta-block is. */
.section--grey  > .wrap > .cta-actions .cta-textlink,
.section--white > .wrap > .cta-actions .cta-textlink,
.section--grey  .about-tool .cta-actions .cta-textlink,
.section--white .about-tool .cta-actions .cta-textlink { color: var(--mm-petrol); }
.section--grey  > .wrap > .cta-actions .cta-textlink:hover,
.section--white > .wrap > .cta-actions .cta-textlink:hover,
.section--grey  .about-tool .cta-actions .cta-textlink:hover,
.section--white .about-tool .cta-actions .cta-textlink:hover { color: var(--mm-black); }

/* Vangnet voor koppen met een lang samengesteld woord: liever afbreken dan buiten
   het scherm lopen. */
h1, h2, h3 { overflow-wrap: break-word; }
.cv-example-note { margin: 14px 0 0; font-size: var(--fs-small); color: var(--text-muted); }

/* ============================================================
   Ronde 10 (Matthew, 02-09-2026)
   ============================================================ */

/* /spar: doorverwijzing naar artikelen in het rechterpaneel. */
.spar-blogs { display: grid; gap: 8px; margin-top: 12px; }
.spar-blog { display: block; padding: 10px 12px; background: #F1F4F4;
  border-left: 3px solid var(--mm-mint); text-decoration: none; min-height: 24px; }
.spar-blog:hover { background: #eaf1ef; }
.spar-blog-title { display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-small); color: var(--mm-petrol); line-height: 1.35; }
.spar-blog-meta { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); }

/* Keuzehulp: strook boven de wizard die zegt welke check je doet (5 vragen over één rol
   versus 9 vragen over je richting). Matthew, ronde 10. */
.wz-scope { background: var(--mm-petrol-deep, #011b24); color: var(--mm-on-dark-soft);
  padding: 12px 0; font-size: var(--fs-small); }
.wz-scope p { margin: 0; }
.wz-scope strong { color: var(--mm-heading-light); }
.wz-scope a { color: var(--mm-mint); text-decoration: underline; display: inline-block;
  min-height: 24px; padding: 2px 0; }

/* Blogkaart-afbeelding: stond op een vaste 160px hoogte, waardoor de 3:2-beelden op brede
   kaarten tot een derde werden weggesneden en het onderwerp niet meer herkenbaar was.
   Nu een vaste beeldverhouding, dus de uitsnede is op elk scherm gelijk en beperkt.
   Matthew, ronde 10. */
/* Ronde 13: de beelden zijn 3:2, dus een kader van 3:2 sneed er niets meer af. Op 16/9 viel
   16% van de hoogte weg. */
.blog-card-img { display: block; margin: -22px -22px 0; width: calc(100% + 44px);
  max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }
/* Link onder het artikelenblok op /spar: staat op een wit paneel, dus niet de mint
   .cta-textlink (die is voor donkere secties en haalt hier 1,95:1). */
.spar-blogs-all { display: inline-block; min-height: 24px; padding: 2px 0;
  color: var(--mm-petrol); font-weight: 700; font-family: var(--font-display);
  text-decoration: underline; text-underline-offset: 3px; }

/* Ruimte vooraf reserveren voor de door JS opgebouwde vergelijktabel (CLS). */
@media (min-width: 861px) {
  #ab-table-wrap { min-height: calc(var(--ab-rijen, 18) * 47px + 60px); }
}

/* Losse links (geen inline tekstlink in een zin) minimaal 24 px hoog als tikdoel,
   WCAG 2.2 AA 2.5.8. Gemeten: footerlinks 19 px, kruimelpad-terug 19 px, reviewlink 23 px. */
.footer-bottom a, .breadcrumb-back, .review-link { display: inline-flex; align-items: center; min-height: 24px; }