.service-card {
  --card-gap: 1.5rem;
  --label-colour: #adb5bd;
  --lifecycle-colour: #adb5bd;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 3px 8px rgba(0,0,0,.05);
  position: relative;
  margin-bottom: var(--card-gap);
}
.label-pill {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: .25rem;
  color: #fff;
  margin-bottom: .4rem;
  background: var(--label-colour);
}
.lifecycle-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--label-colour);
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
}

.stage-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4px;
}
.stage-indicator.continue .stage-bar {
  height: calc(100% + var(--card-gap));
  bottom: calc(-1 * var(--card-gap));
}
.stage-bar {
  width: 4px;
  height: 100%;
  background: var(--lifecycle-colour);
  border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem;
}
.stage-text {
  font-size: .65rem;
  white-space: nowrap;
  border-color: var(--lifecycle-colour);
  color: var(--lifecycle-colour);
}

.step-badge {
  font-size: .65rem;
  padding: .15rem .4rem;
}

.project-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
  justify-content: flex-start;
}
.project-type-pill {
  font-size: .75rem;
  font-weight: 500;
  color: #fff;
  background: var(--project-colour);
}

/* Service label colour classes */
.bg-label-financier-reports { --label-colour: #f29d9d; }
.bg-label-variation-assessment { --label-colour: #f2dd9d; }
.bg-label-cost-planning-services { --label-colour: #c7f29d; }
.bg-label-dispute-resolution { --label-colour: #9df2b2; }
.bg-label-tax-depreciation-report { --label-colour: #9df2f2; }
.bg-label-builders-trade-estimate { --label-colour: #9db2f2; }
.bg-label-tender-review { --label-colour: #c79df2; }
.bg-label-research-and-development { --label-colour: #f29ddd; }

/* Lifecycle colour classes */
.bg-stage-planning { --lifecycle-colour: #9de1f2; }
.bg-stage-design { --lifecycle-colour: #6fccdd; }
.bg-stage-tender { --lifecycle-colour: #fabd5c; }
.bg-stage-construction { --lifecycle-colour: #8bc34a; }
.bg-stage-dispute-resolution { --lifecycle-colour: #f58f84; }
.bg-stage-operation { --lifecycle-colour: #a990d1; }

/* Project type colour classes */
.project-type-color-0 { --project-colour: #1f77b4; }
.project-type-color-1 { --project-colour: #ff7f0e; }
.project-type-color-2 { --project-colour: #e377c2; }
.project-type-color-3 { --project-colour: #2ca02c; }
.project-type-color-4 { --project-colour: #8c564b; }
.project-type-color-5 { --project-colour: #76b7b2; }
.project-type-color-6 { --project-colour: #edc949; }
.project-type-color-7 { --project-colour: #d62728; }
.project-type-color-8 { --project-colour: #9467bd; }
.project-type-color-9 { --project-colour: #17becf; }
.project-type-color-10 { --project-colour: #e15759; }
.project-type-color-11 { --project-colour: #bab0ab; }
.project-type-color-12 { --project-colour: #7f7f7f; }
.project-type-color-13 { --project-colour: #bcbd22; }
.project-type-color-14 { --project-colour: #59a14f; }
.project-type-color-15 { --project-colour: #ff9da7; }
.project-type-color-16 { --project-colour: #4e79a7; }
.project-type-color-17 { --project-colour: #af7aa1; }
.project-type-color-18 { --project-colour: #9c755f; }
.project-type-color-19 { --project-colour: #f28e2b; }