.bv-about-page {
  color: var(--bv-text-primary);
}

.bv-about-width {
  width: min(100% - 32px, 720px);
  margin-inline: auto;
}

.bv-about-hero {
  padding: clamp(64px, 9vw, 112px) 0 clamp(38px, 5vw, 64px);
  border-bottom: 1px solid var(--bv-border-subtle-strong);
}

.bv-about-hero h1 {
  margin: 0 0 28px;
  color: var(--bv-heading-color);
  font-size: var(--bv-font-size-hero);
  line-height: var(--bv-line-height-tight);
}

.bv-about-lead {
  max-width: 40ch;
  margin: 0;
  color: var(--bv-text-secondary);
  font-size: var(--bv-font-size-xl);
  line-height: 1.55;
}

.bv-about-story {
  padding-block: clamp(44px, 7vw, 76px) clamp(72px, 10vw, 120px);
  font-size: var(--bv-font-size-lg);
  line-height: var(--bv-line-height-relaxed);
}

.bv-about-story > p {
  margin: 0 0 clamp(24px, 4vw, 38px);
}

.bv-about-story strong {
  color: var(--bv-heading-color);
}

.bv-about-closing {
  margin-top: clamp(52px, 8vw, 88px);
  padding-top: clamp(28px, 4vw, 42px);
  border-top: 1px solid var(--bv-border-subtle-strong);
}

.bv-about-closing p {
  margin: 0 0 22px;
  font-size: var(--bv-font-size-xl);
  line-height: 1.5;
}

.bv-about-closing .bv-about-final {
  margin-bottom: 0;
  color: var(--bv-accent);
  font-size: var(--bv-font-size-2xl);
  line-height: var(--bv-line-height-tight);
}

.bv-about-closing .bv-about-final strong {
  color: inherit;
}

@media (max-width: 700px) {
  .bv-about-width {
    width: min(100% - 28px, 720px);
  }

  .bv-about-hero {
    padding-block: 52px 36px;
  }

  .bv-about-hero h1 {
    margin-bottom: 22px;
  }
}