/* A clear agency proposition, with the message carrying the design. */
.agency-narrative {
  padding-block: 24px 72px;
  color: #062d3d;
}
.agency-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.agency-pillars > article {
  min-width: 0;
  padding-top: 26px;
  border-top: 1px solid #bddce3;
}
.agency-pillars h2 {
  margin: 0 0 20px;
  color: #062d3d;
  font-family: var(--display);
  font-size: clamp(27px, 2.5vw, 32px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.agency-pillars p {
  margin: 0;
  color: #355966;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.agency-pillars p + p { margin-top: 20px; }
.agency-closing {
  max-width: 940px;
  margin-top: 64px;
  padding-top: 42px;
  border-top: 1px solid #bddce3;
}
.agency-closing > p {
  max-width: 880px;
  margin: 0 0 34px;
  color: #355966;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}
.agency-closing > h2 {
  margin: 0 0 18px;
  color: #062d3d;
  font-family: var(--display);
  font-size: clamp(32px, 3.3vw, 42px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.agency-closing > .text-link,
.agency-closing > .text-link:hover {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #075e70;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.65;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.agency-closing > .text-link:focus-visible {
  outline: 3px solid #075e70;
  outline-offset: 4px;
}

/* Long category names remain legible above the headline and in breadcrumbs. */
.service-category-hero .eyebrow {
  max-width: 100%;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}
.service-category-page .service-breadcrumb li { min-width: 0; max-width: 100%; }
.service-category-page .service-breadcrumb :is(a, [aria-current]) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.service-category-page .service-breadcrumb li + li::before { flex-shrink: 0; }

@media (max-width: 1099px) {
  .agency-pillars { gap: 28px; }
}
@media (max-width: 899px) {
  .agency-narrative { padding-block: 20px 56px; }
  .agency-pillars { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .agency-pillars > article { padding-top: 24px; }
  .agency-pillars h2 { margin-bottom: 16px; font-size: 30px; }
  .agency-pillars p { max-width: 820px; }
  .agency-closing { margin-top: 42px; padding-top: 34px; }
}
@media (max-width: 599px) {
  .agency-narrative { padding-block: 16px 44px; }
  .agency-pillars { gap: 30px; }
  .agency-pillars h2 { font-size: 28px; }
  .agency-pillars p,
  .agency-closing > p { font-size: 18px; line-height: 1.75; }
  .agency-closing > p { margin-bottom: 28px; }
  .agency-closing > h2 { font-size: 32px; }
}