/* SP Quality — centred heading over a row of credential badges.
   Typography lives on the wrapper; inner richtext tags inherit it so the
   editor can strip inner-tag classes without losing styling. */
.sp-quality__eyebrow > *,
.sp-quality__lede > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 !important;
}

.sp-quality__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}
@media (min-width: 1024px) {
  .sp-quality__band { gap: var(--space-2xl); }
}

.sp-quality__intro { max-width: 680px; }
.sp-quality__eyebrow {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin: 0 0 var(--space-md);
}
/* Section H2: 32px mobile / 52px desktop, like the other section H2s on this page (text-3xl lg:text-5xl on the tag). */
.sp-quality__line {
  color: var(--clr-primary);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}
.sp-quality__lede {
  line-height: 1.55;
  margin: var(--space-md) 0 0;
}

/* ---- Credential badges: icon seal over a short label ----
   Mobile/tablet: 3 + 2, centred. Desktop (>=1024): one row of 5. */
.sp-quality__credentials {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-sm);
}
.sp-quality__credential {
  flex: 0 0 calc((100% - 2 * var(--space-sm)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--clr-primary);
  text-align: center;
  text-wrap: balance;
}
.sp-quality__badge-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-white);
  border: 1px solid color-mix(in srgb, var(--clr-secondary) 55%, transparent);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--clr-secondary) 14%, var(--clr-white));
  color: var(--clr-primary);
  font-size: 20px;
}
@media (min-width: 1024px) {
  .sp-quality__credentials {
    max-width: 1080px;
    flex-wrap: nowrap;
    gap: var(--space-xl);
  }
  .sp-quality__credential {
    flex: 1 1 0;
    gap: var(--space-md);
    font-size: var(--font-size-base);
  }
  .sp-quality__badge-icon { width: 72px; height: 72px; font-size: 24px; }
}