/* ====================
   ABOUT PAGE STYLES
   ==================== */

/* ==================== HEADER ==================== */
.about-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(24px, 4vw, 48px);
}

.about-nav {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.about-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ==================== HERO ==================== */
.about-hero {
  background: var(--bg-warm);
  padding: clamp(60px, 10vw, 120px) clamp(24px, 6vw, 80px);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.about-hero-content {
  max-width: 680px;
  margin: 0 auto;
}

.about-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.about-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 24px;
}

.about-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--fg-muted);
  font-weight: 300;
  line-height: 1.65;
}

/* ==================== MISSION ==================== */
.about-mission {
  background: var(--bg-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--section-pad) clamp(24px, 6vw, 80px);
}

.about-mission-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.about-mission-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--fg);
  line-height: 1.5;
}

/* ==================== FOUNDER ==================== */
.about-founder {
  padding: var(--section-pad) clamp(24px, 6vw, 80px);
}

.about-founder-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: center;
}

.about-founder-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.about-founder-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 500;
  font-style: italic;
  color: var(--fg);
  margin-bottom: 28px;
  line-height: 1.2;
}

.about-founder-body {
  font-size: clamp(15px, 1.3vw, 17px);
  color: var(--fg-muted);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 20px;
}

.about-founder-body:last-child {
  margin-bottom: 0;
}

.about-founder-text-col .about-eyebrow {
  margin-bottom: 16px;
}

/* ==================== VALUES ==================== */
.about-values {
  background: var(--bg-warm);
  padding: var(--section-pad) clamp(24px, 6vw, 80px);
  border-top: 1px solid var(--border);
}

.about-values-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.about-value-card {
  padding: 40px 32px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 2px;
}

.about-value-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 14px;
}

.about-value-body {
  font-size: 15px;
  color: var(--fg-muted);
  font-weight: 300;
  line-height: 1.7;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .about-founder-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-values-inner {
    grid-template-columns: 1fr;
  }

  .about-hero {
    padding: 48px 24px;
  }

  .about-mission {
    padding: 60px 24px;
  }

  .about-founder {
    padding: 60px 24px;
  }

  .about-values {
    padding: 60px 24px;
  }
}

@media (max-width: 480px) {
  .about-headline {
    font-size: 36px;
  }
}