/* JoomlaHelpNow — About page */

.about-hero { background: radial-gradient(620px 320px at 85% 0%, var(--purple-100) 0%, rgba(237, 228, 248, 0) 72%), var(--white); }
.about-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: var(--space-16); align-items: center; }
.about-hero__copy h1 { max-width: 700px; margin-block: var(--space-5) var(--space-6); font-size: var(--fs-4xl); }
.about-hero__copy .page-hero__lede { max-width: 650px; }
.about-hero__visual { overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-hero__visual img { width: 100%; height: 380px; object-fit: cover; }
.about-mission { align-items: start; }
.about-mission .section-copy + .section-copy { margin-top: var(--space-5); }
.team-grid { align-items: stretch; }
.team-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.team-card > img { width: 100%; height: 300px; object-fit: cover; object-position: center 25%; }
.team-card__body { padding: var(--space-6); }
.team-card__role { color: var(--purple-600); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; }
.team-card h3 { margin-block: var(--space-3) var(--space-2); font-size: var(--fs-lg); }
.team-card p { color: var(--slate-500); font-size: var(--fs-sm); }
.team-card__skills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.team-card__skills span { padding: .3rem .55rem; border-radius: var(--radius-full); color: var(--slate-600); background: var(--slate-50); font-size: var(--fs-2xs); }
.team-disclaimer { margin-top: var(--space-6); color: var(--slate-400); font-size: var(--fs-xs); text-align: center; }
.about-principles { align-items: stretch; }
.about-principle { padding: var(--space-6); border-top: 2px solid var(--purple-400); }
.about-principle > span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--purple-600); background: var(--purple-50); }
.about-principle .icon { width: 20px; height: 20px; }
.about-principle h3 { margin-block: var(--space-5) var(--space-2); }
.about-principle p { color: var(--slate-500); font-size: var(--fs-sm); }
.about-cta { background: linear-gradient(120deg, var(--purple-700) 0%, var(--navy-900) 100%); }

@media (max-width: 900px) {
  .about-hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .about-hero__visual { max-width: 620px; }
}

@media (max-width: 540px) {
  .about-hero__copy h1 { font-size: var(--fs-3xl); }
  .about-hero__visual img { height: 280px; }
}