/* Standalone stylesheet for /about - self-contained rather than depending on
   homepage.css (which is only loaded on the homepage and scopes everything
   under .page-home), so this page's look can't drift if the homepage's own
   styling changes, and vice versa. Colour values match the homepage's
   --mh-* tokens for visual consistency without importing that whole file. */

.page-about .site-body { padding: 0; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.about-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 150px 24px 110px;
  background: #0a0a0c;
  color: #fff;
  text-align: center;
}

.about-hero__inner { max-width: 760px; }
.about-hero__eyebrow { display: inline-block; margin-bottom: 14px; color: #d71920; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.page-about .about-hero__inner h1 {
  margin: 0;
  color: #fff;
  font-family: "Archivo Black", "Inter", sans-serif;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.about-hero__tagline { margin: 20px 0 0; color: rgba(255,255,255,.68); font-size: clamp(14px, 1.5vw, 16px); font-weight: 600; letter-spacing: .01em; }

.about-video-slot { max-width: 920px; margin: 48px auto 0; padding-inline: 24px; text-align: center; scroll-margin-top: 96px; }
.about-video-slot__eyebrow { display: block; margin-bottom: 14px; color: #d71920; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-video-slot__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #0a0a0c;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.45);
}

.about-body { max-width: 680px; margin: 56px auto; padding-inline: 24px; }
.about-body p {
  margin: 0 0 22px;
  color: #232326;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.7;
}
.about-body p:first-child { font-weight: 600; }
.about-body p:last-child { margin-bottom: 0; }

.about-founder-quote { padding: 88px 0; background: #0a0a0c; color: #fff; text-align: center; }
.about-founder-quote__inner { max-width: 760px; margin-inline: auto; padding-inline: 24px; }
.about-founder-quote__eyebrow { display: inline-block; color: #d71920; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.about-founder-quote__quote {
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  color: #fff;
  font-family: "Archivo Black", "Inter", sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.005em;
}
.about-founder-quote__rule { display: block; width: 56px; height: 2px; margin: 32px auto 20px; background: #d71920; }
.about-founder-quote__byline { margin: 0; color: #c9c9ce; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 640px) {
  .about-hero { padding: 96px 20px 72px; }
  .about-founder-quote { padding: 64px 0; }
}