/*
  Sourcing Services page. Scoped to body.page-sourcing.
  Light hero, light icon cards, dark "circuit path" steps band, checklist, dark CTA.
*/

.page-sourcing {
  --pd-hero-min: clamp(460px, 40vw, 560px);
  --pd-h1: clamp(38px, 4.8vw, 70px);
}

.page-sourcing main > .hero.sourcing-hero {
  background: #e4e8eb url("sourcing-banner.webp") center / cover;
}

@media (max-width: 760px) {
  .page-sourcing main > .hero.sourcing-hero { background-position: 66% center; }
}

/* ---------- Three requirement cards: light variant of the shared card band ---------- */
.page-sourcing .about-story:not(.sourcing-details) .about-values {
  margin-top: 64px;
  padding: 0 0 96px;
}

.page-sourcing .about-story:not(.sourcing-details) .about-values::before { display: none; }

.page-sourcing .about-story .about-values article {
  border: 1px solid #cfe2e7;
  background:
    linear-gradient(90deg, #3fd0e0, #00a0b6) 0 0 / 72px 3px no-repeat,
    #fff;
  box-shadow: 0 22px 44px -28px #0b303c73;
}

.page-sourcing .about-story .about-values article::after { color: #00a0b61f; }

.page-sourcing .about-story .about-values .pd-icon {
  background: linear-gradient(145deg, #eaf8fa, #d6eef2);
  box-shadow: inset 0 0 0 1px #bfe1e8;
  color: var(--pd-teal-deep);
}

.page-sourcing .about-story .about-values .pd-icon svg { stroke-width: 2.3; }

.page-sourcing .about-story .about-values h3 { color: var(--pd-navy); border-bottom-color: #e1edf0; }
.page-sourcing .about-story .about-values article p { color: var(--pd-body); }

@media (hover: hover) {
  .page-sourcing .about-story .about-values article:hover {
    border-color: #8cc9d3;
    box-shadow: 0 30px 54px -28px #0b303c8c;
  }

  .page-sourcing .about-story .about-values article:hover .pd-icon {
    box-shadow: 0 0 0 1px var(--pd-teal), 0 14px 26px -10px #00a0b680;
  }
}

@media (min-width: 1000px) {
  .page-sourcing .about-story .about-values h3 { display: flex; align-items: flex-end; min-height: 66px; }
}

/* ---------- Steps: a circuit path, node to node ---------- */
.page-sourcing .sourcing-flow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 108px;
  border: 0;
  color: #fff;
  background:
    radial-gradient(ellipse 60% 70% at 85% 0%, #14697c66 0%, transparent 65%),
    var(--pd-route-dark-tr) right -50px top 10px / min(760px, 70vw) auto no-repeat,
    var(--pd-route-dark-bl) left -60px bottom -30px / min(680px, 64vw) auto no-repeat,
    linear-gradient(165deg, #06222e 0%, #0a3445 60%, #0b4253 100%);
}

.page-sourcing .sourcing-flow .eyebrow { margin-bottom: 18px; color: #8ae8ef; }

.page-sourcing .sourcing-flow h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.03;
  letter-spacing: -.035em;
  color: #fff;
}

.page-sourcing .sourcing-flow h2 span { color: #68dce8; }

.page-sourcing .sourcing-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 64px 0 0;
}

.page-sourcing .sourcing-steps li {
  display: block;
  position: relative;
}

.page-sourcing .step-number {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin-bottom: 26px;
  border: 2px solid #3fd0e0;
  background: #0a3040;
  color: var(--pd-aqua);
  font-size: 17px;
  letter-spacing: .5px;
  box-shadow: 0 0 0 6px #7fe3ee1a, 0 0 26px -4px #7fe3ee66;
}

/* Wire from this node to the next one (replaces the arrow glyph) */
.page-sourcing .sourcing-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 66px;
  right: auto;
  width: calc(100% - 16px);
  height: 2px;
  background: linear-gradient(90deg, #3fd0e0, #3fd0e04d);
  font-size: 0;
}

.page-sourcing .sourcing-steps h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.25;
  color: #fff;
}

.page-sourcing .sourcing-steps p {
  max-width: 340px;
  font-size: 16px;
  line-height: 1.7;
  color: #bad6dd;
}

/* ---------- Checklist ---------- */
.page-sourcing .sourcing-details {
  padding-top: 96px;
  padding-bottom: 96px;
  background:
    radial-gradient(ellipse 55% 45% at 0% 100%, #d4edf1 0%, transparent 70%),
    linear-gradient(180deg, #f8fbfc 0%, #eef5f6 100%);
}

.page-sourcing .sourcing-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  max-width: none;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.page-sourcing .sourcing-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #cfe2e7;
  border-radius: 8px;
  background: #fff;
  font-size: 15.5px;
  line-height: 1.5;
  color: #214653;
  box-shadow: 0 10px 22px -18px #0b303c66;
}

.page-sourcing .sourcing-checklist li::marker { content: ""; }

.page-sourcing .sourcing-checklist li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pd-check) center / 14px no-repeat, #e0f3f6;
}

.page-sourcing .sourcing-details .pd-split-copy > p:first-child { padding-bottom: 22px; }

/* The checklist headline stays in view while the long list scrolls past */
@media (min-width: 901px) {
  .page-sourcing .sourcing-details .pd-split-head { position: sticky; top: 40px; }
}

@media (max-width: 900px) {
  .page-sourcing .sourcing-steps { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-top: 44px; }

  .page-sourcing .sourcing-steps li { display: flex; gap: 20px; }
  .page-sourcing .step-number { margin-bottom: 0; }
  .page-sourcing .sourcing-steps li:not(:last-child)::after {
    top: 62px;
    left: 27px;
    width: 2px;
    height: calc(100% - 28px + 34px);
    background: linear-gradient(180deg, #3fd0e0, #3fd0e04d);
  }
}

@media (max-width: 640px) {
  .page-sourcing .sourcing-flow { padding: 64px 0 72px; }
  .page-sourcing .sourcing-details { padding-top: 64px; padding-bottom: 64px; }
  .page-sourcing .sourcing-checklist { grid-template-columns: minmax(0, 1fr); }
  .page-sourcing .about-story:not(.sourcing-details) .about-values { padding-bottom: 64px; }
}