/* daatje.css — single stylesheet for the public site (mirrors html/src/index.css + block components) */

/* ── Base reset & layout (replaces Canvas style.css + viewport-content.css) ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--daatje-font-body);
  color: var(--daatje-warm-black);
  background-color: var(--daatje-creme);
  line-height: 1.5;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button,
input,
textarea,
select {
  font: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: 87.5rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

.text-center {
  text-align: center;
}

.content-wrap {
  padding: 0;
  margin: 0;
}

#main-content.daatje-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-content.daatje-page > #content,
#main-content.daatje-page > section[id="content"],
#main-content.daatje-page > section.daatje-page-blocks,
#main-content.daatje-page > section.daatje-section,
#main-content.daatje-page > section.daatje-faq,
#main-content.daatje-page > aside.daatje-cta {
  flex: 1 0 auto;
}

.edit-link-outer {
  left: 0 !important;
  top: 50% !important;
}

.edit-link-outer a {
  border-radius: 0 !important;
  height: 50px;
  float: left;
  width: 80px;
  font-size: 20px !important;
  padding-left: 20px !important;
}

/* CMS theme overrides via custom properties (set once on .daatje-theme root) */
.daatje-theme {
  background-color: var(--daatje-section-bg, transparent);
  background-image: var(--daatje-section-bg-image, none);
  background-size: cover;
  background-position: center;
}

.daatje-theme[style*="--daatje-heading-color"] .daatje-theme__heading,
.daatje-theme[style*="--daatje-heading-color"] .daatje-theme__heading .accent,
.daatje-theme[style*="--daatje-heading-color"] .daatje-theme__heading em {
  color: var(--daatje-heading-color);
}

.daatje-theme[style*="--daatje-text-color"] .daatje-theme__text,
.daatje-theme[style*="--daatje-text-color"] .daatje-theme__text p {
  color: var(--daatje-text-color);
}

.daatje-cta.daatje-theme[style*="--daatje-section-bg"] {
  background-color: var(--daatje-section-bg);
}

.daatje-hero.daatje-theme[style*="--daatje-section-bg"],
.daatje-hero.daatje-theme[style*="--daatje-section-bg-image"] {
  background-color: var(--daatje-section-bg, var(--daatje-creme));
  background-image: var(--daatje-section-bg-image, none);
}

.daatje-parallax-bg {
  background-image: var(--daatje-parallax-bg);
  background-size: cover;
  background-position: center;
}

#top-bar {
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--daatje-border);
  background: var(--daatje-creme);
}

#top-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 0.5rem;
}

.rte-content,
.rte-content *,
.daatje-rte,
.daatje-rte * {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.rte-content p:last-child,
.daatje-rte p:last-child {
  margin-bottom: 0;
}

.form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--daatje-border);
  border-radius: 0.75rem;
  background: #fff;
  color: var(--daatje-warm-black);
}

.form-control:focus {
  outline: 2px solid hsla(10, 76%, 57%, 0.25);
  border-color: var(--daatje-coral);
}

.autocomplete-dropdown {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  display: none;
  max-height: 18rem;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 0.75rem;
  box-shadow: 0 12px 40px hsla(224, 42%, 29%, 0.12);
}

.autocomplete-dropdown.active {
  display: block;
}

.autocomplete-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--daatje-border);
}

.autocomplete-item:last-child {
  border-bottom: 0;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--daatje-navy-light);
}

.daatje-search form {
  position: relative;
}

.alert {
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

.alert-success {
  background: var(--daatje-teal-light);
  color: var(--daatje-teal);
}

.alert-danger,
.alert-error {
  background: hsla(0, 84%, 60%, 0.12);
  color: hsl(0, 72%, 40%);
  font-family: var(--daatje-font-body);
}

/* Bootstrap-compat text utilities (legacy block templates; style.css no longer loaded) */
.text-primary {
  color: var(--daatje-coral) !important;
  font-family: var(--daatje-font-body) !important;
}

.text-danger {
  color: hsl(0, 72%, 40%) !important;
  font-family: var(--daatje-font-body) !important;
}

#gotoTop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--daatje-coral);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 24px hsla(10, 76%, 57%, 0.25);
}

#gotoTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#gotoTop::before {
  content: "↑";
}

/* ── Design tokens (from html/src/index.css) ── */
:root {
  --daatje-creme: hsl(30, 100%, 98.4%);
  --daatje-warm-black: hsl(60, 0.8%, 16.5%);
  --daatje-coral: hsl(10, 76%, 57%);
  --daatje-navy: #2b3b69;
  --daatje-navy-light: hsl(228, 33%, 94%);
  --daatje-teal: hsl(155, 70%, 37%);
  --daatje-teal-light: hsl(152, 52%, 92%);
  --daatje-amber: hsl(34, 85%, 55%);
  --daatje-amber-light: hsl(38, 82%, 92%);
  --daatje-border: hsl(228, 33%, 90%);
  --daatje-font-heading: "DM Serif Display", Georgia, serif;
  --daatje-font-body: "DM Sans", system-ui, sans-serif;
  --daatje-nav-height: 4.75rem;
}

.daatje-hero,
.daatje-cta,
.daatje-section,
.daatje-nav,
.daatje-footer {
  font-family: var(--daatje-font-body);
}

.daatje-section {
  padding-block: 5rem;
}

.daatje-value-props {
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .daatje-section {
    padding-block: 8rem;
  }

  .daatje-value-props {
    padding-block: 6rem;
  }
}

.daatje-section h1,
.daatje-section h2,
.daatje-section h3,
.daatje-card h3,
.daatje-process h3,
.daatje-pricing h3,
.daatje-contact h1,
.daatje-contact h2,
.daatje-faq h3 {
  font-family: var(--daatje-font-heading);
  font-weight: 400 !important;
}

/* Section headers — label above title, spacing before cards */
.daatje-section-header {
  max-width: 42rem;
  margin: 0 auto 4rem;
  text-align: center;
}

.daatje-section-header--center {
  max-width: 48rem;
}

.daatje-section-label {
  display: inline-block;
  background: var(--daatje-navy-light);
  color: var(--daatje-navy);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.daatje-section-label--on-dark {
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
}

.daatje-section-label--navy {
  background: var(--daatje-navy);
  color: #fff;
}

.daatje-pain-points .daatje-section-label--navy {
  background: var(--daatje-navy);
  color: #fff;
}

.daatje-section-label--teal {
  background: var(--daatje-teal-light);
  color: var(--daatje-teal);
}

.daatje-section-heading {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--daatje-warm-black);
}

.daatje-section-heading--on-dark {
  color: #fff;
}

.daatje-section-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--daatje-navy);
  opacity: 0.85;
}

.daatje-section-intro--on-dark {
  color: #fff;
  opacity: 0.8;
}

.daatje-section-intro p:last-child {
  margin-bottom: 0;
}

/* Card grids */
.daatje-card-grid {
  display: grid;
  gap: 1.5rem;
  margin: 0 auto;
}

.daatje-card-grid--2 {
  grid-template-columns: 1fr;
  max-width: 64rem;
}

.daatje-pillars .daatje-card-grid--2 {
  gap: 2rem;
}

.daatje-pain-points .daatje-card-grid--2 {
  max-width: 56rem;
}

.daatje-promise .daatje-card-grid--3 {
  gap: 2rem;
  max-width: 56rem;
}

.daatje-promise .daatje-section-header {
  margin-bottom: 3rem;
}

.daatje-promise .daatje-section-heading {
  margin-bottom: 3rem;
}

.daatje-promise .daatje-card--block {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
  padding: 1rem;
}

.daatje-promise .daatje-card--block:hover {
  transform: none;
  box-shadow: none;
}

.daatje-promise .daatje-card__title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.daatje-profile .daatje-section-header {
  margin-bottom: 3rem;
}

.daatje-card-grid--3,
.daatje-value-props .daatje-card-grid--3 {
  grid-template-columns: 1fr;
  max-width: 64rem;
}

.daatje-card-grid--3-wide {
  grid-template-columns: 1fr;
  max-width: 72rem;
}

.daatje-card-grid--4 {
  grid-template-columns: 1fr;
  max-width: 72rem;
}

@media (min-width: 768px) {
  .daatje-card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .daatje-card-grid--3,
  .daatje-value-props .daatje-card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .daatje-card-grid--3-wide {
    grid-template-columns: repeat(2, 1fr);
  }

  .daatje-card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .daatje-card-grid--3-wide {
    grid-template-columns: repeat(3, 1fr);
  }

  .daatje-card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Block cards */
.daatje-card--block {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.daatje-card--block:not(.daatje-card--link):hover {
  transform: none;
  box-shadow: none;
}

.daatje-card--pillar {
  padding: 2rem;
}

.daatje-card--on-dark {
  background: hsla(0, 0%, 100%, 0.05);
  border-color: hsla(0, 0%, 100%, 0.1);
  color: #fff;
  box-shadow: none;
}

.daatje-card--on-dark:hover {
  box-shadow: none;
  transform: none;
}

.daatje-card--link {
  text-decoration: none;
  color: inherit;
}

.daatje-card--link:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px hsla(224, 42%, 29%, 0.08);
}

.daatje-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.daatje-card__icon--accent {
  background: hsla(155, 70%, 37%, 0.1);
  color: var(--daatje-teal);
}

.daatje-card__emoji {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.75rem;
  display: block;
}

.daatje-card__title {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: 0.75rem;
  color: inherit;
}

.daatje-card__title--center {
  text-align: center;
}

.daatje-card--on-dark .daatje-card__title {
  color: #fff;
}

.daatje-card__body {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--daatje-navy);
  opacity: 0.85;
  flex: 1;
}

.daatje-card--on-dark .daatje-card__body {
  color: #fff;
  opacity: 0.7;
}

.daatje-card__body p {
  margin-bottom: 0;
}

.daatje-card__link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--daatje-coral);
  text-decoration: none;
}

.daatje-card__link:hover {
  text-decoration: underline;
}

/* Mixed teams dark section */
.daatje-mixed-teams {
  background: var(--daatje-navy);
  color: #fff;
}

/* Pain points */
.daatje-pain-points {
  background: var(--daatje-navy-light);
}

.daatje-promise {
  background: var(--daatje-navy-light);
}

.daatje-persona-badge {
  display: inline-block;
  background: var(--daatje-amber-light);
  color: var(--daatje-amber);
  padding: 0.125rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.daatje-card__body--pain .daatje-pain-quote,
.daatje-card__body--pain p:first-child {
  font-family: var(--daatje-font-heading);
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 1rem !important;
  color: var(--daatje-warm-black);
}

.daatje-card__body--pain .daatje-pain-answer,
.daatje-card__body--pain p:last-child:not(:first-child) {
  font-size: 0.875rem;
  opacity: 0.85;
}

.daatje-card__body--pain p strong {
  font-weight: 400;
}

/* Process / steps grid */
.daatje-steps-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.daatje-steps-grid > li {
  list-style: none;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .daatje-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .daatje-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-step-card {
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}

.daatje-step-card:hover {
  box-shadow: 0 10px 28px hsla(224, 42%, 29%, 0.08);
}

.daatje-step-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.daatje-step-card__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.daatje-step-card__number {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--daatje-navy);
  opacity: 0.7;
}

.daatje-step-card__title {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.daatje-step-card__body {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--daatje-navy);
  opacity: 0.85;
}

.daatje-step-card__body p {
  margin-bottom: 0;
}

.daatje-step-card__body .daatje-step__text {
  margin-bottom: 1rem !important;
}

.daatje-step-card__body .daatje-step__wink {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--daatje-coral);
  margin-bottom: 0 !important;
}


/* ── Navigation (html/src/components/blocks/NavigationBlock.tsx) ── */
.daatje-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: hsla(30, 100%, 98.4%, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--daatje-border);
  transition: box-shadow 0.2s ease;
}

.daatje-nav.is-scrolled {
  box-shadow: 0 8px 28px hsla(60, 1%, 17%, 0.08);
}

.daatje-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--daatje-nav-height);
}

.daatje-nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.daatje-wordmark {
  color: var(--daatje-warm-black);
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.daatje-nav__brand img {
  width: auto;
  max-width: 11rem;
  max-height: 3.25rem;
  object-fit: contain;
}

.daatje-nav__menu {
  display: none;
}

.daatje-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.daatje-nav__link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--daatje-navy);
  opacity: 0.75;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.daatje-nav__link:hover,
.daatje-nav__link.is-active {
  color: var(--daatje-warm-black);
  opacity: 1;
}

.daatje-nav__link.is-active {
  color: var(--daatje-coral);
}

.daatje-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.daatje-nav__cta {
  display: none;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
}

.daatje-nav__search-btn {
  border: 0;
  background: transparent;
  color: var(--daatje-warm-black);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}

.daatje-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.daatje-nav__toggle-icon,
.daatje-nav__toggle-icon::before,
.daatje-nav__toggle-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: var(--daatje-warm-black);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.daatje-nav__toggle-icon {
  position: relative;
}

.daatje-nav__toggle-icon::before,
.daatje-nav__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.daatje-nav__toggle-icon::before {
  top: -6px;
}

.daatje-nav__toggle-icon::after {
  top: 6px;
}

.daatje-nav.is-open .daatje-nav__toggle-icon {
  background: transparent;
}

.daatje-nav.is-open .daatje-nav__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.daatje-nav.is-open .daatje-nav__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

.daatje-nav__panel {
  display: none;
  border-top: 1px solid var(--daatje-border);
  background: var(--daatje-creme);
  padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.5rem;
}

.daatje-nav.is-open .daatje-nav__panel {
  display: block;
}

.daatje-nav__panel-list {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.daatje-nav__panel-link {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--daatje-navy);
  text-decoration: none;
  padding: 0.25rem 0;
}

.daatje-nav__panel-link.is-active {
  color: var(--daatje-coral);
}

.daatje-nav__panel-cta {
  display: block;
  margin-top: 1rem;
  text-align: center;
}

.daatje-search {
  display: none;
  border-top: 1px solid var(--daatje-border);
  background: var(--daatje-creme);
  padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.25rem;
}

.daatje-search.is-open {
  display: block;
}

.daatje-search form {
  display: flex;
  gap: 0.75rem;
}

.daatje-search .form-control {
  flex: 1;
}

@media (min-width: 768px) {
  .daatje-nav__menu {
    display: block;
  }

  .daatje-nav__cta {
    display: inline-flex;
  }

  .daatje-nav__toggle {
    display: none;
  }

  .daatje-nav__panel {
    display: none !important;
  }
}

/* FAQ accordion (html/src/pages/FaqPage.tsx pattern) */
.daatje-accordion__item {
  border-bottom: 1px solid var(--daatje-border);
}

.daatje-accordion__item:last-child {
  border-bottom: 0;
}

.daatje-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--daatje-warm-black);
  font-weight: 500;
  font-size: 1rem;
}

.daatje-accordion__icon {
  flex-shrink: 0;
  color: var(--daatje-coral);
  transition: transform 0.2s ease;
}

.daatje-accordion__item.is-open .daatje-accordion__icon {
  transform: rotate(180deg);
}

.daatje-accordion__panel {
  display: none;
  padding: 0 0 1.25rem 2rem;
  color: var(--daatje-navy);
  opacity: 0.85;
  font-size: 0.9375rem;
  line-height: 1.625;
}

.daatje-accordion__item.is-open .daatje-accordion__panel {
  display: block;
}

.daatje-accordion__question {
  flex: 1;
  font-size: 1rem;
  line-height: 1.5;
}

.daatje-accordion__panel p {
  margin: 0 0 0.75rem;
}

.daatje-accordion__panel p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .daatje-accordion__trigger {
    font-size: 1.0625rem;
  }

  .daatje-accordion__question {
    font-size: 1.125rem;
  }
}

/* FAQ page */
.daatje-faq {
  padding-top: 0;
  padding-bottom: 5rem;
}

.daatje-faq__wrap {
  max-width: 56rem;
}

.daatje-faq__category {
  margin-bottom: 2.5rem;
}

.daatje-faq__category:last-child {
  margin-bottom: 0;
}

.daatje-faq__category-title {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 400;
  color: var(--daatje-coral);
  margin-bottom: 1rem;
}

.daatje-faq__card {
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 12px 40px hsla(224, 42%, 29%, 0.06);
}

@media (min-width: 768px) {
  .daatje-faq__card {
    padding: 1.5rem 2rem;
  }
}

.daatje-faq__cta {
  margin-top: 0;
}

section.daatje-faq:has(+ aside.daatje-faq__cta) {
  padding-bottom: 0;
}

.daatje-hero {
  padding-top: 8rem;
  padding-bottom: 5rem;
  background-color: var(--daatje-creme);
}

@media (min-width: 768px) {
  .daatje-hero {
    padding-top: 11rem;
    padding-bottom: 8rem;
  }
}

.daatje-hero__actions {
  margin-bottom: 4rem;
}

.daatje-hero__inner {
  max-width: 48rem;
  margin: 0 auto;
}

.daatje-badge {
  display: inline-block;
  background: hsla(10, 76%, 57%, 0.1);
  color: var(--daatje-coral);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-family: var(--daatje-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.daatje-hero__title {
  font-family: var(--daatje-font-heading);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.15;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.daatje-hero__title em,
.daatje-hero__title .accent {
  font-family: var(--daatje-font-heading);
  font-style: italic;
  color: var(--daatje-coral);
}

.daatje-hero__subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--daatje-navy);
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  opacity: 0.9;
}

.daatje-hero__proof {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--daatje-navy);
  max-width: 32rem;
  margin: 0 auto;
  opacity: 0.75;
}

.daatje-hero__actions,
.daatje-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.daatje-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.daatje-btn:hover {
  opacity: 0.9;
  text-decoration: none;
}

.daatje-btn--primary {
  background: var(--daatje-coral);
  color: #fff;
  box-shadow: 0 10px 24px hsla(10, 76%, 57%, 0.25);
}

.daatje-btn--outline {
  border: 2px solid hsla(60, 0.8%, 16.5%, 0.2);
  color: var(--daatje-warm-black);
  background: transparent;
}

.daatje-btn--on-primary {
  background: #fff;
  color: var(--daatje-coral);
}

.daatje-btn--outline-light {
  border: 2px solid hsla(0, 0%, 100%, 0.4);
  color: #fff;
  background: transparent;
}

.daatje-btn--navy {
  background: var(--daatje-navy);
  color: #fff;
}

.daatje-btn--navy:hover {
  color: #fff;
  opacity: 0.9;
}

.daatje-cta {
  padding: 5rem 0;
  color: #fff;
  background: var(--daatje-coral);
}

@media (min-width: 768px) {
  .daatje-cta {
    padding: 8rem 0;
  }
}

.daatje-cta__inner {
  max-width: 40rem;
  margin: 0 auto;
}

.daatje-cta__media img {
  max-width: min(100%, 28rem);
  margin: 0 auto;
  border-radius: 1.25rem;
}

.daatje-cta__title {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
  font-weight: 400;
  color: #fff;
}

.daatje-cta__subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: 2.5rem;
  color: #fff;
}

.daatje-cta__subtitle p {
  margin-bottom: 0;
}

.daatje-text .heading-block h1,
.daatje-text .heading-block h2,
.daatje-text .heading-block h3,
.daatje-content-grid h3 {
  font-family: var(--daatje-font-heading);
  font-weight: 400;
}

/* Global body text scale inside Daatje pages */
.daatje-section p,
.daatje-section li,
.daatje-text p,
.daatje-text li {
  font-size: 1rem;
  line-height: 1.6;
}

.daatje-pricing .pricing-box h3 {
  font-size: 1.25rem !important;
}

.daatje-pricing .pricing-price {
  font-size: 1.75rem !important;
}

.daatje-footer__brand {
  flex: 1 1 18rem;
  max-width: 36rem;
}

.daatje-footer__content .row,
.daatje-footer__content [class*="col-"] {
  color: inherit;
}

.daatje-footer__content a {
  color: #fff;
}

.daatje-card,
.daatje-pricing .pricing-box,
.daatje-contact .card,
.daatje-faq .toggle {
  border: 1px solid var(--daatje-border) !important;
  border-radius: 1.25rem !important;
  background: #fff;
  box-shadow: 0 12px 40px hsla(224, 42%, 29%, 0.06);
}

.daatje-card {
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.daatje-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px hsla(224, 42%, 29%, 0.1);
}

.daatje-text-image img {
  border-radius: 1.5rem;
}

.daatje-pricing .pricing-box:not(.dark) {
  background: #fff !important;
}

.daatje-faq .toggle {
  padding: 1rem 1.25rem !important;
}

.daatje-contact {
  background: var(--daatje-navy-light);
}

.daatje-contact .form-control {
  border-color: var(--daatje-border);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
}

#footer.daatje-footer {
  padding: 4rem 0;
  border-top: 0;
  color: #fff;
  background: var(--daatje-warm-black);
}

.daatje-footer__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem clamp(2rem, 6vw, 5rem);
  padding-bottom: 2.5rem;
}

.daatje-footer__logo {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.daatje-footer__logo img {
  width: auto;
  max-width: 11rem;
  max-height: 4rem;
  object-fit: contain;
}

.daatje-footer .daatje-wordmark,
.daatje-footer a {
  color: #fff;
}

.daatje-footer a {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.daatje-footer a:hover,
.daatje-footer .daatje-footer__logo {
  opacity: 1;
}

.daatje-footer__tagline {
  max-width: 34rem;
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.6;
}

.daatje-footer__content {
  margin-top: 2rem;
}

.daatje-footer__navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.daatje-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.daatje-footer__social,
.daatje-footer__contact,
.daatje-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  font-size: 0.875rem;
}

.daatje-footer__social {
  font-size: 1.1rem;
}

#copyrights.daatje-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 0;
  padding: 1.5rem 0;
  border-top: 1px solid hsla(0, 0%, 100%, 0.14);
  background: transparent;
  font-size: 0.875rem;
  opacity: 0.4;
}

.daatje-ticker {
  overflow: hidden;
  padding: 1rem 0;
  color: #fff;
  background: var(--daatje-navy);
}

.daatje-ticker__title {
  margin: 0 0 0.75rem;
  color: #fff;
  font: 400 1.25rem/1.2 var(--daatje-font-heading);
  text-align: center;
}

.daatje-ticker__track {
  display: flex;
  width: max-content;
  animation: daatje-ticker-scroll 30s linear infinite;
}

.daatje-ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2rem;
}

.daatje-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}

.daatje-ticker__item::after {
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 4rem;
  border-radius: 50%;
  background: var(--daatje-coral);
  content: "";
}

.daatje-ticker:hover .daatje-ticker__track {
  animation-play-state: paused;
}

@keyframes daatje-ticker-scroll {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .daatje-ticker__track { animation: none; }
}

/* Canvas collapses the primary menu below 992px, so the inline CTA goes with it. */
@media (max-width: 991.98px) {
  .daatje-header__cta {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .daatje-hero {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  .daatje-page-hero--large {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  .daatje-hero__actions,
  .daatje-cta__actions {
    flex-direction: column;
  }

  .daatje-btn {
    width: 100%;
  }

  .daatje-footer__main {
    flex-direction: column;
    align-items: flex-start;
  }

  #copyrights.daatje-footer__bottom {
    flex-direction: column;
  }
}

/* --- Legacy Canvas block markup (active until Razor views are rebuilt in VS) --- */

/* Section label above title + spacing below intro */
#wat-we-doen .col-xl-6.text-center,
.daatje-content-grid .col-xl-6.text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 4rem !important;
}

#wat-we-doen .col-xl-6.text-center h3,
.daatje-content-grid .col-xl-6.text-center h3.h1 {
  order: 2;
  font-family: var(--daatje-font-heading) !important;
  font-size: clamp(1.875rem, 3.5vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.2;
  margin-bottom: 1rem !important;
}

#wat-we-doen .col-xl-6.text-center > p.text-larger.text-muted,
.daatje-content-grid .col-xl-6.text-center > p.text-larger.text-muted {
  order: 1;
  display: inline-block;
  background: var(--daatje-navy-light);
  color: var(--daatje-navy);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem !important;
  opacity: 1;
}

#wat-we-doen .col-xl-6.text-center > p:not(.text-muted),
.daatje-content-grid .col-xl-6.text-center > p:not(.text-muted) {
  order: 3;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--daatje-navy);
  opacity: 0.85;
  margin-bottom: 0;
}

/* Value props: emoji/icon above card title (3-up grid without section header) */
.daatje-content-grid:not([id]) .col-lg-4 .fbox-content {
  display: flex;
  flex-direction: column;
}

.daatje-content-grid:not([id]) .col-lg-4 .fbox-content > p.text-muted:first-of-type {
  order: 0;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: hsla(155, 70%, 37%, 0.1);
  color: var(--daatje-teal);
  font-size: 1.35rem !important;
  line-height: 3rem;
  text-align: center;
  opacity: 1;
}

.daatje-content-grid:not([id]) .col-lg-4 .fbox-content h3 {
  order: 1;
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  margin-bottom: 0.75rem;
}

.daatje-content-grid:not([id]) .col-lg-4 .fbox-content > :not(h3):not(p.text-muted:first-of-type) {
  order: 2;
  font-size: 0.875rem;
  line-height: 1.625;
}

.daatje-content-grid:not([id]) .col-lg-4 .more-link {
  order: 3;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--daatje-coral);
}

/* Card typography in generic grids */
.daatje-content-grid .feature-box.daatje-card h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem !important;
  font-weight: 400 !important;
}

.daatje-content-grid .feature-box.daatje-card .fbox-content,
.daatje-content-grid .feature-box.daatje-card .fbox-content p {
  font-size: 0.875rem;
  line-height: 1.625;
}

.daatje-content-grid .feature-box.daatje-card {
  border: 1px solid var(--daatje-border) !important;
  border-radius: 1rem !important;
  background: #fff !important;
  box-shadow: none !important;
  height: 100%;
}

/* Process steps — card grid styling on legacy vertical block */
.daatje-process .feature-box-border-vertical {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .daatje-process .feature-box-border-vertical {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .daatje-process .feature-box-border-vertical {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-process .feature-box-border-vertical .feature-box {
  position: static !important;
  display: block !important;
  padding: 1.5rem;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  background: #fff;
}

.daatje-process .feature-box-border-vertical .feature-box::before,
.daatje-process .feature-box-border-vertical .feature-box::after {
  display: none !important;
}

.daatje-process .feature-box-border-vertical .fbox-icon {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 0.75rem;
  background: transparent !important;
}

.daatje-process .feature-box-border-vertical .fbox-icon a,
.daatje-process .feature-box-border-vertical .fbox-icon i {
  all: unset;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--daatje-navy);
  opacity: 0.7;
}

.daatje-process .feature-box-border-vertical .fbox-icon i::before {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.daatje-process .feature-box-border-vertical .fbox-content h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.daatje-process .feature-box-border-vertical .fbox-content p {
  font-size: 0.875rem;
  line-height: 1.625;
}

.daatje-process .feature-box-border-vertical .fbox-content p em,
.daatje-process .feature-box-border-vertical .fbox-content .daatje-step__wink {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--daatje-coral);
}

.daatje-process .col-xl-6.text-center h3.h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.25rem) !important;
  font-weight: 400 !important;
}

.daatje-process .col-xl-6.text-center > p.text-muted,
.daatje-process .col-xl-6.text-center > p:first-of-type {
  font-size: 1rem;
}

.daatje-process .col-xl-6.text-center::before {
  content: "Het hele plaatje";
  order: 0;
  display: inline-block;
  background: var(--daatje-navy-light);
  color: var(--daatje-navy);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.daatje-process .col-xl-6.text-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4rem !important;
}

.daatje-process .col-xl-6.text-center h3 {
  order: 1;
}

.daatje-process .col-xl-6.text-center > p {
  order: 2;
}

/* Step emoji + number on legacy process cards */
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(1) .fbox-icon i { font-size: 0; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(1) .fbox-icon i::after { content: "☕  Stap 01"; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--daatje-navy); opacity: 0.7; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(3) .fbox-icon i { font-size: 0; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(3) .fbox-icon i::after { content: "🎯  Stap 02"; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--daatje-navy); opacity: 0.7; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(5) .fbox-icon i { font-size: 0; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(5) .fbox-icon i::after { content: "💬  Stap 03"; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--daatje-navy); opacity: 0.7; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(7) .fbox-icon i { font-size: 0; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(7) .fbox-icon i::after { content: "👋  Stap 04"; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--daatje-navy); opacity: 0.7; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(9) .fbox-icon i { font-size: 0; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(9) .fbox-icon i::after { content: "📚  Stap 05"; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--daatje-navy); opacity: 0.7; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(11) .fbox-icon i { font-size: 0; }
.daatje-process .feature-box-border-vertical > .feature-box:nth-of-type(11) .fbox-icon i::after { content: "📊  Stap 06"; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--daatje-navy); opacity: 0.7; }

/* ── Profile (Sanne) ── */
.daatje-profile__intro {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
  color: hsl(60, 1%, 45%);
  font-size: 1rem;
  line-height: 1.6;
}

.daatje-profile__card {
  max-width: 48rem;
  margin: 0 auto;
  border: 1px solid var(--daatje-border);
  border-radius: 1.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 50px hsla(224, 42%, 29%, 0.1);
}

.daatje-profile__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--daatje-coral);
  color: #fff;
}

.daatje-profile__avatar {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: hsla(0, 0%, 100%, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--daatje-font-heading);
  font-size: 1.5rem;
  line-height: 1;
}

.daatje-profile__identity {
  flex: 1 1 12rem;
  min-width: 0;
}

.daatje-profile__name {
  margin: 0;
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: #fff;
}

.daatje-profile__role {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.daatje-profile__badge {
  margin-left: auto;
  background: hsla(0, 0%, 100%, 0.2);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.daatje-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--daatje-border);
}

.daatje-profile__stats > span {
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  border-right: 1px solid var(--daatje-border);
}

.daatje-profile__stats > span:last-child {
  border-right: 0;
}

.daatje-profile__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.daatje-profile__section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--daatje-font-body);
}

.daatje-profile__section p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
}

.daatje-profile__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.daatje-profile__skills > span {
  background: var(--daatje-navy-light);
  color: var(--daatje-navy);
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
}

.daatje-profile__training {
  background: var(--daatje-teal-light);
  border-radius: 0.75rem;
  padding: 1rem;
}

.daatje-profile__training h4 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--daatje-teal);
}

.daatje-profile__training p {
  margin: 0;
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
}

/* Legacy text block: profile card without section wrapper */
.daatje-text .daatje-profile__card {
  margin-top: 2rem;
}

.daatje-text .heading-block + div .daatje-profile__intro {
  margin-top: 0;
}

/* ── Pricing cards (3-column) ── */
.daatje-pricing--cards .daatje-section-header {
  margin-bottom: 4rem;
}

.daatje-pricing__grid {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 768px) {
  .daatje-pricing__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-pricing-card {
  position: relative;
  border: 2px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
}

.daatje-pricing-card--featured {
  border-color: var(--daatje-coral);
  box-shadow: 0 20px 40px hsla(10, 76%, 57%, 0.12);
}

.daatje-pricing-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--daatje-coral);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.daatje-pricing-card__name {
  font-family: var(--daatje-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.daatje-pricing-card__desc {
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.daatje-pricing-card__prices {
  margin-bottom: 1.5rem;
}

.daatje-pricing-card__price-row + .daatje-pricing-card__price-row {
  margin-top: 0.75rem;
}

.daatje-pricing-card__price-label {
  display: block;
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
}

.daatje-pricing-card__price-value {
  display: block;
  font-family: var(--daatje-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.daatje-pricing-card__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.daatje-pricing-card__section {
  margin-bottom: 1.25rem;
}

.daatje-pricing-card__section:last-of-type {
  margin-bottom: 0;
}

.daatje-pricing-card__section-title {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--daatje-teal);
  line-height: 1.3;
}

.daatje-pricing-card__section .daatje-pricing-card__features {
  margin-bottom: 0;
}

.daatje-pricing-card__features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
}

.daatje-pricing-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--daatje-teal);
  font-weight: 700;
}

.daatje-pricing-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--daatje-navy);
  color: #fff;
  transition: opacity 0.2s ease;
}

.daatje-pricing-card__btn:hover {
  opacity: 0.9;
  color: #fff;
}

.daatje-pricing-card__btn--primary,
.daatje-pricing-card--featured .daatje-pricing-card__btn {
  background: var(--daatje-coral);
  color: #fff;
}

.daatje-pricing-card__btn--primary:hover,
.daatje-pricing-card--featured .daatje-pricing-card__btn:hover {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Legacy Canvas blocks — variant sections via content markers
   (active until Razor views are rebuilt in Visual Studio)
   ═══════════════════════════════════════════════════════════════ */

.daatje-section-marker {
  display: none !important;
}

/* Shared full-bleed section wrapper */
.daatje-content-grid:has([data-daatje-variant="mixed-teams"]),
.daatje-content-grid:has([data-daatje-variant="pain-points"]),
.daatje-content-grid:has([data-daatje-variant="promise"]),
.daatje-mixed-teams,
.daatje-pain-points,
.daatje-promise {
  width: 100%;
  padding-block: 5rem;
}

@media (min-width: 768px) {
  .daatje-content-grid:has([data-daatje-variant="mixed-teams"]),
  .daatje-content-grid:has([data-daatje-variant="pain-points"]),
  .daatje-content-grid:has([data-daatje-variant="promise"]),
  .daatje-mixed-teams,
  .daatje-pain-points,
  .daatje-promise {
    padding-block: 8rem;
  }
}

/* ── Mixed teams: navy #2b3b69 + translucent cards ── */
.daatje-content-grid:has([data-daatje-variant="mixed-teams"]),
.daatje-mixed-teams {
  background: #2b3b69 !important;
  color: #fff;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .col-xl-6.text-center,
.daatje-mixed-teams .daatje-section-header {
  margin-bottom: 4rem;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .col-xl-6 > p.text-larger.text-muted,
.daatje-mixed-teams .daatje-section-label--on-dark {
  background: hsla(0, 0%, 100%, 0.1) !important;
  color: #fff !important;
  opacity: 1 !important;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .col-xl-6 h3.h1,
.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .col-xl-6 > p:not(.text-muted),
.daatje-mixed-teams .daatje-section-heading--on-dark,
.daatje-mixed-teams .daatje-section-intro--on-dark {
  color: #fff !important;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .col-xl-6 > p:not(.text-muted) {
  opacity: 0.8;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .feature-box.daatje-card,
.daatje-mixed-teams .daatje-card--on-dark {
  background: hsla(0, 0%, 100%, 0.05) !important;
  border: 1px solid hsla(0, 0%, 100%, 0.1) !important;
  box-shadow: none !important;
  color: #fff;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .feature-box .fbox-content h3,
.daatje-mixed-teams .daatje-card__title {
  color: #fff !important;
  font-family: var(--daatje-font-heading);
  font-size: 1.125rem !important;
  font-weight: 400 !important;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .feature-box .fbox-content p,
.daatje-mixed-teams .daatje-card__body {
  color: #fff !important;
  opacity: 0.7;
  font-size: 0.875rem;
  line-height: 1.625;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .fbox-content > p.text-muted:first-of-type {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 1.5rem !important;
  border-radius: 0 !important;
  margin-bottom: 0.75rem !important;
  opacity: 1 !important;
  order: 0;
}

.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .clickable-block:hover,
.daatje-content-grid:has([data-daatje-variant="mixed-teams"]) .feature-box.daatje-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Pain points: navy-light bg + white cards ── */
.daatje-content-grid:has([data-daatje-variant="pain-points"]),
.daatje-pain-points {
  background: var(--daatje-navy-light) !important;
}

.daatje-content-grid:has([data-daatje-variant="pain-points"]) .col-xl-6 > p.text-larger.text-muted,
.daatje-pain-points .daatje-section-label--navy {
  background: #2b3b69 !important;
  color: #fff !important;
  opacity: 1 !important;
}

.daatje-content-grid:has([data-daatje-variant="pain-points"]) .feature-box.daatje-card,
.daatje-pain-points .daatje-card--pain {
  background: #fff !important;
  border: 1px solid var(--daatje-border) !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
}

.daatje-content-grid:has([data-daatje-variant="pain-points"]) .fbox-content h3,
.daatje-pain-points .daatje-persona-badge {
  display: inline-block;
  background: var(--daatje-amber-light) !important;
  color: var(--daatje-amber) !important;
  font-family: var(--daatje-font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.125rem 0.625rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
  text-transform: none;
  letter-spacing: normal;
}

.daatje-content-grid:has([data-daatje-variant="pain-points"]) .daatje-pain-quote,
.daatje-content-grid:has([data-daatje-variant="pain-points"]) .fbox-content .daatje-pain-quote {
  font-family: var(--daatje-font-heading);
  font-size: 1.125rem !important;
  line-height: 1.4;
  color: var(--daatje-warm-black);
  margin-bottom: 1rem !important;
}

.daatje-content-grid:has([data-daatje-variant="pain-points"]) .daatje-pain-answer,
.daatje-content-grid:has([data-daatje-variant="pain-points"]) .fbox-content .daatje-pain-answer {
  font-size: 0.875rem !important;
  color: hsl(60, 1%, 45%);
  line-height: 1.625;
}

/* ── Promise: navy-light bg ── */
.daatje-content-grid:has([data-daatje-variant="promise"]),
.daatje-promise {
  background: var(--daatje-navy-light) !important;
}

.daatje-content-grid:has([data-daatje-variant="promise"]) .col-xl-6 > p.text-larger.text-muted {
  background: var(--daatje-teal-light) !important;
  color: var(--daatje-teal) !important;
  opacity: 1 !important;
}

.daatje-content-grid:has([data-daatje-variant="promise"]) .feature-box.daatje-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center;
  padding: 1rem;
}

.daatje-content-grid:has([data-daatje-variant="promise"]) .feature-box .fbox-content h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem !important;
  margin-bottom: 0.75rem;
}

/* ── Pillars (Wat we doen) label badge ── */
.daatje-content-grid:has([data-daatje-variant="pillars"]) .col-xl-6 > p.text-larger.text-muted {
  background: var(--daatje-navy-light) !important;
  color: #2b3b69 !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Inner page hero + RTE content
   ═══════════════════════════════════════════════════════════════ */

.daatje-page-hero {
  padding: 7rem 0 5rem;
  background: var(--daatje-creme);
}

.daatje-page-hero--large {
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.daatje-page-hero--compact {
  padding: 7rem 0 0;
}

@media (min-width: 768px) {
  .daatje-page-hero--large {
    padding-top: 11rem;
    padding-bottom: 8rem;
  }
}

.daatje-page-hero__inner {
  max-width: 56rem;
  margin: 0 auto;
}

.daatje-page-hero__badge {
  display: inline-block;
  background: hsla(10, 76%, 57%, 0.1);
  color: var(--daatje-coral);
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-family: var(--daatje-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.daatje-page-hero__title {
  font-family: var(--daatje-font-heading);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  color: var(--daatje-warm-black);
}

.daatje-page-hero__title .accent,
.daatje-page-hero__title em,
.daatje-page-hero__title i {
  font-family: var(--daatje-font-heading);
  font-style: italic;
  color: var(--daatje-coral);
}

.daatje-page-hero__intro {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  text-align: center;
}

.daatje-page-hero__intro p {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--daatje-navy);
  opacity: 0.75;
  margin: 0 0 1rem;
}

.daatje-page-hero__intro .daatje-page-intro__lead {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 1.5rem;
}

.daatje-page-hero__intro p:last-child {
  margin-bottom: 0;
}

.daatje-page-hero--compact {
  padding-bottom: 0;
}

.daatje-page-hero--compact .daatje-page-hero__badge {
  margin-bottom: 1rem;
}

.daatje-page-hero--compact + section.daatje-faq {
  padding-top: 3rem;
}

/* Grid content pages: first block after hero (e.g. Hoe werkt het) */
.daatje-page-hero--large + section.daatje-page-blocks > section.daatje-section:first-child {
  padding-top: 3rem;
}

.daatje-page-hero--large + section.daatje-page-blocks > section.daatje-section:first-child.pt-0 {
  padding-top: 0 !important;
}

.daatje-page-intro {
  max-width: 42rem;
  margin: 0 auto 2rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
}

.daatje-page-intro p:last-child {
  margin-bottom: 0;
}

.daatje-rte,
.daatje-page-content,
.daatje-page-blocks {
  font-family: var(--daatje-font-body);
}

/* RTE section blocks (inner pages) */
.daatje-rte .daatje-section,
section.daatje-section {
  padding-block: clamp(5rem, 8vw, 8rem);
}

.daatje-section--navy {
  background: #2b3b69;
  color: #fff;
  padding-block: clamp(4rem, 6vw, 6rem);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc(50vw - 640px));
}

.daatje-section--navy .daatje-section__inner {
  max-width: 64rem;
  margin: 0 auto;
}

.daatje-section--navy h2,
.daatje-section--navy h3 {
  color: #fff;
  font-family: var(--daatje-font-heading);
  font-weight: 400;
}

.daatje-section--navy p,
.daatje-section--navy li {
  color: #fff;
  opacity: 0.85;
}

.daatje-navy-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .daatje-navy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-navy-grid__item {
  text-align: center;
}

.daatje-navy-grid__icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: hsla(155, 70%, 37%, 0.2);
  color: var(--daatje-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.daatje-navy-grid__item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.daatje-navy-grid__item p {
  font-size: 0.875rem;
  opacity: 0.8;
}

.daatje-navy-grid__tagline {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.7;
}

/* Oplossingen: 3 stappen (Domeinexpert → AI-agents → Jouw team) */
.daatje-rte .daatje-section.daatje-section--py-md,
section.daatje-section.daatje-section--py-md {
  padding-block: 4rem;
}

.daatje-rte .daatje-section.daatje-section--py-lg,
section.daatje-section.daatje-section--py-lg {
  padding-block: 5rem;
}

@media (min-width: 768px) {
  .daatje-rte .daatje-section.daatje-section--py-md,
  section.daatje-section.daatje-section--py-md {
    padding-block: 6rem;
  }

  .daatje-rte .daatje-section.daatje-section--py-lg,
  section.daatje-section.daatje-section--py-lg {
    padding-block: 8rem;
  }
}

.daatje-section--oplossingen-steps {
  background: var(--daatje-navy);
  color: #fff;
  margin-inline: 0;
  padding-inline: 0;
}

.daatje-oplossingen-steps {
  display: grid;
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .daatje-oplossingen-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-oplossingen-steps__item {
  text-align: center;
}

.daatje-oplossingen-steps__icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: hsla(155, 70%, 37%, 0.2);
  color: var(--daatje-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.daatje-oplossingen-steps__icon svg {
  width: 2rem;
  height: 2rem;
}

.daatje-oplossingen-steps__item h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: #fff;
}

.daatje-oplossingen-steps__item p {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.8;
  color: #fff;
  margin: 0;
}

.daatje-oplossingen-steps__arrow {
  width: 1.25rem;
  height: 1.25rem;
  margin: 1rem auto 0;
  opacity: 0.4;
  color: #fff;
  display: none;
}

@media (min-width: 768px) {
  .daatje-oplossingen-steps__arrow {
    display: block;
  }
}

.daatje-oplossingen-steps__tagline {
  text-align: center;
  margin: 2rem 0 0;
  font-size: 0.875rem;
  font-style: italic;
  opacity: 0.7;
  color: #fff;
}

.daatje-section--teal-tint {
  background: hsla(155, 70%, 37%, 0.05);
  padding-block: clamp(4rem, 6vw, 6rem);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc(50vw - 640px));
  text-align: center;
}

.daatje-oplossingen__body .daatje-section--teal-tint {
  margin-inline: 0;
  padding-inline: 0;
}

.daatje-oplossingen__body .daatje-section--teal-tint .container {
  max-width: 42rem;
  text-align: center;
}

.daatje-section--teal-tint h2 {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  font-weight: 400;
  margin-bottom: 1rem;
}

.daatje-section--teal-tint p {
  max-width: 42rem;
  margin: 0 auto 2rem;
  color: hsl(60, 1%, 45%);
  line-height: 1.625;
}

.daatje-solution-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

.daatje-section__intro {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 4rem;
  color: hsl(60, 1%, 45%);
  font-size: 1rem;
  line-height: 1.625;
}

.daatje-oplossingen--structured {
  padding: 0;
}

/* Legacy ServiceOverview: hide auto-listed child services when Daatje body is present */
section#content.daatje-page-content .container:has(.daatje-rte .daatje-section) > .row.col-mb-50,
section#content .content-wrap .container:has(.entry-content .daatje-section) > .row.col-mb-50,
section#content .content-wrap .container:has(.entry-content .daatje-section) > .entry-content.mt-3:first-child,
section#content.daatje-oplossingen .daatje-service-list {
  display: none !important;
}

/* Intro below hero (legacy view) — match React hero typography */
section#content.daatje-page-content .container > .daatje-page-intro:first-child {
  max-width: 42rem;
  margin: -3rem auto 2.5rem;
  text-align: center;
}

section#content.daatje-page-content .container > .daatje-page-intro:first-child p:first-child {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--daatje-navy);
  opacity: 0.85;
  margin-bottom: 1rem;
}

section#content.daatje-page-content .container > .daatje-page-intro:first-child p:last-child {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--daatje-navy);
  opacity: 0.75;
  margin-bottom: 0;
}

section#content.daatje-page-content:has(.daatje-page-intro:first-child) {
  background: var(--daatje-creme);
  padding-top: 0;
}

section#content.daatje-page-content .container:has(.daatje-rte .daatje-section) > .daatje-rte {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

section#content .content-wrap .container:has(.entry-content .daatje-section) > .entry-content.mt-3:last-child {
  margin-top: 0 !important;
  padding: 0 !important;
}

section#content .content-wrap .container:has(.entry-content .daatje-section) > .entry-content.mt-3:last-child > .daatje-section:first-child {
  padding-top: 0;
}

.daatje-oplossingen__body > .daatje-section--py-md {
  padding-block: 4rem;
}

.daatje-oplossingen__body > .daatje-section--py-lg {
  padding-block: 5rem;
}

@media (min-width: 768px) {
  .daatje-oplossingen__body > .daatje-section--py-md {
    padding-block: 6rem;
  }

  .daatje-oplossingen__body > .daatje-section--py-lg {
    padding-block: 8rem;
  }
}

@media (min-width: 768px) {
  .daatje-solution-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-solution-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  box-shadow: 0 12px 40px hsla(224, 42%, 29%, 0.06);
}

.daatje-solution-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: hsla(155, 70%, 37%, 0.1);
  color: var(--daatje-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.daatje-solution-card h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
  color: var(--daatje-warm-black);
}

.daatje-solution-card__body {
  flex: 1 1 auto;
}

.daatje-solution-card p:not(.daatje-solution-card__tags) {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  margin: 0;
}

.daatje-solution-card__meta {
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
  margin: 0 0 0.75rem;
}

.daatje-solution-card__tags,
p.daatje-solution-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}

.daatje-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--daatje-font-body);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: hsla(155, 70%, 37%, 0.1);
  color: var(--daatje-teal);
}

.daatje-solution-card__btn {
  margin-top: auto;
  width: 100%;
  text-align: center;
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
}

.daatje-solution-card a:not(.daatje-btn) {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--daatje-coral);
  text-decoration: none;
}

.daatje-solution-card a:not(.daatje-btn):hover {
  text-decoration: underline;
}

.daatje-section--teal-tint .daatje-btn--navy,
.daatje-section--teal-tint a.daatje-btn {
  display: inline-block;
  margin-top: 0.5rem;
}

.daatje-section--teal-tint.daatje-section--center h2 {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.875rem, 3.5vw, 2.25rem);
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--daatje-warm-black);
}

.daatje-section--teal-tint.daatje-section--center p {
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  margin-bottom: 2rem;
}

/* Timeline steps (Hoe werkt het) */
.daatje-timeline-section .container {
  max-width: 56rem;
}

.daatje-timeline {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  .daatje-timeline::before {
    content: "";
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--daatje-border);
  }
}

.daatje-timeline__item {
  position: relative;
  margin: 0;
}

@media (min-width: 768px) {
  .daatje-timeline__item {
    padding-left: 5rem;
  }
}

.daatje-timeline__number {
  display: none;
}

@media (min-width: 768px) {
  .daatje-timeline__number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    background: var(--daatje-navy);
    color: #fff;
    font-family: var(--daatje-font-heading);
    font-size: 1.5rem;
    font-weight: 400;
  }
}

.daatje-timeline__card {
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .daatje-timeline__card {
    padding: 2rem;
  }
}

.daatje-timeline__card h3 {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--daatje-warm-black);
}

.daatje-timeline__text {
  font-size: 0.9375rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  margin-bottom: 1.5rem;
}

.daatje-timeline__deliverables-label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--daatje-warm-black);
}

.daatje-timeline__deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.daatje-timeline__deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(60, 1%, 45%);
}

.daatje-timeline__check {
  color: var(--daatje-teal);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Inner page shared section utilities */
.daatje-section--center {
  text-align: center;
}

.daatje-section__narrow {
  max-width: 48rem;
  margin: 0 auto;
}

.daatje-section-badge {
  display: inline-block;
  background: hsla(10, 76%, 57%, 0.1);
  color: var(--daatje-coral);
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-family: var(--daatje-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.daatje-section-intro {
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  max-width: 42rem;
  margin: 0 auto;
}

.daatje-prose {
  color: hsl(60, 1%, 45%);
  line-height: 1.625;
}

.daatje-prose p + p {
  margin-top: 1.5rem;
}

.daatje-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--daatje-coral);
  text-decoration: none;
}

.daatje-link-arrow:hover {
  text-decoration: underline;
}

/* Team grids (Over daatje) */
.daatje-team-grid--core {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .daatje-team-grid--core {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
}

.daatje-team-card__photo {
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  overflow: hidden;
  background: hsl(60, 1%, 92%);
  margin-bottom: 1rem;
}

.daatje-team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.daatje-team-card__name {
  font-family: var(--daatje-font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
  color: var(--daatje-warm-black);
}

.daatje-team-card__role {
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
  margin-bottom: 0.25rem;
}

.daatje-team-card__linkedin {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--daatje-coral);
  text-decoration: none;
  margin-bottom: 1rem;
}

.daatje-team-card__linkedin:hover {
  text-decoration: underline;
}

.daatje-team-card__bio {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  margin: 0;
}

.daatje-team-grid--specialists {
  display: grid;
  gap: 1.25rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .daatje-team-grid--specialists {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .daatje-team-grid--specialists {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-specialist-card {
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.25rem;
}

.daatje-specialist-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: hsla(10, 76%, 57%, 0.1);
  color: var(--daatje-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}

.daatje-specialist-card h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
  color: var(--daatje-warm-black);
}

.daatje-specialist-card p {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  margin: 0;
}

.daatje-section--coral .daatje-btn--on-primary {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* Legacy timeline alias */
.daatje-timeline__step {
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}

.daatje-timeline__step h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.daatje-timeline__step p,
.daatje-timeline__step li {
  font-size: 0.9375rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
}

.daatje-timeline__step ul {
  padding-left: 1.25rem;
  margin: 0.5rem 0 0;
}

.daatje-timeline__step li::marker {
  color: var(--daatje-teal);
}

/* CTA blocks on inner pages */
.daatje-section--coral {
  background: var(--daatje-coral);
  color: #fff;
  text-align: center;
  padding-block: clamp(5rem, 8vw, 8rem);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc(50vw - 640px));
}

.daatje-section--coral h2 {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 400;
  color: #fff;
  margin-bottom: 1.5rem;
}

.daatje-section--coral p {
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 42rem;
  margin: 0 auto 2.5rem;
}

.daatje-section--coral .daatje-btn--inverted,
.daatje-section--coral a.button {
  display: inline-block;
  background: #fff;
  color: var(--daatje-coral);
  padding: 0.875rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   Global typography overrides (Canvas → Daatje)
   ═══════════════════════════════════════════════════════════════ */

.daatje-section-heading .accent,
.daatje-section-heading em {
  font-family: var(--daatje-font-heading);
  font-style: italic;
  color: var(--daatje-coral);
}

body,
p,
li,
a,
span:not(.accent):not(.daatje-tag):not(.daatje-section-label):not(.daatje-pricing-card__badge),
label,
input,
textarea,
select,
button {
  font-family: var(--daatje-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  font-family: var(--daatje-font-heading) !important;
  font-weight: 400 !important;
}

#content .entry-content h2,
.daatje-rte h2,
.daatje-page-blocks h2,
.daatje-content-grid .col-xl-6 h3.h1 {
  font-size: clamp(1.875rem, 3.5vw, 2.25rem) !important;
  line-height: 1.2;
}

#content .entry-content h3,
.daatje-rte h3 {
  font-size: 1.25rem !important;
}

#content .entry-content p,
.daatje-rte p {
  font-size: 1rem;
  line-height: 1.625;
}

.text-larger.text-muted {
  font-size: 0.75rem !important;
}

.feature-box .fbox-content h3 {
  font-family: var(--daatje-font-heading) !important;
  font-weight: 400 !important;
}

.content-wrap .bg-light {
  background: #fff !important;
}

/* Legacy Canvas page-title → Daatje inner hero (until PageHeader.cshtml rebuild) */
.page-title.page-title-pattern {
  background: var(--daatje-creme) !important;
  background-image: none !important;
  padding: clamp(7rem, 10vw, 11rem) 0 clamp(5rem, 7vw, 8rem) !important;
  border: 0;
}

.page-title.page-title-pattern .page-title-row {
  justify-content: center;
}

.page-title.page-title-pattern .page-title-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}

.page-title.page-title-pattern .page-title-content h1 {
  order: 1;
  display: inline-block;
  width: auto;
  background: hsla(10, 76%, 57%, 0.1);
  color: var(--daatje-coral) !important;
  font-family: var(--daatje-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  margin-bottom: 2rem;
  text-transform: none;
  letter-spacing: normal;
}

.page-title.page-title-pattern .page-title-content > span {
  order: 2;
  display: block;
  font-family: var(--daatje-font-heading) !important;
  font-size: clamp(2.25rem, 5vw, 4.5rem) !important;
  font-weight: 400 !important;
  color: var(--daatje-warm-black) !important;
  line-height: 1.1;
  opacity: 1 !important;
}

.page-title.page-title-pattern .breadcrumb {
  display: none !important;
}

.page-title.page-title-pattern .page-title-row nav {
  display: none;
}

/* ═══ Communicatie-agents page ═══ */
.daatje-service-detail .daatje-page-blocks,
.daatje-service-detail#content {
  padding: 0;
}

.daatje-page-intro__lead {
  font-size: 1.125rem;
  color: hsl(60, 1%, 45%);
  margin-bottom: 1rem;
}

.daatje-challenge-grid__inner,
.daatje-split-grid,
.daatje-service-grid {
  display: grid;
  gap: 2rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .daatje-challenge-grid__inner,
  .daatje-split-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .daatje-service-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.daatje-challenge-card,
.daatje-split-card,
.daatje-service-card {
  background: hsla(0, 0%, 100%, 0.05);
  border: 1px solid hsla(0, 0%, 100%, 0.1);
  border-radius: 1rem;
  padding: 2rem;
}

.daatje-section:not(.daatje-section--navy) .daatje-split-card,
.daatje-section:not(.daatje-section--navy) .daatje-service-card {
  background: #fff;
  border-color: var(--daatje-border);
}

.daatje-challenge-card h3,
.daatje-split-card h3,
.daatje-service-card h3 {
  font-family: var(--daatje-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.daatje-split-card h3 span {
  margin-right: 0.5rem;
}

.daatje-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.daatje-list li {
  font-size: 0.875rem;
  line-height: 1.5;
  padding-left: 1.25rem;
  position: relative;
}

.daatje-section--navy .daatje-list li {
  color: #fff;
  opacity: 0.9;
}

.daatje-list--cross li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--daatje-coral);
}

.daatje-list--check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--daatje-teal);
}

.daatje-list--bullet li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--daatje-teal);
}

.daatje-section--navy .daatje-list--bullet li::before {
  color: var(--daatje-teal);
}

.daatje-section-heading--center {
  text-align: center;
  margin-bottom: 3rem;
}

.daatje-agents-grid {
  padding-block: clamp(5rem, 8vw, 8rem);
}

.daatje-agents-grid .daatje-section-header {
  margin-bottom: 4rem;
}

.daatje-card--agent {
  padding: 1.5rem;
}

.daatje-card--agent .daatje-card__emoji {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsla(155, 70%, 37%, 0.1);
  color: var(--daatje-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.daatje-agent-cards .daatje-card--agent:nth-child(3) .daatje-card__emoji {
  background: hsla(10, 76%, 57%, 0.1);
  color: var(--daatje-coral);
}

.daatje-card--agent .daatje-card__title {
  font-size: 1.25rem;
}

.daatje-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 56rem;
  margin: 0 auto 1.5rem;
}

.daatje-flow__step {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  background: #2b3b69;
  color: #fff;
}

.daatje-flow__step--accent {
  background: var(--daatje-coral);
  color: #fff;
}

.daatje-flow__arrow {
  color: hsl(60, 1%, 45%);
  font-size: 0.875rem;
}

.daatje-flow__note {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: hsl(60, 1%, 45%);
  line-height: 1.625;
}

.daatje-stats-grid__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .daatje-stats-grid__inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

.daatje-stat {
  text-align: center;
}

.daatje-stat__value {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  color: var(--daatje-teal);
  margin-bottom: 0.5rem;
}

.daatje-stat__label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.daatje-stat__sub {
  font-size: 0.75rem;
  opacity: 0.6;
}

.daatje-section--navy .daatje-stat__label,
.daatje-section--navy .daatje-stat__sub {
  color: #fff;
}

.daatje-service-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsla(155, 70%, 37%, 0.1);
  color: var(--daatje-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.daatje-service-card p {
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
  line-height: 1.625;
  margin: 0;
}

.daatje-section--teal-banner {
  background: var(--daatje-teal);
  color: #fff;
  padding-block: 4rem;
  text-align: center;
}

.daatje-teal-banner__text {
  font-family: var(--daatje-font-heading);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  margin: 0;
  max-width: 48rem;
  margin-inline: auto;
}

/* Legacy: agents grid via ContentSubTitle label */
.daatje-content-grid:has(.col-xl-6 > p.text-muted) .col-xl-6 > p.text-muted {
  /* Agents label hidden when heading shows */
}

.daatje-content-grid .col-xl-6.text-center h3:has(+ *) {
  /* agent section title */
}

/* ═══ Kennismaken page ═══ */
.daatje-kennismaken .daatje-page-hero__inner,
.daatje-kennismaken-form__wrap {
  max-width: 42rem;
  margin: 0 auto;
}

.daatje-kennismaken .daatje-page-hero__badge {
  margin-bottom: 1rem;
}

.daatje-kennismaken .daatje-page-hero__title {
  font-size: clamp(1.875rem, 4vw, 3rem);
}

.daatje-kennismaken .daatje-page-hero__intro p:first-child {
  font-size: clamp(1.0625rem, 2vw, 1.125rem);
}

.daatje-kennismaken {
  padding-bottom: 5rem;
}

.daatje-kennismaken .daatje-section.daatje-text {
  padding-block: 0 3rem;
}

.daatje-kennismaken__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0;
  font-size: 0.875rem;
  color: hsl(60, 1%, 45%);
}

@media (min-width: 640px) {
  .daatje-kennismaken__contact {
    flex-direction: row;
    gap: 1rem;
  }
}

.daatje-kennismaken__contact a {
  color: inherit;
  text-decoration: none;
}

.daatje-kennismaken__contact a:hover {
  color: var(--daatje-warm-black);
}

.daatje-kennismaken__contact-sep {
  display: none;
}

@media (min-width: 640px) {
  .daatje-kennismaken__contact-sep {
    display: inline;
  }
}

.daatje-kennismaken-form {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.daatje-kennismaken-form__card {
  background: #fff;
  border: 1px solid var(--daatje-border);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 12px 40px hsla(224, 42%, 29%, 0.06);
}

@media (min-width: 768px) {
  .daatje-kennismaken-form__card {
    padding: 2rem 2.5rem;
  }
}

.daatje-form__interests {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
}

.daatje-form__label,
.daatje-form__interests .daatje-form__label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--daatje-warm-black);
}

.daatje-form__interest-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.daatje-form__interest {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--daatje-border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.daatje-form__interest:has(.daatje-form__interest-input:checked) {
  border-color: var(--daatje-coral);
  background: hsla(10, 76%, 57%, 0.05);
}

.daatje-form__interest-input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--daatje-coral);
}

.daatje-form__interest-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--daatje-warm-black);
}

.daatje-form__row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .daatje-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.daatje-form__field {
  margin-bottom: 1rem;
}

.daatje-form__field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--daatje-warm-black);
}

.daatje-form__input {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--daatje-border);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-family: var(--daatje-font-body);
  background: var(--daatje-creme);
  color: var(--daatje-warm-black);
}

.daatje-form__input:focus {
  outline: none;
  border-color: var(--daatje-coral);
  box-shadow: 0 0 0 3px hsla(10, 76%, 57%, 0.15);
}

.daatje-form__textarea {
  resize: none;
  min-height: 6rem;
}

.daatje-form__submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--daatje-coral);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.daatje-form__submit:hover {
  opacity: 0.9;
}

.daatje-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.daatje-form-success {
  text-align: center;
  padding: 2rem 1rem;
}

.daatje-form-success__icon {
  display: block;
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.daatje-form-success__title {
  font-family: var(--daatje-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--daatje-warm-black);
}

.daatje-form-success__text {
  font-size: 0.9375rem;
  line-height: 1.625;
  color: hsl(60, 1%, 45%);
  margin: 0;
}

.daatje-form-alert {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.daatje-form-alert--success {
  background: var(--daatje-teal-light);
  border: 1px solid hsla(155, 70%, 37%, 0.2);
}

.daatje-form-alert--error {
  background: hsla(10, 76%, 57%, 0.08);
  border: 1px solid hsla(10, 76%, 57%, 0.2);
  font-family: var(--daatje-font-body);
}

.daatje-form-alert p {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

/* Zaaks Form Builder — match source Kennismaken form inside daatje card */
.daatje-kennismaken-form__card .daatje-zaaks-form-host,
.daatje-kennismaken-form__card .zaaks-form {
  max-width: 100%;
  width: 100%;
}

.daatje-kennismaken-form__card .zaaks-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
}

.daatje-kennismaken-form__card .zaaks-form-field {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0;
}

.daatje-kennismaken-form__card .zaaks-form-field.col-md-6 {
  width: 100%;
}

@media (min-width: 768px) {
  .daatje-kennismaken-form__card .zaaks-form-field.col-md-6 {
    width: calc(50% - 0.5rem);
    margin-right: 1rem;
  }

  .daatje-kennismaken-form__card .zaaks-form-field.col-md-6:nth-child(even) {
    margin-right: 0;
  }
}

.daatje-kennismaken-form__card .zaaks-form-field > label:not(.zaaks-form-checkbox-label) {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--daatje-warm-black);
}

.daatje-kennismaken-form__card .zaaks-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--daatje-warm-black);
}

.daatje-kennismaken-form__card .zaaks-form-choice-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.daatje-kennismaken-form__card .zaaks-form-choice-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--daatje-border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  margin: 0;
  background: transparent;
}

.daatje-kennismaken-form__card .zaaks-form-choice-option:has(input:checked) {
  border-color: var(--daatje-coral);
  background: hsla(10, 76%, 57%, 0.05);
}

.daatje-kennismaken-form__card .zaaks-form-choice-option input {
  margin-top: 0.125rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--daatje-coral);
}

.daatje-kennismaken-form__card .zaaks-form-choice-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--daatje-warm-black);
}

.daatje-kennismaken-form__card .zaaks-form-control,
.daatje-kennismaken-form__card .zaaks-form textarea.zaaks-form-control {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid var(--daatje-border);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-family: var(--daatje-font-body);
  background: var(--daatje-creme);
  color: var(--daatje-warm-black);
}

.daatje-kennismaken-form__card .zaaks-form textarea.zaaks-form-control {
  resize: none;
  min-height: 6rem;
}

.daatje-kennismaken-form__card .zaaks-form-control:focus,
.daatje-kennismaken-form__card .zaaks-form textarea.zaaks-form-control:focus {
  outline: none;
  border-color: var(--daatje-coral);
  box-shadow: 0 0 0 3px hsla(10, 76%, 57%, 0.15);
}

.daatje-kennismaken-form__card .zaaks-form-field-validation {
  color: var(--daatje-coral);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.daatje-kennismaken-form__card .zaaks-form-submit {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--daatje-coral);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--daatje-font-body);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.daatje-kennismaken-form__card .zaaks-form-submit:hover {
  opacity: 0.9;
}

.daatje-kennismaken-form__card .zaaks-form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.daatje-kennismaken-form__card .zaaks-form-message {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

.daatje-kennismaken-form__card .zaaks-form-message-error {
  background: hsla(10, 76%, 57%, 0.08);
  border: 1px solid hsla(10, 76%, 57%, 0.2);
  color: var(--daatje-warm-black);
}

.daatje-kennismaken-form__card .zaaks-form-loading {
  color: hsl(60, 1%, 45%);
  font-size: 0.9375rem;
  padding: 0;
}

.daatje-kennismaken-form__card .zaaks-form-honeypot {
  display: none !important;
}