.about-page .content-hero {
  background:
    radial-gradient(ellipse at 100% 0%, #0ca4ee20, transparent 60%),
    var(--brand-navy);
}
.about-page .content-hero h1 {
  max-width: 900px;
}
.about-page .page-eyebrow {
  color: #80d5ff;
}
.about-section-heading {
  max-width: 820px;
  margin-bottom: 36px;
}
.about-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.about-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--accent);
  background: #eaf7fc;
  border-radius: 12px;
  margin-bottom: 22px;
}
.about-icon svg {
  width: 26px;
  height: 26px;
}
.about-insight-grid p,
.about-principles p {
  margin-bottom: 0;
}
.about-insight-closing {
  max-width: 850px;
  margin: 34px 0 0 !important;
  padding-left: 20px;
  border-left: 3px solid var(--brand-orange);
}
.about-approach {
  margin-top: 56px;
  padding: 40px;
  background: var(--surface);
  border-radius: 16px;
}
.about-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.about-principles article {
  padding-top: 22px;
  border-top: 2px solid #0ca4ee45;
}
.about-direction {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 54px;
  margin: 56px 0;
}
.about-direction p:last-child {
  margin-bottom: 0;
}
.about-cta {
  background: var(--brand-navy);
  padding: 38px;
  border-radius: 16px;
  display: grid;
  gap: 24px;
}
.about-page .about-cta h2 {
  color: #fff;
  margin-bottom: 12px;
}
.about-page .about-cta p {
  color: #c4dce5;
  margin: 0;
}
.about-cta .outline {
  color: #bce9ff;
  background: transparent;
  border-color: #6c9cb2;
}
.about-cta .outline:hover {
  background: #ffffff10;
}
@media (max-width: 900px) {
  .about-insight-grid,
  .about-principles {
    gap: 24px;
  }
  .about-approach {
    padding: 30px;
  }
  .about-direction {
    gap: 30px;
  }
}
@media (max-width: 650px) {
  .about-insight-grid,
  .about-principles,
  .about-direction {
    grid-template-columns: 1fr;
  }
  .about-insight-grid {
    gap: 30px;
  }
  .about-section-heading {
    margin-bottom: 26px;
  }
  .about-approach {
    margin-top: 36px;
    padding: 24px;
  }
  .about-direction {
    margin: 36px 0;
    gap: 8px;
  }
  .about-cta {
    padding: 24px;
  }
}