/* =========================
   TEAM PROFILE PAGE
   (extends tokens from about.css)
========================= */


.profile-breadcrumb{

    max-width:var(--container);
    margin:auto;
    padding:22px var(--pad) 0;

}


.profile-breadcrumb a{

    font-size:14px;
    font-weight:600;
    color:var(--blue);
    transition:opacity .2s ease;

}


.profile-breadcrumb a:hover{

    opacity:.75;

}





/* PROFILE HERO */


.profile-hero{

    max-width:var(--container);
    margin:auto;
    padding:clamp(30px, 5vw, 50px) var(--pad) clamp(50px, 8vw, 80px);

    display:grid;
    grid-template-columns:340px 1fr;
    gap:clamp(30px, 5vw, 70px);
    align-items:start;

}


.profile-portrait{

    position:relative;
    aspect-ratio:3/4;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--sand);
    box-shadow:var(--shadow-lift);

}


.profile-portrait img{

    width:100%;
    height:100%;
    object-fit:cover;

}


.profile-tab{

    position:absolute;
    top:18px;
    left:0;

    background:var(--ink);
    color:white;

    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    padding:8px 16px 8px 20px;
    border-radius:0 8px 8px 0;

}





.profile-intro .eyebrow{

    display:block;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;

}


.profile-intro h1{

    font-size:clamp(34px, 5vw, 56px);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:18px;

}


.profile-tagline{

    font-size:clamp(16px, 1.6vw, 19px);
    line-height:1.65;
    color:#4a4a4a;
    max-width:560px;
    margin-bottom:32px;

}




.profile-meta{

    display:flex;
    flex-wrap:wrap;
    gap:clamp(24px, 4vw, 48px);

    padding:24px 0;
    margin-bottom:28px;

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);

}


.meta-item{

    display:flex;
    flex-direction:column;
    gap:4px;

}


.meta-label{

    font-size:13px;
    color:#8a8a8a;

}


.meta-value{

    font-size:18px;
    font-weight:700;
    letter-spacing:-.3px;

}




.profile-socials{

    display:flex;
    gap:12px;

}


.social-link{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:var(--sand);
    color:var(--ink);

    transition:background .2s ease, color .2s ease, transform .2s ease;

}


.social-link:hover{

    background:var(--blue);
    color:white;
    transform:translateY(-3px);

}





/* BIO */


.profile-bio{

    background:var(--paper);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);

}


.profile-bio-inner{

    max-width:760px;
    margin:auto;
    padding:clamp(50px, 8vw, 80px) var(--pad);

}


.profile-bio-inner .eyebrow{

    display:block;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;

}


.profile-bio-inner h2{

    font-size:clamp(26px, 3.6vw, 36px);
    letter-spacing:-1px;
    line-height:1.15;
    margin-bottom:22px;

}


.profile-bio-inner p{

    font-size:clamp(16px, 1.4vw, 18px);
    line-height:1.75;
    color:#4a4a4a;

}


.profile-bio-inner p + p{

    margin-top:16px;

}





/* SKILLS */


.profile-skills{

    max-width:var(--container);
    margin:auto;
    padding:clamp(50px, 8vw, 90px) var(--pad);

}


.skills-head{

    max-width:600px;
    margin:0 auto clamp(30px, 5vw, 48px);
    text-align:center;

}


.skills-head .eyebrow{

    display:inline-block;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;

}


.skills-head h2{

    font-size:clamp(26px, 3.6vw, 38px);
    letter-spacing:-1px;

}




.skills-list{

    max-width:720px;
    margin:auto;

    display:flex;
    flex-direction:column;
    gap:26px;

}


.skill-row{

    display:flex;
    flex-direction:column;
    gap:10px;

}


.skill-label{

    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-size:16px;
    font-weight:600;

}


.skill-percent{

    color:var(--blue);
    font-weight:700;

}


.skill-track{

    width:100%;
    height:10px;
    border-radius:20px;
    background:var(--sand);
    overflow:hidden;

}


.skill-fill{

    height:100%;
    width:0%;
    border-radius:20px;
    background:linear-gradient(90deg, var(--blue), var(--blue-dark));
    transition:width 1.1s cubic-bezier(.16,.84,.44,1);

}


.skill-fill.in-view{

    width:var(--value);

}


@media (prefers-reduced-motion: reduce){

    .skill-fill{
        transition:none;
    }

}





/* QUICK FACTS */


.profile-facts{

    background:var(--paper);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);

}


.facts-head{

    max-width:600px;
    margin:0 auto;
    padding:clamp(50px, 8vw, 90px) var(--pad) 0;
    text-align:center;

}


.facts-head .eyebrow{

    display:inline-block;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:14px;

}


.facts-head h2{

    font-size:clamp(26px, 3.6vw, 38px);
    letter-spacing:-1px;
    margin-bottom:clamp(30px, 5vw, 48px);

}




.facts-grid{

    max-width:var(--container);
    margin:auto;
    padding:0 var(--pad) clamp(50px, 8vw, 90px);

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:clamp(16px, 2.5vw, 24px);

}


.fact-card{

    background:var(--cream);
    border-radius:var(--radius-md);
    padding:26px 22px;

}


.fact-icon{

    font-size:26px;
    margin-bottom:14px;

}


.fact-card h3{

    font-size:16px;
    margin-bottom:8px;

}


.fact-card p{

    font-size:14px;
    line-height:1.6;
    color:#4a4a4a;

}





/* RESPONSIVE */


@media(max-width:900px){


    .profile-hero{

        grid-template-columns:1fr;

    }


    .profile-portrait{

        max-width:340px;
        margin:0 auto;

    }


    .profile-intro{

        text-align:center;

    }


    .profile-tagline{

        margin-left:auto;
        margin-right:auto;

    }


    .profile-meta{

        justify-content:center;

    }


    .profile-socials{

        justify-content:center;

    }


    .facts-grid{

        grid-template-columns:repeat(2, 1fr);

    }

}


@media(max-width:640px){


    .facts-grid{

        grid-template-columns:1fr;

    }


    .profile-meta{

        gap:20px;

    }

}