.about-reference-page {
  --about-blue: #2f6fc3;
  --about-blue-dark: #1f559d;
  --about-ink: #24292f;
  --about-muted: #626b76;
  --about-soft: #eff1f5;
  background: #fff;
}

.about-reference-page section {
  scroll-margin-top: 136px;
}

.about-hero {
  position: relative;
  display: grid;
  min-height: 400px;
  overflow: hidden;
  place-items: center;
  color: #fff;
  background: #182331;
}

.about-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(7, 18, 31, .3);
}

.about-hero-content {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100vw - 64px));
  text-align: center;
}

.about-hero h1 {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1.08;
}

.about-hero p {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 800;
}

.about-section-nav {
  background: var(--about-soft);
  border-bottom: 1px solid #e1e5eb;
}

.about-section-nav-inner {
  display: flex;
  gap: 25px;
  align-items: center;
  width: min(1280px, calc(100vw - 64px));
  min-height: 70px;
  margin: 0 auto;
}

.about-section-nav a {
  min-width: 168px;
  padding: 12px 28px;
  color: #252a31;
  border: 1px solid #e2e5e9;
  background: #fff;
  text-align: center;
  transition: color .2s ease, background .2s ease;
}

.about-section-nav a:first-child,
.about-section-nav a:hover,
.about-section-nav a:focus-visible {
  color: #fff;
  background: var(--about-blue);
}

.about-breadcrumb {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-left: auto;
  color: #707983;
  font-size: 14px;
  white-space: nowrap;
}

.about-breadcrumb a {
  min-width: 0;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
}

.about-breadcrumb a:first-child,
.about-breadcrumb a:hover {
  color: var(--about-blue);
  background: transparent;
}

.about-shell {
  width: min(1280px, calc(100vw - 64px));
  margin: 0 auto;
}

.about-section {
  padding: 76px 0 84px;
}

.about-section.is-soft {
  background: #f6f7f9;
}

.about-heading {
  max-width: 920px;
  margin-bottom: 36px;
}

.about-heading.is-centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.about-heading h2 {
  margin-bottom: 12px;
  color: var(--about-ink);
  font-size: 36px;
}

.about-heading h2::after {
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 15px;
  content: "";
  background: var(--about-blue);
}

.about-heading.is-centered h2::after {
  margin-right: auto;
  margin-left: auto;
}

.about-heading p,
.about-profile-copy p {
  color: var(--about-muted);
}

.about-profile-copy {
  max-width: 1160px;
  font-size: 17px;
  line-height: 1.86;
}

.about-profile-copy p {
  margin-bottom: 16px;
}

.about-profile-video {
  margin-top: 42px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111820;
}

.about-profile-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}