.about-page section[id] {
  scroll-margin-top: 120px;
}

.about-page-nav {
  border-bottom: 1px solid var(--color-border);
}

.about-page-nav .container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.about-page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-navy-900);
  font-weight: 600;
}

.about-page-nav a:hover,
.about-copy a:hover {
  color: var(--color-cyan-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about-page a:focus-visible,
.about-faith .accordion-button:focus-visible {
  outline: 2px solid var(--color-navy-900);
  outline-offset: 4px;
}

.about-section {
  padding: clamp(56px, 6vw, 88px) 0;
}

.about-page #vision-mission {
  padding-bottom: clamp(28px, 3vw, 44px);
}

.about-page #our-ethos {
  padding-top: clamp(36px, 3.5vw, 52px);
}

.about-section--muted {
  background: var(--color-surface);
}

.about-copy h2 {
  margin: 0 0 24px;
  color: var(--color-navy-900);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.15;
  text-wrap: balance;
}

.about-copy p,
.about-values dd,
.about-faith__statements li {
  color: var(--color-muted);
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.about-copy p {
  max-width: 72ch;
  margin: 0 0 24px;
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.about-copy .about-lead {
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1.6;
}

.about-page .accent-image {
  width: 100%;
  padding: 0;
}

.about-purpose {
  position: relative;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
  padding-bottom: 88px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--whiteColor);
  box-shadow: 0 16px 40px rgb(0 33 71 / 10%), 0 4px 12px rgb(0 33 71 / 6%);
}

.about-purpose::after {
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 72px;
  content: "";
  pointer-events: none;
  background: url("../img/images/daystar-gate-silhouette.webp") center bottom / auto 72px no-repeat;
}

.about-purpose h3 {
  margin: 0 0 16px;
  color: var(--color-navy-900);
  font-size: 26px;
  line-height: 1.25;
}

.about-faith {
  padding-top: 0;
}

.about-faith__inner {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}

.about-faith__accordion {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  --bs-accordion-color: var(--color-muted);
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: 0;
  --bs-accordion-btn-color: var(--color-navy-900);
  --bs-accordion-btn-bg: var(--whiteColor);
  --bs-accordion-active-color: var(--color-navy-900);
  --bs-accordion-active-bg: var(--color-cyan-100);
  --bs-accordion-btn-focus-box-shadow: none;
}

.about-faith__accordion .accordion-item {
  border: 1px solid var(--color-border);
}

.about-faith__accordion .accordion-button {
  gap: 16px;
  padding: 24px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.about-faith__accordion .accordion-body {
  padding: 24px;
}

.about-faith__statements {
  display: grid;
  gap: 24px;
  max-width: 75ch;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.about-faith__statements li + li {
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.about-values-section {
  --about-values-overlay: color-mix(in srgb, var(--color-navy-900) 50%, transparent);
  background-color: var(--color-navy-900);
  background-image: linear-gradient(var(--about-values-overlay), var(--about-values-overlay)),
    url("../img/images/gatec.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.about-values-section .about-copy h2 {
  margin-bottom: 40px;
  color: var(--whiteColor);
}

.about-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(32px, 6vw, 88px);
  margin: 0;
}

.about-values > div {
  padding: clamp(24px, 2.5vw, 32px);
  background-color: color-mix(in srgb, var(--whiteColor) 94%, transparent);
}

.about-values dt {
  margin-bottom: 8px;
  color: var(--color-navy-900);
  font-size: 20px;
  line-height: 1.3;
}

.about-values dd {
  max-width: 65ch;
  margin: 0;
  color: var(--color-navy-900);
}

@media (max-width: 991px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .about-values-section {
    background-attachment: scroll;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .about-page #our-ethos {
    padding-top: 40px;
  }
}

@media (max-width: 767px) {
  .about-page #our-ethos {
    padding-top: 30px;
  }

  .about-page-nav .container {
    gap: 4px 20px;
  }

  .about-values {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}