/*
 * Tegelstijl voor werksnellermetai.nl
 * Alle waarden komen uit het goedgekeurde ontwerp (canvas 1b9be6a9), artboards
 * "Homepage, desktop 1440" en "Mobiel 390". Niets hierin is opnieuw verzonnen.
 */

/* ── Letters ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/switzer-300.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/switzer-400.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/switzer-500.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/switzer-600.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/switzer-700.woff2) format('woff2'); }
@font-face { font-family: 'Switzer'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(../fonts/switzer-800.woff2) format('woff2'); }

/* ── Ontwerptaal ─────────────────────────────────────────────────────────── */
.wsmai-tegel {
  --papier:      #FFFFFE;
  --warmgrijs:   #F5F4F1;
  --bijnazwart:  #10141B;
  --inkt:        #14181F;
  --goud:        #C8952E;
  --goudlink:    #96690E;
  --licht:       #F5F5F3;

  --inkt-85: rgba(20,24,31,0.85);
  --inkt-75: rgba(20,24,31,0.75);
  --inkt-70: rgba(20,24,31,0.70);
  --inkt-55: rgba(20,24,31,0.55);
  --inkt-25: rgba(20,24,31,0.25);
  --inkt-10: rgba(20,24,31,0.10);
  --inkt-08: rgba(20,24,31,0.08);

  --licht-85: rgba(245,245,243,0.85);
  --licht-80: rgba(245,245,243,0.80);
  --licht-72: rgba(245,245,243,0.72);
  --licht-60: rgba(245,245,243,0.60);
  --licht-55: rgba(245,245,243,0.55);
  --licht-45: rgba(245,245,243,0.45);
  --licht-20: rgba(245,245,243,0.20);
  --licht-10: rgba(245,245,243,0.10);

  --rand:  22px;   /* tegelhoek */
  --kier:  12px;   /* ruimte tussen tegels */
  --baan: 1416px;  /* 1440 artboard minus 2x12 kier */

  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  color: var(--inkt);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 820px) {
  .wsmai-tegel { --rand: 18px; --kier: 10px; }
}

/* ── Basis ───────────────────────────────────────────────────────────────── */
.wsmai-tegel *, .wsmai-tegel *::before, .wsmai-tegel *::after { box-sizing: border-box; }
.wsmai-tegel p, .wsmai-tegel h1, .wsmai-tegel h2, .wsmai-tegel h3 { margin: 0; }
.wsmai-tegel img { max-width: 100%; }
.wsmai-tegel a { color: var(--goudlink); text-decoration: none; }
.wsmai-tegel a:hover { text-decoration: underline; }
.wsmai-tegel a:focus-visible,
.wsmai-tegel button:focus-visible {
  outline: 2px solid var(--goud); outline-offset: 3px; border-radius: 4px;
}

.wsmai-tegel__overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--inkt); color: var(--papier);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 100;
}
.wsmai-tegel__overslaan:focus { left: 12px; top: 12px; }

/* ── Navigatie ───────────────────────────────────────────────────────────── */
/* Als element-selector (nav.) omdat de boekingsplugin dezelfde klasse
   gebruikt voor de maandknopjes van zijn kalender. Zonder dit wint zijn
   stylesheet, die later laadt, en verliest de balk zijn achtergrond. */
nav.wsmai-nav {
  position: sticky; top: 0; z-index: 50;
  width: auto; height: auto; border: 0; border-radius: 0;
  font-size: inherit; color: inherit; cursor: auto;
  background: rgba(250,250,248,0.95);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--inkt-08);
}
/* Het canvas tekende 48px met 13px-letters; dat vond Eric te ielig naast de
   rest van de site. Daarom 64px hoog met een groter logo en 14px-letters. */
.wsmai-nav__baan {
  max-width: 1064px; margin: 0 auto; padding: 0 22px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
/* Het merk is het logo uit de brandkit, de horizontale variant voor lichte
   achtergronden. Hoogte 24px past in de balk van 48 en houdt dezelfde
   breedte aan als het woordmerk in het ontwerp. */
.wsmai-tegel a.wsmai-nav__merk { display: inline-flex; align-items: center; }
.wsmai-tegel a.wsmai-nav__merk img { height: 32px; width: auto; display: block; }
.wsmai-nav__merk:hover { text-decoration: none; }
.wsmai-nav__lijst {
  display: flex; align-items: center; gap: 34px;
  list-style: none; margin: 0; padding: 0;
}
.wsmai-nav__lijst a { font-size: 14px; font-weight: 500; color: var(--inkt-85); }
.wsmai-tegel .wsmai-nav__lijst a.is-hier,
.wsmai-tegel .wsmai-nav__knop.is-hier { color: var(--inkt); font-weight: 700; }
.wsmai-tegel .wsmai-nav__mobiel a.is-hier { font-weight: 700; }
.wsmai-nav__pil {
  font-size: 14px; font-weight: 500; background: var(--inkt); color: var(--papier) !important;
  padding: 9px 19px; border-radius: 999px; white-space: nowrap;
}
.wsmai-nav__pil:hover { text-decoration: none; background: #000; }

/* Diensten, uitklap */
.wsmai-nav__uit { position: relative; }
.wsmai-nav__knop {
  font: inherit; font-size: 14px; font-weight: 500; color: var(--inkt-85);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.wsmai-nav__pijl { transition: transform 0.2s ease; }
.wsmai-nav__knop[aria-expanded="true"] .wsmai-nav__pijl { transform: rotate(180deg); }
.wsmai-nav__paneel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--papier); border: 1px solid var(--inkt-10);
  border-radius: var(--rand); padding: 22px;
  box-shadow: 0 18px 44px rgba(20,24,31,0.10);
  /* De kolommen volgen het aantal groepen in plaats van vast op drie te
     staan. Stond hier eerder repeat(3, 1fr) met min-width 620px, uit de tijd
     dat het aanbod uit drie groepen bestond. Bij twee groepen bleef er een
     hele kolom leeg staan. */
  display: none; grid-auto-flow: column; grid-auto-columns: max-content;
  column-gap: 40px;
}
.wsmai-nav__paneel[data-open="ja"] { display: grid; }
.wsmai-nav__groep h3 {
  font-size: 12px; font-weight: 600; color: var(--inkt-55);
  text-transform: none; margin-bottom: 10px;
}
.wsmai-nav__groep ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wsmai-nav__groep a { display: block; color: var(--inkt); }
.wsmai-nav__groep a:hover { text-decoration: none; }
.wsmai-nav__naam { display: block; font-size: 14px; font-weight: 600; }
.wsmai-nav__prijs { display: block; font-size: 13px; color: var(--inkt-55); margin-top: 2px; }
.wsmai-nav__groep a:hover .wsmai-nav__naam { color: var(--goudlink); }

.wsmai-nav__hamburger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; position: relative; padding: 0;
}
.wsmai-nav__streep {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--inkt); border-radius: 2px;
  transition: transform 0.22s ease, top 0.22s ease;
}
.wsmai-nav__streep:nth-child(1) { top: 15px; }
.wsmai-nav__streep:nth-child(2) { top: 23px; }
.wsmai-nav__hamburger[aria-expanded="true"] .wsmai-nav__streep:nth-child(1) { top: 19px; transform: rotate(45deg); }
.wsmai-nav__hamburger[aria-expanded="true"] .wsmai-nav__streep:nth-child(2) { top: 19px; transform: rotate(-45deg); }

/* Het mobiele menu bestaat altijd in de HTML, maar is alleen zichtbaar als het
   op een smal scherm is opengeklapt. */
.wsmai-nav__mobiel { display: none; }

/* ── Knoppen en links ────────────────────────────────────────────────────── */
.wsmai-knop {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--goud); color: var(--inkt) !important;
  font-size: 17px; font-weight: 600; padding: 13px 26px; border-radius: 999px;
  transition: background 0.18s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.wsmai-knop:hover { text-decoration: none; background: #b8862a; }
/* Een knop hoort te reageren op de druk zelf en niet pas op het resultaat. */
.wsmai-tegel .wsmai-knop:active,
.wsmai-tegel button.wsmai-kopieer:active,
.wsmai-tegel a.wsmai-bundelpil:active { transform: scale(0.97); }
.wsmai-link {
  color: var(--goudlink); font-size: 18px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
}
.wsmai-link__pijl { font-size: 15px; }
.wsmai-tegel a.wsmai-link--licht { color: var(--goud); }

/* ── Tegels ──────────────────────────────────────────────────────────────── */
.wsmai-tegels {
  max-width: var(--baan); margin: 0 auto;
  padding: var(--kier);
  display: flex; flex-direction: column; gap: var(--kier);
}
.wsmai-tegel__blok {
  border-radius: var(--rand); overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.wsmai-tegel__blok--licht  { background: var(--warmgrijs); }
.wsmai-tegel__blok--donker { background: var(--bijnazwart); color: var(--licht); }
.wsmai-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kier); }
.wsmai-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kier); }

/* ── Kop ─────────────────────────────────────────────────────────────────── */
.wsmai-hero {
  padding: 96px 24px 60px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 22px;
}
.wsmai-hero h1 {
  font-size: 72px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.04;
  max-width: 17ch;
}
.wsmai-hero__onder {
  font-size: 25px; font-weight: 400; line-height: 1.4; color: var(--inkt-75); max-width: 42ch;
}
.wsmai-hero__acties { display: flex; align-items: center; gap: 36px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Beeldtegels ─────────────────────────────────────────────────────────── */
.wsmai-beeld { max-width: var(--baan); margin: 0 auto; padding: 0 var(--kier); }
.wsmai-beeld__tegel { position: relative; height: 620px; border-radius: var(--rand); overflow: hidden; }
.wsmai-beeld__tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsmai-beeld__sluier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,20,27,0) 55%, rgba(16,20,27,0.55) 100%); }
.wsmai-beeld__bijschrift {
  position: absolute; left: 0; right: 0; bottom: 34px;
  display: flex; justify-content: center;
  font-size: 15px; color: var(--licht-85);
}

.wsmai-eric { position: relative; height: 560px; border-radius: var(--rand); overflow: hidden; }
.wsmai-eric img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsmai-eric__sluier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,20,27,0.2) 0%, rgba(16,20,27,0.78) 78%); }
.wsmai-eric__tekst {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 24px 62px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 14px;
}
.wsmai-eric__tekst h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.022em; color: var(--licht); max-width: 22ch;
}
.wsmai-eric__tekst p { font-size: 18px; line-height: 1.5; color: var(--licht-80); max-width: 54ch; }

/* ── Skilltegel ──────────────────────────────────────────────────────────── */
.wsmai-skill { padding: 84px 24px 90px; gap: 18px; }
.wsmai-skill h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.024em; color: var(--licht); }
.wsmai-skill__onder { font-size: 21px; color: var(--licht-72); max-width: 46ch; line-height: 1.45; }
.wsmai-skill__stappen {
  display: flex; flex-direction: column; margin-top: 26px; min-width: 560px; max-width: 100%;
  list-style: none; padding: 0;
}
.wsmai-skill__stap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--licht-10);
}
.wsmai-skill__bol {
  width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  background: var(--licht-20); transition: background 0.35s ease;
}
.wsmai-skill__tekst {
  font-size: 18px; font-weight: 400; color: var(--licht-45);
  transition: color 0.35s ease;
}
.wsmai-skill__stap[data-vol="ja"] .wsmai-skill__bol { background: var(--goud); }
.wsmai-skill__stap[data-vol="ja"] .wsmai-skill__tekst { font-weight: 500; color: var(--licht); }
.wsmai-skill__merken { display: flex; gap: 34px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.wsmai-skill__merken span { font-size: 15px; color: var(--licht-60); }

/* ── Deployment gap ──────────────────────────────────────────────────────── */
.wsmai-gat { padding: 66px 54px; gap: 16px; }
.wsmai-gat h3 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; max-width: 16ch; }
.wsmai-gat p { font-size: 17px; line-height: 1.5; color: var(--inkt-70); max-width: 44ch; }
.wsmai-gat svg { margin-top: 12px; max-width: 100%; height: auto; }

.wsmai-citaat { padding: 66px 54px; gap: 20px; justify-content: center; }
.wsmai-citaat p {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18;
  color: var(--licht); max-width: 20ch;
}
.wsmai-citaat__getal { color: var(--goud); }
.wsmai-citaat__bron { font-size: 15px; color: var(--licht-55); }

/* ── Master Brain ────────────────────────────────────────────────────────── */
.wsmai-brein { padding: 84px 24px; gap: 16px; }
.wsmai-brein h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.024em; }
.wsmai-brein p { font-size: 19px; line-height: 1.5; color: var(--inkt-70); max-width: 62ch; }
.wsmai-brein .wsmai-link { margin-bottom: 20px; }
.wsmai-brein svg { max-width: 100%; height: auto; }

/* ── Drie routes ─────────────────────────────────────────────────────────── */
.wsmai-route { padding: 54px 40px 46px; gap: 14px; }
.wsmai-route__wie { font-size: 14px; font-weight: 500; color: var(--inkt-55); }
.wsmai-route h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.wsmai-route__wat { font-size: 16px; line-height: 1.5; color: var(--inkt-70); }
.wsmai-route__prijzen {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  list-style: none; padding: 0;
}
.wsmai-route__prijzen li { font-size: 15px; color: var(--inkt-85); }
.wsmai-route__bedrag { color: var(--goudlink); }
.wsmai-route .wsmai-link { font-size: 16px; margin-top: 8px; }
.wsmai-route .wsmai-link .wsmai-link__pijl { font-size: 14px; }

/* ── Slot ────────────────────────────────────────────────────────────────── */
.wsmai-slot { padding: 84px 24px; gap: 18px; }
.wsmai-slot h2 { font-size: 48px; font-weight: 700; letter-spacing: -0.024em; max-width: 20ch; }
.wsmai-slot p { font-size: 19px; color: var(--inkt-70); }
.wsmai-slot .wsmai-knop { margin-top: 8px; }

/* ── Voet ────────────────────────────────────────────────────────────────── */
.wsmai-voetblok {
  max-width: var(--baan); margin: var(--kier) auto 0;
  padding: 0 var(--kier) var(--kier);
}
.wsmai-voetblok__tegel {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 52px 48px 30px;
}
.wsmai-voetblok__kolommen {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.wsmai-voetblok__merk { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wsmai-voetblok__merk img { height: 26px; width: auto; display: block; }
.wsmai-voetblok__merk p { font-size: 14px; line-height: 1.6; color: var(--inkt-70); max-width: 34ch; }
.wsmai-voetblok__gegevens, .wsmai-voetblok__merk .wsmai-voetblok__gegevens { font-size: 13px; color: var(--inkt-55); line-height: 1.8; }
.wsmai-tegel .wsmai-voetblok__gegevens a { color: var(--inkt-70); }

.wsmai-voetblok__kop {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--inkt-55); margin: 4px 0 14px;
}
.wsmai-voetblok ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wsmai-tegel .wsmai-voetblok ul a { font-size: 14px; color: var(--inkt-70); }
.wsmai-tegel .wsmai-voetblok ul a:hover { color: var(--inkt); text-decoration: none; }

.wsmai-voetblok__onder {
  margin-top: 40px; padding-top: 18px;
  border-top: 1px solid var(--inkt-10);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.wsmai-voetblok__onder, .wsmai-tegel .wsmai-voetblok__onder a { font-size: 12px; color: var(--inkt-55); }

/* ── Opkomen ─────────────────────────────────────────────────────────────── */
@keyframes wsmai-opkomen {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* Zonder JavaScript blijft alles gewoon staan; pas als het script zich meldt
   worden de tegels verborgen om te kunnen opkomen. */
.wsmai-tegel[data-script="ja"] .wsmai-opkomen { opacity: 0; }
.wsmai-tegel[data-script="ja"] .wsmai-opkomen[data-zichtbaar="ja"] {
  animation: wsmai-opkomen 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Gelaagd opkomen ─────────────────────────────────────────────────────── */
/* Het script markeert rasters als .wsmai-stagger en geeft elk kind zijn
   volgnummer; de kinderen komen dan een voor een op, zoals apple.nl dat
   doet. Zonder script blijft alles gewoon staan. */
.wsmai-tegel[data-script="ja"] .wsmai-stagger > * { opacity: 0; }
.wsmai-tegel[data-script="ja"] .wsmai-stagger.is-zichtbaar > * {
  animation: wsmai-opkomen 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--wsmai-i, 0) * 70ms);
}

/* ── De kop ontvangt je ──────────────────────────────────────────────────── */
.wsmai-hero > *, .wsmai-kop > *, .wsmai-artikel__kop > * {
  animation: wsmai-opkomen 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wsmai-hero > :nth-child(2), .wsmai-kop > :nth-child(2), .wsmai-artikel__kop > :nth-child(2) { animation-delay: 0.08s; }
.wsmai-hero > :nth-child(3), .wsmai-kop > :nth-child(3), .wsmai-artikel__kop > :nth-child(3) { animation-delay: 0.16s; }
.wsmai-hero > :nth-child(4), .wsmai-kop > :nth-child(4), .wsmai-artikel__kop > :nth-child(4) { animation-delay: 0.24s; }

/* ── Menubewegingen ──────────────────────────────────────────────────────── */
@keyframes wsmai-paneel-open {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.wsmai-nav__paneel[data-open="ja"] { animation: wsmai-paneel-open 0.18s ease both; }

@keyframes wsmai-mobiel-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Scroll als motor ────────────────────────────────────────────────────── */
/* Het script zet --wsmai-par op de foto's (parallax) en --wsmai-open op de
   herotegel (die opent zich naar volle grootte). */
.wsmai-parallax {
  transform: translateY(var(--wsmai-par, 0px)) scale(1.09);
  will-change: transform;
}
.wsmai-beeld__tegel {
  transform: scale(var(--wsmai-open, 1));
  transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
  .wsmai-tegel * { animation: none !important; transition: none !important; }
  .wsmai-tegel[data-script="ja"] .wsmai-opkomen { opacity: 1; }
  .wsmai-tegel[data-script="ja"] .wsmai-stagger > * { opacity: 1; }
  .wsmai-parallax { transform: none; }
}

/* ── Tussenmaten ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .wsmai-hero h1 { font-size: 60px; }
  .wsmai-hero__onder { font-size: 22px; }
  .wsmai-skill h2, .wsmai-brein h2, .wsmai-slot h2 { font-size: 42px; }
  .wsmai-citaat p { font-size: 32px; }
  .wsmai-eric__tekst h2 { font-size: 38px; }
  .wsmai-gat, .wsmai-citaat { padding: 56px 38px; }
  .wsmai-route { padding: 46px 28px 40px; }
  .wsmai-beeld__tegel { height: 500px; }
}

/* ── Mobiel, artboard 390 ────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .wsmai-nav__baan { padding: 0 16px; height: 56px; }
  .wsmai-tegel a.wsmai-nav__merk img { height: 26px; }
  .wsmai-nav__lijst { display: none; }
  .wsmai-nav__hamburger { display: inline-flex; }

  /* Schermvullend menu: vanaf de balk tot onderaan, schuift zelf als de
     inhoud niet past. De hoofdpagina's groot, de diensten compact met de
     prijs rechts, de knop onderaan. */
  .wsmai-nav__mobiel[data-open="ja"] {
    display: block;
    animation: wsmai-mobiel-open 0.22s ease both;
    position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 49;
    /* Volledig dekkend: op 0,99 schemerden de koppen eronder nog door. */
    background: #FAFAF8;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--inkt-08);
  }
  .wsmai-nav__mobiel-binnen {
    padding: 18px 22px calc(28px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; min-height: 100%;
  }
  .wsmai-nav__mobiel ul { list-style: none; margin: 0; padding: 0; }

  .wsmai-nav__groot li + li { border-top: 1px solid var(--inkt-08); }
  .wsmai-tegel .wsmai-nav__groot a {
    display: block; padding: 15px 2px;
    font-size: 21px; font-weight: 600; color: var(--inkt);
  }
  .wsmai-tegel .wsmai-nav__groot a.is-hier { color: var(--goudlink); }

  .wsmai-nav__mobiel .wsmai-nav__kop {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--inkt-55);
    padding: 26px 2px 8px; margin: 0;
  }
  .wsmai-nav__compact li + li { border-top: 1px solid var(--inkt-08); }
  .wsmai-tegel .wsmai-nav__compact a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 12px 2px; font-size: 16px; font-weight: 500; color: var(--inkt);
  }
  .wsmai-nav__compact .wsmai-nav__prijs {
    font-size: 13px; color: var(--goudlink); white-space: nowrap; margin: 0;
  }

  .wsmai-nav__mobiel .wsmai-knop {
    margin-top: auto; width: 100%; font-size: 16px;
    padding-top: 24px;
  }
  .wsmai-nav__mobiel-binnen > .wsmai-knop { margin-top: 28px; padding: 14px 24px; }

  .wsmai-hero { padding: 56px 22px 36px; gap: 16px; }
  .wsmai-hero h1 { font-size: 40px; letter-spacing: -0.026em; line-height: 1.08; max-width: none; }
  .wsmai-hero__onder { font-size: 18px; line-height: 1.45; max-width: none; }
  .wsmai-hero__acties { flex-direction: column; gap: 14px; margin-top: 6px; }
  .wsmai-hero .wsmai-knop { font-size: 16px; padding: 13px 24px; }
  .wsmai-hero .wsmai-link { font-size: 16px; }

  .wsmai-beeld__tegel { height: 300px; }
  .wsmai-beeld__sluier { background: linear-gradient(180deg, rgba(16,20,27,0) 50%, rgba(16,20,27,0.55) 100%); }
  .wsmai-beeld__bijschrift { bottom: 18px; font-size: 13px; }

  .wsmai-duo, .wsmai-trio { grid-template-columns: 1fr; }

  .wsmai-skill { padding: 46px 22px 50px; gap: 12px; }
  .wsmai-skill h2 { font-size: 30px; letter-spacing: -0.022em; }
  .wsmai-skill__onder { font-size: 16px; max-width: none; }
  .wsmai-skill__stappen { margin-top: 16px; min-width: 0; align-self: stretch; }
  .wsmai-skill__stap { justify-content: flex-start; gap: 12px; padding: 11px 4px; text-align: left; }
  .wsmai-skill__bol { width: 7px; height: 7px; }
  .wsmai-skill__tekst { font-size: 15px; }
  .wsmai-skill__merken { display: none; }

  .wsmai-gat { padding: 46px 24px; gap: 12px; }
  .wsmai-gat h3 { font-size: 26px; max-width: none; }
  .wsmai-gat p { font-size: 15px; max-width: none; }
  .wsmai-gat svg { margin-top: 8px; }

  .wsmai-citaat { padding: 46px 26px; gap: 14px; }
  .wsmai-citaat p { font-size: 26px; letter-spacing: -0.018em; line-height: 1.22; max-width: none; }
  .wsmai-citaat__bron { font-size: 14px; }

  .wsmai-brein { padding: 46px 22px; gap: 12px; }
  .wsmai-brein h2 { font-size: 30px; letter-spacing: -0.022em; }
  .wsmai-brein p { font-size: 15px; max-width: none; }
  .wsmai-brein .wsmai-link { font-size: 16px; margin-bottom: 8px; }

  .wsmai-route { padding: 40px 26px 38px; gap: 10px; }
  .wsmai-route__wie { font-size: 13px; }
  .wsmai-route h3 { font-size: 25px; letter-spacing: -0.018em; }
  .wsmai-route__wat { font-size: 15px; }
  .wsmai-route__prijzen { gap: 6px; margin-top: 8px; }
  .wsmai-route__prijzen li { font-size: 14px; }
  .wsmai-route .wsmai-link { font-size: 15px; margin-top: 6px; }

  .wsmai-eric { height: 460px; }
  .wsmai-eric__sluier { background: linear-gradient(180deg, rgba(16,20,27,0.15) 0%, rgba(16,20,27,0.82) 80%); }
  .wsmai-eric__tekst { padding: 0 24px 36px; gap: 10px; }
  .wsmai-eric__tekst h2 { font-size: 27px; letter-spacing: -0.018em; max-width: none; }
  .wsmai-eric__tekst p { font-size: 15px; max-width: none; }
  .wsmai-eric .wsmai-link { font-size: 15px; }

  .wsmai-slot { padding: 48px 26px; gap: 12px; }
  .wsmai-slot h2 { font-size: 29px; letter-spacing: -0.02em; max-width: none; }
  .wsmai-slot p { font-size: 16px; }
  .wsmai-slot .wsmai-knop { font-size: 16px; padding: 13px 24px; margin-top: 6px; }

  .wsmai-voetblok__tegel { padding: 34px 24px 22px; }
  .wsmai-voetblok__kolommen { grid-template-columns: 1fr 1fr; gap: 28px; }
  .wsmai-voetblok__merk { grid-column: 1 / -1; }
  .wsmai-voetblok__onder { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 28px; }
}


/* ══ BINNENPAGINA'S ═══════════════════════════════════════════════════════ */

/* ── Paginakop ───────────────────────────────────────────────────────────── */
.wsmai-kop {
  padding: 76px 24px 36px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
}
.wsmai-kop h1 { font-size: 56px; font-weight: 700; letter-spacing: -0.026em; line-height: 1.06; max-width: 20ch; }
.wsmai-kop__onder { font-size: 20px; color: rgba(20,24,31,0.72); max-width: 46ch; line-height: 1.45; }
.wsmai-kop__label { font-size: 14px; font-weight: 500; color: var(--inkt-55); }
.wsmai-kop .wsmai-knop { margin-top: 8px; }
.wsmai-kop__intro { max-width: 62ch; display: flex; flex-direction: column; gap: 14px; }
.wsmai-kop__intro p { font-size: 18px; line-height: 1.55; color: var(--inkt-70); }

/* ── Paginakop met een omslag ertegenaan (de boekpagina) ─────────────────── */
/* De mockup staat vrij op een doorzichtige achtergrond en heeft zijn eigen
   slagschaduw. Daarom geen kader, geen ronde hoeken en geen tweede schaduw
   eromheen, want dan zie je een rechthoek om een boek dat er los voor staat. */
.wsmai-kop--boek {
  flex-direction: row; align-items: center; justify-content: center;
  text-align: left; gap: 56px; max-width: 1060px; margin: 0 auto;
  padding-top: 64px;
}
.wsmai-kop--boek .wsmai-kop__woord {
  display: flex; flex-direction: column; gap: 16px; max-width: min(34rem, 100%);
}
.wsmai-kop--boek h1 { max-width: none; }
.wsmai-kop--boek .wsmai-kop__onder { max-width: none; }
.wsmai-kop--boek .wsmai-kop__intro { max-width: none; }
.wsmai-kop__omslag { margin: 0; flex: 0 0 auto; width: 340px; }
.wsmai-kop__omslagbeeld { display: block; width: 100%; height: auto; }

/* ── Filterpillen ────────────────────────────────────────────────────────── */
.wsmai-filters { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.wsmai-filter {
  font: inherit; font-size: 14px; cursor: pointer;
  background: none; border: 1px solid rgba(20,24,31,0.2); color: var(--inkt);
  padding: 8px 18px; border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wsmai-filter:hover { border-color: var(--inkt); }
.wsmai-filter[aria-pressed="true"] { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }

/* ── Artikeltegels ───────────────────────────────────────────────────────── */
.wsmai-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kier); }
.wsmai-kaart {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 36px 32px; display: flex; flex-direction: column; gap: 10px;
  text-align: left; align-items: flex-start;
}
.wsmai-kaart__meta { font-size: 13px; color: var(--inkt-55); }
.wsmai-kaart h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.wsmai-tegel .wsmai-kaart h3 a { color: var(--inkt); }
.wsmai-kaart__samenvatting { font-size: 15px; line-height: 1.5; color: var(--inkt-70); }
.wsmai-kaart .wsmai-link { font-size: 15px; margin-top: auto; padding-top: 4px; }
.wsmai-kaart .wsmai-link .wsmai-link__pijl { font-size: 13px; }
.wsmai-kaart[hidden] { display: none; }

/* ── Uitgelicht artikel, boven het raster ────────────────────────────────── */
.wsmai-uitgelicht {
  background: var(--bijnazwart); border-radius: var(--rand);
  display: grid; grid-template-columns: 7fr 5fr; overflow: hidden;
}
.wsmai-uitgelicht__tekst {
  padding: 54px 48px; display: flex; flex-direction: column;
  gap: 14px; align-items: flex-start; text-align: left; justify-content: center;
}
.wsmai-uitgelicht__meta { font-size: 13px; color: var(--licht-60); }
.wsmai-uitgelicht h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.wsmai-tegel .wsmai-uitgelicht h2 a { color: var(--licht); }
.wsmai-uitgelicht__tekst p { font-size: 16px; line-height: 1.55; color: var(--licht-72); max-width: 52ch; }
.wsmai-uitgelicht__beeld { position: relative; min-height: 280px; }
.wsmai-uitgelicht__beeld img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ── Miniatuur op een artikelkaart ───────────────────────────────────────── */
.wsmai-kaart__beeld {
  align-self: stretch; margin: -36px -32px 14px;
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
}
.wsmai-kaart__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.wsmai-kaart:hover .wsmai-kaart__beeld img { transform: scale(1.03); }

/* ── Donkere slottegel ───────────────────────────────────────────────────── */
.wsmai-oproep { padding: 60px 24px; gap: 14px; }
.wsmai-oproep h2 { font-size: 35px; font-weight: 700; letter-spacing: -0.02em; color: var(--licht); }
.wsmai-oproep p { font-size: 17px; color: var(--licht-72); max-width: 52ch; }
.wsmai-oproep .wsmai-knop { margin-top: 4px; }

/* ── Artikel ─────────────────────────────────────────────────────────────── */
.wsmai-artikel__kop {
  max-width: 720px; margin: 0 auto; padding: 76px 22px 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.wsmai-artikel__kruimel { font-size: 14px; color: var(--inkt-55); }
.wsmai-tegel .wsmai-artikel__kruimel a { color: var(--inkt-55); }
.wsmai-artikel__kop h1 { font-size: 46px; font-weight: 700; letter-spacing: -0.024em; line-height: 1.08; }
.wsmai-artikel__inleiding { font-size: 20px; line-height: 1.55; color: rgba(20,24,31,0.72); }
/* Het beeld volgt de tekstkolom van 720. Over de volle breedte werd het een
   plaat van bijna anderhalve meter naast een smalle kolom tekst. */
.wsmai-artikel__beeld { max-width: 764px; margin: 0 auto; padding: 8px 22px 0; }
.wsmai-artikel__beeld img {
  width: 100%; height: auto; border-radius: var(--rand);
  aspect-ratio: 16 / 9; object-fit: cover;
}

.wsmai-lopende-tekst { max-width: 720px; margin: 0 auto; padding: 0 22px; }
/* Met .wsmai-tegel ervoor, want de basisregel .wsmai-tegel p { margin: 0 }
   weegt zwaarder en liet anders alle alinea's aan elkaar plakken. */
.wsmai-tegel .wsmai-lopende-tekst > * + * { margin-top: 20px; }
.wsmai-tegel .wsmai-lopende-tekst > h2 + *,
.wsmai-tegel .wsmai-lopende-tekst > h3 + * { margin-top: 12px; }
.wsmai-lopende-tekst p,
.wsmai-lopende-tekst li { font-size: 18px; line-height: 1.65; color: rgba(20,24,31,0.8); }
.wsmai-tegel .wsmai-lopende-tekst h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.016em; margin-top: 40px; }
.wsmai-tegel .wsmai-lopende-tekst h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.014em; margin-top: 30px; }
.wsmai-lopende-tekst ul, .wsmai-lopende-tekst ol { padding-left: 22px; }
.wsmai-tegel .wsmai-lopende-tekst ul { list-style: disc; }
.wsmai-tegel .wsmai-lopende-tekst ol { list-style: decimal; }
.wsmai-lopende-tekst li + li { margin-top: 8px; }
.wsmai-lopende-tekst img { max-width: 100%; height: auto; border-radius: var(--rand); }
.wsmai-lopende-tekst blockquote {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 30px 34px; font-size: 16px; line-height: 1.6;
}
.wsmai-lopende-tekst table { width: 100%; border-collapse: collapse; font-size: 16px; }
.wsmai-lopende-tekst th, .wsmai-lopende-tekst td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--inkt-10);
}
.wsmai-lopende-tekst code {
  background: var(--warmgrijs); padding: 2px 6px; border-radius: 6px; font-size: 0.92em;
}
.wsmai-lopende-tekst pre {
  background: var(--bijnazwart); color: var(--licht); border-radius: var(--rand);
  padding: 22px 24px; overflow-x: auto; font-size: 15px; line-height: 1.5;
}
.wsmai-lopende-tekst pre code { background: none; padding: 0; color: inherit; }

.wsmai-verder { padding: 44px var(--kier) 0; }
.wsmai-verder__kaart {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 32px 34px; display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start; text-align: left;
}
.wsmai-verder__label { font-size: 13px; color: var(--inkt-55); }
.wsmai-verder__kaart h3 { font-size: 20px; font-weight: 700; }
.wsmai-tegel .wsmai-verder__kaart h3 a { color: var(--inkt); }

/* ── Portret op een persoonspagina ───────────────────────────────────────── */
.wsmai-portret {
  max-width: 764px; margin: 8px auto 0; padding: 0 22px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wsmai-portret img {
  width: 300px; max-width: 100%; height: auto;
  border-radius: var(--rand); display: block;
}
.wsmai-portret figcaption { font-size: 14px; color: var(--inkt-55); }

@media (max-width: 820px) {
  .wsmai-portret { padding: 0 var(--kier); }
  .wsmai-portret img { width: 220px; }
}

/* ── Winkel ──────────────────────────────────────────────────────────────── */
.wsmai-winkel__balk { background: var(--warmgrijs); border-radius: var(--rand); padding: 46px 40px 20px; }
.wsmai-winkel__balk h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.018em; text-align: center; }
/* Het ontwerp tekende vier boeken, er zijn er vijf. Auto-fit laat ze op een
   breed scherm netjes naast elkaar staan en daaronder vanzelf inklappen. */
.wsmai-boeken { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--kier); }
.wsmai-boek {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 40px 28px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px;
}
.wsmai-boek__omslag { display: block; }
.wsmai-boek__omslag img {
  width: 108px; height: auto; border-radius: 7px; display: block;
  box-shadow: 0 12px 26px rgba(20,24,31,0.22);
}
.wsmai-boek__rug {
  width: 84px; height: 110px; background: var(--bijnazwart); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--goud);
}
.wsmai-boek h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; margin-top: 8px; }
.wsmai-tegel .wsmai-boek h3 a { color: var(--inkt); }
.wsmai-boek__prijs { font-size: 15px; color: var(--goudlink); }
.wsmai-boek .wsmai-link { font-size: 15px; }
.wsmai-boek .wsmai-link .wsmai-link__pijl { font-size: 13px; }

.wsmai-bundels { padding: 56px 40px; gap: 12px; }
.wsmai-bundels h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--licht); }
.wsmai-bundels p { font-size: 17px; color: var(--licht-72); max-width: 52ch; }
.wsmai-bundels__pillen { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.wsmai-tegel a.wsmai-bundelpil {
  font-size: 14px; border: 1px solid rgba(245,245,243,0.3); color: var(--licht);
  padding: 9px 18px; border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.wsmai-tegel a.wsmai-bundelpil:hover { text-decoration: none; background: rgba(245,245,243,0.1); }
.wsmai-tegel a.wsmai-bundelpil--vol {
  background: var(--goud); color: var(--inkt); border-color: var(--goud); font-weight: 600;
}
.wsmai-tegel a.wsmai-bundelpil--vol:hover { background: #b8862a; }
.wsmai-bundelpil__prijs { opacity: 0.7; }

/* ── Over mij ────────────────────────────────────────────────────────────── */
.wsmai-persoon {
  position: relative; border-radius: var(--rand); overflow: hidden;
  min-height: 440px;
}
.wsmai-persoon img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.wsmai-persoon__sluier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,20,27,0) 60%, rgba(16,20,27,0.55) 100%);
}
.wsmai-persoon__naam {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; font-size: 15px; color: var(--licht-85);
}

.wsmai-kwartet { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kier); }
.wsmai-cred {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 30px 26px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 5px;
}
.wsmai-cred strong { font-size: 21px; font-weight: 700; letter-spacing: -0.014em; }
.wsmai-cred span { font-size: 14px; color: var(--inkt-55); }

.wsmai-lijst-vak {
  border-radius: var(--rand); padding: 46px 40px;
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start; text-align: left;
}
.wsmai-lijst-vak--licht { background: var(--warmgrijs); }
.wsmai-lijst-vak--donker { background: var(--bijnazwart); }
.wsmai-lijst-vak h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.016em; }
.wsmai-lijst-vak--donker h2 { color: var(--licht); }
.wsmai-lijst-vak ul { display: flex; flex-direction: column; gap: 11px; }
.wsmai-lijst-vak li {
  font-size: 16px; line-height: 1.5; color: var(--inkt-70);
  display: flex; gap: 11px;
}
.wsmai-lijst-vak--donker li { color: var(--licht-85); }
.wsmai-lijst-vak li::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  flex-shrink: 0; margin-top: 8px; background: var(--inkt-25);
}
.wsmai-lijst-vak--donker li::before { background: var(--goud); }

@media (max-width: 1180px) {
  .wsmai-kwartet { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .wsmai-persoon { min-height: 340px; }
  .wsmai-kwartet { grid-template-columns: repeat(2, 1fr); }
  .wsmai-cred { padding: 22px 16px; }
  .wsmai-cred strong { font-size: 17px; }
  .wsmai-cred span { font-size: 13px; }
  .wsmai-lijst-vak { padding: 32px 24px; }
  .wsmai-lijst-vak h2 { font-size: 20px; }
  .wsmai-lijst-vak li { font-size: 15px; }
}

/* ── Academy ─────────────────────────────────────────────────────────────── */
.wsmai-niveau { padding: 44px 34px 40px; gap: 10px; position: relative; }
.wsmai-niveau__vlag {
  position: absolute; top: 16px; right: 16px;
  font-size: 12px; font-weight: 600; color: var(--inkt);
  background: var(--goud); padding: 5px 12px; border-radius: 999px;
}
.wsmai-niveau h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.018em; }
.wsmai-niveau__prijs { font-size: 20px; font-weight: 600; color: var(--goudlink); }
.wsmai-niveau__wat { font-size: 15px; line-height: 1.5; color: var(--inkt-70); }
.wsmai-niveau__lijst {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
  text-align: left; align-self: stretch;
}
.wsmai-niveau__lijst li { font-size: 15px; color: var(--inkt-85); display: flex; gap: 9px; }
.wsmai-niveau__lijst li::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--goud); flex-shrink: 0; margin-top: 8px;
}

.wsmai-cijfers {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 34px 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.wsmai-cijfers > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wsmai-cijfers strong { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.wsmai-cijfers span { font-size: 14px; color: var(--inkt-55); }

.wsmai-kaarten--themas { grid-template-columns: repeat(2, 1fr); }
.wsmai-kaart__vlag { color: var(--goudlink); font-weight: 500; }
.wsmai-lessen { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; align-self: stretch; }
.wsmai-lessen li { font-size: 15px; line-height: 1.45; color: var(--inkt-70); display: flex; gap: 9px; }
.wsmai-lessen li::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: var(--inkt-25); flex-shrink: 0; margin-top: 8px;
}
.wsmai-kaart .wsmai-kaart__samenvatting { margin-top: 10px; }

@media (max-width: 1180px) {
  .wsmai-cijfers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .wsmai-niveau { padding: 32px 24px 30px; }
  .wsmai-niveau h3 { font-size: 22px; }
  .wsmai-niveau__prijs { font-size: 18px; }
  .wsmai-cijfers { padding: 26px 24px; gap: 16px; }
  .wsmai-cijfers strong { font-size: 26px; }
  .wsmai-kaarten--themas { grid-template-columns: 1fr; }
}

/* ── Skilldetail ─────────────────────────────────────────────────────────── */
.wsmai-skillvakken { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kier); }
.wsmai-skillvak {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 38px 34px; display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start; text-align: left;
}
.wsmai-skillvak h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.014em; }
.wsmai-skillvak p, .wsmai-skillvak li { font-size: 15px; line-height: 1.55; color: var(--inkt-70); }
.wsmai-skillvak ul, .wsmai-skillvak ol { padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
/* De tussenruimte komt van de flex-gaps van het vak, het verhaal en de
   kaarten; extra margins erbovenop gaven dubbele lucht. */
.wsmai-tegel .wsmai-dienst__vak li + li { margin-top: 8px; }
.wsmai-dienst__vak ul li::marker { color: var(--goud); }
.wsmai-tegel .wsmai-skillvak ul { list-style: disc; }
.wsmai-tegel .wsmai-skillvak ol { list-style: decimal; }

.wsmai-skillvoet {
  background: var(--bijnazwart); border-radius: var(--rand);
  padding: 46px 40px; display: flex; align-items: center;
  justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.wsmai-skillvoet__kolom { display: flex; flex-direction: column; gap: 4px; }
.wsmai-skillvoet__kolom--rechts { text-align: right; align-items: flex-end; }
.wsmai-skillvoet__label { font-size: 14px; color: var(--licht-60); }
.wsmai-skillvoet__waarde { font-size: 34px; font-weight: 700; color: var(--goud); line-height: 1.15; }
.wsmai-skillvoet__vraag { font-size: 16px; color: var(--licht-85); }

/* ── Dienstenoverzicht ───────────────────────────────────────────────────── */
.wsmai-dienstkaart { padding: 44px 34px 40px; gap: 11px; }
.wsmai-dienstkaart .wsmai-route__wie { font-size: 13px; }
.wsmai-dienstkaart h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.018em; }
.wsmai-dienstkaart .wsmai-route__wat { font-size: 15px; }
.wsmai-dienstkaart .wsmai-route__prijzen { gap: 6px; margin-top: 8px; }
.wsmai-dienstkaart .wsmai-route__prijzen li { font-size: 14px; }
.wsmai-dienstkaart .wsmai-link { font-size: 15px; margin-top: 6px; }

.wsmai-strook {
  background: var(--warmgrijs); border-radius: var(--rand);
  padding: 34px 40px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.wsmai-strook__tekst { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.wsmai-strook h3 { font-size: 22px; font-weight: 700; }
.wsmai-strook p { font-size: 15px; color: var(--inkt-70); }

/* ── Dienstdetail ────────────────────────────────────────────────────────── */
.wsmai-dienst__duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kier); }
.wsmai-dienst__vak {
  border-radius: var(--rand); padding: 64px 48px;
  display: flex; flex-direction: column; gap: 18px;
  /* Gecentreerd, zoals elke tegel op deze site. De kaarten binnenin zijn
     links uitgelijnd, dat leest prettiger op kaartniveau. */
  align-items: center; text-align: center;
}
.wsmai-dienst__vak--licht { background: var(--warmgrijs); }
.wsmai-dienst__vak--donker { background: var(--bijnazwart); gap: 16px; }
.wsmai-dienst__vak h2 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; max-width: 26ch; }
.wsmai-dienst__vak--donker h2 { color: var(--licht); }
.wsmai-dienst__vak p, .wsmai-dienst__vak li {
  font-size: 16px; line-height: 1.6; color: var(--inkt-70);
  /* Deze tegels lopen over de volle breedte, dus zonder rem wordt een regel
     honderdveertig tekens lang en leest niemand het meer. */
  max-width: 78ch;
}
/* In een donkere tegel is inktkleurige tekst onleesbaar. */
.wsmai-dienst__vak--donker p,
.wsmai-dienst__vak--donker li,
.wsmai-dienst__vak--donker h3 { color: var(--licht-85); }
.wsmai-dienst__vak--donker h3 { font-size: 19px; font-weight: 600; margin-top: 6px; }
.wsmai-dienst__vak--licht h3 { font-size: 19px; font-weight: 700; margin-top: 6px; }
.wsmai-tegel .wsmai-dienst__vak--donker a { color: var(--goud); }
.wsmai-dienst__punten { display: flex; flex-direction: column; gap: 12px; }
.wsmai-dienst__punt { display: flex; gap: 12px; align-items: baseline; }
.wsmai-dienst__punt::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: var(--goud); flex-shrink: 0;
}
.wsmai-dienst__punt span { font-size: 16px; color: var(--licht-85); line-height: 1.5; }
.wsmai-dienst__verhaal {
  max-width: 62ch; display: flex; flex-direction: column; gap: 14px;
}
.wsmai-dienst__verhaal p { font-size: 17px; line-height: 1.6; color: var(--inkt-70); }
.wsmai-dienst__vak--donker .wsmai-dienst__verhaal p { color: var(--licht-80); }
.wsmai-dienst__verhaal ul, .wsmai-dienst__verhaal ol {
  text-align: left; margin: 0 auto; display: flex; flex-direction: column; gap: 8px;
}

.wsmai-dienst__kaarten {
  display: grid; grid-template-columns: repeat(var(--dienst-kolommen, 3), 1fr);
  gap: var(--kier); align-self: stretch; margin-top: 10px;
}
.wsmai-dienst__kaart {
  background: var(--papier); border: 1px solid var(--inkt-08);
  border-radius: 16px; padding: 28px 30px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; align-items: flex-start;
}
.wsmai-dienst__vak--donker .wsmai-dienst__kaart {
  background: #1a2029; border-color: rgba(245,245,243,0.1);
}
.wsmai-dienst__kaart h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.012em; margin: 0; }
.wsmai-dienst__kaart p, .wsmai-dienst__kaart li { font-size: 15px; line-height: 1.55; color: var(--inkt-70); }
.wsmai-dienst__vak--donker .wsmai-dienst__kaart h3 { color: var(--licht); }
.wsmai-dienst__vak--donker .wsmai-dienst__kaart p,
.wsmai-dienst__vak--donker .wsmai-dienst__kaart li { color: var(--licht-80); }
.wsmai-dienst__kaart--los { max-width: 720px; align-self: center; margin-top: 10px; }

.wsmai-dienst__midden {
  background: var(--warmgrijs); border-radius: var(--rand); padding: 52px 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.wsmai-dienst__midden h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.018em; }
.wsmai-dienst__midden p { font-size: 16px; line-height: 1.6; color: var(--inkt-70); max-width: 58ch; }
.wsmai-skill__inleiding { max-width: 64ch; display: flex; flex-direction: column; gap: 12px; }
.wsmai-skill__inleiding p { font-size: 16px; line-height: 1.6; color: var(--inkt-70); }

/* ── Andere diensten, onder aan een dienstpagina ─────────────────────────── */
.wsmai-andere { align-items: flex-start; }
.wsmai-andere__pillen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wsmai-tegel a.wsmai-andere__pil {
  font-size: 14px; color: var(--inkt); background: var(--papier);
  border: 1px solid var(--inkt-10); padding: 9px 16px; border-radius: 999px;
  display: inline-flex; align-items: baseline; gap: 7px;
  transition: border-color 0.15s ease;
}
.wsmai-tegel a.wsmai-andere__pil:hover { text-decoration: none; border-color: var(--inkt); }
.wsmai-andere__prijs { color: var(--goudlink); font-size: 13px; }

@media (max-width: 820px) {
  .wsmai-andere__pillen { justify-content: flex-start; }
  .wsmai-tegel a.wsmai-andere__pil { font-size: 13px; padding: 8px 14px; }
}

/* ── Kennismakingsgesprek ────────────────────────────────────────────────── */
.wsmai-gesprek {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--kier);
  align-items: stretch;
}
.wsmai-gesprek__uitleg { font-size: 16px; line-height: 1.55; color: var(--inkt-70); }

/* Het boekingsformulier van WSMAI Booking draagt zijn eigen huisstijl
   (donkerblauw, Inter). Zijn opmaak hangt aan CSS-variabelen op
   .wsmai-booking, dus hier kleuren we hem om naar de tegeltaal en wordt hij
   een donkere tegel. De plugin zelf blijft ongemoeid. */
.wsmai-gesprek__formulier { display: flex; }
.wsmai-tegel .wsmai-booking {
  --wsmai-bg: var(--bijnazwart);
  --wsmai-bg-soft: #1a2029;
  --wsmai-accent: var(--goud);
  --wsmai-muted: var(--licht-60);
  --wsmai-border: rgba(245,245,243,0.14);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  max-width: none; width: 100%;
  border-radius: var(--rand);
  padding: 40px 36px;
}

@media (max-width: 1180px) {
  .wsmai-gesprek { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .wsmai-tegel .wsmai-booking { padding: 28px 20px; }
  .wsmai-gesprek__uitleg { font-size: 15px; }
}

/* ── Checklist-aanvraag ──────────────────────────────────────────────────── */
.wsmai-aanvraag {
  background: var(--bijnazwart); border-radius: var(--rand);
  padding: 46px 40px; display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start; text-align: left;
}
.wsmai-aanvraag h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.016em; color: var(--licht); }
.wsmai-aanvraag > p { font-size: 16px; line-height: 1.55; color: var(--licht-72); }
.wsmai-aanvraag form { display: flex; flex-direction: column; gap: 14px; align-self: stretch; margin-top: 8px; }
.wsmai-aanvraag label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--licht-72); }
.wsmai-aanvraag input[type="text"],
.wsmai-aanvraag input[type="email"] {
  font: inherit; font-size: 16px; color: var(--licht);
  background: #1a2029; border: 1px solid rgba(245,245,243,0.14);
  border-radius: 12px; padding: 12px 14px;
}
.wsmai-aanvraag input:focus-visible { outline: 2px solid var(--goud); outline-offset: 1px; }
.wsmai-aanvraag .wsmai-knop { border: 0; cursor: pointer; font: inherit; font-weight: 600; margin-top: 4px; align-self: flex-start; }
.wsmai-aanvraag .wsmai-knop[disabled] { opacity: 0.6; cursor: wait; }
.wsmai-aanvraag__hp { position: absolute; left: -9999px; }
.wsmai-aanvraag__melding { font-size: 15px; color: var(--goud); min-height: 1.4em; }
.wsmai-aanvraag__melding.is-fout { color: #e8a5a5; }

@media (max-width: 820px) {
  .wsmai-aanvraag { padding: 32px 24px; }
}

/* ── Boekpagina ──────────────────────────────────────────────────────────── */
.wsmai-boekduo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--kier); align-items: stretch; }
.wsmai-boekduo__omslag {
  background: var(--warmgrijs); border-radius: var(--rand);
  display: flex; align-items: center; justify-content: center; padding: 44px;
}
.wsmai-boekduo__omslag img {
  max-width: 300px; width: 100%; height: auto;
  border-radius: 10px; box-shadow: 0 22px 44px rgba(20,24,31,0.22);
}
.wsmai-boekduo__tekst { text-align: left; align-items: flex-start; }
.wsmai-boekduo__tekst h2 { max-width: none; }
.wsmai-boekduo__tekst .wsmai-dienst__verhaal { max-width: none; }

.wsmai-dienst__verhaal blockquote {
  background: var(--papier); border-radius: 14px; padding: 22px 26px;
  font-weight: 600; text-align: left;
}
.wsmai-dienst__vak--donker .wsmai-dienst__verhaal blockquote { background: #1a2029; color: var(--licht-85); }
.wsmai-dienst__verhaal blockquote p { color: inherit; }

.wsmai-dienst__verhaal pre, .wsmai-dienst__vak pre {
  background: var(--bijnazwart); color: var(--licht-85);
  border-radius: 14px; padding: 24px 26px; text-align: left;
  font-size: 14px; line-height: 1.6; overflow-x: auto;
  align-self: stretch; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wsmai-dienst__vak--donker pre { background: #0b0e13; }

.wsmai-tegel button.wsmai-kopieer {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--goud); color: var(--inkt); border: 0;
  padding: 7px 15px; border-radius: 999px;
  align-self: flex-start; margin-bottom: -8px;
}
.wsmai-tegel button.wsmai-kopieer:hover { background: #b8862a; }

@media (max-width: 1180px) {
  .wsmai-boekduo { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .wsmai-boekduo__omslag { padding: 28px; }
  .wsmai-boekduo__omslag img { max-width: 220px; }
  .wsmai-dienst__verhaal pre, .wsmai-dienst__vak pre { font-size: 13px; padding: 18px; }
}

/* ── Compacte voet voor de binnenpagina's ────────────────────────────────── */
.wsmai-voet--smal {
  max-width: var(--baan); padding: 26px 22px 34px; margin-top: var(--kier);
  border-top: 1px solid var(--inkt-08);
  flex-direction: row; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.wsmai-voet--smal, .wsmai-voet--smal a { font-size: 12px; color: var(--inkt-55); }

/* ── Tussenmaten binnenpagina's ──────────────────────────────────────────── */
@media (max-width: 1180px) {
  .wsmai-kop h1 { font-size: 46px; }
  .wsmai-kop__onder { font-size: 18px; }
  .wsmai-kaarten { grid-template-columns: 1fr 1fr; }
  .wsmai-boeken { grid-template-columns: 1fr 1fr; }
  .wsmai-oproep h2, .wsmai-bundels h2 { font-size: 30px; }
  .wsmai-dienst__vak, .wsmai-dienst__midden { padding: 42px 32px; }
  .wsmai-artikel__kop h1 { font-size: 38px; }
  .wsmai-kop--boek { gap: 40px; padding-left: 22px; padding-right: 22px; }
  .wsmai-kop__omslag { width: 280px; }
}

@media (max-width: 820px) {
  .wsmai-artikel__beeld { padding: 6px var(--kier) 0; }
  .wsmai-kop { padding: 48px 22px 26px; gap: 12px; }
  .wsmai-kop h1 { font-size: 34px; letter-spacing: -0.022em; max-width: none; }
  .wsmai-kop__onder { font-size: 16px; max-width: none; }
  .wsmai-kop__label { font-size: 13px; }
  .wsmai-kop--boek { flex-direction: column; text-align: center; gap: 28px; padding-top: 40px; }
  .wsmai-kop--boek .wsmai-kop__woord { align-items: center; gap: 12px; max-width: 100%; }
  .wsmai-kop__omslag { width: 230px; }

  .wsmai-filters { gap: 8px; }
  .wsmai-filter { font-size: 13px; padding: 7px 14px; }

  .wsmai-kaarten { grid-template-columns: 1fr; }
  .wsmai-kaart { padding: 28px 24px; }
  .wsmai-kaart__beeld { margin: -28px -24px 12px; }
  .wsmai-uitgelicht { grid-template-columns: 1fr; }
  .wsmai-uitgelicht__tekst { padding: 32px 24px; }
  .wsmai-uitgelicht h2 { font-size: 24px; }
  .wsmai-uitgelicht__beeld { min-height: 200px; order: -1; }
  .wsmai-kop__intro p { font-size: 16px; }
  .wsmai-kaart h3 { font-size: 20px; }

  .wsmai-oproep { padding: 40px 22px; gap: 10px; }
  .wsmai-oproep h2 { font-size: 25px; }
  .wsmai-oproep p { font-size: 15px; }

  .wsmai-artikel__kop { padding: 44px 22px 22px; gap: 12px; }
  .wsmai-artikel__kop h1 { font-size: 30px; letter-spacing: -0.02em; }
  .wsmai-artikel__inleiding { font-size: 17px; }
  .wsmai-artikel__kruimel { font-size: 13px; }
  .wsmai-lopende-tekst p, .wsmai-lopende-tekst li { font-size: 16px; }
  .wsmai-lopende-tekst h2 { font-size: 23px; margin-top: 28px; }
  .wsmai-lopende-tekst h3 { font-size: 19px; }
  .wsmai-verder { padding: 30px var(--kier) 0; }
  .wsmai-verder__kaart { padding: 24px 24px; }

  .wsmai-winkel__balk { padding: 32px 24px 14px; }
  .wsmai-winkel__balk h2 { font-size: 23px; }
  .wsmai-boeken { grid-template-columns: 1fr 1fr; }
  .wsmai-boek { padding: 28px 16px; }
  .wsmai-boek h3 { font-size: 16px; }
  .wsmai-bundels { padding: 40px 22px; }
  .wsmai-bundels h2 { font-size: 25px; }
  .wsmai-bundels p { font-size: 15px; }

  .wsmai-skillvakken { grid-template-columns: 1fr; }
  .wsmai-skillvak { padding: 28px 24px; }
  .wsmai-skillvak h2 { font-size: 20px; }
  .wsmai-skillvoet { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 20px; }
  .wsmai-skillvoet__kolom--rechts { text-align: left; align-items: flex-start; }
  .wsmai-skillvoet__waarde { font-size: 27px; }

  .wsmai-dienstkaart { padding: 32px 24px 30px; }
  .wsmai-dienstkaart h3 { font-size: 22px; }
  .wsmai-strook { padding: 26px 24px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .wsmai-strook h3 { font-size: 19px; }

  .wsmai-dienst__duo { grid-template-columns: 1fr; }
  .wsmai-dienst__vak, .wsmai-dienst__midden { padding: 38px 22px; }
  .wsmai-dienst__vak h2, .wsmai-dienst__midden h2 { font-size: 25px; max-width: none; }
  .wsmai-dienst__kaarten { grid-template-columns: 1fr; }
  .wsmai-dienst__kaart { padding: 22px 22px; }
  .wsmai-dienst__verhaal p { font-size: 15px; }
  .wsmai-dienst__vak p, .wsmai-dienst__midden p { font-size: 15px; max-width: none; }
  .wsmai-dienst__punt span { font-size: 15px; }

  .wsmai-voet--smal { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 11px; }
  .wsmai-voet--smal a { font-size: 11px; }
}

/* ── Het thema terugdringen ──────────────────────────────────────────────── */
/*
 * style.css van het thema zet de body op donkerblauw met Mulish en regelafstand
 * 1.7. Die regels blijven laden (ze hangen aan wp_head), dus de tegelpagina zet
 * ze hier expliciet terug.
 */
body.wsmai-tegel-pagina {
  margin: 0;
  background: #FFFFFE;
  color: #14181F;
  line-height: 1.5;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
body.wsmai-tegel-pagina .wsmai-tegel ul,
body.wsmai-tegel-pagina .wsmai-tegel ol { list-style: none; margin: 0; padding: 0; }
/* Behalve in lopende tekst: daar horen bolletjes en nummers gewoon te staan.
   Deze regels moeten in dit blok, want het staat achteraan en wint anders. */
body.wsmai-tegel-pagina .wsmai-lopende-tekst ul,
body.wsmai-tegel-pagina .wsmai-dienst__vak ul,
body.wsmai-tegel-pagina .wsmai-skillvak ul { list-style: disc; padding-left: 20px; }
body.wsmai-tegel-pagina .wsmai-lopende-tekst ol,
body.wsmai-tegel-pagina .wsmai-dienst__vak ol,
body.wsmai-tegel-pagina .wsmai-skillvak ol { list-style: decimal; padding-left: 20px; }
body.wsmai-tegel-pagina .wsmai-lopende-tekst ul,
body.wsmai-tegel-pagina .wsmai-lopende-tekst ol { padding-left: 22px; }
body.wsmai-tegel-pagina .wsmai-tegel blockquote { margin: 0; }
body.wsmai-tegel-pagina .wsmai-tegel img { display: block; height: auto; }
body.wsmai-tegel-pagina .wsmai-beeld__tegel img,
body.wsmai-tegel-pagina .wsmai-persoon img,
body.wsmai-tegel-pagina .wsmai-eric img { height: 100%; }
/* Het logo houdt zijn eigen hoogte; dit blok staat achteraan en zou hem
   anders terugzetten op auto. */
body.wsmai-tegel-pagina .wsmai-nav__merk img { height: 32px; width: auto; }
body.wsmai-tegel-pagina .wsmai-voetblok__merk img { height: 26px; width: auto; }
body.wsmai-tegel-pagina .wsmai-boek__omslag img { width: 108px; height: auto; }
@media (max-width: 820px) {
  body.wsmai-tegel-pagina .wsmai-nav__merk img { height: 26px; }
}

/* Voor schermlezers, want het thema definieert dit in zijn eigen header. */
.wsmai-tegel .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Een boek dat er wel staat maar nog niet te koop is. */
.wsmai-tegel .wsmai-knop--binnenkort,
.wsmai-tegel .wsmai-knop--binnenkort:hover {
  background: var(--warmgrijs, #F5F4F1); color: var(--inkt-70, #5b606a) !important;
  cursor: default; transform: none; border: 1px solid rgba(20,24,31,0.12);
}
.wsmai-oproep .wsmai-knop--binnenkort { background: rgba(245,245,243,0.12); color: var(--licht-72, #cfd2d6) !important; border-color: rgba(245,245,243,0.2); }
.wsmai-oproep p a { color: var(--goud); }