/* /services/{slug}: navy split banner + seam-crossing piece circle, included card with corner
   badge, colour process cards with arrows, sticky FAQ heading, related row. */

/* Split banner (pattern library §2B); the piece circle crosses into the next section (§9) */
.bd-svc-banner { position: relative; z-index: 1; background: var(--brand-1); color: #fff; padding: 64px 0 70px; }
.bd-svc-banner__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: end; }
.bd-svc-banner__title { color: #fff; font-weight: 800; font-size: clamp(32px, 4vw, 52px); margin: 0 0 14px; }
.bd-svc-banner :focus-visible { outline-color: #fff; }
.bd-svc-banner__lead { max-width: 560px; margin: 0 0 30px; font-size: 18px; color: var(--on-dark); }
.bd-svc-banner__piece {
  display: grid; place-items: center; width: 300px; height: 300px; margin-bottom: -190px; padding: 64px;
  border-radius: 50%; background: #fff; box-shadow: 0 18px 50px rgba(0, 43, 100, .28);
  outline: 10px solid rgba(255, 255, 255, .25); outline-offset: 0;
}
.bd-svc-banner__piece .bd-piece-icon { width: 100%; height: 100%; }

/* Intro + included card with a corner badge (§9 card corner-badge overlap) */
.bd-svc-intro { padding-top: 150px; }
.bd-who { margin-top: 26px; padding: 22px 24px; border-left: 4px solid var(--brand-2); background: var(--surface-soft); border-radius: 0 var(--bd-r-card) var(--bd-r-card) 0; }
.bd-who p { margin: 0; }
.bd-who__title, .bd-included__title { font-size: 18px; margin: 0 0 8px; }
.bd-included { position: relative; margin-top: 30px; padding: 46px 36px 36px; border: 2px solid var(--tint); border-radius: var(--bd-r-panel); background: #fff; }
.bd-included__badge { position: absolute; top: -32px; left: 30px; display: grid; place-items: center; width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: #fff; box-shadow: var(--bd-sh-soft); }
.bd-included .bd-checks { margin: 16px 0 26px; font-weight: 500; }
.bd-included .bd-checks li { align-items: flex-start; }
.bd-included .bd-checks svg { margin-top: 4px; }

/* Colour process cards joined by arrows (POSHLAB, in the brand's navy / royal / red) */
.bd-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; counter-reset: flow; }
.bd-flow__step { position: relative; padding: 34px 30px; border-radius: var(--bd-r-panel); background: var(--brand-1); color: var(--on-dark); }
.bd-flow__step:nth-child(2) { background: var(--royal); }
.bd-flow__step:nth-child(3) { background: var(--brand-2); color: #fff; }
.bd-flow__step p { margin: 0; font-size: 14.5px; }
.bd-flow__num { display: block; font-weight: 800; font-size: 46px; line-height: 1; color: rgba(255, 255, 255, .35); }
.bd-flow__title { margin: 14px 0 8px; font-size: 19px; color: #fff; }
.bd-flow__arrow { position: absolute; right: -44px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--brand-2); color: #fff; }

/* FAQ heading stays in view beside a long list */
.bd-faq-aside { position: sticky; top: calc(var(--bd-header-h) + 30px); }

/* Related services: a compact row of pill links */
.bd-related { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; padding-top: 30px; border-top: 1px solid var(--tint); }
.bd-related .bd-kicker { margin: 0; }
.bd-related__list { display: flex; flex-wrap: wrap; gap: 12px; }
.bd-related__item {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px;
  border: 1px solid #D6DEEF; border-radius: var(--bd-r-btn); background: #fff;
  font-weight: 700; font-size: 14px; color: var(--brand-1); text-decoration: none;
  transition: border-color var(--bd-t), box-shadow var(--bd-t), color var(--bd-t);
}
.bd-related__item:hover { border-color: var(--brand-2); color: var(--brand-2); box-shadow: var(--bd-sh-soft); }
.bd-related__icon { display: grid; place-items: center; width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--tint); }

@media (max-width: 980px) {
  .bd-svc-banner__grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 30px; }
  .bd-svc-banner__piece { width: 200px; height: 200px; padding: 44px; margin-bottom: -130px; }
  .bd-svc-intro { padding-top: 110px; }
  .bd-flow { grid-template-columns: 1fr; gap: 44px; }
  .bd-flow__arrow { right: auto; left: 50%; top: auto; bottom: -38px; margin: 0 0 0 -16px; transform: rotate(90deg); }
  .bd-faq-aside { position: static; }
}
@media (max-width: 767px) {
  .bd-svc-banner { padding: 44px 0 50px; }
  .bd-svc-banner__grid { grid-template-columns: 1fr; }
  .bd-svc-banner__piece { display: none; }
  .bd-svc-banner__lead { font-size: 16px; }
  .bd-svc-intro { padding-top: var(--bd-section-y); }
  .bd-included { padding: 42px 24px 26px; }
}