/* ==========================================================================
   Carrière Makelaar — aanvulling op de bestaande site

   Dit bestand doet precies vijf dingen op de huidige homepage:

     1. de hero overzetten naar de nieuwe opzet, met de zoekbalk erin
     2. de cijferbalk in de nieuwe stijl
     3. de donkere kleur van de footer als enige donkere achtergrond
     4. het trapje: bij subtags, bij knop-hover en bij de menu-knop
     5. alle knoppen even groot, in dezelfde stijl en hetzelfde lettertype

   Verder wordt er niets aangeraakt. Geen nieuwe secties, geen andere
   kleuren, geen andere teksten.
   ========================================================================== */

:root {
  --cm-gold: #E8A830;
  --cm-gold-dark: #D4960A;
  --cm-gold-light: #F5C55A;
  --cm-gold-pale: #FFF5E0;
  --cm-cream: #FFFBF5;
  --cm-dark: #1a1a1a;
  --cm-ink: #1a1a1a;
  --cm-muted: #6E6659;
  --cm-line: rgba(26, 26, 26, 0.10);

  --cm-fast: 160ms;
  --cm-base: 280ms;
  --cm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Eén maat voor alle knoppen. */
  --cm-knop-h: 56px;
  --cm-knop-px: 36px;
  --cm-knop-r: 999px;
}

/* ==========================================================================
   1. ALLE KNOPPEN GELIJK

   Dezelfde hoogte, dezelfde horizontale ruimte, dezelfde ronde vorm en
   hetzelfde lettertype. De primaire knop is goud, de secundaire is een
   lijn. Op een donkere achtergrond wordt de lijn wit.
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-secondary-dark,
.btn-gold-outline,
.nav-cta,
.cm-zoek-knop,
a.btn-primary,
button.btn-primary,
input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: var(--cm-knop-h) !important;
  min-height: var(--cm-knop-h) !important;
  padding: 0 var(--cm-knop-px) !important;
  border-radius: var(--cm-knop-r) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: transform var(--cm-fast) var(--cm-ease),
              background var(--cm-fast) var(--cm-ease),
              border-color var(--cm-fast) var(--cm-ease),
              color var(--cm-fast) var(--cm-ease) !important;
  box-shadow: none !important;
}

/* De primaire knop: goud met donkere tekst. */
.btn-primary,
.nav-cta,
.cm-zoek-knop,
a.btn-primary,
button.btn-primary,
input[type="submit"] {
  background: var(--cm-gold) !important;
  background-image: none !important;
  color: var(--cm-dark) !important;
  border: 0 !important;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible,
.cm-zoek-knop:hover,
.cm-zoek-knop:focus-visible,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--cm-gold-dark) !important;
  background-image: none !important;
  color: var(--cm-dark) !important;
  transform: translateY(-2px) !important;
}

/* De secundaire knop: een dunne lijn, geen vulling. */
.btn-secondary,
.btn-secondary-dark,
.btn-gold-outline {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--cm-line) !important;
  color: var(--cm-dark) !important;
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary-dark:hover,
.btn-secondary-dark:focus-visible,
.btn-gold-outline:hover,
.btn-gold-outline:focus-visible {
  border-color: var(--cm-gold) !important;
  color: var(--cm-gold) !important;
  background: transparent !important;
  transform: translateY(-2px) !important;
}

/* Op een donkere achtergrond: witte lijn en witte tekst. */
.hero .btn-secondary,
.cm-home .hero .btn-secondary-dark,
.cm-home .hero .btn-gold-outline,
.cta-section .btn-secondary,
.cta-section .btn-secondary-dark,
.cta-section .btn-gold-outline,
footer .btn-secondary,
footer .btn-secondary-dark,
footer .btn-gold-outline,
.cm-donker .btn-secondary {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
}

.cm-home .hero .btn-secondary:hover,
.cm-home .hero .btn-secondary:focus-visible,
.cta-section .btn-secondary:hover,
.cta-section .btn-secondary:focus-visible,
footer .btn-secondary:hover,
footer .btn-secondary:focus-visible,
footer .btn-gold-outline:hover {
  border-color: var(--cm-gold) !important;
  color: var(--cm-gold) !important;
}

/* De tekst en het pijltje in de knop erven de knopkleur. */
.btn-primary span,
.btn-primary svg,
.btn-secondary span,
.btn-secondary svg,
.nav-cta span,
.cm-zoek-knop span {
  color: inherit !important;
}

.btn-primary svg,
.btn-secondary svg {
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.btn-primary:hover svg,
.btn-secondary:hover svg {
  transform: translateX(3px) !important;
}

/* De menu-knop is precies even hoog als de andere knoppen. De navigatie is
   hoog genoeg om dat te dragen. */
.nav-cta {
  height: var(--cm-knop-h) !important;
  min-height: var(--cm-knop-h) !important;
  padding: 0 28px !important;
}

/* De zoekknop in de hero is even hoog als de invoervelden ernaast. */
.cm-zoek-knop {
  height: 49px !important;
  min-height: 49px !important;
  padding: 0 28px !important;
}

/* ==========================================================================
   2. HET TRAPJE BIJ HOVER OP DE KNOPPEN

   Onder de knop komt bij hover een dun trapje van drie treden te staan dat
   van links naar rechts aangroeit. Op goud wordt het donker, op een donkere
   achtergrond wit.
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-secondary-dark,
.btn-gold-outline,
.nav-cta {
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary::after,
.btn-secondary::after,
.btn-secondary-dark::after,
.btn-gold-outline::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  width: 100% !important;
  background:
    linear-gradient(90deg,
      var(--cm-dark) 0 30%,
      transparent 30% 34%,
      var(--cm-dark) 34% 67%,
      transparent 67% 71%,
      var(--cm-dark) 71% 100%) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform var(--cm-base) var(--cm-ease) !important;
  pointer-events: none !important;
}

.btn-secondary::after,
.btn-secondary-dark::after,
.btn-gold-outline::after {
  background:
    linear-gradient(90deg,
      var(--cm-gold) 0 30%,
      transparent 30% 34%,
      var(--cm-gold) 34% 67%,
      transparent 67% 71%,
      var(--cm-gold) 71% 100%) !important;
}

/* Op een donkere achtergrond wordt het trapje wit. */
.hero .btn-primary::after,
.cta-section .btn-primary::after,
footer .btn-primary::after {
  background:
    linear-gradient(90deg,
      #fff 0 30%,
      transparent 30% 34%,
      #fff 34% 67%,
      transparent 67% 71%,
      #fff 71% 100%) !important;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-secondary:hover::after,
.btn-secondary:focus-visible::after,
.btn-secondary-dark:hover::after,
.btn-secondary-dark:focus-visible::after,
.btn-gold-outline:hover::after,
.btn-gold-outline:focus-visible::after {
  transform: scaleX(1) !important;
}

/* De menu-knop: het trapje komt klein en gecentreerd onder de knop. */
.nav-cta::after {
  width: 22px !important;
  left: 50% !important;
  bottom: 5px !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  background:
    linear-gradient(90deg,
      var(--cm-dark) 0 6px,
      transparent 6px 8px,
      var(--cm-dark) 8px 14px,
      transparent 14px 16px,
      var(--cm-dark) 16px 22px) !important;
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* ==========================================================================
   3. HET TRAPJE VOOR DE SUBTAGS

   Elk klein label boven een kop krijgt drie oplopende blokjes in plaats van
   een streep. Datzelfde motief zit ook in de hero, in de zoekbalk en in de
   footerkoppen.
   ========================================================================== */

.section-label,
.section-label-center,
.cm-home .hero-label,
.page-hero-label,
.footer-col h4,
.footer-brand h4 {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: var(--cm-gold) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Gecentreerde labels houden hun tekst in het midden. */
.section-label-center {
  justify-content: center !important;
}

.section-label::before,
.section-label-center::before,
.hero-label::before,
.page-hero-label::before,
.footer-col h4::before,
.footer-brand h4::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 11px !important;
  background:
    linear-gradient(90deg,
      currentColor 0 4px,
      transparent 4px 6px,
      currentColor 6px 12px,
      transparent 12px 14px,
      currentColor 14px 20px) !important;
  background-size: 100% 8px !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
  opacity: 0.9 !important;
  position: static !important;
  transform: none !important;
}

/* De oude losse streepjes mogen niet meer verschijnen. */
.section-label::after,
.section-label-center::after,
.hero-label::after,
.footer-col h4::after,
.footer-brand h4::after {
  display: none !important;
  content: none !important;
}

/* Footerkoppen staan op een donkere achtergrond. */
.footer-col h4,
.footer-brand h4 {
  padding-bottom: 14px !important;
}

/* Het label in de hero staat links uitgelijnd. */
.hero-label {
  justify-content: flex-start !important;
  margin-bottom: 22px !important;
}

/* ==========================================================================
   4. DE CIJFERBALK

   Witte strook, donkere cijfers, en tussen de kolommen een dun trapje in
   plaats van een gewoon streepje.
   ========================================================================== */

.stats-bar {
  background: #fff !important;
  background-image: none !important;
  border-top: 1px solid var(--cm-line) !important;
  border-bottom: 1px solid var(--cm-line) !important;
  padding: 56px 40px !important;
}

.stats-bar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.stat-item {
  position: relative !important;
  text-align: center !important;
  padding: 0 24px !important;
}

/* Het oude verticale streepje eruit, het trapje ervoor in de plaats. */
.stat-item + .stat-item::after {
  display: none !important;
  content: none !important;
}

/* Een echt trapje tussen de cijfers: drie blokjes die oplopen van links
   naar rechts. Drie aparte achtergrondlagen, alle drie op de onderlijn
   gezet, met een eigen hoogte. Zo is het precies een trap van drie treden
   en kan niets met de bestaande stijlen in conflict komen. */
.stat-item + .stat-item::before {
  content: "" !important;
  position: absolute !important;
  left: -6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 30px !important;
  background-image:
    linear-gradient(var(--cm-gold), var(--cm-gold)),
    linear-gradient(var(--cm-gold-dark), var(--cm-gold-dark)),
    linear-gradient(rgba(26, 26, 26, 0.50), rgba(26, 26, 26, 0.50)) !important;
  background-repeat: no-repeat !important;
  background-size: 3px 12px, 3px 21px, 3px 30px !important;
  background-position: 0 100%, 4.5px 100%, 9px 100% !important;
  border-radius: 1px !important;
  z-index: 0 !important;
}

/* De cijfers en labels staan boven het trapje, nooit eronderdoor. */
.stat-number,
.stat-label {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   5. DE HERO

   De foto en de overlay eruit, één donkere kleur: precies dezelfde als de
   footer. De zoekbalk staat erin, het schuifje eronder in een eigen strook.
   ========================================================================== */

.hero.cm-home {
  position: relative !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: flex-start !important;
  background: var(--cm-dark) !important;
  background-image: none !important;
  overflow: hidden !important;
}

/* De fotolaag en de overlay met gloed gaan eruit. */
/* De fotolaag van de homepage-hero. Op de andere pagina's blijft de foto
   staan: die hoort daar bij het ontwerp. */
.cm-home .hero-bg,
.cm-home .hero-overlay {
  display: none !important;
  background-image: none !important;
}

/* Het label, de pijl en de cijfers onderin gaan eruit. */
.cm-home .hero-scroll {
  display: none !important;
}

.cm-home .cm-home .hero-trust {
  display: none !important;
}

.cm-home .hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: clamp(150px, 24vh, 250px) 40px 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

.cm-home .hero-text {
  width: 100% !important;
  max-width: 820px !important;
}

.cm-home .hero-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(42px, 5.4vw, 72px) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.06 !important;
  margin: 0 0 24px 0 !important;
}

.cm-home .hero-title em {
  color: var(--cm-gold) !important;
  font-style: normal !important;
}

.cm-home .hero-sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 620px !important;
  margin: 0 0 40px 0 !important;
}

.cm-home .hero-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin: 0 0 0 0 !important;
}

@media (max-width: 900px) {
  .cm-home .hero-content {
    padding: 134px 24px 56px !important;
  }
  .cm-home .hero-title {
    font-size: clamp(34px, 8vw, 50px) !important;
  }
  .cm-home .hero-sub {
    font-size: 16px !important;
  }
  .cm-home .hero-actions {
    width: 100% !important;
  }
  .cm-home .hero-actions .btn-primary,
  .cm-home .hero-actions .btn-secondary {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 520px) {
  .cm-home .hero-content {
    padding: 132px 20px 48px !important;
  }
  .cm-home .hero-actions {
    flex-direction: column !important;
  }
  .cm-home .hero-actions .btn-primary,
  .cm-home .hero-actions .btn-secondary {
    width: 100% !important;
  }
}

/* ==========================================================================
   6. DE ZOEKBALK IN DE HERO
   ========================================================================== */

.cm-zoek-in-hero {
  width: 100% !important;
  max-width: 1000px !important;
  margin: 44px 0 0 0 !important;
}

.cm-zoek {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) max-content !important;
  gap: 12px !important;
  align-items: end !important;
}

.cm-zoek-veld {
  display: block !important;
  min-width: 0 !important;
}

.cm-zoek-label {
  display: block !important;
  position: relative !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--cm-gold) !important;
  margin-bottom: 8px !important;
  padding-left: 26px !important;
}

.cm-zoek-label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 18px !important;
  height: 11px !important;
  transform: translateY(-50%) !important;
  background:
    linear-gradient(90deg,
      currentColor 0 4px,
      transparent 4px 6px,
      currentColor 6px 12px,
      transparent 12px 14px,
      currentColor 14px 18px) !important;
  background-size: 100% 8px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  opacity: 0.9 !important;
}

.cm-zoek-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  height: 49px !important;
  box-sizing: border-box !important;
  transition: border-color var(--cm-fast) var(--cm-ease),
              background var(--cm-fast) var(--cm-ease) !important;
}

.cm-zoek-input-wrap:focus-within {
  border-color: var(--cm-gold) !important;
  background: rgba(255, 255, 255, 0.11) !important;
}

.cm-zoek-input-wrap .cm-icoon {
  color: var(--cm-gold) !important;
  flex: 0 0 auto !important;
}

.cm-zoek-input-wrap input,
.cm-zoek-input-wrap select {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 0 !important;
  appearance: none !important;
}

.cm-zoek-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.48) !important;
}

.cm-zoek-input-wrap select option {
  color: #1a1a1a !important;
}

@media (max-width: 1000px) {
  .cm-zoek {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .cm-zoek-knop {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

@media (max-width: 620px) {
  .cm-zoek {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .cm-zoek-in-hero {
    margin-top: 34px !important;
  }
  .cm-zoek-input-wrap input,
  .cm-zoek-input-wrap select {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   7. DE STROOK MET HET SCHUIFJE, ONDER DE HERO
   ========================================================================== */

.cm-alert-strook {
  background: var(--cm-cream) !important;
  border-bottom: 1px solid var(--cm-line) !important;
  padding: 24px 40px !important;
}

.cm-alert-strook-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.cm-alert-schakelaar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: none !important;
  border: 0 !important;
  padding: 6px 0 !important;
  cursor: pointer !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--cm-dark) !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

.cm-schakelaar {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: rgba(26, 26, 26, 0.18) !important;
  transition: background var(--cm-fast) ease !important;
}

.cm-schakelaar::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
  transition: transform var(--cm-fast) ease !important;
}

.cm-alert-schakelaar[aria-checked="true"] .cm-schakelaar {
  background: var(--cm-gold) !important;
}

.cm-alert-schakelaar[aria-checked="true"] .cm-schakelaar::after {
  transform: translateX(20px) !important;
}

.cm-alert-schakelaar:hover .cm-alert-tekst {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

.cm-alert-schakelaar:focus-visible {
  outline: 2px solid var(--cm-gold) !important;
  outline-offset: 4px !important;
  border-radius: 6px !important;
}

.cm-alert-tekst {
  display: inline-block !important;
}

@media (max-width: 700px) {
  .cm-alert-strook {
    padding: 20px 20px !important;
  }
  .cm-alert-schakelaar {
    font-size: 14px !important;
    gap: 12px !important;
  }
  .cm-schakelaar {
    width: 42px !important;
    height: 24px !important;
  }
  .cm-schakelaar::after {
    width: 18px !important;
    height: 18px !important;
  }
  .cm-alert-schakelaar[aria-checked="true"] .cm-schakelaar::after {
    transform: translateX(18px) !important;
  }
}

/* ==========================================================================
   8. DE POP-UP VAN DE VACATURE-ALERT

   De pop-up werd met showModal() geopend en dat zet hem met de
   browser-standaard: linksboven, met een dikke zwarte rand en een eigen
   donkere waas. Dat willen we niet. Daarom zetten we de positionering
   volledig zelf: netjes in het midden van het scherm, zonder waas, zonder
   rand, met een rustige witte kaart.

   De pop-up wordt geopend als een gewoon element (niet als modal), dus
   we zetten hem hier helemaal zelf neer.
   ========================================================================== */

.cm-alert-dialoog {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  z-index: 9999 !important;
  display: none !important;
  box-shadow: none !important;
}

/* De dialoog zelf mag geen eigen achtergrond of rand tekenen. */
.cm-alert-dialoog::backdrop {
  background: transparent !important;
  border: 0 !important;
}

.cm-alert-dialoog[open],
.cm-alert-dialoog.is-open {
  display: block !important;
}

/* De kaart staat in het midden van het scherm, zonder waas eromheen. */
.cm-alert-venster {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(620px, calc(100vw - 48px)) !important;
  max-height: min(720px, calc(100vh - 48px)) !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 18px !important;
  padding: 0 0 24px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28) !important;
  box-sizing: border-box !important;
}

/* De voortgangsbalk bovenin. */
.cm-alert-balk {
  display: flex !important;
  gap: 4px !important;
  padding: 0 !important;
  background: rgba(26, 26, 26, 0.07) !important;
  border-radius: 18px 18px 0 0 !important;
  overflow: hidden !important;
}

.cm-alert-balk span {
  flex: 1 !important;
  height: 4px !important;
  background: transparent !important;
  transition: background var(--cm-base) var(--cm-ease) !important;
}

.cm-alert-balk span.is-actief,
.cm-alert-balk span.is-klaar {
  background: var(--cm-gold) !important;
}

.cm-alert-sluiten {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: var(--cm-muted) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transition: background var(--cm-fast) ease, color var(--cm-fast) ease !important;
}

.cm-alert-sluiten:hover {
  background: rgba(26, 26, 26, 0.06) !important;
  color: var(--cm-ink) !important;
}

.cm-alert-stapdeel {
  display: none !important;
  padding: 32px 32px 0 !important;
}

.cm-alert-stapdeel.is-actief {
  display: block !important;
}

.cm-alert-titel {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--cm-ink) !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 34px !important;
}

.cm-alert-nr {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--cm-gold) !important;
  color: var(--cm-dark) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.cm-alert-uitleg {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--cm-muted) !important;
  margin: 0 0 18px 36px !important;
}

.cm-alert-lijst {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-bottom: 4px !important;
}

.cm-alert-lijst--twee {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 2px 18px !important;
}

.cm-alert-rij {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  color: var(--cm-ink) !important;
  transition: background var(--cm-fast) ease !important;
  position: relative !important;
}

.cm-alert-rij:hover {
  background: rgba(232, 168, 48, 0.09) !important;
}

.cm-alert-rij input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
}

.cm-alert-vink {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  border: 1.5px solid rgba(26, 26, 26, 0.22) !important;
  border-radius: 6px !important;
  position: relative !important;
  transition: background var(--cm-fast) ease, border-color var(--cm-fast) ease !important;
}

.cm-alert-rij input:checked + .cm-alert-vink {
  background: var(--cm-gold) !important;
  border-color: var(--cm-gold) !important;
}

.cm-alert-rij input:checked + .cm-alert-vink::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 3px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid var(--cm-dark) !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.cm-alert-rij input:focus-visible + .cm-alert-vink {
  outline: 2px solid var(--cm-gold) !important;
  outline-offset: 2px !important;
}

.cm-alert-aantal {
  margin-left: auto !important;
  font-size: 13px !important;
  color: var(--cm-muted) !important;
  white-space: nowrap !important;
}

.cm-alert-veld {
  display: block !important;
  margin-bottom: 14px !important;
}

.cm-alert-veld span {
  display: block !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--cm-muted) !important;
  margin-bottom: 6px !important;
}

.cm-alert-veld input {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--cm-line) !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  color: var(--cm-ink) !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

.cm-alert-veld input:focus {
  outline: 0 !important;
  border-color: var(--cm-gold) !important;
}

.cm-alert-melding {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: #B3261E !important;
  margin: 0 !important;
  padding: 0 32px !important;
  min-height: 0 !important;
}

.cm-alert-melding:not(:empty) {
  padding-top: 16px !important;
}

.cm-alert-knoppen {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 32px 0 !important;
  border-top: 1px solid var(--cm-line) !important;
  margin-top: 22px !important;
}

.cm-alert-terug,
.cm-alert-verder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  padding: 0 30px !important;
  border-radius: 999px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 0 !important;
}

.cm-alert-terug {
  background: transparent !important;
  border: 1.5px solid var(--cm-line) !important;
  color: var(--cm-ink) !important;
}

.cm-alert-terug:hover {
  border-color: var(--cm-gold) !important;
  color: var(--cm-gold) !important;
}

.cm-alert-verder {
  background: var(--cm-gold) !important;
  color: var(--cm-dark) !important;
  margin-left: auto !important;
}

.cm-alert-verder:hover {
  background: var(--cm-gold-dark) !important;
}

.cm-alert-verder:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.cm-alert-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 620px) {
  .cm-alert-venster {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 64px) !important;
    border-radius: 16px !important;
  }
  .cm-alert-stapdeel {
    padding: 28px 20px 0 !important;
  }
  .cm-alert-uitleg {
    margin-left: 0 !important;
  }
  .cm-alert-lijst--twee {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cm-alert-knoppen {
    padding: 18px 20px 0 !important;
  }
  .cm-alert-terug,
  .cm-alert-verder {
    padding: 0 20px !important;
    flex: 1 !important;
  }
}

/* ==========================================================================
   9. DE SECTIES DIE SCHEEF STONDEN

   De klantverhaal-sectie had 140px boven en 20px onder, de CTA 170px boven
   en 50px onder. Dat scheve beeld kwam uit de bestaande css. Hier krijgen ze
   dezelfde maat boven en onder.
   ========================================================================== */

.klantverhaal-section {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.cta-section {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

/* De proces-sectie en de sectoren hadden hun ruimte op de verkeerde laag
   staan. Ook die trekken we gelijk. */
.process-section,
.sectors-bg,
.klantverhaal-section,
.cta-section {
  box-sizing: border-box !important;
}

/* De secties zelf dragen de ruimte. */
.process-section,
.sectors-bg {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

/* Het binnenblok alleen horizontaal. */
.process-section > .section,
.sectors-bg > .section,
.klantverhaal-section > .section,
.cta-section > .section,
.cta-section > .cta-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* De losse binnenblokken van de proces-sectie en de sectoren hadden eigen
   verticale ruimte, waardoor het leek of er een gat zat. */
.process-section .reveal,
.sectors-bg .reveal,
.klantverhaal-section .reveal,
.cta-section .reveal {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  .klantverhaal-section,
  .cta-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 760px) {
  .process-section,
  .sectors-bg {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ==========================================================================
   10. DE INHOUD IS DIRECT ZICHTBAAR

   De bestaande site laat blokken binnenkomen bij scrollen. In deze preview
   zetten we dat uit: de inhoud staat er meteen, zodat je precies ziet hoe
   de verhoudingen zijn. Ook voorkomt het dat een blok halverwege de
   animatie blijft hangen.
   ========================================================================== */

/* De reveal-blokken blijven werken zoals op de live site. */

/* De raster-animaties blijven werken: het script in de pagina zet de
   .stagger-rasters op 'visible' zodra ze in beeld komen. */

/* ==========================================================================
   11. OP MOBIEL MOET DE ZOEKBALK HELEMAAL IN BEELD PASSEN

   De hero was op een telefoon zo hoog dat de zoekknop onder de schermrand
   viel. De hero krijgt daarom op mobiel geen volle schermhoogte, en de
   ruimte boven en tussen de blokken gaat omlaag.
   ========================================================================== */

@media (max-width: 900px) {
  .hero.cm-home {
    min-height: 0 !important;
  }
  /* De header is 121px hoog op mobiel. De inhoud begint daaronder,
     anders valt de eerste regel van de kop erachter. */
  .cm-home .hero-content {
    padding: 134px 24px 48px !important;
  }
  .cm-home .hero-sub {
    margin-bottom: 28px !important;
  }
  .cm-zoek-in-hero {
    margin-top: 32px !important;
  }
}

@media (max-width: 620px) {
  .cm-home .hero-content {
    padding: 132px 20px 36px !important;
  }
  .cm-home .hero-label {
    margin-bottom: 16px !important;
  }
  .cm-home .hero-title {
    font-size: clamp(30px, 8vw, 40px) !important;
    margin-bottom: 14px !important;
  }
  .cm-home .hero-sub {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
  .cm-home .hero-actions {
    gap: 10px !important;
    margin-bottom: 0 !important;
  }
  .cm-home .hero-actions .btn-primary,
  .cm-home .hero-actions .btn-secondary {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 14px !important;
  }
  .cm-zoek-in-hero {
    margin-top: 26px !important;
  }
  .cm-zoek {
    gap: 11px !important;
  }
  .cm-zoek-input-wrap {
    height: 46px !important;
  }
  .cm-zoek-knop {
    height: 46px !important;
    min-height: 46px !important;
  }
  .cm-zoek-label {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
}

/* De teller-animatie mag de waarde niet halverwege laten staan: het cijfer
   staat er direct en blijft staan. De animatie is een nice-to-have, geen
   voorwaarde om de waarde te kunnen lezen. */
.stat-number[data-eind]::after {
  content: "" !important;
}

/* ==========================================================================
   12. DE CIJFERBALK

   Zoals in de vorige preview: een donkere strook direct onder de hero, met
   de cijfers in het goud en de labels eronder in zacht wit. Tussen de
   kolommen een dun verticaal streepje.
   ========================================================================== */

.stats-bar {
  background: var(--cm-dark) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 56px 40px !important;
  margin: 0 !important;
}

.stats-bar-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.stat-item {
  position: relative !important;
  text-align: center !important;
  padding: 8px 24px !important;
  min-width: 0 !important;
}

/* Het streepje tussen de kolommen, zacht zodat het rustig blijft. */
.stat-item:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 20% !important;
  height: 60% !important;
  width: 1px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  display: block !important;
}

.stat-number {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(40px, 4.6vw, 58px) !important;
  font-weight: 700 !important;
  color: var(--cm-gold) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 10px 0 !important;
  white-space: nowrap !important;
  height: auto !important;
}

.stat-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 900px) {
  .stats-bar {
    padding: 44px 20px !important;
  }
  .stats-bar-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 0 !important;
  }
  .stat-item {
    padding: 4px 12px !important;
  }
  .stat-item:nth-child(2)::after {
    display: none !important;
  }
  .stat-number {
    font-size: clamp(32px, 8vw, 46px) !important;
  }
}

@media (max-width: 520px) {
  .stats-bar-inner {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .stat-item::after {
    display: none !important;
  }
}

/* ==========================================================================
   13. DE HOVER IN DE HEADER

   Precies zoals in de vorige preview: het menu-item krijgt bij hover en bij
   het actieve item een trapje van drie gelijke segmenten over de VOLLE
   breedte van het woord, dat van links naar rechts aangroeit. De kleur wordt
   goud.
   ========================================================================== */

.nav-links a {
  position: relative !important;
  color: var(--cm-dark) !important;
  transition: color var(--cm-fast) var(--cm-ease) !important;
}

.nav-links a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: -6px !important;
  width: 100% !important;
  height: 3px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg,
      var(--cm-gold) 0 33%,
      transparent 33% 37%,
      var(--cm-gold-dark) 37% 66%,
      transparent 66% 70%,
      var(--cm-dark) 70% 100%) !important;
  opacity: 1 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--cm-gold-dark) !important;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1) !important;
}

/* De Contact-knop in de navigatie: dezelfde hover als de andere knoppen,
   dus het trapje onderaan de knop zelf. Het menu-streepje komt daar niet
   nog eens overheen. */
.nav-cta::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 5px !important;
  width: 22px !important;
  height: 2px !important;
  opacity: 1 !important;
  transform: translateX(-50%) scaleX(0) !important;
  transform-origin: center !important;
  background:
    linear-gradient(90deg,
      var(--cm-dark) 0 6px,
      transparent 6px 8px,
      var(--cm-dark) 8px 14px,
      transparent 14px 16px,
      var(--cm-dark) 16px 22px) !important;
  background-repeat: no-repeat !important;
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--cm-gold-dark) !important;
  transform: translateY(-2px) !important;
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* Het logo licht zacht op. */
.logo img {
  transition: opacity var(--cm-fast) var(--cm-ease) !important;
}

.logo:hover img {
  opacity: 0.78 !important;
}

/* ==========================================================================
   14. DE HOVER IN DE FOOTER

   Zoals in de vorige preview: de link kleurt goud, schuift 4px op, en er
   groeit een dun gouden onderlijntje mee van links naar rechts.
   ========================================================================== */

.footer-col ul li a,
.footer-links a,
.footer a {
  position: relative !important;
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: color var(--cm-fast) var(--cm-ease),
              transform var(--cm-base) var(--cm-ease) !important;
}

.footer-col ul li a::after,
.footer-links a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -2px !important;
  height: 1px !important;
  width: 0 !important;
  background: var(--cm-gold) !important;
  transition: width var(--cm-base) var(--cm-ease) !important;
  border-radius: 0 !important;
}

.footer-col ul li a:hover,
.footer-col ul li a:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--cm-gold) !important;
  transform: translateX(4px) !important;
}

.footer-col ul li a:hover::after,
.footer-col ul li a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  width: 100% !important;
}

/* De sociale knoppen onderin. */

/* ==========================================================================
   15. DE KLANTVERHAAL-SECTIE DONKER

   Als afwisseling tussen de lichte secties. Dezelfde donkere kleur als de
   hero, de CTA en de footer.
   ========================================================================== */

.klantverhaal-section {
  background: var(--cm-dark) !important;
  background-image: none !important;
}

/* Alle tekst in die sectie moet licht worden, anders is het onleesbaar. */
.klantverhaal-section .section-label {
  color: var(--cm-gold) !important;
}

.klantverhaal-section .section-title {
  color: #fff !important;
}

.klantverhaal-section .section-title em {
  color: var(--cm-gold) !important;
}

.klantverhaal-section p {
  color: rgba(255, 255, 255, 0.74) !important;
}

.klantverhaal-section strong {
  color: #fff !important;
}

/* De naam en de functie onder de quote. */
.klantverhaal-section .klantverhaal-inner > div > div > div[style*="color:var(--dark)"],
.klantverhaal-section .klantverhaal-inner > div > div > div[style*="font-weight:700"] {
  color: #fff !important;
}

.klantverhaal-section .klantverhaal-inner > div > div > div[style*="color:var(--muted)"] {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* De naam en de rol bij het klantverhaal. De naam in wit, de rol zachter.
   De foto is een gewone rechthoekige uitsnede zonder cirkel of rand. */
.klantverhaal-persoon {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
}

.klantverhaal-persoon img {
  width: 104px !important;
  height: 104px !important;
  flex: 0 0 auto !important;
  border-radius: 12px !important;
  border: 0 !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}

.klantverhaal-naam {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 3px !important;
}

.klantverhaal-rol {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

@media (max-width: 620px) {
  .klantverhaal-persoon img {
    width: 84px !important;
    height: 84px !important;
  }
  .klantverhaal-naam {
    font-size: 15px !important;
  }
}

/* De videokaart krijgt een rustige schaduw op donker. */
.klantverhaal-section .klantverhaal-video {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
}

/* De ondertitel boven de cijfers had zijn eigen onderruimte, die stapelde
   met de marge van het cijferblok. De ruimte komt nu van één kant. */
#forwho .section-sub,
section .section-sub[style*="Van het vinden"] {
  margin-bottom: 0 !important;
}

/* De kaarten onder de cijfers krijgen dezelfde tussenruimte als de cijfers
   boven. */
.forwho-grid {
  margin-top: 36px !important;
}

/* Het eerste cijfer krijgt geen trapje ervoor, en er komt er ook geen
   onder te staan: alleen TUSSEN de kolommen. */
.stat-item:first-child::before,
.stat-item:last-child::after {
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   16. DE HOVER-EFFECTEN OP DE KAARTEN

   Zoals in de vorige preview: de kaarten komen omhoog bij hover, de foto
   erin zoomt zacht mee, en de pijl bij een link schuift op. Rustig, geen
   gloed en geen zware schaduw.
   ========================================================================== */

/* De kaarten 'voor wie werken wij'. */
.forwho-card {
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.forwho-card img {
  transition: transform var(--cm-slow, 600ms) var(--cm-ease) !important;
}

.forwho-card:hover {
  transform: translateY(-8px) !important;
}

.forwho-card:hover img {
  transform: scale(1.04) !important;
}

/* De sectorenkaarten. */
.sector-card {
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.sector-card:hover {
  transform: translateY(-10px) !important;
}

.sector-card .sector-photo img,
.sector-card img {
  transition: transform 600ms var(--cm-ease) !important;
}

.sector-card:hover .sector-photo img,
.sector-card:hover img {
  transform: scale(1.06) !important;
}

/* De pijl bij 'Bekijk alle rollen' schuift op en wordt goud. */
.sector-link,
.role-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: gap var(--cm-base) var(--cm-ease), color var(--cm-fast) var(--cm-ease) !important;
}

.sector-link:hover,
.role-link:hover {
  gap: 14px !important;
}

/* De stapkaarten in de proces-sectie. */
.process-step {
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.process-step:hover {
  transform: translateY(-6px) !important;
}

/* De kaarten in de klantverhaal-sectie. */
.testi-card {
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.testi-card:hover {
  transform: translateY(-6px) !important;
}

/* De badges en tags lichten zacht op. */
.role-tag,
.sector-badge,
.forwho-badge {
  transition: background var(--cm-fast) var(--cm-ease), color var(--cm-fast) var(--cm-ease) !important;
}

.sector-card:hover .role-tag {
  background: var(--cm-gold-light) !important;
}

/* De grote knop in de klantverhaal-sectie. */
.klantverhaal-section .btn-primary {
  transition: transform var(--cm-fast) var(--cm-ease),
              background var(--cm-fast) var(--cm-ease) !important;
}

.klantverhaal-section .btn-primary:hover {
  transform: translateY(-2px) !important;
  background: var(--cm-gold-dark) !important;
}

/* De videokaart in de klantverhaal-sectie. */
.klantverhaal-video {
  transition: transform var(--cm-base) var(--cm-ease) !important;
}

.klantverhaal-video:hover {
  transform: translateY(-4px) !important;
}

/* Op mobiel geen verschuivende kaarten: dat voelt daar onrustig. */
@media (max-width: 760px) {
  .forwho-card:hover,
  .sector-card:hover,
  .process-step:hover,
  .testi-card:hover,
  .klantverhaal-video:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   17. DE SECTORENKAARTEN: GEEN WITTE WAAS, GEEN BIM MODELEUR

   De foto's hadden een witte gradient over de onderkant (van transparant
   naar bijna wit) en een wit badge in de hoek. Dat maakt de foto's melk
   en dat wil Anne-Marit niet. De foto's blijven vol en helder, met een
   dunne donkere rand onderaan voor de leesbaarheid van de tekst eronder.
   ========================================================================== */

/* De witte waas over de foto's weg. */
.sector-photo-overlay {
  display: none !important;
  background: none !important;
}

/* Het badge met de vakgebiednaam: niet meer als witte pil. */
.sector-photo-badge {
  background: var(--cm-dark) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* De foto's zelf: vol en helder, geen filter. */
.sector-photo img,
.sector-card img {
  filter: none !important;
  opacity: 1 !important;
}

/* De kaart zelf: witte ondergrond voor de tekst eronder. */
.sector-card {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--cm-line) !important;
  overflow: hidden !important;
}

/* De donkere lijn onder de foto, als rustige overgang naar de tekst. */
.sector-photo {
  border-bottom: 0 !important;
}

/* ==========================================================================
   18. GEEN LIJN ONDER DE ROL-TAGS

   De link 'Bekijk alle rollen' had een border-top: daardoor stond er een
   dunne grijze lijn tussen de tags en de link. Die lijn gaat weg. De
   ruimte erboven blijft, zodat de link niet tegen de tags plakt.
   ========================================================================== */

.sector-link {
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  padding-top: 22px !important;
  box-shadow: none !important;
  background: none !important;
}

/* Voor de zekerheid ook de pseudo-elementen van de link. */
.sector-link::before,
.sector-link::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
}

/* En de rol-tags zelf krijgen geen onderrand. */
.role-tag {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.sector-roles {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   19. DE MELDING BOVEN DE VACATURES ALS ER GEZOCHT IS

   Als je vanaf de homepage zoekt, staat er op de vacaturepagina een regel
   die laat zien waarop gefilterd is, met een knop om alles weer te tonen.
   Die knop had nog de standaard browseropmaak.
   ========================================================================== */

.cm-zoek-melding {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--cm-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cm-zoek-melding strong {
  color: var(--cm-ink);
  font-weight: 600;
}

#cm-zoek-wis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--cm-line);
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-ink);
  cursor: pointer;
  transition: border-color var(--cm-fast) ease, color var(--cm-fast) ease;
}

#cm-zoek-wis:hover {
  border-color: var(--cm-gold);
  color: var(--cm-gold);
}

@media (max-width: 760px) {
  .cm-zoek-melding {
    padding: 0 20px;
    font-size: 13px;
  }
}

/* ==========================================================================
   DE SOCIAL-KNOPPEN IN DE FOOTER

   Het rondje had de letters "in" en "ig" als tekst. Dat vult het rondje niet
   en oogt niet als een knop. Hier staat het echte merk erin, in het goud van
   de huisstijl. .footer a.social-link is bewust specifieker dan de regel
   .footer a { color: ... !important } die op de pagina's staat.
   ========================================================================== */

.footer a.social-link {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(232, 168, 48, 0.14) !important;
  border: 1px solid rgba(232, 168, 48, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--cm-gold) !important;
  line-height: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.footer a.social-link svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 auto;
}

.footer a.social-link:hover {
  background: var(--cm-gold) !important;
  border-color: var(--cm-gold) !important;
  color: var(--cm-dark) !important;
  transform: translateY(-2px);
}

.footer a.social-link:focus-visible {
  outline: 2px solid var(--cm-gold);
  outline-offset: 3px;
}

/* Het logo in de footer: bijgesneden bestand, dus geen lege ruimte meer. */
.footer-brand img {
  height: 34px !important;
  width: auto !important;
  margin-bottom: 18px !important;
}

/* ==========================================================================
   DE DOWNLOADKAART MAG NIET UITZETTEN DOOR EEN LANGE SELECT-OPTIE

   Een <select> neemt de breedte van zijn langste optie als minimum. Bij de
   uitvoerder-pagina is dat "Utiliteitsbouw, zoals kantoren en scholen", en
   daardoor werd de hele kaart 401px breed op een scherm van 390px: het
   formulier liep rechts het scherm uit.

   min-width:0 haalt dat minimum eraf, zodat de kolom krimpt naar de ruimte
   die er is. De optie zelf blijft volledig leesbaar in de uitgeklapte lijst.
   ========================================================================== */

.wp-download-grid { grid-template-columns: minmax(0, 1fr) !important; }
.wp-download-grid > * { min-width: 0 !important; }
.wp-form-card, .wp-download-copy { min-width: 0 !important; max-width: 100% !important; }
.wp-form-card select, .wp-form-card input, .wp-form-card .field { min-width: 0 !important; max-width: 100% !important; }
.wp-form-card select { width: 100% !important; text-overflow: ellipsis; }

/* De keuzerondjes van vraag 5 staan in een raster van twee kolommen. Op een
   smal scherm moeten die naar één kolom, anders loopt de tweede kolom buiten
   het scherm. De labels mogen ook krimpen. */
.wp-form-card .option { min-width: 0 !important; }
.wp-form-card .option span { min-width: 0 !important; overflow-wrap: anywhere !important; }

@media (max-width: 620px) {
  .wp-form-card .options { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (min-width: 981px) {
  .wp-download-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important; }
}

/* ---------------------------------------------------------------------------
   Vacaturetitels op smalle schermen
   ---------------------------------------------------------------------------
   De h1 van een vacaturepagina staat op clamp(38px, 5vw, 68px). Op een scherm
   van 390px is dat 38px. Een lang woord als "Onderhoudsmonteur" is dan 380px
   breed, terwijl de tekstkolom 350px is: het liep buiten het scherm. Dat gold
   ook al voor bestaande vacatures zoals "Assistent-Projectleider" (423px).

   Het woord afbreken met een koppelteken leest niet lekker in een functietitel.
   Daarom krimpt het lettertype op smalle schermen net zo ver tot het langste
   woord past. Bij korte titels blijft het dus gewoon op 38px staan.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Alleen de titel van een vacaturepagina: die heeft .hero-inner.
     De homepage en de benchmarkpagina's gebruiken .hero-content en blijven
     dus ongemoeid. */
  .hero-inner h1 {
    font-size: clamp(26px, 8.6vw, 38px);
    /* vangnet voor een uitzonderlijk lang woord, zonder koppelteken */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
  }
}

/* ---------------------------------------------------------------------------
   Geen los woord op de laatste regel van een tekstblok
   ---------------------------------------------------------------------------
   In de hero staat de samenvatting in .hero-sub. Bij een bepaalde regellengte
   valt het laatste woord alleen op de laatste regel ("problemen."). Dat leest
   slordig. balance verdeelt de woorden gelijkmatiger over de regels, zodat de
   laatste regel nooit uit een los woord bestaat.

   Alleen op de vacaturehero: de homepage gebruikt .hero-content en blijft
   ongemoeid. Browsers zonder ondersteuning negeren de regel en tonen de tekst
   gewoon zoals eerst.
   --------------------------------------------------------------------------- */
.hero-inner .hero-sub,
.hero-inner p {
  text-wrap: balance;
}

@media (max-width: 900px) {
  .hero-inner .hero-sub,
  .hero-inner p {
    text-wrap: pretty;
  }
}

/* ---------------------------------------------------------------------------
   Video van de werkgever op een vacaturepagina
   ---------------------------------------------------------------------------
   De speler wordt pas geladen nadat de bezoeker op de afbeelding klikt. Tot
   dat moment is het een gewone afbeelding: geen iframe, geen cookies van
   YouTube, en de pagina blijft snel. Zonder javascript blijft het een link.
   --------------------------------------------------------------------------- */
.vac-video { margin: 40px 0 8px; }

.vac-video-speler {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #101010;
}

.vac-video-facade {
  display: block;
  position: relative;
  line-height: 0;
  text-decoration: none;
}

.vac-video-facade img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.vac-video-facade:hover img { transform: scale(1.02); opacity: 0.92; }

.vac-video-knop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: rgba(245, 192, 0, 0.94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}

.vac-video-knop::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 24px;
  border-style: solid;
  border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #1A1A1A;
}

.vac-video-facade:hover .vac-video-knop { transform: scale(1.08); }

.vac-video-duur {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.vac-video-speler iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 620px) {
  .vac-video { margin-top: 32px; }
  .vac-video-knop { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .vac-video-knop::after { left: 24px; top: 19px; border-width: 11px 0 11px 17px; }
}