/* about.css — /about page-specific styles. Layered on top of common.css
   and index.css (which already define .career-paths, .certs-grid, .test-card,
   .contact-box). This file only adds the unique parts of /about: hero with
   profile photo, long-form bio block, and CTA at the bottom. */

.about-hero{padding-top:7rem}
.about-hero-inner{
    display:flex;
    align-items:center;
    gap:2.5rem;
    max-width:980px;
    margin:0 auto;
    padding:0 2rem;
    flex-wrap:wrap
}
.about-photo{
    width:150px;height:150px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--border);
    flex-shrink:0
}
.about-intro{flex:1;min-width:260px}
.about-name{
    font-family:var(--font-display);
    font-size:2.6rem;
    font-weight:800;
    color:var(--text-bright);
    margin:.4rem 0 .8rem;
    letter-spacing:-.02em;
    line-height:1.05
}
.about-tagline{
    color:var(--text-secondary);
    font-size:1.05rem;
    line-height:1.55;
    margin:0
}

.about-bio{padding-top:1rem}
.about-bio-inner{
    max-width:740px;
    margin:0 auto;
    padding:0 2rem;
    color:var(--text-primary);
    font-size:1.05rem;
    line-height:1.8
}
.about-bio-inner p{margin-bottom:1.4rem}

.about-cta{padding-bottom:5rem}

@media(max-width:680px){
    .about-hero{padding-top:5.5rem}
    .about-hero-inner{gap:1.5rem;padding:0 1.5rem}
    .about-photo{width:110px;height:110px}
    .about-name{font-size:2rem}
    .about-tagline{font-size:.95rem}
    .about-bio-inner{font-size:1rem;padding:0 1.5rem;line-height:1.7}
}