/* ─── Module 4: aanpak / 45-dagenpilot ───────── */
.steps { position: relative; padding: 0 var(--gutter) clamp(80px, 12vh, 140px); background: var(--ivory); }
.steps__head { position: relative; z-index: 1; width: 100vw; margin: clamp(64px, 9vh, 110px) 0 0 calc(50% - 50vw); padding: clamp(36px, 5vh, 64px) var(--gutter); text-align: center; background: var(--ivory); border-top: 1px solid rgba(16,26,48,.22); border-bottom: 1px solid rgba(16,26,48,.22); transition: border-color .6s var(--ease-soft); }
.steps__head.is-on { border-color: var(--navy); }
.steps__head .kicker { color: var(--gold-deep); margin-bottom: 12px; }
.steps__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.9vw, 64px); line-height: 1.05; letter-spacing: -.03em; color: var(--navy); white-space: nowrap; }
.steps__head p { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--grey); }
.steps__timeline { position: relative; max-width: 1080px; margin: 0 auto; }
.steps__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(16,26,48,.12); transform: translateX(-50%); }
.steps__line i { position: absolute; inset: 0; background: var(--navy); transform: scaleY(0); transform-origin: top; will-change: transform; }
.steps__list { list-style: none; margin: 0; padding: clamp(72px, 10vh, 120px) 0 0; display: flex; flex-direction: column; gap: clamp(56px, 10vh, 120px); }
.steps__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(56px, 8vw, 120px); }
.steps__num { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -.03em; color: var(--navy); opacity: .18; transition: opacity .6s var(--ease-soft); padding-top: 6px; }
.steps__item--r .steps__num { grid-column: 1; justify-self: end; }
.steps__item--r .steps__body { grid-column: 2; }
.steps__item--l .steps__num { grid-column: 2; justify-self: start; grid-row: 1; }
.steps__item--l .steps__body { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; align-items: flex-end; }
.steps__dot { position: absolute; left: 50%; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--ivory); border: 1px solid rgba(16,26,48,.3); transform: translateX(-50%); transition: background .5s, border-color .5s, box-shadow .5s; }
.steps__body { display: flex; flex-direction: column; max-width: 380px; opacity: .35; transform: translateY(14px); transition: opacity .7s var(--ease-soft), transform .8s var(--ease-out); }
.steps__day { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.steps__body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; color: var(--navy); margin-bottom: 10px; }
.steps__body p:not(.steps__day) { font-size: 15.5px; line-height: 1.6; color: var(--grey); }
.steps__tag { display: inline-block; margin-top: 16px; padding: 8px 12px; border-radius: 6px; background: rgba(16,26,48,.06); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.steps__item.is-on .steps__num { opacity: 1; }
.steps__item.is-on .steps__body { opacity: 1; transform: none; }
.steps__item.is-on .steps__dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px rgba(201,169,106,.18); }
.steps__end { text-align: center; margin-top: clamp(64px, 10vh, 120px); display: flex; flex-direction: column; align-items: center; gap: 26px; }
.steps__end h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -.02em; color: var(--navy); }
.steps__end .actions__primary { align-items: center; }
@media (max-width: 760px) {
  .steps__head h2 { white-space: normal; }
  .steps__timeline { padding-left: 28px; }
  .steps__line { left: 0; transform: none; }
  .steps__item { display: block; }
  .steps__item--l .steps__body, .steps__item--l .steps__num { text-align: left; justify-self: start; align-items: flex-start; }
  .steps__num { font-size: 34px; margin-bottom: 10px; }
  .steps__dot { left: -28px; }
}