/* Match the homepage's ivory treatment without changing the source artwork. */
#arborea .brand-art img,
#public-procurement .brand-art img {
  filter: url(#about-brand-ivory);
}

/* The About hero is independent of the homepage's brand diagram. */
.about-page-hero {
  display: flex;
  align-items: center;
  min-height: clamp(620px, 78vh, 880px);
  padding-block: clamp(4rem, 8vw, 7rem);
  background-size: cover;
}

.about-page-hero .about-hero-card {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(26, 23, 17, .8), rgba(10, 10, 9, .72));
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.about-hero-card h1 {
  max-width: 700px;
  text-wrap: balance;
}

.about-hero-card p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 1.5rem;
  line-height: 1.75;
}

@media (max-width: 600px) {
  .about-page-hero { min-height: 600px; padding-block: 3rem; }
  .about-hero-card h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
}