/* 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); }
}