.page-home .about-section .about-copy > p {
  max-inline-size: 94%;
}

.page-home .about-section .portrait-media img {
  /* Fill the clipped frame so the photo and overlay share both edges. */
  transform: scale(1.05) translateX(-2%);
  border-color: transparent;
}

.page-home .about-section .portrait-caption-inline {
  --portrait-fade-size: clamp(40px, 6vw, 72px);
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  isolation: isolate;
  display: block;
  margin: 0;
  padding: 12px clamp(12px, 1.25vw, 18px);
  color: #fff;
  font-family: var(--type-family);
  font-size: .95rem;
  font-weight: var(--type-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-body);
}

.page-home .about-section .portrait-caption-inline::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--portrait-fade-size)) 0 0;
  pointer-events: none;
  z-index: -1;
  /* A short, feathered gradient protects caption contrast. */
  background: linear-gradient(to bottom,
    rgb(7 28 49 / 0%) 0,
    rgb(7 28 49 / 4.4%) calc(var(--portrait-fade-size) * .15),
    rgb(7 28 49 / 15.6%) calc(var(--portrait-fade-size) * .3),
    rgb(7 28 49 / 30.6%) calc(var(--portrait-fade-size) * .45),
    rgb(7 28 49 / 46.7%) calc(var(--portrait-fade-size) * .6),
    rgb(7 28 49 / 60.8%) calc(var(--portrait-fade-size) * .75),
    rgb(7 28 49 / 70%) calc(var(--portrait-fade-size) * .9),
    rgb(7 28 49 / 72%) var(--portrait-fade-size),
    rgb(7 28 49 / 82%) 100%);
}

.page-home .about-section .portrait-caption-inline strong,
.page-home .about-section .portrait-caption-inline span {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.page-home .about-section .portrait-caption-inline strong {
  font-weight: 650;
}

.page-home .about-section .portrait-caption-inline span {
  color: #e6eef7;
  font-weight: var(--type-regular);
  text-align: left;
}

@media (width > 900px) {
  .page-home .about-section .about-grid {
    --about-heading-size: min(var(--fs-title), calc((min(100vw - 64px, 1500px) - clamp(48px, 6vw, 84px)) / 17.5));
    align-items: start;
  }

  .page-home .about-section .about-copy {
    align-self: stretch;
    justify-content: space-between;
  }

  .page-home .about-section .about-copy h2 {
    font-size: var(--about-heading-size);
  }

  .page-home .about-section .portrait-frame {
    /* Center against the full biography and contact-link column. */
    margin-top: 0;
    align-self: center;
  }
}

/* Match the three Services hero links after the biography. */
.page-home .about-section .about-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  justify-content: flex-start;
  align-self: flex-start;
  justify-self: start;
  width: max-content;
  max-width: 94%;
  margin-top: var(--space-paragraph);
  padding: 0;
  color: #e2ecf5;
  font-family: var(--type-family);
  font-size: var(--type-lead);
  font-weight: 500;
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-body);
  text-decoration: none;
}

.page-home .about-section .about-contact::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 100%;
  height: 2px;
  background: var(--blue);
  transition: right .18s;
  pointer-events: none;
}

.page-home .about-section .about-contact:hover::after,
.page-home .about-section .about-contact:focus-visible::after {
  right: 0;
}

.page-home .about-section .about-contact:hover {
  color: #fff;
}

.page-home .about-section .about-contact:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  color: #fff;
}

@media (width <= 900px) {
  .page-home .about-section .about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .page-home .about-section .about-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    order: 0;
    width: 94%;
    margin-inline: auto;
  }

  .page-home .about-section .about-copy h2 {
    order: 0;
    width: 100%;
    max-width: none;
    text-align: left;
    text-wrap: balance;
  }

  .page-home .about-section .about-copy > p {
    max-inline-size: 100%;
    margin-inline: 0;
    text-align: left;
  }

  .page-home .about-section .portrait-frame {
    order: 1;
    width: 80%;
    max-width: 28rem;
    justify-self: center;
    margin-block: 0;
    margin-inline: auto;
  }

  .page-home .about-section .about-contact {
    align-self: flex-start;
    margin-inline: 0;
  }
}

.page-home .about-section .about-contact svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .about-section .about-contact::after {
    transition: none;
  }
}

@media (width <= 620px) {
  .page-home .about-section .portrait-caption-inline {
    font-size: .84rem;
  }
}