/*
 * MMC Demo — de sectielaag.
 *
 * Dit bestand is op 6 september 2026 EENMALIG samengesteld door
 * scripts/porteer-patronen.py, uit de veertien patronen die de swarm bouwde
 * toen de demo nog een los thema zou worden. Dat script is de migratie en
 * geen bouwstap: vanaf nu is DIT bestand de bron. Draai het script niet
 * opnieuw over deze map, want dan gaat elke correctie sindsdien verloren.
 *
 * Waarom dit bestand bestaat en niet 'eq-secties' heet: EQwise Base draagt een
 * eq-secties.css van 332 kB met 321 klassen, en dat is de sectiebibliotheek van
 * eqwise.nl. functions.php haalt die naam uit de keten en hangt deze erachter.
 * Twee bestanden met dezelfde klassenamen zouden elkaar stil overschrijven; nu
 * kan dat niet.
 *
 * Alle waarden komen uit theme.json (als --wp--preset--*) of uit tokens.css
 * (als --eq-*). Een hex of een px-lettergrootte in dit bestand is een fout,
 * geen variant.
 */

/* ---------- wat we uit eq-secties.css meenemen ----------
 * Drie regels uit de sectielaag van de base zijn niet EQwise-eigen maar
 * algemeen: zonder deze breekt elke site. Ze staan hier expliciet, zodat
 * zichtbaar is dat ze een besluit zijn en niet een restant.
 */

/* Een lange kop zonder spatie duwt anders de hele bak open. */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* Zonder dit staat er boven de eerste sectie een marge die niemand heeft gezet. */
main {
	margin-block-start: 0;
}

/* Beeld blijft binnen zijn bak. */
img {
	max-width: 100%;
	height: auto;
}

/* ---------- de sectiebak ----------
 * Sitebreedte plus kantlijn, zoals de bron. De layout uit theme.json doet dit
 * voor blokken die 'constrained' staan; deze regel vangt de secties die dat
 * niet zijn.
 */
/* De sectiebak. Sitebreedte plus kantlijn, plus het verticale ritme.
 *
 * De padding-block stond hier NIET, en dat is op 6 september 2026 gemeten:
 * 49 van de 49 sectieovergangen op vier pagina's stonden op 0 px, op zowel
 * 1440 als 390 — de secties plakten letterlijk tegen elkaar. De toelichting
 * verderop in dit bestand ging er wél van uit dat elke sectie zijn eigen
 * padding draagt, en daarom is de blokafstand van WordPress bewust op nul
 * gezet. Die aanname klopte niet: de marge was weg, de vervangende padding was
 * er nooit gekomen.
 *
 * 45 px is de dominante sectiepadding van de bron (14 keer gemeten, 25 px als
 * tweede waarde), en staat als --eq-sectie in tokens.css. */
.eq-section {
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie);
}

.eq-section > .eq-inner {
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

/* ===== card-grid ===== */
/*
 * Card grid — eqwise/card-grid
 * Uitsluitend eq-klassen en tokens uit tokens.md. Geen hex, geen px-lettergrootte.
 */

.eq-card-grid-header {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-2, 28px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground);
	margin-bottom: 1em;
}

.eq-card-grid-header em {
	font-style: italic;
	font-weight: 400;
}

.eq-card {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	padding: 1.5em;
	display: flex;
	flex-direction: column;
	row-gap: 0.75em;
}

.eq-card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.33;
	margin: 0;
}

.eq-card-title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.eq-card-text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.72;
	letter-spacing: 0.015em;
	color: var(--wp--preset--color--muted);
	margin: 0;
	flex-grow: 1;
}

.eq-card-meta {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 0.5em;
}

.eq-card-meta-item p {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.015em;
	color: var(--wp--preset--color--foreground);
	margin: 0;
	text-align: center;
}

.eq-card-action {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	margin: 0;
}

.eq-card-action a {
	color: var(--wp--preset--color--primary-hover);
	text-decoration: none;
}

.eq-card-action a:hover,
.eq-card-action a:focus {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.eq-card-grid {
		flex-direction: column;
	}
}

/* ===== cta-band ===== */
/*
 * CTA band — eqwise/cta-band
 * Uitsluitend eq-klassen en tokens uit tokens.md. Geen hex, geen px-lettergrootte.
 */

.eq-cta-band {
	background-color: var(--wp--preset--color--surface);
	align-items: center;
}

.eq-cta-band-media img {
	width: 100%;
	height: auto;
	display: block;
}

.eq-cta-band-action {
	text-align: center;
}

.eq-cta-band-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--button);
	font-weight: 700;
}

.eq-cta-band-cta .wp-block-button__link:hover,
.eq-cta-band-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-hover);
}

@media (max-width: 767px) {
	.eq-cta-band {
		flex-direction: column;
	}

	.eq-cta-band-media,
	.eq-cta-band-action {
		flex-basis: 100% !important;
	}
}

/* ===== hero ===== */
/*
 * Hero — eqwise/hero
 * Uitsluitend eq-klassen en tokens uit tokens.md. Geen hex, geen px-lettergrootte.
 *
 * Aanname (gemeld, niet geverifieerd): de tekstkleur op het beeld is hier op de
 * "background"-rol (wit) gezet omdat de sectie op een donker, kleurrijk beeld
 * staat. De echte computed kleur van MMC's hero-tekst kon niet gemeten worden
 * zonder mmclearning.com te benaderen, en dat mocht niet. Nameting nodig.
 */

.eq-hero {
	color: var(--wp--preset--color--background);
}

.eq-hero .wp-block-cover__inner-container {
	max-width: 40em;
	row-gap: 0.75em;
}

.eq-hero-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	margin: 0;
}

.eq-hero-lead {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.33;
	margin: 0;
}

.eq-hero-text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.72;
	letter-spacing: 0.015em;
	margin: 0;
	max-width: 45ch;
}

.eq-hero-actions {
	margin-top: 0.5em;
}

/*
 * Knop: waarden letterlijk uit tokens.md ("Knop primair"). De hoverkleur #f9c32d
 * had in de tokenlaag van de swarm geen eigen rol; in theme.json van dit childthema
 * is primary-hover precies die waarde, en primary-bevel het donkere #d9a105.
 */
.eq-hero-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--button);
	font-weight: 700;
}

.eq-hero-cta .wp-block-button__link:hover,
.eq-hero-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-hover);
}

@media (max-width: 767px) {
	.eq-hero .wp-block-cover__inner-container {
		max-width: 100%;
	}
}

/* ===== text-image ===== */
/*
 * Text + image — eqwise/text-image
 * Uitsluitend eq-klassen en tokens uit tokens.md. Geen hex, geen px-lettergrootte.
 * Vaste EQwise-regel: tekst links, beeld rechts; op mobiel blijft de
 * leesvolgorde tekst-dan-beeld (kolommen stapelen in DOM-volgorde, tekst staat
 * als eerste kind vóór het beeld).
 */

.eq-text-image-text {
	display: flex;
	flex-direction: column;
	row-gap: 0.75em;
}

.eq-text-image-lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.72;
	letter-spacing: 0.015em;
	color: var(--wp--preset--color--foreground);
	margin: 0;
}

.eq-text-image-text-body {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.72;
	letter-spacing: 0.015em;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.eq-text-image-media img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.eq-text-image {
		flex-direction: column;
	}

	.eq-text-image-text,
	.eq-text-image-media {
		flex-basis: 100% !important;
	}
}

/* ===== qualification-card ===== */
/*
 * eq-qualification-card
 * One course/qualification card (title, meta, description, facts row).
 * Structure is locked in the pattern (templateLock: contentOnly); this file only
 * styles typography and the facts-row layout — no structural CSS, no literal
 * colour or px font-size values, everything comes from tokens.
 */

.eq-qualification-card-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.eq-qualification-card-meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.eq-qualification-card-description {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--foreground);
}

.eq-qualification-card-facts {
	align-items: center;
}

.eq-qualification-card-duration,
.eq-qualification-card-price {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}

/* Below ~360px the three facts (duration, price, button) wrap onto their own
   lines via the block's flexWrap; nothing extra needed here to avoid overflow. */

/* ===== trust-badges ===== */
/*
 * eq-trust-badges
 * Small row of independent-review logos, off to the side under a hero.
 * No literal values needed: sizing comes from the image block's own
 * width/height attributes (200x29 / 200x40, copied from the source), the
 * gap between the two logos uses the flex group's own default block gap.
 */

.eq-trust-badges {
	align-items: center;
}

.eq-trust-badge img {
	height: auto;
	max-width: 100%;
}

/* ===== phase-diagram ===== */
/*
 * eq-phase-diagram — patroon B3, bron: mmclearning.com/ocean-ai/
 *
 * Bronmeting (headless Chrome, file:// op werk/bron/ocean-ai.html):
 * de sectie staat op een donkere achtergrond (foto + 85% zwarte overlay) met witte tekst,
 * drie gelijke kolommen zonder eigen kaartachtergrond of rand tussen de kolommen.
 * De foto-overlay (rgba(0,0,0,.85) over mmc-stormy-seas-lightbouse-painting.jpg) heeft geen
 * token in tokens.md/eq-tokens.css — zie eindrapport. Hier vervangen door de vlakke
 * --wp--preset--color--ink, wat dezelfde donkere indruk geeft zonder een letterlijke waarde.
 *
 * Alleen eq-tokens.css-variabelen; geen hex, geen rgb(), geen px-lettergrootte.
 */

.eq-phase-diagram {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--on-ink);
  padding-block: var(--wp--preset--spacing--60);
}

/* eq-tokens.css zet ".eq-root h1..h6 { color: var(--wp--preset--color--foreground) }" met specificiteit
   0,1,1 — hoger dan een losse klasse. Daarom hier bewust onder .eq-phase-diagram genest,
   zodat de kleur op deze donkere sectie wel degelijk wint. Geen wijziging aan eq-tokens.css. */
.eq-phase-diagram .eq-phase-diagram-title,
.eq-phase-diagram .eq-phase-diagram-intro {
  color: var(--wp--preset--color--on-ink);
}

.eq-phase-diagram-title {
  /* bronwaarde was een titel-widget op 40px/700, los van de h2-token (28px). Zie eindrapport:
     hier gehouden op de h2-token, niet de losse widgetwaarde. */
  margin-inline: auto;
  max-width: 40em;
}

.eq-phase-diagram-intro {
  /* regellengte-regel uit art-direction.md: bodytekst tussen 45 en 75 tekens */
  max-width: 60ch;
  margin-inline: auto;
}

.eq-phase-columns {
  gap: var(--wp--preset--spacing--40);
  margin-block-start: var(--wp--preset--spacing--50);
}

.eq-phase-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  padding-inline: var(--wp--preset--spacing--30);
}

.eq-phase-diagram .eq-phase-label {
  color: var(--wp--preset--color--on-ink);
  text-transform: uppercase;
}

.eq-phase-lead {
  color: var(--wp--preset--color--on-ink);
}

.eq-phase-steps {
  color: var(--wp--preset--color--on-ink);
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--15);
}

/* Bronmeting: het bolletje voor elke stap staat op #f2b714 = --wp--preset--color--primary, exacte match. */
.eq-phase-steps li {
  position: relative;
  padding-inline-start: var(--wp--preset--spacing--30);
}

.eq-phase-steps li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: var(--wp--preset--spacing--15);
  height: var(--wp--preset--spacing--15);
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
}

.eq-phase-cta {
  margin-block-start: auto;
  padding-block-start: var(--wp--preset--spacing--20);
  justify-content: center;
}

/* ===== self-selection ===== */
/*
 * eq-self-selection — patroon B3, bron: mmclearning.com/ocean-ai/
 *
 * Bronmeting (headless Chrome, file:// op werk/bron/ocean-ai.html): twee gelijke kolommen
 * naast elkaar, geen kaartachtergrond of rand — puur de checklist zelf maakt het verschil.
 * Vinkje voor "for you" staat op rgb(101,188,123) = #65bc7b = --wp--preset--color--success (exacte match).
 * Kruisje voor "not for you" staat op #e20000. Dat had in de tokenlaag van de swarm geen
 * rol en werd toen benaderd met muted-2. Het childthema kent die rol nu wel: theme.json
 * draagt "error" met precies de gemeten waarde, dus hier staat weer wat de bron toont.
 *
 * Alleen eq-tokens.css-variabelen; geen hex, geen rgb(), geen px-lettergrootte.
 */

.eq-self-selection {
  padding-block: var(--wp--preset--spacing--50);
}

.eq-self-selection-columns {
  gap: var(--wp--preset--spacing--50);
  margin-block-start: var(--wp--preset--spacing--40);
}

.eq-checklist {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.eq-checklist li {
  position: relative;
  padding-inline-start: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--foreground);
}

.eq-checklist li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
}

.eq-checklist-yes li::before {
  content: "\2713";
  color: var(--wp--preset--color--success);
  font-weight: var(--eq-weight-h3);
}

.eq-checklist-no li::before {
  content: "\2715";
  color: var(--wp--preset--color--error);
  font-weight: var(--eq-weight-h3);
}

/* ===== week-timeline ===== */
/*
 * eq-week-timeline — patroon B3, bron: mmclearning.com/ocean-ai/
 *
 * Bronmeting (headless Chrome, file:// op werk/bron/ocean-ai.html): drie gelijke kaarten in
 * een rij, kaartachtergrond #f9f9fb (= --wp--preset--color--surface, exacte match), rand rondom 3px
 * #f2b714 (= --wp--preset--color--primary, exacte match), padding 30px (= --eq-kant, exacte match),
 * hoekradius 15px (geen token in eq-tokens.css — zie eindrapport).
 *
 * Dit is een opeenvolging (Week 1 → Week 2 → Weken 3–4), geen vergelijkingstabel: drie kaarten
 * die je na elkaar leest, niet kolomsgewijs tegen elkaar afzet. Daarom een core/columns-rij en
 * geen <table> (zie geheugenregel tabellen-wanneer-en-hoe).
 *
 * Alleen eq-tokens.css-variabelen; geen hex, geen rgb(), geen px-lettergrootte.
 */

.eq-week-timeline {
  padding-block: var(--wp--preset--spacing--50);
}

.eq-week-columns {
  gap: var(--wp--preset--spacing--40);
  margin-block-start: var(--wp--preset--spacing--40);
}

.eq-week-card {
  background: var(--wp--preset--color--surface);
  border: calc(var(--eq-randdikte) * 3) solid var(--wp--preset--color--primary);
  padding: var(--eq-kant);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--15);
}

.eq-week-label {
  text-transform: uppercase;
  color: var(--wp--preset--color--foreground);
}

.eq-week-body {
  color: var(--wp--preset--color--foreground);
}

.eq-week-timeline-closing {
  margin-block-start: var(--wp--preset--spacing--40);
}

/* Geen horizontale overloop op 320px: de kolommen stapelen op de standaard WP-drempel
   (core/columns, 781px) en de kaart zelf heeft geen vaste breedte, alleen padding-tokens. */

/* ===== price-tier ===== */
/*
 * Patroon: price-tier — sectie "Choose your level" (ocean-ai)
 * Prijsniveau gekoppeld aan een verwachte uitkomst, niet aan een featurelijst: de
 * featurelijst blijft staan (echte MMC-inhoud, niet weggelaten), maar het "Expected
 * outcome"-regel is de zin die de kaart draagt en krijgt daarom de meeste nadruk
 * (grootste letter na de tiernaam, laatste regel voor de knop).
 *
 * Uitsluitend tokens uit tokens/eq-tokens.css (laag 1). Geen hex, geen rgb(), geen
 * font-size in px hier.
 */

.eq-price-tier-band {
  background-color: var(--wp--preset--color--ink);
  background-image: url('werk/beelden/2025-11-wavy-abstract-background.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  color: var(--wp--preset--color--on-ink);
  padding-block: var(--wp--preset--spacing--60);
}

.eq-price-tier-band .eq-price-tier-heading,
.eq-price-tier-band .eq-price-tier-name,
.eq-price-tier-band .eq-price-tier-audience,
.eq-price-tier-band .eq-price-tier-intro,
.eq-price-tier-band .eq-price-tier-label,
.eq-price-tier-band .eq-price-tier-list,
.eq-price-tier-band .eq-price-tier-outcome {
  color: var(--wp--preset--color--on-ink);
}

.eq-price-tier-heading {
  margin-block-end: var(--wp--preset--spacing--50);
}

.eq-price-tier-columns.eq-price-tier-columns {
  gap: 0;
  align-items: stretch;
}

.eq-price-tier {
  padding-inline: var(--wp--preset--spacing--50);
  text-align: center;
}

.eq-price-tier-name {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--eq-weight-display);
  letter-spacing: var(--eq-tracking-display);
  text-transform: uppercase;
  margin-block-end: var(--wp--preset--spacing--10);
}

.eq-price-tier-audience {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--subhead);
  font-weight: var(--eq-weight-h3);
  margin-block-end: var(--wp--preset--spacing--30);
}

.eq-price-tier-intro {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--eq-leading-body);
  margin-block-end: var(--wp--preset--spacing--30);
  text-align: start;
}

.eq-price-tier-label {
  font-weight: var(--eq-weight-label);
  margin-block-end: var(--wp--preset--spacing--15);
  text-align: start;
}

.eq-price-tier-list {
  list-style: none;
  margin: 0 0 var(--wp--preset--spacing--40);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--15);
  text-align: start;
}

.eq-price-tier-list li {
  position: relative;
  padding-inline-start: var(--wp--preset--spacing--40);
}

.eq-price-tier-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--primary);
  font-weight: var(--eq-weight-h1);
}

.eq-price-tier-outcome {
  font-size: var(--wp--preset--font-size--subhead);
  line-height: var(--eq-leading-body);
  margin-block-end: var(--wp--preset--spacing--40);
  text-align: start;
}

.eq-price-tier-cta {
  justify-content: center;
}

@media (max-width: 768px) {
  .eq-price-tier {
    padding-inline: 0;
  }
}

/* ===== stat-row ===== */
/*
 * Patroon: stat-row — sectie "Everything you get inside the mastermind" (ocean-ai),
 * de tweede op de pagina: bewijscijfers, niet de featuregrid met dezelfde kop ervoor.
 *
 * MMC toont hier VIJF cijfers, niet drie tot vier (zie eindrapport B4). Niet ingekort:
 * dat zou content weglaten, en dat doen we niet.
 *
 * Uitsluitend tokens uit tokens/eq-tokens.css (laag 1). Geen hex, geen rgb(), geen
 * font-size in px hier. De grid-minimumbreedte (22.5em) is afgeleid van de gemeten
 * kolombreedte op de bron (382,8px op 1440 breed / 16px basisletter = 23,9em, iets
 * naar beneden afgerond zodat drie kolommen op 1248px passen zoals op de bron).
 */

.eq-stat-row-band {
  background-color: var(--wp--preset--color--band);
  color: var(--wp--preset--color--on-ink);
  padding-block: var(--wp--preset--spacing--60);
}

.eq-stat-row-band .eq-stat-row-heading,
.eq-stat-row-band .eq-stat-row-label {
  color: var(--wp--preset--color--on-ink);
}

.eq-stat-row-heading {
  margin-block-end: var(--wp--preset--spacing--50);
}

.eq-stat-row.eq-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22.5em, 100%), 1fr));
  gap: var(--wp--preset--spacing--40);
  justify-items: center;
}

.eq-stat-row > * {
  margin-block-start: 0;
}

.eq-stat-row-item.eq-stat-row-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  max-width: 22.5em;
  width: 100%;
  margin: 0 auto;
}

.eq-stat-row-item > * {
  margin-block-start: 0;
}

.eq-stat-row-number {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: min(6em, 100%);
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--display);
  font-weight: var(--eq-weight-h1);
  line-height: var(--eq-leading-h1);
  margin: 0;
}

.eq-stat-row-label {
  margin: 0;
}

/* ===== site-footer ===== */
/*
 * Site footer — MMC Learning
 * Bron: fusion-footer op de homepage van mmclearning.com.
 * Alleen eq-klassen, alleen tokens. Zie eindrapport voor de tokens die nog ontbreken
 * (het exacte donkere voetvlak en de linkkleur hebben geen eigen rol in tokens.md;
 * hier gebruikt als de dichtstbijzijnde bestaande rol, "ink").
 */

.eq-site-footer {
	background-color: var(--wp--preset--color--footer);
}

.eq-site-footer-columns {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--40);
}

.eq-site-footer-column {
	flex: 1 1 0;
	min-width: 0;
}

.eq-site-footer-heading {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	color: var(--wp--preset--color--footer-heading);
	margin-bottom: var(--wp--preset--spacing--30);
}

.eq-site-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.eq-site-footer-list a {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--footer-link);
	text-decoration: none;
}

.eq-site-footer-list a:hover,
.eq-site-footer-list a:focus {
	color: var(--wp--preset--color--primary);
}

.eq-site-footer-list a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.eq-site-footer-bottom {
	background-color: var(--wp--preset--color--footer-bar);
}

.eq-site-footer-copyright {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--surface);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
	margin: 0;
}

.eq-site-footer-copyright a {
	color: var(--wp--preset--color--surface);
}

.eq-site-footer-copyright a:hover,
.eq-site-footer-copyright a:focus {
	color: var(--wp--preset--color--primary);
}

/* Vier kolommen naast elkaar vanaf tablet, gestapeld op telefoon */
@media (max-width: 767px) {
	.eq-site-footer-columns {
		flex-direction: column;
	}
}

/* ===== site-nav ===== */
/*
 * Site navigation — MMC Learning
 * Bron: fusion-secondary-header + fusion-header op de homepage van mmclearning.com.
 * Alleen eq-klassen, alleen tokens. Zie eindrapport voor de tokens die nog ontbreken.
 */

.eq-site-nav-login-bar {
	background-color: var(--wp--preset--color--foreground);
}

.eq-site-nav-login-row {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.eq-site-nav-login a {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.eq-site-nav-login a:hover,
.eq-site-nav-login a:focus {
	color: var(--wp--preset--color--primary);
}

.eq-site-nav-main-bar {
	background-color: var(--wp--preset--color--foreground);
}

.eq-site-nav-main-row {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.eq-site-nav-logo img {
	height: auto;
	max-width: 100%;
}

.eq-site-nav-main a {
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.eq-site-nav-main a:hover,
.eq-site-nav-main a:focus {
	color: var(--wp--preset--color--primary);
}

.eq-site-nav-main a.eq-site-nav-cta {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--button);
	font-weight: 700;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.eq-site-nav-main a.eq-site-nav-cta:hover,
.eq-site-nav-main a.eq-site-nav-cta:focus {
	background-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--foreground);
}

/* Focus zichtbaar houden op donkere balk, ook als het bronontwerp dat niet had */
.eq-site-nav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Op smalle schermen stapelt de hoofdrij; core/navigation regelt de uitklap zelf */
@media (max-width: 767px) {
	.eq-site-nav-main-row {
		flex-wrap: wrap;
	}
}

/* ===== world-map ===== */
/*
 * World map with community — MMC Learning
 * Bron: fusion-builder-row-6 op de homepage van mmclearning.com (donkere band met
 * "Mapping Our Community" en de wereldkaartafbeelding eronder, links uitgelijnd,
 * kaart gecentreerd binnen de kolom omdat hij smaller is dan de sitebreedte).
 */

.eq-world-map {
	background-color: var(--wp--preset--color--foreground);
}

.eq-world-map-inner {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.eq-world-map-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3, 22px);
	color: var(--wp--preset--color--surface);
	text-align: left;
	margin-bottom: var(--wp--preset--spacing--30);
}

.eq-world-map-image {
	text-align: center;
	margin: 0;
}

.eq-world-map-image img {
	max-width: 100%;
	height: auto;
}

/* ===== promobanner =====
 * Eén systeem voor elke promotiebanner, zodat de volgende erin past zonder
 * nieuwe regels.
 *
 * DE VORM, na drie rondes met Martin op 6 september 2026:
 *   - het beeld houdt zijn eigen breedte en wordt NIET opgerekt;
 *   - de band eromheen loopt van vensterrand tot vensterrand;
 *   - wat links en rechts overblijft is zwart.
 *
 * Waarom niet oprekken: het summit-beeld is 1248 breed en het brush-beeld
 * 1200. Naar 1440 trekken is opschalen en dat kost scherpte. De bron doet het
 * ook niet — daar staan ze op 1248 en 1024, gemeten op de offline spiegel met
 * het domein geblokkeerd.
 *
 * Waarom zwart en niet wit: dat is een keuze van Martin. De bron zet ze op wit
 * (elke laag boven het beeld heeft rgba(0,0,0,0), body #ffffff). De reden om af
 * te wijken is dat beide bannerbeelden zelf bijna zwart zijn en op wit als een
 * losse rechthoek in de pagina hangen.
 *
 * HOE DE BAND DE VOLLE BREEDTE HAALT. Zonder truc. Doordat
 * templates/page.html main en post-content op layout "default" zet, is
 * post-content zelf al zo breed als het venster — gemeten 1440 bij een venster
 * van 1440, zonder marge en zonder padding. Een blok daarin loopt dus vanzelf
 * van rand tot rand.
 *
 * Er stond hier eerst een negatieve marge ter grootte van de kantlijn, naar
 * analogie van wat WordPress voor alignfull doet. Dat was fout en het is
 * gemeten: de band werd 1500 breed op een venster van 1440 en de pagina schoof
 * horizontaal. Onder een "constrained" ouder was die marge nodig geweest,
 * onder "default" is hij dubbelop. Zet hem niet terug zonder de
 * documentbreedte na te meten.
 */

.eq-banner,
.eq-home-banner {
	background-color: var(--wp--preset--color--banner);
	padding-inline: var(--eq-kant);
	padding-block: var(--wp--preset--spacing--50);

	/* Geen witruimte tussen twee banden. WordPress zet de blokafstand met een
	 * regel in :where(), en die weegt nul, dus deze klasse wint zonder
	 * !important. Zonder deze nul staat er een witte streep van --eq-stap
	 * tussen elke twee banden, en dat is precies wat er op de kloon te zien
	 * was terwijl de bron één doorlopend vlak toont. */
	margin-block: 0;
}

.eq-banner-beeld {
	margin-block: 0;
}

/* Het beeld: eigen breedte, gecentreerd, plafond op de inhoudsbreedte. Een
 * beeld van 1024 blijft dus 1024 en een beeld van 2000 zakt naar 1248. */
.eq-banner-beeld img,
.eq-home-banner img {
	display: block;
	width: auto;
	max-width: min(100%, var(--eq-kolom));
	height: auto;
	margin-inline: auto;
}

/* De uitzondering, voor een banner die de volle breedte juist wél moet vullen. */
.eq-banner-vullend .eq-banner-beeld img,
.eq-banner-beeld.eq-banner-vullend img {
	width: 100%;
	max-width: none;
}

.eq-banner-actie {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ==================================================================
 * Correcties uit de meetronde van 6 september 2026.
 *
 * Gemeten en aangeleverd door de parallelle sessie, die ze eerst rechtstreeks
 * op de site had gezet omdat ze twee keer wegvielen bij een upload van mij.
 * Vanaf nu staan ze hier, en is dit bestand de enige bron.
 *
 * Elke regel komt uit een meting, met het cijfer erbij. Niets is naar smaak
 * gezet. Punt 5 uit haar blok — max-width op het logo — is bewust NIET
 * overgenomen: dat was een vangnet voor het lokale pad in header.html, en dat
 * pad wijst sinds 1.0.1 naar de mediabibliotheek.
 * ================================================================== */

/* ---- 1. Menukleur. Gemeten: #333333 op een #333333 balk, dus onleesbaar. ----
 * WordPress' style.min.css schrijft .wp-block-navigation-item__content TWEE
 * KEER in dezelfde selector om specificiteit te kopen — (0,3,0) — en zet daar
 * color: inherit. Onze regel zat op (0,2,1) en verloor, ook al stond hij
 * laatst. Dezelfde verdubbeling lost het op. */
.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-ink);
	font-family: var(--wp--preset--font-family--meta);
	font-size: var(--eq-t-menu);
	font-weight: 400;
	letter-spacing: normal;
}

.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}

.eq-site-nav-login a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--border-light);
}

/* Tussenruimte: de bron houdt 35px aan, wij stonden op 24px. */
.eq-site-nav-main.wp-block-navigation {
	gap: 35px;
}

/* ---- 2. Mobiel menu. Gemeten op 375px: wit op wit, tapdoelen 19px. ----------
 * De overlaygrond wint van style.min.css' `.wp-block-navigation:not(.has-background) …`,
 * die (0,4,0) weegt — de klasse binnen :not() telt mee. Vijf klassen tilt ons
 * naar (0,5,0). Geen !important nodig. */
.eq-site-nav-main.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	background-color: var(--wp--preset--color--band);
	color: var(--wp--preset--color--on-ink);
	padding: var(--wp--preset--spacing--30, 24px);
}

.eq-site-nav-main .wp-block-navigation__responsive-container.is-menu-open
	a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	min-height: 44px;
	line-height: 44px;
	padding-inline: 8px;
	color: var(--wp--preset--color--on-ink);
}

/* De tapdoelen van de hamburger en de sluitknop op 44px, MAAR zonder ze
 * zichtbaar te maken waar ze niet horen. `display: inline-flex` stond hier
 * eerst zonder mediaquery, en dat overschreef de `display: none` waarmee
 * WordPress de hamburger op desktop verbergt: hij stond op 1200 breed naast
 * het gewone menu. Maat en kleur mogen altijd; zichtbaarheid alleen op de
 * breedte waar het overlaymenu geldt, en dat is onder 600px. */
.eq-site-nav-main .wp-block-navigation__responsive-container-open,
.eq-site-nav-main .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--on-ink);
}

@media (max-width: 768px) {
	.eq-site-nav-main .wp-block-navigation__responsive-container-open,
	.eq-site-nav-main .wp-block-navigation__responsive-container-close {
		display: inline-flex;
	}
}

.eq-site-nav-main .wp-block-navigation__responsive-container-open:focus-visible,
.eq-site-nav-main .wp-block-navigation__responsive-container-close:focus-visible,
.eq-site-nav-main .is-menu-open a.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---- 3. Herotekst. Gemeten 1,00:1 — wit op wit, vier blokken onzichtbaar. ---
 * Het hero-patroon zet witte tekst omdat de bron daar een donkere grond onder
 * heeft. De gebouwde pagina's zetten het beeld ONDER de tekst, dus die staat op
 * wit. Zolang de sectie geen eigen donkere grond draagt krijgt de tekst de
 * tekstkleur van de site.
 *
 * Structureel hoort de tekst ÓVER het beeld, zoals de bron. Dat is een
 * wijziging in het hero-patroon en staat als open punt in LEESMIJ.md. */
.eq-hero:not(.has-background) .eq-hero-lead,
.eq-hero:not(.has-background) .eq-hero-eyebrow,
.eq-hero:not(.has-background) .eq-hero-text p {
	color: var(--wp--preset--color--foreground);
}

.eq-hero:not(.has-background) .eq-hero-lead {
	font-weight: 700;
}

/* ---- 4. Kaartlinks. Gemeten op de bron: cyaan #00AEDE, niet goud. -----------
 * Goud is op de bron het knopVLAK van "See Details", niet de kleur van
 * linktekst. De kleur staat als rol `link` in theme.json.
 *
 * Het contrast blijft 2,59:1 en haalt de WCAG-vloer niet. Dat is MMC's eigen
 * keuze en die nemen we over; hij staat als bevinding in de verbeterpunten. */
.eq-card-action a,
.eq-card-title a {
	color: var(--wp--preset--color--link);
	text-decoration: none;
}

.eq-card-action a:hover,
.eq-card-title a:hover {
	text-decoration: underline;
}

/* ---- 6. De witte streep tussen de inlogbalk en de menubalk. ----------------
 * Gemeten op 1440 en op 390, allebei 24 px. Beide balken staan op #333333,
 * maar .eq-site-nav zelf is doorzichtig, en tussen de twee balken zet
 * WordPress zijn blokafstand van --eq-stap (24px) als margin-top op de
 * tweede. Je keek dus door die 24 px heen naar het witte paginavlak.
 *
 * Twee dingen, en allebei met opzet:
 *   - de afstand gaat naar nul, want de kopbalk van de bron is één doorlopend
 *     vlak en geen twee losse balken;
 *   - de kopbalk krijgt zelf de donkere grond, zodat een toekomstige afstand
 *     hier nooit meer wit oplevert maar hooguit onzichtbaar is.
 *
 * De blokafstandregel van WordPress staat in :where() en weegt nul, dus deze
 * klasse wint zonder !important.
 */
.eq-site-nav {
	background-color: var(--wp--preset--color--band);
}

.eq-site-nav > * {
	margin-block: 0;
}

/* ---- 7. De kopbalk zoals de bron hem heeft --------------------------------
 * Vier dingen, alle vier gemeten op de offline spiegel bij venster 1440 met
 * het domein geblokkeerd. Geen ervan is naar smaak gezet.
 */

/* De gouden lijn onder de kop. Gemeten: header.fusion-header-wrapper draagt
 * border-bottom 3px rgb(242, 183, 20) over de volle breedte, en de sectie
 * eronder herhaalt hem als border-top. Wij zetten hem één keer, onderaan de
 * kop. */
.eq-site-nav {
	border-bottom: 3px solid var(--wp--preset--color--primary);
}

/* De tagline. Gemeten: h3.fusion-header-tagline, rgb(249, 195, 45) — dat is
 * onze rol primary-hover — 16px Roboto Condensed op gewicht 500, geen
 * letterspatie, geen hoofdletters, rechts in de kopbalk boven het menu
 * (top 60, links 837, breed 497). */
.eq-site-nav-rechts {
	gap: var(--wp--preset--spacing--10);
	align-items: flex-end;
}

.eq-site-nav-tagline {
	margin: 0;
	color: var(--wp--preset--color--primary-hover);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-6, 16px);
	font-weight: 500;
	line-height: var(--eq-leading-body-ui);
	text-align: right;
}

/* Het menu-accent. Gemeten op de bron: elke menulink draagt
 * border-width: 3px 0 0 — een balk van 3px boven de link, in rust doorzichtig.
 * Dat is Avada's "bar highlight".
 *
 * De kleur stond hier eerst als gefundeerde keuze. Ze is nu GEMETEN, uit
 * Avada's variabelenblok in de inline CSS van de bronpagina zelf:
 *   --menu_hover_first_color: #f2b714
 * en die kleur draagt TWEE eigenschappen tegelijk. Zowel
 *   .fusion-main-menu>ul>li>a:hover { border-color: … }
 * als
 *   .fusion-main-menu>ul>li>a:hover { color: … }
 * De actieve pagina krijgt in .current-menu-item>a exact hetzelfde paar. Streep
 * én letter worden dus goud; alleen de streep is te weinig. */
.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	border-top: 3px solid transparent;
	padding-block: 8px;
	transition: border-color 120ms ease, color 120ms ease;
}

.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.eq-site-nav-main .current-menu-item > a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.eq-site-nav-main .current_page_item > a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"] {
	border-top-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* "Become a Member" is op de bron geen link maar een gouden pil. Gemeten aan
 * span.menu-text.fusion-button: radius 15px, padding 9px 20px, tekstkleur
 * rgb(51, 51, 51), hoogte 32, breedte 151.
 *
 * De vulling is nu ook gemeten, uit hetzelfde variabelenblok:
 *   --button_gradient_top_color / bottom: #f2b714      (gelijk, dus VLAK)
 *   --button_gradient_top_color_hover / bottom: #f9c32d (lichter bij hover)
 *   --button_accent_color / hover: #333333             (tekst blijft gelijk)
 * Er is dus geen verloop. aannames.md stond hier fout op met "pil met gradient
 * naar #ed6325"; dat is inmiddels rechtgezet. Contrast nagerekend: 6,95:1 in
 * rust en 7,74:1 bij hover, allebei ruim AA. */
.eq-site-nav-main .eq-site-nav-cta a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.eq-site-nav-main a.eq-site-nav-cta.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-top-color: transparent;
	border-radius: 15px;
	padding: 9px 20px;
}

.eq-site-nav-main .eq-site-nav-cta a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.eq-site-nav-main a.eq-site-nav-cta.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--on-primary);
	border-top-color: transparent;
}


/* ---- 8. De iconen in het hoofdmenu ----------------------------------------
 * Gemeten op de bron: elk menulabel heeft een Font Awesome 5 Solid-icoon
 * ervoor, 14 px, wit, en per item een ander:
 *
 *   Start Here      fa-map-marker-alt        AI Masterplan   fa-bullseye
 *   Qualifications  fa-chalkboard-teacher    Events          fa-calendar-alt
 *   AI Courses      fa-bolt                  Reviews         fa-comments
 *   AI For Teams    fa-users
 *
 * "Become a Member" heeft er geen; dat is op de bron een knop.
 *
 * Hier staan ze als hertekende SVG's in een masker, niet als de glyphs zelf.
 * Font Awesome meenemen kost 75 kB of meer aan lettertype plus stylesheet, en
 * deze site draait op 42 kB CSS en één script — dan is een bibliotheek voor
 * zeven tekentjes niet te verdedigen. Als masker pakt het icoon currentColor
 * en kleurt hij dus mee: wit in rust, goud bij hover en op de actieve pagina.
 *
 * Dit is dus een AFWIJKING van de bron in vorm, niet in plaats, maat of kleur.
 */

.eq-site-nav-main a.wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-inline-end: 7px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* De knop draagt geen icoon. */
.eq-site-nav-main .eq-site-nav-cta a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-site-nav-cta.wp-block-navigation-item__content::before {
	content: none;
}

.eq-site-nav-main .eq-ico-pin a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-pin.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a7%207%200%2000-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%2000-7-7zm0%209.5a2.5%202.5%200%20110-5%202.5%202.5%200%20010%205z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a7%207%200%2000-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%2000-7-7zm0%209.5a2.5%202.5%200%20110-5%202.5%202.5%200%20010%205z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-site-nav-main .eq-ico-bord a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-bord.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M2%203h20v12H2V3zm5%2015a3%203%200%20016%200v3H7v-3zm3-6a2.2%202.2%200%20110%204.4%202.2%202.2%200%20010-4.4z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M2%203h20v12H2V3zm5%2015a3%203%200%20016%200v3H7v-3zm3-6a2.2%202.2%200%20110%204.4%202.2%202.2%200%20010-4.4z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-site-nav-main .eq-ico-bliksem a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-bliksem.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M13%202%204%2014h6l-1%208%209-12h-6z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M13%202%204%2014h6l-1%208%209-12h-6z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-site-nav-main .eq-ico-mensen a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-mensen.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%2011a3%203%200%20110-6%203%203%200%20010%206zm8%200a3%203%200%20110-6%203%203%200%20010%206zM2%2019c0-3.3%202.7-5%206-5s6%201.7%206%205H2zm12.5-4.8c2.4.5%204.5%202%204.5%204.8h-4c0-1.9-.2-3.5-.5-4.8z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%2011a3%203%200%20110-6%203%203%200%20010%206zm8%200a3%203%200%20110-6%203%203%200%20010%206zM2%2019c0-3.3%202.7-5%206-5s6%201.7%206%205H2zm12.5-4.8c2.4.5%204.5%202%204.5%204.8h-4c0-1.9-.2-3.5-.5-4.8z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-site-nav-main .eq-ico-roos a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-roos.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm0%203a7%207%200%20110%2014%207%207%200%20010-14zm0%203.5a3.5%203.5%200%20100%207%203.5%203.5%200%20000-7z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%20100%2020%2010%2010%200%20000-20zm0%203a7%207%200%20110%2014%207%207%200%20010-14zm0%203.5a3.5%203.5%200%20100%207%203.5%203.5%200%20000-7z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-site-nav-main .eq-ico-kalender a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-kalender.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%202v2h10V2h2v2h2v18H2V4h3V2h2zm13%207H4v11h16V9z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%202v2h10V2h2v2h2v18H2V4h3V2h2zm13%207H4v11h16V9z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-site-nav-main .eq-ico-gesprek a.wp-block-navigation-item__content::before,
.eq-site-nav-main a.eq-ico-gesprek.wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%204h13v9H7l-4%203V4zm15%204h3v12l-3-2H9v-2h9V8z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%204h13v9H7l-4%203V4zm15%204h3v12l-3-2H9v-2h9V8z%27%2F%3E%3C%2Fsvg%3E");
}

/* ---- 9. De Google-reviewgraphic in de kop ---------------------------------
 * Gemeten op de bron: staat ín de kopbalk, rechts (top 91, links 1149, dus
 * onder de tagline en boven de menurij) en linkt naar /google-reviews. Het
 * bestand is 200x29.
 */
.eq-site-nav-reviews {
	margin-block: 0;
}

.eq-site-nav-reviews img {
	display: block;
	width: 200px;
	height: auto;
}

/* ---- 10. Het menu op een eigen rij ----------------------------------------
 * Gemeten op de bron: tagline top 60, reviewgraphic top 91, menu top 307. Het
 * menu staat daar dus onder het logo en niet ernaast. Toen het bij ons wél
 * ernaast stond, paste de rij niet en zakte "Become a Member" naar een eigen
 * regel — dat was geen ontwerpkeuze maar plaatsgebrek.
 */
.eq-site-nav-menu-row {
	margin-block-start: var(--wp--preset--spacing--20);
}

.eq-site-nav-menu-row .eq-site-nav-main {
	width: 100%;
	justify-content: flex-start;
}

/* Het logo op zijn gemeten maat. Zonder deze regel krimpt hij mee met de
 * flexrij: gemeten 118x42 terwijl de bron 175x62 toont (bestand 2500x889). */
.eq-site-nav-logo img {
	width: 175px;
	height: auto;
	max-width: none;
}


/* ---- 11. De 24px naad tussen secties, en de witte strook boven de voet -----
 * Gemeten door de meetagent over zes pagina's op 1440 en 390, in twee
 * onafhankelijke passen:
 *
 *   - tussen elk paar opeenvolgende secties in .entry-content staat 24px;
 *   - tussen de laatste sectie en de voet staat 24px;
 *   - op / en /ocean-ai/ is die naad ZICHTBAAR WIT, omdat de laatste sectie
 *     donker is (#333333) en de voet ook (#363839), terwijl main, footer en
 *     .wp-site-blocks alle drie doorzichtig zijn en de body wit is.
 *
 * Oorzaak: WordPress' flow-regel
 *   :root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap) }
 * met blockGap op --eq-stap (24px). Voor de kopbalk stond die tegenregel er al;
 * voor de inhoud en de voet niet.
 *
 * Waarom nul en niet een kleinere waarde: elke sectie draagt zijn eigen
 * padding-block (--eq-sectie, 45px gemeten op de bron). De 24px kwam daar
 * bovenop en was dus dubbele ruimte, geen ritme. Zet je hem terug, meet dan
 * eerst of de sectie zelf geen eigen padding heeft.
 */
.entry-content > * {
	margin-block: 0;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}


/* ---- 12. De knop recht in de menurij --------------------------------------
 * Gemeten: de zeven gewone items staan op top 122, de pil op 121. De gewone
 * link draagt een balk van 3px plus 8px padding-block; de pil draagt 9px/20px
 * en geen balk. Twee verschillende doosjes in één rij dus.
 *
 * De rij lijnt nu op het midden uit, en de pil houdt dezelfde onzichtbare balk
 * van 3px zodat beide even hoog zijn. Niet met een marge corrigeren: dan
 * verschuift hij weer zodra de menumaat verandert.
 */
.eq-site-nav-main .wp-block-navigation__container,
.eq-site-nav-main ul {
	align-items: center;
}

.eq-site-nav-main .eq-site-nav-cta,
.eq-site-nav-main a.eq-site-nav-cta {
	display: flex;
	align-items: center;
}

.eq-site-nav-main .eq-site-nav-cta a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.eq-site-nav-main a.eq-site-nav-cta.wp-block-navigation-item__content {
	border-top: 3px solid transparent;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}


/* ---- 13. De maten van de menurij, op de pixel ------------------------------
 * Gemeten, bron naast kloon, venster 1440:
 *
 *                              bron    kloon (voor)
 *   menu-item hoog              40 px   38 px
 *   onderkant menu -> goud      16 px    0 px
 *
 * Beide staan nu op de bronwaarde. De itemhoogte komt uit een min-height op de
 * link zelf en niet uit padding: dan blijft hij 40 ook als de lettergrootte
 * ooit verandert, en blijft het icoon verticaal gecentreerd.
 */
/* De ruimte staat als padding op de BALK en niet als marge op de rij: een marge
 * klapt weg tegen de onderrand van een ouder zonder padding, en dan meet je nul
 * terwijl de regel er staat. Dat is precies wat de nameting van 1.1.7 liet
 * zien. */
.eq-site-nav-main-bar {
	padding-block-end: 16px;
}

/* box-sizing: border-box, anders komt min-height BOVENOP de padding en de balk
 * van 3px en wordt het item 59 in plaats van 40. Ook gemeten in 1.1.7. */
.eq-site-nav-main a.wp-block-navigation-item__content.wp-block-navigation-item__content {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-block: 0;
}


/* ---- 14. De knop gelijk aan de bron, op elke breedte -----------------------
 * Gemeten op 1440, 1024, 768 en 390, bron naast kloon:
 *
 *   eigenschap      bron       kloon (voor)
 *   lettertype      PT Sans    Open Sans
 *   lettergrootte   14px       15px
 *   hoogte          32         40
 *   breedte         151        172
 *   rand            geen       3px doorzichtig boven
 *   zichtbaar tot   768        600
 *
 * De pil is op de bron 32 hoog IN een link van 40: hij is dus kleiner dan de
 * rij en staat daarin gecentreerd. Vandaar min-height 32 en geen balk — de
 * uitlijning komt van de flexrij, niet van een onzichtbare rand.
 */
.eq-site-nav-main .eq-site-nav-cta a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.eq-site-nav-main a.eq-site-nav-cta.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--button);
	font-size: var(--eq-t-knop);
	font-weight: 400;
	min-height: 32px;
	border: 0;
}

/* Het breekpunt van het mobiele menu. De bron schakelt bij 768, wij stonden op
 * 600: tussen die twee breedtes stond het hele menu uitgeklapt terwijl de bron
 * al een hamburger toont. WordPress' eigen regels staan in :where() en wegen
 * nul, dus deze klassenregels winnen zonder !important. */
@media (max-width: 768px) {
	.eq-site-nav-main .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.eq-site-nav-main .wp-block-navigation__responsive-container-open {
		display: inline-flex;
	}
}


/* ---- 15. De hero: tekst óver het beeld ------------------------------------
 * Op de bron is de hero één donkere band met het beeld rechts en de tekst
 * eroverheen: een gouden kop en een witte alinea. Bij ons stonden tekst en
 * beeld als broers ONDER elkaar, met een wit vlak van honderden pixels ertussen
 * — dat is wat Martin op /reviews/ zag.
 *
 * De markup blijft zoals hij is; het is een opmaakkwestie. `:has()` maakt dat
 * mogelijk: alleen een hero die ook een beeld bevat wordt een overlay. Een hero
 * zonder beeld blijft gewoon tekst op de paginakleur, en dat is precies wat de
 * contrastreparatie eerder verlangde.
 */
.eq-hero:has(.eq-hero-media) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--wp--preset--color--band);
	align-items: center;
	padding-block: 0;
	padding-inline: 0;
}

/* Het beeld vult de band en staat rechts, zoals op de bron. */
.eq-hero:has(.eq-hero-media) > .eq-hero-media {
	margin: 0;
	width: 100%;
}

.eq-hero:has(.eq-hero-media) > .eq-hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* De tekst staat NAAST het beeld, niet eroverheen. Gemeten op de
 * volledige-paginaafdruk van de bron: links een donker vlak met de tekst,
 * rechts het beeld tot aan de rechterrand. In 1.3.1 stond hier een overlay;
 * dat was dichterbij dan onder elkaar, maar nog steeds niet wat de bron doet —
 * en op qualifications viel de kop precies over het lichtste deel van het
 * beeld. */
/* De tekst in de hero begint op dezelfde lijn als het menu. Niet op de
 * kantlijn van 30, maar op de inzet — anders staat de kop 66 px links van het
 * eerste menu-item. */
.eq-hero:has(.eq-hero-media) > .eq-hero-text {
	padding-block: var(--eq-sectie);
	padding-inline-start: var(--eq-inzet);
	padding-inline-end: var(--wp--preset--spacing--40);
	max-width: none;
	margin-inline: 0;
}

/* Op de band is de tekst wit en de kop goud. Dit heft de eerdere
 * contrastreparatie op, en dat mag hier: die gold voor een hero ZONDER eigen
 * donkere grond, en deze heeft er een. */
.eq-hero:has(.eq-hero-media) .eq-hero-text p,
.eq-hero:has(.eq-hero-media) .eq-hero-text li {
	color: var(--wp--preset--color--on-ink);
}

.eq-hero:has(.eq-hero-media) .eq-hero-lead,
.eq-hero:has(.eq-hero-media) h1.eq-hero-lead {
	color: var(--wp--preset--color--primary-hover);
}

/* Op een telefoon past tekst naast beeld niet: daar gaat de tekst weer boven
 * het beeld staan, met dezelfde donkere band eronder zodat hij leesbaar blijft. */
@media (max-width: 768px) {
	.eq-hero:has(.eq-hero-media) {
		grid-template-areas: "tekst" "beeld";
		align-items: stretch;
	}

	.eq-hero:has(.eq-hero-media) > .eq-hero-text {
		grid-area: tekst;
		max-width: none;
	}

	.eq-hero:has(.eq-hero-media) > .eq-hero-media {
		grid-area: beeld;
	}
}


/* ---- 16. Wat de schermafdrukken van de bron nog lieten zien ----------------
 * Vergeleken op de volledige-paginaafdrukken van 6 september 2026, bron naast
 * kloon, 1440 breed.
 */

/* De kaartgroep staat op de bron op een gevuld GOUD PANEEL met ronde hoeken;
 * de witte kaarten liggen daarop. Bij ons zweefden ze op wit, en dat is het
 * sterkste visuele kenmerk van die pagina. */
/* Het gouden paneel blijft binnen de inhoudskolom en lijnt dus uit op de
 * menubalk. Liep eerder van vensterrand tot vensterrand, en dat was het
 * verschil dat in één oogopslag te zien was. */
/* Het gouden paneel, op de waarden van de bron (div.fusion-column-wrapper):
 * de LICHTERE goudtint #F9C32D, radius 15, padding 30 boven / 45 opzij / 0
 * onder — de kaarten dragen hun eigen ondermarge, dus het vlak sluit strak af.
 * Breedte 1248: binnen de inhoudskolom, uitgelijnd op de menubalk. */
.eq-card-grid-section {
	background-color: var(--wp--preset--color--primary-hover);
	border-radius: 15px;
	padding: var(--wp--preset--spacing--40) 45px 0;
	margin-block: var(--wp--preset--spacing--30);
	margin-inline: auto;
	max-width: var(--eq-kolom);
}

/* De kaart op de bronwaarden: radius 15 en een rand van 5 px in hetzelfde
 * donkergrijs als de voetbalk. Die dikke rand is wat de kaart zijn contour
 * geeft op het goud; met 1 px lichtgrijs valt hij weg. */
.eq-card-grid-section .eq-card {
	background-color: var(--wp--preset--color--background);
	border: 5px solid var(--wp--preset--color--foreground);
	border-radius: 15px;
	padding: var(--wp--preset--spacing--15);
	margin-block-end: var(--wp--preset--spacing--40);
	overflow: hidden;
}

/* De sectiekop draagt op de bron een gouden verticale streep links en is
 * groter. Op het gouden paneel wordt die streep juist donker, anders is hij
 * onzichtbaar. */
.eq-card-grid-header {
	border-inline-start: 4px solid var(--wp--preset--color--primary);
	padding-inline-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--h-2, 28px);
}

.eq-card-grid-section .eq-card-grid-header {
	border-inline-start-color: var(--wp--preset--color--foreground);
}

/* De kaart heeft op de bron een DONKERE VOETBALK met drie cellen: duur, prijs
 * en de actie. Bij ons stond de actie als losse cyaan link ONDER de kaart,
 * buiten het kader, en hoorde daardoor visueel bij niets. */
.eq-card .eq-card-meta,
.eq-card .eq-card-action {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
	padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--20);
}

.eq-card .eq-card-action {
	border-block-start: 1px solid rgb(255 255 255 / 0.15);
}

.eq-card .eq-card-action a {
	color: var(--wp--preset--color--on-ink);
}

/* De tekst in de balk moet mee. `.eq-card-meta-item p` hierboven zet de
 * donkere tekstkleur met specificiteit (0,2,1) en wint anders van de balk —
 * gemeten op de gerenderde pagina, niet aangenomen. En de lichte randen van de
 * oude opmaak moeten weg, want die vielen als streep in het donkere vlak. */
.eq-card .eq-card-meta {
	border-block: 0;
}

.eq-card .eq-card-meta .eq-card-meta-item p {
	color: var(--wp--preset--color--on-ink);
}

/* De voet: op de bron staan de vier kolommen op gelijke hoogte naast elkaar.
 * Bij ons begon "Courses" halverwege, waardoor de voet scheef oogde. */
.eq-site-footer-kolommen,
.eq-site-footer .wp-block-columns {
	align-items: flex-start;
}

.eq-site-footer .wp-block-column {
	flex-basis: 25%;
}


/* ---- 17. De voetbalk van de kaart, op de bronwaarden -----------------------
 * Op de bron is dit ÉÉN balk met drie gelijke cellen naast elkaar: duur,
 * prijs, actie. Hoogte 46, padding 5/12, radius alleen onderaan, 13 px op
 * gewicht 400.
 *
 * Bij ons stonden het er twee ónder elkaar — meta 52 px en actie 53 px, samen
 * 105. Dat is 59 px extra per kaart, en zeventien kaarten op één pagina maken
 * daar ruim duizend pixels paginahoogte van. De actie is nu de derde cel van
 * dezelfde balk in plaats van een broer eronder.
 */
.eq-card .eq-card-meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	min-height: 46px;
	padding: 5px 12px;
	border-radius: 0 0 5px 5px;
	gap: 0;
	margin-inline: calc(-1 * var(--wp--preset--spacing--15));
	margin-block-end: calc(-1 * var(--wp--preset--spacing--15));
}

.eq-card .eq-card-meta .eq-card-meta-item p,
.eq-card .eq-card-meta .eq-card-action,
.eq-card .eq-card-meta .eq-card-action a {
	font-size: var(--eq-t-knop);
	font-weight: 400;
	line-height: 1.2;
}

/* Zolang de actie nog een broer is in plaats van een cel, krijgt hij dezelfde
 * balkopmaak — dan is het verschil hooguit een naad, geen tweede blok. */
.eq-card > .eq-card-action {
	margin-block: 0;
	padding: 5px 12px;
	min-height: 46px;
	display: flex;
	align-items: center;
	margin-inline: calc(-1 * var(--wp--preset--spacing--15));
	margin-block-end: calc(-1 * var(--wp--preset--spacing--15));
	border-radius: 0 0 5px 5px;
}


/* ---- 18. De formuliersectie ------------------------------------------------
 * Gemeten op de bron, 1440 breed. Vier pagina's hebben dit formulier —
 * qualifications, ai-training, team-training en start-here — en niet zeven; de
 * andere vijf hebben er geen. Dat is geteld, niet aangenomen.
 *
 *   band      #F4F4F4, volle breedte, 45 boven / 25 onder
 *   paneel    #3C3C3C, radius 10, padding 25, 599 breed, gecentreerd
 *   kop       32/400, regel 40, wit
 *   intro     18,4/400, regel 23, wit
 *   label     18/400, regel 22,5, wit
 *   veld      wit, 1px #E0E0E0, radius 2, padding 10, corps 18
 *   knop      #E50914, wit, 18/600, radius 5, padding 15/6, volle breedte
 *   naregel   #333333, 16/400, regel 20 — ONDER het paneel, op de band
 *
 * De naregel ("We will NOT spam you...") staat bewust buiten het paneel. Op de
 * bron is hij donker op grijs en niet wit op donkergrijs; hij hoort bij de band.
 *
 * Waarom de selectors twee klassen diep zijn: de plugin levert zijn eigen
 * stijlblad mee en dat haakt op één klasse (.eqw-form__submit, 0-1-0). Met
 * .eq-form-band ervoor (0-2-0) wint deze laag ongeacht de laadvolgorde, en dat
 * is nodig omdat blokstijlen soms ná het themablad worden ingevoegd.
 */

.eq-form-band {
	background-color: var(--wp--preset--color--band-light);
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie) var(--wp--preset--spacing--30);
	margin-block: 0;
}

/* Het paneel. 600 is de gemeten 599 plus de halve pixel die een even getal
 * oplevert; op start-here is het paneel breder en krijgt de sectie daar de
 * klasse eq-form-wide. */
.eq-form-band .eqw-form {
	background-color: var(--wp--preset--color--panel-dark);
	border-radius: 10px;

	/* 25 en niet de 24 uit de ruimteschaal: dit is een gemeten bronwaarde, net
	 * als de 5px/12px van de kaartvoetbalk. Rond het af op de schaal en het
	 * paneel wordt een pixel smaller dan de bron. */
	padding: 25px;

	/* border-box, want de gemeten 599 van de bron IS inclusief die padding.
	 * Zonder deze regel telt de browser 2x25 erbij op en wordt het paneel 650. */
	box-sizing: border-box;
	max-width: 600px;
	margin-inline: auto;
	color: var(--wp--preset--color--on-ink);
}

.eq-form-band.eq-form-wide .eqw-form {
	max-width: 922px;
}

.eq-form-band .eqw-form__title {
	font-size: var(--wp--preset--font-size--form-title);
	font-weight: 400;
	line-height: 40px;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0 var(--wp--preset--spacing--10);
}

.eq-form-band .eqw-form__intro {
	font-size: var(--wp--preset--font-size--form-intro);
	font-weight: 400;
	line-height: 23px;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-form-band .eqw-form__label,
.eq-form-band .eqw-form__legend {
	font-size: var(--wp--preset--font-size--form-field);
	font-weight: 400;
	line-height: 22.5px;
	color: var(--wp--preset--color--on-ink);
}

.eq-form-band .eqw-form__field {
	margin-block-end: var(--wp--preset--spacing--15);
}

/* Het veld zelf. box-sizing staat erbij omdat de gemeten hoogte van 43 de
 * padding van 10 en de rand van 1 INSLUIT; zonder dit wordt het veld 65. */
.eq-form-band .eqw-form__field input,
.eq-form-band .eqw-form__field textarea,
.eq-form-band .eqw-form__field select {
	box-sizing: border-box;
	width: 100%;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--banner);
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 2px;
	padding: 10px;
	font-size: var(--wp--preset--font-size--form-field);
	line-height: normal;
}

.eq-form-band .eqw-form__field textarea {
	min-height: 64px;
	resize: vertical;
}

.eq-form-band .eqw-form__actions {
	margin-block-start: var(--wp--preset--spacing--20);
}

.eq-form-band .eqw-form__submit {
	box-sizing: border-box;
	width: 100%;
	background-color: var(--wp--preset--color--alarm);
	border: 1px solid var(--wp--preset--color--alarm);
	border-radius: 5px;
	color: var(--wp--preset--color--on-ink);
	font-size: var(--wp--preset--font-size--form-field);
	font-weight: 600;
	line-height: normal;
	padding: 15px 6px;
	cursor: pointer;
}

.eq-form-band .eqw-form__submit:hover,
.eq-form-band .eqw-form__submit:focus-visible {
	background-color: var(--wp--preset--color--error);
	border-color: var(--wp--preset--color--error);
}

/* De melding na verzenden. Op deze demo is dat de enige uitkomst: er wordt
 * niets verstuurd en niets opgeslagen, en de tekst zegt dat ook. */
.eq-form-band .eqw-form__notice {
	font-size: var(--wp--preset--font-size--form-field);
	line-height: 23px;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
}

/* De textarea is op de bron 64 hoog. Het blok rendert er standaard vijf regels,
 * en dat is 113 px extra in een paneel dat 778 hoort te zijn. */
.eq-form-band .eqw-form__field textarea {
	height: 64px;
}

/* De uitleg bij het sterretje staat niet op de bron. Hij blijft staan omdat hij
 * werk doet voor wie het formulier voorgelezen krijgt, maar hij hoeft geen
 * ruimte van een alinea te nemen. */
.eq-form-band .eqw-form__legend {
	font-size: var(--wp--preset--font-size--caption);
	margin-block: 0 var(--wp--preset--spacing--10);
}

/* De naregel onder het paneel: donker op de grijze band, op de breedte van het
 * formulier en met het paneel meecentrerend. */
.eq-form-note {
	max-width: 600px;
	margin-block: var(--wp--preset--spacing--15) 0;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--body);
	line-height: 20px;
	color: var(--wp--preset--color--foreground);
}

.eq-form-band.eq-form-wide .eq-form-note {
	max-width: 922px;
}

/* Op de telefoon houdt het paneel zijn padding maar niet zijn vaste breedte. */
@media (max-width: 700px) {
	.eq-form-band .eqw-form,
	.eq-form-band.eq-form-wide .eqw-form {
		max-width: none;
	}
}


/* ---- 19. Typografie en randen op de bronwaarden ----------------------------
 * Gemeten over negen pagina's aan beide kanten (TYPOGRAFIE-EN-RANDEN.md). Deze
 * laag staat achteraan en niet tussen de bestaande regels: hij corrigeert
 * waarden die op meerdere plekken in dit bestand gezet zijn, en één laag die
 * later komt is te overzien waar zes losse ingrepen dat niet zijn.
 *
 * Kost nul bytes extra. Geen verzoek, geen bestand, alleen andere getallen.
 */

/* 1. DE REGELAFSTAND. De bron houdt 1,25 vast over elke corpsmaat; wij stonden
 *    op 1,72. Bij 16 px is dat 20 tegen 27,5 — zeven pixels per regel. */
.eq-section p,
.eq-card-text,
.eq-card-title,
.eq-card-meta,
.eq-card-action {
	line-height: var(--eq-leading-bron);
}

/* 2. DE KAARTTITEL IS EEN TITEL. Op de bron 22 px in #212934; bij ons stond hij
 *    op 16 px in #333333 — even groot als de lopende tekst eronder, en dan
 *    leest hij niet als titel. De maat h3 is al 22; alleen de kleur moest nog. */
.eq-card-title,
.eq-card-title a {
	font-size: var(--wp--preset--font-size--h-3, 22px);
	color: var(--wp--preset--color--ink);
}

/* 3. DE SECTIEKOP. 36 px op de bron tegen 28 bij ons, en de streep links is
 *    daar 10 px waar wij er 4 hadden staan — meer dan twee keer zo dun. De
 *    spatiëring van 0,01em is bij 36 px precies de gemeten 0,36 px. */
.eq-card-grid-header {
	font-size: var(--wp--preset--font-size--section-head);
	border-inline-start-width: 10px;
}

/* 4. DE VOETBALK VAN DE KAART. 13 px op de bron, 14 bij ons — en er stond een
 *    witte lijn van 1 px bovenop de actie die op de bron niet bestaat. Die
 *    lijn hoort weg; zodra de actie de derde cel van de balk wordt in plaats
 *    van een blok eronder, is er ook niets meer om te scheiden. */
.eq-card .eq-card-meta,
.eq-card .eq-card-meta .eq-card-meta-item p,
.eq-card .eq-card-action,
.eq-card .eq-card-action a {
	font-size: var(--wp--preset--font-size--caption);
}

.eq-card .eq-card-action {
	border-block-start: 0;
}


/* ---- 20. Het gouden paneel is opt-in ---------------------------------------
 * De goudregel stond op .eq-card-grid-section. Die klasse staat op élke
 * kaartsectie, dus stond er goud op 39 secties over zeven pagina's terwijl de
 * bron er negen heeft over drie. Op ocean-ai en start-here waren acht van de
 * negen banden goud waar de bron er geen heeft.
 *
 * Het goud zit nu op een WIKKEL om de grids. Dat lost twee dingen tegelijk op:
 * het staat alleen waar het hoort, én de sectiekop valt erbuiten — op de bron
 * staat "CHARTERED INSTITUTE OF MARKETING (CIM)" bóven het gouden vlak.
 *
 * Eén wikkel per sectie en niet per grid: bij CIM heeft de bron één paneel met
 * twee rijen erin. Zeven grids over drie secties zouden anders zeven panelen
 * worden.
 */

/* De sectie is weer een gewone sectie. */
.eq-card-grid-section {
	background-color: transparent;
	border-radius: 0;
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie);
	max-width: none;
}

/* De wikkel draagt het goud, op de bronwaarden: de lichtere tint #F9C32D,
 * radius 15, padding 30 boven en 45 opzij, en 0 onder — de onderste kaartrij
 * draagt zijn eigen ondermarge, dus het vlak sluit strak af. */
.eq-card-panel {
	background-color: var(--wp--preset--color--primary-hover);
	border-radius: 15px;
	padding: var(--wp--preset--spacing--40) 45px 0;
	margin-block: var(--wp--preset--spacing--30);
	margin-inline: auto;
	max-width: var(--eq-kolom);
}

/* De variant waar de kop op de bron WÉL in het goud staat. Op team-training is
 * het gouden vlak geen kaartpaneel maar een lange kolom met de kop erin; die
 * sectie draagt het goud dus zelf. */
.eq-card-grid-section.eq-gold {
	background-color: var(--wp--preset--color--primary-hover);
	border-radius: 15px;
	padding-inline: 45px;
	padding-block: var(--wp--preset--spacing--40) 0;
	margin-inline: auto;
	max-width: var(--eq-kolom);
}

/* De kaart lag op het goud en ligt nu op de wikkel. De bestaande regel haakt op
 * .eq-card-grid-section .eq-card en blijft dus gelden: de wikkel zit BINNEN de
 * sectie, de kaarten zitten binnen de wikkel. Alleen de streep links van de kop
 * hoort nu op wit te staan in plaats van op goud, en dat is dezelfde donkere
 * kleur — daar verandert niets aan. */


/* ---- 21. /start-here/ -------------------------------------------------------
 * Alles hieronder is gemeten op de bron, band voor band. De pagina heeft daar
 * veertien banden; wij hadden er negen, en acht daarvan waren goud terwijl de
 * bron er nul heeft.
 *
 * De koppenschaal is het skelet van deze pagina: 52 voor de paginakop, 44 voor
 * een bandkop, 36 voor een groepskop, alle drie in hoofdletters. Bij ons stond
 * alles op 16 en daardoor las de pagina als één lange lap tekst.
 */

/* --- de koppen ----------------------------------------------------------- */

.eq-page-head {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--mega);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--foreground);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-band-head {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--foreground);
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* Op een donkere band draait de kopkleur mee. */
.eq-band-dark .eq-band-head,
.eq-band-dark p {
	color: var(--wp--preset--color--on-ink);
}

.eq-group-head {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--section-head);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: left;
	color: var(--wp--preset--color--foreground);
	border-inline-start: 10px solid var(--wp--preset--color--primary);
	padding-inline-start: var(--wp--preset--spacing--20);
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* --- de banden ------------------------------------------------------------ */

.eq-band-dark {
	background-color: var(--wp--preset--color--foreground);
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie);
	margin-block: 0;
}

.eq-band-grey {
	background-color: var(--wp--preset--color--band-light);
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie);
	margin-block: 0;
}

/* --- de acht pathway-kaarten ---------------------------------------------- */

/* Twee kolommen, vier rijen. De kaarten zijn op de bron 612 breed binnen de
 * kolom van 1248, dus de tussenruimte is 24. */
.eq-pathway-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

/* WordPress zet op een flow-layout `> * + *` met een bovenmarge. Die selector
 * slaat het eerste kind over: in een kolom is dat de ruimte tussen blokken, in
 * een GRID duwt hij alleen de tweede kolom omlaag. Gemeten stond kaart 2
 * twintig pixels lager dan kaart 1. De gap doet hier het werk. */
.eq-pathway-grid > * {
	margin-block: 0;
}

.eq-pathway {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);

	/* De bron zet 18/22,5 in het hele kaartblok: paneel, opsomming en de
	 * Best for-regel. Bij ons stond alles op 16/20 en dat scheelde ruim 350 px
	 * per kaart — over acht kaarten de helft van het hoogteverschil. */
	font-size: var(--wp--preset--font-size--form-field);
	line-height: 22.5px;

	/* Geen gelijke gap: de bron zet per onderdeel een eigen marge, en juist
	 * die 90 px onder de Best for-regel houdt de knop onderaan de kaart. */
	gap: 0;
	padding: 25px;
	box-sizing: border-box;
}

.eq-pathway p,
.eq-pathway li {
	font-size: var(--wp--preset--font-size--form-field);
	line-height: 22.5px;
}

/* Gemeten op de bron: 25px op gewicht 400, regelhoogte 31,25, marge 5 boven en
 * 10 onder, en GEEN hoofdletters — de nummering doet daar het werk. */
.eq-pathway-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 25px;
	font-weight: 400;
	line-height: 31.25px;
	text-transform: none;
	color: var(--wp--preset--color--foreground);
	margin-block: 5px 10px;
}

/* Het donkere binnenpaneel: #333333, radius 15, padding 25 — gemeten op de
 * bron, waar het 556 breed is binnen een kaart van 612. */
.eq-pathway-panel {
	background-color: var(--wp--preset--color--foreground);
	border-radius: 15px;
	padding: 25px;
	color: var(--wp--preset--color--on-ink);
}

.eq-pathway-panel p {
	color: var(--wp--preset--color--on-ink);
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-pathway-panel p:last-child {
	margin-block-end: 0;
}

.eq-pathway-panel p:first-child {
	font-weight: 700;
}

.eq-pathway-list {
	list-style: none;
	margin: 0 0 15px;
	padding: 0;
}

/* Elke regel is een LICHTGRIJZE PIL, geen kale tekst met een stip ervoor.
 * Gemeten op de live bron: 556x53 bij één regel en 83 bij twee, grond #F2F3F5,
 * radius 15, tekst 18/400, met 15 px lucht ertussen.
 *
 * Ik had ze eerst als donkere balken gebouwd, op gezag van een schermafdruk.
 * De meting zei lichtgrijs. Dat is dezelfde les als bij het honeypot-veld
 * eerder vandaag: niet de site klopte niet, het instrument. */
.eq-pathway-list li {
	background-color: var(--wp--preset--color--surface-alt);
	border-radius: 15px;
	padding: 15px 20px;
	margin-block-start: 15px;
	line-height: 22.5px;
	min-height: 53px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}



/* 10 boven en 90 onder: die negentig is wat de knop onderaan de kaart houdt. */
.eq-pathway-best {
	margin-block: 10px 90px;
	line-height: 22.5px;
}

.eq-pathway-best strong {
	font-weight: 700;
}

/* De gouden knop over de volle kaartbreedte: #F2B714, tekst #333333,
 * 20px/700, doos 541x57, radius 15. */
.eq-pathway-cta {
	margin-block-start: auto;
}

.eq-pathway-cta .wp-block-button__link,
.eq-cta-gold .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: var(--wp--preset--font-size--h-4, 20px);
	font-weight: 700;
	line-height: 1.2;
	border-radius: 15px;
	padding: 16px var(--wp--preset--spacing--30);
	text-align: center;
}

.eq-pathway-cta,
.eq-pathway-cta .wp-block-buttons,
.eq-pathway-cta .wp-block-button,
.eq-pathway-cta .wp-block-button__link {
	width: 100%;
}

/* 57 px hoog op de bron, tekst 20/700 gecentreerd. */
.eq-pathway-cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	padding: 18px 20px;
	min-height: 57px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --- de keuzegroepen: uitklapbalken --------------------------------------- */

/* Op de bron zijn dit uitklappanelen: een donkere balk van 1248x64 met radius 5
 * en witte tekst van 20px/700, met de uitleg eronder. Gebouwd op het
 * details-blok van WordPress zelf — dat klapt open zonder één regel JavaScript. */
.eq-choice {
	margin-block: 0 var(--wp--preset--spacing--10);
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-choice > summary {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--on-ink);
	border-radius: 5px;
	min-height: 64px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-4, 20px);
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
	list-style-position: inside;
}

.eq-choice > summary::marker {
	color: var(--wp--preset--color--primary);
}

.eq-choice p {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block: 0;
	line-height: var(--eq-leading-bron);
}

/* --- de opsomming op de donkere band -------------------------------------- */

.eq-check-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--eq-kolom);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
}

.eq-check-list li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--on-ink);
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: var(--eq-leading-bron);
}

.eq-check-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

/* --- het formulier op start-here is een ándere ---------------------------- */

/* Gemeten verschil met de andere pagina's. Het is niet dezelfde sectie op een
 * andere breedte maar een tweede variant:
 *
 *   paneel   #FFFFFF, radius 30, padding 0, 924 breed   (elders #3C3C3C, r10, p25)
 *   veld     radius 15, padding 4/12, hoogte 55         (elders r2, p10, hoogte 43)
 *   knop     #F2B714 goud                                (elders #E50914 rood)
 *   beeld    de syllabusgids staat BINNEN het paneel, boven de velden
 *
 * Het beeld hoort in het paneel, en het blok kan geen beeld dragen. Daarom
 * draagt een wikkel het witte vlak en staat het formulier daar doorzichtig in.
 */
.eq-form-panel-light {
	background-color: var(--wp--preset--color--background);
	border-radius: 30px;
	padding: 0;
	overflow: hidden;
	max-width: 924px;
	margin-inline: auto;
}

.eq-form-panel-light figure {
	margin-block: 0;
}

.eq-form-panel-light img {
	display: block;
	margin-inline: auto;
	height: auto;
}

.eq-form-band.eq-form-light .eqw-form {
	background-color: transparent;
	border-radius: 0;
	padding: var(--wp--preset--spacing--30);
	max-width: none;
	color: var(--wp--preset--color--foreground);
}

.eq-form-band.eq-form-light .eqw-form__intro,
.eq-form-band.eq-form-light .eqw-form__label,
.eq-form-band.eq-form-light .eqw-form__legend,
.eq-form-band.eq-form-light .eqw-form__notice {
	color: var(--wp--preset--color--foreground);
}

/* Het veld heeft hier radius 15 en niet 2, en is 55 hoog en niet 43. */
.eq-form-band.eq-form-light .eqw-form__field input,
.eq-form-band.eq-form-light .eqw-form__field textarea,
.eq-form-band.eq-form-light .eqw-form__field select {
	border-radius: 15px;
	padding: 4px 12px;
	min-height: 55px;
}

.eq-form-band.eq-form-light .eqw-form__field textarea {
	padding-block: var(--wp--preset--spacing--15);
}

.eq-form-band.eq-form-light .eqw-form__submit {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-weight: 700;
}

.eq-form-band.eq-form-light .eqw-form__submit:hover,
.eq-form-band.eq-form-light .eqw-form__submit:focus-visible {
	background-color: var(--wp--preset--color--primary-bevel);
	border-color: var(--wp--preset--color--primary-bevel);
}

/* Kop en intro staan hier op de band, buiten het paneel; het blok toont er dus
 * zelf geen. */
.eq-form-band.eq-form-light .eqw-form__title {
	display: none;
}

.eq-form-band.eq-form-light .eq-form-note {
	max-width: 924px;
}

/* --- mobiel --------------------------------------------------------------- */

@media (max-width: 782px) {
	.eq-pathway-grid {
		grid-template-columns: 1fr;
	}
}


/* ---- 22. De hero van /start-here/ ------------------------------------------
 * Gemeten op de bron: een band van 935 px in #222222, tekst op de linkerhelft
 * en de vuurtoren op de rechterhelft, tot de vensterrand.
 *
 * Op de bron is dat beeld een CSS-achtergrond. Bij ons is het een gewoon
 * beeldblok: een achtergrond zou per pagina een eigen regel vragen, en
 * pagina-specifieke CSS is hier verboden. object-fit doet hetzelfde werk.
 *
 * De bestaande .eq-hero-regels gelden ook hier; wat hieronder staat is wat
 * déze hero anders maakt.
 */

.eq-section.eq-hero-deep {
	background-color: var(--wp--preset--color--ink-deep);
	position: relative;

	/* Een flexkolom, geen grid. NIET centreren: de bron zet de kop altijd 70 px
	 * onder de bovenrand en het kader altijd 63 px boven de onderrand, en smeert
	 * de rest ertussen uit.
	 *
	 * Waarom flex en niet grid: met `align-content: stretch` groeit een
	 * AUTO-spoor niet mee met de bandhoogte. De kolom bleef daardoor op zijn
	 * inhoudshoogte staan (597 in een band van 764) en werd door de resterende
	 * ruimte gecentreerd — 83 px boven de padding van 70. Met `flex: 1` op het
	 * kind vult hij wél wat er is. */
	display: flex;
	flex-direction: column;

	/* Expliciet, want de oudere regel .eq-hero:has(.eq-hero-media) zet hier
	 * `center`. In het grid van twee kolommen dat die regel bediende betekende
	 * dat verticaal centreren; in een flexKOLOM is de dwarsas horizontaal en
	 * schoof de hele tekstkolom 360 px naar rechts. */
	align-items: stretch;

	min-height: 935px;
	box-sizing: border-box;
	padding: 0;
	overflow: hidden;
}

/* Het beeld is een laag over de hele band, niet een kolom ernaast. */
.eq-section.eq-hero-deep > .eq-hero-media {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.eq-section.eq-hero-deep .eq-hero-image {
	margin: 0;
	height: 100%;
}

/* Hoogte 960 en rechts uitgelijnd: precies wat de bron als
 * `background-size: auto 960px` en `background-position: 100% 50%` doet. */
.eq-section.eq-hero-deep .eq-hero-image img {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	height: 960px;
	width: auto;
	max-width: none;

	/* `cover` en niet `none`: met `none` tekent de browser de gekozen
	 * srcset-variant op ware grootte in het midden van de doos, en dan staat er
	 * een klein plaatje met zwart eromheen in een doos van 2335x960. De doos was
	 * goed, het beeld erin niet — een fout die geen maatmeting laat zien. */
	object-fit: cover;
	object-position: center;
	display: block;
}

/* De tekst staat over het beeld, op de linkerhelft, uitgelijnd op de menubalk. */
.eq-section.eq-hero-deep > .eq-hero-text {
	position: relative;
	z-index: 1;
	padding-inline: var(--eq-inzet) var(--wp--preset--spacing--50);
	padding-block: var(--eq-sectie);
	max-width: min(50%, calc(var(--eq-kolom) / 2 + var(--eq-inzet)));
	margin-inline: 0;

	/* 70 boven en 63 onder: op alle drie de gemeten bronpagina's precies deze
	 * twee getallen, ongeacht de bandhoogte. De ruimte ertussen wordt verdeeld
	 * met space-between, want dat is wat de bron doet.
	 *
	 * Flexbox mag hier: de reden dat hij er eerder uit moest was dat WordPress
	 * `margin-inline: auto` zet op kinderen van een CONSTRAINED groep, en die
	 * krimpen dan op de dwarsas. Deze groep staat op layout `default`, dus die
	 * marges worden niet uitgezonden. */
	padding-block: 70px 63px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	box-sizing: border-box;
}

/* De marges tussen de onderdelen, op de bronwaarden. WordPress' flow-marge zet
 * er zelf een tussen en die won van mijn eerste poging; met de bandklasse erbij
 * weegt deze zwaarder. De bron zet 10 onder de kop en 20 onder een alinea. */
.eq-section.eq-hero-deep .eq-hero-text > *,
.eq-section.eq-hero-deep .eq-hero-text > * + * {
	margin-block: 0 20px;
}

.eq-section.eq-hero-deep .eq-hero-text > .eq-hero-title {
	margin-block: 0 10px;
}

.eq-section.eq-hero-deep .eq-hero-text > .eq-hero-callout {
	margin-block: 0;
	flex: 0 0 auto;
}

.eq-section.eq-hero-deep .eq-hero-title {
	color: var(--wp--preset--color--primary-hover);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.2;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-section.eq-hero-deep .eq-hero-sub {
	color: var(--wp--preset--color--on-ink);
	font-size: var(--wp--preset--font-size--h-2, 28px);
	font-weight: 700;
	line-height: 1.2;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-section.eq-hero-deep p {
	color: var(--wp--preset--color--on-ink);
	line-height: var(--eq-leading-bron);
}

/* Het kader om de oproep. Gemeten op de bron mét beeld: 470 breed, rand van
 * 5 px in #444444, radius 5, padding 20/20/0 en dezelfde grond als de band —
 * daardoor leest het als een omlijning en niet als een vlak.
 *
 * In het kader staan twee alinea's, de rode knop en de twee badges. De alinea
 * met de missie staat er BUITEN; die is de enige die erboven hoort. */
.eq-hero-callout {
	border: 5px solid var(--wp--preset--color--border-dark);
	border-radius: 5px;
	background-color: var(--wp--preset--color--ink-deep);
	padding: 20px 20px 0;
	margin-block-start: var(--wp--preset--spacing--30);
	max-width: 470px;
	box-sizing: border-box;
	text-align: center;
}

.eq-hero-callout p {
	text-align: center;
	margin-block: 0 var(--wp--preset--spacing--20);
	line-height: var(--eq-leading-bron);
}

.eq-hero-callout .eq-hero-join {
	font-weight: 700;
}

/* De knop is 409x51 met padding 15/25 en radius 15. */
.eq-cta-alarm {
	justify-content: center;
}

.eq-hero-badges {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--20);
}

.eq-hero-badges .eq-badge {
	margin: 0;
}

/* Op de bron zijn de twee badges allebei 200 px breed (29 en 40 hoog) en staan
 * ze náást elkaar. Bij ons was de Google-badge 272 breed, en dan past het paar
 * niet meer in een kader van 470 en valt hij eronder. */
.eq-hero-badges .eq-badge img {
	max-width: 200px;
	width: auto;
	height: auto;
}

/* Op een smal scherm gaat het beeld onder de tekst en vervalt de vaste hoogte:
 * 935 px op een telefoon is twee schermen leeg. */
@media (max-width: 900px) {
	.eq-section.eq-hero-deep {
		min-height: 0;
	}

	.eq-section.eq-hero-deep > .eq-hero-text {
		min-height: 0;
		max-width: none;
	}

	.eq-section.eq-hero-deep > .eq-hero-text {
		padding-inline: var(--eq-inzet);
	}

	/* Op een telefoon dekt het beeld de band af en zorgt een sluier dat de
	 * tekst leesbaar blijft; naast elkaar past hier niets meer. */
	.eq-section.eq-hero-deep .eq-hero-image img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		transform: none;
		inset-block-start: 0;
		opacity: 0.35;
	}
}


/* De knop in het herokader is rood: #E50914 op 409x51, 16/700, radius 15.
 * Deze regel viel weg toen het dubbele heroblok werd opgeruimd; zonder hem
 * erfde de knop het goud van .eq-cta-gold. */
.eq-cta-alarm .wp-block-button__link {
	background-color: var(--wp--preset--color--alarm);
	color: var(--wp--preset--color--on-ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.2;
	border-radius: 15px;
	padding: 15px 25px;
}

.eq-cta-alarm .wp-block-button__link:hover,
.eq-cta-alarm .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--error);
}


/* ---- 23. De introalinea is 20 px, niet 16 -----------------------------------
 * Gemeten op /start-here/: elke alinea die onder een bandkop staat is op de
 * bron 20/25. Bij ons stonden ze op 16/20, en dat verklaart het hoogteverschil
 * van band 1 (298 tegen 394) en band 4 (309 tegen 419) helemaal.
 */

.eq-intro p,
.eq-band-dark > p {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: 25px;
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

/* De acht keuzeregels op de donkere band. Op de bron 815 breed, 74 hoog, met
 * padding 20 en tekst 20/34 — bij ons 1248 breed en 20 hoog. Acht keer 54 px
 * verschil is 432 van de 471 die band 3 tekortkwam. */
.eq-check-list {
	max-width: 815px;
}

.eq-check-list li {
	padding: 20px 20px 20px var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: 34px;
}

.eq-check-list li::before {
	inset-block-start: 30px;
}

/* De naregel onder de knop op die band staat op 18/22,5. */
.eq-band-dark > p:last-child {
	font-size: var(--wp--preset--font-size--form-field);
	line-height: 22.5px;
}


/* ---- 24. De voetbalk: drie cellen op één lijn -------------------------------
 * De actie is sinds de vorige ronde de derde cel van de balk in plaats van een
 * blok eronder. Wat er bleef staan was de padding van die oude vorm: 12 px
 * boven, waardoor "View Course" 12 px lager begon dan de duur en de prijs.
 *
 * Gemeten vóór: tekst van cel 1 en 2 op 1154, cel 3 op 1166.
 *
 * Deze laag staat achteraan omdat de oude regel verderop in dit bestand staat
 * en anders wint. Beide zijn nodig: de padding eraf én align-items op center.
 */

.eq-card .eq-card-meta {
	align-items: center;
}

.eq-card .eq-card-meta .eq-card-action,
.eq-card .eq-card-meta .eq-card-meta-item {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	min-height: 0;
	background-color: transparent;
	border-block-start: 0;
}

/* De derde cel lijnt op de bron rechts uit, de eerste twee links. */
.eq-card .eq-card-meta .eq-card-action {
	justify-content: flex-end;
	text-align: right;
}

.eq-card .eq-card-meta .eq-card-action p,
.eq-card .eq-card-meta .eq-card-meta-item p {
	margin: 0;
}


/* ---- 25. De herotekst lijnt links uit --------------------------------------
 * WordPress geeft elk kind van een constrained groep de contentbreedte plus
 * `margin-inline: auto`. Dat centreert de bak, en bij een alinea die smaller is
 * dan de kolom lees je dat als gecentreerde tekst. Op de bron staat alle
 * herotekst links, op dezelfde lijn als het menu.
 *
 * De centrering wordt hier opgeheven in plaats van de layout te veranderen: dat
 * laatste zou de blokmarkup van elke pagina raken.
 */

.eq-section.eq-hero-deep .eq-hero-text > * {
	max-width: none;
	margin-inline: 0;
	text-align: start;
}

/* Het kader houdt zijn eigen breedte van 470 en centreert vanbinnen, maar
 * begint links op dezelfde lijn als de rest van de herotekst — op de bron staat
 * hij op 100 en niet gecentreerd in de kolom. */
.eq-section.eq-hero-deep .eq-hero-text > .eq-hero-callout {
	max-width: 470px;
	margin-inline: 0;
	text-align: center;
}

/* De alinea's in de hero staan op de bron op 20/25, en de regel eronder in het
 * kader op 18,4. */
.eq-section.eq-hero-deep .eq-hero-text > p {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: 25px;
}

.eq-section.eq-hero-deep .eq-hero-callout p {
	font-size: var(--wp--preset--font-size--form-intro);
	line-height: 23px;
}


/* ---- 26. De voet op de bronwaarden -----------------------------------------
 * Gemeten op de bron: bovenband #363839 met padding 43/30/40, copyrightbalk
 * #282A2B met 18/30/16, kolomkop 13/19,5 in goud, voetlink 15/18,75 in #BFBFBF
 * met 8 px padding boven en onder.
 *
 * De opvallendste fout was niet een maat maar een uitlijning: de vier kolommen
 * stonden verticaal gecentreerd. Alle vier hadden hetzelfde midden en een
 * andere bovenkant, en de kortste kolom zakte 148 px weg. Op de bron beginnen
 * ze gelijk.
 *
 * De zijkantlijn blijft onze eigen inzet en wordt niet de 30 van de bron: zo
 * lijnt de voet uit op de menubalk, en dat is de basisregel voor deze site.
 */

.eq-site-footer-columns {
	align-items: flex-start;
	padding-block: 43px 40px;
	padding-inline: var(--eq-inzet);
	gap: var(--wp--preset--spacing--40);
	max-width: none;
}

/* Elke kolom begint bovenaan, ongeacht hoeveel links erin staan. */
.eq-site-footer-column {
	align-self: flex-start;
}

.eq-site-footer-heading {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 19.5px;
	font-weight: 700;
	color: var(--wp--preset--color--footer-heading);
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* De link is 15/18,75 met 8 px padding boven en onder; die padding doet de
 * ruimte tussen de regels, dus de lijst heeft geen eigen gap meer nodig. */
.eq-site-footer-list {
	gap: 0;
}

.eq-site-footer-list li {
	margin: 0;
}

.eq-site-footer-list a {
	display: block;
	font-size: 15px;
	line-height: 18.75px;
	padding-block: 8px;
	color: var(--wp--preset--color--footer-link);
}

/* De copyrightbalk is een eigen band in een DONKERDER grijs dan de bovenband:
 * #282A2B tegen #363839. Dat verschil is het punt van die balk. */
.eq-site-footer-bottom {
	background-color: var(--wp--preset--color--footer-bar);
	padding-block: 18px 16px;
	padding-inline: var(--eq-inzet);
}

.eq-site-footer-copyright {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 16px;
	padding-block: 0;
	margin: 0;
	max-width: var(--eq-kolom);
	margin-inline: auto;
}


/* ---- 27. De promoband ------------------------------------------------------
 * Gemeten op ai-training: een band van 2154 px in #333333 met een verduisterd
 * achtergrondbeeld (linear-gradient rgba(0,0,0,.85) eroverheen), padding
 * 55/30/45, met daarin één gecentreerd beeld en één gouden knop van 815x51 die
 * de volle beeldbreedte pakt.
 *
 * De verduistering en de beeldverwijzing zitten in het cover-blok zelf, dus in
 * de markup. Hier staat alleen wat voor elke promoband geldt.
 */

.eq-promo-band {
	padding-block: 55px 45px;
	padding-inline: var(--eq-inzet);
	margin-block: 0;
	background-color: var(--wp--preset--color--foreground);
}

/* De bron legt 85 procent zwart over het achtergrondbeeld. WordPress rondt zijn
 * dimRatio af op tientallen en hangt de dekking aan een klasse; die afronding
 * gaf een zichtbaar lichtere band. Hier staat de gemeten waarde. */
.wp-block-cover.eq-promo-band > .wp-block-cover__background {
	background-color: var(--wp--preset--color--banner);
	opacity: 0.85;
}

/* Het beeld vult de band; op de bron is het een lange poster van ruim 1900 px
 * hoog binnen een band van 2154. */
.wp-block-cover.eq-promo-band > .wp-block-cover__image-background {
	object-fit: cover;
}

.eq-promo-band .wp-block-cover__inner-container {
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-promo-image {
	margin-block: 0;
}

.eq-promo-image img {
	display: block;
	margin-inline: auto;
	max-width: min(100%, 815px);
	height: auto;
}

/* De knop pakt de breedte van het beeld, niet die van de band. */
.eq-promo-cta {
	max-width: 815px;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--30);
}

.eq-promo-cta,
.eq-promo-cta .wp-block-button,
.eq-promo-cta .wp-block-button__link {
	width: 100%;
}

.eq-promo-cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	border-radius: 15px;
	min-height: 51px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--30);
}


/* ---- 28. Donkere banden met kaarten erin -----------------------------------
 * team-training wisselt donkere en lichte banden af: zes van de zestien staan
 * op #333333. In zo'n band is de lopende tekst wit, maar de KAARTEN blijven wit
 * met donkere tekst — anders lees je witte letters op een wit vlak.
 */

.eq-band-dark {
	color: var(--wp--preset--color--on-ink);
}

.eq-band-dark h1,
.eq-band-dark h2,
.eq-band-dark h3,
.eq-band-dark h4,
.eq-band-dark > p,
.eq-band-dark > ul li,
.eq-band-dark .eq-card-grid-header {
	color: var(--wp--preset--color--on-ink);
}

/* De streep links van een sectiekop is op een donkere band juist goud; op wit
 * is hij donker. */
.eq-band-dark .eq-card-grid-header {
	border-inline-start-color: var(--wp--preset--color--primary);
}

/* Binnen een kaart geldt de gewone kleurindeling weer. */
.eq-band-dark .eq-card .eq-card-title,
.eq-band-dark .eq-card .eq-card-title a {
	color: var(--wp--preset--color--ink);
}

.eq-band-dark .eq-card .eq-card-text {
	color: var(--wp--preset--color--muted);
}

.eq-band-dark .eq-card p {
	color: var(--wp--preset--color--foreground);
}

.eq-band-dark .eq-card .eq-card-meta,
.eq-band-dark .eq-card .eq-card-meta p,
.eq-band-dark .eq-card .eq-card-action,
.eq-band-dark .eq-card .eq-card-action a {
	color: var(--wp--preset--color--on-ink);
}

/* De uitklapbalken op een donkere band houden hun eigen vlak. */
.eq-band-dark .eq-choice > summary {
	background-color: var(--wp--preset--color--ink);
}

/* ---- 29. Een hero die niet spreidt -----------------------------------------
 * Niet elke hero heeft een kader onderaan. Op team-training zijn het drie
 * alinea's die van boven af lopen, met de kop op +40 in plaats van +70. Dan
 * moet de inhoud NIET uitgesmeerd worden, anders staat de laatste alinea tegen
 * de onderrand geplakt.
 */

.eq-section.eq-hero-deep.eq-hero-vast > .eq-hero-text {
	justify-content: flex-start;
	padding-block: 40px 40px;
}

.eq-section.eq-hero-deep.eq-hero-vast .eq-hero-text > p {
	font-size: var(--wp--preset--font-size--h-5, 18px);
	line-height: 27px;
}

/* ---- 30. De citaatband -----------------------------------------------------
 * Eén band op #F9F9FB met een groot citaat en de naam eronder.
 */

.eq-band-quote {
	background-color: var(--wp--preset--color--surface);
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie);
	margin-block: 0;
	text-align: center;
}

.eq-band-quote .eq-quote {
	font-size: var(--wp--preset--font-size--h-3, 22px);
	line-height: 1.4;
	font-style: italic;
	max-width: var(--eq-kolom);
	margin-inline: auto;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-band-quote .eq-quote-naam {
	font-weight: 700;
	margin-block: 0;
}


/* ---- 31. /ocean-ai/ ---------------------------------------------------------
 * De onderdelen van de masterplanpagina, op de bronwaarden.
 */

/* --- de aanhef boven de herokop ------------------------------------------- */

.eq-section.eq-hero-deep .eq-hero-eyebrow {
	font-size: var(--wp--preset--font-size--h-2, 28px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* --- de rij met beoordelingslogo's op een donkere band -------------------- */

.eq-badge-row {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	justify-content: center;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.eq-badge-row figure {
	margin: 0;
}

.eq-badge-row img {
	max-width: 220px;
	width: auto;
	height: auto;
}

/* --- de drie fasekolommen -------------------------------------------------- */

/* Op de bron loopt deze band van rand tot rand: drie kolommen van 480 die
 * samen de volle 1440 vullen, met 150 px lucht boven en onder. Geen inzet dus,
 * anders dan bij de andere banden. */
.eq-phases-band {
	padding-block: 150px;
	padding-inline: 0;
}

.eq-phases-band .wp-block-cover__inner-container {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* minmax(0, 1fr) en niet 1fr: een 1fr-spoor zakt niet onder zijn min-content, en
 * "AI CAPABILITY" is op 80 px breder dan een derde. Daardoor werden de kolommen
 * 429, 384 en 372 in plaats van gelijk. */
.eq-phase-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
}

.eq-phase-grid > * {
	margin-block: 0;
}

.eq-phase {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--on-ink);
	padding-inline: var(--wp--preset--spacing--30);
	box-sizing: border-box;
}

/* De knop zakt naar de onderkant, zodat de drie knoppen op één lijn staan
 * ongeacht hoeveel tekst erboven staat. Op de bron staan ze alle drie op 913
 * van de bovenkant van hun kolom. */
.eq-phase .wp-block-buttons {
	margin-block-start: auto;
}

.eq-phase p,
.eq-phase li {
	color: var(--wp--preset--color--on-ink);
	line-height: var(--eq-leading-bron);
}

/* 80 px op gewicht 400: op de bron is dit een dun, groot cijferwoord en geen
 * vette kop. */
/* De titel breekt BEWUST in twee: het nummer boven, de naam eronder. Als één
 * zin brak de browser hem af waar het uitkwam — "PHASE 02. AI" en dan
 * "CAPABILITY" — en dat leest als een fout.
 *
 * De maat schaalt mee met het scherm. Tachtig is de gemeten bronmaat, maar de
 * bron heeft daar ook meer ruimte omheen; een getal overnemen zonder die ruimte
 * levert geen kopie op maar een botsing. De langste naam is CAPABILITY en die
 * past op 64 met lucht in een kolom van 480. */
.eq-phase-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(44px, 4.2vw, 64px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
	display: flex;
	flex-direction: column;
}

.eq-phase-title .eq-phase-nr {
	display: block;
}

.eq-phase-title .eq-phase-naam {
	display: block;
}

/* Twee regels hoog, zodat de drie stappenlijsten op dezelfde lijn beginnen ook
 * als de ene tussenregel korter is dan de andere. */
.eq-phase-sub {
	min-height: calc(2 * 1.35em);
}

.eq-phase-sub {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	font-weight: 700;
	margin-block: 0;
}

/* De staptekst is 20 px op de bron, niet 16. */
.eq-phase-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.eq-phase-steps li,
.eq-phase p {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: 1.35;
}

/* --- is dit de goede kamer voor jou --------------------------------------- */

.eq-room-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--40);
	max-width: var(--eq-kolom);
	margin-inline: auto;
	align-items: start;
}

.eq-room-grid > * {
	margin-block: 0;
}

.eq-room-box {
	border-radius: 15px;
	padding: var(--wp--preset--spacing--30);
}

/* De ene doos is donker met een gouden rand, de andere goud met een donkere.
 * Dat contrast IS de boodschap: hier hoor je wel, hier hoor je niet. */
.eq-room-box.is-voor {
	background-color: var(--wp--preset--color--foreground);
	border: 5px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-ink);
}

.eq-room-box.is-voor h3,
.eq-room-box.is-voor li,
.eq-room-box.is-voor p {
	color: var(--wp--preset--color--on-ink);
}

.eq-room-box.is-niet {
	background-color: var(--wp--preset--color--primary);
	border: 5px solid var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--on-primary);
}

.eq-room-box.is-niet h3,
.eq-room-box.is-niet li,
.eq-room-box.is-niet p {
	color: var(--wp--preset--color--on-primary);
}

.eq-room-box h3 {
	font-size: var(--wp--preset--font-size--form-title);
	font-weight: 700;
	text-transform: uppercase;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-room-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
}

.eq-room-box li {
	line-height: var(--eq-leading-bron);
}

/* --- wat je krijgt: zeven kaarten ----------------------------------------- */

.eq-benefit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-benefit-grid > * {
	margin-block: 0;
}

.eq-benefit {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 15px;
	padding: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--foreground);
}

.eq-benefit h3 {
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--foreground);
	margin-block: 0 var(--wp--preset--spacing--10);
}

.eq-benefit p {
	font-size: var(--wp--preset--font-size--form-field);
	line-height: var(--eq-leading-bron);
	color: var(--wp--preset--color--foreground);
	margin-block: 0;
}

/* --- kies je niveau -------------------------------------------------------- */

.eq-level-band {
	padding-block: var(--eq-sectie);
	padding-inline: var(--eq-inzet);
}

.eq-level-band .wp-block-cover__inner-container {
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-level-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.eq-level-grid > * {
	margin-block: 0;
}

.eq-level {
	color: var(--wp--preset--color--on-ink);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.eq-level p,
.eq-level li {
	color: var(--wp--preset--color--on-ink);
	line-height: var(--eq-leading-bron);
}

.eq-level-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--phase);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
}

.eq-level ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.eq-level li {
	position: relative;
	padding-inline-start: var(--wp--preset--spacing--30);
}

.eq-level li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.45em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

/* --- wat er gebeurt als je meedoet: drie weekkaarten ---------------------- */

.eq-week-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-week-grid > * {
	margin-block: 0;
}

.eq-week {
	background-color: var(--wp--preset--color--surface);
	border: 3px solid var(--wp--preset--color--primary);
	border-radius: 15px;
	padding: var(--wp--preset--spacing--30);
}

.eq-week h3 {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.25;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-week p {
	line-height: var(--eq-leading-bron);
	margin-block: 0;
}

/* --- de cijfers ------------------------------------------------------------ */

.eq-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	max-width: var(--eq-kolom);
	margin-inline: auto;
	text-align: center;
}

.eq-stats > * {
	margin-block: 0;
}

.eq-stat-number {
	font-size: 50px;
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
}

.eq-stat-label {
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
}

.eq-logo-row {
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	justify-content: center;
	margin-block: var(--wp--preset--spacing--40) 0;
}

.eq-logo-row figure {
	margin: 0;
}

/* Het MMC-schild en de accreditatiestrook zijn niet even breed en horen dus
 * niet dezelfde maat te krijgen. De strook is 1022x130 — bijna acht keer zo
 * breed als hoog — en op 260 px werden de drie logo's erin 33 px hoog en
 * daarmee onleesbaar. */
/* `min(…, 100%)` en niet een kaal getal. Een kale `max-width: 520px` is op een
 * scherm van 390 gewoon 520: het beeld stak 65 px links buiten beeld, rekte het
 * layout-venster op naar 455, en dán schuift de hele pagina mee. Zo ontstond de
 * horizontale zwabber die Martin op /ocean-ai/ zag — alle andere elementen die
 * "buiten beeld" leken waren gevolg, niet oorzaak.
 *
 * NIET oplossen met `overflow-x: hidden` op html of body: dat maakt de zwabber
 * onzichtbaar en breekt tegelijk `position: sticky` voor alles eronder. De
 * oorzaak wegnemen is hier net zo goedkoop. */
.eq-logo-row img {
	width: auto;
	height: auto;
	max-width: min(260px, 100%);
}

.eq-logo-row .eq-logo-strook img {
	max-width: min(520px, 100%);
}

/* WAT HIER NIET STAAT, en waarom dat de moeite van het opschrijven waard is.
 *
 * Deze ene regel is genoeg: de figure volgt de img naar 330 en de zwabber is
 * weg. Er heeft een tijdje een tweede regel op de FIGURE gestaan
 * (`max-width: 100%; min-width: 0`) omdat we allebei dachten dat `100%` tegen
 * een figure van 520 oploste. Dat was fout, en de proef die het scheidde kostte
 * één browserrun: de nieuwe regel injecteren op een pagina die nog de oude CSS
 * draagt.
 *
 * De computed waarde die we zagen — `max-width: 520px` — paste namelijk bij
 * TWEE verklaringen: "min() lost op tegen 520" en "de browser heeft nog de oude
 * stylesheet, waar letterlijk 520px staat". De tweede was de juiste. Eén
 * waarneming, twee verklaringen, en wie er dan één van kiest heeft het de helft
 * van de tijd mis.
 *
 * De echte oorzaak was dat de site zijn stylesheets zonder versiestring
 * uitlevert, waardoor geen enkele cache ziet dat een bestand is veranderd. */

/* --- het grote citaat ------------------------------------------------------ */

.eq-quote-band {
	padding-block: 65px;
	padding-inline: var(--eq-inzet);
	text-align: center;
}

.eq-quote-groot {
	font-size: var(--wp--preset--font-size--form-title);
	line-height: 1.35;
	max-width: var(--eq-kolom);
	margin-inline: auto;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-quote-vraag {
	font-size: var(--wp--preset--font-size--h-3, 22px);
	font-weight: 700;
	margin-block: 0;
}

/* --- het citaatvak bij het schema ------------------------------------------ */

.eq-schema-quote {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 65px 65px 65px 0;
	padding: var(--wp--preset--spacing--40);
	max-width: var(--eq-kolom);
	margin-inline: auto;
	text-align: center;
}

.eq-schema-quote p {
	margin-block: 0;
}

.eq-schema-quote .eq-quote-tekst {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	font-style: italic;
	line-height: 1.4;
	margin-block-end: var(--wp--preset--spacing--15);
}

.eq-schema-quote .eq-quote-naam {
	font-weight: 700;
}

.eq-schema-quote .eq-quote-rol {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--muted);
}

/* --- het schemabeeld ------------------------------------------------------- */

.eq-schema-beeld {
	margin-block: var(--wp--preset--spacing--40);
}

.eq-schema-beeld img {
	display: block;
	margin-inline: auto;
	max-width: min(100%, 900px);
	height: auto;
}

/* --- mobiel ---------------------------------------------------------------- */

@media (max-width: 900px) {
	.eq-phase-grid,
	.eq-room-grid,
	.eq-benefit-grid,
	.eq-level-grid,
	.eq-week-grid,
	.eq-stats {
		grid-template-columns: 1fr;
	}
}


/* ---- 32. /events/ -----------------------------------------------------------
 * Drie promokaarten: twee naast elkaar en dan één. Elke kaart is een bannerbeeld
 * met daaronder een gouden knop die de volle kolombreedte pakt (599x51 op de
 * bron). De band eronder is WIT — bij ons stond hij op zwart, en #000000 komt in
 * MMC's palet niet voor.
 */

.eq-event-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-event-grid.is-een {
	grid-template-columns: 1fr;
	max-width: 599px;
}

.eq-event-grid > * {
	margin-block: 0;
}

.eq-event {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
}

.eq-event figure {
	margin: 0;
}

.eq-event img {
	display: block;
	width: 100%;
	height: auto;
}

.eq-event .wp-block-buttons,
.eq-event .wp-block-button,
.eq-event .wp-block-button__link {
	width: 100%;
}

.eq-event .wp-block-button__link {
	min-height: 51px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	border-radius: 15px;
}

@media (max-width: 900px) {
	.eq-event-grid {
		grid-template-columns: 1fr;
	}
}


/* ---- 33. Zwart bestaat niet in dit palet -----------------------------------
 * De bannerbanden op de voorpagina stonden op #000000. In MMC's palet komt
 * zwart niet voor: hun donkere banden zijn #333333, #222222 of #23282C. Op de
 * bron zijn de twee bannerbanden #333333.
 */

.eq-banner,
.eq-home-banner {
	background-color: var(--wp--preset--color--foreground);
}

/* De citaatband op de voorpagina heeft zijn eigen tint, koeler dan de rest. */
.eq-band-cool {
	background-color: var(--wp--preset--color--ink-cool);
	padding-inline: var(--eq-inzet);
	padding-block: var(--eq-sectie);
	margin-block: 0;
	color: var(--wp--preset--color--on-ink);
}

.eq-band-cool h1,
.eq-band-cool h2,
.eq-band-cool h3,
.eq-band-cool p {
	color: var(--wp--preset--color--on-ink);
}

/* ---- 34. Een schermafdruk mag niet vervormen -------------------------------
 * De elf LinkedIn-schermafdrukken op /reviews/ werden in vaste dozen geperst,
 * ongeacht hun eigen verhouding: review-ai-1 is 538x182 en werd 400x396 — een
 * brede band die bijna vierkant wordt. Zo'n afbeelding is onleesbaar, en juist
 * deze elf kun je niet als tekst navertellen.
 *
 * Dus: hoogte vrij, geen object-fit, en de kolommen mogen verschillend hoog
 * zijn. Een ongelijke rij is hier beter dan bijsnijden.
 */

.eq-review-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-review-grid > * {
	margin-block: 0;
}

.eq-review-grid figure {
	margin: 0;
}

.eq-review-grid img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: initial;
	border-radius: 15px;
}

/* Ook waar de beelden nog in een kolommenblok staan: nooit een vaste hoogte. */
.eq-reviews .wp-block-image img,
.eq-reviews figure img {
	height: auto;
	object-fit: initial;
}

@media (max-width: 900px) {
	.eq-review-grid {
		grid-template-columns: 1fr;
	}
}


/* ---- 35. Vinkjes en kruisjes in de keuzedozen -------------------------------
 * Gemeten op de bron: de ene lijst heeft fa-check in rgb(101,188,123), de andere
 * fa-times in rgb(226,0,0). Allebei staan die kleuren al in ons palet, als
 * `success` en `error`.
 *
 * Het teken komt uit CSS en niet uit een icoonlettertype. Font Awesome kost een
 * verzoek van tientallen kB en wij hebben er twee tekens uit nodig; op een demo
 * die over paginagewicht gaat is dat niet te verdedigen.
 */

.eq-room-box li {
	position: relative;
	padding-inline-start: 34px;
	min-height: 24px;
}

.eq-room-box li::before {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 24px;
	font-size: var(--wp--preset--font-size--h-4, 20px);
	line-height: 1.4;
	font-weight: 700;
}

.eq-room-box.is-voor li::before {
	content: "\2713";
	color: var(--wp--preset--color--success);
}

.eq-room-box.is-niet li::before {
	content: "\2715";
	color: var(--wp--preset--color--error);
}

/* De ondertitel onder LAUNCH en SCALE. */
.eq-level .eq-level-sub {
	font-size: var(--wp--preset--font-size--h-4, 20px);
	font-weight: 700;
	margin-block: 0;
}

/* De knop van een niveaukolom zakt ook naar de onderkant. */
.eq-level .wp-block-buttons {
	margin-block-start: auto;
}


/* ---- 36. De cijfercirkels en de aanmeldsectie -------------------------------
 * Op de bron staat elk cijfer in een ring van 220x220. Avada tekent die met een
 * counter-widget in JavaScript; een ring is een vorm en daar is geen script
 * voor nodig.
 */

.eq-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.eq-stat-circle {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.eq-stat-circle .eq-stat-number {
	margin: 0;
}

/* Het citaat sluit af met een vraag in goud. */
.eq-quote-band .eq-quote-vraag {
	color: var(--wp--preset--color--primary);
}

/* De aanmeldsectie: tekst links, formulier rechts. */
.eq-apply-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-apply-grid > * {
	margin-block: 0;
}

.eq-apply-tekst h2 {
	text-align: start;
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-apply-tekst p {
	line-height: var(--eq-leading-bron);
	margin-block: 0 var(--wp--preset--spacing--20);
}

.eq-apply-grid .eqw-form {
	max-width: none;
	margin-inline: 0;
}

@media (max-width: 900px) {
	.eq-apply-grid {
		grid-template-columns: 1fr;
	}
}


/* ---- 37. De stappenbalk van het aanmeldformulier ---------------------------
 * Het blok levert de balk en de knoppen; hier krijgen ze de kleuren van deze
 * site. De variabelen zijn de haakjes die het blok daarvoor biedt, dus er hoeft
 * geen enkele regel van de plugin overschreven te worden.
 */

.eq-apply-form .eqw-form,
.eq-apply-form .eqw-form__form {
	--eqw-form-stap-actief: var(--wp--preset--color--primary);
	--eqw-form-stap-actief-tekst: var(--wp--preset--color--on-primary);
	--eqw-form-stap-verder: var(--wp--preset--color--primary);
	--eqw-form-stap-verder-tekst: var(--wp--preset--color--on-primary);
	--eqw-form-radius: 15px;
}

.eq-apply-form .eqw-form__stappenbalk {
	gap: var(--wp--preset--spacing--10);
}

.eq-apply-form .eqw-form__stapnummer {
	width: 34px;
	height: 34px;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-ink);
}

.eq-apply-form .eqw-form__stapnummer.is-actief {
	border-color: var(--wp--preset--color--primary);
}

.eq-apply-form .eqw-form__stapknop {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-ink);
	min-height: 51px;
	font-size: var(--wp--preset--font-size--body);
}

.eq-apply-form .eqw-form__stapknop.is-verder {
	color: var(--wp--preset--color--on-primary);
}

/* De sectiekop binnen het formulier volgt de kleur van het paneel. */
.eq-apply-form .eqw-form__sectiekop {
	color: var(--wp--preset--color--on-ink);
	font-size: var(--wp--preset--font-size--form-field);
}


/* ---- 38. Aankruisgroepen op een donker paneel -------------------------------
 * Stap 4 en 6 van het aanmeldformulier zijn aankruisgroepen. De losse keuzes
 * krijgen van het blok de gewone tekstkleur, en op een donker paneel is dat
 * donkergrijs op donkergrijs — onleesbaar.
 *
 * Ook de vraag boven de groep en de uitleg eronder moeten mee.
 */

.eq-apply-form .eqw-form__choice label,
.eq-apply-form .eqw-form__group legend,
.eq-apply-form .eqw-form__legend,
.eq-apply-form .eqw-form__help,
.eq-apply-form .eqw-form__label {
	color: var(--wp--preset--color--on-ink);
}

.eq-apply-form .eqw-form__choice {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	margin-block-end: var(--wp--preset--spacing--10);
}

.eq-apply-form .eqw-form__choice input {
	margin-block-start: 3px;
	flex: 0 0 auto;
}

.eq-apply-form .eqw-form__choice label {
	line-height: var(--eq-leading-bron);
}

/* De vraag boven een aankruisgroep is op de bron vet. */
.eq-apply-form .eqw-form__group legend {
	font-weight: 700;
	margin-block-end: var(--wp--preset--spacing--15);
}


/* ---- 39. Koppen en kolommen op een beeldband --------------------------------
 * "CHOOSE YOUR LEVEL" stond donkergrijs op een donkere achtergrond: .eq-band-head
 * neemt de gewone tekstkleur, en die klopt op een witte band maar niet hier.
 *
 * En de twee niveaukolommen waren niet even hoog, waardoor hun knoppen op
 * verschillende hoogtes eindigden ondanks de auto-marge. `align-items: start`
 * laat een kolom op zijn inhoudshoogte staan; met `stretch` vullen ze allebei
 * de rij en zakt de knop in allebei naar de onderkant.
 */

.eq-level-band .eq-band-head,
.eq-phases-band .eq-band-head,
.eq-promo-band .eq-band-head {
	color: var(--wp--preset--color--on-ink);
}

.eq-level-grid {
	align-items: stretch;
}

.eq-level {
	height: 100%;
}


/* ---- 40. Minimale ruimte tussen onderdelen ---------------------------------
 * Er is een huisregel — een knoprij staat minstens 40 px onder de tekst, in een
 * hero 64 — maar niets bewaakte hem, en op /ocean-ai/ stond de regel onder de
 * knop in het herokader er tegenaan geplakt.
 *
 * Vanaf nu bewaakt scripts/kloon/afstanden.py dit: hij meet elk paar onderdelen
 * dat op elkaar volgt en meldt alles wat onder de norm zit. De regels hieronder
 * zijn wat die meting op ocean-ai vond.
 */

/* Onder een knop hoort adem: 0 px las als één blok. */
.eq-hero-callout .wp-block-buttons {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Boven een knop hoort scheiding van de tekst die hem uitlegt. */
.eq-phase .wp-block-buttons,
.eq-level .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* De alinea onder een kaartkop stond op 8. */
.eq-benefit h3 {
	margin-block-end: var(--wp--preset--spacing--15);
}


/* ---- 41. Gecentreerde tekst hoort smal te zijn ------------------------------
 * Martin merkte op dat het tekstblok op de donkere band van ocean-ai gecentreerd
 * staat. Gemeten op de bron staat het daar ÓÓK gecentreerd — maar op 815 px
 * breed, niet op 1248.
 *
 * Dat is het hele verschil. Een gecentreerde alinea over de volle kolom laat het
 * oog bij elke regel opnieuw zoeken waar hij begint; op 815 valt dat weg. De
 * eerste alinea is op de bron wél de volle breedte, de rest niet.
 */

.eq-band-dark > p {
	max-width: 815px;
	margin-inline: auto;
	text-align: center;
}

.eq-band-dark > p:first-of-type {
	max-width: var(--eq-kolom);
}

/* Het citaat bij het schema mag een slag groter. */
.eq-schema-quote .eq-quote-tekst {
	font-size: var(--wp--preset--font-size--h-3, 22px);
}

/* De rol onder de naam is op de bron 16 px in grijs. */
.eq-schema-quote .eq-quote-rol {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--muted-2);
}


/* ---- 42. Een kop met een gouden lijn ernaast --------------------------------
 * Op de bron staat "Everything you get inside the mastermind" tussen twee dunne
 * gouden lijnen die de rest van de breedte vullen.
 *
 * Twee pseudo-elementen in een flexrij: de lijnen groeien mee met wat er
 * overblijft. De kop mag dus elke lengte hebben en de lijnen kloppen altijd —
 * geen vaste breedte, geen beeld.
 */

.eq-band-head.heeft-lijnen {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--eq-kolom);
	margin-inline: auto;
}

.eq-band-head.heeft-lijnen::before,
.eq-band-head.heeft-lijnen::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background-color: var(--wp--preset--color--primary);
}

/* Op een smal scherm zou de kop tussen twee lijntjes geperst worden; daar
 * vervallen ze. */
@media (max-width: 700px) {
	.eq-band-head.heeft-lijnen::before,
	.eq-band-head.heeft-lijnen::after {
		display: none;
	}
}

/* ---- 43. Krapte die de afstandsmeter vond ----------------------------------
 * Vier plekken waar twee onderdelen te dicht op elkaar stonden. Gemeten met
 * scripts/kloon/afstanden.py; de norm staat in dat bestand.
 */

/* Een knop onder een beeld heeft 40 nodig, niet 24 of 36. */
.eq-promo-cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* TERUGGEDRAAID. Zie sectie 44: de bron zet hier 20 px, niet de huisnorm 40. */

/* De intro onder de formulierkop stond op 8. */
.eq-form-band .eqw-form__title {
	margin-block-end: var(--wp--preset--spacing--15);
}

/* De subkop onder de herokop stond op 10 op team-training. */
.eq-section.eq-hero-deep .eq-hero-text > .eq-hero-sub {
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* TERUGGEDRAAID, zie sectie 49.
 *
 * Hier stond `.eq-card-grid > .eq-card + .eq-card { margin-block-start: 24px }`,
 * bedoeld om twee kaarten die elkaar raken uit elkaar te houden. Maar een
 * .eq-card-grid is een flexRIJ, geen stapel: die regel duwde elke kaart behalve
 * de eerste 24 px omlaag, en omdat ze allemaal tot de onderkant rekken werd de
 * eerste kaart 24 px hoger dan de rest. Dat is precies de ragged hoogte die op
 * qualifications te zien was.
 *
 * Dit is de tweede keer dat een huisnormregel uit ronde 43 iets kapot maakte —
 * de eerste was het gat op /events/. Beide keren was de regel op zichzelf niet
 * gek en paste hij alleen niet op de plek waar hij terechtkwam. */


/* ---- 44. Op een kloon is de BRON de norm -----------------------------------
 * In ronde 43 kreeg de evenementkaart de huisnorm van 40 px tussen beeld en
 * knop, omdat de afstandsmeter 36 meldde. Op de bron staat daar 20. Een
 * huisregel hoort niet te winnen van een gemeten bronwaarde zolang we een kopie
 * maken; de meter kende het verschil niet en ik heb er niet naar gekeken.
 *
 * Daar kwam bij dat de kaart twee kanalen voor ruimte heeft — de flex-gap en de
 * `> * + *`-marge van WordPress. Ik zette alleen de gap, dus het werd 32 + 24 =
 * 56. Wie een afstand zet moet beide dichtzetten, anders meet hij zijn eigen
 * regel niet terug.
 *
 * scripts/kloon/bron-afstanden.py bewaakt dit vanaf nu: die legt elk paar naast
 * hetzelfde paar op de bron in plaats van naast een norm.
 */

.eq-event {
	gap: 20px;
}

/* WordPress' eigen flowmarge staat naast de gap en telt er bovenop. */
.eq-event > * {
	margin-block: 0;
}

/* ---- 45. Het privacyblok staat gecentreerd ---------------------------------
 * Op de bron is dit één gecentreerde alinea van 1188 px breed. Bij ons stond
 * hij links uitgelijnd over de volle kolom.
 */

.eq-privacy .eq-privacy-head,
.eq-privacy p {
	text-align: center;
	max-width: 1188px;
	margin-inline: auto;
}

.eq-privacy .eq-privacy-head {
	font-weight: 700;
}


/* ---- 46. De ruimte tussen twee formuliervelden -----------------------------
 * Gemeten met scripts/kloon/bron-afstanden.py op vier pagina's: de bron zet 20
 * px tussen twee velden, wij 32. Die 32 was 12 marge PLUS de 20 die WordPress
 * er met zijn `> * + *` bovenop zet — hetzelfde dubbele kanaal dat de
 * evenementkaart op 56 zette. Eén kanaal open, de ander dicht.
 *
 * Het bewijs dat dit klopt zit in een tweede getal: het gat van First Name tot
 * Job Title stond 68 px te ruim, en dat is zes velden maal de 12 die er per
 * veld te veel in zat.
 */

.eq-form-band .eqw-form__field {
	margin-block: 0 20px;
}

.eq-form-band .eqw-form__field + .eqw-form__field {
	margin-block-start: 0;
}


/* ---- 47. Beelden zijn VIERKANT, op twee plekken na ---------------------------
 * Deze sectie stond tot 1.23.6 andersom, en dat is het opschrijven waard.
 *
 * Er stond een standaardregel die ELK inhoudsbeeld 15 px afrondde, met een lijst
 * uitzonderingen voor logoʼs en badges die vierkant moesten blijven. De lijst
 * groeide, en dat is precies het signaal dat je aan de verkeerde kant staat.
 *
 * Nagemeten op de bron, acht paginaʼs, 65 beelden, elk beeld apart:
 *
 *     26 beelden   0px           vierkant
 *     29 beelden   2px 0 0 0     de cursusminiaturen op /courses/
 *     10 beelden   15px          de schermafdrukken op /reviews/
 *      0 beelden   10px
 *
 * De bron is dus vierkant als REGEL. Onze standaard rondde acht beelden af die
 * dat niet horen te zijn — de summit-banner, de brush-banner, de wereldkaart,
 * drie evenementbanners en het masterplan-schema — en Martin zag dat zelf, nog
 * voor een meting het bevestigde.
 *
 * Waarom de oude regel zo lang bleef staan: hij was ooit gemeten, maar op de
 * evenementKAARTEN, en die maat is toen tot sitebrede standaard gemaakt. Eén
 * plek waar iets waar is, is geen regel voor de hele site. Vandaar dat de twee
 * uitzonderingen hieronder allebei aan hun eigen component hangen en niet aan
 * een token dat overal geldt.
 *
 * De 15 px van /reviews/ staat bij het reviewraster (zoek .eq-review-grid img),
 * de 2 px van de cursusminiaturen staat hieronder. Verder rondt niets af.
 */

/* De vier reviewpillen op /team-training/. Zelfde goud als eq-cta-gold, maar
 * de bron zet ze rond: border-radius 50px tegen de 15 van een gewone knop.
 * Gemeten op de bron, alle vier: #F2B714, 18/700, radius 50. */
.eq-cta-pil .wp-block-button__link {
	border-radius: 50px;
}

/* De schermafdrukken op /reviews/: 15 px rondom, gemeten op de bron (tien
 * beelden, alle tien 15px). Deze regel hangt aan .eq-review-shot en niet aan
 * .eq-review-grid — die tweede staat verderop in dit bestand met dezelfde
 * waarde, maar de beelden zitten er niet in. Nagemeten in de browser: de keten
 * is img > figure.eq-review-shot > .eq-reviews-paneel-beelden. Een selector die
 * nergens op past faalt zonder één signaal, dus meet de uitkomst en niet de
 * regel. */
.eq-review-shot img,
.eq-review-shot.wp-block-image {
	border-radius: 15px;
}

/* De cursusminiatuur: alleen linksboven, en maar 2 px. Een fractie, maar hij
 * volgt de hoek van de kaart eromheen en zonder hem steekt het beeld zichtbaar
 * buiten de ronding van de kaart uit. */
.eq-cursuskaart__beeld img {
	border-radius: 2px 0 0 0;
}

/* ---- 48. De knop die op twee regels brak -----------------------------------
 * "Register to receive all the info directly to your inbox!" stond op 68 px
 * hoog waar de bron 51 zet. De knop was niet te hoog gemaakt: de tekst brak op
 * twee regels en duwde hem uit elkaar.
 *
 * Gemeten: de tekst is in onze Roboto 374 px breed en er zat 370 px in de knop.
 * Vier pixels. De bron heeft hetzelfde etiket op 359 px in zijn eigen letter en
 * dus ruimte zat — een gemeten maat overnemen zonder de letter erbij levert
 * geen kopie op maar een afbreking.
 *
 * De knop mag daarom groeien tot wat zijn tekst nodig heeft, binnen de ruimte
 * die er is (470 px). Breekt hij op een smal scherm alsnog, dan mag dat.
 */

.eq-cta-alarm .wp-block-button__link {
	min-height: 51px;
}

@media (min-width: 700px) {
	.eq-cta-alarm .wp-block-button,
	.eq-cta-alarm .wp-block-button__link {
		width: max-content;
		max-width: 100%;
		white-space: nowrap;
	}
}


/* ---- 49. Kaarten in een rij zijn even hoog ---------------------------------
 * Op qualifications was elke kaart een andere hoogte: 215, 239, 248, 252, 259,
 * 283, 295, 319, 339, 359, 363, 383. Op de bron is elke kaart in een rij precies
 * even hoog.
 *
 * De oorzaak was niet de inhoud. WordPress zet zijn `> * + *`-flowmarge op alle
 * kolommen BEHALVE de eerste, dus de eerste kaart begon 24 px hoger dan de rest
 * en werd daardoor ook 24 px hoger. Precies dat verschil zat er ook in: 383
 * tegen 359, en y1401 tegen y1425.
 *
 * Met de marge dicht doet de flexbox de rest: kolommen rekken van zichzelf tot
 * de hoogte van de langste.
 */

.eq-card-grid > .eq-card {
	margin-block: 0;
}


/* ---- 50. De kop van /reviews/ en de Reviews-Menu-strook --------------------
 * Gemeten op de bron met lokale beelden:
 *
 *   hero    1440x335 op #222222; titel 30,8 px / 700 in goud #F9C32D,
 *           alinea 20 px / 400 wit met regelhoogte 25, kolom 574 breed,
 *           links uitgelijnd — de rechterhelft van de band is leeg
 *
 *   strook  1440x192 op #333333, binnenkolom 1248 op 96 (de menukolom),
 *           "Reviews Menu" met daaronder zeven links van 16 px in #00AEDE,
 *           onder elkaar met een ritme van 20 px
 *
 * De kop van de strook staat op de bron in #333333 op een band van #333333 en
 * is daar dus onzichtbaar. Dat is een fout en geen ontwerp, dus hier staat hij
 * in wit; wie hem letterlijk wil zet --eq-reviews-menu-kop op #333333.
 */

/* De hero draagt zijn beeld als ACHTERGROND, niet als <img> — zo doet de bron
 * het ook. Gemeten op de live pagina:
 *
 *   background-image     mmc-reviews-image-v1  (bij ons dezelfde foto als webp)
 *   background-size      auto 480px            hoger dan de band, dus bijgesneden
 *   background-position  100% 50%              rechts, verticaal gecentreerd
 *
 * Over de linkerhelft ligt een verloop van #222222 naar doorzichtig, zodat de
 * tekst op een egale ondergrond staat en de foto er rechts uit komt. Op de bron
 * zit dat verloop op de tekstkolom van 649 px die op 61 begint; hier is het een
 * ::before over de eerste 710 px, los van de tekstbak — dan hangt de dekking
 * niet aan de breedte van de tekst.
 */

.eq-section.eq-hero-reviews {
	background-color: var(--wp--preset--color--ink-deep);
	background-image: var(--eq-reviews-hero-beeld,
		url("https://aimarketeer.pro/wp-content/uploads/2026/09/mmc-reviews-header.webp"));
	background-size: auto 480px;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	min-height: 335px;
	box-sizing: border-box;
	padding: 0;
	display: flex;
	align-items: center;
	position: relative;
}

.eq-section.eq-hero-reviews::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 710px;
	max-width: 72%;
	background-image: linear-gradient(90deg,
		var(--wp--preset--color--ink-deep) 88%, transparent 100%);
	pointer-events: none;
}

/* De tekst hoort boven het verloop, niet eronder. */
.eq-section.eq-hero-reviews > .eq-hero-text {
	position: relative;
	z-index: 1;
}

/* De inzet is een MARGE en geen padding.
 *
 * Eerst stond hier `padding-inline: var(--eq-inzet)` samen met een breedte van
 * 574. Die inzet groeit mee met het venster — 96 op 1440, maar 336 op 1920 —
 * dus op een breed scherm was de padding samen 672 en at hij de hele 574 op.
 * De tekstbak werd 0 px breed, de tekst brak op één letter per regel en de
 * hero werd 2201 px hoog in plaats van 335. Op 1440 was er niets te zien.
 *
 * Padding gaat van de breedte af, marge niet. Dat is het hele verschil. */
.eq-section.eq-hero-reviews > .eq-hero-text {
	margin-inline-start: var(--eq-inzet);
	padding-inline: 0;
	padding-block: var(--wp--preset--spacing--50);
}

.eq-section.eq-hero-reviews .eq-hero-lead {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30.8px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--wp--preset--color--primary-hover);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-section.eq-hero-reviews .eq-hero-intro {
	font-size: 20px;
	font-weight: 400;
	line-height: 25px;
	color: var(--wp--preset--color--on-ink);
	margin-block: 0;
}

/* -- de strook --
 *
 * GEMETEN OP DE LIVE BRON, niet op de spiegel. In de spiegel draait het
 * menuscript niet en valt de balk terug op een lijst onder elkaar; ik heb hem
 * eerst zo nagebouwd en dat was fout. De echte balk is 70 px hoog met de zeven
 * links naast elkaar, gecentreerd in de menukolom.
 *
 *   band       1440x70 op #333333
 *   lijst      flex row, 1248 op 96, gecentreerd, 20 px tussen de items
 *   item       13,6 px Roboto wit, padding 10px 5px
 *   actief     goud #F2B714 met een onderlijn van 3 px in dezelfde kleur
 *
 * Die actieve staat is dezelfde afspraak als in het hoofdmenu: de pagina waar
 * je op staat draagt de gouden lijn én gouden tekst.
 *
 * "☰ Reviews Menu" is op de bron de mobiele schakelaar en staat op een breed
 * scherm op display:none. Hier ook.
 */

.eq-section.eq-reviews-menu {
	background-color: var(--wp--preset--color--band);
	min-height: 70px;
	box-sizing: border-box;
	padding-block: 15px;
	padding-inline: 0;
}

.eq-section.eq-reviews-menu > .eq-reviews-menu-binnen {
	max-width: var(--eq-kolom);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

/* De kop is de mobiele schakelaar en hoort op een breed scherm niet te staan. */
.eq-reviews-menu-kop {
	display: none;
	font-size: 13.6px;
	font-weight: 400;
	color: var(--eq-reviews-menu-kop, var(--wp--preset--color--on-ink));
	margin: 0;
	width: 100%;
}

.eq-reviews-menu-item {
	margin: 0;
	font-size: 13.6px;
	line-height: 17px;
}

/* De bron meldt padding 10px 5px, maar zijn items zijn stuk voor stuk 16 px
 * breder dan de onze — en even veel breder bij "Reviews" van zeven tekens als
 * bij "Delegates & Students" van twintig. Een verschil dat niet meeschaalt met
 * de tekst is geen lettermaat maar een bak: er zit in de bron nog 8 px per kant
 * omheen die niet in de padding van de link staat.
 *
 * Wat een bezoeker ziet is de BAK, niet het mechaniek, dus die nemen we over.
 * Zonder dit staat de balk 114 px smaller dan op de bron. */
.eq-reviews-menu-item a {
	display: block;
	padding: 10px 13px;
	color: var(--wp--preset--color--on-ink);
	text-decoration: none;
	border-block-end: 3px solid transparent;
}

.eq-reviews-menu-item a:hover,
.eq-reviews-menu-item a:focus-visible {
	color: var(--wp--preset--color--primary);
	border-block-end-color: var(--wp--preset--color--primary);
}

/* De pagina waar je op staat: gouden tekst én de gouden lijn. */
.eq-reviews-menu-item.is-hier a,
.eq-reviews-menu-item a[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	border-block-end-color: var(--wp--preset--color--primary);
}

/* Op een smal scherm wordt het weer een lijst, met de kop erboven. */
@media (max-width: 900px) {
	.eq-section.eq-reviews-menu > .eq-reviews-menu-binnen {
		display: block;
	}

	.eq-reviews-menu-kop {
		display: block;
		margin-block-end: var(--wp--preset--spacing--10);
	}

	.eq-reviews-menu-item a {
		padding-inline: 0;
		border-block-end: 0;
	}
}

/* ---- 51. De kop van /reviews/ nagemeten -----------------------------------
 * Na de eerste ronde stond de kolom op 478 in plaats van 574, de band op 360 in
 * plaats van 335 en de strook op 222 in plaats van 192. Drie keer hetzelfde:
 * een maat die ergens anders vandaan kwam dan waar ik hem zette.
 *
 * De tekstkolom krijgt daarom zijn breedte expliciet, en de twee banden krijgen
 * een vaste hoogte in plaats van een minimum plus padding — de bron heeft daar
 * ook een vaste hoogte.
 */

.eq-section.eq-hero-reviews > .eq-hero-text {
	max-width: none;
	width: min(574px, calc(100% - var(--eq-inzet) * 2));
	padding-block: 0;
}

.eq-section.eq-hero-reviews .eq-hero-lead,
.eq-section.eq-hero-reviews .eq-hero-intro {
	max-width: 574px;
}


/* ---- 52. Reviews per categorie: linkermenu met panelen ---------------------
 * Gemeten op de LIVE bron (niet op de spiegel — daar staan de panelen dicht):
 *
 *   band       1440 breed, padding 45px 30px, geen grond
 *   menu       kolom van 305 px op 96 — de linkerkant van de menukolom
 *   item       14,4 px Roboto, padding-left 10, regelafstand ruim 33 px
 *              gekozen: #000000 en gewicht 700; de rest #333333 en 400
 *   paneel     914 px op 430, dus 29 px tussen menu en paneel
 *              twee kolommen van 442 met de schermafdrukken eronder elkaar
 *
 * Eén paneel tegelijk. Op de bron gebeurt dat met een script; hier ook, maar de
 * INHOUD blijft gewone blokken — geen geplakte HTML. Zonder script staan alle
 * panelen open en is de pagina nog steeds te lezen; dat is het uitgangspunt.
 */

.eq-reviews-cats {
	/* GEEN padding hier. De bron zet het menu op 96 — de linkerkant van de
	 * menukolom — en met 24 px padding erbij stond het op 120. Daarmee schoof
	 * het paneel mee naar 454 en werd het 866 in plaats van 914. Eén marge, drie
	 * afwijkingen. */
	max-width: var(--eq-kolom);
	margin-inline: auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 305px minmax(0, 1fr);
	gap: 29px;
	align-items: start;
}

/* -- het menu links -- */

.eq-reviews-cats-menu {
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: sticky;
	top: var(--wp--preset--spacing--30);
}

.eq-reviews-cat-item {
	margin: 0;
	font-size: 14.4px;
	line-height: 18px;
}

/* Elk item draagt een streepje van 5 px links: doorzichtig bij de rest, goud
 * bij de gekozen categorie. Dat streepje staat er ALTIJD — daarom verspringt de
 * tekst niet als je een andere categorie kiest.
 *
 * Op de bron is het streepje van de niet-gekozen items wit in plaats van
 * doorzichtig. Op een witte band is dat hetzelfde; doorzichtig blijft ook goed
 * als die band ooit een kleur krijgt. Dat is het enige verschil hier. */
.eq-reviews-cat-item a {
	display: block;
	box-sizing: border-box;
	padding-inline-start: 10px;
	border-inline-start: 5px solid transparent;
	color: var(--wp--preset--color--foreground);
	font-weight: 400;
	text-decoration: none;
}

.eq-reviews-cat-item a:hover,
.eq-reviews-cat-item a:focus-visible {
	color: var(--wp--preset--color--banner, #000);
	text-decoration: underline;
}

/* De gekozen categorie: zwart en vet, zoals op de bron. */
.eq-reviews-cat-item.is-gekozen a,
.eq-reviews-cat-item a[aria-current="true"] {
	color: var(--wp--preset--color--banner, #000);
	font-weight: 700;
	border-inline-start-color: var(--wp--preset--color--primary);
}

/* -- de panelen rechts -- */

.eq-reviews-paneel {
	scroll-margin-top: var(--wp--preset--spacing--50);
}

/* Twee kolommen met de afdrukken, zoals op de bron. De hoogtes lopen sterk
 * uiteen, dus dit is een kolomindeling en geen raster: dan sluiten ze aan. */
.eq-reviews-paneel-beelden {
	columns: 2;
	column-gap: 30px;
}

.eq-reviews-paneel-beelden > * {
	break-inside: avoid;
	margin-block: 0 30px;
}

.eq-reviews-paneel-beelden img {
	width: 100%;
	height: auto;
	display: block;
}

/* Zolang het script niet gedraaid heeft staat alles open — de pagina is dan nog
 * gewoon te lezen. Pas als hij draait wordt er iets verborgen. */
.eq-reviews-cats.is-schakelbaar .eq-reviews-paneel[hidden] {
	display: none;
}

@media (max-width: 900px) {
	.eq-reviews-cats {
		grid-template-columns: minmax(0, 1fr);
	}

	.eq-reviews-cats-menu {
		position: static;
	}

	.eq-reviews-paneel-beelden {
		columns: 1;
	}
}


/* ---- 53. De membershippagina ------------------------------------------------
 * Gemeten op de live bron (/ai-mind-merge-membership/, 27 banden, 25.642 px).
 *
 * De bron bouwt met Fusion-kolommen; wij doen hetzelfde met groepen en CSS. De
 * maten hieronder komen uit de meting:
 *
 *   volle kolom   1298 op x71     -> onze menukolom van 1248 op 96
 *   smalle kolom   865 op x287    -> gecentreerd, 865 breed
 *   labelrij       433 op x71 met de inhoud 865 op x504
 *   duo            twee kolommen van 649
 *   kaarten        drie kolommen van ongeveer 400
 *   team           vijf kolommen met een pasfoto en een naam
 *
 * Korpsmaten van de bron: h1 50 of 55, h2 36 (twee banden 56), h3 22, een
 * inleidende regel 25, lopende tekst 20.
 */

.eq-section.eq-mm-band {
	padding-block: var(--wp--preset--spacing--80);
	padding-inline: 0;
}

.eq-mm-binnen {
	max-width: var(--eq-kolom);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	box-sizing: border-box;
}

.eq-mm-smal,
.eq-mm-midden {
	max-width: 865px;
	margin-inline: auto;
	text-align: center;
}

/* -- typografie -- */

.eq-mm-titel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 55px;
	font-weight: 700;
	line-height: 1.08;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-mm-kop-donker .eq-mm-titel {
	font-size: 50px;
}

.eq-mm-kop {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-mm-smal .eq-mm-kop {
	font-size: 56px;
}

.eq-mm-subkop {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin-block: 0 var(--wp--preset--spacing--15);
}

.eq-mm-lead {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.35;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-mm-band p,
.eq-mm-band li {
	font-size: 20px;
	line-height: 1.5;
}

.eq-mm-lijst {
	padding-inline-start: var(--wp--preset--spacing--30);
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-mm-lijst li {
	margin-block-end: var(--wp--preset--spacing--15);
}

/* Op een donkere band is de tekst wit; de bron doet dat ook. */
.eq-mm-band.has-background,
.eq-mm-band.has-background p,
.eq-mm-band.has-background li,
.eq-mm-band.has-background h1,
.eq-mm-band.has-background h2,
.eq-mm-band.has-background h3 {
	color: var(--wp--preset--color--on-ink);
}

/* -- de indelingen -- */

.eq-mm-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.eq-mm-label-rij {
	display: grid;
	grid-template-columns: 433px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.eq-mm-kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

.eq-mm-kaart {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--15);
}

.eq-mm-kaart-titel {
	font-size: 22px;
	font-weight: 700;
	margin-block: 0;
}

.eq-mm-team {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--50);
}

.eq-mm-lid {
	text-align: center;
}

.eq-mm-portret img {
	width: 135px;
	height: 135px;
	object-fit: cover;
	border-radius: 50%;
	margin-inline: auto;
}

.eq-mm-naam {
	font-weight: 700;
	margin-block: var(--wp--preset--spacing--15) 0;
}

.eq-mm-faq {
	max-width: 865px;
	margin-inline: auto;
}

.eq-mm-faq-item {
	border-block-end: 1px solid var(--wp--preset--color--border-dark, #444);
	padding-block: var(--wp--preset--spacing--20);
}

.eq-mm-vraag {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

.eq-mm-knoprij {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

.eq-mm-cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

.eq-mm-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-weight: 700;
	font-size: 20px;
	padding: 16px 32px;
	border-radius: 4px;
}

.eq-mm-media img,
.eq-mm-merk img {
	width: 100%;
	height: auto;
}

.eq-mm-merk img {
	width: 300px;
	margin-inline: auto;
}

.eq-mm-prijsregel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.eq-mm-prijsregel .eq-mm-cta {
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.eq-mm-duo,
	.eq-mm-label-rij,
	.eq-mm-kaarten {
		grid-template-columns: minmax(0, 1fr);
	}

	.eq-mm-team {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eq-mm-titel {
		font-size: 36px;
	}

	.eq-mm-smal .eq-mm-kop,
	.eq-mm-kop {
		font-size: 28px;
	}
}


/* Het cijfer boven een statistiek, en het antwoord onder een vraag. */
/* Het gewicht moet hoger dan `.eq-mm-band p` (0,1,1), anders staat een getal
 * van 48 px op 20. Gemeten op de live pagina: computed 20px terwijl deze regel
 * 48 zegt. Een klassenaam alleen weegt 0,1,0 en verliest van een klasse plus
 * een elementnaam — ook al staat hij later in het bestand. */
.eq-mm-band .eq-mm-cijfer,
.eq-mm-cijfer {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.05;
	color: var(--wp--preset--color--primary);
	margin-block: 0 var(--wp--preset--spacing--10);
}

.eq-mm-antwoord {
	margin-block: var(--wp--preset--spacing--15) 0;
}


/* -- de twee kopbanden van de membershippagina, op de bron gemeten --
 *
 * De prijsregel: een gouden vlak om "£97 £47 per month" met DONKERE tekst, en
 * daarbinnen een <del> om alleen het oude bedrag. De doorhaling hoort op het
 * binnenste element: zet je hem op het vlak, dan loopt de streep door het vlak
 * heen in plaats van door het cijfer.
 */

.eq-mm-uitgelicht {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	padding-inline: 6px;
}

.eq-mm-uitgelicht del {
	text-decoration: line-through;
	color: inherit;
}

/* De h1 van de tweede band is goud, niet wit. */
.eq-mm-band .eq-mm-goud,
.eq-mm-band.has-background .eq-mm-goud {
	color: var(--wp--preset--color--primary);
}

/* De regel eronder: 28 px, zwaar, lichtgrijs. */
.eq-mm-band .eq-mm-onderkop,
.eq-mm-band.has-background .eq-mm-onderkop {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
	color: #d3d3d3;
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eq-mm-prijskop {
	font-size: 30px;
	font-weight: 700;
}


/* ---- 54. Knoppen, het masker en de prijsregel -------------------------------
 * Gemeten op de live bron.
 *
 *   hoofdknop    radius 30, hoogte 57, padding 18/40, tekst 20/700 wit
 *   reviewknop   radius 50, hoogte 55, padding 17/40, tekst 18/700 wit
 *
 * De 6 px afgeronde knoppen die je op de bron tegenkomt zijn van de
 * cookiebanner en niet van MMC; die tellen niet mee.
 */

.eq-mm-cta .wp-block-button__link {
	border-radius: 30px;
	padding: 18px 40px;
	font-size: 20px;
	line-height: 21px;
}

.eq-mm-knoprij .wp-block-button__link {
	border-radius: 50px;
	padding: 17px 40px;
	font-size: 18px;
	line-height: 21px;
}

/* -- het masker over de raket --
 *
 * De bron legt een blob-masker op het beeld zelf: geen clip-path, geen radius,
 * geen laagje eroverheen. De SVG staat hier als data-URI, dus het masker kost
 * geen extra verzoek.
 *
 * mask-size is 100% 100% en niet `contain`: de SVG heeft viewBox 600x460 en
 * het beeld is 599x599, dus `contain` zou de verhouding bewaren en een andere
 * uitsnede geven dan de bron. De bron rekt het masker op tot het vierkant.
 */

.eq-mm-media img {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22600%22%20height%3D%22460%22%20viewBox%3D%220%200%20600%20460%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M163.766%2060.4266C198.009%20-23.758%20305.346%20-5.38893%20417.977%2028.2465C563.572%2071.7253%20729.157%20196.506%20444.19%20418.376C350.155%20491.564%20279.714%20455.086%20236.046%20409.164C196.019%20366.871%20146.586%20342.425%2095.0467%20339.435C39.4184%20336.319%20-17.6046%20314.23%205.12219%20231.061C30.353%20138.941%20129.533%20144.611%20163.766%2060.4266Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22600%22%20height%3D%22460%22%20viewBox%3D%220%200%20600%20460%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M163.766%2060.4266C198.009%20-23.758%20305.346%20-5.38893%20417.977%2028.2465C563.572%2071.7253%20729.157%20196.506%20444.19%20418.376C350.155%20491.564%20279.714%20455.086%20236.046%20409.164C196.019%20366.871%20146.586%20342.425%2095.0467%20339.435C39.4184%20336.319%20-17.6046%20314.23%205.12219%20231.061C30.353%20138.941%20129.533%20144.611%20163.766%2060.4266Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
	/* GEMETEN op de bron: contain met positie 50% 0%.
	 *
	 * Hier stond 100% 100% op grond van een REDENERING: de viewBox is 600x460
	 * en het beeld is vierkant, dus contain zou de verhouding bewaren. Die
	 * redenering klopte en het antwoord niet — met 100% 100% viel de bovenkant
	 * van de raket weg. Meten, niet afleiden. */
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 0%;
	mask-position: 50% 0%;
}

/* Alleen de raket draagt het masker; de andere beelden in een duo niet. */
.eq-mm-media img:not([src*="rocket"]) {
	-webkit-mask-image: none;
	mask-image: none;
}

/* -- de prijsregel naast zijn knop --
 *
 * Op de bron vallen de middens van "£41.42/month. Billed yearly." en de knop
 * exact samen: 0 px verschil. Dat komt niet van marges maar van de gedeelde
 * ouder met align-items: center. Zo blijft het ook kloppen als de tekst ooit
 * twee regels wordt.
 */

.eq-mm-prijsregel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}

.eq-mm-prijsregel > * {
	margin-block: 0;
}


/* ---- 55. De twee soorten bolletjes ------------------------------------------
 * Allebei goud met radius 50%, maar niet dezelfde maat en niet dezelfde inhoud:
 *
 *   vinkjeslijst   34x34, een wit vinkje
 *   genummerd      44x44, een wit cijfer van 17,6 px
 *
 * Het vinkje is op de bron een FontAwesome-glyph. Hier is het een SVG-pad in een
 * data-URI: een compleet icoonlettertype laden voor één vinkje is dezelfde
 * verspilling die de bron ook maakt met vijf sterretjes in het reviewsblok.
 *
 * De cijfers komen uit een CSS-teller. In de brontekst zitten ze vastgeplakt
 * aan het eerste woord, en die worden er bij het bouwen afgehaald.
 *
 * Het bolletje staat 12 px lager dan de bovenkant van de tekst ernaast: het
 * lijnt uit op de eerste REGEL en niet op het blok.
 */

.eq-mm-lijst.is-vinkjes,
.eq-mm-lijst.is-genummerd {
	list-style: none;
	padding-inline-start: 0;
	margin-block: 0;
}

.eq-mm-lijst.is-vinkjes li,
.eq-mm-lijst.is-genummerd li {
	position: relative;
	margin-block-end: var(--wp--preset--spacing--30);
}

.eq-mm-lijst.is-vinkjes li::before,
.eq-mm-lijst.is-genummerd li::before {
	content: "";
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

/* -- het vinkje -- */

.eq-mm-lijst.is-vinkjes li {
	padding-inline-start: 58px;
}

.eq-mm-lijst.is-vinkjes li::before {
	width: 34px;
	height: 34px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.2%2011.8%202.6%208.2l1.2-1.2%202.4%202.4%205.9-5.9%201.2%201.2z%22%2F%3E%3C%2Fsvg%22");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

/* -- het cijfer -- */

.eq-mm-lijst.is-genummerd {
	counter-reset: eqmm;
}

.eq-mm-lijst.is-genummerd li {
	counter-increment: eqmm;
	padding-inline-start: 68px;
	min-height: 44px;
}

.eq-mm-lijst.is-genummerd li::before {
	content: counter(eqmm);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17.6px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--on-ink);
}


/* ---- 56. De golvende sectiescheidingen --------------------------------------
 * Gemeten op de live bron: 23 op de membershippagina, 4 op ocean-ai, en op de
 * andere zeven pagina's geen enkele. Ze staan aan de BOVENKANT van een band en
 * zijn 100 px hoog.
 *
 * WAAROM GEEN mask-image. De vorm bestaat uit vijf heuvels met oplopende
 * dekking — 0,12 / 0,18 / 0,24 / 0,30 / 1,0 — en dat is precies wat hem diepte
 * geeft. Een masker plet die vijf lagen tot één vlak en dan is het effect weg.
 * Dus gaat de SVG als achtergrondbeeld mee, met de kleur en de dekkingen erin
 * gebakken. Vier combinaties, samen ongeveer 6 kB, en nul extra verzoeken.
 *
 * De scheiding hoort BINNEN de band en niet ertussen: op de bron valt zijn
 * bovenkant samen met de bovenkant van de band. De band krijgt daarom 100 px
 * extra ruimte bovenin.
 */

.eq-section.heeft-scheiding {
	position: relative;
	/* De scheiding staat BINNEN de band en is 100 px hoog, dus de band heeft
	 * er bovenin ruimte voor nodig bovenop zijn eigen padding. */
	padding-block-start: calc(var(--eq-scheiding-ruimte, var(--wp--preset--spacing--80)) + 100px);
}

.eq-section.heeft-scheiding::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 100px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	pointer-events: none;
}

.eq-section.heeft-scheiding.vorm-1::before {
	background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22fusion-hills-opacity-candy%22%20fill%3D%22%23333333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20viewBox%3D%220%200%201024%20182%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20opacity%3D%220.12%22%20d%3D%22M0%200h1024v140.5C995.9%20162%20963.9%20178%20926.9%20178c-112.8%200-198.1-93.8-289.8-93.8s-199.5%2091-285.3%2091-142.2-82.1-238.5-82.1c-63.1%200-75.7%2031.6-113.3%2053.6V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.18%22%20d%3D%22M1024%200v75.9C984.3%2060%20942.2%2048.6%20905.3%2050.1c-110.4%204.5-191.8%20109.8-325.5%20116.2C470.6%20171.5%20235.6%2046.1%20150.3%200H1024z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.24%22%20d%3D%22M0%200h1024v92c-57.5%2030.9-116.9%2073.7-199.9%2075-133.8%202-158.9-87.9-342-87.9S202.1%20183.7%2074.2%20182c-27.8-.3-52.4-4.2-74.2-9.7V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.3%22%20d%3D%22M0%200h1024v101.6C986.8%2082%20943.3%2066.3%20884.4%2065.4%20733.3%2063%20742.8%2094%20585.9%2094.6S447%2047.6%20280.4%2050.9C132.8%2053.6%2091.2%20137.5%200%20154V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%221%22%20d%3D%22M0%200h1024v77.3c-49-20.1-120.5-42.4-193.2-42.1-128.9.5-159.8%2072.3-255.8%2072.3-89.1%200-134.7-80.2-245-82-110.4-1.8-160.9%2057.2-280%2059.2-17.2.3-33.9-1.8-50-5.7V0z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
}

.eq-section.heeft-scheiding.vorm-1-zwart::before {
	background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22fusion-hills-opacity-candy%22%20fill%3D%22%23111012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20viewBox%3D%220%200%201024%20182%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20opacity%3D%220.12%22%20d%3D%22M0%200h1024v140.5C995.9%20162%20963.9%20178%20926.9%20178c-112.8%200-198.1-93.8-289.8-93.8s-199.5%2091-285.3%2091-142.2-82.1-238.5-82.1c-63.1%200-75.7%2031.6-113.3%2053.6V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.18%22%20d%3D%22M1024%200v75.9C984.3%2060%20942.2%2048.6%20905.3%2050.1c-110.4%204.5-191.8%20109.8-325.5%20116.2C470.6%20171.5%20235.6%2046.1%20150.3%200H1024z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.24%22%20d%3D%22M0%200h1024v92c-57.5%2030.9-116.9%2073.7-199.9%2075-133.8%202-158.9-87.9-342-87.9S202.1%20183.7%2074.2%20182c-27.8-.3-52.4-4.2-74.2-9.7V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.3%22%20d%3D%22M0%200h1024v101.6C986.8%2082%20943.3%2066.3%20884.4%2065.4%20733.3%2063%20742.8%2094%20585.9%2094.6S447%2047.6%20280.4%2050.9C132.8%2053.6%2091.2%20137.5%200%20154V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%221%22%20d%3D%22M0%200h1024v77.3c-49-20.1-120.5-42.4-193.2-42.1-128.9.5-159.8%2072.3-255.8%2072.3-89.1%200-134.7-80.2-245-82-110.4-1.8-160.9%2057.2-280%2059.2-17.2.3-33.9-1.8-50-5.7V0z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
}

.eq-section.heeft-scheiding.vorm-2::before {
	background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22fusion-hills-opacity-candy%22%20fill%3D%22%23333333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20viewBox%3D%220%20-0.5%201024%20182%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20opacity%3D%220.12%22%20d%3D%22M0%20182.086h1024V41.593c-28.058-21.504-60.109-37.581-97.075-37.581-112.845%200-198.144%2093.798-289.792%2093.798S437.658%206.777%20351.846%206.777s-142.234%2082.125-238.49%2082.125c-63.078%200-75.776-31.744-113.357-53.658L0%20182.086z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.18%22%20d%3D%22M1024%20181.062v-75.878c-39.731%2015.872-80.794%2027.341-117.658%2025.805-110.387-4.506-191.795-109.773-325.53-116.224-109.158-5.12-344.166%20120.115-429.466%20166.298H1024v-.001z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.24%22%20d%3D%22M0%20182.086h1024V90.028C966.451%2059.103%20907.059%2016.3%20824.115%2015.071%20690.278%2013.023%20665.19%20102.93%20482.099%20102.93S202.138-1.62%2074.24.019C46.49.326%2021.811%204.217%200%209.849v172.237z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.3%22%20d%3D%22M0%20182.086h1024V80.505c-37.171%2019.558-80.691%2035.328-139.571%2036.25-151.142%202.355-141.619-28.57-298.496-29.184s-138.854%2047.002-305.459%2043.725C132.813%20128.428%2091.238%2044.563%200%2028.179v153.907z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%221%22%20d%3D%22M0%20182.086h1024v-77.312c-49.05%2020.07-120.525%2042.394-193.229%2042.086-128.922-.512-159.846-72.294-255.795-72.294-89.088%200-134.656%2080.179-245.043%2082.022S169.063%2099.346%2049.971%2097.401C32.768%2097.094%2016.077%2099.244%200%20103.135v78.951z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
}

.eq-section.heeft-scheiding.vorm-2-wit::before {
	background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22fusion-hills-opacity-candy%22%20fill%3D%22%23ffffff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20viewBox%3D%220%20-0.5%201024%20182%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20opacity%3D%220.12%22%20d%3D%22M0%20182.086h1024V41.593c-28.058-21.504-60.109-37.581-97.075-37.581-112.845%200-198.144%2093.798-289.792%2093.798S437.658%206.777%20351.846%206.777s-142.234%2082.125-238.49%2082.125c-63.078%200-75.776-31.744-113.357-53.658L0%20182.086z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.18%22%20d%3D%22M1024%20181.062v-75.878c-39.731%2015.872-80.794%2027.341-117.658%2025.805-110.387-4.506-191.795-109.773-325.53-116.224-109.158-5.12-344.166%20120.115-429.466%20166.298H1024v-.001z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.24%22%20d%3D%22M0%20182.086h1024V90.028C966.451%2059.103%20907.059%2016.3%20824.115%2015.071%20690.278%2013.023%20665.19%20102.93%20482.099%20102.93S202.138-1.62%2074.24.019C46.49.326%2021.811%204.217%200%209.849v172.237z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.3%22%20d%3D%22M0%20182.086h1024V80.505c-37.171%2019.558-80.691%2035.328-139.571%2036.25-151.142%202.355-141.619-28.57-298.496-29.184s-138.854%2047.002-305.459%2043.725C132.813%20128.428%2091.238%2044.563%200%2028.179v153.907z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%221%22%20d%3D%22M0%20182.086h1024v-77.312c-49.05%2020.07-120.525%2042.394-193.229%2042.086-128.922-.512-159.846-72.294-255.795-72.294-89.088%200-134.656%2080.179-245.043%2082.022S169.063%2099.346%2049.971%2097.401C32.768%2097.094%2016.077%2099.244%200%20103.135v78.951z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
}


/* Ocean-ai gebruikt vorm 1 ook in wit; membership had die combinatie niet. */
.eq-section.heeft-scheiding.vorm-1-wit::before {
	background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22fusion-hills-opacity-candy%22%20fill%3D%22%23ffffff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20viewBox%3D%220%200%201024%20182%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20opacity%3D%220.12%22%20d%3D%22M0%200h1024v140.5C995.9%20162%20963.9%20178%20926.9%20178c-112.8%200-198.1-93.8-289.8-93.8s-199.5%2091-285.3%2091-142.2-82.1-238.5-82.1c-63.1%200-75.7%2031.6-113.3%2053.6V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.18%22%20d%3D%22M1024%200v75.9C984.3%2060%20942.2%2048.6%20905.3%2050.1c-110.4%204.5-191.8%20109.8-325.5%20116.2C470.6%20171.5%20235.6%2046.1%20150.3%200H1024z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.24%22%20d%3D%22M0%200h1024v92c-57.5%2030.9-116.9%2073.7-199.9%2075-133.8%202-158.9-87.9-342-87.9S202.1%20183.7%2074.2%20182c-27.8-.3-52.4-4.2-74.2-9.7V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%220.3%22%20d%3D%22M0%200h1024v101.6C986.8%2082%20943.3%2066.3%20884.4%2065.4%20733.3%2063%20742.8%2094%20585.9%2094.6S447%2047.6%20280.4%2050.9C132.8%2053.6%2091.2%20137.5%200%20154V0z%22%3E%3C%2Fpath%3E%20%3Cpath%20opacity%3D%221%22%20d%3D%22M0%200h1024v77.3c-49-20.1-120.5-42.4-193.2-42.1-128.9.5-159.8%2072.3-255.8%2072.3-89.1%200-134.7-80.2-245-82-110.4-1.8-160.9%2057.2-280%2059.2-17.2.3-33.9-1.8-50-5.7V0z%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E");
}


/* ---- 57. Drie gemeten afwijkingen op de voorpagina --------------------------
 * Het beoordelingsbeeld in de kop staat op de bron op 175x26 en bij ons op
 * 200x29.
 *
 * De chatknop overlapte op mobiel de knop "See Details": 131x10 px, 21 procent
 * van die knop, in de eerste vouw. Oorzaak is dat de knop 366 px breed werd op
 * een scherm van 390 — vrijwel de volle breedte, terwijl het een ZWEVENDE knop
 * hoort te zijn. Op een breed scherm valt dat niet op omdat er niets onder zit.
 * Hij krijgt daarom de breedte van zijn eigen inhoud.
 */

.eq-site-nav-reviews img {
	width: 175px;
	height: 26px;
}

@media (max-width: 700px) {
	/* Een zwevende knop hoort zo breed te zijn als zijn tekst, niet zo breed
	 * als het scherm. Hij was 366 px op een scherm van 390 en dekte daarmee een
	 * vijfde van de knop "See Details" eronder af, in de eerste vouw.
	 *
	 * Alleen versmallen was niet genoeg: op 195 px overlapte hij nog 22 procent.
	 * Op een smal scherm vervalt daarom het label en blijft het pictogram over —
	 * dat is wat een zwevende chatknop op mobiel overal doet, en het is de enige
	 * maat die de knop eronder vrij laat. */
	.eqw-chat {
		width: max-content;
		max-width: calc(100vw - 24px);
		inset-inline-start: auto;
	}

	.eqw-chat__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.eqw-chat__knop {
		width: 52px;
		height: 52px;
		justify-content: center;
		border-radius: 50%;
		padding: 0;
	}
}


/* ---- 58. De typografie van de voorpagina -----------------------------------
 * De pagina stond op 53 procent van de bronhoogte, en dat komt niet doordat er
 * inhoud ontbreekt — de teksten zijn er, ze staan alleen veel te klein.
 *
 * Gemeten, bron naast kloon:
 *
 *   "We unite visionary thinkers…"   37,8px/700   tegen 22px/700
 *   "Our 2030 mission – …"           42px/700     tegen 16px/500
 *   "Mapping Our Community"          36px/700     tegen 22px/700, en op de
 *                                                 bron is de eerste regel goud
 *
 * De inleidende band heeft op de bron 100 px padding boven en onder; wij hadden
 * 45. Samen maakt dat het verschil tussen 169 en 405 px.
 *
 * `eq-home-intro` is een eigen klasse voor deze band: `eq-hero` staat ook op de
 * hero van andere pagina's en die hebben hun eigen maten.
 */

.eq-section.eq-home-intro {
	padding-block: 100px;
}

.eq-section.eq-home-intro .eq-hero-lead {
	font-size: 37.8px;
	font-weight: 700;
	line-height: 1.1;
}

/* De missiezin. De familie en de kapitalisatie komen hier, niet van
 * .eq-hero-eyebrow: die generieke regel geldt ook op /ocean-ai/, waar de bron
 * wél hoofdletters zet.
 *
 * Gemeten op 390, dezelfde zin op allebei:
 *
 *     BRON   Roboto Condensed  none    min-content 300   venster 390
 *     KLOON  Roboto            upper   min-content 396   venster 426
 *
 * De brede snit plus hoofdletters maakt van "Entrepreneurs." een woord van
 * 397 px in een venster van 390, en één woord dat niet past rekt de hele pagina
 * op. De gerenderde breedte was ondertussen 330 en dus onverdacht — bij
 * overloop meet je het langste woord, niet wat je ziet. */
.eq-section.eq-home-intro p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
}

/* -- de kop boven de wereldkaart -- */

.eq-world-map-heading {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.53;
	text-align: center;
}

/* Op de bron staat de eerste regel in goud. Het is één kop met een <br>, dus de
 * kleur zit op de eerste regel en niet op een tweede element. */
.eq-world-map-heading .eq-goud {
	color: var(--wp--preset--color--primary);
}


/* ---- 59. De cursuscatalogus op /courses/ ------------------------------------
 * De pagina stond op 244 woorden tegen 2.132 op de bron, met vier koppen die
 * alle vier uit de VOETTEKST kwamen: geen H1, geen intro, geen enkele cursus.
 *
 * De bron zet er drie banden neer. Alle maten hieronder zijn gemeten op
 * mmclearning.com/courses/ bij een venster van 1440, niet geschat:
 *
 *   band 1  H1, gecentreerd, 24px/700 Roboto Condensed #333
 *   band 2  één uitgelichte kaart van 614 — een ANDERE vorm dan de rest:
 *           geen beeld, geen prijs, knoppen naast elkaar, ronding 5
 *   band 3  twee kolommen, 225 filter en 1023 lijst, samen 1248
 *
 * De lijstkaart is een rij van drie bakken die samen 1003 meten:
 *
 *   beeld 155  |  tekst 668 (padding 12)  |  zijde 180 (padding 12)
 *
 * Waarom een grid en geen flex: de drie bakken hebben een VASTE verhouding en
 * de middelste moet de rest opvullen. Met flex krimpt de middelste bak mee met
 * zijn inhoud, en dan staat de prijskolom bij een korte beschrijving ineens
 * ergens anders. Bij dertig kaarten onder elkaar zie je dat meteen.
 *
 * De kaart heeft GEEN eigen achtergrond op de bron; hij drijft op de witte
 * pagina met alleen een schaduw. Dat is hier overgenomen.
 */

/* -- band 1: de paginakop -- */

/* Eén paginakop voor de hele site, niet per pagina een eigen naam. Martin
 * vroeg uitdrukkelijk om consequente maten; /events/ gebruikt daarom exact
 * dezelfde band en dezelfde koptekstmaat als /courses/. De oude namen staan
 * ernaast zodat de bestaande pagina's niet opnieuw gebouwd hoeven te worden. */
.eq-section.eq-paginakop,
.eq-section.eq-courses-kop {
	padding-block: 36px 0;
}

.eq-paginatitel,
.eq-courses-titel {
	font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
	color: #333333;
	text-align: center;
	margin-block: 0;
}

/* De intro onder de H1: 16px/400, regelhoogte 20, marge 0 0 20 op de bron. */
.eq-courses-intro {
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;
	color: #333333;
	margin-block: 20px 20px;
}

/* -- band 2: de uitgelichte kaart -- */

.eq-section.eq-courses-uitgelicht {
	padding-block: 150px 0;
}

/* -- band 3: filter naast de lijst -- */

.eq-section.eq-courses-body {
	/* 100 px was de bronmaat; op verzoek van Martin gehalveerd naar 50, omdat
	 * die ruimte tussen de intro en het filter als een gat las. Dit is de ENIGE
	 * bron van dat gat — geen optelsom van marge plus padding, zoals elders in
	 * dit bestand wel het geval was. Gemeten: intro eindigt op 313, paneel begon
	 * op 413. */
	padding-block: 50px 60px;
}

/* De balk boven de lijst. Op de bron een <div> en geen kop; hij blijft hier ook
 * een alinea, anders telt de pagina een kop meer dan het origineel. */
.eq-catalogus-balk {
	font-size: 20px;
	font-weight: 700;
	line-height: 25px;
	color: #333333;
	margin-block: 0 20px;
}

.eq-courses-raster {
	display: grid;
	grid-template-columns: 225px minmax(0, 1fr);
	align-items: start;
}

/* -- het filterpaneel -- */

.eq-filters {
	border: 2px solid #eeeeee;
	padding: 10px 10px 10px 20px;
}

.eq-filtergroep__kop {
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	margin-block: 0 16px;
	padding-block-start: 15px;
	cursor: pointer;
}

/* Het teken achter de kop hoort bij de TOESTAND, niet bij de tekst. Zet je het
 * in de tekst, dan staat er een plus naast een open groep zodra het script
 * draait, en klopt de voorleesvolgorde ook niet meer. */
.eq-filtergroep__kop::after {
	content: "‒";
	float: inline-end;
}

.eq-filtergroep.is-dicht .eq-filtergroep__kop::after {
	content: "+";
}

.eq-filtergroep__lijst {
	list-style: none;
	margin-block: 16px;
	padding-inline: 0;
	font-size: 12.8px;
	font-weight: 400;
	color: #333333;
}

.eq-filtergroep__lijst li {
	line-height: 26px;
	margin-block: 0;
}

.eq-filtergroep.is-dicht .eq-filtergroep__lijst {
	display: none;
}

/* -- de lijst met kaarten -- */

.eq-cursuslijst {
	padding: 20px 0 20px 20px;
}

.eq-cursuskaart {
	display: grid;
	grid-template-columns: 155px minmax(0, 1fr) 180px;
	border-radius: 2px;
	box-shadow: 0 0 30px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	margin-block: 0 25px;
}

/* WordPress zet `> * + *` marges op een groep. In een grid slaat die regel het
 * eerste kind over en duwt hij alleen de rest omlaag — dan staat het beeld te
 * hoog tegenover de tekst ernaast. */
.eq-cursuskaart > * {
	margin-block: 0;
}

.eq-cursuskaart__beeld {
	margin: 0;
}

.eq-cursuskaart__beeld img {
	display: block;
	width: 150px;
	height: 84px;
	object-fit: cover;
}

.eq-cursuskaart__tekst {
	padding: 12px;
}

.eq-cursuskaart__zijde {
	padding: 12px;
}

.eq-cursuskaart__titel {
	font-size: 21.6px;
	font-weight: 400;
	line-height: 24.84px;
	color: #333333;
	margin-block: 0 10px;
	/* De bron zet de titels met een hoofdletter per woord OP, niet IN de tekst:
	 * in de database staat "CIM Award in AI Marketing" en op het scherm
	 * "CIM Award In AI Marketing". Dat verschil kostte me een halve nameting —
	 * de tekstvergelijking meldde 22 titels als afwijkend terwijl alleen de
	 * weergave anders was. */
	text-transform: capitalize;
}

.eq-cursuskaart__titel a {
	color: #0d2bab;
	text-decoration: none;
}

.eq-cursuskaart__titel a:hover,
.eq-cursuskaart__titel a:focus-visible {
	text-decoration: underline;
}

.eq-cursuskaart__meta {
	font-size: 13.6px;
	font-weight: 700;
	color: #333333;
	margin-block: 0 10px;
}

.eq-cursuskaart__excerpt {
	font-size: 13.6px;
	font-weight: 400;
	line-height: 17px;
	color: #333333;
	margin-block: 0 10px;
}

/* -- prijs, oude prijs, kortingsregel -- */

.eq-cursuskaart__prijsbak {
	text-align: right;
	margin-block: 0 15px;
}

.eq-cursuskaart__prijsbak > * {
	margin-block: 0;
}

.eq-cursuskaart__prijs {
	font-size: 21.6px;
	font-weight: 700;
	color: #333333;
}

.eq-cursuskaart__oudeprijs {
	font-size: 16px;
	font-weight: 400;
	color: #999999;
	text-decoration: line-through;
}

.eq-cursuskaart__korting {
	font-size: 12px;
	font-weight: 700;
	border-radius: 5px;
	padding: 4px 5px;
	/* inline-block, niet block: het label hoort om de TEKST te vallen en niet
	 * over de volle kolom. Op de bron is het een <span> in de prijsregel. */
	display: inline-block;
	margin-block-start: 5px;
}

.eq-korting--groen {
	background-color: #00c968;
	color: #ffffff;
}

.eq-korting--grijs {
	background-color: #f4f4f4;
	color: #333333;
}

/* -- de knoppen -- */

.eq-cursuskaart__knoppen {
	gap: 0;
	flex-direction: column;
}

.eq-cursusknop .wp-block-button__link {
	display: block;
	width: 155px;
	font-size: 12.8px;
	font-weight: 700;
	line-height: 1.2;
	border-radius: 5px;
	padding: 7px 5px;
	margin-block-end: 7px;
	text-align: center;
}

.eq-cursusknop--omlijnd .wp-block-button__link {
	background-color: #ffffff;
	color: #333333;
	border: 1px solid #333333;
}

.eq-cursusknop--rood .wp-block-button__link {
	background-color: #ce2029;
	color: #ffffff;
	border: 1px solid #ce2029;
}

/* -- de uitgelichte kaart: een andere vorm -- */

.eq-cursuskaart--uitgelicht {
	display: block;
	max-width: 614px;
	padding: 12px;
	border-radius: 5px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	margin-block: 0;
}

.eq-cursuskaart--uitgelicht .eq-cursuskaart__knoppen.is-plat {
	flex-direction: row;
	flex-wrap: wrap;
}

.eq-cursuskaart--uitgelicht .eq-cursusknop .wp-block-button__link {
	width: auto;
	padding: 10px;
	margin: 0 10px 5px 0;
}

/* -- een kop die alleen de voorlezer hoort -- */

.eq-alleen-voorlezer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* -- smal: de drie bakken onder elkaar -- */

@media (max-width: 900px) {
	.eq-courses-raster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Dit paneel stond hier op `display: none`, met een eerlijke reden: de bron
	 * laat het op mobiel weg (gemeten op 390: `.filters-body` is daar 0x0), en
	 * inline kostte het bij ons 608 px boven de eerste cursus.
	 *
	 * Die redenering klopte toen het paneel niets deed. Sinds er echt gefilterd
	 * kan worden is 608 px niet meer de enige keuze: dichtgeklapt kost het één
	 * regel, en dan heeft een bezoeker op de telefoon het filter wél. Zie §86. */

	.eq-cursuslijst {
		padding: 20px 0 0;
	}

	.eq-cursuskaart {
		grid-template-columns: minmax(0, 1fr);
	}

	.eq-cursuskaart__beeld img {
		width: 100%;
		height: auto;
		aspect-ratio: 800 / 448;
	}

	.eq-cursuskaart__prijsbak {
		text-align: left;
	}

	.eq-cursusknop .wp-block-button__link {
		width: 100%;
	}

	.eq-section.eq-courses-uitgelicht {
		padding-block: 60px 0;
	}

	.eq-section.eq-courses-body {
		/* Ook gehalveerd: 40 naar 20. Gemeten op 390: intro eindigt op 394, de
		 * filterknop begon op 434. */
		padding-block: 20px 40px;
	}
}


/* ---- 60. De brush-banner op de voorpagina -----------------------------------
 * Drie dingen klopten hier niet, alle drie gemeten naast de bron bij 1440 px.
 *
 * 1. DE VOLGORDE. De banner stond bij ons bovenaan en op de bron als DERDE, na
 *    de summit- en de assistentenbanner. Dat is geen opmaak maar bandvolgorde
 *    en is in de pagina zelf rechtgezet:
 *
 *        bron    summit 280   assistenten 1219   brush 1950   kaart 3725
 *        was     brush  150   summit      672    assistenten 1545   kaart 3432
 *        nu      summit 150   assistenten 1023   brush 1891   kaart 3432
 *
 * 2. DE KLEUR. De bron zet #23282C op de band, wij #333333. Dat scheelt weinig
 *    op een schermafdruk en is naast elkaar meteen te zien.
 *
 * 3. DE HOOGTE. Op de bron is de band precies zo hoog als het beeld: 410 om
 *    410. Bij ons 522 om 426, dus 48 px lucht boven en onder die er niet hoort.
 *
 * WAAROM IK DIT EERDER MISTE, en dat is de eigenlijke les: ik meldde dat de
 * Jim Rohn-quote van onze voorpagina verdwenen was. Die quote staat IN de
 * afbeelding. Een tekstzoekopdracht over document.body.innerText vindt hem
 * daarom nooit — hij meldde netjes "niet aanwezig" op de bron én bij ons, en
 * dat las ik als bevestiging. Tekst in een plaatje is voor elke tekstmeter
 * onzichtbaar; alleen kijken hielp.
 */

.eq-section.eq-home-banner {
	background-color: #23282c;
	padding-block: 0;
}

.eq-section.eq-home-banner img {
	display: block;
	margin-inline: auto;
}


/* ---- 61. De gouden lijnen boven en onder de banners -------------------------
 * Martin miste "de gouden balken". Gemeten op de bron bij 1440 px, met een
 * script dat elk element met een gouden vlak of rand opzoekt in plaats van
 * op het oog te zoeken:
 *
 *   bron   header.fusion-header-wrapper   border-bottom 3px #f2b714
 *          band 1 (SEE DETAILS)           border-top EN -bottom 3px #f2b714
 *          band 2 (REGISTER HERE)         border-top EN -bottom 3px #f2b714
 *   kloon  nul
 *
 * De lijn onder de KOP hoort bij de navigatielaag en staat in navigatie.css.
 * Deze twee zijn de sectielijnen en horen hier.
 *
 * Alleen op `.eq-banner`, en dat raakt niets anders: die klasse staat op de
 * voorpagina en op een dubbele pagina, nergens in de rest van de site.
 * Nagegaan over alle 26 pagina's voordat ik hem schreef, want een sitebrede
 * regel op een klasse die je niet hebt geteld is hoe opmaak afdrijft.
 */

/* `.eq-banner` alleen, NIET `.eq-section.eq-banner`. Die banden dragen de
 * klasse eq-section niet — nagekeken in de pagina zelf: er staat
 * `class="wp-block-group eq-banner"`. Mijn eerste versie eiste allebei en pakte
 * daarom nergens; de nameting gaf één gouden rand in plaats van drie. */
.eq-banner {
	border-block: 3px solid var(--wp--preset--color--primary, #f2b714);
}


/* ---- 62. Een grote kop die geen H1 is --------------------------------------
 * Op /ai-labs-membership/ stonden TWEE h1's. De bron heeft ze ook allebei —
 * "MIND-MERGE AI MEMBERSHIP SECURE YOUR FUTURE" op 50px en "MIND-MERGE
 * MEMBERSHIP" op 55px — dus dit is geen kloonfout maar een BEWUSTE afwijking
 * van de bron: de afspraak is één h1 per pagina, want dat is waar een
 * zoekmachine en een schermlezer lezen waar de pagina over gaat.
 *
 * De tweede is daarom een h2 geworden. Alleen het NIVEAU verandert, niet wat
 * je ziet: deze klasse houdt hem op de 55px van de bron.
 */

.eq-kop-groot {
	font-size: 55px;
	line-height: 1.1;
}


/* ---- 63. Landen op een kaart, niet eronder ---------------------------------
 * De menu-items wijzen naar /courses/#anker. Gemeten na de sprong:
 *
 *   desktop 1440   kaart op y=0, kop weggescrold  -> goed
 *   mobiel 390     kaart op y=0, maar de VASTE balk loopt tot y=59
 *
 * Op mobiel blijft de balk van 56 px staan. De kaart landt daar keurig op y=0
 * en verdwijnt dus met zijn titel onder die balk. Het anker werkt, de bezoeker
 * ziet het verkeerde — precies het verschil tussen "het anker bestaat" en "je
 * komt erop uit".
 *
 * `scroll-margin` lost dat op zonder iets aan de opmaak te veranderen: de
 * browser rekent de sprong met die marge erbij. 72 px is de balk van 56 plus
 * 16 lucht, zodat de titel vrij staat en niet tegen de rand plakt.
 *
 * Alleen onder 1024, want daarboven is de balk niet vast en scrollt hij weg.
 */

@media (max-width: 1023px) {
	.eq-cursuskaart {
		/* Deze marge is de BALKHOOGTE plus 16 px lucht, en de balk is drie
		 * keer gegroeid: 56 -> 59 (de gouden lijn kwam erop) -> 91 (het logo
		 * 50 procent groter, op verzoek van Martin). Dus 72 -> 75 -> 107.
		 *
		 * Dat dit steeds moet meebewegen is geen toeval: het is één maat die
		 * op twee plekken staat, in navigatie.css en hier. Loopt hij achter,
		 * dan schuift de kaarttitel weer onder de balk — en dat zie je pas als
		 * je KLIKT, niet als je meet. */
		scroll-margin-block-start: 107px;
	}
}


/* ---- 64. De flyerbanden: achtergrond en knop -------------------------------
 * Martin: "de flyers vullen niet de hele breedte." De flyer zelf is het niet —
 * die meet op mobiel 330 bij een kantlijn van 30, gelijk aan de bron, en op
 * desktop bij ons zelfs breder. Er ontbraken twee andere dingen.
 *
 * DE ACHTERGROND. Gemeten op de bron bij 1440:
 *
 *   band 1 (y=202, 1440x939) en band 2 (y=1141, 1440x809) dragen
 *   linear-gradient(rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 100%),
 *   url(abstract-colourful-painting-background.jpg)
 *   cover / 50% 50% / no-repeat
 *
 * Let op de SLUIER: het schilderij zit onder 85 procent zwart. Wie alleen het
 * beeld overneemt krijgt een bonte band die niets met de bron te maken heeft.
 * Bij ons stond er een vlakke #333333 — dichtbij, maar zonder textuur.
 *
 * Het beeld is gesideload (id 375, 1310x670, 107.830 bytes WebP tegen 124.680
 * JPEG op de bron), niet gehotlinkt.
 *
 * DE KNOP. Gemeten naast elkaar:
 *
 *              bron                      kloon
 *   maat       815x51                    131x46
 *   ronding    15px                      30px
 *   vlak       #f9c32d                   #f2b714
 *   tekst      wit, PT Sans, UPPERCASE   #333333, Roboto, geen transform
 *   padding    15px 25px                 12px 24px
 *
 * Dat verschil van 815 tegen 131 is waarschijnlijk óók wat Martin als "vult de
 * breedte niet" ziet: op de bron is het een balk over de inhoudskolom, bij ons
 * een pilletje.
 *
 * TWEE BEWUSTE AFWIJKINGEN VAN DE BRON, allebei gemeld in plaats van stil
 * doorgevoerd:
 *
 *   1. PT Sans nemen we NIET over. Dat zou een derde lettertype zijn en de
 *      regel is dat een derde alleen met expliciete toestemming komt. Roboto
 *      op 16/700 met hoofdletters staat er dicht genoeg bij.
 *   2. Witte tekst op #f9c32d haalt een contrast van ongeveer 1,9:1. Dat is
 *      ver onder elke norm. De bron doet het zo en ik neem het over omdat de
 *      opdracht "gelijk aan het origineel" is, maar het staat hier zodat het
 *      een keuze blijft en geen ongeluk.
 */

.eq-banner {
	background-color: #333333;
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%),
		url("https://aimarketeer.pro/wp-content/uploads/2026/09/flyer-achtergrond.webp");
	background-size: cover, cover;
	background-position: 50% 50%, 50% 50%;
	background-repeat: no-repeat, no-repeat;
}

/* -- de knop onder de flyer -- */

/* De breedte hoort op de WRAPPER, niet op de link. `width: 100%` op de <a>
 * vult zijn ouder, en die ouder is `.wp-block-button` — een div die zich in een
 * flexrij naar zijn inhoud voegt. Honderd procent van 146 px is 146 px, en dat
 * is precies wat ik de eerste keer maat. */
.eq-banner .eq-banner-actie .wp-block-button {
	width: 100%;
	max-width: 815px;
	margin-inline: auto;
}

.eq-banner .eq-banner-actie .wp-block-button__link {
	/* 815 op de bron bij een inhoudskolom van 1248. Onder die breedte vult hij
	 * de kolom; daarboven blijft hij op 815 staan, zoals de bron. */
	display: block;
	width: 100%;
	margin-inline: auto;
	padding: 15px 25px;
	border-radius: 15px;
	background-color: #f9c32d;
	/* ZWART, en dat is een bewuste afwijking van de bron. Die zet hier wit op
	 * #f9c32d, wat op 1,9:1 uitkomt en dus onder elke leesbaarheidsgrens. Op
	 * Martins aanwijzing zwart; dat haalt 11,6:1. */
	color: #000000;
	text-transform: uppercase;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
}

.eq-banner .eq-banner-actie {
	justify-content: center;
}


/* ---- 65. Drie dingen die Martin aanwees op 7 september ----------------------
 *
 * Alle drie zijn eerst op de LIVE pagina geïnjecteerd en gemeten. Twee van de
 * drie verloren in de eerste poging van een bestaande regel, en dat is precies
 * waarom die stap er is: een uitrol kost tien minuten en een verkeerde selector
 * twintig.
 */

/* --- 65a. Het eventbeeld tegen de rand --------------------------------------
 * Het beeld stond 1248 breed in een venster van 1440: 96 px wit aan elke kant.
 *
 * Wat NIET werkte, en waarom het hier niet staat: een negatieve marge op de
 * figure ter grootte van de bandpadding. Die rekende op
 * `--wp--style--root--padding-left`, en dat token is op deze site LEEG. `var()`
 * met een lege waarde valt niet terug op de fallback — de fallback geldt alleen
 * als het token niet bestaat — dus de calc werd ongeldig en de marge viel weg.
 * Gemeten: figure 1380 in plaats van 1440.
 *
 * Dus neemt de band zelf zijn padding weg en krijgt de knop eronder die terug.
 * Minder elegant, volledig voorspelbaar. Gemeten na injectie: beeld 1440 op
 * x=0, en de scrollbreedte blijft 1440.
 *
 * De `a` moet `display: block`: hij omsluit het beeld en krimpt anders naar de
 * inhoud, waardoor `width: 100%` op het beeld tegen de eigen breedte oplost.
 * Dezelfde val als bij de flyerknop en de logostrook eerder deze week. */
.eq-banner {
	padding-inline: 0;
	/* De drift uit sectie 67 schuift het beeld 9 px naar rechts, en de entree
	 * schaalt het even naar 1.04. Zonder deze regel steekt dat buiten het
	 * venster: gemeten scrollWidth 393 bij een gevraagde 390. De band vangt het
	 * op. Geen sticky kinderen hierbinnen, dus dit kost niets. */
	overflow: hidden;
}

.eq-banner .eq-banner-actie {
	padding-inline: 30px;
}

.eq-banner .eq-banner-beeld {
	max-width: none;
	width: auto;
	margin-inline: 0;
}

.eq-banner .eq-banner-beeld a {
	display: block;
}

.eq-banner .eq-banner-beeld img {
	width: 100%;
	max-width: none;
}

/* --- 65b. De dubbele pijl achter See Details --------------------------------
 * De bron zet achter deze knoppen een `fa-angle-double-right`. Gemeten op de
 * bron: 18x20 op font-size 20, kleur #333, margin-left 14 — en in een
 * evenementkaart 16px in #333.
 *
 * Zelf getekend als masker in plaats van Font Awesome te laden. Deze demo gaat
 * over paginagewicht — we hebben er 332 kB aan sectie-CSS uit gehaald — en een
 * icoonfont binnenhalen voor één vorm ondermijnt precies dat punt. Een dubbele
 * chevron is meetkundig: twee lijnen, exact na te tekenen. Onder een kilobyte.
 *
 * `currentColor` als vulling, dus de pijl volgt de tekstkleur en blijft kloppen
 * als die ooit verandert. */
:root {
	--eq-pijl-dubbel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M3 5l7 7-7 7M11 5l7 7-7 7'/%3E%3C/svg%3E");
}

.eq-banner .eq-banner-actie .wp-block-button__link::after,
.eq-event .eq-cta-gold .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.9em;
	margin-inline-start: 14px;
	vertical-align: -0.08em;
	background-color: currentColor;
	-webkit-mask: var(--eq-pijl-dubbel) center / contain no-repeat;
	mask: var(--eq-pijl-dubbel) center / contain no-repeat;
}

.eq-event .eq-cta-gold .wp-block-button__link {
	color: #000000;
}

/* --- 65c. De introband: wit op donker ---------------------------------------
 * Gemeten op de bron: de band draagt `linear-gradient(#333333, #222222)` en de
 * tekst is wit, met het middendeel in #F2B714.
 *
 * De tekstkleur kwam uit `.eq-hero:not(.has-background) .eq-hero-text p`. Mijn
 * eerste poging schreef `.eq-section.eq-home-intro p` en verloor: `:not()` telt
 * mee voor het gewicht, dus die regel weegt 0,3,1 en de mijne woog 0,2,1. Met
 * `.eq-hero-text` erin weegt hij gelijk en staat hij later in het bestand.
 *
 * Het gouden middendeel hangt aan een span in de inhoud; zie eq-accent. */
.eq-section.eq-home-intro {
	background-image: linear-gradient(#333333 0%, #222222 100%);
}

.eq-section.eq-home-intro .eq-hero-text p,
.eq-section.eq-home-intro .eq-hero-lead,
.eq-section.eq-home-intro .eq-hero-eyebrow {
	color: #ffffff;
}

.eq-accent {
	color: #f2b714;
}


/* ---- 66. De tellercirkels op de voorpagina ---------------------------------
 * Gemeten op de bron: 150x150, streek 7,5, gevuld #F9C32D op #F2F3F5, van 0
 * naar 100 procent in 1500 ms zodra hij in beeld komt, met een goud pictogram
 * van 34 px erin.
 *
 * De zes items stonden er al als kaarten met een kop en een tekst; alleen de
 * cirkel ontbrak. Op de bron staan ze twee per rij met de cirkel LINKS van de
 * tekst; bij ons stonden ze drie per rij. Die indeling gaat hier in de CSS via
 * `display: contents` op de kolomblokken, zodat de zes kaarten kinderen van één
 * raster worden. De inhoud blijft ongemoeid — een blokstructuur herbouwen voor
 * iets wat opmaak is, is de dure oplossing voor het goedkope probleem.
 *
 * GEEN ICOONFONT. Deze demo gaat over paginagewicht; we hebben er 332 kB
 * sectie-CSS uit gehaald. Vier vormen zijn samen ruim onder een kilobyte als
 * masker. Ze zijn gelijkwaardig aan die van de bron en niet identiek — dat is
 * een bewuste afwijking en hij staat in het afwijkingenregister.
 */

.eq-section.eq-cirkels .eq-card-grid {
	display: contents;
}

.eq-section.eq-cirkels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px 56px;
	align-items: start;
}

.eq-section.eq-cirkels .eq-card {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 24px;
	row-gap: 6px;
	align-items: center;
	align-content: center;
	flex-basis: auto;
	/* De bron zet hier geen kader om. Onze .eq-card draagt er elders wel een,
	 * en die kwam mee: rand plus ronding waar het origineel niets heeft.
	 * Ronding alleen waar de bron hem heeft — ook als hij van een gedeelde
	 * klasse komt in plaats van uit een eigen regel. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* De ring staat links over de volle hoogte; kop en tekst staan allebei in de
 * tweede kolom. Zonder deze regel valt de tweede alinea terug naar kolom 1 en
 * staat de tekst ONDER de cirkel in een strook van 150 px — precies wat de
 * eerste afdruk liet zien. Een grid vult vanzelf de volgende cel; wie dat niet
 * uitschrijft krijgt de indeling die het raster kiest, niet die hij bedoelde. */
.eq-section.eq-cirkels .eq-card > .eq-ring {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.eq-section.eq-cirkels .eq-card > :not(.eq-ring) {
	grid-column: 2;
}

@media (max-width: 900px) {
	.eq-section.eq-cirkels {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) {
	.eq-section.eq-cirkels .eq-card {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}
}

/* --- de ring zelf --------------------------------------------------------
 * Het vulpercentage is een echte custom property, geregistreerd met @property.
 * Alleen dan kan de browser ertussen animeren; een gewone custom property
 * springt van 0 naar 100 zonder tussenstappen. Zonder @property-ondersteuning
 * staat de ring meteen vol — de eindstaat, niet leeg. */
@property --eq-ring-vul {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%;
}

.eq-ring {
	position: relative;
	width: 150px;
	height: 150px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}

.eq-ring-baan {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(#f9c32d var(--eq-ring-vul, 100%),
	                           #f2f3f5 var(--eq-ring-vul, 100%));
	/* De ring is een schijf met een gat: het masker houdt de buitenste 7,5 px
	 * over. Zo werkt hij op elke achtergrond, ook op de donkere banden. */
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7.5px),
	                              #000 calc(100% - 7.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 7.5px),
	                      #000 calc(100% - 7.5px));
}

.eq-ring-ico {
	position: relative;
	width: 34px;
	height: 34px;
	background-color: #f9c32d;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}

/* --- de vier pictogrammen, zelf getekend --------------------------------- */
.eq-ico-toga {
	--ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20512%27%3E%3Cpath%20fill%3D%27%2523000%27%20d%3D%27M622.34%20153.2L343.4%2067.5c-15.2-4.67-31.6-4.67-46.79%200L17.66%20153.2c-23.54%207.23-23.54%2038.36%200%2045.59l48.63%2014.94c-10.67%2013.19-17.23%2029.28-17.88%2046.9C38.78%20266.15%2032%20276.11%2032%20288c0%2010.78%205.68%2019.85%2013.86%2025.65L20.33%20428.53C18.11%20438.52%2025.71%20448%2035.94%20448h56.11c10.24%200%2017.84-9.48%2015.62-19.47L82.14%20313.65C90.32%20307.85%2096%20298.78%2096%20288c0-11.57-6.47-21.25-15.66-26.87.76-15.02%208.44-28.3%2020.69-36.72L296.6%20284.5c9.06%202.78%2026.44%206.25%2046.79%200l278.95-85.7c23.55-7.24%2023.55-38.36%200-45.6zM352.79%20315.09c-28.53%208.76-52.84%203.92-65.59%200l-145.02-44.55L128%20384c0%2035.35%2085.96%2064%20192%2064s192-28.65%20192-64l-14.18-113.47-145.03%2044.56z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-ico-medaille {
	--ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Cpath%20fill%3D%27%2523000%27%20d%3D%27M223.75%20130.75L154.62%2015.54A31.997%2031.997%200%200%200%20127.18%200H16.03C3.08%200-4.5%2014.57%202.92%2025.18l111.27%20158.96c29.72-27.77%2067.52-46.83%20109.56-53.39zM495.97%200H384.82c-11.24%200-21.66%205.9-27.44%2015.54l-69.13%20115.21c42.04%206.56%2079.84%2025.62%20109.56%2053.38L509.08%2025.18C516.5%2014.57%20508.92%200%20495.97%200zM256%20160c-97.2%200-176%2078.8-176%20176s78.8%20176%20176%20176%20176-78.8%20176-176-78.8-176-176-176zm92.52%20157.26l-37.93%2036.96%208.97%2052.22c1.6%209.36-8.26%2016.51-16.65%2012.09L256%20393.88l-46.9%2024.65c-8.4%204.45-18.25-2.74-16.65-12.09l8.97-52.22-37.93-36.96c-6.82-6.64-3.05-18.23%206.35-19.59l52.43-7.64%2023.43-47.52c2.11-4.28%206.19-6.39%2010.28-6.39%204.11%200%208.22%202.14%2010.33%206.39l23.43%2047.52%2052.43%207.64c9.4%201.36%2013.17%2012.95%206.35%2019.59z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-ico-laptop {
	--ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20512%27%3E%3Cpath%20fill%3D%27%2523000%27%20d%3D%27M624%20416H381.54c-.74%2019.81-14.71%2032-32.74%2032H288c-18.69%200-33.02-17.47-32.77-32H16c-8.8%200-16%207.2-16%2016v16c0%2035.2%2028.8%2064%2064%2064h512c35.2%200%2064-28.8%2064-64v-16c0-8.8-7.2-16-16-16zM576%2048c0-26.4-21.6-48-48-48H112C85.6%200%2064%2021.6%2064%2048v336h512V48zm-64%20272H128V64h384v256z%27%2F%3E%3C%2Fsvg%3E");
}

.eq-ico-mensen {
	--ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20640%20512%27%3E%3Cpath%20fill%3D%27%2523000%27%20d%3D%27M96%20224c35.3%200%2064-28.7%2064-64s-28.7-64-64-64-64%2028.7-64%2064%2028.7%2064%2064%2064zm448%200c35.3%200%2064-28.7%2064-64s-28.7-64-64-64-64%2028.7-64%2064%2028.7%2064%2064%2064zm32%2032h-64c-17.6%200-33.5%207.1-45.1%2018.6%2040.3%2022.1%2068.9%2062%2075.1%20109.4h66c17.7%200%2032-14.3%2032-32v-32c0-35.3-28.7-64-64-64zm-256%200c61.9%200%20112-50.1%20112-112S381.9%2032%20320%2032%20208%2082.1%20208%20144s50.1%20112%20112%20112zm76.8%2032h-8.3c-20.8%2010-43.9%2016-68.5%2016s-47.6-6-68.5-16h-8.3C179.6%20288%20128%20339.6%20128%20403.2V432c0%2026.5%2021.5%2048%2048%2048h288c26.5%200%2048-21.5%2048-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5%20263.1%20145.6%20256%20128%20256H64c-35.3%200-64%2028.7-64%2064v32c0%2017.7%2014.3%2032%2032%2032h65.9c6.3-47.4%2034.9-87.3%2075.2-109.4z%27%2F%3E%3C%2Fsvg%3E");
}

/* --- de kop van een item ------------------------------------------------- */
.eq-section.eq-cirkels .eq-card-title {
	font-size: 20px;
	margin-block: 0 8px;
}

/* --- de beweging ---------------------------------------------------------
 * De ring vult zich pas als hij in beeld komt. `.is-in` wordt door
 * assets/js/mmc-beweging.js gezet; zonder dat script staat de ring gewoon vol.
 * De beginstaat wordt dus NOOIT als aparte klasse gezet — dan zou een falend
 * script een lege ring achterlaten. */
.is-in .eq-ring-baan {
	animation: eq-ring-vullen 1500ms cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes eq-ring-vullen {
	from { --eq-ring-vul: 0%; }
	to   { --eq-ring-vul: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.is-in .eq-ring-baan {
		animation: none;
	}
}


/* ---- 67. De eventbanner: laag 1 van de animatie ----------------------------
 * Uit Martins handoff. Het plan beschrijft een entreecyclus over elf elementen
 * — titelregels, belofte, datum, prijs, pijl, knop, url, vier sprekers — en
 * eindigt met het open punt dat die cyclus veronderstelt dat de banner als HTML
 * is herbouwd.
 *
 * Dat is hij niet: de banner is één JPEG met de tekst erin gebakken. Martin
 * heeft dat bevestigd. Van het plan is dus alleen LAAG 1 uitvoerbaar, en dat is
 * precies wat hier staat: het geheel komt op, met de drift eronder. De rest van
 * de cyclus staat klaar zodra de banner uit losse onderdelen bestaat.
 *
 * De eis "mag nauwelijks vertragen" is leidend geweest:
 *   - alleen transform, opacity en box-shadow — nooit top/left/width/height
 *   - geen filter: blur in een lus
 *   - geen GSAP; één IntersectionObserver voor de hele pagina
 *   - will-change staat er NIET: de drift is te traag om het te verdienen, en
 *     een blijvende compositielaag kost meer dan hij oplevert
 *
 * De beginstaat wordt pas toegekend NA `.is-in`, via animation-fill-mode: both.
 * Zonder JS staat de banner er dus gewoon — geen verborgen beginklasse.
 */
.eq-banner.is-in .eq-banner-beeld {
	animation: eq-banner-op 600ms cubic-bezier(.2, .7, .3, 1) both,
	           eq-banner-drift 18s ease-in-out 600ms infinite alternate;
}

@keyframes eq-banner-op {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: 1; transform: scale(1); }
}

/* Deze drift maakt dat het beeld tijdens de beweging tot 9 px buiten de band
 * steekt. Een meter die op dat moment kijkt ziet "18 elementen over de rand" —
 * dat is de animatie halverwege, geen fout. De band knipt het af (overflow:
 * hidden in 65a) en de scrollbreedte blijft gelijk aan het venster.
 *
 * Dit staat hier omdat de menusessie het meldde als een waarneming zonder
 * actie, en de volgende die het ziet anders gaat zoeken naar een marge die er
 * niet is. Gemeten: figure marge 0/0, band op x=0, figure op x=4 — dat verschil
 * KAN alleen een transform zijn. */
@keyframes eq-banner-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(9px, -6px, 0); }
}

/* De knop komt na het beeld op, en houdt daarna een rustige gloed. Geen scale:
 * een knop die van grootte lijkt te pulseren leest als een fout. */
.eq-banner.is-in .eq-banner-actie {
	animation: eq-knop-op 300ms ease-out 560ms both;
}

@keyframes eq-knop-op {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.eq-banner.is-in .eq-banner-actie .wp-block-button__link {
	animation: eq-knop-gloed 3s ease-in-out 900ms infinite;
}

@keyframes eq-knop-gloed {
	0%, 100% { box-shadow: 0 0 0 0 rgba(242, 183, 20, 0); }
	50%      { box-shadow: 0 0 18px 2px rgba(242, 183, 20, .35); }
}

.eq-banner .eq-banner-actie .wp-block-button__link:hover {
	transform: translateY(-2px);
	transition: transform 160ms ease-out;
}

/* Beginstaat is eindstaat, dus dit is genoeg. Het script zet `is-in` in dit
 * geval trouwens al niet. */
@media (prefers-reduced-motion: reduce) {
	.eq-banner.is-in .eq-banner-beeld,
	.eq-banner.is-in .eq-banner-actie,
	.eq-banner.is-in .eq-banner-actie .wp-block-button__link {
		animation: none;
	}
	.eq-banner .eq-banner-actie .wp-block-button__link:hover {
		transform: none;
	}
}


/* ---- 68. De FAQ als accordeon ----------------------------------------------
 * Op de bron staat de FAQ dicht; bij ons stond alles open. Gemeten op "Can I
 * pay monthly?": bron antwoord zichtbaar=false met hoogte 0, kloon zichtbaar
 * met hoogte 60.
 *
 * Nu een `core/details`. Geen plugin, geen los HTML-blok en nul kilobyte
 * JavaScript — een `details` klapt uit zichzelf open. Op een demo die over
 * paginagewicht gaat is dat het argument.
 *
 * De inhoud van een dichte `details` staat gewoon in de HTML, dus er gaat
 * niets verloren voor een zoekmachine of een AI-crawler. Dat is bij een
 * accordeon altijd de eerste vraag.
 *
 * De vraag staat als PLATTE tekst in de summary: `core/details` bewaart hem als
 * attribuut en HTML daarin breekt de blokvalidatie. Dat kost ons de zestien
 * koppen die de bron wél houdt — die zet elke vraag twee keer neer, als kop en
 * als toggle-label. Bewuste afwijking, zie het afwijkingenregister.
 *
 * `summary + *` en niet `:first-of-type` voor de eerste rij eronder:
 * :first-of-type telt PER ELEMENTSOORT en pakt dus de eerste p, de eerste div
 * en de eerste details tegelijk.
 */
.eq-faq {
	border-block-end: 1px solid rgba(51, 51, 51, .16);
	margin-block: 0;
	padding-block: 4px;
}

.eq-faq > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	list-style: none;
}

/* De standaard driehoek van de browser weg — hij staat links en de bron zet
 * rechts een chevron. Safari heeft daar een eigen pseudo-element voor. */
.eq-faq > summary::-webkit-details-marker {
	display: none;
}

.eq-faq > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--eq-chevron-omlaag) center / contain no-repeat;
	mask: var(--eq-chevron-omlaag) center / contain no-repeat;
	transition: transform 180ms ease-out;
}

.eq-faq[open] > summary::after {
	transform: rotate(180deg);
}

.eq-faq > summary + * {
	margin-block-start: 0;
}

.eq-faq > :not(summary) {
	padding-block-end: 8px;
}

:root {
	--eq-chevron-omlaag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 8l8 8 8-8'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
	.eq-faq > summary::after {
		transition: none;
	}
}


/* ---- 69. Lijsttekens, alleen waar de bron ze zet ---------------------------
 * Gemeten op de bron, per lijst en niet per pagina:
 *
 *   /start-here/  acht routelijsten   awb-icon-check  #F2B714  18px  LINKS
 *   /ocean-ai/    "dit is voor jou"   fa-check        rgb(101,188,123) 20px
 *   /ocean-ai/    "dit is niets"      fa-times        rgb(226,0,0)     20px
 *
 * Dat laatste paar is de reden dat de klasse in de INHOUD staat en niet in een
 * selector: welke lijst ja is en welke nee is redactie. Een regel op `ul` zou
 * een groen vinkje zetten bij "dit is niets voor jou".
 *
 * De tekens zijn zelf getekend, net als de dubbele pijl en de vier
 * pictogrammen. Samen ruim onder een kilobyte; een icoonfont zou hier
 * tientallen kilobytes kosten voor drie vormen.
 *
 * Wat hier NIET staat: de tekens van .eq-phase-steps. Die verschillen op de
 * bron PER LIJST — fa-bullseye, fa-microchip, fa-linkedin-in — en er is bij ons
 * geen klasse die ze scheidt. Eén teken voor alle drie zou drie keer bijna
 * kloppen. Dat vraagt eerst een klasse per fase, en dat is werk voor na de
 * demo.
 */
:root {
	--eq-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
	--eq-kruis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E");
}

.eq-pathway-list,
.eq-check-list,
.eq-lijst-ja,
.eq-lijst-nee,
.eq-mm-lijst {
	list-style: none;
	padding-inline-start: 0;
}

.eq-pathway-list > li,
.eq-check-list > li,
.eq-lijst-ja > li,
.eq-lijst-nee > li,
.eq-mm-lijst > li {
	position: relative;
	padding-inline-start: 30px;
}

.eq-pathway-list > li::before,
.eq-check-list > li::before,
.eq-lijst-ja > li::before,
.eq-lijst-nee > li::before,
.eq-mm-lijst > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.2em;
	width: 18px;
	height: 18px;
	background-color: var(--eq-teken, #f2b714);
	-webkit-mask: var(--eq-vink) center / contain no-repeat;
	mask: var(--eq-vink) center / contain no-repeat;
}

.eq-lijst-ja > li::before {
	--eq-teken: rgb(101, 188, 123);
	width: 20px;
	height: 20px;
}

.eq-lijst-nee > li::before {
	--eq-teken: rgb(226, 0, 0);
	width: 20px;
	height: 20px;
	-webkit-mask-image: var(--eq-kruis);
	mask-image: var(--eq-kruis);
}


/* ---- 70. De reviewbadges op de bronmaat ------------------------------------
 * De bestanden zijn nu 523x113 en 565x113 — groot genoeg voor een scherm met
 * dubbele puntdichtheid. Maar een groter BESTAND is niet een groter BEELD: de
 * bron toont ze op 383 breed, en zonder deze regel stonden ze bij ons op 523 en
 * 565. Dat is dezelfde soort afwijking als de te kleine versie, alleen de
 * andere kant op.
 *
 * 383 breed geeft bij deze verhoudingen 83 en 76 hoog, en de bron meet 383x83
 * en 383x77. De linkedin-badge blijft op 290x113 en klopte al. */
.eq-mm-badge img {
	max-width: 383px;
	height: auto;
}


/* ---- 71. Een anker landt niet achter de vaste balk -------------------------
 * Twaalf knoppen op /ai-labs-membership/ wijzen naar #options en dat anker
 * bestond niet: de klik verplaatste nul pixels. Nu draagt de prijskop het id.
 *
 * Zonder scroll-margin landt hij achter de vaste kopbalk en is de sprong
 * technisch geslaagd en voor de bezoeker kapot — dezelfde reden als bij de
 * cursuskaarten in sectie 63. De balk is daar 88 px hoog; met wat lucht erbij
 * komt de kop vrij te staan.
 *
 * Dit hangt aan het ID en niet aan een klasse, want het geldt voor elk anker
 * waar iemand naartoe springt. Komt er een tweede bij, dan hoort hij hier. */
#options {
	scroll-margin-block-start: 107px;
}


/* ---- 72. De reviewbadges naast elkaar ---------------------------------------
 * Op de bron staan de drie badges NAAST elkaar, gemeten op x=96, 529 en 961 bij
 * een venster van 1440. De eerste begint op 96 en de laatste eindigt op 1344:
 * dat is precies 1248, onze inhoudsbreedte.
 *
 * Bij ons stonden ze gestapeld, alle drie op x=290 in een bak van 908. Vandaar
 * ook dat ze niet naast elkaar pasten: 908 gedeeld door drie is 302 en een
 * badge is er 383.
 *
 * Dus krijgt de bak de inhoudsbreedte en worden de drie badges kolommen. De
 * kop en de knoppenrij spannen over de volle breedte — anders zouden die
 * meedoen in het raster en in een kolom belanden. Dezelfde val als bij de
 * cirkelsectie, waar de tekst onder de cirkel viel omdat het raster de
 * volgende cel vulde. */
.eq-mm-band.eq-mm-knoprij .eq-mm-binnen {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 24px;
	align-items: center;
	justify-items: center;
	max-width: var(--eq-kolom, 1248px);
	width: 100%;
}

.eq-mm-band.eq-mm-knoprij .eq-mm-binnen > :not(.eq-mm-badge) {
	grid-column: 1 / -1;
	justify-self: stretch;
}

@media (max-width: 900px) {
	.eq-mm-band.eq-mm-knoprij .eq-mm-binnen {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* De lijst op de membershippagina stond gecentreerd MET bolletjes: de marker
 * bleef op de rand van het vak staan terwijl de tekst naar het midden schoof,
 * en dan lijkt het gebroken. Gemeten op de bron:
 *
 *     BRON   fusion-checklist   list-style none   text-align start   padding 0
 *     KLOON  disc               text-align center                    padding 24
 *
 * De bron gebruikt daar dus dezelfde checklistvorm als op /start-here/. Hij
 * hangt nu aan dezelfde regels als de andere vinkjeslijsten in sectie 69; hier
 * alleen nog de uitlijning, want die stond gecentreerd. */
.eq-mm-lijst {
	text-align: start;
	margin-inline: auto;
	max-width: 599px;
}


/* ---- 73. De kaartrijen op de membershippagina waren 116 px breed -----------
 * Gemeten, kloon tegen bron, dezelfde tekst en hetzelfde korps:
 *
 *     BRON   kaart 420 px (what happens inside), 433 px (de cijfers)
 *     KLOON  kaart 116 px
 *
 * Op 116 px wringt een alinea van 180 tekens zich in een strook en ziet de
 * sectie eruit als kapot. Martin zag het meteen; geen enkele meting die wij
 * draaien zocht ernaar, want maat en tekst klopten allebei op zichzelf.
 *
 * `eq-mm-kaarten` staat op HETZELFDE element als `eq-mm-band`. De band is een
 * volle-breedteband met een achtergrond, dus het raster liep over 1440 en de
 * kaarten die er niet rechtstreeks in zaten vielen terug op hun eigen inhoud.
 * Met een padding die de inhoud op 1248 zet — de kolombreedte — komen alle
 * negentien op dezelfde maat uit.
 *
 * De padding en niet een max-width, want de band moet zijn achtergrond over de
 * volle breedte houden. */
.eq-mm-band.eq-mm-kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--40, 40px);
	row-gap: var(--wp--preset--spacing--50, 48px);
	align-items: start;
	padding-inline: max(24px, calc((100% - var(--eq-kolom, 1248px)) / 2));
}

/* Alles wat geen kaart is — de kop, een inleiding, een knoppenrij — spant over
 * de volle breedte. Anders belandt het in een kolom van een derde. Derde keer
 * deze week dat een raster vanzelf de volgende cel vulde. */
.eq-mm-band.eq-mm-kaarten > :not(.eq-mm-kaart) {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.eq-mm-band.eq-mm-kaarten {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ---- 74. Een vormklasse hoort niet op de band -------------------------------
 * De bouwer schrijft de SOORT van een sectie op twee plekken tegelijk: op de
 * volle band én op het element dat de vorm draagt.
 *
 *   <div class="eq-section eq-mm-band eq-mm-team">   <- de band
 *     <div class="eq-mm-binnen">
 *       <h2>…</h2>
 *       <div class="eq-mm-team"> tien leden </div>   <- de vorm
 *
 * Daardoor greep elke indelingsregel óók de band. Gemeten op
 * /ai-labs-membership/: 26 banden, vier fout.
 *
 *   eq-mm-team        de band werd een raster van vijf kolommen van 262 px.
 *                     `.eq-mm-binnen` was het ENIGE kind en belandde in kolom
 *                     één, dus de tien portretten renderden 50x135 in plaats
 *                     van 135x135. Dit is wat Martin zag als "kolommen te smal".
 *   eq-mm-faq         max-width 865 op een band mét achtergrondkleur: de
 *                     donkere band werd 865 breed met 288 px wit ernaast.
 *   eq-mm-smal        idem, ook op een gekleurde band.
 *   eq-mm-prijsregel  de band werd flex; `.eq-mm-binnen` kromp naar 590.
 *
 * De bron doet het anders: daar is de band bij het team én bij de FAQ een
 * `div.fusion-fullwidth` van 1440 px met bg rgb(51,51,51), en de INHOUD staat
 * in de kolom van 1298/1248. De portretten staan op x=133 tot 1307.
 *
 * `:not(.eq-mm-band)` weegt 0,2,0 en wint dus van de losse klasse (0,1,0). Ik
 * herstel de rechtsboven-regel hier in plaats van de originelen te wijzigen,
 * zodat §53 blijft lezen als de gemeten bron-inventaris die het is.
 *
 * Dit is een klasse van fouten en niet één fout: elke nieuwe vormklasse die de
 * bouwer op een band zet, doet dit opnieuw. De poort telt daarom voortaan of
 * elke band 1440 breed is met een binnenkolom van 1248.
 */

.eq-mm-band.eq-mm-team {
	display: block;
}

.eq-mm-band.eq-mm-faq,
.eq-mm-band.eq-mm-smal {
	max-width: none;
	margin-inline: 0;
	text-align: initial;
}

.eq-mm-band.eq-mm-prijsregel {
	display: block;
}

/* De inhoud houdt zijn eigen vorm: bij `smal` draagt het binnenelement de
 * klasse zelf en centreert het zichzelf; bij `faq` staat de vorm een niveau
 * dieper. Er is hier dus niets extra's nodig. */

/* De portretten zijn op de bron VIERKANT. Gemeten: tien beelden van 135x135
 * met border-radius 0px, gecentreerd in een cel van 260 (x=133, 393, 652, 912,
 * 1172). Wij maakten er cirkels van. Een ronde hoek is de goedkoopste manier om
 * iets afgewerkt te laten ogen en glipt daarom ongemerkt mee - maar hij is hier
 * drift en geen keuze. */
.eq-mm-portret img {
	border-radius: 0;
}


/* ---- 75. De cirkels lopen na elkaar, niet tegelijk --------------------------
 * Martin, 8 september 2026: "op desktop gaan ze nu allemaal tegelijk terwijl ik
 * juist wil dat ze langzaam van de eerste naar de laatste overgaan in bv 3 of 4
 * seconden, op mobiel klopt de animatie niet."
 *
 * Allebei die klachten hebben één oorzaak. Het script zette `is-in` op ELKE
 * cirkel apart. Op desktop staan alle zes tegelijk in beeld, dus vuurden ze
 * samen. Op mobiel staat er één tegelijk in beeld, dus vuurde elke cirkel op
 * zijn eigen moment tijdens het scrollen — geen reeks, maar zes losse dingen.
 *
 * De trigger verhuist daarom naar de SECTIE (zie mmc-beweging.js). De bestaande
 * regel `.is-in .eq-ring-baan` is een afstammingsselector en werkt daardoor
 * ongewijzigd. Wat hier bij komt is de vertraging per positie.
 *
 * De rekensom: zes cirkels, stap 1000 ms, duur 4500 ms. De laatste begint op
 * 5000 en is klaar op 9500 ms. Op smal scherm korter (stap 650, duur 3500,
 * klaar op 6750), want daar scrolt de bezoeker terwijl het loopt.
 *
 * 8 september 2026, derde ronde. Eerst 400/1800 (klaar op 3800), toen 450/2400,
 * nu 1000/4500. Martin: "denk aan zeker 250 procent langzamer." Dat is 2,5 maal
 * de eerste waarden, op allebei de getallen — alleen de duur verlengen maakt de
 * vulling traag terwijl de reeks even snel doorratelt, en dan verandert het
 * ritme niet.
 *
 * Wat je hiervoor inlevert, zodat het een keuze blijft en geen verrassing: de
 * reeks duurt nu bijna tien seconden. Wie doorscrollt ziet de laatste cirkel
 * niet meer vullen. Op smal scherm is dat bijna zeven seconden, en daar scrolt
 * men sneller.
 *
 * Subtieler zit in de curve en de duur, niet in de afstand: cubic-bezier(.25,
 * .6, .25, 1) zet minder snelheid vooraan dan de vorige (.2, .7, .3, 1), zodat
 * de ring op gang komt in plaats van weg te schieten.
 */

.eq-section.eq-cirkels {
	--eq-ring-stap: 1000ms;
	--eq-ring-duur: 4500ms;
}

@media (max-width: 900px) {
	.eq-section.eq-cirkels {
		--eq-ring-stap: 650ms;
		--eq-ring-duur: 3500ms;
	}
}

.eq-section.eq-cirkels .is-in .eq-ring-baan,
.eq-section.eq-cirkels.is-in .eq-ring-baan {
	animation-duration: var(--eq-ring-duur, 4500ms);
	animation-timing-function: cubic-bezier(.25, .6, .25, 1);
}

.eq-section.eq-cirkels .eq-card:nth-child(1) .eq-ring-baan {
	animation-delay: calc(0 * var(--eq-ring-stap, 1000ms));
}

.eq-section.eq-cirkels .eq-card:nth-child(2) .eq-ring-baan {
	animation-delay: calc(1 * var(--eq-ring-stap, 1000ms));
}

.eq-section.eq-cirkels .eq-card:nth-child(3) .eq-ring-baan {
	animation-delay: calc(2 * var(--eq-ring-stap, 1000ms));
}

.eq-section.eq-cirkels .eq-card:nth-child(4) .eq-ring-baan {
	animation-delay: calc(3 * var(--eq-ring-stap, 1000ms));
}

.eq-section.eq-cirkels .eq-card:nth-child(5) .eq-ring-baan {
	animation-delay: calc(4 * var(--eq-ring-stap, 1000ms));
}

.eq-section.eq-cirkels .eq-card:nth-child(6) .eq-ring-baan {
	animation-delay: calc(5 * var(--eq-ring-stap, 1000ms));
}

/* Zonder deze regel zou een zevende cirkel geen vertraging krijgen en meteen
 * meelopen met de eerste. Dan valt het patroon op de dag dat iemand er één
 * bijzet stil uit elkaar. */
.eq-section.eq-cirkels .eq-card:nth-child(n + 7) .eq-ring-baan {
	animation-delay: calc(6 * var(--eq-ring-stap, 1000ms));
}

@media (prefers-reduced-motion: reduce) {
	.eq-section.eq-cirkels .eq-card .eq-ring-baan {
		animation: none;
		animation-delay: 0ms;
	}
}


/* ---- 76. Het pictogram in het midden van de ring ---------------------------
 * Martin, 8 september 2026: "zorg ook dat de graphic precies in het midden van
 * de cirkel staat" en "de graphics binnen de cirkel zijn verder niet precies
 * overgenomen."
 *
 * Twee verschillende fouten, allebei gemeten.
 *
 * EEN: alle zes de pictogrammen stonden 12 px ONDER het midden. De ring is een
 * grid met place-items: center, dus dat hoort niet te kunnen. De oorzaak is
 * WordPress: `.eq-ring-ico` is het tweede kind, en de blokopmaak zet daar een
 * margin-block-start van 24 px op (`> * + *`). Bij het centreren telt een
 * grid-item met zijn marges mee, dus zakt de inhoud precies de helft: 12 px.
 * Dit is dezelfde val als eerder bij de eerste kolom van een grid — een
 * flow-marge in een grid slaat het eerste kind over en verschuift de rest.
 *
 * TWEE: de maatverhouding. De bron rendert 43x34, 43x34, 43x34 en 34x34 — dat
 * is 640/512 en 512/512 maal 34. De hoogte is dus bindend en de breedte volgt.
 * Met een vierkant vak en `contain` werd een breed pictogram op zijn BREEDTE
 * gepast en kwam het te klein uit. `auto 100%` maakt de hoogte bindend.
 *
 * Het vak is 44 breed: 43 afgerond naar boven. De medaille van 34 staat daarin
 * gecentreerd, want het masker centreert wat overblijft.
 */

.eq-ring > * {
	margin-block: 0;
}

.eq-ring-ico {
	width: 44px;
	height: 34px;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
}


/* ---- 77. Tekst die afbreekt zoals een mens hem zou lezen --------------------
 * Martin, 8 september 2026: "deze tekst breekt fout af en kop moet dichter bij
 * tekst zodat het 1 geheel is … hoe kan ik ervoor zorgen dat tekstafbrekingen
 * ook meer conform een logische tekst gaan en conform origineel."
 *
 * Twee ingrepen, allebei op gemeten grond.
 *
 * HET GAT. Op de bron is het privacyblok ÉÉN element: kop en tekst staan in
 * dezelfde alinea, met een regeleinde ertussen. Gemeten: één div van 1440 x 165,
 * geen tussenruimte. Bij ons zijn het twee alineaʼs met 24 px ertussen, en dat
 * is precies genoeg om ze uit elkaar te laten vallen. Wat bij elkaar hoort staat
 * dichter op elkaar dan wat er los van staat — dat is geen smaak maar het enige
 * signaal dat een lezer heeft.
 *
 * DE AFBREKING. Onze eerste regel liep 164 tekens door tot en met "| Email:",
 * waarna het adres alleen op regel twee stond. Dat is een wees, en een wees
 * leest als een fout.
 *
 * `text-wrap: pretty` laat de browser de laatste regels herverdelen zodat er
 * geen enkel woord alleen achterblijft. `balance` doet hetzelfde voor koppen,
 * maar verdeelt ALLE regels even lang — dat is wat je wilt bij twee of drie
 * regels kop en juist niet bij een alinea van tien.
 *
 * Waarom dit veilig is: allebei zijn het aanwijzingen. Een browser die ze niet
 * kent breekt af zoals hij nu doet; er gaat niets kapot en er verschuift niets.
 * Daarom staan ze hier centraal en niet per pagina.
 */

.eq-section h1,
.eq-section h2,
.eq-section h3,
.eq-mm-titel,
.eq-mm-kop,
.eq-card-title {
	text-wrap: balance;
}

.eq-section p,
.eq-section li,
.eq-mm-band p,
.eq-mm-band li {
	text-wrap: pretty;
}

/* De kop van het privacyblok hoort bij zijn alinea. Op de bron staan ze in
 * hetzelfde element; hier zijn het twee alineaʼs, dus haal ik het kanaal weg
 * dat ze uit elkaar duwt. WordPress zet zijn eigen flowmarge op het VOLGENDE
 * element, dus die moet er ook af — anders halveert dit alleen het gat. */
.eq-privacy .eq-privacy-head {
	margin-block-end: 0;
}

.eq-privacy .eq-privacy-head + p {
	margin-block-start: 0;
}


/* ---- 78. Op smal scherm stond de halve cirkel buiten beeld -----------------
 * Gemeten op 320, 375 en 390 px, op alle zes kaarten, door twee metingen langs
 * verschillende wegen die op hetzelfde getal uitkwamen:
 *
 *   kaart   30 .. 290          ring  -45 .. 105
 *   buiten de kaart links  75 px      over de tekst heen  51 px
 *   kolomsporen van de kaart:  0px 236px
 *
 * De halve ring viel dus BUITEN beeld, en de zichtbare helft lag over de
 * lopende tekst. Er was geen horizontale schuifbalk om het te verraden, want
 * `.eq-card` heeft `overflow: hidden` — de linkerhelft werd stil afgesneden.
 *
 * DE OORZAAK. §66 zet de ring in kolom 1 en al het andere in kolom 2, zodat kop
 * en tekst naast de ring staan in plaats van eronder. De mediaquery op 520 px
 * zet de kaart daarna terug naar ÉÉN kolom — maar laat de plaatsing van de
 * kinderen staan. De tekst eist dan een impliciete tweede kolom op, kolom 1
 * wordt naar 0 px geduwd, en `justify-items: center` centreert een ring van 150
 * px op een spoor van niets: 75 px naar links het beeld uit, 75 px naar rechts
 * de tekst in.
 *
 * De les die hier onder zit: een mediaquery die een raster hertekent moet ook
 * de PLAATSING van de kinderen hertekenen. `grid-template-columns` terugzetten
 * haalt geen enkele `grid-column` weg — die blijft wijzen naar een kolom die
 * niet meer bestaat, en een grid maakt er dan stilzwijgend een bij.
 *
 * Waarom dit zo lang stond: op elke desktopmeting is de indeling correct, en op
 * een schermafdruk van de hele pagina valt een halve cirkel over drie regels
 * tekst niet op tussen alles wat er verder staat. Het is gevonden door gericht
 * op de smalste iPhone te meten.
 */

@media (max-width: 520px) {
	.eq-section.eq-cirkels .eq-card > .eq-ring,
	.eq-section.eq-cirkels .eq-card > :not(.eq-ring) {
		grid-column: 1;
		grid-row: auto;
	}
}


/* ---- 79. Het cursusfilter kreeg bediening en werking ------------------------
 * GEMETEN OP DE BRON, 8 september 2026, mmclearning.com/courses/:
 *
 *   30 kaarten, 1 uitgelicht (draagt geen termen, ook niet op de bron) en 29
 *   in de lijst. Elke lijstkaart draagt zeven taxonomieën als data-attribuut:
 *
 *     course-type 29   catalogue-cat 26   duration 26   price 26
 *     level 26         role 20            partner 16      = 270 termen
 *
 *   De bediening is 40 radioknoppen met ÉÉN gedeelde name="mmc-filter". Op de
 *   bron kan er dus over alle zeven groepen samen maar één keuze aan staan.
 *   Wij doen aankruisvakjes: OF binnen een groep, EN tussen groepen.
 *
 * GEMETEN OP DE KLOON, vóór deze sectie, op 1440 px:
 *
 *   paneel 225 breed, rand 2, padding 10/10/10/20  ->  191 px inhoud
 *   optieregel 12.8 px op een regelhoogte van 26
 *   breedste opschrift  "Accredited Short Qualifications"  184,4 px
 *   opties die nu al over twee regels lopen: 2 van de 40
 *
 * Daar komt een vakje van 14 plus 8 tussenruimte bij: 191 - 22 = 169 px voor
 * het opschrift. Meer opschriften lopen dus over twee regels, en dat mag —
 * het langste WOORD is "Qualifications" (88 px) en dat past ruim, dus er
 * breekt niets middenin. Het vakje krijgt 6 px bovenmarge: (26 - 14) / 2, zodat
 * hij op het midden van de eerste regel staat en niet op het midden van een
 * opschrift dat twee regels hoog is.
 *
 * WAAROM `display: none` EN NIET `visibility` OF `hidden` OP DE KAART: de kaart
 * is een grid-item in een kolom; alles wat ruimte blijft innemen laat gaten
 * vallen tussen de overgebleven cursussen.
 *
 * DE TELLING BLIJFT OOK ONDER 900 PX STAAN. Daar is `.eq-filters` verborgen
 * (sectie hierboven, bron-conform), maar een gedeeld adres met ?level=advanced
 * filtert de lijst wél. Zonder de telling zou een bezoeker op een telefoon 3
 * van de 29 cursussen zien zonder enige aanwijzing waarom. Dat er op die
 * breedte niets te WISSEN valt, staat als open punt in de oplevering. */

.eq-cursuskaart.is-uit {
	display: none;
}

/* Een optieregel wordt pas een bediening als het script draait; zonder JS
 * blijft hij de tekstregel die hij was. */
.eq-filteroptie.is-bedienbaar {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.eq-filteroptie__vak {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin: 6px 0 0;
	accent-color: #ce2029;
	cursor: pointer;
}

/* Het opschrift is het klikvlak: een label van 169 px is een veel groter doel
 * dan een vakje van 14, met de muis en met een vinger. */
.eq-filteroptie__etiket {
	cursor: pointer;
	line-height: 26px;
}

/* De focusring van de browser blijft staan waar `:focus-visible` niet bestaat;
 * deze regel maakt hem alleen duidelijker waar hij wel bestaat. */
.eq-filteroptie__vak:focus-visible {
	outline: 2px solid #ce2029;
	outline-offset: 2px;
}

/* De telling. 13.6 px/700 is de maat van de kaartmeta hierboven — een bestaande
 * maat van deze pagina, geen nieuwe. */
.eq-filters__telling {
	font-size: 13.6px;
	font-weight: 700;
	line-height: 26px;
	color: #333333;
	margin-block: 0 16px;
}

.eq-filters__leeg {
	margin-block: 0;
	padding-block: 20px 40px;
}

/* Zonder deze regel wint `display` van het `hidden`-attribuut zodra er ook maar
 * één display-eigenschap op dit blok staat, en dan staat de lege-melding er
 * altijd. */
.eq-filters__leeg[hidden] {
	display: none;
}

.eq-filters__leeg p {
	margin-block: 0 16px;
}

/* Dezelfde knop als op de kaarten: 155 breed, 12.8 px/700, ronding 5,
 * #ce2029 met wit. Een tweede knopmaat op één pagina is een tweede knopmaat op
 * de site. */
.eq-filters__wissen {
	display: block;
	width: 155px;
	font-family: inherit;
	font-size: 12.8px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	border: 1px solid #ce2029;
	border-radius: 5px;
	padding: 7px 5px;
	background-color: #ce2029;
	color: #ffffff;
	cursor: pointer;
}


/* ---- 80. Het verticale ritme van een cirkelkaart op de telefoon -------------
 * Gemeten op 390 px, alle zes kaarten identiek:
 *
 *   ring   top   0, hoog 150
 *   titel  top 156           -> 6 px onder de ring
 *   tekst  top 195           -> 14 px onder de titel
 *
 * Dat is omgekeerd. De titel en zijn tekst zijn één ding; de ring staat daar
 * los van. Wat bij elkaar hoort staat dichter op elkaar dan wat er los van
 * staat — met 6 tegen 14 plakt de ring juist aan de titel en valt de titel van
 * zijn eigen tekst af.
 *
 * De 6 px komt van `gap` op de kaart, de 14 van diezelfde gap plus 8 px marge
 * onder de titel. Twee kanalen die optellen, zoals vaker in dit bestand.
 *
 * Nu: ring -> titel 24, titel -> tekst 8. Één kanaal per afstand.
 */

@media (max-width: 520px) {
	.eq-section.eq-cirkels .eq-card {
		row-gap: 8px;
	}

	.eq-section.eq-cirkels .eq-card > .eq-ring {
		margin-block-end: 16px;
	}

	.eq-section.eq-cirkels .eq-card-title {
		margin-block-end: 0;
	}
}


/* ---- 81. Op de telefoon loopt de animatie anders ----------------------------
 * Martin, 8 september 2026: "zorg dat de animatie op telefoons langzamer en
 * anders loopt, je moet zien als je scrolt dat er wat gebeurt; op desktop loopt
 * de animatie goed nu."
 *
 * Hij heeft gelijk, en het is de spiegel van de fout uit §75. Daar zette het
 * script `is-in` op elke cirkel apart, waardoor ze op DESKTOP tegelijk vuurden
 * — fout, want daar staan ze samen in beeld. Op de TELEFOON is dat juist goed:
 * je scrolt langs één cirkel tegelijk, dus een reeks die vanaf de sectie start
 * is dan al voorbij voor je bij de vierde bent.
 *
 * Eén regel, twee gedragingen, en dat is precies wat er hoort:
 *
 *   breed scherm   trigger op de SECTIE, vertraging per positie -> een reeks
 *   smal scherm    trigger op elke RING, geen vertraging        -> per cirkel
 *
 * Daarom is de stap hier 0: elke ring begint op zijn eigen moment, en een
 * vertraging bovenop dat moment zou de vulling pas starten als je hem al voorbij
 * gescrold bent. De duur gaat omhoog van 3500 naar 4000 ms, zodat er tijdens het
 * scrollen zichtbaar iets gebeurt in plaats van dat het al klaar is.
 *
 * De schakelaar staat in mmc-beweging.js op dezelfde 520 px als de indeling.
 * Staan die twee ooit uiteen, dan krijgt een kaart de ene opmaak en de andere
 * beweging — houd ze gelijk.
 */

@media (max-width: 520px) {
	.eq-section.eq-cirkels {
		--eq-ring-stap: 0ms;
		--eq-ring-duur: 4000ms;
	}
}


/* ---- 82. Twee rijen die niet op één lijn stonden ----------------------------
 * Martin zag het allebei op de membershippagina, en het zijn twee verschillende
 * oorzaken.
 *
 * HET TEAM. Gemeten op 1440: de foto van Imran stond op y=19192, die van de
 * negen anderen op 19216. Imran staat niet te hoog — de rest staat te laag.
 * Lid 1 heeft `margin-block-start: 0`, lid 2 tot en met 10 hebben er 24. Dat is
 * WordPress' eigen flowmarge, die met `> * + *` het EERSTE kind overslaat. In
 * een raster duwt die marge het item omlaag en valt de eerste er dus uit.
 *
 * Dezelfde val als bij de eerste kolom van een raster en bij het pictogram in de
 * ring: één kanaal dat je niet zelf hebt opengezet en dat alleen op sommige
 * kinderen slaat. Op 768 px stond hij er ook (29466 tegen 29490).
 *
 * DE REVIEWBADGES. Gemeten: 383x83, 383x77 en 290x113 — drie verschillende
 * hoogtes in een flexrij met `align-items: normal`. Hun bovenkanten lagen
 * daardoor 15 en 18 px uit elkaar. Drie beelden van ongelijke hoogte krijg je
 * nooit op één bovenlijn; wat je wél kunt doen is ze op één ONDERLIJN zetten,
 * want daar staat de tekst in die badges. Zo lezen ze als een rij.
 */

/* De teamregel is opgegaan in §83, want het is geen teamprobleem. */

/* MIJN EERSTE VERSIE ZETTE DIT OP `.eq-mm-knoprij` EN DAT WAS DE VERKEERDE
 * KLASSE. De drie badges zijn geen kinderen van de knoprij: ze zijn rasteritems
 * van `.eq-mm-band.eq-mm-knoprij .eq-mm-binnen`, het raster van drie kolommen
 * uit §72. De regel greep dus de knoppenrij eronder en liet de badges staan.
 *
 * Gevonden doordat flowmarge.py na de reparatie nog één scheve bak meldde. Zonder
 * die controle was dit blijven staan als "gerepareerd" — een fix op de verkeerde
 * klasse ziet er in de CSS precies zo uit als een goede.
 *
 * `align-items: end` zet ze op één ONDERLIJN. Bovenlijn kan niet: de beelden zijn
 * 83, 77 en 113 px hoog. De onderkant is waar de tekst in die badges staat. */
.eq-mm-band.eq-mm-knoprij .eq-mm-binnen {
	align-items: end;
}

.eq-mm-band.eq-mm-knoprij .eq-mm-binnen > * {
	margin-block: 0;
}


/* ---- 83. De flowmarge uit elke bak die wij zelf indelen ---------------------
 * DIT IS EEN KLASSE FOUTEN, GEEN LIJST GEVALLEN. Vandaag kwam hij drie keer los
 * boven water — het pictogram 12 px te laag in de ring, de eerste kolom van een
 * raster te hoog, en Imran 24 px boven de negen andere teamleden — en drie keer
 * heb ik hem apart gerepareerd voor Martin zei: "wat bij Imran is gebeurd is een
 * patroon, zorg dat dat niet meer voor kan komen."
 *
 * WAT ER GEBEURT. WordPress zet zijn blokafstand met `> * + *`. Die selector
 * slaat het EERSTE kind over, en dat is precies goed in een lopende kolom: daar
 * wil je geen ruimte bóven het eerste element. Maar in een bak die wij grid of
 * flex hebben gemaakt is die marge geen ruimte tússen twee dingen — hij duwt één
 * item omlaag ten opzichte van zijn buren, en bij `place-items: center` telt hij
 * zelfs half mee, want dan wordt de marge mee-gecentreerd.
 *
 * DE OMVANG, gemeten met scripts/kloon/flowmarge.py op /ai-labs-membership/:
 * 30 bakken met ongelijke kindmarges, alle met het verschil 0 tegen 24 px.
 *
 *   12x  .eq-mm-duo          3x  .eq-mm-label-rij
 *    8x  .eq-mm-kaart        1x  .eq-mm-team
 *    4x  .eq-mm-kaarten      1x  .eq-mm-knoprij
 *
 * WAAROM NIET GEWOON ALLES PLATSLAAN. Een blanco `* { margin-block: 0 }` zet ook
 * marges uit die wél bedoeld zijn, en dan verschuift er van alles op plekken
 * waar niemand kijkt. De lijst hieronder bevat alleen bakken waarvan gemeten is
 * dat ze een `gap` hebben — die regelt de ruimte al, dus daar is de marge puur
 * verstoring. `.eq-nav-balk` heeft géén gap en staat er daarom NIET in.
 *
 * HOE DIT ZO BLIJFT. `scripts/kloon/flowmarge.py <url>` vindt elke bak met
 * display grid of flex waarvan de kinderen ongelijke marges dragen. Voeg je een
 * nieuwe indelingsbak toe, dan meldt hij zich daar vanzelf. Dit is geen regel om
 * te onthouden maar een controle om te draaien.
 */

.eq-mm-duo > *,
.eq-mm-label-rij > *,
.eq-mm-kaarten > *,
.eq-mm-kaart > *,
.eq-mm-knoprij > *,
.eq-mm-team > * {
	margin-block: 0;
}


/* ---- 84. Terug naar boven, alleen op smal scherm ----------------------------
 * Martin vroeg om een pijl waarmee je op de telefoon makkelijk terug naar het
 * menu gaat, en daarna: "wat is de norm, hoe vaak mag zo'n pijl zichtbaar zijn?"
 * Het antwoord uit het onderzoek, met de bron erbij, zit in deze regels.
 *
 *   ALLEEN OP LANGE PAGINAʼS. Nielsen Norman Group (2017) noemt vier
 *   schermhoogtes als drempel. Onze membershippagina is er op 390 px ongeveer
 *   dertig — dus ruim erboven, en dat is precies waarom hij hier hoort.
 *
 *   ÉÉN PER PAGINA. Herhaalde "naar boven"-links door een pagina heen worden
 *   genegeerd. Er is dus bewust geen variant per sectie.
 *
 *   NIET PERMANENT. Hij verschijnt pas na anderhalve schermhoogte ÉN alleen als
 *   je omhoog scrolt — want tijdens naar beneden scrollen wil niemand naar
 *   boven. Bovenaan verdwijnt hij weer. Dat scheelt bovendien schermruimte:
 *   Baymard meet dat zwevende elementen op mobiel 15 tot 20 procent van het
 *   zichtbare scherm kosten.
 *
 *   44x44. WCAG 2.5.8 eist 24x24 op niveau AA, maar 44 haalt Apple's richtlijn
 *   en WCAG 2.5.5 (AAA) in één keer. Eén getal, geen uitzonderingenboom. Het
 *   zichtbare rondje mag kleiner ogen dan het tapbare vlak.
 *
 *   16 PX VAN DE RAND op mobiel. Rechtsonder is de conventie — niet vanwege
 *   duimbereik (dat argument leunt op een kaart die de auteur zelf in 2017 heeft
 *   herroepen) maar omdat mensen hem daar verwachten.
 *
 * Boven 520 px staat hij er niet: daar is het menu binnen een paar seconden
 * scrollen terug en zou hij ruimte kosten zonder iets op te lossen.
 */

.eq-omhoog {
	position: fixed;

	/* BOVEN de chatknop, niet erop. Gemeten op 320 en 390 px: `.eqw-chat` is
	 * 52x52 op 12 px van de onder- en rechterrand, met z-index 9999. Mijn eerste
	 * versie stond op 16/16 en viel er dus precies overheen — twee knoppen op
	 * dezelfde vierkante centimeter, en de bovenste wint zonder dat iemand dat
	 * heeft besloten. Het onderzoek noemt dit met zoveel woorden als het
	 * anti-patroon: rechtsonder is de drukste plek van het scherm.
	 *
	 * 12 + 52 + 12 = 76 px van de onderrand, met dezelfde tussenruimte als de
	 * chatknop zelf van de rand houdt.
	 *
	 * En 16 px van rechts, niet 12: dan liggen de MIDDENS op één lijn. De
	 * chatknop is 52 breed op 12 (midden op 38), deze is 44 op 16 (midden op
	 * 38). Twee knoppen die net niet uitlijnen lezen als een fout. */
	inset-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
	inset-inline-end: 16px;

	/* Onder de chatknop (9999): gaat het chatvenster open, dan hoort dat hier
	 * overheen te komen en niet andersom. */
	z-index: 90;

	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;

	border-radius: 50%;
	background-color: #f9c32d;
	color: #1b1b1b;
	box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
	text-decoration: none;
}

@media (max-width: 520px) {
	.eq-omhoog:not([hidden]) {
		display: flex;
	}
}

/* De pijl is een masker en geen letter: een letter zou met het lettertype
 * meeveranderen en op een ontbrekende font een kruisje worden. */
.eq-omhoog-pijl {
	inline-size: 20px;
	block-size: 20px;
	background-color: currentColor;
	-webkit-mask: var(--eq-pijl-op) center / contain no-repeat;
	mask: var(--eq-pijl-op) center / contain no-repeat;
}

.eq-omhoog {
	--eq-pijl-op: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 4.6 21.4 14l-2.1 2.1L12 8.8l-7.3 7.3L2.6 14Z'/%3E%3C/svg%3E");
}

.eq-omhoog:focus-visible {
	outline: 3px solid #1b1b1b;
	outline-offset: 3px;
}

/* Verschijnen mag zacht, maar nooit zo dat een bezoeker die reduced motion
 * heeft ingesteld iets ziet bewegen. */
.eq-omhoog {
	transition: opacity 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.eq-omhoog {
		transition: none;
	}
}


/* ---- 85. De wisknop naast de telling ---------------------------------------
 * Onder 900 px is `.eq-filters` verborgen — bron-conform. De mechaniek werkt
 * daar wel: een gedeeld adres als `?level=advanced` filtert ook op een telefoon.
 * Maar er was dan geen paneel om het te wissen, behalve bij nul resultaten. Bij
 * 1 tot en met 28 resultaten zat de bezoeker vast in een filter dat hij niet had
 * gezet en niet kon uitzetten.
 *
 * Het paneel op mobiel tonen zou een afwijking van de bron zijn; de URL onder
 * 900 px negeren zou een gedeelde link stilzwijgend anders laten werken dan hij
 * eruitziet. Allebei erger dan het probleem. Dit is de smalste ingreep: de
 * telling staat al in de lijst en is op elke breedte zichtbaar.
 *
 * De knop staat er alleen als er iets AAN staat, dus hij kost niets zolang
 * niemand filtert.
 */

.eq-filters__wissen--bij-telling {
	margin-block: 0 var(--wp--preset--spacing--20);
	margin-inline-start: 0;
}

.eq-filters__wissen--bij-telling[hidden] {
	display: none;
}


/* ---- 86. Het filterpaneel op de telefoon -----------------------------------
 * Martin: "kijk maar of je deze responsive kan maken, is wel het mooiste denk
 * ik." Dat is ook technisch het betere antwoord dan een tweede, mobiel filter:
 * het paneel stond al VOLLEDIG in de DOM op mobiel — 40 vakjes, 7 groepen,
 * gemeten op 320 en 390 — alleen op `display: none`. Er valt dus niets te
 * bouwen, alleen te tonen. Twee codepaden blijven nooit synchroon.
 *
 * Waarom het er ooit uit ging staat in de mediaquery hierboven: inline kostte
 * het 608 px boven de eerste cursus. Dichtgeklapt kost het één regel, en dat is
 * het hele verschil tussen "past niet" en "past wel".
 *
 * DE SCHAKELAAR BESTAAT ALLEEN OP SMAL SCHERM. Boven 900 px staat het paneel
 * gewoon open en is een knop ernaar overbodig; het script zet de toestand mee
 * als iemand zijn telefoon draait, want een dichtgeklapt paneel op een scherm
 * zonder knop is een filter dat onbereikbaar is zonder dat iemand snapt waarom.
 *
 * 44 px hoog: dat haalt Apple's richtlijn en WCAG 2.5.5 (AAA) in één keer.
 */

.eq-filters__schakelaar {
	display: none;
}

.eq-filters__binnen {
	display: block;
}

@media (max-width: 900px) {
	.eq-filters {
		border: 0;
		padding: 0;
		margin-block-end: var(--wp--preset--spacing--30);
	}

	.eq-filters__schakelaar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;

		inline-size: 100%;
		min-block-size: 44px;
		padding: 10px 16px;

		border: 2px solid #eeeeee;
		background: transparent;
		color: #333333;
		font-size: 16px;
		font-weight: 700;
		text-align: start;
		cursor: pointer;
	}

	/* Het teken hoort bij de TOESTAND en niet bij de tekst — dezelfde keuze als
	 * bij `.eq-filtergroep__kop::after`. Zet je het in de tekst, dan leest een
	 * voorlezer "plus" mee als woord, en staat er een plus naast een groep die
	 * openstaat zodra het script draait. */
	.eq-filters__schakelaar::after {
		content: "‒";
		font-weight: 400;
	}

	.eq-filters.is-ingeklapt .eq-filters__schakelaar::after {
		content: "+";
	}

	.eq-filters.is-ingeklapt .eq-filters__binnen {
		display: none;
	}

	.eq-filters:not(.is-ingeklapt) .eq-filters__binnen {
		border: 2px solid #eeeeee;
		border-block-start: 0;
		padding: 10px 10px 10px 20px;
	}
}

/* ===========================================================================
 * §87  De demonstratiemelding bij elk formulier
 *
 * Martin, 8 september 2026: een formulierensysteem moet direct melden dat dit
 * een demo is. De formulieren op deze site WERKEN — ze slaan een inzending op —
 * dus wie er een invult denkt zich te hebben ingeschreven bij MMC.
 *
 * Vandaar de vormgeving: een gele waarschuwbalk met een rand aan de aanzetkant,
 * bovenaan het formulier en niet eronder. Geen grijs kadertje dat als
 * kleine lettertjes leest.
 *
 * De kleuren komen uit theme.json en niet uit losse hexwaarden — conform het
 * besluit dat kleuren uit één centrale bron komen.
 * =========================================================================== */

.eq-demo-melding {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--band-light);
	color: var(--wp--preset--color--foreground);
	font-size: 15px;
	line-height: 1.5;
	border-radius: 2px;
}

.eq-demo-melding strong {
	display: block;
	margin-block-end: 4px;
}

/* ===========================================================================
 * §88  De teampagina als raster
 *
 * De beeldmeter mat het scherp: alle vijftien portretten stonden op x=120
 * onder elkaar en de band was 1724 px hoog. Oorzaak juist benoemd — elk portret
 * zat in een eigen figure van 1200 px en de omhullende groep had geen raster.
 *
 * Een raster op de BAND zou niet werken: beeld, naam en functie staan als
 * broers en zussen naast elkaar, dus dan wordt elk van de vijfenveertig
 * elementen een eigen cel en valt de naam los van het gezicht. De bouwer zet ze
 * daarom eerst per persoon in een groep; hier staat alleen nog de verdeling.
 *
 * auto-fit met een minimum van 180 px: op 1440 komen er zes op een rij, op 390
 * twee, zonder mediaquery en zonder een vast aantal kolommen dat op de
 * verkeerde breedte klopt.
 * =========================================================================== */

.eq-mm-portretten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* De flowmarge van WordPress slaat het eerste kind over en zet daardoor één
 * kolom hoger dan de rest. Binnen een raster wil je die marge helemaal niet. */
.eq-mm-portretten > *,
.eq-mm-portret > * {
	margin-block: 0;
}

.eq-mm-portret {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}

/* De bron toont vierkante portretten van 135x135 zonder ronding. Overnemen
 * zoals hij is: ronden waar het origineel niet rondt is versiering toevoegen. */
.eq-mm-portret .eq-mm-media {
	margin: 0;
}

.eq-mm-portret img {
	width: 135px;
	height: 135px;
	border-radius: 0;
	object-fit: cover;
}

.eq-mm-naam {
	font-weight: 700;
	line-height: 1.3;
}

.eq-mm-rol {
	font-size: 15px;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

/* ===========================================================================
 * §89  Leesbreedte van lopende tekst
 *
 * De beeldmeter mat regels tot 130 tekens op 1440 px, omdat onze alineaʼs de
 * volle kolom van 1200 px vullen. Voor ik daar een ontwerpkeuze van maakte heb
 * ik de BRON gemeten, en dat besliste het:
 *
 *     bron   694 tot 807 px   (~77 tot 101 tekens)
 *     kloon  1200 px          (~120 tekens)
 *
 * MMC houdt zijn tekst dus smal. Onze volle breedte is een afwijking en geen
 * keuze, dus dit is een reparatie: getrouwer én leesbaarder tegelijk.
 *
 * ALLEEN DIRECTE KINDEREN. Kaarten, rasters en de knoprij staan in hun eigen
 * container en horen de volle breedte te houden; die raakt deze regel niet.
 * =========================================================================== */

.eq-mm-band .eq-mm-binnen > p,
.eq-mm-band .eq-mm-binnen > ul,
.eq-mm-band .eq-mm-binnen > ol {
	max-width: var(--eq-leesmaat, 820px);
}

/* ===========================================================================
   §90  AI Visibility Summit — de banner als levende tekst

   WAAROM DIT GEEN AFBEELDING IS. De banner op de bron is één JPEG met de tekst
   erin gebakken. Dat heeft drie kosten die je pas ziet als je ze meet: op een
   telefoon levert de liggende versie tekst van 2,6 px op, elke wijziging van
   datum of prijs moet door een ontwerpprogramma, en het bestand weegt meer dan
   de pagina eromheen.

   Hier is de tekst tekst. Daarmee lost één stuk markup vier dingen tegelijk
   op: hij schaalt scherp mee op elk scherm, hij is doorzoekbaar en
   voorleesbaar, de knop is een echte link, en de animatie kost geen bestand.

   DE MAAT KOMT UIT DE BAK, NIET UIT HET VENSTER. Alles binnen de banner staat
   in `em`, en de lettergrootte van de banner zelf in `cqw` — procenten van de
   breedte van zijn container. Een mediaquery zou hier het VENSTER meten: in
   een lade van 420 px leest een venster van 884 als "breed scherm".

   TWEE COMPOSITIES, EN WAAR DE GRENS LIGT. Boven 1000 px in de bak staat de
   liggende (16:9), daaronder de staande (4:5). Die 1000 is een som en geen
   smaak: de kleinste regel in de liggende compositie is .58em van 2cqw, dus
   1,16 procent van de breedte, en die komt pas rond 950 px boven de 11 px uit.
   Een tablet van 820 px hoort daarom de staande te krijgen.

   ELKE COMPOSITIE DRAAGT ZIJN EIGEN MAATVOERING. Dat is niet cosmetisch: 16:9
   heeft per breedte veel minder hoogte dan 4:5, dus dezelfde em-waarden laten
   de inhoud er aan de onderkant uitlopen. Gemeten toen ze wel gedeeld werden:
   42 px overloop op desktop.
   =========================================================================== */

.mmc-summit-bak {
	container-type: inline-size;
	display: block;
}

.mmc-summit {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #000;
	color: #fff;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	line-height: 1.22;
	border-radius: 8px;

	/* liggend is de standaard: op een breed scherm is dat de juiste vorm */
	aspect-ratio: 1600 / 900;
	font-size: 2cqw;
	gap: .5em;
	padding: 1.1em 2em;
}

.mmc-summit > * { position: relative; z-index: 1; margin: 0; }

.mmc-summit-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
}
.mmc-summit-decor--staand { display: none; }

/* De sluier tussen decoratie en tekst: zwart op zwart, dus hij dooft ALLEEN
 * het goud. Het sterkst in het midden, wegvallend naar de randen, zodat de
 * vormen blijven staan waar ze decoratie zijn en verdwijnen waar ze
 * concurrentie zijn voor de woorden. */
.mmc-summit::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(118% 72% at 50% 50%,
		rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 42%,
		rgba(0,0,0,.34) 66%, rgba(0,0,0,0) 84%);
}

/* --- vorm-onafhankelijk ------------------------------------------------- */

.mmc-summit-titel {
	display: flex;
	flex-direction: column;
	font-weight: 700;
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: -.005em;
}
.mmc-summit-belofte { font-weight: 700; line-height: 1.3; }
.mmc-summit-datum {
	color: #f2b714;
	font-weight: 700;
	letter-spacing: .035em;
	text-transform: uppercase;
}
.mmc-summit-prijs {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
}
/* Een streep dwars door een bedrag mag de cijfers niet opeten: op de
 * standaarddikte legt hij een balk over precies de band waar een 0 van een 8
 * verschilt. */
.mmc-summit-prijs .oud {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: .8;
}
.mmc-summit-prijs .pijl { color: #f2b714; margin: 0 .5em; }
.mmc-summit-prijs .nieuw { font-weight: 700; }

.mmc-summit-knop {
	display: inline-block;
	background: #f2b714;
	color: #14120c;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 3px;
}
.mmc-summit-knop:hover,
.mmc-summit-knop:focus { background: #ffc82a; color: #14120c; }
.mmc-summit-knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.mmc-summit-adres {
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
}

.mmc-summit-sprekers { display: grid; inline-size: 100%; }
.mmc-summit-spreker { margin: 0; }
.mmc-summit-vlek {
	display: grid;
	place-items: center;
	margin-inline: auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.mmc-summit-vlek img { border-radius: 50%; object-fit: cover; }
.mmc-summit-spreker figcaption { font-weight: 700; }

/* --- liggend: de maatvoering van 16:9 ----------------------------------- */

.mmc-summit-titel .r1 { font-size: 2.55em; }
.mmc-summit-titel .r2 { font-size: 2em; }
.mmc-summit-belofte   { font-size: .88em; max-inline-size: 34em; }
.mmc-summit-datum     { font-size: .95em; }
.mmc-summit-prijs     { font-size: .95em; }
.mmc-summit-prijs .nieuw { font-size: 1.35em; }
.mmc-summit-knop      { font-size: .82em; padding: .55em 1.7em; }
.mmc-summit-adres     { font-size: .72em; }
.mmc-summit-sprekers  { grid-template-columns: repeat(4, 1fr);
                        gap: 0 .4em; margin-top: .3em; }
/* Bronmaat: op de originele banner van 1600 px is een portret 148 px in
 * doorsnee, dus 9,27% van de breedte. Bij een basis van 2cqw is 1em twee
 * procent, en dus is dat 4,63em. De vlek houdt zijn verhouding tot de foto
 * aan (2,07 breed, 1,26 hoog) zodat hij hem blijft omsluiten zoals daar. */
.mmc-summit-vlek      { inline-size: 9.6em; block-size: 5.83em; }
.mmc-summit-vlek img  { inline-size: 4.63em; block-size: 4.63em; }
.mmc-summit-spreker figcaption { font-size: .62em; margin-top: .12em; }

/* In de liggende vorm past de zin op een regel; een vaste breuk zou hem daar
 * juist opbreken. */
.mmc-summit-belofte br { display: none; }

/* --- staand: onder 1000 px in de BAK ------------------------------------ */
@container (max-width: 1000px) {
	.mmc-summit {
		aspect-ratio: 1080 / 1350;
		font-size: 2.89cqw;
		gap: .6em;
		padding: .78em .32em;
	}
	.mmc-summit-decor--breed  { display: none; }
	.mmc-summit-decor--staand { display: block; }
	.mmc-summit-belofte br    { display: inline; }

	.mmc-summit-titel .r1 { font-size: 1.834em; }
	.mmc-summit-titel .r2 { font-size: 1.479em; }
	.mmc-summit-belofte   { font-size: 1.508em; max-inline-size: none; }
	.mmc-summit-datum     { font-size: 1.597em; }
	.mmc-summit-prijs     { font-size: 1.242em; }
	.mmc-summit-prijs .oud   { font-size: 1.143em; }
	.mmc-summit-prijs .nieuw { font-size: 1.786em; }
	.mmc-summit-knop      { font-size: 1.464em; padding: .62em 1.5em; }
	.mmc-summit-adres     { font-size: 1.42em; }

	/* Vier portretten naast elkaar worden hier postzegels: het gezicht wordt
	 * smaller dan de naam eronder. Twee kolommen houdt een gezicht
	 * herkenbaar, en dat is het enige waarvoor ze er staan. */
	.mmc-summit-sprekers { grid-template-columns: repeat(2, 1fr);
	                       gap: .62em .6em; margin-top: .4em; }
	.mmc-summit-vlek     { inline-size: 11.1em; block-size: 6.75em; }
	.mmc-summit-vlek img { inline-size: 5.5em; block-size: 5.5em; }
	.mmc-summit-spreker figcaption { font-size: 1.242em; margin-top: .4em; }
}

/* --- de beweging, rechtstreeks en zonder JavaScript ---------------------
 *
 * Eerst hingen deze regels achter `.eq-banner.is-in`, de klasse die
 * mmc-beweging.js zet zodra een element in beeld komt. Op de artifact bewoog
 * dezelfde animatie wel op Martins Android en op de site niet — wat
 * `prefers-reduced-motion` uitsluit, want die grendel zit in allebei, en dat
 * ene verschil overliet.
 *
 * Die koppeling leverde hier ook niets op. Een scroll-waarnemer bestaat om
 * animatie uit te stellen tot iets in beeld komt; deze banner staat bóven de
 * vouw en is bij het laden al zichtbaar. mmc-beweging.js weet dat zelf ook: er
 * zit een tak in die `is-in` meteen zet voor elementen boven de vouw, juist om
 * de waarnemer over te slaan. Wat overbleef was dus alleen een extra manier om
 * te falen.
 *
 * De bewegingslaag blijft staan voor wat verderop op de pagina komt — de
 * tellercirkels — want daar is uitstellen tot iets in beeld komt wél het punt.
 *
 * Deze banner is CSS en hoort ook zonder JavaScript te bewegen.
 *
 * De keyframes zelf zijn LETTERLIJK die van de artifact; alleen de namen zijn
 * geprefixt, omdat `op` en `drift` in een sitebrede stylesheet vroeg of laat
 * botsen met iets anders.
 *
 * Kosten: geen JavaScript erbij, geen extra verzoek, geen bibliotheek. Alleen
 * transform, opacity en box-shadow, dus het blijft van de hoofddraad af.
 * ------------------------------------------------------------------------ */

@keyframes mmc-summit-op {
	from { opacity: 0; transform: translateY(var(--y, 0px)) scale(var(--s, 1)); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mmc-summit-schuif {
	from { transform: translateX(var(--x, 0px)); }
	to   { transform: translateX(0); }
}
@keyframes mmc-summit-drift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-9px, -6px, 0); }
}
/* Ook getemperd: het aanbod moet meteen stabiel STAAN. Dit is nu een accent
 * en geen aftelklok — .68 in plaats van .5, 5 px in plaats van 9, 1,045 in
 * plaats van 1,09, en een cyclus van 7 in plaats van 5 seconden. */
@keyframes mmc-summit-prijs-oud {
	0%, 5% { opacity: 1; } 14% { opacity: .68; } 29%, 100% { opacity: 1; }
}
@keyframes mmc-summit-prijs-pijl {
	0%, 6% { transform: translateX(0); } 16% { transform: translateX(5px); }
	30%, 100% { transform: translateX(0); }
}
@keyframes mmc-summit-prijs-nieuw {
	0%, 16% { transform: scale(1); } 23% { transform: scale(1.045); }
	36%, 100% { transform: scale(1); }
}
/* Getemperd op verzoek, en minder VAAK en niet alleen minder ver: het panel
 * noemde het permanente karakter storend, niet de amplitude. Ring van .5em naar
 * .32em, dekking van 22 naar 13 procent, cyclus van 5 naar 7 seconden. */
@keyframes mmc-summit-gloed {
	0%, 92%, 100% { box-shadow: 0 0 0 0 rgba(242, 183, 20, 0); }
	96%           { box-shadow: 0 0 0 .32em rgba(242, 183, 20, .13); }
}

.mmc-summit-decor {
	animation: mmc-summit-op 600ms cubic-bezier(.2,.7,.3,1) both,
	           mmc-summit-drift 18s ease-in-out 600ms infinite;
}
/* Twee animaties op hetzelfde element, dus in één shorthand: de entree en
 * daarna de golf. Twee losse `animation`-regels zouden elkaar
 * overschrijven — de laatste wint en de eerste verdwijnt zonder melding. */
.mmc-summit-titel {
	--y: 12px;
	animation: mmc-summit-op 400ms cubic-bezier(.2,.7,.3,1) 120ms both;
}
.mmc-summit-belofte { --y: 10px; animation: mmc-summit-op 400ms cubic-bezier(.2,.7,.3,1) 210ms both; }
.mmc-summit-datum { --y:  8px; animation: mmc-summit-op 380ms cubic-bezier(.2,.7,.3,1) 280ms both; }
.mmc-summit-prijs { --y:  6px; animation: mmc-summit-op 380ms cubic-bezier(.2,.7,.3,1) 350ms both; }
.mmc-summit-actie { --y:  6px; animation: mmc-summit-op 300ms ease-out 520ms both; }
.mmc-summit-adres { animation: mmc-summit-op 300ms ease-out 640ms both; }

.mmc-summit-prijs .pijl {
	--x: -8px;
	display: inline-block;
	animation: mmc-summit-schuif 320ms cubic-bezier(.3,.8,.2,1) 480ms both,
	           mmc-summit-prijs-pijl 7s ease-in-out 1400ms infinite;
}
.mmc-summit-prijs .oud { animation: mmc-summit-prijs-oud 7s ease-in-out 1400ms infinite; }
.mmc-summit-prijs .nieuw { display: inline-block;
                           animation: mmc-summit-prijs-nieuw 7s ease-in-out 1400ms infinite; }
/* De gloed alleen was een flits van tweehonderd milliseconde in een cyclus
 * van vijf seconden — je moest er net naar kijken. Er komt een trage
 * ademhaling bij, in FASE met die gloed: zelfde duur, zelfde vertraging, dus
 * de knop komt naar voren op het moment dat de ring oplicht in plaats van er
 * los doorheen te lopen. */
@keyframes mmc-summit-adem {
	0%, 88%, 100% { transform: scale(1); }
	96%           { transform: scale(1.018); }
}
.mmc-summit-knop {
	animation: mmc-summit-gloed 7s ease-in-out 1600ms infinite,
	           mmc-summit-adem  7s ease-in-out 1600ms infinite;
}

/* De gouden golf door de kop.
 *
 * EEN doorlopende beweging en geen vijf kleurwisselingen. De vorige opzet
 * animeerde de kleur van vijf losse woorden na elkaar; hoe je de tijden ook
 * zet, dat blijft vijf gebeurtenissen waarin een woord naar goud springt en
 * terug. Er is geen waarde waarmee dat glijdt, want er beweegt niets — er
 * verandert alleen iets, vijf keer.
 *
 * Nu een gouden band in een verloop, over de hele kop gelegd met
 * `background-clip: text`, die van rechts naar links door de letters schuift.
 * De overgang loopt daardoor OVER losse letters heen.
 *
 * De band is ongeveer vier tekens breed (de 6 procent tussen de twee gouden
 * stops op een achtergrond van 260 procent). Smaller wordt een flikkering,
 * breder kleurt de halve kop tegelijk en is het geen golf meer.
 *
 * De golf loopt over de HELE kop en niet per regel: het verloop staat op
 * .mmc-summit-titel, dus hij glijdt van de tweede regel door naar de eerste als
 * één beweging. Per regel zou hij twee keer opnieuw beginnen.
 *
 * DE VALKUIL. Voor een zichtbaar verloop moet de tekstkleur doorzichtig zijn.
 * Werkt background-clip niet, dan staat er een ONZICHTBARE kop. Vandaar de
 * @supports eromheen, en vandaar dat de reduced-motion-regel de kleur expliciet
 * terugzet: beweging uit mag nooit betekenen dat de tekst verdwijnt.
 *
 * 3 seconden, zoals gevraagd, en één keer. */
/* DE PROCENTREKENING WERKT HIER OMGEKEERD, en dat kostte drie ronden.
 * Bij een achtergrond die GROTER is dan zijn vak betekent `background-position:
 * 0%` niet "links van het vak" maar "linkerranden gelijk", en 100% "rechterranden
 * gelijk". De positie loopt dus van 0 naar 100 en niet van 100 naar min iets.
 *
 * Met een verloop van 300 procent en de gouden kern op 46 tot 54 procent staat
 * die kern bij 0% rechts buiten beeld en bij 100% links buiten beeld. De reis
 * van 0 naar 100 laat hem dus precies EEN keer passeren, en het vak is
 * onderweg altijd bedekt — vandaar dat no-repeat hier veilig is.
 *
 * Wat er misging toen ik het andersom deed: bij een reis over precies een tegel
 * kwam aan het eind de volgende band binnen (op 3400 ms lichtte "AI" opnieuw
 * op), en bij een te korte reis was de band maar een derde van de tijd in beeld
 * (op 900, 2400, 2900 en 3400 ms stond er geen letter goud). Allebei op de
 * filmstrip gezien, niet beredeneerd. */
@keyframes mmc-summit-golf {
	from { background-position: 100% 0; }
	to   { background-position: 0% 0; }
}

/* De tweede regel loopt TERUG, van rechts naar links.
 *
 * Waarom: liep hij ook van links naar rechts, dan eindigde de hele beweging op
 * "AEO/GEO" — precies het jargon waar twee persona's uit het panel op afhaken.
 * Het laatste wat oplicht is het laatste wat blijft hangen, en dat hoort geen
 * afkorting te zijn die de helft van de lezers niet kent. Nu eindigt hij op
 * "MASTERING".
 *
 * En het leest bovendien als één doorlopende beweging: de golf komt rechts uit
 * de eerste regel en zakt daar de tweede in, in plaats van terug te springen
 * naar links. */
@keyframes mmc-summit-golf-terug {
	from { background-position: 0% 0; }
	to   { background-position: 100% 0; }
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	/* Het verloop staat op de REGELS en niet op de kop. Op de kop raakte een
	 * horizontale band beide regels tegelijk — ze staan onder elkaar in
	 * hetzelfde vak, dus op dezelfde x. Per regel krijgt elk zijn eigen band en
	 * volgt de tweede op de eerste.
	 *
	 * 90deg en niet schuin: diagonaal zat de band halverwege tussen de regels
	 * in, en op 1900 ms stond er geen letter goud. De zachte flanken (34 naar 46
	 * en 54 naar 66 procent) laten hem IN en UIT lopen over de letters heen; een
	 * harde rand zou per letter omklappen en weer als stappen lezen. */
	.mmc-summit-titel .r1,
	.mmc-summit-titel .r2 {
		/* De stops gehalveerd. Ik gaf "4,5 tekens" op en dat sloeg op het PLATEAU
		 * (46 tot 54 procent). Wat je als goud ZIET is plateau plus de bovenkant
		 * van de twee hellingen, en dat mat 8,9 tekens — het panel telde 9 tot 13
		 * en had gelijk. Een spec over een verloop moet dus over de zichtbare
		 * band gaan en niet over het plateau.
		 *
		 * Gemeten in tekens en niet in procenten, want dat is wat gevraagd werd:
		 * de oude stops (34/46/54/66) gaven 8,9 tekens, 44/48/52/56 gaf er 3,5.
		 * Daartussen ligt de gevraagde 4 a 5, en dat zijn 42/47/53/58. */
		background-image: linear-gradient(90deg,
			#fff 0%, #fff 42%,
			#f2b714 47%, #f2b714 53%,
			#fff 58%, #fff 100%);
		background-size: 300% 100%;
		background-position: 100% 0;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* 2250 ms per regel, achter elkaar: samen 4,5 seconden en dus vijftig
	 * procent trager dan de drie die er stonden. Niet 4,5 per regel — dan was
	 * het negen geworden. */
	.mmc-summit-titel .r1 { animation: mmc-summit-golf 2250ms linear 700ms 1 both; }
	/* r2 start 585 ms EERDER dan r1 eindigt, en dat is geen slordigheid maar een
	 * som. De band staat 42 tot 58 procent van een tegel van 300, dus 126 tot 174
	 * procent van de regelbreedte. Hij is pas zichtbaar als hij de rand haalt: bij
	 * 13 procent van de animatie komt hij binnen, bij 87 procent is hij eruit.
	 * De eerste en laatste 13 procent staat hij dus BUITEN beeld.
	 *
	 * Zonder overlap betekent dat: regel 1 is leeg vanaf 700 + 2250 x 0,87 = 2658
	 * ms, en regel 2 laat pas iets zien vanaf 2950 + 2250 x 0,13 = 3243. Dat is
	 * 585 ms waarin er niets beweegt, middenin wat ik "een doorlopende beweging"
	 * had genoemd. Het panel zag het op twee opeenvolgende frames (2800 en 3300
	 * ms) en had gelijk; ik had die claim niet gemeten.
	 *
	 * 2950 - 585 = 2365. */
	.mmc-summit-titel .r2 { animation: mmc-summit-golf-terug 2250ms linear 1965ms 1 both; }
}

/* De spans per woord doen nu niets meer. Ze blijven staan omdat ze de haak zijn
 * waarmee dit terug te draaien is, en omdat ze niets kosten. */
.mmc-summit-titel .w { display: inline-block; }

/* De sprekers komen één voor één, 70 ms uit elkaar. Het volgnummer staat als
 * `--i` in de markup, zodat er geen vier bijna-gelijke regels nodig zijn. */
.mmc-summit-spreker {
	--y: 8px;
	animation: mmc-summit-op 340ms cubic-bezier(.2,.7,.3,1) both;
	animation-delay: calc(560ms + var(--i, 0) * 70ms);
}
.mmc-summit-vlek {
	--s: .86;
	animation: mmc-summit-op 420ms cubic-bezier(.2,.9,.25,1) both;
	animation-delay: calc(560ms + var(--i, 0) * 70ms);
}

/* Wie beweging heeft uitgezet krijgt een zachte fade en verder niets.
 *
 * De instelling vraagt om geen BEWEGING. Een verandering in dekking verschuift
 * niets en valt daar niet onder; wat er wel onder valt is alles wat schuift,
 * schaalt, draait of pulseert. Dus geen drift, geen prijssequentie, geen gloed.
 *
 * De gewone animaties hangen achter `.eq-banner.is-in`, en die klasse wordt
 * onder deze instelling nooit gezet — mmc-beweging.js stapt er meteen uit. Er
 * is hier dus niets te overschrijven, en juist daarom staat er geen
 * `!important`: een !important-declaratie wint van een animatie, en dan zou de
 * fade hieronder zelf niet lopen.
 *
 * Gemeten op een Android-Pixel: 21 animaties met de instelling uit, 0 met hem
 * aan. Dat laatste is correct, maar het leverde wel een banner op die er
 * volstrekt levenloos bij stond. */
@keyframes mmc-summit-verschijn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.mmc-summit, .mmc-summit * { transition: none !important; }

	/* De kop staat op `color: transparent` om het verloop te tonen. Zonder
	 * animatie blijft dat verloop op zijn beginstand staan en is de kop dus
	 * onzichtbaar. Kleur expliciet terug: beweging uit betekent geen beweging,
	 * niet geen tekst. */
	.mmc-summit-titel,
	.mmc-summit-titel .r1,
	.mmc-summit-titel .r2 {
		background-image: none;
		color: #fff;
	}
	.mmc-summit > *:not(.mmc-summit-decor) {
		animation: mmc-summit-verschijn 520ms ease-out both;
		transform: none !important;
	}
	.mmc-summit-decor {
		animation: mmc-summit-verschijn 700ms ease-out both;
		transform: none !important;
	}
}

/* --- de plaatsing op de pagina ------------------------------------------
 *
 * Op een telefoon stond er 51 px tussen de gouden streep onder de reviewsbalk
 * en de bovenkant van de banner. Dat is niet een marge maar de `padding-top:
 * 48px` van de bannergroep zelf, plus een pixel of drie afronding — gemeten,
 * want een marge die je niet gevonden hebt haal je niet weg, je zet er alleen
 * een negatieve naast.
 *
 * Op verzoek 3 px, zodat de banner tegen de gouden lijn aan sluit en er geen
 * strook achtergrond meer tussen staat. Alleen op smalle schermen: op desktop
 * hoort die lucht bij het ritme van de pagina.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
	.eq-banner { padding-top: 3px; }
}

/* Op desktop dertig procent eraf. Gemeten stond het gat tussen de gouden lijn
 * en de banner op 51 px, waarvan 48 uit de padding van de bannergroep komt en
 * 3 uit de rand zelf. Dertig procent van 51 is 15, dus de padding gaat van 48
 * naar 33 en het gat wordt 36.
 *
 * Niet verder omlaag: op een breed scherm is die lucht wél ritme. Op een
 * telefoon staat hij op 3 px omdat daar elke pixel boven de vouw telt en de
 * banner de eerste inhoud is die je wilt zien. */
@media (min-width: 901px) {
	.eq-banner { padding-top: 33px; }
}

/* ===========================================================================
   §91  De chatknop rechtsonder

   Hij is een hulpmiddel en geen onderdeel van de pagina, dus hij hoort niet
   met het beeld te concurreren. Gemeten stond hij op 195 x 46 px op desktop,
   pal over de rechteronderhoek van de banner heen.

   Smaller gemaakt via de LETTER en de PADDING, niet via een vaste breedte: een
   vaste breedte knijpt de tekst af zodra iemand het opschrift wijzigt of een
   vertaling langer uitvalt, en dan staat er "How can we h…".

   Op een telefoon blijft hij zoals hij is: daar is hij al een rond knopje van
   52 px, en dat is precies de ondergrens voor een tapdoel.
   =========================================================================== */

@media (min-width: 901px) {
	.eqw-chat.wp-block-eqwise-chatknop {
		font-size: 14px;
		padding-block: 9px;
		padding-inline: 14px;
		gap: 8px;
	}
	.eqw-chat.wp-block-eqwise-chatknop svg,
	.eqw-chat.wp-block-eqwise-chatknop img {
		inline-size: 18px;
		block-size: 18px;
	}
}