/* About page */

.about-hero { padding: 8rem 3rem 4rem; text-align: center; background: var(--warm-white); }
.about-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5vw, 3.8rem); color: var(--forest); margin-bottom: 0.8rem; }
.about-hero p { font-size: 1.1rem; color: var(--earth); font-weight: 300; }

/* Founder */
.founder-section { max-width: 1100px; margin: 0 auto; padding: 5rem 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.founder-img { aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; }
.founder-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-copy h2 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--forest); margin-bottom: 1.5rem; }
.founder-copy p { font-size: 0.95rem; line-height: 1.9; color: var(--charcoal); opacity: 0.8; white-space: pre-line; }

/* Process */
.process-section { background: var(--forest); color: white; padding: 5rem 3rem; }
.process-section h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; text-align: center; margin-bottom: 3rem; }
.process-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.process-step { text-align: center; }
.process-img { aspect-ratio: 4 / 3; background: rgba(255,255,255,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: 1rem; }
.process-num { font-size: 0.72rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.5; margin-bottom: 0.3rem; }
.process-step h3 { font-size: 1rem; font-weight: 500; margin-bottom: 0.4rem; }
.process-step p { font-size: 0.82rem; opacity: 0.65; line-height: 1.55; font-weight: 300; }

/* Ingredients */
.ingredients-section { max-width: 1100px; margin: 0 auto; padding: 5rem 3rem; }
.ingredients-section h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--forest); text-align: center; margin-bottom: 2.5rem; }
.ingredients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ingredient-card { background: white; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.5rem; }
.ingredient-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--forest); margin-bottom: 0.4rem; }
.ingredient-card p { font-size: 0.82rem; color: var(--charcoal); opacity: 0.7; line-height: 1.55; font-weight: 300; }

/* Values */
.values-section { background: var(--light-sage); padding: 5rem 3rem; }
.values-section h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--forest); text-align: center; margin-bottom: 3rem; }
.values-grid { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
/* Reuses .feat, .feat-icon, .feat h4, .feat p from pages.css — override colours for light bg */
.values-section .feat-icon { background: rgba(44,74,46,0.1); }
.values-section .feat h4 { color: var(--forest); }
.values-section .feat p { opacity: 0.7; color: var(--charcoal); }

/* Responsive */
@media (max-width: 768px) {
  .about-hero { padding: 7rem 1.5rem 3rem; }
  .founder-section { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .process-section { padding: 3.5rem 1.5rem; }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ingredients-section { padding: 3.5rem 1.5rem; }
  .ingredients-grid { grid-template-columns: repeat(2, 1fr); }
  .values-section { padding: 3.5rem 1.5rem; }
}

@media (max-width: 480px) {
  .about-hero { padding: 6.5rem 1rem 2.5rem; }
  .founder-section { padding: 2.5rem 1rem; }
  .process-section { padding: 3rem 1rem; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .ingredients-section { padding: 3rem 1rem; }
  .ingredients-grid { grid-template-columns: 1fr; }
  .values-section { padding: 3rem 1rem; }
}