/* Homepage service principles only; the existing design system stays intact. */
.page-index .hero-description.hero-principles {
  max-width: 760px;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: pretty;
}
.page-index .hero-principles-core {
  margin: 0;
  font: inherit;
  color: #edf0ed;
}
.page-index .hero-principles .hero-sentence {
  display: block;
}
.page-index .hero-principles-scope {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #e2e9e5;
}
.page-index .hero-principles .hero-phrase,
.page-index .hero-principles .hero-product {
  display: inline-block;
  white-space: nowrap;
}
@media (min-width: 601px) and (max-width: 1100px) {
  .page-index .hero-description.hero-principles {
    max-width: 560px;
  }
}
@media (max-width: 600px) {
  .page-index .hero-description.hero-principles {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.7;
    margin-top: 25px;
    margin-bottom: 27px;
  }
  /* Break at changes in meaning, not halfway into the next sentence.
     Clauses can still wrap naturally when text is enlarged. */
  .page-index .hero-principles .hero-sentence,
  .page-index .hero-principles-core .hero-clause {
    display: block;
  }
  .page-index .hero-principles-core .hero-sentence + .hero-sentence {
    margin-top: 8px;
  }
  .page-index .hero-principles-scope .hero-sentence + .hero-sentence {
    margin-top: 3px;
    text-wrap: balance;
  }
  .page-index .hero-principles-scope {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.75;
  }
}