/* ============================================================
   Process — four steps, each one a photograph and a drawn rule.

   The icons are gone. A speech bubble is a picture of a
   conversation; the consultation photograph is the conversation.
   The connecting line stays, because it is the only thing on the
   page that says these four are one sequence rather than four
   services, and it draws itself as you move down it.
   ============================================================ */

.process { position: relative; overflow: hidden; }

.process__rail {
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* ---- The connecting line ----
   left/right/top are re-anchored to the real node centres by
   js/process.js; these are the pre-script defaults. */
.process__line {
  position: absolute;
  top: 34px;
  left: 34px;
  right: 34px;
  height: 1px;
  background: var(--rule);
}
.process__line-fill {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
}

.process__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.step {
  position: relative;
  opacity: 0.45;
  transition: opacity 0.6s var(--ease);
}
.step[data-active='true'] { opacity: 1; }

/* ---- Node — now a cropped photograph rather than a glyph ---- */

.step__node {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-cool);
  border: 1px solid var(--rule);
  transition: border-color 0.6s var(--ease);
}
.step[data-active='true'] .step__node { border-color: var(--rule-strong); }

.step__node img { filter: saturate(0.9) contrast(1.04); }
.step[data-active='true'] .step__node img {
  filter: saturate(1) contrast(1.05);
  transform: scale(1.03);
}

/* The step's number is gone. The four steps are read in order down a
   drawn rail — an ordinal printed over that is labelling something
   the layout has already said. */
.step__title {
  margin-top: 1.25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
}

/* The active marker is a drawn rule, not a colour fade. */
.step__mark {
  height: 1px;
  width: 42px;
  margin-top: 0.9rem;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease);
}
.step[data-active='true'] .step__mark { transform: scaleX(1); }

.step__text {
  margin-top: 1rem;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--muted);
  max-width: 32ch;
}

/* ---- Mobile: vertical timeline ---- */

@media (max-width: 767px) {
  .process__steps { grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
  .process__line {
    top: 34px; bottom: 34px;
    left: 34px; right: auto;
    width: 1px; height: auto;
  }
  .process__line-fill {
    transform: scaleY(0);
    transform-origin: top center;
  }
  .step {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }
  /* span 3, not 5: the step lost its index row, so the photograph
     now sits beside title, marker and text rather than four rows. */
  .step__node { grid-row: 1 / span 3; aspect-ratio: 1; }
  .step__text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step { opacity: 1; }
  .step__mark { transform: scaleX(1); }
  .process__line-fill { transform: none; }
}