/* About page only. Sitewide chrome/primitives live in base.css, nav.css, footer.css. */

/* PAGE HERO */
.about-hero { position: relative; overflow: hidden; background: var(--obsidian); color: var(--ivory); padding: 100px 0 80px; }
.about-hero h1 { margin-top: 18px; max-width: 700px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.16; color: var(--ivory); font-weight: 500; }

/* BODY COPY */
.about-body { background: var(--ivory); }
.about-body .eyebrow { margin-bottom: 24px; }
.about-body-copy { max-width: 720px; color: var(--stone); font-size: 16px; line-height: 1.9; }
.about-body-copy p + p { margin-top: 20px; }
.about-body-copy b { color: var(--obsidian); font-weight: 600; }

/* PHILOSOPHY + CTA */
.about-philosophy { background: var(--obsidian); text-align: center; padding: 130px 0; border-top: 1px solid var(--hair-dark); }
.about-philosophy .eyebrow { margin-bottom: 22px; }
.about-philosophy blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.4;
  color: var(--ivory);
  max-width: 740px;
  margin: 0 auto;
}
.about-philosophy .btn { margin-top: 42px; }

@media (max-width: 920px) {
  .about-hero { padding: 72px 0 56px; }
  .about-philosophy { padding: 72px 0; }
}