.about-hero { padding: 56px 0 0; }

.about-hero .kicker { margin-bottom: 20px; }

.about-hero__title {
  max-width: 760px;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-h1-about);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

.about-hero__lead {
  max-width: 760px;
  margin: 0 0 48px;
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

.about-cover { height: var(--about-cover-h); }

.about-hero .ph--wide {
  height: 100%;
  border-radius: inherit;
}

.about-stats { padding: 76px 0; }

.about-stats__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius-card);
  background: var(--color-border-soft);
  overflow: hidden;
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 34px 28px;
  background: var(--color-surface);
}

.about-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 46px;
  line-height: var(--leading-flat);
  color: var(--color-accent-text);
}

.about-stat__label {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-body);
}

.about-stat--sourced .label-quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 0;
  padding-left: 0;
}

.about-stat--sourced .label-quote__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: inherit;
  color: inherit;
}

.about-stat--sourced .label-quote__source {
  order: 2;
  margin-bottom: 0;
}

.page-about .media-stub {
  aspect-ratio: 3 / 4;
  max-width: 320px;
}

.about-principles {
  margin-bottom: 0;
  padding: 80px 0;
  background: var(--color-surface-alt);
}

.about-principles__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.about-principles__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

.principles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.principle {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--amb-line-on-blush);
}

.principle:first-child { padding-top: 0; }
.principle:last-child { border-bottom: 0; padding-bottom: 0; }

.principle__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-muted);
}

.principle__title {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 26px;
  line-height: 1.15;
}

.principle__text {
  max-width: 520px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-body);
}

.about-team { padding: 80px 0; }

.mates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mate__frame {
  margin-bottom: 16px;
  border-radius: var(--radius-card);
}

.mate__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
}

.mate__role {
  margin: 0 0 12px;
  font-weight: var(--weight-medium);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

.mate__line {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-text-body);
}

@media (max-width: 1023.98px) {

  .about-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-stat { padding: 26px 22px; }

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

  .mates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .mate__name { font-size: var(--text-h5); }
}

@media (max-width: 767.98px) {

  .about-hero { padding: var(--mob-gap-md) 0 0; }

  .about-hero .kicker { margin-bottom: 14px; }

  .about-hero__lead {
    margin-bottom: var(--mob-gap-lg);
    font-size: var(--mob-text-body);
    line-height: var(--mob-leading-body);
  }

  .about-cover { height: 230px; }

  .page-about .media-stub { max-width: 220px; }

  .page-about .section { padding: var(--mob-gap-lg) 0; }

  .about-stats { padding: var(--mob-gap-lg) 0; }

  .about-stats__row {
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-card-sm);
  }

  .about-stat {
    gap: 8px;
    padding: 16px 15px;
  }

  .about-stat__value { font-size: 32px; }

  .about-stat__label {
    font-size: 11.5px;
    line-height: 1.5;
  }

  .about-stat--sourced .label-quote,
  .about-stat--sourced .label-quote__text { gap: 8px; }

  .about-stat--sourced .label-quote__source {
    font-size: var(--mob-text-label);
  }

  .about-principles { padding: var(--mob-gap-lg) 0; }

  .about-principles__grid { gap: 6px; }

  .principle {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0;
  }

  .principle:first-child { padding-top: 18px; }

  .principle__num { font-size: var(--text-2xs); }

  .principle__title {
    margin-bottom: 7px;
    font-size: 20px;
  }

  .principle__text {
    font-size: var(--mob-text-body-sm);
    line-height: 1.55;
  }

  .about-team { padding: var(--mob-gap-lg) 0; }

  .mates {
    display: flex;
    gap: var(--mob-gap-xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: calc(var(--container-pad) * -1);
    margin-right: calc(var(--container-pad) * -1);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);

    scroll-padding-inline: var(--container-pad);
  }

  .mates::-webkit-scrollbar { display: none; }

  .mates > * {
    flex: none;
    width: 66%;
    scroll-snap-align: start;
  }

  .mate__frame {
    margin-bottom: 12px;
    border-radius: var(--radius-card-sm);
  }

  .mate__name { font-size: var(--mob-text-card-title); }

  .mate__line {
    font-size: var(--text-2xs);
    line-height: 1.55;
  }
}