/* Editorial treatments are isolated to the institutional page. */
.about-intro {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr);
  gap: 72px;
  padding: 72px 7% 88px;
}

.about-intro-copy { max-width: 620px; }
.about-intro h1 { font-size: 2.875rem; line-height: 1.17; }
.about-intro-copy > p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.8; }

.about-intro-photo,
.direction-portrait,
.about-purpose-photo {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.about-intro-photo {
  max-width: 400px;
  margin-right: 10px;
  justify-self: end;
}

.about-intro-photo::after,
.direction-portrait::after,
.about-purpose-photo::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 12px -12px -12px 12px;
  border: 1px solid #2D8D93;
}

.about-history {
  padding: 88px 7% 96px;
  gap: 80px;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.about-history h2 { font-size: 2.75rem; line-height: 1.2; }
.about-history-story p { font-size: 1.0625rem; line-height: 1.85; }

.about-history-story .about-history-closing {
  position: relative;
  margin-top: 40px;
  padding-top: 24px;
  font-size: 2rem;
  line-height: 1.35;
}

.about-history-closing::before,
.about-closing::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: #C94B4B;
}

.about-history-closing::before { position: absolute; top: 0; left: 0; }

.oga-direction { padding: 80px 7% 88px; }
.oga-direction-intro { gap: 20px; margin-bottom: 44px; }
.oga-direction-intro h2 { font-size: 1.5rem; }
.oga-direction-intro p { font-size: 1.0625rem; line-height: 1.8; }

.oga-direction-profiles {
  max-width: 736px;
  gap: 88px;
}

.direction-portrait { aspect-ratio: 4 / 5; }
.direction-portrait::after { background: #E9EEF1; border-color: #0F6B6F; }
.direction-profile:nth-child(2) .direction-portrait::after { border-color: #2D8D93; }
.direction-profile h3 { margin-top: 30px; font-size: 1.625rem; }
.direction-role { font-size: 0.9375rem; }

.about-purpose {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 88px;
  padding: 80px 7% 88px;
  background: #E9EEF1;
}

.about-purpose-photo {
  max-width: 400px;
  justify-self: center;
}

.about-purpose-photo::after { border-color: #163D57; }
.about-purpose h2 { font-size: 2.75rem; line-height: 1.18; }
.about-purpose-copy > p:not(.eyebrow) { font-size: 1.0625rem; }
.about-purpose-copy > p.about-purpose-lead { font-size: 1.1875rem; }

.about-mission-vision { padding: 0; background: #163D57; }
.institutional-statement:first-child,
.institutional-statement + .institutional-statement {
  padding: 64px 12%;
  border: 0;
  background: #163D57;
}

.institutional-statement + .institutional-statement { background: #2D8D93; }
.institutional-statement h2,
.institutional-statement + .institutional-statement h2 { color: #ffffff; }
.institutional-statement h2 { font-size: 1.625rem; }

/* Large bold body type keeps white text legible on mineral turquoise. */
.institutional-statement p {
  color: #ffffff;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.8;
}

.about-values { padding: 80px 7% 88px; background: #F8FAFB; }
.about-values h2 { font-size: 2.5rem; margin-bottom: 36px; }
.value-trigger { border-left: 0; min-height: 60px; }
.value-trigger:hover { background: #E9EEF1; }
.value-trigger[aria-expanded="true"] { background: transparent; color: var(--value-accent); }
.value-row:has(.value-trigger[aria-expanded="true"]) .value-panel {
  border-left: 2px solid var(--value-accent);
}
.value-panel p { padding: 4px 52px 22px 66px; }
.value-row:nth-child(3) .value-name::after {
  content: "\2665";
  display: inline-block;
  margin-left: 10px;
  color: #C94B4B;
  font-size: 0.75rem;
  vertical-align: middle;
}

.about-closing { padding: 80px 7% 88px; }
.about-closing::before { margin: 0 auto 28px; }
.about-closing h2 { font-size: 3.5rem; line-height: 1.2; }
.about-closing h2 span { display: block; }
.about-closing p { margin: 24px 0 32px; }
.about-closing-action { gap: 14px; }
.about-closing-action span { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .about-intro-photo::after,
  .direction-portrait::after,
  .about-purpose-photo::after { transition: border-color 350ms ease; }
  .about-intro-photo:hover::after,
  .direction-portrait:hover::after,
  .about-purpose-photo:hover::after { border-color: #163D57; }
  .value-trigger { transition: background-color 300ms ease, color 300ms ease; }
  .about-closing-action span { transition: transform 350ms ease; }
  .about-closing-action:hover span { transform: translateX(4px); }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .about-intro,
  .about-history,
  .about-purpose { gap: 48px; }
  .about-intro h1,
  .about-history h2,
  .about-purpose h2 { font-size: 2.375rem; }
  .institutional-statement:first-child,
  .institutional-statement + .institutional-statement { padding: 48px 10%; }
}

@media (max-width: 900px) {
  .about-intro,
  .about-history,
  .about-purpose { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about-intro,
  .oga-direction,
  .about-purpose,
  .about-values { padding: 48px 24px 56px; }
  .about-history { padding: 56px 24px 64px; }
  .about-intro h1,
  .about-history h2,
  .about-purpose h2 { font-size: 2.125rem; }
  .about-intro-copy > p:not(.eyebrow),
  .about-history-story p,
  .oga-direction-intro p,
  .about-purpose-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.75; }
  .about-purpose-copy > p.about-purpose-lead { font-size: 1.125rem; }
  .about-intro-photo { max-width: 288px; margin: 0 auto; justify-self: center; }
  .about-history-story .about-history-closing { font-size: 1.625rem; margin-top: 32px; }
  .oga-direction-intro { gap: 20px; margin-bottom: 32px; }
  .oga-direction-profiles { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 288px; }
  .direction-profile h3 { font-size: 1.5rem; margin-top: 26px; }
  .about-purpose-photo { max-width: 288px; }
  .about-intro-photo::after,
  .direction-portrait::after,
  .about-purpose-photo::after { inset: 8px -8px -8px 8px; }
  .about-mission-vision { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .institutional-statement:first-child,
  .institutional-statement + .institutional-statement { padding: 44px 24px 48px; }
  .institutional-statement p { font-size: 1.1875rem; }
  .about-values h2 { font-size: 2.125rem; }
  .value-panel p { padding: 4px 16px 20px 50px; }
  .about-closing { padding: 56px 24px 64px; }
  .about-closing h2 { font-size: 2.25rem; }
}