/* pensioenadviseur-kennismaking: ReactBitsPro Blocks/contact-6 (block-port, gecentreerde kaart) boven
   ReactBitsPro Components/horizon-bloom (origineel gecompileerd, three uit _shared/vendor).
   Kleuren via --m-*, tinten met color-mix. */
.msm-pensioenadviseur-kennismaking {
  --pkm-ease: cubic-bezier(0.42, 0, 0.58, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  min-height: var(--rb-section-min-h, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px max(64px, 22vh);
  background: var(--m-ink, #172536);
  color: var(--m-ink, #172536);
  font-family: var(--m-font-body, 'Nunito Sans', Arial, sans-serif);
  scroll-margin-top: 112px;
}
.msm-pensioenadviseur-kennismaking *,
.msm-pensioenadviseur-kennismaking *::before,
.msm-pensioenadviseur-kennismaking *::after { box-sizing: border-box; }

/* Terugval zonder WebGL: verloop van inkt naar marine met een warme rand onderaan. */
.msm-pensioenadviseur-kennismaking .pkm-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(90% 26% at 50% 100%, color-mix(in srgb, var(--m-primary, #d47b32) 55%, transparent) 0%, color-mix(in srgb, var(--m-primary, #d47b32) 18%, transparent) 45%, transparent 75%),
    linear-gradient(180deg, var(--m-ink, #172536) 0%, var(--m-ink, #172536) 35%, var(--m-accent2, #203650) 100%);
}
.msm-pensioenadviseur-kennismaking .pkm-horizon { position: absolute; inset: 0; z-index: 0; }
/* horizon-bloom.css uit de bron, gescoped */
.msm-pensioenadviseur-kennismaking .horizon-bloom {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}

/* Inhoud boven de horizon; alleen kaart en regels vangen de aanwijzer, de lucht krijgt tikken voor poollicht. */
.msm-pensioenadviseur-kennismaking .pkm-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  pointer-events: none;
}
.msm-pensioenadviseur-kennismaking .pkm-card,
.msm-pensioenadviseur-kennismaking .pkm-facts { pointer-events: auto; }

/* contact-6: relative w-full max-w-lg rounded-3xl border p-10 sm:p-14, alles gecentreerd */
.msm-pensioenadviseur-kennismaking .pkm-card {
  position: relative;
  width: 100%;
  max-width: 512px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  border: 1px solid var(--m-line, #ddd5c8);
  border-radius: 24px;
  background: var(--m-surface, #fbf8f2);
  text-align: center;
  transition: max-width 0.35s var(--pkm-ease);
}
.msm-pensioenadviseur-kennismaking.is-open .pkm-card { max-width: 672px; }
.msm-pensioenadviseur-kennismaking .pkm-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--m-line, #ddd5c8);
  border-radius: 50%;
  background: var(--m-bg, #f4f0e8);
  color: var(--m-ink, #172536);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--m-ink, #172536) 8%, transparent);
}
.msm-pensioenadviseur-kennismaking .pkm-title {
  margin: 24px 0 0;
  font-family: var(--m-font-display, 'Spectral', Georgia, serif);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--m-ink, #172536);
}
.msm-pensioenadviseur-kennismaking .pkm-text {
  max-width: 384px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--m-muted, #66717c);
}
.msm-pensioenadviseur-kennismaking .pkm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--m-ink, #172536);
  color: var(--m-surface, #fbf8f2);
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s var(--pkm-ease);
}
.msm-pensioenadviseur-kennismaking .pkm-button[hidden] { display: none; }
.msm-pensioenadviseur-kennismaking .pkm-button:hover { background: var(--m-accent2, #203650); }
.msm-pensioenadviseur-kennismaking .pkm-button:focus-visible {
  outline: 2px solid var(--m-primary, #d47b32);
  outline-offset: 3px;
}
.msm-pensioenadviseur-kennismaking .pkm-button svg { transition: transform 0.35s var(--pkm-ease); }
.msm-pensioenadviseur-kennismaking .pkm-button[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Boekingsvak onder de tekst, in dezelfde kaart */
.msm-pensioenadviseur-kennismaking .pkm-panel { width: 100%; margin-top: 28px; text-align: left; }
.msm-pensioenadviseur-kennismaking .pkm-panel[hidden] { display: none; }
.msm-pensioenadviseur-kennismaking .pkm-panel.is-moving { overflow: hidden; }
.msm-pensioenadviseur-kennismaking .pkm-panel .ms-booking-demo { width: 100%; }
.msm-pensioenadviseur-kennismaking .pkm-panel .ms-title {
  font-family: var(--m-font-display, 'Spectral', Georgia, serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Drie regels onder de kaart, in --m-bg op de donkere lucht */
.msm-pensioenadviseur-kennismaking .pkm-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--m-bg, #f4f0e8);
  font-size: 14px;
  line-height: 20px;
  text-shadow: 0 1px 10px var(--m-ink, #172536), 0 0 2px var(--m-ink, #172536);
}
.msm-pensioenadviseur-kennismaking .pkm-facts li { display: inline-flex; align-items: flex-start; gap: 8px; text-align: left; }
.msm-pensioenadviseur-kennismaking .pkm-facts svg { flex-shrink: 0; margin-top: 2px; opacity: 0.8; }

/* Entree uit contact-6: de kaart één keer 16 px omhoog in 0,3 s. */
.msm-pensioenadviseur-kennismaking.is-armed .pkm-card { opacity: 0; transform: translateY(16px); }
.msm-pensioenadviseur-kennismaking.is-armed .pkm-card.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--pkm-ease), transform 0.3s var(--pkm-ease), max-width 0.35s var(--pkm-ease);
}

@media (min-width: 640px) {
  .msm-pensioenadviseur-kennismaking { padding: 64px 24px max(80px, 20vh); }
  .msm-pensioenadviseur-kennismaking .pkm-card { padding: 56px; }
  .msm-pensioenadviseur-kennismaking .pkm-title { font-size: 36px; }
  .msm-pensioenadviseur-kennismaking .pkm-text { font-size: 16px; }
}
@media (min-width: 1024px) {
  .msm-pensioenadviseur-kennismaking { padding: 64px 32px max(80px, 20vh); }
}
@media (max-width: 420px) {
  .msm-pensioenadviseur-kennismaking.is-open .pkm-card { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-pensioenadviseur-kennismaking .pkm-card,
  .msm-pensioenadviseur-kennismaking.is-armed .pkm-card,
  .msm-pensioenadviseur-kennismaking.is-armed .pkm-card.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .msm-pensioenadviseur-kennismaking .pkm-button,
  .msm-pensioenadviseur-kennismaking .pkm-button svg { transition: none; }
}