/* ==========================================================================
   About — About Welcome Home Properties
   Hero / intro · our approach · the people you'll work with · closing CTA band
   ========================================================================== */

/* Align About content with the site chrome (1200px inner) */
.page-about .container {
  max-width: 1200px;
}

/* Shared section heading (Our approach / The people you'll work with)
   ---------------------------------------------------------------------- */

.about-section__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.9375rem; /* 31px */
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-xl); /* 32px */
}

/* Hero / intro
   ---------------------------------------------------------------------- */

.about-hero {
  background: var(--color-cream);
  padding: var(--space-4xl) 0 4.5rem; /* 80px / 72px */
}

.about-hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 2.75rem); /* up to 44px */
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  max-width: 22ch;
  margin: 0 0 var(--space-lg); /* 24px */
}

.about-hero__lead {
  display: flex;
  flex-direction: column;
  gap: 0.875rem; /* 14px */
  max-width: 66ch;
}

.about-hero__lead p {
  font-size: 1.0625rem; /* 17px */
  line-height: var(--leading-relaxed); /* 1.6 */
  margin: 0;
}

/* Our approach — cream cards on a linen band
   ---------------------------------------------------------------------- */

.about-approach {
  background: var(--color-linen);
  padding: 4.5rem 0; /* 72px */
}

.about-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg); /* 24px */
}

.about-card {
  background: var(--color-cream);
  border: 1px solid var(--color-pebble);
  border-radius: var(--radius-lg); /* 8px */
  padding: var(--space-lg); /* 24px */
}

.about-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1875rem; /* 19px */
  line-height: var(--leading-snug);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm); /* 8px */
}

.about-card__desc {
  font-size: 0.9375rem; /* 15px */
  color: var(--color-stone);
  line-height: 1.55;
  margin: 0;
}

/* The people you'll work with — editorial columns
   ---------------------------------------------------------------------- */

.about-people {
  background: var(--color-cream);
  padding: 4.5rem 0; /* 72px */
}

.about-people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem; /* 40px */
}

.about-trait__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.1875rem; /* 19px */
  line-height: var(--leading-snug);
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm); /* 8px */
}

.about-trait__desc {
  font-size: 0.9375rem; /* 15px */
  color: var(--color-stone);
  line-height: var(--leading-relaxed); /* 1.6 */
  margin: 0;
}

/* Closing CTA — linen band, copy left / buttons right
   ---------------------------------------------------------------------- */

.about-cta {
  background: var(--color-linen);
}

.about-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg); /* 24px */
  padding-top: var(--space-2xl); /* 48px */
  padding-bottom: var(--space-2xl); /* 48px */
}

.about-cta__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem; /* 24px */
  line-height: var(--leading-tight);
  margin: 0;
}

.about-cta__actions {
  display: flex;
  gap: var(--space-md); /* 16px */
  flex-wrap: wrap;
}

/* Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
  .about-hero {
    padding: var(--space-2xl) 0;
  }

  .about-approach,
  .about-people {
    padding: var(--space-2xl) 0;
  }

  .about-approach__grid,
  .about-people__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}