/* Contained photo hero aligned with the site's 1200px content width. */
.about-page .ab-intro {
  padding: 48px 0 60px;
  display: grid;
  align-items: center;
  text-align: left;
  background: #fff;
}
.ab-intro-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.ab-hero-copy { position: relative; z-index: 1; min-width: 0; }
.ab-intro h1 { margin: 0; font-size: clamp(36px, 4vw, 52px); line-height: 1.12; }
.ab-intro-lead { margin: 22px 0 0; font-size: 19px; line-height: 1.65; }
.ab-intro-arcs { display: none; }
.ab-hero-frame {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
}
.ab-hero-frame::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  z-index: -1;
  border-radius: 28px;
  background: #eaf7f1;
}
.ab-hero-visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: #eaf7f1;
  box-shadow: 0 8px 28px rgb(15 76 69 / .10);
}
.ab-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ab-portrait { border-radius: 24px; background: #eaf7f1; }
.ab-photo-placeholder { color: #0f4c45; font-size: clamp(32px, 4vw, 58px); font-weight: 750; letter-spacing: -.04em; }
.ab-photo-placeholder span { display: grid; place-items: center; width: 100px; max-width: 100%; aspect-ratio: 1; border: 1px solid #6fd9b0; border-radius: 50%; }
.ab-portrait.ab-photo-ready .ab-photo-placeholder { visibility: hidden; }
.about-page #final-step { padding-top: 60px; }

@media (min-width: 768px) and (max-width: 991px) {
  .ab-intro-content { gap: 40px; }
  .ab-intro h1 { font-size: 36px; }
  .ab-intro-lead { font-size: 18px; }
}
@media (max-width: 767px) {
  .about-page .ab-intro {
    padding: 42px 0 48px;
  }
  .ab-intro-content { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ab-intro h1 { font-size: 34px; line-height: 1.15; }
  .ab-intro-lead { font-size: 18px; margin-top: 20px; }
  .ab-hero-frame::before { inset: 12px -12px -12px 12px; }
  .ab-portrait { max-width: 240px; }
  .about-page #final-step { padding-top: 44px; }
}

/* Numbered principles. */
.about-page .ab-approach {
  padding: 56px 0 20px;
  background: #fff;
  text-align: left;
}
.ab-approach-kicker {
  margin: 0 0 14px;
  color: #6fd9b0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: .12em;
}
.ab-approach .ab-short-rule { margin: 22px 0 40px; background: #6fd9b0; }
.ab-approach .ab-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ab-approach .ab-principle { padding: 0 36px; }
.ab-approach .ab-principle:first-child { padding-left: 0; }
.ab-approach .ab-principle:last-child { padding-right: 0; }
.ab-approach .ab-principle + .ab-principle { border-left: 1px solid #eaf7f1; }
.ab-principle-number { display: block; margin-bottom: 14px; color: #6fd9b0; font-size: 32px; font-weight: 750; line-height: 1.1; letter-spacing: -.04em; }
.ab-approach .ab-principle h3 { font-size: 26px; margin-bottom: 16px; }
.ab-approach .ab-principle p { max-width: none; margin: 0; }
@media (min-width: 768px) and (max-width: 991px) {
  .ab-approach .ab-principle { padding-inline: 24px; }
  .ab-approach .ab-principle h3 { font-size: 23px; }
}
@media (max-width: 767px) {
  .about-page .ab-approach { padding: 44px 0 36px; }
  .ab-approach .ab-short-rule { margin-bottom: 30px; }
  .ab-approach .ab-principles { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ab-approach .ab-principle { padding: 0; }
  .ab-approach .ab-principle + .ab-principle { border-left: 0; border-top: 1px solid #eaf7f1; padding-top: 26px; }
  .ab-principle-number { font-size: 28px; margin-bottom: 12px; }
  .ab-approach .ab-principle h3 { font-size: 23px; margin-bottom: 12px; }
}