/* cta-band 1.0.0 · geoogst uit /previews/stukadoor/concept-1/index.html (#contact) op 2026-10-13.
   Kleuren lopen via --m-*-tokens (zie module.json › tokens); fonts levert de site.
   De boekingswidget komt uit _shared/booking/booking-demo.css/js (bij oplevering de live widget);
   deze module zet de band-opmaak en koppelt de widgetkleuren aan de tokens. */
.msm-cta-band {
  display: block;
  font-family: var(--m-font-body, Karla, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--m-ink, #161817);
}
.msm-cta-band * { box-sizing: border-box; }
.msm-cta-band img { display: block; max-width: 100%; height: auto; }
.msm-cta-band p { margin: 0; }
.msm-cta-band :focus-visible { outline: 3px solid var(--m-primary, #bb3f2f); outline-offset: 3px; }
.msm-cta-band .shell { width: min(1420px, 100% - 40px); margin-inline: auto; }
.msm-cta-band .cta-band { padding: 6rem 0; overflow: hidden; background: var(--m-bg, #e3e6e1); }
.msm-cta-band .cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: center; gap: 3rem; }
.msm-cta-band .cta-tekst { min-width: 0; }
.msm-cta-band .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
/* Pleisterstreek voor het label: een merkstreek, geen bolletje. */
.msm-cta-band .eyebrow::before { content: ""; flex: 0 0 auto; width: 2.8rem; height: 0.42rem; border-radius: 100% 0; background: var(--m-primary, #bb3f2f); transform: skewX(-28deg); }
.msm-cta-band .display { margin: 0.5rem 0 1rem; font-family: var(--m-font-display, "Anybody", system-ui, sans-serif); font-size: clamp(2.6rem, 7vw, 7rem); font-stretch: 82%; font-weight: 760; line-height: 0.92; letter-spacing: -0.055em; overflow-wrap: break-word; text-wrap: balance; }
.msm-cta-band .cta-intro { max-width: 38rem; margin-bottom: 2rem; font-size: 1.05rem; color: var(--m-muted, #626761); }
.msm-cta-band .cta-art { position: relative; min-width: 0; }
.msm-cta-band .cta-art img { width: min(100%, 620px); max-height: min(560px, 70vh); object-fit: contain; margin-inline: auto; filter: drop-shadow(0 25px 30px color-mix(in srgb, var(--m-ink, #161817) 18%, transparent)); transform: rotate(-5deg) scale(0.94); }

/* Boekingswidget: kleuren uit de tokens in plaats van de vaste demokleuren. */
.msm-cta-band .ms-widget { --ms-accent: var(--m-primary, #bb3f2f); --ms-accent-dark: color-mix(in srgb, var(--m-primary, #bb3f2f) 78%, black); margin: 0; font-family: inherit; }
.msm-cta-band .ms-widget:not([data-ms-theme="dark"]) { --ms-ink: var(--m-ink, #161817); --ms-muted: var(--m-muted, #626761); --ms-line: color-mix(in srgb, var(--m-ink, #161817) 14%, white); }
.msm-cta-band .ms-title { font-family: var(--m-font-display, "Anybody", system-ui, sans-serif); font-stretch: 82%; font-weight: 760; letter-spacing: -0.03em; }
.msm-cta-band .ms-submit,
.msm-cta-band .ms-step-next,
.msm-cta-band .ms-time-choice[aria-checked="true"],
.msm-cta-band .ms-calendar__day[aria-pressed="true"],
.msm-cta-band .ms-service-card[aria-checked="true"] i,
.msm-cta-band .ms-stepper__item.is-active span,
.msm-cta-band .ms-stepper__item.is-complete span { color: var(--m-on-primary, #ffffff); }

@media (max-width: 900px) {
  .msm-cta-band .cta-grid { grid-template-columns: 1fr; }
  .msm-cta-band .cta-art { order: -1; }
  .msm-cta-band .cta-art img { max-height: 340px; width: auto; margin: auto; }
}
@media (max-width: 600px) {
  .msm-cta-band .shell { width: min(100% - 32px, 1420px); }
  .msm-cta-band .cta-band { padding: 4.5rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-cta-band .ms-widget * { scroll-behavior: auto !important; transition: none !important; }
}