/* ==========================================================================
   ABOUT
   Sections in page order:
   1. Hero (shared .photo-hero)   4. How we're different (3 steps)
   2. By the numbers              5. Closing CTA
   3. Our story (2 columns)
   ========================================================================== */

/* Shared heading size for this page */
.about-h2 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-compact);
}

/* Muted light text used on the dark sections */
.about-muted {
  color: var(--blue-100);
}

/* --------------------------------------------------------------------------
   1. HERO — shared .photo-hero--low (components.css).
   Phones (Mike, 8-oct-2026): the hero fills the screen (it was two thirds)
   and the headline is a bit smaller so it sits in two lines and leaves the
   faces free. Phones and tablets held upright load their own tall photo
   (the <picture> in the page); tablets held sideways and desktop, the wide one.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .photo-hero--low {
    min-height: 100svh;
  }

  .photo-hero--low .photo-hero__inner {
    padding-top: calc(var(--header-offset) + 60px);
  }

  .photo-hero--low .photo-hero__title {
    font-size: clamp(1.75rem, 9.2vw, 3rem);
  }
}

/* Tablets held upright also show the tall photo: the hero fills the screen and
   the photo is anchored near its top so the back row keeps their heads */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .photo-hero--low {
    min-height: 100svh;
  }

  .photo-hero--low .photo-hero__image {
    object-position: 50% 15%;
  }
}

/* --------------------------------------------------------------------------
   2. BY THE NUMBERS
   -------------------------------------------------------------------------- */
.about-numbers {
  --grid-line-bands: 4;   /* lines match the 4 stats */
  padding: var(--space-section) 0;
  background: var(--blue-900);
  color: var(--white);
}

.about-numbers__label {
  margin-bottom: 54px;
  color: var(--blue-100);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  padding: 14px 22px 18px;   /* the grid lines act as the dividers */
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: var(--weight-regular);
  line-height: var(--leading-none);
}

.stat__suffix {
  color: var(--gold-500);
  font-size: 0.57em;
}

.stat__label {
  margin-top: 16px;
  color: var(--blue-100);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-cozy);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. OUR STORY
   -------------------------------------------------------------------------- */
.about-story {
  padding: var(--space-section) 0;
  background: var(--blue-850);
  color: var(--white);
}

.about-story__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(3rem, 7vw, 6.3rem);
  align-items: start;
}

.about-story__grid > :first-child { grid-column: 1 / 6; }
.about-story__grid > :last-child  { grid-column: 7 / -1; }

.about-story__main {
  padding-top: 8px;
}

.about-story__main .about-h2 {
  margin-bottom: 26px;
}

.about-story__lead {
  margin-bottom: 20px;
  color: var(--blue-100);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-relaxed);
}

/* Long-form text block (paragraphs + list) */
.prose {
  color: var(--blue-100);
  line-height: var(--leading-relaxed);
}

.prose p + p,
.prose p + ul,
.prose ul + p {
  margin-top: 24px;
}

.prose ul {
  margin: 12px 0 0;
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: 6px;
}

.prose strong {
  color: var(--white);
}

.about-story__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-story__aside h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-compact);
}

.about-story__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   4. HOW WE'RE DIFFERENT
   -------------------------------------------------------------------------- */
.about-how {
  padding: var(--space-section) 0;
  background: var(--blue-900);
  color: var(--white);
}

.about-how .about-h2 {
  margin-bottom: 26px;
}

.about-how__intro {
  max-width: 850px;
  line-height: var(--leading-relaxed);
}

.about-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.about-step {
  padding: 24px 14px 18px 0;
  border-top: 1px solid var(--blue-300);
}

.about-step__number {
  margin-bottom: 26px;
  color: var(--gold-500);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
}

.about-step__title {
  margin-bottom: 14px;
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-compact);
}

.about-step__text {
  font-size: var(--text-16);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   5. CLOSING CTA
   Shared by every page: see .closing-cta in components.css.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .about-numbers {
    --grid-line-bands: 2;   /* stats go 2 per row */
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }

  .about-story__grid > :first-child,
  .about-story__grid > :last-child {
    grid-column: 1 / -1;
  }

  .about-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .about-numbers,
  .about-story,
  .about-how {
    padding-block: var(--space-section);
  }

  .about-numbers__label {
    margin-bottom: 32px;
  }

  .stat {
    padding: 8px 10px 12px;
  }
}