/* Approved guide infographic on the shared service shell. */
.service-design--guide .guide-hero { padding: 24px 0 40px; }
.service-design--guide .guide-breadcrumbs { margin-bottom: 20px; }
.service-design--guide .page-hero__grid { min-height: 0; align-items: start; }
.service-design--guide .guide-hero__lead { max-width: 30ch; }
.guide-infographic { min-width: 0; display: flex; flex-direction: column; }
.guide-infographic__visual { width: 100%; }
.guide-infographic__visual svg { display: block; width: 100%; height: auto; overflow: hidden; font-family: Onest, Arial, sans-serif; }
.guide-infographic__caption { border-top: 1px solid #596153; margin: 0 24px; padding-top: 26px; }
.guide-infographic__caption > span { display: block; margin-bottom: 20px; font-size: 12px; font-weight: 550; letter-spacing: .1em; text-transform: uppercase; color: #ffb317; }
.guide-infographic__caption p { color: #dce2d9; font-size: 17px; line-height: 1.5; max-width: 34ch; }
@media (max-width: 900px) {
  .service-design--guide .guide-hero { padding-top: 12px; padding-bottom: 40px; }
  .service-design--guide .guide-breadcrumbs { margin-bottom: 16px; }
  .service-design--guide .guide-hero__lead { max-width: 58ch; }
  .service-design--guide .page-hero__grid { min-height: 0; grid-template-columns: 1fr; gap: 24px; }
  .guide-infographic { width: min(100%, 500px); }
  .guide-infographic__caption { margin: 0; padding-top: 24px; }
  .guide-infographic__caption p { font-size: 16px; max-width: 38ch; }
}