/* ---------- Steps ---------- */
.steps-block { position: relative; overflow: hidden; padding: 110px 0; background-color: #f6ece5; background-image: url("https://ckz.kamiwebdesign.nl/wp-content/uploads/2026/09/steps-bg.webp"); background-position: top center; background-repeat: repeat-y; background-size: 100% auto; }
.steps-block::before { position: absolute; z-index: 0; inset: 0; content: ""; background: rgba(246, 236, 229, .76); pointer-events: none; }
.steps-block .site-container { position: relative; z-index: 2; }

/* ---------- Steps Header ---------- */
.steps-block__header { max-width: 760px; margin: 0 auto 76px; text-align: center; }
.steps-block__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--kami-color-rose-dark); font-family: var(--kami-font-sans); font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.steps-block__eyebrow::before { width: 32px; height: 2px; content: ""; background: var(--kami-color-rose); border-radius: 999px; }
.steps-block__eyebrow::after { width: 32px; height: 2px; content: ""; background: var(--kami-color-rose); border-radius: 999px; }
.steps-block__title { margin: 0 0 22px; color: var(--kami-color-text); font-family: var(--kami-font-serif); font-size: clamp(36px, 3.5vw, 50px); line-height: 1.06; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.steps-block__intro { max-width: 650px; margin: 0 auto; color: var(--kami-color-text-soft); font-family: var(--kami-font-sans); font-size: 16px; line-height: 1.8; }

/* ---------- Steps Timeline ---------- */
.steps-block__timeline { position: relative; max-width: 1040px; margin: 0 auto; }
.steps-block__timeline::before { position: absolute; top: 36px; bottom: 36px; left: 50%; width: 1px; content: ""; background: linear-gradient(to bottom, rgba(191, 116, 124, .06), rgba(191, 116, 124, .34) 12%, rgba(191, 116, 124, .34) 88%, rgba(191, 116, 124, .06)); transform: translateX(-50%); }
.steps-block__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 34px; align-items: center; min-height: 170px; margin: 0 0 26px; }
.steps-block__step:last-child { margin-bottom: 0; }
.steps-block__step:nth-child(odd) .steps-block__step-content { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
.steps-block__step:nth-child(even) .steps-block__step-content { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; }

/* ---------- Steps Marker ---------- */
.steps-block__marker { position: relative; z-index: 3; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 82px; height: 82px; margin: 0 auto; background: var(--kami-color-cream); border: 1px solid rgba(191, 116, 124, .24); border-radius: 50%; box-shadow: 0 12px 30px rgba(73, 53, 50, .08); }
.steps-block__marker::before { position: absolute; inset: 6px; content: ""; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; pointer-events: none; }
.steps-block__number { position: relative; z-index: 2; color: var(--kami-color-rose-dark); font-family: var(--kami-font-sans); font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .08em; }
.steps-block__icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; margin-top: 6px; color: var(--kami-color-purple); }
.steps-block__icon svg { display: block; width: 18px; height: 18px; font-size: 18px; line-height: 1; }
.steps-block__icon .btn-icon { display: block; width: 18px; height: 18px; font-size: 18px; line-height: 1; }
.steps-block__icon .dashicons { display: block; width: 18px; height: 18px; font-size: 18px; line-height: 1; }

/* ---------- Steps Content ---------- */
.steps-block__step-content { position: relative; width: 100%; max-width: 420px; padding: 28px 30px; background: rgba(255, 253, 249, .86); border: 1px solid rgba(73, 53, 50, .07); border-radius: 26px; box-shadow: 0 16px 42px rgba(73, 53, 50, .055); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.steps-block__step:nth-child(odd) .steps-block__step-content::after { position: absolute; top: 50%; right: -9px; width: 18px; height: 18px; content: ""; background: rgba(255, 253, 249, .86); border-top: 1px solid rgba(73, 53, 50, .07); border-right: 1px solid rgba(73, 53, 50, .07); transform: translateY(-50%) rotate(45deg); }
.steps-block__step:nth-child(even) .steps-block__step-content::after { position: absolute; top: 50%; left: -9px; width: 18px; height: 18px; content: ""; background: rgba(255, 253, 249, .86); border-bottom: 1px solid rgba(73, 53, 50, .07); border-left: 1px solid rgba(73, 53, 50, .07); transform: translateY(-50%) rotate(45deg); }
.steps-block__step-title { margin: 0 0 10px; color: var(--kami-color-text); font-family: var(--kami-font-serif); font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.steps-block__step-text { margin: 0; color: var(--kami-color-text-soft); font-family: var(--kami-font-sans); font-size: 14px; line-height: 1.75; }

/* ---------- Steps Colors ---------- */
.steps-block__step:nth-child(4n + 1) .steps-block__marker { background: #f5e3e3; border-color: rgba(191, 116, 124, .28); }
.steps-block__step:nth-child(4n + 1) .steps-block__number { color: var(--kami-color-rose-dark); }
.steps-block__step:nth-child(4n + 1) .steps-block__icon { color: var(--kami-color-rose-dark); }
.steps-block__step:nth-child(4n + 2) .steps-block__marker { background: #ede3ee; border-color: rgba(124, 46, 128, .18); }
.steps-block__step:nth-child(4n + 2) .steps-block__number { color: var(--kami-color-purple); }
.steps-block__step:nth-child(4n + 2) .steps-block__icon { color: var(--kami-color-purple); }
.steps-block__step:nth-child(4n + 3) .steps-block__marker { background: #edf2e9; border-color: rgba(111, 131, 95, .20); }
.steps-block__step:nth-child(4n + 3) .steps-block__number { color: var(--kami-color-sage-dark); }
.steps-block__step:nth-child(4n + 3) .steps-block__icon { color: var(--kami-color-sage-dark); }
.steps-block__step:nth-child(4n + 4) .steps-block__marker { background: #f3e8de; border-color: rgba(191, 116, 124, .18); }
.steps-block__step:nth-child(4n + 4) .steps-block__number { color: var(--kami-color-rose-dark); }
.steps-block__step:nth-child(4n + 4) .steps-block__icon { color: var(--kami-color-rose-dark); }

/* ---------- Steps Footer ---------- */
.steps-block__footer { display: flex; flex-direction: column; align-items: center; max-width: 760px; margin: 78px auto 0; padding-top: 24px; text-align: center; }
.steps-block__footer::before { display: block; width: 72px; height: 1px; margin: 0 0 28px; content: ""; background: linear-gradient(90deg, rgba(217, 144, 150, 0) 0%, rgba(217, 144, 150, .65) 50%, rgba(217, 144, 150, 0) 100%); }
.steps-block__closing { max-width: 720px; margin: 0 0 30px; color: #7c426f; font-family: var(--kami-font-serif); font-size: clamp(26px, 2.5vw, 36px); line-height: 1.34; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.steps-block__footer .button { min-height: 52px; padding-right: 28px; padding-left: 28px; border-radius: 12px; box-shadow: 0 12px 28px rgba(191, 116, 124, .15); }
.steps-block__footer .button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(191, 116, 124, .22); }

/* ---------- Steps Responsive ---------- */
@media (min-width: 901px) {
.steps-block { padding: 100px 0; }
.steps-block__header { margin-bottom: 64px; }
.steps-block__timeline { max-width: 1020px; }
.steps-block__timeline::before { top: 39px; bottom: 39px; }
.steps-block__step { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: 28px; min-height: 150px; margin-bottom: 16px; }
.steps-block__marker { width: 78px; height: 78px; }
.steps-block__step-content { max-width: 440px; padding: 26px 28px; border-radius: 24px; }
.steps-block__step-title { margin-bottom: 9px; font-size: 27px; }
.steps-block__step-text { font-size: 14px; line-height: 1.7; }
.steps-block__footer { margin-top: 58px; padding-top: 20px; }
.steps-block__footer::before { margin-bottom: 24px; }
.steps-block__closing { max-width: 720px; margin-bottom: 26px; font-size: clamp(28px, 2.3vw, 34px); }
}

@media (max-width: 900px) {
.steps-block { padding: 90px 0; background-size: auto 700px; }
.steps-block__header { margin-bottom: 58px; }
.steps-block__timeline { max-width: 720px; }
.steps-block__timeline::before { top: 37px; bottom: 37px; left: 37px; transform: none; }
.steps-block__step { grid-template-columns: 74px minmax(0, 1fr); gap: 24px; align-items: start; min-height: 0; margin-bottom: 38px; }
.steps-block__marker { grid-column: 1; grid-row: 1; width: 74px; height: 74px; margin: 0; }
.steps-block__step:nth-child(odd) .steps-block__step-content { grid-column: 2; grid-row: 1; justify-self: stretch; max-width: 100%; text-align: left; }
.steps-block__step:nth-child(even) .steps-block__step-content { grid-column: 2; grid-row: 1; justify-self: stretch; max-width: 100%; text-align: left; }
.steps-block__step:nth-child(odd) .steps-block__step-content::after { top: 37px; right: auto; left: -9px; border: 0; border-bottom: 1px solid rgba(73, 53, 50, .07); border-left: 1px solid rgba(73, 53, 50, .07); }
.steps-block__step:nth-child(even) .steps-block__step-content::after { top: 37px; right: auto; left: -9px; border: 0; border-bottom: 1px solid rgba(73, 53, 50, .07); border-left: 1px solid rgba(73, 53, 50, .07); }
}

@media (max-width: 767px) {
.steps-block { padding: 72px 0; background-color: #f6ece5; background-image: url("https://ckz.kamiwebdesign.nl/wp-content/uploads/2026/09/BG_mobile.webp"); background-position: top center; background-repeat: repeat-y; background-size: 100% auto; }
.steps-block::before { z-index: 0; inset: 0; background: rgba(246, 236, 229, .76); }
.steps-block .site-container { position: relative; z-index: 2; }
.steps-block__header { margin-bottom: 48px; text-align: left; }
.steps-block__eyebrow { font-size: 12px; }
.steps-block__eyebrow::before { width: 28px; }
.steps-block__eyebrow::after { display: none; }
.steps-block__intro { margin-left: 0; }
.steps-block__timeline::before { top: 29px; bottom: 29px; left: 29px; }
.steps-block__step { grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 36px; }
.steps-block__marker { width: 58px; height: 58px; margin: 0; }
.steps-block__marker::before { inset: 5px; }
.steps-block__number { font-size: 10px; }
.steps-block__icon { margin-top: 4px; }
.steps-block__icon svg { width: 14px; height: 14px; font-size: 14px; }
.steps-block__icon .btn-icon { width: 14px; height: 14px; font-size: 14px; }
.steps-block__icon .dashicons { width: 14px; height: 14px; font-size: 14px; }
.steps-block__step-content { padding: 22px; border-radius: 22px; }
.steps-block__step:nth-child(odd) .steps-block__step-content::after { top: 29px; }
.steps-block__step:nth-child(even) .steps-block__step-content::after { top: 29px; }
.steps-block__step-title { margin-bottom: 8px; font-size: 24px; }
.steps-block__step-text { font-size: 14px; line-height: 1.7; }
.steps-block__footer { align-items: center; margin-top: 58px; padding-top: 18px; text-align: center; }
.steps-block__footer::before { margin-bottom: 22px; }
.steps-block__closing { margin-bottom: 26px; font-size: clamp(23px, 7vw, 30px); line-height: 1.38; }
}

@media (max-width: 500px) {
.steps-block { padding: 60px 0; background-size: auto 560px; }
.steps-block__header { margin-bottom: 52px; }
.steps-block__title { font-size: 34px; }
.steps-block__intro { font-size: 15px; line-height: 1.75; }
.steps-block__timeline::before { top: 25px; bottom: 25px; left: 25px; background: rgba(191, 116, 124, .22); }
.steps-block__step { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 30px; }
.steps-block__marker { width: 50px; height: 50px; }
.steps-block__step-content { padding: 18px 16px; border-radius: 19px; }
.steps-block__step:nth-child(odd) .steps-block__step-content::after { top: 25px; }
.steps-block__step:nth-child(even) .steps-block__step-content::after { top: 25px; }
.steps-block__step-title { margin-bottom: 7px; font-size: 21px; }
.steps-block__step-text { font-size: 13.5px; line-height: 1.68; }
.steps-block__footer { margin-top: 38px; }
.steps-block__closing { margin-bottom: 24px; font-size: 26px; line-height: 1.34; }
.steps-block__footer .button { width: 84%; max-width: 280px; }
}