/* ============================================================
   ABOUT PAGE — css/about.css
   ============================================================ */

.section-white { background: var(--white); }

/* Hero Grid */
.about-hero-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center; }
.about-hero-grid h1 { margin-bottom: 18px; }
.about-hero-grid .p-lead { margin-bottom: 16px; }

.about-avatar-wrap { text-align: center; }
.about-avatar {
  width: 280px; height: 280px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-light), #c8e8e8);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem; border: 4px solid var(--white);
  box-shadow: 0 12px 40px rgba(26,122,122,.2);
  margin: 0 auto 16px; overflow: hidden;
}
.about-avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-name-badge { font-size: .9rem; color: var(--ink); margin-bottom: 10px; }
.about-name-badge strong { display: block; font-size: 1rem; }
.about-name-badge span { color: var(--ink-light); }
.about-location-badge {
  display: inline-block;
  background: var(--warm); color: var(--white);
  border-radius: 50px; padding: 7px 16px; font-size: .8rem; font-weight: 700;
  border: 3px solid var(--white); box-shadow: 0 4px 14px rgba(224,123,57,.35);
}

/* Story */
.max-760 h2 { margin-bottom: 20px; }
.max-760 .p-lead { margin-bottom: 18px; }
.max-760 .p-body { margin-bottom: 16px; }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.value-card {
  background: var(--white); border-radius: var(--r); padding: 28px;
  border: 1px solid var(--border); display: flex; gap: 18px; align-items: flex-start;
  transition: box-shadow .25s, transform .25s;
}
.value-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-2px); }
.value-icon { font-size: 1.8rem; flex-shrink: 0; }
.value-card h3 { margin-bottom: 8px; }

/* Who I Work With */
.biz-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.biz-tag {
  background: var(--teal-light); color: var(--teal);
  border-radius: 50px; padding: 8px 18px;
  font-size: .875rem; font-weight: 600;
}

.about-quote-card {
  background: linear-gradient(135deg, var(--teal-light), #d4eded);
  border-radius: var(--r); padding: 36px;
}
.about-quote-card p {
  font-size: 1.15rem; font-style: italic; font-family: 'Lora', serif;
  color: var(--teal); line-height: 1.7; margin-bottom: 20px;
}
.quote-attribution strong { display: block; font-style: normal; color: var(--ink); }
.quote-attribution span { font-size: .85rem; color: var(--ink-light); }

/* Responsive */
@media (max-width: 960px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .values-grid { grid-template-columns: 1fr; }
}