.about-page { background: var(--tem-color-surface); }
.about-hero { position: relative; overflow: hidden; padding-block: clamp(6rem, 10vw, 10rem); background: linear-gradient(90deg, rgb(8 15 31 / .98), rgb(18 27 47 / .9) 60%, rgb(24 32 51 / .7)), image-set(url("../images/heroes/cosmos-hero.avif") type("image/avif"), url("../images/heroes/cosmos-hero.webp") type("image/webp"), url("../images/heroes/cosmos-hero.jpg") type("image/jpeg")) center / cover no-repeat; color: #fff; }
.about-hero::after { position: absolute; right: -8rem; bottom: -13rem; width: 30rem; height: 30rem; border: 1px solid rgb(216 189 145 / .38); border-radius: 50%; content: ""; }
.about-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .55fr); align-items: center; gap: var(--tem-space-16); }
.about-hero__content { max-width: 54rem; }
.about-hero .tem-eyebrow, .about-promise .tem-eyebrow { color: #d8bd91; }
.about-hero .tem-display, .about-promise .tem-heading { color: #fff; }
.about-hero .tem-lead { max-width: 47rem; color: #d7dbe5; }
.about-hero__symbol-wrap { display: grid; justify-items: center; gap: var(--tem-space-5); margin: 0; }
.about-hero__symbol { width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: var(--tem-space-6); border: 1px solid rgb(216 189 145 / .62); border-radius: 50%; }
.about-hero__symbol img { width: 90%; max-width: none; height: auto; filter: drop-shadow(0 0 1.25rem rgb(216 189 145 / .2)); }
.about-hero__symbol-wrap figcaption { color: #d8bd91; font-family: var(--tem-font-display); text-align: center; text-transform: uppercase; }
.about-hero__symbol-wrap figcaption span, .about-hero__symbol-wrap figcaption strong { display: block; }
.about-hero__symbol-wrap figcaption span { font-size: var(--tem-font-size-xs); letter-spacing: .14em; }
.about-hero__symbol-wrap figcaption strong { margin-top: .3rem; color: #fff; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: .04em; }
.about-origin__grid, .about-promise__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--tem-space-16); }
.about-origin__copy { max-width: 46rem; }
.about-origin__copy p:last-child { margin-bottom: 0; }
.about-heading { max-width: 49rem; margin-bottom: var(--tem-space-12); }
.about-people__grid { display: grid; gap: var(--tem-space-16); }
.about-person { display: grid; grid-template-columns: minmax(17rem, .7fr) minmax(0, 1.3fr); align-items: center; gap: var(--tem-space-12); padding-bottom: var(--tem-space-12); border-bottom: 1px solid var(--tem-color-border); }
.about-person--reverse { grid-template-columns: minmax(0, 1.3fr) minmax(17rem, .7fr); }
.about-person--reverse figure { order: 2; }
.about-person figure { margin: 0; }
.about-person figure img { width: 100%; height: clamp(27rem, 38vw, 38rem); object-fit: cover; border-radius: 50% 50% var(--tem-radius-lg) var(--tem-radius-lg); filter: saturate(.76) contrast(.98); }
.about-person:first-child figure img { object-position: center 66%; }
.about-person--reverse figure img { object-position: center 30%; }
.about-person figcaption { margin-top: var(--tem-space-3); color: var(--tem-color-ink); font-family: var(--tem-font-display); text-align: center; }
.about-person > div { max-width: 39rem; }
.about-people__note { max-width: 46rem; margin: var(--tem-space-8) 0 0 auto; padding-left: var(--tem-space-5); border-left: 2px solid var(--tem-color-accent); color: var(--tem-color-text-muted); }
.about-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tem-space-8); }
.about-principles__grid article { min-height: 19rem; padding: var(--tem-space-8) 0; border-top: 1px solid var(--tem-color-accent); }
.about-principles__grid article > span { display: block; margin-bottom: var(--tem-space-10); color: var(--tem-color-accent); font: 700 var(--tem-font-size-sm)/1 var(--tem-font-display); }
.about-promise p { color: #c9ced9; }
.about-cta .tem-heading { margin-bottom: var(--tem-space-2); }
@media (max-width: 760px) {
  .about-hero { padding-block: var(--tem-space-16); }
  .about-hero__grid, .about-origin__grid, .about-promise__grid, .about-person, .about-person--reverse { grid-template-columns: 1fr; gap: var(--tem-space-8); }
  .about-hero__symbol-wrap { width: min(16rem, 70vw); margin-inline: auto; }
  .about-person--reverse figure { order: 0; }
  .about-person figure img { height: min(135vw, 34rem); }
  .about-principles__grid { grid-template-columns: 1fr; gap: 0; }
  .about-principles__grid article { min-height: auto; }
}