/* Home procurement path (TODO 00001.5.13). FINAL design/home/inspiration/sections/procurement/r2/v1.png.
   The process line (section 7): one 1px slate hairline; each plain navy numeral drops a 1px navy line onto an
   8px navy square tick on it; one more square tick closes the line at the right margin. Mist ground with a
   1px line hairline on top. Columns and ticks sit on the 12 column grid (3 columns per step). */
.p-home-procurement {
  box-sizing: border-box; background: var(--wp--preset--color--mist);
  border-top: 1px solid var(--wp--preset--color--line);
  padding: var(--wp--custom--section--desktop) var(--wp--custom--gutter--desktop);
}
.p-home-procurement *, .p-home-procurement *::before, .p-home-procurement *::after { box-sizing: border-box; }
.p-home-procurement__inner { max-width: var(--wp--custom--layout--wide); margin-inline: auto; }
.p-home-procurement__eyebrow {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--50); margin: 0;
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-home-procurement__eyebrow::before { content: ""; flex: none; width: 32px; height: 3px; background: var(--wp--preset--color--orange); }
.p-home-procurement .p-home-procurement__title {
  margin: var(--wp--preset--spacing--40) 0 0; color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-2); font-weight: var(--wp--custom--font-weight--h-2);
  letter-spacing: var(--wp--custom--letter-spacing--h-2); line-height: 1.15;
}
.p-home-procurement__steps {
  position: relative; list-style: none; margin: var(--wp--preset--spacing--90) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--60);
}
/* The hairline sits at the tick centre: numeral line box (font size, line height 1) + 24px drop - 4px. */
.p-home-procurement__steps::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--wp--preset--color--slate);
  top: calc(var(--wp--preset--font-size--readout-l) + 24px);
}
.p-home-procurement__steps::after {
  content: ""; position: absolute; right: 0; width: 8px; height: 8px; background: var(--wp--preset--color--navy);
  top: calc(var(--wp--preset--font-size--readout-l) + 20px);
}
.p-home-procurement__step { margin: 0; padding-right: var(--wp--preset--spacing--60); }
.p-home-procurement__num {
  position: relative; width: fit-content; margin: 0; padding-bottom: 28px;
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--readout-l);
  font-weight: var(--wp--custom--font-weight--readout-l); line-height: 1; font-variant-numeric: tabular-nums;
}
.p-home-procurement__num::before {
  content: ""; position: absolute; left: 12px; bottom: 8px; width: 1px; height: 20px; background: var(--wp--preset--color--navy);
}
.p-home-procurement__num::after {
  content: ""; position: absolute; left: 8px; bottom: 0; width: 8px; height: 8px; background: var(--wp--preset--color--navy);
}
.p-home-procurement .p-home-procurement__step-title {
  margin: var(--wp--preset--spacing--70) 0 0; color: var(--wp--preset--color--navy);
  font-size: var(--wp--preset--font-size--h-4); font-weight: var(--wp--custom--font-weight--h-4); line-height: 1.35;
}
.p-home-procurement__text {
  margin: var(--wp--preset--spacing--30) 0 0; color: var(--wp--preset--color--slate);
  font-size: var(--wp--preset--font-size--body); line-height: 1.6; max-width: 34ch;
}
@media (max-width: 991.98px) {
  .p-home-procurement { padding: var(--wp--custom--section--tablet) var(--wp--custom--gutter--tablet); }
  .p-home-procurement__step { padding-right: var(--wp--preset--spacing--40); }
}
/* Phone: the same line turned upright, numerals beside it, text to the right. */
@media (max-width: 719.98px) {
  .p-home-procurement { padding: var(--wp--custom--section--phone) var(--wp--custom--gutter--phone); }
  .p-home-procurement__steps {
    grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--80); margin-top: var(--wp--preset--spacing--70);
    padding-left: 32px;
  }
  .p-home-procurement__steps::before { top: 4px; bottom: 0; left: 3.5px; right: auto; width: 1px; height: auto; }
  .p-home-procurement__steps::after { top: auto; bottom: 0; left: 0; right: auto; }
  .p-home-procurement__step { position: relative; padding-right: 0; }
  .p-home-procurement__num { padding-bottom: 0; font-size: var(--wp--preset--font-size--readout-s); }
  .p-home-procurement__num::before { left: -28px; right: auto; top: 50%; bottom: auto; width: 20px; height: 1px; }
  .p-home-procurement__num::after { left: -32px; top: calc(50% - 4px); bottom: auto; }
  .p-home-procurement .p-home-procurement__step-title { margin-top: var(--wp--preset--spacing--30); }
}
/* Motion (stage 10, 00001.5.22.5; design/FINDINGS.md "Motion inventory: procurement"). inc/motion.php sets data-mo on the
   eyebrow (hook), the title (rise 150 ms) and the steps ol (hook, 300 ms). These are the hook start states, all under
   html.mo and only until the ol's .mo-in, so JS off, reduced motion and print show the approved look. Nothing here keys
   on .mo-done (GO-043) and no structural rule is added. Story move: the process line (the ol's ::before) draws, then each
   numeral with its stub and tick drops onto its station just after the line passes it; the end tick stays static. */
.mo .p-home-procurement__eyebrow[data-mo]::before { transform-origin: 0 50%; transition: transform var(--mo-dur) var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-home-procurement__eyebrow[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
.mo .p-home-procurement__steps[data-mo]::before { transform-origin: 0 50%; transition: transform 1.4s var(--mo-ease) var(--mo-delay, 0ms); }
.mo .p-home-procurement__steps[data-mo]:not(.mo-in)::before { transform: scaleX(0); }
/* Stations: each numeral starts just after the line has passed its tick (at 1440 and at 390); the step copy 150 ms later.
   The numerals and copy inherit the ol's --mo-delay, so a late entry keeps them in step with the line. */
.mo .p-home-procurement__steps[data-mo] > li { --nv-drop: 100ms; }
.mo .p-home-procurement__steps[data-mo] > li:nth-child(2) { --nv-drop: 250ms; }
.mo .p-home-procurement__steps[data-mo] > li:nth-child(3) { --nv-drop: 400ms; }
.mo .p-home-procurement__steps[data-mo] > li:nth-child(4) { --nv-drop: 650ms; }
.mo .p-home-procurement__steps[data-mo] .p-home-procurement__num {
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease-settle);
  transition-delay: calc(var(--mo-delay, 0ms) + var(--nv-drop));
}
.mo .p-home-procurement__steps[data-mo] .p-home-procurement__step-title {
  transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--mo-delay, 0ms) + var(--nv-drop) + 150ms);
}
/* Step text moves by transform only and keeps opacity 1: step 4 is the test-mode disclosure, never hidden. */
.mo .p-home-procurement__steps[data-mo] .p-home-procurement__text {
  transition: transform var(--mo-dur) var(--mo-ease) calc(var(--mo-delay, 0ms) + var(--nv-drop) + 150ms);
}
.mo .p-home-procurement__steps[data-mo]:not(.mo-in) .p-home-procurement__num { opacity: 0; transform: translate3d(0, calc(-1 * var(--mo-rise)), 0); }
.mo .p-home-procurement__steps[data-mo]:not(.mo-in) .p-home-procurement__step-title { opacity: 0; transform: translate3d(0, var(--mo-rise), 0); }
.mo .p-home-procurement__steps[data-mo]:not(.mo-in) .p-home-procurement__text { transform: translate3d(0, var(--mo-rise), 0); }
/* Phone: the line is upright, so it draws top down. */
@media (max-width: 719.98px) {
  .mo .p-home-procurement__steps[data-mo]::before { transform-origin: 50% 0; }
  .mo .p-home-procurement__steps[data-mo]:not(.mo-in)::before { transform: scaleY(0); }
}