/* Web design page: "How it works" as a vertical scroll-driven timeline.
   Linked from services/web-design.html only. */

.steps-section { padding: clamp(64px, 8vw, 96px) var(--pad-x); }
.steps-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.steps-head { position: sticky; top: 120px; }
.steps-head h2 { margin-bottom: 18px; }
.steps-head .note { font-size: 15px; line-height: 1.75; color: var(--cream-55); max-width: 380px; }

/* Timeline spine: hairline track, pistachio fill, traveling dot.
   JS drives a single custom property, --p (0 to 1). */
.timeline { position: relative; list-style: none; padding-left: 56px; margin: 0; --p: 0; }
.spine {
  position: absolute; left: 20px; top: 10px; bottom: 10px; width: 1px;
  background: var(--cream-12);
}
.spine-fill {
  position: absolute; inset: 0;
  background: var(--pistachio);
  transform: scaleY(var(--p));
  transform-origin: top;
}
.spine-dot {
  position: absolute; left: 50%; top: calc(var(--p) * 100%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pistachio);
  box-shadow: 0 0 16px 6px rgba(150, 201, 106, 0.55);
  transform: translate(-50%, -50%);
}

.t-step {
  position: relative;
  padding: 34px 0;
  opacity: 0.28;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.t-step + .t-step { border-top: 1px solid var(--cream-12); }
/* Stop marker on the spine */
.t-step::before {
  content: "";
  position: absolute; left: -39px; top: 46px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cream-42);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.t-step .num {
  font-family: var(--font-display); font-weight: 300;
  font-size: 44px; line-height: 1;
  color: var(--pistachio-30);
  margin-bottom: 10px;
  transition: color 0.55s var(--ease);
}
.t-step h3 {
  font-weight: 700; font-size: 15px; letter-spacing: 0.03em;
  color: var(--pistachio); margin-bottom: 8px;
}
.t-step p { font-size: 14px; color: var(--cream-72); max-width: 460px; }

.t-step.active { opacity: 1; transform: none; }
.t-step.active::before {
  background: var(--pistachio);
  box-shadow: 0 0 10px 3px rgba(150, 201, 106, 0.45);
}
.t-step.active .num { color: var(--pistachio); }

/* Phones: single column, heading unstuck, tighter spine */
@media (max-width: 860px) {
  .steps-grid { grid-template-columns: 1fr; gap: 8px; }
  .steps-head { position: static; margin-bottom: 24px; }
  .timeline { padding-left: 44px; }
  .spine { left: 14px; }
  .t-step::before { left: -33px; }
  .t-step { padding: 28px 0; }
  .t-step .num { font-size: 36px; }
}

/* Reduced motion: everything on, line fully drawn, no travel */
@media (prefers-reduced-motion: reduce) {
  .t-step, .t-step.active { opacity: 1; transform: none; transition: none; }
  .timeline { --p: 1 !important; }
  .spine-fill, .spine-dot { transition: none; }
}