/* ==========================================================
ABOUT.CSS
Only loaded on about.html. Editing this can't touch the
header, buttons, cards, or footer components.
========================================================== */

/* Push content below the fixed header, since this page has
   no full-bleed hero to sit behind it */
.about-content {
  padding-top: calc(var(--header-height) + var(--space-5));
}

/* ----------------------------------------------------------
01. HERO GRID (story + image, side by side on desktop)
---------------------------------------------------------- */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--space-6);
}

.about-story h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin-bottom: var(--space-2);
}

.about-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.about-story p {
  max-width: 62ch;
}

.about-image img {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.about-image .image-caption {
  font-size: 0.88rem;
  margin-top: var(--space-1);
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .about-image {
    order: -1;
  }
}

/* ----------------------------------------------------------
02. VALUES — reuses .card from cards.css, adds a numeral
---------------------------------------------------------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.value-card {
  position: relative;
  padding-top: 2.75rem;
}

.value-number {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: rgba(45, 85, 55, 0.18);
}

.value-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.value-card p {
  margin-bottom: 0;
}

/* ----------------------------------------------------------
03. LISTING COMPARISON TABLE
---------------------------------------------------------- */
.comparison-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(22, 40, 28, 0.06);
}

.comparison-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.95rem;
}

.comparison-col-label {
  width: 22%;
}

.comparison-col-data {
  width: 39%;
}

.comparison-table th,
.comparison-table td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  border-bottom: 1px solid rgba(45, 85, 55, 0.1);
}

.comparison-table th:not(:last-child),
.comparison-table td:not(:last-child) {
  border-right: 1px solid rgba(45, 85, 55, 0.12);
}

.comparison-table thead th {
  background: var(--accent-dark);
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
}

.comparison-table tbody th {
  font-weight: 600;
  color: var(--heading);
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody td:last-child {
  color: var(--accent);
  font-weight: 500;
}