/* Sourcing process page. Measured from the original at 1440px. */
.process { position: relative; overflow: hidden; background: var(--teal); }
.process__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .12; }
.process__inner { position: relative; padding: 94px 20px 80px; }
.process .section-title { margin-top: 5px; }
.process__intro { max-width: 595px; margin: 15px auto 0; font-family: var(--f-text); font-size: 16px; line-height: 1.4; color: var(--white); text-align: center; }

/* Desktop: alternating cards on both sides of a yellow line (absolute, like the original). */
.timeline { position: relative; height: 1354px; margin: 73px 0 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; top: 18px; left: calc(50% - 4px);
  width: 8px; height: 1023px; background: var(--yellow);
}
.step__dot { position: absolute; left: calc(50% - 18px); width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); }
.step__card {
  position: absolute; width: 579px;
  padding: 15px 34px 24px 33px;
  background: var(--white);
  box-shadow: 0 1.13px 4.55px rgba(0,0,0,.06);
  color: var(--ink);
}
.step--right .step__card { left: calc(50% + 54px); border-radius: 0 27.32px 27.32px 27.32px; }
.step--left .step__card { right: calc(50% + 56px); border-radius: 27.32px 0 27.32px 27.32px; }
.step--1 .step__dot { top: 0; }     .step--1 .step__card { top: 15px;   min-height: 298px; }
.step--2 .step__dot { top: 202px; } .step--2 .step__card { top: 220px;  min-height: 298px; }
.step--3 .step__dot { top: 397px; } .step--3 .step__card { top: 413px;  min-height: 298px; }
.step--4 .step__dot { top: 597px; } .step--4 .step__card { top: 603px;  min-height: 272px; }
.step--5 .step__dot { top: 810px; } .step--5 .step__card { top: 828px;  min-height: 318px; border-radius: 0 22.77px 22.77px 22.77px; }
.step--6 .step__dot { top: 1022px; } .step--6 .step__card { top: 1040px; min-height: 314px; }
.step__head { display: flex; align-items: flex-start; padding-bottom: 2px; border-bottom: 2px solid var(--teal); }
.step__num { flex: none; min-width: 83px; font-family: var(--f-display); font-size: 54.64px; line-height: 76.5px; color: var(--yellow); }
.step__head h2 { margin-top: 11px; font-family: var(--f-title); font-size: 24px; line-height: 1; }
.step__card p { margin-top: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.4; }
.step__head + p { margin-top: 17px; }
.process__btn { margin-top: 75px; }

/* Tablet & mobile: one column, line on the right */
@media (max-width: 1240px) {
  .timeline { height: auto; margin-top: 40px; padding-right: 36px; display: grid; gap: 24px; max-width: 640px; margin-inline: auto; }
  .timeline::before { top: 0; bottom: 0; height: auto; right: 10px; left: auto; width: 4px; }
  .step { position: relative; }
  .step__dot, .step--1 .step__dot, .step--2 .step__dot, .step--3 .step__dot, .step--4 .step__dot, .step--5 .step__dot, .step--6 .step__dot {
    top: 18px; left: auto; right: -38px; width: 24px; height: 24px;
  }
  .step__card, .step--right .step__card, .step--left .step__card, .step--5 .step__card {
    position: static; width: auto; min-height: 0 !important; border-radius: 0 22px 22px 22px;
  }
  .process__btn { margin-top: 48px; }
}
@media (max-width: 750px) {
  .process__inner { padding: 56px 16px 56px; }
  .step__card { padding: 12px 20px 20px; }
  .step__num { font-size: 42px; line-height: 60px; }
  .step__head h2 { font-size: 20px; margin-right: 10px; }
}