/* The curved motif follows the DSI mark and stays behind readable surfaces. */
.dsi-content {
  --muted: #4e5c70;
  background-color: #fbfcfd;
  background-image: url('brand-ribbons.svg');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: max(100%, 1000px) auto;
}

.dsi-content .page-hero {
  background-color: #f3f5f8;
  background-image: url('brand-ribbons.svg');
  background-repeat: no-repeat;
  background-position: center 20%;
  background-size: max(100%, 1000px) auto;
}

.dsi-content .page-hero::after { content: none; }

/* Small red labels use a darker ink over the translucent motif. */
.dsi-content .section-kicker,
.dsi-content .page-section p.section-kicker,
.dsi-content .card-link,
.dsi-content .service-cta,
.dsi-content .breadcrumb a:hover,
.dsi-content .contact-lines a:hover,
.dsi-content .dsi-text-link:hover { color: #b71922; }

.dsi-content .section-tinted,
.dsi-content .services {
  background-color: #f1f4f7;
  background-image: url('brand-ribbons.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: max(100%, 1000px) auto;
}

.dsi-content .hero-copy,
.dsi-content .cta-strip {
  background-image: url('brand-ribbons.svg');
  background-position: right center;
  background-size: auto 160%;
  background-repeat: no-repeat;
}

.dsi-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex: none;
}

.dsi-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex: none;
  color: var(--navy);
}

h1 > .dsi-heading-icon {
  display: flex;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border: 1px solid #d4dce5;
  border-radius: 8px;
  background: #e8edf3;
}

.hero h1 > .dsi-heading-icon {
  color: #fff;
  background: #36415d;
  border-color: #68738b;
}

h2 > .dsi-heading-icon,
h3 > .dsi-heading-icon {
  margin-right: 10px;
  margin-bottom: 3px;
}

h2 > .dsi-heading-icon .dsi-icon,
h3 > .dsi-heading-icon .dsi-icon {
  width: 24px;
  height: 24px;
}

.dsi-service-directory :is(.feature-card, .service-role-card) h3:has(> .dsi-heading-icon) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dsi-service-directory h3 > .dsi-heading-icon { margin: 3px 0 0; }
.dsi-service-directory h3:has(> .dsi-heading-icon) > a { flex: 1; min-width: 0; }

@media (min-width: 901px) {
  h1 > .dsi-heading-icon { width: 54px; height: 54px; }
  h1 > .dsi-heading-icon .dsi-icon { width: 32px; height: 32px; }
}

@media (max-width: 640px) {
  .dsi-content,
  .dsi-content .page-hero,
  .dsi-content .section-tinted,
  .dsi-content .services { background-size: 800px auto; }
  h1 > .dsi-heading-icon { width: 42px; height: 42px; margin-bottom: 14px; }
  h1 > .dsi-heading-icon .dsi-icon { width: 25px; height: 25px; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dsi-content .button { transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
  .dsi-content .button:hover { transform: translateY(-2px); }
  .dsi-content .button:active { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dsi-content .button { transform: none; transition: none; }
}

@media print {
  .dsi-content,
  .dsi-content .page-hero,
  .dsi-content .section-tinted,
  .dsi-content .services,
  .dsi-content .hero-copy,
  .dsi-content .cta-strip { background-image: none; }
}