:root {
  --ss-ink: #263248;
  --ss-ink-soft: #536078;
  --ss-cream: #f7f2e9;
  --ss-paper: #fffdf8;
  --ss-coral: #f2745f;
  --ss-coral-dark: #dc5e49;
  --ss-sage: #b9cdbd;
  --ss-sage-light: #e6eee7;
  --ss-yellow: #f1ca67;
  --ss-yellow-light: #fff3c7;
  --ss-line: rgba(38, 50, 72, 0.12);
  --ss-shadow: 0 18px 50px rgba(38, 50, 72, 0.09);
  --ss-radius: 1.45rem;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ss-ink);
  background: var(--ss-cream);
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.65;
}

/*
 * Horizontale overloop bij de bron oplossen in plaats van wegstoppen.
 *
 * Bootstrap geeft .container een padding van een halve gutter (12px), maar de
 * klasse g-5 zet --bs-gutter-x op 3rem. De rij krijgt dan negatieve marges van
 * -24px, waar de container er maar 12px van opvangt. Die 12px per kant steekt
 * buiten het scherm en veroorzaakt het horizontaal scrollen.
 *
 * Door de container-padding gelijk te maken aan een halve g-5-gutter vallen de
 * randen van de rij exact samen met die van de container. Zo is
 * overflow-x: hidden op de body niet meer nodig — dat verbergt niet alleen het
 * probleem, maar breekt in sommige browsers ook position: sticky.
 */
.container,
.container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ss-ink);
  font-weight: 750;
  letter-spacing: -0.025em;
}

img { max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-navbar {
  background: rgba(247, 242, 233, .9);
  border-bottom: 1px solid rgba(38, 50, 72, .08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1030;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(38,50,72,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-brand {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  color: var(--ss-ink) !important;
}
.navbar-brand .brand-dot { color: var(--ss-coral); }
.nav-link {
  color: var(--ss-ink) !important;
  font-weight: 700;
  position: relative;
  padding-inline: .85rem !important;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .15rem;
  height: 3px;
  border-radius: 99px;
  background: var(--ss-coral);
  transform: scaleX(0) rotate(-1deg);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1) rotate(-1deg); }

.btn-coral {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ss-coral);
  --bs-btn-border-color: var(--ss-coral);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ss-coral-dark);
  --bs-btn-hover-border-color: var(--ss-coral-dark);
  --bs-btn-active-bg: var(--ss-coral-dark);
  --bs-btn-active-border-color: var(--ss-coral-dark);
  border-radius: 999px;
  font-weight: 800;
  border: 2.5px solid var(--ss-coral-dark);
  padding: .85rem 1.75rem;
  letter-spacing: .01em;
  transition: transform .12s ease, background .15s ease;
}
.btn-coral:hover { transform: translateY(-2px); }
.btn-coral:active { transform: translateY(1px); }
.btn-ink {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ss-ink);
  --bs-btn-border-color: var(--ss-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #172238;
  --bs-btn-hover-border-color: #172238;
  border-radius: 999px;
  font-weight: 800;
  border: 2.5px solid #0e1928;
  padding: .85rem 1.75rem;
  letter-spacing: .01em;
  transition: transform .12s ease;
}
.btn-ink:hover { transform: translateY(-2px); }
.btn-ink:active { transform: translateY(1px); }
.btn-link-ss {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  color: var(--ss-ink);
  text-decoration: none;
  border: 2px solid var(--ss-ink);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  transition: background .15s ease, color .15s ease;
}
.btn-link-ss:hover {
  background: var(--ss-ink);
  color: #fff;
}
.btn-outline-ss {
  --bs-btn-color: var(--ss-ink);
  --bs-btn-border-color: var(--ss-ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ss-ink);
  --bs-btn-hover-border-color: var(--ss-ink);
  --bs-btn-active-bg: var(--ss-ink);
  --bs-btn-active-border-color: var(--ss-ink);
  background: transparent;
  border-radius: 999px;
  font-weight: 800;
  border: 2.5px solid var(--ss-ink);
  padding: .85rem 1.75rem;
  letter-spacing: .01em;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn-outline-ss:hover { transform: translateY(-2px); }
.btn-outline-ss:active { transform: translateY(1px); }


.hero {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 3.5rem;
  position: relative;
  overflow-x: clip;
}
/*.hero::before {
  content: "";
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: rgba(185, 205, 189, .22);
  filter: blur(4px);
  top: 1rem;
  right: -10rem;
  z-index: -1;
}*/
.hero-title {
  font-size: clamp(3rem, 5.8vw, 5.4rem);
  line-height: .94;
  max-width: 12ch;
  margin-bottom: 1.5rem;
}
.hero-title.is-compact { font-size: clamp(3rem, 5.8vw, 5.4rem); }
.hero-copy {
  max-width: 38rem;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--ss-ink-soft);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .9rem;
  border-radius: 999px;
  background: var(--ss-sage-light);
  color: var(--ss-ink);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.25rem;
  line-height: 1;
  transform: rotate(-.5deg);
  margin-bottom: 1.1rem;
}
.signature {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ss-ink);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.65rem;
  transform: rotate(-.6deg);
}
.signature i { color: var(--ss-coral); font-size: 1.2rem; }

.hero-art {
  position: relative;
  min-height: 24rem;
  display: grid;
  place-items: center;
}
.hero-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2rem;
}
.hero-art-speciaal {
  position: relative;
  min-height: 24rem;
  display: grid;
  place-items: center;
}
.hero-art-speciaal::before,
.hero-art-speciaal::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 45% 55% 60% 40% / 50% 42% 58% 50%;
}
.hero-art-speciaal::before {
  width: 90%;
  height: 90%;
  background: rgba(185, 205, 189, .52);
  transform: rotate(-3deg);
}
.hero-art-speciaal::after {
  width: 42%;
  height: 42%;
  right: 0;
  bottom: 1rem;
  background: rgba(241, 202, 103, .7);
  transform: rotate(12deg);
}
.hero-art-speciaal img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2rem;
}
.doodle-bubble {
  position: absolute;
  right: .5rem;
  top: -.75rem;
  background: var(--ss-paper);
  border: 3px solid var(--ss-ink);
  border-radius: 50%;
  padding: .7rem 1.25rem;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.5rem;
  line-height: 1;
  transform: rotate(3deg);
}

.section-space { padding: clamp(3.75rem, 7vw, 6.25rem) 0; }
.section-tight { padding: clamp(2.8rem, 5vw, 4.5rem) 0; }
.section-title {
  font-size: clamp(2.15rem, 4vw, 3.65rem);
  line-height: 1.03;
  margin-bottom: 1rem;
}
.section-kicker {
  color: var(--ss-coral-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
}
.underline-coral {
  display: inline;
  background-image: linear-gradient(transparent 78%, rgba(242,116,95,.7) 0);
  background-size: 100% 100%;
}

.paper-section {
  background: rgba(255, 253, 248, .78);
  border-top: 1px solid rgba(38,50,72,.07);
  border-bottom: 1px solid rgba(38,50,72,.07);
}

.ss-card {
  height: 100%;
  background: rgba(255, 253, 248, .92);
  border: 1.5px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 1.65rem;
  transition: transform .2s ease, border-color .2s ease;
}
.ss-card:hover {
  /*transform: translateY(-4px);*/
  border-color: var(--ss-sage);
}
/* Kaarten die onder elkaar staan in één kolom mogen niet de volle
   kolomhoogte pakken — height:100% hierboven is bedoeld voor kaarten
   die náást elkaar in een rij even hoog moeten zijn. */
.ss-card.is-stacked { height: auto; }
.ss-card.sage { background: var(--ss-sage-light); }
.ss-card.yellow { background: var(--ss-yellow-light); }
.ss-card.coral-soft { background: #fff0ec; }
.ss-card.title-center h3,
.ss-card.title-center .h3,
.ss-card.title-center .h4,
.ss-card.title-center .h5 { text-align: center; }
.ss-card.body-center p { text-align: center; }

.icon-orb {
  width: 3.75rem;
  height: 3.75rem;
  display: grid;
  place-items: center;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: var(--ss-sage-light);
  color: var(--ss-ink);
  font-size: 1.55rem;
  margin: 0 auto 1rem;
}
.icon-orb.coral { background: #ffe2db; color: var(--ss-coral-dark); }
.icon-orb.yellow { background: var(--ss-yellow-light); }

#start-sparring   .icon-orb { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
#sales-sprint     .icon-orb { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
#startup-sidekick .icon-orb { border-radius: 50% 50% 40% 60% / 70% 30% 60% 40%; }

.audience-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: .85rem;
  padding: .65rem .9rem;
  background: var(--ss-sage-light);
  font-weight: 800;
  margin: .25rem;
}

.quote-card {
  background: var(--ss-yellow);
  border: 0;
  color: var(--ss-ink);
  position: relative;
  overflow: hidden;
}
.quote-card::before {
  content: "“";
  position: absolute;
  top: -.75rem;
  left: 1rem;
  font-size: 7rem;
  line-height: 1;
  color: rgba(242,116,95,.55);
  font-family: Georgia, serif;
}
.quote-card blockquote { position: relative; z-index: 1; }

.value-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 1px solid var(--ss-line);
  border-radius: .85rem;
  background: var(--ss-paper);
  font-weight: 800;
}
.value-pill i { color: var(--ss-coral); }

.steps {
  counter-reset: ss-step;
}
.step-card {
  position: relative;
  padding-top: 2.2rem;
}
.step-card::before {
  counter-increment: ss-step;
  content: counter(ss-step);
  position: absolute;
  top: -.9rem;
  left: 1.35rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--ss-sage);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  border: 5px solid var(--ss-cream);
}

.pricing-card {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.pricing-card .btn { margin-top: auto; }
.pricing-card.featured {
  border: 2px solid #7ba18a;
  /* transform: translateY(-.5rem); */
}
.pricing-badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  background: #769783;
  color: #fff;
  padding: .35rem .9rem;
  border-radius: 999px;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.2rem;
  white-space: nowrap;
}
.price {
  text-align: center;
  font-family: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: -.04em;
}
/*
 * Hangende inspringing in plaats van flex. Met display:flex op de li wordt
 * elke <strong> of <em> in het item een eigen flex-item dat níét meebreekt
 * met de tekst eromheen; de regel wordt dan zo breed als nodig en duwt de
 * pagina open. Met een absoluut geplaatst icoon blijft de tekst gewoon inline
 * en breekt ze normaal af.
 */
.check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: .65rem; }
.check-list i { position: absolute; left: 0; top: .3rem; color: #6e9b7c; }

.cta-band {
  background: var(--ss-ink);
  color: #fff;
  border-radius: 2rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band::before {
  content: "↝";
  font-family: "Segoe Print", "Bradley Hand", cursive;
  color: var(--ss-yellow);
  font-size: 8rem;
  position: absolute;
  left: 2rem;
  bottom: -2.4rem;
  transform: rotate(-8deg);
  opacity: .9;
}
.cta-band::after {
  content: "✦  ☆";
  color: var(--ss-yellow);
  font-size: 2rem;
  position: absolute;
  right: 2.5rem;
  top: 1.25rem;
  transform: rotate(8deg);
}

.profile-card img {
  width: 10.5rem;
  height: 10.5rem;
  object-fit: cover;
  border-radius: 46% 54% 49% 51% / 55% 42% 58% 45%;
}

/* Sidekick feature strip */
.sidekick-feature {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  background: var(--ss-sage-light);
  border-radius: var(--ss-radius);
  border: 1.5px solid rgba(185,205,189,.6);
  padding: 2rem 2.5rem;
}
.sidekick-feature__img {
  position: relative;
  flex: 0 0 auto;
}
.sidekick-feature__img img {
  width: 11rem;
  height: 11rem;
  object-fit: cover;
  border-radius: 46% 54% 49% 51% / 55% 42% 58% 45%;
  border: 3px solid rgba(38,50,72,.06);
}
.doodle-tag {
  position: absolute;
  bottom: -.4rem;
  right: -1.2rem;
  background: var(--ss-yellow);
  border: 2px solid var(--ss-ink);
  border-radius: .65rem;
  padding: .28rem .65rem;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: .9rem;
  transform: rotate(3deg);
  white-space: nowrap;
}

.form-control, .form-select {
  border-radius: .85rem;
  border-color: rgba(38, 50, 72, .16);
  background: rgba(255,255,255,.72);
  padding: .8rem 1rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ss-coral);
  box-shadow: 0 0 0 .25rem rgba(242, 116, 95, .15);
}
.form-label { font-weight: 800; }

.accordion-item {
  border: 1px solid var(--ss-line) !important;
  border-radius: 1rem !important;
  overflow: hidden;
  background: var(--ss-paper);
  margin-bottom: .75rem;
}
.accordion-button {
  font-weight: 800;
  color: var(--ss-ink);
  background: var(--ss-paper);
}
.accordion-button:not(.collapsed) {
  color: var(--ss-ink);
  background: var(--ss-sage-light);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: 0 0 0 .25rem rgba(185,205,189,.35); }

.site-footer {
  padding: clamp(4rem, 7vw, 6.5rem) 0 0;
  color: var(--ss-ink-soft);
  background: var(--ss-paper);
  border-top: 2px dashed rgba(38,50,72,.1);
  margin-top: 2rem;
}
.footer-about {
  font-size: .95rem;
  margin-bottom: 1rem;
  color: var(--ss-ink-soft);
  max-width: 32rem;
}
.footer-social-link {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--ss-line);
  background: var(--ss-cream);
  color: var(--ss-ink);
  font-size: 1.05rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.footer-social-link:hover {
  background: var(--ss-coral);
  border-color: var(--ss-coral);
  color: #fff;
}
.footer-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--ss-line);
  border-bottom: 1px solid var(--ss-line);
}
.footer-trust-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: .9rem;
  color: var(--ss-ink);
}
.footer-trust-item i {
  color: var(--ss-coral);
  font-size: 1rem;
}
.footer-tagline {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ss-ink);
  line-height: 1.3;
  margin-bottom: .4rem;
}
.footer-handwrite {
  display: inline-block;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.3rem;
  color: var(--ss-coral);
  transform: rotate(-1.5deg);
}
.footer-col-heading {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  color: var(--ss-coral-dark);
  margin-bottom: .85rem;
}
.footer-link { text-decoration: none; font-weight: 600; }
.footer-link:hover { color: var(--ss-coral-dark); }
.footer-legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ss-line);
  opacity: .75;
  font-size: .85rem;
  line-height: 1.6;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: 1.25rem 0;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

 .worry-notes { display: flex; flex-wrap: wrap; gap: .75rem; }
  .worry-note {
    display: inline-block;
    background: var(--ss-yellow-light);
    border: 1.5px dashed rgba(38, 50, 72, 0.35);
    border-radius: .6rem;
    padding: .55rem .85rem;
    font-family: "Segoe Print", "Bradley Hand", cursive;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--ss-ink);
    transform: rotate(-2deg);
    transition: transform .15s ease;
  }
  .worry-note:nth-child(2) { transform: rotate(1.5deg); background: var(--ss-sage-light); }
  .worry-note:nth-child(3) { transform: rotate(-1deg); }
  .worry-note:hover { transform: rotate(0) scale(1.03); }
  .worry-note--niet { background: #ffe2db !important; border-color: rgba(220, 94, 73, 0.4) !important; }
  .worry-note--wel { background: var(--ss-sage-light) !important; border-color: rgba(107, 156, 122, 0.4) !important; }
@media (max-width: 991.98px) {
  .navbar-toggler {
    position: relative;
    z-index: 10;
  }
  .navbar-collapse {
    background: var(--ss-paper);
    border: 1px solid var(--ss-line);
    border-radius: 1rem;
    padding: 1rem;
    margin-top: .75rem;
  }
  .nav-link::after { left: 0; right: auto; width: 2.5rem; }
  /* clip in plaats van hidden: houdt de decoratieve vormen binnen zonder
     een scrollcontainer te maken (en zonder position: sticky te breken) */
  .hero { padding-top: 4rem; overflow-x: clip; }
  .hero::before { display: none; }
  .hero-art { min-height: auto; margin-top: 2.5rem; }
  .hero-art-speciaal { min-height: auto; margin-top: 2.5rem; }
  .doodle-bubble { top: -1.4rem; right: 1rem; font-size: 1.25rem; }
  .pricing-card.featured { transform: none; }
  .sidekick-feature {
    flex-direction: column;
    padding: 1.75rem;
    gap: 1.5rem;
    text-align: center;
  }
  .doodle-tag { right: 50%; transform: translateX(50%) rotate(2deg); bottom: -1.1rem; }
}

@media (max-width: 575.98px) {
  .hero-title { font-size: clamp(3rem, 5.8vw, 5.4rem) }
  .hero-title.is-compact { font-size: clamp(2.6rem, 13vw, 4rem); }
  .ss-card { padding: 1.3rem; }
  .cta-band::before, .cta-band::after { opacity: .28; }
  .cta-band { border-radius: 1.35rem; }
  .signature { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Honeypot: verborgen spamveld op het contactformulier.
   Bewust géén display:none — dat herkennen betere spambots.
   Het veld wordt uit beeld geschoven en is niet bereikbaar via tab of screenreader. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* --- Aanbod: vragenlijst, programma-opbouw en de uurtariefbalk ------------ */

/* "Voor wie?" — vragen waar iemand in vastzit */
.question-list { list-style: none; padding: 0; margin: .85rem 0 0; }
.question-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .5rem;
  font-size: .95rem;
  color: var(--ss-ink-soft);
}
.question-list i { position: absolute; left: 0; top: .28rem; color: var(--ss-coral); }

/* Genummerde opbouw van een traject */
.step-list {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: .85rem 0 0;
}
.step-list li {
  counter-increment: stap;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .8rem;
  font-size: .95rem;
}
.step-list li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ss-sage-light);
  border: 1.5px solid var(--ss-sage);
  color: var(--ss-ink);
  font-weight: 800;
  font-size: .8rem;
  display: grid;
  place-items: center;
}
.step-list strong { display: block; line-height: 1.35; }
.step-list span { color: var(--ss-ink-soft); }

/* Kleine meta-regel onder de prijs */
.price-meta {
  color: var(--ss-ink-soft);
  font-size: .95rem;
  margin-top: -.25rem;
}

/* Accentkader binnen een kaart, voor een belofte of nuance */
.card-note {
  background: rgba(241, 202, 103, .25);
  border-radius: 1rem;
  padding: .85rem 1rem;
  font-size: .92rem;
  margin-top: 1.25rem;
}
.card-note i { color: var(--ss-coral); }

/* De uurtariefbalk onder de drie formules */
.pricing-strip {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--ss-sage-light);
  border: 1.5px solid rgba(185, 205, 189, .8);
  border-radius: var(--ss-radius);
  padding: 1.75rem 2.25rem;
}
.pricing-strip__body { flex: 1 1 auto; }
.pricing-strip__price {
  flex: 0 0 auto;
  text-align: center;
  line-height: 1.1;
}
.pricing-strip__price .price { font-size: clamp(2.2rem, 3vw, 2.9rem); }
.pricing-strip .btn { flex: 0 0 auto; }

@media (max-width: 991.98px) {
  .pricing-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .pricing-strip .btn { width: 100%; }
  .pricing-strip__price { text-align: left; }
}

/* --- Detailvensters bij de trajecten ------------------------------------- */
.ss-modal .modal-content {
  background: var(--ss-paper);
  border: 1.5px solid var(--ss-line);
  border-radius: var(--ss-radius);
}
.ss-modal .modal-header {
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 1px solid var(--ss-line);
  padding: 1.5rem 1.75rem 1.25rem;
}
.ss-modal .modal-body { padding: 1.5rem 1.75rem; }
.ss-modal .modal-footer {
  border-top: 1px solid var(--ss-line);
  padding: 1.25rem 1.75rem;
  gap: .75rem;
}
.ss-modal .modal-footer > * { margin: 0; }
.ss-modal .step-list li:last-child,
.ss-modal .check-list li:last-child { margin-bottom: 0; }

/* Subtiele tekstknop die het detailvenster opent */
.link-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  margin-bottom: .75rem;
  padding: .35rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 800;
  color: var(--ss-coral-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-more:hover { color: var(--ss-ink); }

button.btn-link-ss {
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* Tekst die volgt op een opsomming in een detailvenster mag niet vastplakken */
.ss-modal .check-list + p,
.ss-modal .question-list + p { margin-top: .85rem; }

@media (max-width: 575.98px) {
  /* Knoppen onderaan het detailvenster: hoofdactie bovenaan, beide volle breedte */
  .ss-modal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .ss-modal .modal-footer > * { width: 100%; justify-content: center; }
}

/* --- Toestemmingsbalk voor bezoekersstatistieken ------------------------- */
.cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080; /* boven de sticky navigatie, onder een geopende modal */
  background: var(--ss-paper);
  border-top: 1.5px solid var(--ss-line);
  box-shadow: 0 -12px 40px rgba(38, 50, 72, .1);
  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom));
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.cookiebar__body { flex: 1 1 auto; }
.cookiebar__titel {
  font-family: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", sans-serif;
  font-weight: 750;
  font-size: 1.05rem;
  margin: 0 0 .25rem;
}
.cookiebar__tekst {
  margin: 0;
  font-size: .92rem;
  color: var(--ss-ink-soft);
  max-width: 62ch;
}
.cookiebar__tekst a { font-weight: 700; }
.cookiebar__knoppen {
  flex: 0 0 auto;
  display: flex;
  gap: .75rem;
}
/* Beide knoppen even groot en even zwaar: weigeren mag niet moeilijker zijn */
.cookiebar__knoppen .btn {
  padding: .7rem 1.5rem;
  min-width: 10rem;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .cookiebar { padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom)); }
  .cookiebar__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookiebar__knoppen .btn { flex: 1 1 0; min-width: 0; }
}

/* Knop die eruitziet als een footerlink (voor "Cookievoorkeuren") */
.footer-link-knop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-link-knop:hover { color: var(--ss-coral-dark); }