/* ==========================================================================
   Websignaal — themalaag
   Laadt ná wsc-core. Twee taken:
   1. de --wsc-* tokens herdefiniëren naar het Websignaal-palet, waardoor alle
      wsc_*-blokken meekleuren zonder dat er één blok aangepast hoeft te worden;
   2. de eigen onderdelen uit het ontwerp neerzetten: header, megamenu, footer,
      hero met blokjesvorm, hairline-rasters, typemachine, scroll-fill, duotone.
   Waarden komen uit design_handoff_websignaal_website/README.md.
   ========================================================================== */

:root {
  /* ---- Websignaal-palet ----
     De drie accenttinten volgen de kleur uit Dashboard, Huisstijl. Staat daar
     niets, dan gelden de waarden hieronder en verandert er niets. Zo stelt een
     klant zijn kleur op een plek in in plaats van in deze stylesheet. */
  --ws-cyan:        var(--wsc-huisstijl-accent,   #28A4DE);
  --ws-cyan-h:      var(--wsc-huisstijl-accent-h, #1E8FC9);
  --ws-blue:        var(--wsc-huisstijl-accent-2, #1E69A6);
  --ws-blue-bg:     var(--wsc-huisstijl-accent-bg,   #F2F8FE);
  --ws-blue-line:   var(--wsc-huisstijl-accent-line, #BFE2F5);
  --ws-arrow:       var(--wsc-huisstijl-accent-soft, #7FCBEE);
  --ws-ink:         #000000;
  --ws-body:        #545C61;
  --ws-article:     #242A2E;
  --ws-muted:       #9BA3A8;
  --ws-hair:        #E2E7EA;
  --ws-hair-blue:   #C2C9CC;
  --ws-on-blue:     #DCEEF9;

  /* Blokjesvorm — het merkelement uit het logo */
  --ws-blokje:      clamp(44px, 7vw, 104px) 0 clamp(44px, 7vw, 104px) 0;
  --ws-blokje-sm:   55% 0 55% 0;

  /* ---- Herdefinitie van de wsc-core tokens ----
     Dezelfde namen, andere waarden: elk wsc_*-blok gebruikt var(--wsc-…) en
     staat daarmee meteen in de Websignaal-huisstijl. */
  --wsc-bg:         #FFFFFF;
  --wsc-surface:    #FFFFFF;
  --wsc-surface-2:  var(--ws-blue-bg);
  --wsc-ink:        var(--ws-ink);
  --wsc-ink-2:      var(--ws-body);
  --wsc-ink-3:      var(--ws-muted);
  --wsc-muted:      var(--ws-muted);
  --wsc-line:       var(--ws-hair);
  --wsc-line-2:     var(--ws-hair-blue);
  --wsc-accent:     var(--ws-cyan);
  --wsc-accent-h:   var(--ws-cyan-h);
  --wsc-accent-2:   var(--ws-blue);
  --wsc-blue:       var(--ws-blue);
  --wsc-blue-h:     #17547F;
  --wsc-footer-bg:  #000000;
  --wsc-footer-2:   #0A0A0A;
  --wsc-footer-ink: var(--ws-muted);
  --wsc-footer-ink-3: #6E767B;

  --wsc-font-head:    'Archivo', system-ui, sans-serif;
  --wsc-font-display: 'Archivo', system-ui, sans-serif;
  --wsc-font-body:    'Inter', system-ui, sans-serif;
  --wsc-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wsc-maxw:       1320px;
  --wsc-radius:     14px;
  --wsc-radius-lg:  16px;
  --wsc-gutter:     clamp(20px, 4vw, 48px);
  --wsc-section-y:  clamp(40px, 6vw, 80px);
  /* Het ontwerp werkt met hairlines in plaats van schaduwen. */
  --wsc-shadow:     none;
  --wsc-shadow-sm:  none;
}

/* ==========================================================================
   Basis
   ========================================================================== */
.ws-theme {
  font-family: var(--wsc-font-body);
  color: var(--ws-ink);
  background: #FFFFFF;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.ws-theme ::selection { background: var(--ws-cyan); color: var(--ws-ink); }
.ws-theme img { max-width: 100%; display: block; }
/* De standaard linkkleur geldt voor lopende tekst, maar mag nooit winnen van een
   component dat zijn eigen kleur zet (knop in de header, nav-link, casekaart).
   Daarom in :where() — dat maakt de specificiteit nul, zodat élke componentregel
   hierna voorgaat, ongeacht volgorde. */
:where(.ws-theme a) { color: var(--ws-blue); text-decoration: none; }
:where(.ws-theme a:hover) { color: var(--ws-cyan); }

.ws-container {
  max-width: var(--wsc-maxw);
  margin-inline: auto;
  padding-inline: var(--wsc-gutter);
}
.ws-section { padding-block: var(--wsc-section-y); }
.ws-section--tight { padding-block: clamp(28px, 4vw, 56px); }

/* Volle-breedte banden. Maximaal twee achtergronden per pagina: wit en #F2F8FE. */
.ws-band { width: 100%; }
.ws-band--white { background: #FFFFFF; border-bottom: 1px solid var(--ws-hair); }
.ws-band--light { background: var(--ws-blue-bg); border-bottom: 1px solid var(--ws-hair-blue); }
.ws-band--cyan { background: var(--ws-cyan); color: var(--ws-ink); }
.ws-band--black { background: #000000; color: var(--ws-muted); }
.ws-band--flush { border-bottom: 0; }

/* ==========================================================================
   Typografie
   ========================================================================== */
.ws-theme h1, .ws-theme h2, .ws-theme h3, .ws-theme h4,
.wsc-display, .wsc-h2, .wsc-h3 {
  font-family: var(--wsc-font-head);
  color: var(--ws-ink);
  text-wrap: pretty;
  margin: 0 0 .5em;
}
.ws-theme h1, .wsc-display {
  font-weight: 900;
  font-size: clamp(30px, 5.2vw, 88px);
  line-height: .98;
  letter-spacing: -.045em;
}
/* Hoe langer de kop, hoe kleiner de letter. Een zin van twaalf woorden op de
   maat van een kop van drie woorden vult het halve scherm en leest slechter.
   De klasse komt van Render::kopKlasse, zodat elke kop op de site, van de hero
   tot een referentie, zich hier vanzelf aan houdt. */
.ws-theme h1, .wsc-display { overflow-wrap: break-word; }
.ws-theme h1.wsc-kop--lang, .wsc-display.wsc-kop--lang {
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -.035em;
  line-height: 1.04;
}
.ws-theme h1.wsc-kop--xl, .wsc-display.wsc-kop--xl {
  font-size: clamp(26px, 2.9vw, 44px);
  letter-spacing: -.028em;
  line-height: 1.1;
}

.ws-theme h2, .wsc-h2 {
  font-weight: 800;
  font-size: clamp(22px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -.04em;
}
.ws-theme h3, .wsc-h3 {
  font-weight: 800;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.ws-theme h4 { font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -.028em; }
.ws-theme p { margin: 0 0 1.1em; color: var(--ws-body); }
.ws-theme p:last-child { margin-bottom: 0; }

.wsc-lead, .ws-lead {
  display: block;
  font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--ws-body);
  max-width: 58ch;
}

/* Labelregel: mono, uppercase, met optioneel het cyane blokje ervoor. */
.wsc-eyebrow, .ws-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wsc-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ws-blue);
  margin: 0 0 22px;
}
.ws-eyebrow::before,
.wsc-eyebrow::before {
  content: '';
  width: 10px; height: 10px;
  background: var(--ws-cyan);
  border-radius: 3px;
  flex: none;
}
/* Het blokje hoort bij de labelregel, niet bij een kruimelpad. */
.ws-crumbs::before, .ws-eyebrow--bare::before { content: none; }

/* Kruimelpad in de labelregel: "Wat we doen / Shopware 6". */
.ws-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 22px;
}
.ws-crumbs a { color: var(--ws-blue); }
.ws-crumbs a:hover { color: var(--ws-ink); }
.ws-crumbs__sep { color: var(--ws-hair-blue); }
.ws-crumbs__here { color: var(--ws-body); }

/* Kopregel van een sectie: kop links, "Alles bekijken →" rechts. */
.ws-sechead {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.ws-sechead h2 { margin: 0; }
.ws-theme .ws-more {
  font-family: var(--wsc-font-mono);
  /* Steviger dan de kopjes ernaast: het is een link waar je op moet klikken,
     geen label. */
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-blue);
}
.ws-theme .ws-more:hover { color: var(--ws-cyan); }

/* ==========================================================================
   Knoppen — cyaan, zwart en wit-met-rand. Nooit naar wit op hover.
   Dubbele klasse zodat de kleur wint van de generieke linkregel.
   ========================================================================== */
.wsc-btn, .ws-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--wsc-font-mono);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 19px 30px;
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.wsc-btn.wsc-btn--primary, .ws-btn.ws-btn--cyan { background: var(--ws-cyan); color: var(--ws-ink); }
.wsc-btn.wsc-btn--primary:hover, .ws-btn.ws-btn--cyan:hover { background: var(--ws-cyan-h); color: var(--ws-ink); }

.wsc-btn.wsc-btn--dark, .ws-btn.ws-btn--dark { background: #000000; color: #FFFFFF; }
.wsc-btn.wsc-btn--dark:hover, .ws-btn.ws-btn--dark:hover { background: var(--ws-blue); color: #FFFFFF; }

.wsc-btn.wsc-btn--ghost, .ws-btn.ws-btn--ghost { background: #FFFFFF; color: var(--ws-ink); border-color: var(--ws-hair-blue); }
.wsc-btn.wsc-btn--ghost:hover, .ws-btn.ws-btn--ghost:hover { background: var(--ws-blue-bg); border-color: var(--ws-blue); color: var(--ws-ink); }

/* De "hulp op afstand"-variant uit wsc-core bestaat hier niet; geef hem de
   zwarte knop mee zodat een blok dat hem gebruikt niet ongestyled oogt. */
.wsc-btn.wsc-btn--remote { background: #000000; color: #FFFFFF; }
.wsc-btn.wsc-btn--remote:hover { background: var(--ws-blue); }

.wsc-btn-row, .ws-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ws-btn-row--grow > .wsc-btn,
.ws-btn-row--grow > .ws-btn { flex: 1 1 200px; }

/* ==========================================================================
   Header — 74px, krimpt vanaf 40px scroll naar 58px
   ========================================================================== */
.ws-header {
  position: sticky; top: 0; z-index: 80;
  background: #FFFFFF;
  border-bottom: 1px solid var(--ws-hair);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border-radius: 0;
  transition: box-shadow .35s ease, border-color .35s ease, border-radius .35s ease;
}
.ws-header.is-compact {
  border-bottom-color: rgba(226, 231, 234, 0);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
  border-radius: 0 0 20px 20px;
}
/* Ingelogd staat de Concrete-werkbalk vast bovenaan (48px hoog). Die duwt de
   pagina omlaag met `.ccm-page { margin-top: 48px }`, maar een sticky element
   plakt aan de viewport — en dus ónder die balk. Vandaar dezelfde offset. */
html.ccm-toolbar-visible .ws-header { top: 48px; }
.ws-header__inner {
  max-width: var(--wsc-maxw);
  margin-inline: auto;
  padding-inline: var(--wsc-gutter);
  display: flex; align-items: center; gap: 14px;
  min-height: 74px;
  flex-wrap: nowrap;
  transition: min-height .35s ease;
}
.ws-header.is-compact .ws-header__inner { min-height: 58px; }

.ws-header__brand { flex: none; padding: 8px 0; }
.ws-header__brand img { height: 34px; width: auto; transition: height .35s ease; }
.ws-header.is-compact .ws-header__brand img { height: 26px; }

/* Niet laten krimpen: anders wordt de nav smaller dan zijn eigen lijst en
   schuift die over de knoppen rechts heen. Onder 1260px wordt dit toch het
   uitklappaneel, dus krimpen is daar niet nodig. */
.ws-header__nav { display: flex; align-items: stretch; align-self: stretch; margin-left: 18px; flex: 0 0 auto; }

.ws-nav { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.ws-nav__item { display: flex; align-items: stretch; position: relative; }
/* Ruimte tussen de menu-items. Eén variabele, want de onderstreping hieronder
   moet dezelfde inspringing aanhouden — anders loopt de streep niet gelijk met
   de tekst. */
.ws-nav { --ws-nav-pad: 12px; }

.ws-theme .ws-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--wsc-font-head);
  font-size: 15px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ws-ink);
  padding: 0 var(--ws-nav-pad);
  white-space: nowrap;
}
.ws-theme .ws-nav__link:hover, .ws-nav__item.is-active > .ws-nav__link { color: var(--ws-blue); }
/* De pagina waar je bent, krijgt een blauwe streep onder het menu-item. De
   ruimte staat er altijd (transparant), zodat de nav niet verspringt. */
.ws-theme .ws-nav__link::after {
  content: '';
  position: absolute;
  left: var(--ws-nav-pad); right: var(--ws-nav-pad); bottom: 18px;
  height: 3px;
  background: transparent;
  border-radius: 2px;
  transition: background .18s ease;
}
  /* Alleen de pagina waar je bent krijgt de streep. Bij hover verkleurt de
     tekst; een tweede streep erbij maakt het onrustig en laat je twijfelen
     waar je nu eigenlijk staat. */
.ws-theme .ws-nav__item.is-active > .ws-nav__link::after { background: var(--ws-blue); }
/* Het pijltje dat een submenu aankondigt. Als tekstteken (▾) blijft het altijd
   dun; als chevron van twee randen kun je de dikte wél sturen, zodat het
   opvalt. Het teken zelf wordt verborgen met font-size 0. */
.ws-nav__caret {
  font-size: 0;
  width: 7px; height: 7px;
  margin-left: 2px;
  border-right: 2px solid var(--ws-body);
  border-bottom: 2px solid var(--ws-body);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: border-color .18s ease;
}
.ws-nav__link:hover .ws-nav__caret,
.ws-nav__item.is-active > .ws-nav__link .ws-nav__caret { border-color: var(--ws-blue); }

/* Losse pil "Voor Bureaus" — blokjesvorm in het klein. */
.ws-nav__item--pill { align-items: center; }
.ws-theme .ws-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 6px;
  font-family: var(--wsc-font-head);
  font-size: 14.5px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ws-blue);
  background: var(--ws-blue-bg);
  border: 1px solid var(--ws-blue-line);
  border-radius: 14px 4px 14px 4px;
  padding: 7px 14px;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ws-theme .ws-pill:hover { background: var(--ws-cyan); border-color: var(--ws-cyan); color: var(--ws-ink); }
.ws-pill__dot { width: 7px; height: 7px; background: var(--ws-cyan); border-radius: var(--ws-blokje-sm); flex: none; }
.ws-pill:hover .ws-pill__dot { background: var(--ws-ink); }

/* Megamenu */
.ws-mega {
  position: absolute; top: calc(100% - 8px); left: -14px;
  width: min(94vw, 880px);
  background: #FFFFFF;
  border: 1px solid var(--ws-hair);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
  z-index: 90;
  padding: 30px 32px 22px;
  display: none;
}
.ws-nav__item.is-open > .ws-mega { display: block; }
/* Het pijltje bij een menu-item met een uitklap. Getekend, want het teken uit
   de tekstset valt per systeem anders uit en oogt gedraaid als een streepje. */
.ws-nav__caret { display: inline-flex; align-items: center; }
.ws-nav__caret svg { width: 15px; height: 15px; display: block; transition: transform .18s ease; }
.ws-nav__item.is-open > .ws-nav__link .ws-nav__caret svg { transform: rotate(180deg); }
.ws-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 34px; }
.ws-mega__title {
  font-family: var(--wsc-font-mono);
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-blue);
  margin-bottom: 13px; padding-bottom: 9px;
  border-bottom: 1px solid var(--ws-hair);
}
.ws-mega__links { display: flex; flex-direction: column; gap: 9px; }
.ws-theme .ws-mega__link {
  font-family: var(--wsc-font-head);
  font-size: 15.5px; font-weight: 600; letter-spacing: -.02em;
  color: var(--ws-ink);
  line-height: 1.25;
}
.ws-theme .ws-mega__link:hover { color: var(--ws-blue); }
/* De "Bekijk alle …"-regel onderaan een kolom: zelfde grootte, accentkleur. */
.ws-theme .ws-mega__link--accent { color: var(--ws-blue); }
.ws-theme .ws-mega__link--accent:hover { color: var(--ws-cyan); }
.ws-mega__foot {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--ws-hair);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: space-between;
}

/* ---- Insights-dropdown: kaarten in plaats van een lijst titels ---- */
.ws-mega--blog { width: min(94vw, 760px); }
.ws-mega__head {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--ws-hair);
}
.ws-mega__head .ws-mega__title { margin: 0; padding: 0; border: 0; }

.ws-blogmega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ws-theme .ws-blogcard { display: flex; flex-direction: column; gap: 10px; color: var(--ws-ink); }
.ws-blogcard__cover {
  display: block; position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px 0 12px 0;
  overflow: hidden;
  background: var(--ws-blue-bg);
}
.ws-blogcard__cover img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--ws-duo);
  transition: filter .55s ease;
}
.ws-theme .ws-blogcard:hover .ws-blogcard__cover img { filter: none; }
.ws-blogcard__chip {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--wsc-font-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ws-cyan); color: var(--ws-ink);
  border-radius: 999px; padding: 4px 10px;
}
.ws-blogcard__title {
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: 15px; line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.ws-theme .ws-blogcard:hover .ws-blogcard__title { color: var(--ws-blue); }
.ws-blogcard__date {
  font-family: var(--wsc-font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ws-muted);
  margin-top: auto;
}

@media (max-width: 1259px) {
  /* In het mobiele paneel naast elkaar houden zou te smal worden. */
  .ws-mega--blog { width: auto; }
  .ws-blogmega { grid-template-columns: 1fr; gap: 14px; }
  .ws-blogcard { flex-direction: row; align-items: center; gap: 12px; }
  .ws-blogcard__cover { flex: 0 0 84px; aspect-ratio: 4 / 3; }
  .ws-blogcard__chip { display: none; }
  .ws-blogcard__date { margin-top: 0; }
  .ws-mega__head { display: none; }
}
.ws-mega__foot span { font-size: 14px; color: var(--ws-body); }
.ws-mega__foot a {
  font-family: var(--wsc-font-head);
  font-size: 14.5px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ws-blue);
}
.ws-mega__foot a:hover { color: var(--ws-ink); }

/* Rechterkant: support, telefoon, zwarte knop */
.ws-header__actions {
  margin-left: auto;
  /* Harde tussenruimte, anders schuift de "Voor Bureaus"-pil over het
     support-icoon zodra de nav breder wordt. Ruim genomen: de pil en het
     icoon horen niet tegen elkaar aan te staan. */
  padding-left: 34px;
  display: flex; align-items: center; align-self: stretch; flex: none;
}
.ws-theme .ws-header__support {
  display: inline-flex; align-items: center; justify-content: center;
  /* Support en telefoon horen bij elkaar, dus staan ze dicht tegen elkaar. */
  color: var(--ws-body); padding: 0 5px 0 4px;
}
.ws-theme .ws-header__support:hover { color: var(--ws-blue); }
.ws-header__support-label { display: none; }
.ws-theme .ws-header__phone {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--wsc-font-head);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ws-body);
  padding: 0 11px 0 5px; white-space: nowrap;
}
.ws-theme .ws-header__phone:hover { color: var(--ws-blue); }
.ws-theme .ws-header__cta {
  display: inline-flex; align-items: center;
  background: #000000; color: #FFFFFF;
  font-family: var(--wsc-font-mono);
  font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  /* Krappere zijkanten, zodat de knop niet als een balk oogt naast zijn hoogte. */
  padding: 0 18px; border-radius: 10px;
  margin: 9px 0 9px 16px; min-height: 46px;
  white-space: nowrap;
  transition: background .18s ease;
}
.ws-theme .ws-header__cta:hover { background: var(--ws-blue); color: #FFFFFF; }

.ws-header__burger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer;
  padding: 10px; margin-left: auto;
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.ws-header__burger span { width: 22px; height: 2px; background: var(--ws-ink); display: block; }

/* Telefoonnummer verschijnt pas als er ruimte voor is. */
@media (max-width: 1339px) { .ws-header__phone { display: none; } }


/* Onder 1260px: hamburger + uitklappaneel met dezelfde items. */
@media (max-width: 1259px) {
.ws-header__burger { display: flex; }

  /* De header is een rij; zonder omslaan komen de panelen naast het logo te
     staan in plaats van eronder. Met een vaste volgorde: logo, knop, menu,
     daarna de acties. */
.ws-header.is-open .ws-header__inner { flex-wrap: wrap; }
.ws-header__brand { order: 1; }
.ws-header__burger { order: 2; }
.ws-header__nav { order: 3; }
.ws-header__actions { order: 4; }
  /* Het open menu is een scherm op zichzelf: de header blijft staan, de lijst
     schuift daaronder, en de knoppen staan onderaan binnen duimbereik. Dat is
     op een telefoon het verschil tussen scrollen tot je de knop vindt en hem
     gewoon kunnen indrukken. --ws-menu-top wordt door het script gezet, want
     de header krimpt tijdens het scrollen en de beheerbalk kan erboven staan. */
.ws-header.is-open .ws-header__nav {
    position: fixed;
    top: var(--ws-menu-top, 74px); left: 0; right: 0; bottom: var(--ws-menu-bar, 84px);
    background: #FFFFFF;
    padding: 6px var(--wsc-gutter) 18px;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
.ws-header.is-open .ws-header__actions {
    position: fixed; left: 0; right: 0; bottom: 0;
    flex-direction: row; align-items: center; gap: 10px;
    background: #FFFFFF;
    border-top: 1px solid var(--ws-hair);
    padding: 12px var(--wsc-gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .06);
  }
  /* Een lichte overgang boven de knoppenbalk, zodat te zien is dat de lijst
     eronder doorloopt. Een masker op het paneel zelf kan niet: dat maakt het
     doorzichtig en dan schijnt de pagina erdoorheen. */
.ws-header.is-open .ws-header__actions::before {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 100%; height: 22px;
    background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  /* Zolang het menu open staat hangt de header vast bovenaan. Anders zou hij
     op de scrollpositie van dat moment blijven staan, en begint het paneel
     boven de rand van het scherm.
     De pagina eronder mag ondertussen niet meescrollen; dat gaat via body, niet
     via html, want overflow op html breekt position: sticky. */
  /* Geen scrollvergrendeling: overflow op html of body maakt van dat element
     een nieuwe scrollcontainer, waardoor de plakkende header zijn houvast
     verliest en de pagina verspringt zodra je het menu opent. Het paneel dekt
     het scherm en vangt zijn eigen scroll op, dus er valt eronder toch niets
     te raken. */
  .ws-header__nav,
.ws-header__actions {
    display: none;
    position: absolute; left: 0; right: 0;
    background: #FFFFFF;
    border-top: 1px solid var(--ws-hair);
    padding: 0 var(--wsc-gutter);
  }
  .ws-header.is-open .ws-header__nav,
.ws-header.is-open .ws-header__actions { display: block; }
  /* Het opengeklapte blok begint onder het menu-item, niet er dwars doorheen. */
.ws-nav__item.is-open > .ws-mega { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--ws-hair); }


.ws-nav { flex-direction: column; align-items: stretch; }
.ws-nav__item { flex-direction: column; align-items: stretch; }
.ws-theme .ws-nav__link {
    font-size: 17px; font-weight: 600; letter-spacing: -.02em;
    padding: 10px 0; min-height: 44px;
  }
  /* In het paneel staan de megamenu-groepen gewoon open onder hun kopje. */
  /* Dicht tot je erop tikt: alles openzetten maakt het paneel meters lang.
     De regel .ws-nav__item.is-open > .ws-mega zet hem open. */
.ws-mega {
    display: none; position: static; width: auto;
    border: 0; border-radius: 0; box-shadow: none;
    padding: 0 0 10px;
  }


  /* Elk menu-item een eigen regel met een scheiding, zodat de lijst te scannen
     is in plaats van een lap tekst. */
.ws-nav__item { border-bottom: 1px solid var(--ws-hair); }
.ws-nav__item:last-child, .ws-nav__item--pill { border-bottom: 0; }
.ws-theme .ws-nav__link { justify-content: space-between; padding: 13px 0; }

  /* De streep onder het actieve item loopt hier over de hele regel en botst met
     de scheidingslijnen; dan lijkt het een rand in plaats van een markering.
     Op deze breedte dus een cyaan blokje voor het woord, hetzelfde teken dat
     boven elke sectiekop staat, plus de tekst in blauw. */
.ws-theme .ws-nav__link::after { display: none; }
.ws-theme .ws-nav__item.is-active > .ws-nav__link {
    color: var(--ws-blue);
    padding-left: 18px;
  }
.ws-theme .ws-nav__item.is-active > .ws-nav__link::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 9px; height: 9px;
    margin-top: -4px;
    border-radius: 3px 3px 3px 0;
    background: var(--ws-cyan);
  }
.ws-nav__caret { margin-left: auto; color: var(--ws-body); }

  /* Een groepskopje is geen keuze en een menu-item wel; dat verschil moet je
     zien zonder te tikken. Het kopje krijgt daarom een lijn die doorloopt tot
     de rand, zoals een tussenkop, en de items eronder worden regels met een
     scheiding en een pijltje: dat leest als iets waar je naartoe gaat. */
.ws-mega__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 10.5px; letter-spacing: .16em;
    color: var(--ws-ink-3, #8A91A0);
    margin: 20px 0 0;
  }
.ws-mega__title::after {
    content: ''; flex: 1 1 auto; height: 1px;
    background: var(--ws-hair);
  }
.ws-mega__grid > *:first-child .ws-mega__title { margin-top: 6px; }

.ws-theme .ws-mega__link {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 15.5px; font-weight: 500; letter-spacing: -.01em;
    padding: 11px 2px 11px 14px; min-height: 44px;
    border-bottom: 1px solid var(--ws-hair);
  }
.ws-theme .ws-mega__link:last-child { border-bottom: 0; }
.ws-theme .ws-mega__link::after {
    content: ''; flex: none;
    width: 7px; height: 7px;
    border-right: 1.6px solid var(--ws-line-2, #C9D0DA);
    border-bottom: 1.6px solid var(--ws-line-2, #C9D0DA);
    transform: rotate(-45deg);
    margin-right: 3px;
  }
  /* De pagina waar je nu bent: blauw en zwaarder, met een blauw pijltje. Geen
     blokje ervoor zoals in het hoofdmenu; dat botst hier met de tekst en het
     hoofdmenu-item erboven draagt die markering al. */
.ws-theme .ws-mega__link.is-active {
    color: var(--ws-blue); font-weight: 700;
    background: var(--ws-blue-bg);
    border-radius: 8px 8px 8px 0;
    padding-left: 12px; padding-right: 10px;
  }
.ws-theme .ws-mega__link.is-active::after { border-color: var(--ws-blue); }

  /* Artikelen in het menu: op een telefoon gaat het om de kop, niet om de foto.
     Het beeld eraf scheelt drie schermen scrollen en laadtijd. */
.ws-blogcard__cover { display: none; }
.ws-blogmega { display: block; }
.ws-blogcard {
    display: block;
    padding: 11px 0;
    border-top: 1px solid var(--ws-hair);
  }
.ws-blogcard:first-child { border-top: 0; }
.ws-blogcard__title { font-size: 16px; font-weight: 600; line-height: 1.35; display: block; }
.ws-blogcard__date { font-size: 12px; color: var(--ws-body); margin-top: 2px; display: block; }
.ws-mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ws-mega__grid { grid-template-columns: 1fr; gap: 14px; }
.ws-mega__title { margin-bottom: 6px; padding-bottom: 0; border-bottom: 0; }
.ws-theme .ws-mega__link { font-size: 17px; padding: 8px 0; min-height: 40px; display: flex; align-items: center; }
.ws-mega__foot { display: none; }
.ws-nav__item--pill { padding: 8px 0 4px; }
.ws-theme .ws-pill { margin-left: 0; font-size: 16px; padding: 11px 16px; min-height: 44px; }

  /* Onderin staan de twee dingen die iemand op een telefoon werkelijk wil:
     bellen of een gesprek plannen. Support is een icoon, dat is voor de
     bestaande klant die weet waar hij moet zijn. */
.ws-theme .ws-header__support {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 46px; height: 46px;
    border: 1px solid var(--ws-hair-blue); border-radius: 12px;
    color: var(--ws-body); padding: 0;
  }
.ws-theme .ws-header__phone {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 0 1 auto;
    font-family: var(--wsc-font-mono);
    font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
    color: var(--ws-ink);
    border: 1px solid var(--ws-hair-blue); border-radius: 12px;
    padding: 0 14px; min-height: 46px; white-space: nowrap;
  }
.ws-header__support-label { display: none; }
.ws-theme .ws-header__cta {
    justify-content: center;
    flex: 1 1 auto;
    background: var(--ws-cyan); color: var(--ws-ink);
    font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
    padding: 0 16px; border-radius: 12px;
    margin: 0; min-height: 46px;
  }
.ws-theme .ws-header__cta:hover { background: var(--ws-cyan-h); color: var(--ws-ink); }
}

/* ==========================================================================
   Hero — tekst links, foto in blokjesvorm rechts
   ========================================================================== */
/* De hero heeft géén eigen sectiepadding: de tekstkolom brengt zijn eigen
   padding mee, de fotokolom juist niet — zo loopt de foto tot tegen de header.
   De band sluit af met een hairline, zoals elke sectie in het ontwerp. */
.ws-hero { position: relative; border-bottom: 1px solid var(--ws-hair-blue); }
.ws-hero__inner { display: flex; flex-wrap: wrap; }

.ws-hero__text {
  flex: 1 1 520px; min-width: 290px;
  padding: clamp(40px, 6vw, 88px) clamp(0px, 4vw, 56px) clamp(36px, 5vw, 72px) 0;
  position: relative;
}
.ws-hero__text > * { position: relative; z-index: 1; }
/* Het merkblokje achter de kop, op 14% dekking en links buiten de tekstmarge. */
.ws-hero__text::before {
  content: '';
  position: absolute;
  top: clamp(56px, 7vw, 104px);
  left: calc(clamp(4px, 1.4vw, 18px) - var(--wsc-gutter));
  width: clamp(240px, 30vw, 400px);
  aspect-ratio: 29.28 / 30.35;
  background: url(../images/ws-blokje-blauw.svg) no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.ws-hero__text h1 { margin-bottom: clamp(22px, 3vw, 32px); }
.ws-hero__text .ws-lead { margin-bottom: clamp(26px, 4vw, 38px); max-width: 56ch; }
/* Bestaat de inleiding uit meer alinea's, dan staat er tussen die alinea's een
   kleinere afstand dan tussen de inleiding en de knoppen eronder. */
.ws-hero__text .ws-lead:not(:last-of-type) { margin-bottom: 1.1em; }

/* Fotokolom: onderaan uitgelijnd, foto bovenaan flush, cijfers eronder. */
.ws-hero__media {
  flex: 1 1 340px; min-width: 270px;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ws-hero__photo {
  flex: 1 1 auto;
  min-height: clamp(220px, 26vw, 340px);
  overflow: hidden;
  border-radius: var(--ws-blokje);
}
/* Render::image() legt een .wsc-media om de foto; de hoogte moet daar doorheen. */
.ws-hero__photo > .wsc-media { height: 100%; border-radius: var(--ws-blokje); box-shadow: none; }
.ws-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
/* De duotone draait alleen als het foto-effect in het blok aanstaat. Zonder de
   schakelaar staat de foto er gewoon, in volle kleur. */
[data-wsc-beeld-effect="1"] .ws-hero__photo img { animation: ws-duo 16s ease-in-out infinite; }
.ws-hero__photo .wsc-media--empty { height: 100%; min-height: clamp(220px, 26vw, 340px); border-radius: var(--ws-blokje); }

/* De cijferrij sluit de hero af en mag niet tegen de hairline eronder plakken;
   dezelfde ademruimte als tussen de andere secties. */
.ws-hero .ws-stats { margin-top: clamp(16px, 2vw, 24px); margin-bottom: clamp(28px, 3.4vw, 48px); }

/* Blokjesvorm als losse hulpklasse, ook bruikbaar op een blok-afbeelding. */
.ws-shape { border-radius: var(--ws-blokje); overflow: hidden; }
.ws-shape--sm { border-radius: var(--ws-blokje-sm); }

/* Cijferrij onder de herofoto */
.ws-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(16px, 2vw, 24px); }
.ws-stat { padding-right: clamp(10px, 1.4vw, 18px); min-width: 0; }
.ws-stat__value {
  font-family: var(--wsc-font-head);
  font-weight: 800; font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -.035em; line-height: 1; color: var(--ws-ink);
}
.ws-stat__label { font-size: 12.5px; line-height: 1.35; color: var(--ws-body); margin-top: 6px; }

/* Achtergrondblokje op binnenpagina's (kop zonder foto ernaast). */
.ws-hero--plain {
  background-image: url(../images/ws-blokje-licht.svg);
  background-repeat: no-repeat;
  background-position: left clamp(4px, 1.4vw, 18px) top clamp(56px, 7vw, 104px);
  background-size: clamp(240px, 30vw, 400px) auto;
}

/* ==========================================================================
   Hairline-raster — het terugkerende patroon: 1px voegen als achtergrond
   ========================================================================== */
.ws-grid {
  display: grid;
  gap: 1px;
  /* Het ingestelde aantal kolommen op desktop, zodat een raster van zes items
     precies twee volle rijen vult in plaats van een lege cel over te houden. */
  grid-template-columns: repeat(var(--ws-grid-cols, 3), minmax(0, 1fr));
  background: var(--ws-hair);
  border: 1px solid var(--ws-hair);
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 1024px) {
.ws-grid { grid-template-columns: repeat(auto-fit, minmax(var(--ws-grid-min, 240px), 1fr)); }
}
.ws-grid--blue { background: var(--ws-hair-blue); border-color: var(--ws-hair-blue); }
.ws-grid > * { background: #FFFFFF; }
.ws-grid--wide { --ws-grid-min: 280px; }
.ws-grid--narrow { --ws-grid-min: 160px; }
.ws-cell { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px); }
.ws-cell__tag {
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-blue); margin-bottom: 16px;
}
/* Groot cyaan volgnummer boven een stap, zoals bij "In vier stappen naar
   draaiende automatisering". */
.ws-cell__num {
  display: block;
  font-family: var(--wsc-font-head);
  font-weight: 900; font-size: 44px; line-height: 1;
  letter-spacing: -.05em;
  color: var(--ws-cyan);
  margin-bottom: 18px;
}
.ws-cell h3 { font-size: 20px; margin: 0 0 10px; }
.ws-cell p { font-size: 14.5px; line-height: 1.58; color: var(--ws-body); margin: 0; }

/* Tegelrij van losse woorden (ecosysteem, koppelingen, tags) */
.ws-tags {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--ws-hair-blue);
  border: 1px solid var(--ws-hair-blue);
  border-radius: 16px; overflow: hidden;
}
.ws-tags > * {
  flex: 1 1 150px;
  background: var(--ws-blue-bg);
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: 14.5px; letter-spacing: -.02em;
  color: var(--ws-ink);
  padding: 16px 18px; text-align: center;
}

/* Badge-pil onder de heroknoppen: toont het merkteken of geüploade logo van het
   item (bijvoorbeeld "Shopware Bronze Partner"). */
.ws-badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px;
  background: #FFFFFF;
  border: 1px solid var(--ws-hair-blue);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--wsc-font-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-ink);
}
.ws-badge .wsc-mark { width: 18px; height: 18px; }
.ws-badge img { max-height: 20px; width: auto; }

/* Losse pillen (wat er draait, stack) */
.ws-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wsc-chip, .ws-chip {
  font-family: var(--wsc-font-head);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ws-ink);
  background: transparent;
  border: 1px solid var(--ws-hair-blue);
  border-radius: 999px;
  padding: 9px 16px;
}

/* ==========================================================================
   Rijenlijst — nummer, titel, omschrijving, pijl. Hover kleurt de rij cyaan.
   ========================================================================== */
.ws-rows { border-bottom: 1px solid var(--ws-hair); }
.ws-theme .ws-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px;
  border-top: 1px solid var(--ws-hair);
  padding: clamp(18px, 2.4vw, 26px) 16px;
  margin-inline: -16px;
  color: var(--ws-ink);
}
.ws-theme a.ws-row:hover { background: var(--ws-cyan); color: var(--ws-ink); }
a.ws-row:hover .ws-row__body { color: var(--ws-ink); }
.ws-row__num {
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .12em; color: var(--ws-blue);
  flex: 0 0 34px;
}
.ws-row__title {
  font-family: var(--wsc-font-head);
  font-weight: 800; font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -.028em; line-height: 1.1;
  flex: 0 1 340px; min-width: 220px;
}
.ws-row__body { font-size: 15px; line-height: 1.55; color: var(--ws-body); flex: 1 1 320px; min-width: 240px; }
/* Het pijltje hoort achter de zin en niet op een eigen regel: als los element
   in de rij wordt het bij weinig ruimte naar beneden geduwd, en dan lijkt het
   een losse knop. Als teken achter de tekst blijft het waar het hoort.
   Alleen bij rijen die een link zijn; de rijen in een opsomming hebben er
   niets te zoeken. */
.ws-row__arrow { display: none; }
a.ws-row .ws-row__body::after {
  content: '\00a0\2192';
  font-family: var(--wsc-font-mono);
  white-space: nowrap;
}
a.ws-row:hover .ws-row__body::after { color: var(--ws-blue); }
/* Een artikelrij heeft geen omschrijving; daar hoort het pijltje achter de kop. */
a.ws-row--post .ws-row__title::after {
  content: '\00a0\2192';
  font-family: var(--wsc-font-mono);
  white-space: nowrap;
}
/* Niet-klikbare variant (puntenlijst op een dienstpagina) */
.ws-rows--static .ws-row { padding-inline: 0; margin-inline: 0; }

/* ==========================================================================
   Casekaarten — hover kleurt de hele kaart donkerblauw
   ========================================================================== */
.ws-theme .ws-case {
  display: flex; flex-direction: column;
  background: #FFFFFF; color: var(--ws-ink);
  transition: background .35s ease, color .35s ease;
}
.ws-case__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ws-case__img img,
.ws-case__img > div { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: filter .55s ease; filter: var(--ws-duo); }
.ws-case__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 0; flex: 1; }
.ws-case__num {
  font-family: var(--wsc-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-blue);
}
.ws-case__name {
  font-family: var(--wsc-font-head);
  font-weight: 800; font-size: 22px; letter-spacing: -.03em; line-height: 1.05;
}
.ws-case__desc { font-size: 14.5px; line-height: 1.55; color: var(--ws-body); }
.ws-case__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 16px 22px 0; padding: 14px 0 18px;
  border-top: 1px solid var(--ws-hair);
  transition: border-color .35s ease;
}
.ws-case__stack {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ws-body);
  transition: color .35s ease;
}
.ws-case__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--ws-blokje-sm);
  background: var(--ws-arrow); color: var(--ws-ink);
  font-family: var(--wsc-font-mono); font-size: 14px;
  flex: none;
}
.ws-theme a.ws-case:hover { background: var(--ws-blue); color: #FFFFFF; }
a.ws-case:hover .ws-case__num { color: var(--ws-on-blue); }
a.ws-case:hover .ws-case__desc,
a.ws-case:hover .ws-case__stack { color: var(--ws-on-blue); }
a.ws-case:hover .ws-case__foot { border-top-color: rgba(255, 255, 255, .28); }
a.ws-case:hover .ws-case__img img,
a.ws-case:hover .ws-case__img > div { filter: none; }

/* Kaart zonder beeld (plugin, artikel, "meer werk") */
.ws-theme .ws-tile {
  display: flex; flex-direction: column;
  background: #FFFFFF; color: var(--ws-ink);
  padding: 24px;
  transition: background .18s ease;
}
.ws-theme a.ws-tile:hover { background: var(--ws-blue-bg); }
.ws-tile__cat {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--wsc-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-blue); margin-bottom: 12px;
}
.ws-tile__cat::before { content: ''; width: 9px; height: 9px; background: var(--ws-cyan); border-radius: 3px; flex: none; }
.ws-tile h3 { font-size: 19px; margin: 0 0 10px; }
.ws-tile p { font-size: 14px; line-height: 1.55; color: var(--ws-body); margin: 0 0 16px; }
.ws-tile__more {
  margin-top: auto;
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-blue);
}

/* ==========================================================================
   Accordeon (FAQ) — één open item, + / − rechts
   ========================================================================== */
.ws-faq, .wsc-accordion { border-top: 1px solid #000000; }
.ws-faq__item, .wsc-accordion__item { border-bottom: 1px solid var(--ws-hair); }
.ws-faq__head, .wsc-accordion__head {
  display: flex; align-items: baseline; gap: 16px;
  width: 100%;
  background: none; border: 0; cursor: pointer;
  padding: 20px 0; text-align: left; min-height: 48px;
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: 17.5px; letter-spacing: -.022em;
  color: var(--ws-ink); line-height: 1.25;
}
.ws-faq__num {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  color: var(--ws-blue); flex: 0 0 30px;
}
.ws-faq__q { flex: 1; }
.ws-faq__sign, .wsc-accordion__sign {
  font-family: var(--wsc-font-mono);
  font-size: 18px; font-weight: 400; color: var(--ws-blue);
  flex: none; line-height: 1;
}
.ws-faq__body, .wsc-accordion__body {
  font-size: 15px; line-height: 1.65; color: var(--ws-body);
  margin: 0; padding: 0 0 24px 46px; max-width: 62ch;
}
.ws-faq__item:not(.is-open) > .ws-faq__body { display: none; }

/* ==========================================================================
   Filterknoppen
   ========================================================================== */
.ws-filters {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--ws-hair);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 28px;
}
.ws-filter {
  font-family: var(--wsc-font-mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 20px; cursor: pointer; min-height: 46px;
  background: #FFFFFF; color: var(--ws-body);
  border: 0; border-right: 1px solid var(--ws-hair);
  flex: 1 1 auto;
}
.ws-filter:last-child { border-right: 0; }
.ws-filter.is-active { background: var(--ws-cyan); color: var(--ws-ink); }

/* Ronde categoriepillen (Insights) */
.ws-catfilters { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-catfilter {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  background: #FFFFFF; color: var(--ws-body);
  border: 1px solid var(--ws-hair); border-radius: 999px;
  padding: 9px 15px; min-height: 36px; cursor: pointer;
}
.ws-catfilter.is-active { background: var(--ws-cyan); color: var(--ws-ink); border-color: var(--ws-cyan); }

/* ==========================================================================
   Galerij — groot beeld met wisselende thumbnails
   ========================================================================== */
.ws-gallery { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); align-items: flex-start; }
.ws-gallery__main {
  flex: 1 1 420px; min-width: 280px; max-width: 640px;
  border: 1px solid var(--ws-hair-blue); border-radius: 14px; overflow: hidden;
}
.ws-gallery__main img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ws-gallery__side { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }
.ws-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-gallery__thumb {
  width: 96px; height: 64px; padding: 0;
  border: 2px solid var(--ws-hair); border-radius: 9px;
  overflow: hidden; background: transparent; cursor: pointer; flex: none;
}
.ws-gallery__thumb.is-active { border-color: var(--ws-cyan); }
.ws-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Citaat en artikeltekst
   ========================================================================== */
.ws-quote {
  margin: 0;
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 2px solid var(--ws-cyan);
  max-width: 60ch;
}
.ws-quote p {
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.28; letter-spacing: -.03em;
  color: var(--ws-ink); margin: 0 0 14px;
}
.ws-quote footer {
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-body);
}

/* De leesbreedte hoort bij de tékst, niet bij de kolom. Zo houdt lopende tekst
   zijn 68ch, terwijl een tegelrij, raster of beeld in dezelfde body gewoon de
   volle containerbreedte pakt — precies zoals in het ontwerp. */
/* Let op de :not() — de blogmodule geeft de tekstwrapper zowel .wsc-container
   als .wsc-prose. Zonder uitzondering zou deze regel de max-width van de
   container wegnemen, waardoor het artikel over de volle schermbreedte ging
   staan in plaats van uitgelijnd met kop en beeld. */
.ws-prose:not(.wsc-container),
.wsc-prose:not(.wsc-container) { max-width: none; }
/* Draagt het element beide klassen, dan wint de containerbreedte: de tekst
   lijnt dan links uit met kop en beeld, en de leeskolom komt van de regel
   hieronder die de tekstelementen op 68ch zet. */
.wsc-prose.wsc-container { max-width: var(--wsc-maxw); }
.ws-prose > p, .ws-prose > h2, .ws-prose > h3, .ws-prose > h4,
.ws-prose > ul, .ws-prose > ol, .ws-prose > blockquote,
.wsc-prose > p, .wsc-prose > h2, .wsc-prose > h3, .wsc-prose > h4,
.wsc-prose > ul, .wsc-prose > ol, .wsc-prose > blockquote { max-width: 68ch; }
/* Blokken die Concrete in een wrapper zet, blijven zo ook binnen de leesbreedte. */
.ws-prose .ccm-block p, .wsc-prose .ccm-block p { max-width: 68ch; }

.ws-prose p, .wsc-prose p { font-size: 17px; line-height: 1.72; color: var(--ws-article); margin: 0 0 20px; }
.ws-prose h2, .wsc-prose h2 {
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1.1; letter-spacing: -.035em;
  margin: clamp(30px, 3.5vw, 44px) 0 14px;
}
.ws-prose h3, .wsc-prose h3 { margin: clamp(24px, 3vw, 34px) 0 12px; }
.ws-prose ul, .ws-prose ol, .wsc-prose ul, .wsc-prose ol { color: var(--ws-article); line-height: 1.72; }
.ws-prose blockquote, .wsc-prose blockquote {
  margin: clamp(28px, 3.5vw, 40px) 0;
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 2px solid var(--ws-cyan);
}
.ws-prose blockquote p, .wsc-prose blockquote p {
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.28; letter-spacing: -.03em; color: var(--ws-ink);
}
.ws-prose img, .wsc-prose img { border-radius: 14px; margin: 1.5em 0; }

/* Sleutel-waardelijst (specs, bedrijfsgegevens, metabalk) */
.ws-facts { border-top: 1px solid #000000; }
.ws-facts__row {
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
  border-bottom: 1px solid var(--ws-hair);
  padding: 14px 0;
}
.ws-facts__k {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-muted); flex: 0 0 140px;
}
.ws-facts__v {
  font-family: var(--wsc-font-head);
  font-size: 15.5px; font-weight: 600; letter-spacing: -.018em;
  color: var(--ws-ink); flex: 1 1 200px;
}

/* ==========================================================================
   Formulieren
   ========================================================================== */
.ws-theme input[type="text"],
.ws-theme input[type="email"],
.ws-theme input[type="tel"],
.ws-theme input[type="url"],
.ws-theme input[type="number"],
.ws-theme input[type="password"],
.ws-theme select,
.ws-theme textarea,
.wsc-form input[type="text"],
.wsc-form textarea {
  width: 100%;
  font-family: var(--wsc-font-body);
  font-size: 16px;
  color: var(--ws-ink);
  background: #FFFFFF;
  border: 1px solid var(--ws-hair-blue);
  border-radius: 12px;
  padding: 13px 14px;
  min-height: 48px;
}
.ws-theme textarea { resize: vertical; min-height: 110px; }
.ws-theme input:focus,
.ws-theme select:focus,
.ws-theme textarea:focus { border-color: var(--ws-cyan); outline: none; }
.wsc-form__label, .ws-field__label {
  display: block;
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-body);
  margin-bottom: 8px;
}

/* ==========================================================================
   Animaties — duotone, typemachine, scroll-fill
   ========================================================================== */
:root { --ws-duo: grayscale(1) contrast(1.05) sepia(.14) hue-rotate(172deg) saturate(1.15); }

@keyframes ws-duo {
0%, 8% { filter: var(--ws-duo); }
45%, 63% { filter: grayscale(0) contrast(1) sepia(0) hue-rotate(0deg) saturate(1); }
100% { filter: var(--ws-duo); }
}
@keyframes ws-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Herofoto's ademen langzaam van duotone naar volle kleur en terug. */
.ws-duo { animation: ws-duo 16s ease-in-out infinite; }
/* Kaartfoto's doen hetzelfde, maar op hover. */
.ws-duo--hover { filter: var(--ws-duo); transition: filter .55s ease; }
.ws-duo--hover:hover,
a:hover > .ws-duo--hover,
a:hover .ws-duo--hover { filter: none; }

/* Typemachine: de volledige titel staat onzichtbaar achter de getypte tekst
   als maatvoering, de getypte laag ligt er absoluut overheen. Zo springt de
   hoogte niet terwijl er getypt wordt. */
.ws-type { position: relative; display: block; }
.ws-type__ghost { visibility: hidden; }
.ws-type__live { position: absolute; left: 0; top: 0; right: 0; }
.ws-type__accent, .ws-theme h1 .wsc-hl { font-style: italic; letter-spacing: -.03em; color: var(--ws-cyan-h); }
/* Accentwoord in een kop (*tekst* in de editor) — buiten H1 zonder cursief. */
.ws-theme .wsc-hl { color: var(--ws-cyan-h); }
.ws-type__caret {
  display: inline-block;
  width: .06em; min-width: 2px; height: .82em;
  background: var(--ws-cyan);
  margin-left: .06em;
  transform: translateY(.04em);
  animation: ws-blink 1s steps(1) infinite;
}
.ws-type.is-done .ws-type__caret { display: none; }

/* Scroll-fill: één zin die woord voor woord van grijs naar zwart loopt. */
.ws-fill {
  font-family: var(--wsc-font-head);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -.032em;
  color: var(--ws-hair-blue);
  max-width: 20ch;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.ws-fill--sm { font-size: clamp(19px, 2.4vw, 30px); line-height: 1.24; letter-spacing: -.03em; max-width: 26ch; }
/* De breedte-instelling van het tekstblok. Smal is de maat van het ontwerp;
   middel en volledig laten de kop verder doorlopen zodat hij minder regels
   nodig heeft. */
.ws-fill--smal { max-width: 20ch; }
.ws-fill--middel { max-width: 30ch; }
.ws-fill--vol { max-width: none; }
/* Zonder effect: dezelfde typografie, maar meteen in de eindkleur. */
.ws-fill--static { color: var(--ws-ink); }
.ws-fill__w { display: inline-block; white-space: pre; }

@media (prefers-reduced-motion: reduce) {
.ws-duo { animation: none; filter: none; }
[data-wsc-beeld-effect="1"] .ws-hero__photo img,
[data-wsc-beeld-effect="1"] .wsc-hero__img img { animation: none; }
.ws-type__caret { animation: none; }
.ws-header, .ws-header__inner, .ws-header__brand img { transition: none; }
}

/* ==========================================================================
   Terug naar boven
   ========================================================================== */
.ws-totop {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 0; border-radius: 14px;
  background: var(--ws-blue); color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  transition: background .18s ease, color .18s ease;
}
.ws-totop.is-visible { display: inline-flex; }
/* Niet tijdens het menu: hij zou over de knoppenbalk onderin vallen, en er valt
   op dat moment toch niets om naar boven te scrollen. */
.ws-header.is-open ~ .ws-totop, body:has(.ws-header.is-open) .ws-totop { display: none; }
.ws-totop:hover { background: var(--ws-cyan); color: var(--ws-ink); }

/* ==========================================================================
   Contact-CTA (cyane band boven de footer)
   ========================================================================== */
/* Het blok brengt zijn eigen sectiepadding mee; hier alleen de kleuren. */
.wsc-band--cyan h2 { font-weight: 900; font-size: clamp(24px, 3.6vw, 44px); color: var(--ws-ink); }
.wsc-band--cyan p { color: var(--ws-ink); }
.wsc-band--cyan .wsc-eyebrow, .wsc-band--cyan .ws-eyebrow { color: var(--ws-ink); opacity: .65; }
.wsc-band--cyan .wsc-btn.wsc-btn--primary { background: #000000; color: #FFFFFF; }
.wsc-band--cyan .wsc-btn.wsc-btn--primary:hover { background: var(--ws-blue); }
.wsc-band--cyan .wsc-btn.wsc-btn--ghost { background: var(--ws-cyan); color: var(--ws-ink); border-color: #000000; }
.wsc-band--cyan .wsc-btn.wsc-btn--ghost:hover { background: var(--ws-cyan-h); }

/* ==========================================================================
   Footer — zwart, vier kolommen
   ========================================================================== */
.ws-footer { background: #000000; color: var(--ws-muted); }
.ws-footer .ws-container { padding-top: clamp(40px, 6vw, 72px); }
.ws-footer__top {
  display: flex; flex-wrap: wrap; gap: 40px;
  justify-content: space-between;
  padding-bottom: 44px;
}
.ws-footer__brand { flex: 1 1 260px; min-width: 230px; }
.ws-footer__brand img { height: 28px; width: auto; margin-bottom: 12px; }
.ws-footer__eyebrow {
  display: block;
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ws-cyan);
  margin-bottom: 20px;
}
.ws-footer__brand p { font-size: 14px; line-height: 1.65; color: var(--ws-muted); max-width: 34ch; }
.ws-footer__cols { display: flex; flex-wrap: wrap; gap: 40px; }
.ws-footer__cols h3, .ws-footer__cols .ccm-block-page-title h3 {
  font-family: var(--wsc-font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ws-muted);
  margin: 0 0 16px;
}
.ws-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-footer a {
  font-family: var(--wsc-font-head);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.018em;
  color: #FFFFFF;
}
.ws-footer a:hover { color: var(--ws-cyan); }
.ws-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; align-items: center;
  padding: 20px 0;
  border-top: 1px solid #262626;
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .06em;
  color: var(--ws-muted);
}
.ws-footer__bottom a { font-family: var(--wsc-font-mono); font-size: 11px; font-weight: 400; color: var(--ws-muted); }
.ws-footer__bottom p { margin: 0; color: var(--ws-muted); }

/* ==========================================================================
   Afstemming op de wsc_*-blokken
   ========================================================================== */
/* De banden van wsc-core krijgen de Websignaal-hairlines: elke sectie sluit af
   met een 1px lijn over de volle breedte. "cyan" is een extra achtergrondwaarde
   van dit thema, gebruikt voor de contact-CTA. */
.wsc-band--white { background: #FFFFFF; border-bottom: 1px solid var(--ws-hair); }
.wsc-band--light { background: var(--ws-blue-bg); border-bottom: 1px solid var(--ws-hair-blue); }
.wsc-band--cyan { background: var(--ws-cyan); color: var(--ws-ink); }
.wsc-band--dark { background: #000000; color: var(--ws-muted); }
.wsc-band--dark .wsc-card { background: #0D0D0D; border-color: rgba(255, 255, 255, .10); }
.wsc-band--dark .wsc-eyebrow { color: var(--ws-cyan); }
.wsc-band--dark .wsc-chip { background: transparent; border-color: rgba(255, 255, 255, .22); color: #FFFFFF; }

/* Kaarten: hairline in plaats van schaduw. */
.wsc-card { background: #FFFFFF; border: 1px solid var(--ws-hair); border-radius: 16px; }
.wsc-card__eyebrow, .wsc-card .wsc-dot { background: var(--ws-cyan); border-radius: 3px; }

/* Beeld: blokjesvorm en geen schaduw. */
.wsc-media { border-radius: var(--ws-blokje); box-shadow: none; }
.wsc-media--empty {
  background: var(--ws-blue-bg);
  border: 2px dashed var(--ws-blue-line);
  color: var(--ws-body);
  border-radius: 16px;
}

/* Carrouselpijlen in de blokjesvorm en huisstijlkleur. */
.wsc-cards__arrow {
  border-radius: var(--ws-blokje-sm);
  border-color: var(--ws-hair-blue);
  box-shadow: none;
  color: var(--ws-ink);
}
.wsc-cards__arrow:hover { background: var(--ws-cyan); }

/* Merkteken (Mark::render) gebruikt standaard het cyaan. */
.wsc-mark { color: var(--mc, var(--ws-cyan)); }

/* Partnerbalk */
.wsc-trust { padding-block: 20px; gap: 14px 28px; justify-content: flex-start; }
.wsc-trust__label {
  font-size: 11px; letter-spacing: .16em; color: var(--ws-body);
}

/* --------------------------------------------------------------------------
   wsc_hero → de hero uit het ontwerp: tekst links met het merkblokje erachter,
   foto rechts in blokjesvorm met de duotone-animatie.
   -------------------------------------------------------------------------- */
.wsc-hero__inner { display: flex; flex-wrap: wrap; }
.wsc-hero__text {
  flex: 1 1 520px; min-width: 290px;
  padding: clamp(40px, 6vw, 88px) clamp(0px, 4vw, 56px) clamp(36px, 5vw, 72px) 0;
  position: relative;
}
/* Het merkblokje op 14% dekking, links buiten de tekstmarge. */
.wsc-hero__text::before {
  content: '';
  position: absolute;
  top: clamp(56px, 7vw, 104px);
  left: calc(clamp(4px, 1.4vw, 18px) - var(--wsc-gutter));
  width: clamp(240px, 30vw, 400px);
  aspect-ratio: 29.28 / 30.35;
  background: url(../images/ws-blokje-blauw.svg) no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.wsc-hero__text > * { position: relative; z-index: 1; }

/* Het losse merkteken-icoontje van het blok komt in dit ontwerp niet voor —
   het merk zit al als blokje achter de kop. */
.wsc-hero__mark { display: none; }

.wsc-hero__media {
  flex: 1 1 340px; min-width: 270px;
  align-self: stretch;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
}
/* De foto vult de hele hoogte van de hero, zoals in het ontwerp: hij loopt van
   de bovenkant van de sectie tot onderaan naast de tekstkolom. Render::image()
   zet een .wsc-media om de foto heen, dus de hoogte moet door die tussenlaag
   heen doorgegeven worden — anders valt de foto terug op zijn eigen hoogte. */
.wsc-hero__img { flex: 1 1 auto; min-height: clamp(220px, 26vw, 340px); overflow: hidden; border-radius: var(--ws-blokje); }
.wsc-hero__img > .wsc-media { height: 100%; border-radius: var(--ws-blokje); }
.wsc-hero__img img { width: 100%; height: 100%; object-fit: cover; }
[data-wsc-beeld-effect="1"] .wsc-hero__img img { animation: ws-duo 16s ease-in-out infinite; }
.wsc-hero__img .wsc-media--empty { min-height: clamp(220px, 26vw, 340px); border-radius: var(--ws-blokje); height: 100%; }

/* In de hero staan twee volle knoppen naast elkaar: cyaan en zwart. De tweede
   knop komt uit Render::buttonRow als "ghost"; in de hero is dat de zwarte. */
.wsc-hero__text .wsc-btn-row > .wsc-btn { flex: 1 1 200px; }
.wsc-hero__text .wsc-btn.wsc-btn--ghost { background: #000000; color: #FFFFFF; border-color: #000000; }
.wsc-hero__text .wsc-btn.wsc-btn--ghost:hover { background: var(--ws-blue); border-color: var(--ws-blue); color: #FFFFFF; }

.wsc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wsc-stat { padding-right: clamp(10px, 1.4vw, 18px); min-width: 0; }
.wsc-stat__value {
  font-family: var(--wsc-font-head);
  font-weight: 800; font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -.035em; line-height: 1; color: var(--ws-ink);
}
.wsc-stat__label { font-size: 12.5px; line-height: 1.35; color: var(--ws-body); margin-top: 6px; }

.wsc-hero__badge {
  position: absolute; left: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 9px;
  background: #FFFFFF; border: 1px solid var(--ws-hair-blue);
  border-radius: 999px; padding: 9px 16px;
  font-family: var(--wsc-font-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.wsc-hero__badge b { font-weight: 600; }

@media (max-width: 900px) {
.wsc-hero__text { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   De vormentaal van het ontwerp opleggen aan de standaardsjablonen van de
   modules: geen zwevende witte kaarten met schaduw, maar één hairline-raster
   met 1px voegen en alleen op de buitenrand een radius.
   -------------------------------------------------------------------------- */

/* Kopregel van een sectie: grote H2, label erboven, geen brede prozakolom. */
.wsc-section-head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 14px;
  max-width: none;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.wsc-section-head > * { margin: 0; }
.wsc-section-head .wsc-lead { flex: 1 1 100%; margin-top: 10px; }

/* Catalogus- en referentierasters → hairline-raster */
.wsc-cat-grid, .wsc-ref-grid, .wsc-blog-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--ws-hair);
  border: 1px solid var(--ws-hair);
  border-radius: 16px;
  overflow: hidden;
}
.ws-theme .wsc-cat-card, .ws-theme .wsc-ref-card, .ws-theme .wsc-blog-card {
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: var(--ws-ink);
  transition: background .18s ease;
}
.ws-theme a.wsc-cat-card:hover, .ws-theme a.wsc-ref-card:hover, .ws-theme a.wsc-blog-card:hover { background: var(--ws-blue-bg); }
.wsc-cat-card.is-hidden, .wsc-ref-card.is-hidden { display: none; }

.wsc-cat-card__cat, .wsc-ref-card__branche, .wsc-blog-card__meta {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--wsc-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ws-blue);
  margin-bottom: 12px;
}
.wsc-cat-card__cat::before, .wsc-ref-card__branche::before {
  content: ''; width: 9px; height: 9px;
  background: var(--ws-cyan); border-radius: 3px; flex: none;
}
.wsc-cat-card h3, .wsc-ref-card h3, .wsc-blog-card__title { font-size: 19px; margin: 0 0 10px; }
.wsc-cat-card__tag, .wsc-ref-card__quote, .wsc-blog-card__excerpt {
  font-size: 14px; line-height: 1.55; color: var(--ws-body); margin: 0 0 16px;
}
.wsc-cat-card__more, .wsc-ref-card__more, .wsc-blog-card__more {
  margin-top: auto;
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-blue);
}
.wsc-ref-card__badge {
  align-self: flex-start;
  font-family: var(--wsc-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ws-cyan); color: var(--ws-ink);
  border-radius: 999px; padding: 5px 11px; margin-bottom: 12px;
}
.wsc-ref-card__logo img { max-height: 34px; width: auto; margin-bottom: 14px; }

/* Beeld op de artikelkaarten: blauwe duotone die bij hover naar volle kleur
   gaat — dezelfde behandeling als in de Insights-dropdown en op de cases.
   De blok-CSS zet hier eigen regels neer, vandaar .ws-theme ervoor. */
.ws-theme .wsc-blog-card__image {
  border-radius: 12px 0 12px 0;
  overflow: hidden;
}
.ws-theme .wsc-blog-card__image img {
  filter: var(--ws-duo);
  transition: filter .55s ease;
}
.ws-theme .wsc-blog-card:hover .wsc-blog-card__image img { filter: none; }

/* Filterknoppen van de modules in de vorm van het ontwerp */
.wsc-cat-filters, .wsc-ref-filters, .wsc-blog-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
.wsc-cat-filter, .wsc-ref-filter, .wsc-blog-filters a {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  background: #FFFFFF; color: var(--ws-body);
  border: 1px solid var(--ws-hair); border-radius: 999px;
  padding: 9px 15px; min-height: 36px; cursor: pointer;
}
.wsc-cat-filter.is-active, .wsc-ref-filter.is-active, .wsc-blog-filters a.is-active {
  background: var(--ws-cyan); color: var(--ws-ink); border-color: var(--ws-cyan);
}

/* --------------------------------------------------------------------------
   Detailpagina van de catalogus (/diensten/<item>).
   Die komt uit een single page van de module, dus daar kan geen blok-template
   overheen. Met CSS krijgt de hero dezelfde geometrie als de blok-hero: blauwe
   band met hairline, tekstkolom die de padding draagt en een fotokolom die tot
   tegen de header doorloopt — zodat elke pagina er bovenaan hetzelfde uitziet.
   -------------------------------------------------------------------------- */
.ws-theme .wsc-band:has(> .wsc-section > .wsc-cat-hero) {
  background: var(--ws-blue-bg);
  border-bottom: 1px solid var(--ws-hair-blue);
}
/* De sectiepadding weg: de tekstkolom brengt hem zelf mee. */
.ws-theme .wsc-band:has(> .wsc-section > .wsc-cat-hero) > .wsc-section { padding-block: 0; }

.ws-theme .wsc-cat-hero,
.ws-theme .wsc-cat-hero.has-img {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  grid-template-columns: none;
}
.ws-theme .wsc-cat-hero__text {
  flex: 1 1 500px; min-width: 290px;
  padding: clamp(40px, 6vw, 88px) clamp(0px, 4vw, 56px) clamp(36px, 5vw, 72px) 0;
  position: relative;
}
.ws-theme .wsc-cat-hero__text > * { position: relative; z-index: 1; }
.ws-theme .wsc-cat-hero__text::before {
  content: '';
  position: absolute;
  top: clamp(56px, 7vw, 104px);
  left: calc(clamp(4px, 1.4vw, 18px) - var(--wsc-gutter));
  width: clamp(240px, 30vw, 400px);
  aspect-ratio: 29.28 / 30.35;
  background: url(../images/ws-blokje-blauw.svg) no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
/* Het losse icoontje komt in dit ontwerp niet voor; het merk zit al als blokje
   achter de kop. */
.ws-theme .wsc-cat-hero__icon { display: none; }

/* "Waarom …" — in het ontwerp een rijenlijst met volgnummer, titel en tekst,
   geen kaartenraster. De nummering komt uit een CSS-teller, want het blok
   levert die niet mee. */
.ws-theme .wsc-cat-grid:has(> .wsc-cat-card--plain) {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ws-hair);
  counter-reset: wsrow;
}
.ws-theme .wsc-cat-card--plain {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ws-hair);
  border-radius: 0;
  padding: clamp(18px, 2.2vw, 24px) 0;
  counter-increment: wsrow;
}
.ws-theme .wsc-cat-card--plain::before {
  content: counter(wsrow, decimal-leading-zero);
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .12em; color: var(--ws-blue);
  flex: 0 0 34px;
}
.ws-theme .wsc-cat-card--plain h3 {
  font-weight: 800; font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -.03em; line-height: 1.1;
  flex: 0 1 280px; min-width: 200px;
  margin: 0;
}
.ws-theme .wsc-cat-card--plain p {
  font-size: 15px; line-height: 1.58; color: var(--ws-body);
  flex: 1 1 360px; min-width: 240px;
  margin: 0;
}

/* Aanpak — dezelfde rijenvorm als de rest van het ontwerp: mono volgnummer
   in plaats van een gevulde cirkel. */
.ws-theme .wsc-cat-steps { display: block; margin-top: 8px; border-bottom: 1px solid var(--ws-hair-blue); }
.ws-theme .wsc-cat-steps li {
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--ws-hair-blue);
  padding: 14px 0;
}
.ws-theme .wsc-cat-steps__n {
  width: auto; height: auto;
  background: none; border-radius: 0;
  font-family: var(--wsc-font-mono);
  font-weight: 500; font-size: 11px; letter-spacing: .12em;
  color: var(--ws-blue);
  flex: 0 0 30px;
}
.ws-theme .wsc-cat-steps li strong {
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: 16.5px; letter-spacing: -.022em;
}

.ws-theme .wsc-cat-hero__img {
  flex: 1 1 340px; min-width: 280px;
  align-self: stretch;
  display: flex;
}
.ws-theme .wsc-cat-hero__img img {
  width: 100%; height: 100%;
  min-height: clamp(240px, 32vw, 460px);
  object-fit: cover;
  border-radius: var(--ws-blokje);
  animation: ws-duo 16s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Kop van de overige module-pagina's (catalogusoverzicht, casedetail, artikel).
   Die hebben geen foto naast de kop, dus ze houden — net als in het ontwerp —
   hun ruimte boven, maar krijgen wel dezelfde blauwe band, hetzelfde merkblokje
   op de achtergrond en dezelfde afsluitende hairline. Zo start elke pagina
   hetzelfde, ongeacht welke module hem rendert.
   -------------------------------------------------------------------------- */
.ws-theme .wsc-band:has(> .wsc-section > .wsc-cat-ovhero),
.ws-theme .wsc-ref-heroband {
  background: var(--ws-blue-bg);
  border-bottom: 1px solid var(--ws-hair-blue);
}
.ws-theme .wsc-band:has(> .wsc-section > .wsc-cat-ovhero) > .wsc-section,
.ws-theme .wsc-ref-heroband > .wsc-section,
.ws-theme .wsc-band--light:has(> .wsc-section > .wsc-blog-header) > .wsc-section {
  background-image: url(../images/ws-blokje-licht.svg);
  background-repeat: no-repeat;
  background-position: left clamp(4px, 1.4vw, 18px) top clamp(56px, 7vw, 104px);
  background-size: clamp(240px, 30vw, 400px) auto;
  padding-block: clamp(40px, 6vw, 88px);
}
/* De kop mag niet smaller zijn dan de rest van de pagina. */
.ws-theme .wsc-cat-ovhero { max-width: 62ch; }

/* Accordeon (FAQ) — het ontwerp zet de vragen als vlakke hairline-rijen naast
   een kop links, met een volgnummer ervoor en een kaal +/− teken rechts. De
   view.css van het blok laadt ná deze stylesheet, dus de selectors hieronder
   krijgen .ws-theme ervoor om op specificiteit te winnen. */
.ws-theme .wsc-accordion-block { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); }
.ws-theme .wsc-accordion-head { flex: 1 1 280px; min-width: 250px; max-width: none; margin-bottom: 0; }
.ws-theme .wsc-accordion {
  flex: 1 1 480px; min-width: 280px;
  display: block;
  gap: 0;
  border-top: 1px solid #000000;
  counter-reset: wsfaq;
}
.ws-theme .wsc-accordion__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ws-hair);
  border-radius: 0;
  counter-increment: wsfaq;
}
.ws-theme .wsc-accordion__head {
  align-items: baseline;
  padding: 20px 0;
  gap: 16px;
  font-size: 17.5px;
  letter-spacing: -.022em;
  line-height: 1.25;
  min-height: 48px;
}
.ws-theme .wsc-accordion__head::before {
  content: counter(wsfaq, decimal-leading-zero);
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  color: var(--ws-blue);
  flex: 0 0 30px;
}
.ws-theme .wsc-accordion__head > span:first-of-type { flex: 1; }
.ws-theme .wsc-accordion__sign {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--wsc-font-mono);
  font-size: 18px; font-weight: 400;
  color: var(--ws-blue);
  line-height: 1;
}
.ws-theme .wsc-accordion__item.is-open .wsc-accordion__sign { background: none; color: var(--ws-blue); }
.ws-theme .wsc-accordion__body { padding: 0 0 24px 46px; max-width: 62ch; color: var(--ws-body); }

/* Call-to-action: de cyane band uit het ontwerp */
.wsc-cta { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); align-items: center; justify-content: space-between; }
.wsc-cta__text { flex: 1 1 400px; min-width: 260px; }
.wsc-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 1 420px; }
.wsc-band--cyan .wsc-cta__frame, .ws-band--cyan .wsc-cta__frame {
  border: 1px solid #000000; border-radius: 14px; overflow: hidden;
}
.wsc-cta__caption-name { font-family: var(--wsc-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ws-ink); }
.wsc-cta__caption-role { font-family: var(--wsc-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ws-ink); opacity: .7; }

/* Stappen en checklist: zelfde hairline-raster */
.wsc-steps__grid, .wsc-checklist {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--ws-hair-blue);
  border: 1px solid var(--ws-hair-blue);
  border-radius: 16px; overflow: hidden;
}
.wsc-steps__item, .wsc-checklist__item {
  background: #FFFFFF; border: 0; border-radius: 0;
  padding: clamp(22px, 2.6vw, 28px);
}

/* --------------------------------------------------------------- partnerbalk */
.ws-partners {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 28px; padding-block: 20px;
  border-bottom: 1px solid var(--ws-hair);
}
.ws-partners__label {
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ws-body); flex: none;
}
.ws-partners__items { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; flex: 1; }
.ws-partner { display: inline-flex; align-items: baseline; gap: 7px; }
.ws-partner__name {
  font-family: var(--wsc-font-head);
  font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--ws-ink);
}
.ws-partner__role {
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-body);
}

/* ----------------------------------------------------------------- fotoband */
/* De tekst erboven eindigt zonder eigen ruimte eronder, zodat de zin in deze
   band doorloopt. De foto's zelf hebben daar wel wat lucht bij nodig. */
.ws-photoband__wrap {
  padding-top: clamp(28px, 3.5vw, 52px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.ws-photoband {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--ws-hair);
  border: 1px solid var(--ws-hair);
  border-radius: 16px; overflow: hidden;
}
.ws-photoband__cell { aspect-ratio: 3 / 4; overflow: hidden; background: #FFFFFF; }
.ws-photoband__cell img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------- twee grote kaarten */
.ws-duo { display: flex; flex-wrap: wrap; gap: 16px; }
.ws-duo__card {
  flex: 1 1 340px; min-width: 280px;
  border-radius: 20px;
  padding: clamp(28px, 4vw, 56px);
  display: flex; flex-direction: column;
  min-height: 340px;
  transition: background .18s ease;
}
.ws-theme .ws-duo__card--dark { background: #000000; color: #FFFFFF; }
.ws-theme a.ws-duo__card--dark:hover { background: var(--ws-blue); color: #FFFFFF; }
.ws-theme .ws-duo__card--cyan { background: var(--ws-cyan); color: var(--ws-ink); }
.ws-theme a.ws-duo__card--cyan:hover { background: var(--ws-cyan-h); color: var(--ws-ink); }

.ws-duo__eyebrow {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.ws-duo__card--dark .ws-duo__eyebrow { color: var(--ws-cyan); }
.ws-duo__card--cyan .ws-duo__eyebrow { color: var(--ws-ink); opacity: .6; }

.ws-duo__title {
  font-family: var(--wsc-font-head);
  font-weight: 900; font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1; letter-spacing: -.04em;
  margin: 0 0 16px;
}
/* Expliciet per variant: de generieke kopregel zet h3 op zwart, wat op de
   zwarte kaart onleesbaar is. */
.ws-duo__card--dark .ws-duo__title { color: #FFFFFF; }
.ws-duo__card--cyan .ws-duo__title { color: var(--ws-ink); }
.ws-duo__body { font-size: 15px; line-height: 1.6; margin: 0 0 26px; max-width: 42ch; }
.ws-duo__card--dark .ws-duo__body { color: var(--ws-muted); }
.ws-duo__card--cyan .ws-duo__body { color: var(--ws-ink); }

.ws-duo__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; margin-bottom: 22px; }
.ws-duo__tag {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 6px 12px;
}
.ws-duo__card--dark .ws-duo__tag { color: #FFFFFF; border: 1px solid #333333; }
.ws-duo__card--cyan .ws-duo__tag { color: var(--ws-ink); border: 1px solid var(--ws-ink); }

.ws-duo__more {
  font-family: var(--wsc-font-mono);
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
}
.ws-duo__card--dark .ws-duo__more { color: var(--ws-cyan); }
.ws-duo__card--cyan .ws-duo__more { color: var(--ws-ink); }

/* Rijenlijst: de variant voor artikelen heeft een categorielabel in plaats
   van een volgnummer. */
.ws-row__tag {
  font-family: var(--wsc-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-blue);
  flex: 0 0 90px;
}
a.ws-row:hover .ws-row__num,
a.ws-row:hover .ws-row__tag { color: var(--ws-ink); }
.ws-row--post .ws-row__title { flex: 1 1 420px; font-weight: 700; font-size: clamp(17px, 2vw, 23px); }

/* --------------------------------------------------------------------------
   Artikel (wsc_blog)
   -------------------------------------------------------------------------- */
.ws-artikel__titel { font-size: clamp(30px, 5.2vw, 60px); line-height: 1; margin-bottom: 22px; max-width: 20ch; }
.ws-artikel__lede { font-size: clamp(15.5px, 1.5vw, 18.5px); line-height: 1.62; max-width: 60ch; margin-bottom: clamp(22px, 3vw, 32px); }
.ws-artikel__meta {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  border-top: 1px solid var(--ws-hair-blue);
  padding-top: 18px;
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-body);
}
/* Breed openingsbeeld: 16:7 met hairline, in duotone die langzaam ademt. */
.ws-artikel__beeld {
  border: 1px solid var(--ws-hair-blue);
  border-radius: 16px;
  overflow: hidden;
}
.ws-artikel__beeld img,
.ws-artikel__beeld .wsc-media__img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  animation: ws-duo 16s ease-in-out infinite;
}
.ws-artikel__beeld .wsc-media { border-radius: 0; box-shadow: none; }

/* Citaat in de artikeltekst: cyane lijn links, zoals in het ontwerp. */
.ws-page--artikel .ws-prose blockquote { border-left: 2px solid var(--ws-cyan); }

/* --------------------------------------------------------------------------
   Paginering
   -------------------------------------------------------------------------- */

/* Concrete zet "(huidige)" in de paginering als tekst voor schermlezers en
   verbergt die met Bootstrap-klassen. Dit thema laadt geen Bootstrap, dus die
   tekst stond zichtbaar in beeld. Hier alsnog verbergen — wél leesbaar voor
   hulpsoftware, niet zichtbaar op het scherm.

   De blok-CSS van wsc_blog styleert élke span in de paginering (0,3,1) — óók
   die verborgen tekst. Vandaar dat de selectors hieronder mee-scopen op
   .wsc-blog-pagination: anders wint die regel. */
.ws-theme .visually-hidden,
.ws-theme .sr-only,
.ws-theme .wsc-blog-pagination .pagination .visually-hidden,
.ws-theme .wsc-blog-pagination .pagination .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ws-theme .pagination,
.ws-theme .wsc-blog-pagination .pagination {
  display: flex; flex-wrap: wrap; gap: 2px;
  list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0;
  justify-content: center;
}
.ws-theme .page-item,
.ws-theme .wsc-blog-pagination .page-item { display: flex; }
.ws-theme .page-link,
.ws-theme .wsc-blog-pagination .pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center;
  /* Geen vaste hoogte: de streep hoort strak onder het cijfer te staan, niet
     onderaan een doos van 44px. De padding houdt het aanraakvlak ruim genoeg. */
  min-width: 40px;
  padding: 12px 12px 9px;
  font-family: var(--wsc-font-mono);
  font-size: 12px; letter-spacing: .1em;
  color: var(--ws-body);
  background: none;
  /* De module geeft elke paginalink een rand met radius 8px; dat maakt van de
     onderstreping een gekrulde boog. Rechte streep dus. */
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.ws-theme .page-link:hover,
.ws-theme .wsc-blog-pagination .pagination .page-link:hover { color: var(--ws-ink); border-bottom-color: var(--ws-blue-line); }
/* De huidige pagina: zwart cijfer met het cyane blokje eronder. */
.ws-theme .page-item.active .page-link,
.ws-theme .wsc-blog-pagination .pagination .page-item.active .page-link {
  color: var(--ws-ink);
  font-weight: 600;
  border-bottom-color: var(--ws-cyan);
}
.ws-theme .page-item.disabled .page-link,
.ws-theme .wsc-blog-pagination .pagination .page-item.disabled .page-link { color: var(--ws-hair-blue); }
.ws-theme .page-item.disabled .page-link:hover { border-bottom-color: transparent; }

/* ==========================================================================
   Mobiel — kalmer, gestapeld, nooit een horizontale scroll
   ========================================================================== */
@media (max-width: 900px) {
.ws-hero__text { padding-right: 0; }
}
@media (max-width: 600px) {
.ws-theme h1, .wsc-display { font-size: clamp(30px, 8.4vw, 40px); }
  .ws-theme h1.wsc-kop--lang, .wsc-display.wsc-kop--lang { font-size: clamp(26px, 7.2vw, 32px); }
  .ws-theme h1.wsc-kop--xl, .wsc-display.wsc-kop--xl { font-size: clamp(24px, 6.6vw, 29px); }
.ws-theme h2, .wsc-h2 { font-size: clamp(22px, 6.4vw, 30px); }
.ws-theme h3, .wsc-h3 { font-size: 18px; }
  .ws-theme h1, .ws-theme h2, .ws-theme h3,
.ws-row__title, .ws-case__name, .wsc-lead { overflow-wrap: break-word; }

  /* Knoppen onder elkaar in de volle breedte. De flex-basis van 200px geldt in
     een kolom voor de hoogte, dus die moet hier terug naar automatisch: anders
     wordt elke knop een blok van 200 pixels hoog. */
  /* De partnerbalk zet het kopje naast de logo's. Op een telefoon blijft er
     dan een smalle kolom over waar de namen doorheen breken; onder elkaar dus. */
  /* Staat de foto in het blok op verbergen, dan valt hij op een telefoon weg.
     Zo begint de pagina met de boodschap in plaats van met een beeld waar je
     eerst langs moet scrollen. */
  /* Alleen de foto, niet de hele kolom: de cijfers eronder staan in dezelfde
     kolom en dat is juist inhoud die een mobiele bezoeker wil zien. */
.ws-hero__media--mhide .ws-hero__photo { display: none; }
.ws-hero__media--mhide { padding-top: 0; }
.ws-hero__media--mhide .ws-stats { margin-top: 4px; }

  /* De twee heroknoppen naast elkaar: ze horen bij elkaar en zo blijft de
     inhoud eronder in beeld. */
.ws-hero .ws-btn-row { margin-bottom: 6px; }
.ws-hero .ws-btn-row { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.ws-hero .ws-btn-row > .ws-btn {
    flex: 1 1 0; width: auto; min-width: 0;
    padding-inline: 10px; font-size: 11px; letter-spacing: .06em;
  }

  /* Het contactblok onderaan: zonder foto op deze breedte (stand "verbergen"
     in het blok), en twee knoppen van gelijke breedte naast elkaar. Hogere
     specificiteit dan de module, want de stylesheet van het blok laadt na die
     van het thema. */
.ws-theme .wsc-cta--media .wsc-cta__actions,
.ws-theme .wsc-cta__actions {
    display: flex; flex-direction: row; align-items: stretch; gap: 10px;
    margin-top: 18px;
  }
.ws-theme .wsc-cta--media .wsc-cta__actions .wsc-btn,
.ws-theme .wsc-cta__actions .wsc-btn {
    flex: 1 1 0; width: auto; min-height: 54px;
    padding-inline: 8px; font-size: 11px; letter-spacing: .04em;
  }
.ws-theme .wsc-cta__btn-avatar { display: none; }

  /* De footer stapelde vier kolommen onder elkaar, samen bijna 500 pixels
     scrollen. Twee naast elkaar past prima op deze breedte. */
.ws-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
.ws-footer__cols ul { gap: 8px; }
.ws-footer__cols h3 { margin-bottom: 10px; }
.ws-footer a { font-size: 14px; }

.ws-partners { flex-direction: column; align-items: flex-start; gap: 10px; }
.ws-partners__items { flex: 1 0 100%; gap: 8px 20px; }

.ws-btn-row, .wsc-btn-row { flex-direction: column; align-items: stretch; }
.ws-btn-row > .ws-btn, .wsc-btn-row > .wsc-btn,
.ws-btn-row--grow > .ws-btn, .ws-btn-row--grow > .wsc-btn,
.wsc-hero__text .wsc-btn-row > .wsc-btn { flex: 0 0 auto; width: 100%; }

.ws-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ws-stat__value { font-size: 22px; }

  /* Eén ritme tussen de secties. De blokken brachten elk hun eigen marges mee,
     waardoor de afstand tussen twee secties varieerde van 49 tot 128 pixels.
     De sectie bepaalt de ruimte, de inhoud erbinnen niet meer. */
.ws-section, .wsc-section { padding-block: 34px; }
.ws-section > :first-child, .wsc-section > :first-child { margin-top: 0; }
.ws-section > :last-child, .wsc-section > :last-child { margin-bottom: 0; }
.ws-section-head { margin-bottom: 20px; }
  /* Een bovenschrift hoort bij de kop eronder; 30 pixels ertussen laat ze uit
     elkaar vallen op een smal scherm. */
.wsc-eyebrow + h2, .wsc-eyebrow + .wsc-h2,
.ws-eyebrow + h2, .ws-eyebrow + .wsc-h2 { margin-top: 10px; }

.ws-theme .ws-row { gap: 6px 16px; }
.ws-row__title { flex: 1 1 100%; min-width: 0; }
.ws-row__body { flex: 1 1 100%; min-width: 0; }

  /* Een opsomming leest als een genummerde lijst: het cijfer voor de zin, niet
     op een eigen regel erboven. Twee kolommen dus, met de tekst rechts. Staat er
     ook een kop, dan komt die boven de tekst in diezelfde rechterkolom. */
  /* Geldt voor elke rij met een nummer, of het nu een opsomming is of een lijst
     met links: het cijfer hoort voor de tekst en niet erboven. */
.ws-theme .ws-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px; row-gap: 4px;
    align-items: baseline;
  }
.ws-row__num { grid-column: 1; grid-row: 1; }
.ws-row__tag { grid-column: 1; grid-row: 1; }
.ws-row__title,
.ws-row__body { grid-column: 2; }

  /* Hetzelfde voor de stappen: het cijfer naast de kop in plaats van erboven.
     Dat scheelt een regel per stap en het leest als een genummerde stap in
     plaats van als een los cijfer met een titel eronder. */
.ws-cell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px; row-gap: 2px;
    align-items: baseline;
    padding: 18px clamp(16px, 4vw, 22px);
  }
  /* Het cijfer blijft groot: dat is wat de stap laat opvallen. De kop lijnt uit
     op de onderkant van het cijfer, dus ze staan samen op een regel. */
  /* Een korte regelhoogte op het cijfer, anders maakt zijn eigen regel het vak
     hoog en valt er een gat tussen de kop en de tekst eronder. */
.ws-cell__num { grid-column: 1; grid-row: 1; font-size: 40px; line-height: .8; }
.ws-cell > h3, .ws-cell > .ws-cell__title { grid-column: 2; grid-row: 1; margin: 0; font-size: 18px; }
.ws-cell > p, .ws-cell > .ws-cell__body { grid-column: 2; margin: 0; }

.ws-facts__k { flex: 1 1 100%; }
.ws-gallery__thumb { width: 78px; height: 52px; }
.ws-band { overflow-x: clip; }
}

/* Kenmerken op een detailpagina: twee kolommen met een cyaan vinkje ervoor,
   dezelfde vorm als de checklist elders in het ontwerp. */
.ws-kenmerken { list-style: none; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
.ws-kenmerken li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; }
.ws-kenmerken li::before { content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 4px; background: var(--ws-cyan);
  box-shadow: inset 0 0 0 2px var(--ws-cyan); }
.ws-kenmerken li::after { content: ""; position: absolute; left: 5px; top: 11px;
  width: 5px; height: 9px; border: solid var(--ws-ink); border-width: 0 2px 2px 0;
  transform: rotate(45deg); }
@media (max-width: 720px) { .ws-kenmerken { grid-template-columns: 1fr; } }

/* Een geüpload logo, zoals een partnerschap, is zelf al een beeldmerk. Dat
   hoort niet in een pil met een randje en ook niet ingekleurd: gewoon groot en
   zoals de leverancier hem heeft aangeleverd. */
.ws-badge--logo {
  background: none; border: 0; border-radius: 0; padding: 0;
  margin-top: clamp(24px, 3vw, 34px);
}
.ws-badge--logo .wsc-mark,
.ws-badge--logo .wsc-mark--img { width: auto; height: auto; background: none; filter: none; }
.ws-badge--logo img { max-height: clamp(84px, 9vw, 124px); width: auto; max-width: 100%; }

/* --------------------------------------------------------------------------
   Contactformulier: het formulier links, de gegevens in een smalle kolom
   rechts. Op een smal scherm komt de kolom onder het formulier.
   -------------------------------------------------------------------------- */
.ws-contact {
  --ws-contact-pad: clamp(22px, 2.6vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr);
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(18px, 2.2vw, 26px);
  align-items: start;
}
/* De kop loopt over beide kolommen; daaronder beginnen de inleiding links en
   de kaart rechts op dezelfde regel. */
.ws-contact__head { grid-column: 1 / -1; }
.ws-contact__head h2 { margin-bottom: 0; }
.ws-contact__lead { max-width: 52ch; margin-bottom: clamp(22px, 2.6vw, 32px); }
.ws-contact__card {
  background: var(--ws-blue-bg);
  border: 1px solid var(--ws-blue-line);
  border-radius: var(--ws-blokje);
  padding: var(--ws-contact-pad);
}
.ws-contact__line {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--ws-blue-line);
}
.ws-contact__card > .ws-contact__line:first-child { border-top: 0; padding-top: 0; }
.ws-theme a.ws-contact__line { color: var(--ws-ink); text-decoration: none; }
.ws-theme a.ws-contact__line:hover .ws-contact__v { color: var(--ws-blue); }
.ws-contact__k {
  display: block;
  font-family: var(--wsc-font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ws-body);
  margin-bottom: 4px;
}
.ws-contact__v {
  display: block;
  font-family: var(--wsc-font-head);
  font-size: 17px; font-weight: 600; line-height: 1.45;
  color: var(--ws-ink);
  transition: color .18s ease;
}
.ws-contact__note {
  margin-top: 18px;
  padding-left: 18px;
  border-left: 2px solid var(--ws-cyan);
}
.ws-contact__note p { font-size: 15px; color: var(--ws-body); margin: 0; }

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