/* pilatesstudio-werkwijze: block-port van ReactBitsPro Blocks/features-8 met ReactBitsPro Components/spiral-funnel
   (origineel gecompileerd) boven de drie kolommen. Tailwind uit de bron vertaald naar gescopete CSS; kleuren via --m-*. */
.msm-pilatesstudio-werkwijze {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 72px 16px 72px;
  --ww-muted: color-mix(in srgb, var(--m-muted, #69716d) 75%, var(--m-ink, #28312e));
  background: var(--m-bg, #ece9e1);
  color: var(--m-ink, #28312e);
  font-family: var(--m-font-body, "Albert Sans", "Segoe UI", system-ui, sans-serif);
  scroll-margin-top: 112px;
}
.msm-pilatesstudio-werkwijze *,
.msm-pilatesstudio-werkwijze *::before,
.msm-pilatesstudio-werkwijze *::after { box-sizing: border-box; }
.msm-pilatesstudio-werkwijze p,
.msm-pilatesstudio-werkwijze h2 { margin: 0; }
.msm-pilatesstudio-werkwijze [hidden] { display: none !important; }

/* features-8: max-w-[1400px] mx-auto, flex-col items-center */
.msm-pilatesstudio-werkwijze .ww-wrap {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.msm-pilatesstudio-werkwijze .ww-head { max-width: 44rem; text-align: center; }
.msm-pilatesstudio-werkwijze .ww-kicker {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-primary, #9e594b);
}
.msm-pilatesstudio-werkwijze .ww-title {
  font-family: var(--m-font-display, "Marcellus", Georgia, serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.msm-pilatesstudio-werkwijze .ww-intro {
  margin: 16px auto 0;
  max-width: 38rem;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ww-muted);
}

/* Trechter: 440 px boven de kolommen */
.msm-pilatesstudio-werkwijze .ww-funnel {
  position: relative;
  width: 100%;
  height: 340px;
  margin-top: 24px;
  overflow: hidden;
}
.msm-pilatesstudio-werkwijze .ww-gl { position: absolute; inset: 0; }
.msm-pilatesstudio-werkwijze .ww-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: url(#ww-still-grad);
  stroke-width: 1;
  transition: opacity 0.6s ease;
}
.msm-pilatesstudio-werkwijze .ww-stop-a { stop-color: var(--m-primary, #9e594b); }
.msm-pilatesstudio-werkwijze .ww-stop-b { stop-color: var(--m-accent2, #8a8d88); }
.msm-pilatesstudio-werkwijze .ww-still-rings { stroke: var(--m-primary, #9e594b); }
.msm-pilatesstudio-werkwijze .ww-funnel.is-live .ww-still { opacity: 0; }
.msm-pilatesstudio-werkwijze .ww-hint {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ww-muted);
  text-align: center;
}

/* features-8: grid-cols-1 sm:grid-cols-3 gap-10 sm:gap-6 w-full */
.msm-pilatesstudio-werkwijze .ww-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  width: 100%;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.msm-pilatesstudio-werkwijze .ww-funnel:not([hidden]) + .ww-hint + .ww-cols,
.msm-pilatesstudio-werkwijze .ww-funnel:not([hidden]) ~ .ww-cols { margin-top: 28px; }
/* flex flex-col items-center text-center gap-6 */
.msm-pilatesstudio-werkwijze .ww-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  cursor: pointer;
}
.msm-pilatesstudio-werkwijze .ww-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 8px 12px 0;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.msm-pilatesstudio-werkwijze .ww-pick:focus-visible { outline: 2px solid var(--m-primary, #9e594b); outline-offset: 4px; }
/* w-14 h-14 rounded-full met radiaal verloop (#f5f5f5 naar #e5e5e5 in de bron) */
.msm-pilatesstudio-werkwijze .ww-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--m-surface, #fbfaf6) 0%, var(--m-line, #d9d6cf) 100%);
  color: var(--m-ink, #28312e);
  transition: background 0.3s ease, color 0.3s ease;
}
.msm-pilatesstudio-werkwijze .ww-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* font-serif text-2xl sm:text-3xl leading-tight whitespace-pre-line */
.msm-pilatesstudio-werkwijze .ww-name {
  position: relative;
  display: block;
  padding-bottom: 12px;
  font-family: var(--m-font-display, "Marcellus", Georgia, serif);
  font-size: 24px;
  line-height: 1.25;
  white-space: pre-line;
  color: var(--m-ink, #28312e);
}
.msm-pilatesstudio-werkwijze .ww-name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 2px;
  margin-left: -28px;
  background: var(--m-primary, #9e594b);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.msm-pilatesstudio-werkwijze .ww-pick[aria-pressed="true"] .ww-name::after { transform: scaleX(1); }
.msm-pilatesstudio-werkwijze .ww-pick[aria-pressed="true"] .ww-icon { color: var(--m-primary, #9e594b); }
.msm-pilatesstudio-werkwijze .ww-pick:hover .ww-icon { color: var(--m-primary, #9e594b); }
.msm-pilatesstudio-werkwijze .ww-text {
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ww-muted);
}
/* mt-12 text-xs */
.msm-pilatesstudio-werkwijze .ww-note {
  margin-top: 48px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ww-muted);
  text-align: center;
}

@media (min-width: 640px) {
  .msm-pilatesstudio-werkwijze { padding: 88px 24px 80px; }
  .msm-pilatesstudio-werkwijze .ww-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .msm-pilatesstudio-werkwijze .ww-name { font-size: 30px; }
  .msm-pilatesstudio-werkwijze .ww-funnel { height: 440px; }
}
@media (min-width: 1024px) {
  .msm-pilatesstudio-werkwijze { padding: 112px 32px 96px; }
}

/* Originele CSS van spiral-funnel (React Bits Pro), gescoped. */
.msm-pilatesstudio-werkwijze .spiral-funnel {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}
.msm-pilatesstudio-werkwijze .spiral-funnel__content { position: relative; z-index: 10; width: 100%; height: 100%; }
.msm-pilatesstudio-werkwijze .spiral-funnel canvas { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .msm-pilatesstudio-werkwijze .ww-name::after,
  .msm-pilatesstudio-werkwijze .ww-icon,
  .msm-pilatesstudio-werkwijze .ww-still { transition: none; }
}