/* pilatesstudio-ervaringen: ReactBitsPro Blocks/cta-12 (block-port). Bouwtekeningraster met radiaal masker, paneel
   met gestaffelde kolom, getypte regel met blokcursor; hier met een lijntekening van een reformer en drie
   voorbeeldreacties. Tailwind-maten uit de bron vertaald naar CSS onder de root. */
.msm-pilatesstudio-ervaringen {
  --pte-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pte-mask: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 25%, black 80%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  padding: 64px 16px;
  background: var(--m-bg, #ece9e1);
  color: var(--m-ink, #28312e);
  font-family: var(--m-font-body, 'Albert Sans', Arial, sans-serif);
  scroll-margin-top: 112px;
}
.msm-pilatesstudio-ervaringen *,
.msm-pilatesstudio-ervaringen *::before,
.msm-pilatesstudio-ervaringen *::after { box-sizing: border-box; }
.msm-pilatesstudio-ervaringen [hidden] { display: none !important; }

/* Raster: 1 px in inkt op 6 procent om de 96 px, masker ellips 65 x 60 procent, transparant tot 25 en vol vanaf 80 */
.msm-pilatesstudio-ervaringen .pte-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--m-ink, #28312e) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--m-ink, #28312e) 6%, transparent) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: var(--pte-mask);
  mask-image: var(--pte-mask);
}
.msm-pilatesstudio-ervaringen .pte-wrap { position: relative; max-width: 1400px; margin: 0 auto; }

/* rounded-3xl, rand 1 px, vlak, overflow hidden */
.msm-pilatesstudio-ervaringen .pte-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--m-line, #d9d6cf);
  border-radius: 24px;
  background: var(--m-surface, #fbfaf6);
  padding-bottom: clamp(96px, 16vw, 220px);
}

/* Lijntekening van de reformer: lijnen van 1 px in inkt op 10 procent, met hetzelfde radiale masker */
.msm-pilatesstudio-ervaringen .pte-drawing {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--m-ink, #28312e);
  opacity: 0.1;
  -webkit-mask-image: var(--pte-mask);
  mask-image: var(--pte-mask);
}
.msm-pilatesstudio-ervaringen .pte-drawing svg { position: absolute; display: block; overflow: visible; }
.msm-pilatesstudio-ervaringen .pte-drawing svg * { vector-effect: non-scaling-stroke; }
.msm-pilatesstudio-ervaringen .pte-side { left: 50%; bottom: 16px; width: min(1040px, 96%); height: auto; transform: translateX(-50%); }
.msm-pilatesstudio-ervaringen .pte-top { top: 20px; right: 20px; width: clamp(130px, 24%, 320px); height: auto; }

/* relative z-10 mx-auto flex max-w-2xl flex-col items-center px-6 py-20 text-center sm:px-10 sm:py-28 */
.msm-pilatesstudio-ervaringen .pte-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 672px;
  margin: 0 auto;
  padding: 80px 24px 40px;
  text-align: center;
}

/* flex items-center gap-4; '//' en '\\' vanaf sm; label text-xs uppercase tracking 0,2 em */
.msm-pilatesstudio-ervaringen .pte-label { display: flex; align-items: center; gap: 16px; }
.msm-pilatesstudio-ervaringen .pte-slash { display: none; font-size: 14px; line-height: 1; color: var(--m-line, #d9d6cf); }
.msm-pilatesstudio-ervaringen .pte-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m-muted, #69716d);
}
.msm-pilatesstudio-ervaringen .pte-icon { flex: none; width: 16px; height: 16px; color: var(--m-ink, #28312e); }

/* mt-8 text-4xl sm:text-5xl md:text-6xl leading-[1.05] tracking-tight */
.msm-pilatesstudio-ervaringen .pte-title {
  margin: 32px 0 0;
  font-family: var(--m-font-display, 'Marcellus', Georgia, serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--m-ink, #28312e);
  text-wrap: balance;
}
/* mt-6 max-w-xl text-base sm:text-lg leading-relaxed */
.msm-pilatesstudio-ervaringen .pte-text { margin: 24px 0 0; max-width: 576px; font-size: 16px; line-height: 1.625; color: var(--m-muted, #69716d); }

/* mt-10 flex w-full flex-col gap-3 sm:w-auto sm:flex-row; knoppen rounded-full px-7 py-3.5 text-sm font-medium */
.msm-pilatesstudio-ervaringen .pte-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 40px; }
.msm-pilatesstudio-ervaringen .pte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--pte-ease), transform 0.2s var(--pte-ease);
}
.msm-pilatesstudio-ervaringen .pte-btn:active { transform: scale(0.98); }
.msm-pilatesstudio-ervaringen .pte-btn:focus-visible { outline: 2px solid var(--m-ink, #28312e); outline-offset: 2px; }
.msm-pilatesstudio-ervaringen .pte-btn--fill { background: var(--m-ink, #28312e); color: var(--m-surface, #fbfaf6); }
.msm-pilatesstudio-ervaringen .pte-btn--fill:hover { background: color-mix(in srgb, var(--m-ink, #28312e) 86%, var(--m-surface, #fbfaf6)); }
.msm-pilatesstudio-ervaringen .pte-btn--line { border: 1px solid var(--m-line, #d9d6cf); background: var(--m-surface, #fbfaf6); color: var(--m-ink, #28312e); }
.msm-pilatesstudio-ervaringen .pte-btn--line:hover { background: var(--m-bg, #ece9e1); }
.msm-pilatesstudio-ervaringen .pte-arrow { display: flex; transition: transform 0.2s var(--pte-ease); }
.msm-pilatesstudio-ervaringen .pte-btn--fill:hover .pte-arrow { transform: translateX(3px); }

/* mt-10 inline-flex items-center gap-3 rounded-full border px-5 py-2.5 text-xs; cursor 7 x 14 px, -ml-1 */
.msm-pilatesstudio-ervaringen .pte-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 40px 0 0;
  padding: 10px 20px;
  border: 1px solid var(--m-line, #d9d6cf);
  border-radius: 999px;
  background: var(--m-bg, #ece9e1);
  font-size: 12px;
  line-height: 1.4;
  color: var(--m-muted, #69716d);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.msm-pilatesstudio-ervaringen .pte-clock { flex: none; width: 14px; height: 14px; color: var(--m-muted, #69716d); }
.msm-pilatesstudio-ervaringen .pte-line,
.msm-pilatesstudio-ervaringen .pte-typed { white-space: pre-wrap; color: var(--m-ink, #28312e); }
.msm-pilatesstudio-ervaringen .pte-line.is-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.msm-pilatesstudio-ervaringen .pte-cursor { flex: none; width: 7px; height: 14px; margin-left: -4px; background: var(--m-ink, #28312e); }
.msm-pilatesstudio-ervaringen.is-blink .pte-cursor { animation: pilatesstudio-ervaringen-blink 1.1s linear infinite; }
@keyframes pilatesstudio-ervaringen-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Eigen toevoeging: drie voorbeeldreacties, gap 16, rounded-2xl, rand, vlak in --m-bg */
.msm-pilatesstudio-ervaringen .pte-quotes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
}
.msm-pilatesstudio-ervaringen .pte-quote { min-width: 0; }
.msm-pilatesstudio-ervaringen .pte-figure {
  height: 100%;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--m-line, #d9d6cf);
  border-radius: 16px;
  background: var(--m-bg, #ece9e1);
  text-align: left;
}
.msm-pilatesstudio-ervaringen .pte-who { display: flex; align-items: center; gap: 12px; }
.msm-pilatesstudio-ervaringen .pte-initials {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--m-line, #d9d6cf);
  border-radius: 6px;
  background: var(--m-surface, #fbfaf6);
  font-size: 12px;
  font-weight: 500;
  color: var(--m-ink, #28312e);
  font-variant-numeric: tabular-nums;
}
.msm-pilatesstudio-ervaringen .pte-person { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.msm-pilatesstudio-ervaringen .pte-name { font-size: 14px; font-weight: 500; color: var(--m-ink, #28312e); }
.msm-pilatesstudio-ervaringen .pte-lesson { font-size: 13px; color: var(--m-muted, #69716d); }
.msm-pilatesstudio-ervaringen .pte-tag {
  flex: none;
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid var(--m-line, #d9d6cf);
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--m-muted, #69716d);
}
.msm-pilatesstudio-ervaringen .pte-quote-text { margin: 14px 0 0; }
.msm-pilatesstudio-ervaringen .pte-quote-text p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--m-ink, #28312e); }
.msm-pilatesstudio-ervaringen .pte-note { position: relative; z-index: 1; margin: 20px auto 0; padding: 0 20px; text-align: center; font-size: 13px; color: var(--m-muted, #69716d); }

@media (min-width: 640px) {
  .msm-pilatesstudio-ervaringen { padding: 80px 24px; }
  .msm-pilatesstudio-ervaringen .pte-slash { display: block; }
  .msm-pilatesstudio-ervaringen .pte-col { padding: 112px 40px 48px; }
  .msm-pilatesstudio-ervaringen .pte-title { font-size: 48px; }
  .msm-pilatesstudio-ervaringen .pte-text { font-size: 18px; }
  .msm-pilatesstudio-ervaringen .pte-actions { flex-direction: row; justify-content: center; width: auto; }
  .msm-pilatesstudio-ervaringen .pte-btn { width: auto; }
  .msm-pilatesstudio-ervaringen .pte-quotes { padding: 0 40px; }
}
@media (min-width: 768px) {
  .msm-pilatesstudio-ervaringen .pte-title { font-size: 60px; }
  .msm-pilatesstudio-ervaringen .pte-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .msm-pilatesstudio-ervaringen { padding: 96px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-pilatesstudio-ervaringen .pte-btn,
  .msm-pilatesstudio-ervaringen .pte-arrow { transition: none; }
  .msm-pilatesstudio-ervaringen .pte-btn:active { transform: none; }
  .msm-pilatesstudio-ervaringen .pte-btn--fill:hover .pte-arrow { transform: none; }
  .msm-pilatesstudio-ervaringen.is-blink .pte-cursor { animation: none; }
}