/* Reference measurements: heading 32px, badge 34px, icon 46px, panel radius 16px.
   Six client-facing stages; no shared styles are changed. */
#planning.services-process-reference {
  background: #fff;
  color: #222;
  padding-block: 56px;
  scroll-margin-top: 110px;
}
#planning.services-process-reference *,
#planning.services-process-reference *::before { box-sizing: border-box; }
#planning .roky-process-heading { text-align: center; margin: 0 0 25px; }
#planning .roky-process-heading h2 {
  margin: 0; max-width: none; color: #222;
  font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.5px;
}
#planning .roky-process-heading::after {
  content: ''; display: block; width: 46px; height: 3px;
  margin: 10px auto 0; background: #4b7778; border-radius: 20px;
}
#planning .roky-process-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start;
  width: 100%; margin: 0; padding: 26px 30px 22px;
  list-style: none; background: #fafafa; border: 1px solid #eee; border-radius: 16px;
}
#planning .roky-process-step {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 0; margin: 0; padding: 0 18px; text-align: center;
}
#planning .roky-process-number {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; margin-bottom: 9px; border-radius: 50%;
  background: #4b7778; color: #fff; font-size: 12px; line-height: 1; font-weight: 700;
}
#planning .roky-process-icon {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; margin-bottom: 8px; color: #222;
}
#planning .roky-process-icon svg { display: block; width: 46px; height: 46px; }
#planning .roky-process-step h3 {
  margin: 0 0 7px; min-height: 2.6em; color: #222; font-size: 14px; line-height: 1.3;
  font-weight: 700; letter-spacing: 0;
}
#planning .roky-process-step p {
  max-width: 220px; margin: 0 auto; color: #444;
  font-size: 11px; line-height: 1.55; font-weight: 400; letter-spacing: 0;
}
#planning .roky-process-arrow {
  position: absolute; top: 67px; right: -14px; width: 28px; height: 24px;
  display: block; color: #222;
}
#planning .roky-process-arrow svg { width: 24px; height: 24px; }
@media (max-width: 1200px) {
  #planning .roky-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 10px; }
  #planning .roky-process-step:nth-child(3n) .roky-process-arrow { display: none; }
}
@media (max-width: 900px) {
  #planning .roky-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 10px; padding: 25px 20px; }
  #planning .roky-process-step:nth-child(3n) .roky-process-arrow { display: block; }
  #planning .roky-process-step:nth-child(2n) .roky-process-arrow { display: none; }
}
@media (max-width: 600px) {
  #planning.services-process-reference { padding-block: 40px; }
  #planning .roky-process-heading { margin-bottom: 20px; }
  #planning .roky-process-heading h2 { font-size: 27px; }
  #planning .roky-process-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 20px 15px; }
  #planning .roky-process-step { padding: 5px 10px 20px; }
  #planning .roky-process-step h3 { min-height: 0; }
  #planning .roky-process-number { width: 32px; height: 32px; margin-bottom: 7px; }
  #planning .roky-process-icon { width: 46px; height: 46px; }
  #planning .roky-process-icon svg { width: 42px; height: 42px; }
  #planning .roky-process-step p { max-width: 280px; }
  #planning .roky-process-step:nth-child(n) .roky-process-arrow {
    display: block; top: auto; right: auto; bottom: -20px; transform: rotate(90deg);
  }
}