.about-main {
  min-height: 100svh;
}

.about-hero {
  min-height: 605px;
  padding-block: 140px 120px;
  background: var(--color-canvas);
}

.about-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.about-hero__eyebrow {
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 24;
}

.about-hero__title {
  max-width: 1000px;
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-heading);
  font-optical-sizing: auto;
  line-height: var(--line-height-heading-compact);
  letter-spacing: var(--tracking-heading-large);
  color: var(--color-ink);
  text-wrap: wrap;
}

.about-hero__title em {
  font-weight: inherit;
  font-style: italic;
  color: var(--color-accent);
}

.about-hero__title-mobile,
.about-hero__intro-mobile {
  display: none;
}

.about-hero__intro {
  max-width: 820px;
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 400, "opsz" 15;
}

.about-roles {
  min-height: 708px;
  padding-block: 130px;
  background: #f2f0ea;
}

.about-roles__head {
  padding-block-end: 56px;
}

.about-roles__eyebrow {
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 24;
  text-transform: uppercase;
}

.about-roles__title {
  margin-block-start: 18px;
  font-size: var(--font-size-heading-4);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: wrap;
}

.about-roles__title em {
  font-weight: inherit;
  font-style: italic;
  color: var(--color-accent);
}

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

.about-roles__card {
  display: flex;
  min-width: 0;
  min-height: 303px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 43px 39px 42px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  background: var(--color-surface);
}

.about-roles__rule {
  width: 24px;
  height: 1px;
  flex: none;
  background: var(--color-accent);
}

.about-roles__card-title {
  font-size: var(--font-size-heading-8);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: wrap;
}

.about-roles__copy {
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-warm-grey);
}

.about-roles__copy-mobile {
  display: none;
}

.about-authority {
  min-height: 352px;
  padding-block: 120px;
  background: var(--color-accent);
}

.about-authority__inner {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  align-items: start;
  gap: 80px;
}

.about-authority__title {
  font-size: var(--font-size-heading-4);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-surface);
  text-wrap: wrap;
}

.about-authority__title em {
  font-weight: inherit;
  font-style: italic;
  color: #d3b489;
}

.about-authority__copy {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.7;
  color: #a9c0b4;
}

.about-committees {
  min-height: 498px;
  padding-block: 130px 110px;
  background: var(--color-canvas);
}

.about-committees__head {
  padding-block-end: 56px;
}

.about-committees__eyebrow {
  color: var(--color-warm-grey);
  font-optical-sizing: none;
  font-variation-settings: "wght" 500, "opsz" 24;
  text-transform: uppercase;
}

.about-committees__title {
  margin-block-start: 18px;
  font-size: var(--font-size-heading-4);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: wrap;
}

.about-committees__title em {
  font-weight: inherit;
  font-style: italic;
  color: var(--color-accent);
}

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

.about-committees__card {
  min-width: 0;
  min-height: 113px;
  padding: 39px 35px 38px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-8);
  font-weight: var(--font-weight-heading);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.about-committees__card-title {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-wrap: inherit;
}

.about-community {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: var(--color-canvas);
}

.about-community__image {
  position: absolute;
  top: -7%;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 114%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1366px) {
  .about-community { height: min(520px, 70svh); }
}

@media (max-width: 1194px) {
  .about-hero { padding-block: 112px 96px; }
  .about-hero__inner { gap: 26px; }
  .about-roles { padding-block: 112px; }
  .about-roles__card { padding-inline: 30px; }
  .about-roles__card-title { font-size: 26px; }
  .about-authority { padding-block: 100px; }
  .about-authority__inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: 56px; }
  .about-committees { padding-block: 112px 96px; }
  .about-committees__card { padding-inline: 30px; }
}

@media (max-width: 900px) {
  .about-hero { padding-block: 96px 80px; }
  .about-hero__inner { gap: 24px; }
  .about-roles { padding-block: 96px; }
  .about-roles__cards { grid-template-columns: 1fr; gap: 16px; }
  .about-roles__card { min-height: 0; padding: 30px; }
  .about-authority { padding-block: 96px; }
  .about-authority__inner { grid-template-columns: 1fr; gap: 32px; }
  .about-committees { padding-block: 96px 80px; }
  .about-committees__cards { grid-template-columns: 1fr; gap: 16px; }
  .about-committees__card { min-height: 0; padding: 30px; }
}

@media (max-width: 760px) {
  .about-hero { padding-block: 80px 72px; }
  .about-hero__inner { gap: 22px; }
  .about-roles { padding-block: 80px; }
  .about-roles__title { font-size: 36px; }
  .about-authority { padding-block: 80px; }
  .about-committees { padding-block: 80px 72px; }
}

@media (max-width: 480px) {
  .about-hero { min-height: 372px; padding-block: 72px 64px; }
  .about-hero__inner { width: calc(100% - 48px); gap: 20px; }
  .about-hero__eyebrow { font-size: var(--font-size-section-meta); }
  .about-hero__title-desktop,
  .about-hero__intro-desktop { display: none; }
  .about-hero__title-mobile,
  .about-hero__intro-mobile { display: inline; }
  .about-hero__intro-mobile { font-size: var(--font-size-body); line-height: 1.72; }
  .about-roles { min-height: 623px; padding-block: 72px; }
  .about-roles__inner { width: calc(100% - 48px); }
  .about-roles__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .about-roles__card { min-height: 141px; gap: 14px; padding: 29px 25px 28px; border-radius: 18px; }
  .about-roles__card:last-child { min-height: 165px; }
  .about-roles__rule { width: 20px; }
  .about-roles__card-title { font-size: var(--font-size-h6); }
  .about-roles__copy { font-size: var(--font-size-supporting-text); font-weight: 400; }
  .about-roles__copy-desktop { display: none; }
  .about-roles__copy-mobile { display: block; }
  .about-authority { min-height: 0; padding-block: 72px; }
  .about-authority__inner { width: calc(100% - 48px); gap: 24px; }
  .about-authority__title { max-width: 290px; }
  .about-committees { min-height: 0; padding-block: 72px; }
  .about-committees__inner { width: calc(100% - 48px); }
  .about-committees__head { padding-block-end: 32px; }
  .about-committees__card { min-height: 90px; padding: 29px 25px 28px; border-radius: 18px; }
  .about-community { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 1366px) and (max-height: 650px) {
  .about-hero { padding-block: 80px 48px; }
}

@media (max-width: 900px) and (max-height: 500px) {
  .about-hero { padding-block: 40px; }
}

@media (max-width: 480px) and (max-height: 650px) {
  .about-hero { padding-block: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.apl-about-hero-motion-boot .about-hero__eyebrow,
  html.apl-about-hero-motion-boot .about-hero__title,
  html.apl-about-hero-motion-boot .about-hero__intro { visibility: hidden; }
  html.apl-about-roles-motion-boot .about-roles { visibility: hidden; }
  html.apl-about-committees-motion-boot .about-committees { visibility: hidden; }
}