:root{
    --bg:#D9D9D9;
    --bg-soft:#CFCFCF;
    --panel:#ECECEC;
    --panel-strong:#E3E3E3;
    --ink:#171717;
    --muted:#666666;
    --line:#B9B9B9;
    --accent:#3A3A3A;
    --accent-dark:#1E1E1E;
    --accent-soft:#D5D5D5;
    --white:#FFFFFF;
    --shadow:0 24px 70px rgba(0,0,0,.14);
}

*{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    margin:0;
    color:var(--ink);
    background:
        radial-gradient(circle at 82% 7%,rgba(0,0,0,.05),transparent 27%),
        linear-gradient(180deg,var(--bg),#EEEEEE);
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.container{
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto;
}

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid var(--line);
    background:rgba(217,217,217,.94);
    backdrop-filter:blur(18px);
}

.nav-inner{
    min-height:78px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:26px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:900;
    letter-spacing:-.02em;
    white-space:nowrap;
}

.brand-mark{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--accent-dark);
    border-radius:11px;
    background:rgba(255,255,255,.55);
    font-family:Georgia,"Times New Roman",serif;
    font-weight:800;
}

.desktop-nav{
    display:flex;
    justify-content:center;
    gap:17px;
    color:#444;
    font-size:.88rem;
}

.desktop-nav a:hover,
.desktop-nav a.active{
    color:#000;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
    justify-self:end;
}

.nav-button{
    height:44px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid #AAAAAA;
    border-radius:12px;
    background:rgba(255,255,255,.55);
    font-size:.9rem;
    font-weight:800;
    white-space:nowrap;
}

.nav-button-primary{
    color:var(--white);
    border-color:var(--accent-dark);
    background:var(--accent-dark);
}

.vcard-icon{
    position:relative;
    width:18px;
    height:14px;
    display:inline-block;
    border:1.5px solid currentColor;
    border-radius:3px;
}

.vcard-icon::before,
.vcard-icon::after{
    content:"";
    position:absolute;
    left:4px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
}

.vcard-icon::before{top:4px;width:9px}
.vcard-icon::after{top:8px;width:6px}

.linkedin-icon{
    width:20px;
    height:20px;
    display:inline-grid;
    place-items:center;
    border:1.5px solid currentColor;
    border-radius:5px;
    font-family:Arial,sans-serif;
    font-size:.72rem;
    font-weight:900;
}

.menu-button,
.mobile-menu{
    display:none;
}

.hero{
    padding:82px 0 72px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:74px;
    align-items:start;
}

.eyebrow,
.side-label{
    color:var(--accent-dark);
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:.78rem;
    font-weight:900;
}

h1,h2,h3{
    font-family:Georgia,"Times New Roman",serif;
}

h1{
    margin:18px 0 30px;
    font-size:clamp(4rem,7vw,7rem);
    line-height:.92;
    letter-spacing:-.045em;
}

h1 span{
    color:var(--accent);
}

.intro{
    max-width:730px;
    color:#444;
    font-size:1.16rem;
    line-height:1.75;
}

.hero-note{
    margin-top:28px;
    padding:20px 22px;
    border-left:3px solid var(--accent-dark);
    border-radius:0 14px 14px 0;
    background:linear-gradient(90deg,var(--accent-soft),transparent);
    line-height:1.65;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.button{
    min-height:48px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #AAAAAA;
    border-radius:11px;
    background:rgba(255,255,255,.62);
    font-weight:800;
    cursor:pointer;
}

.button-primary{
    color:var(--white);
    border-color:var(--accent-dark);
    background:var(--accent-dark);
}

.photo{
    width:100%;
    aspect-ratio:3/4;
    display:block;
    object-fit:cover;
    object-position:center top;
    border-radius:6px;
    box-shadow:var(--shadow);
    filter:saturate(.90) contrast(1.01);
}

.metrics-section{padding:0}

.metrics{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.metric{
    padding:29px 24px;
    border-right:1px solid var(--line);
}

.metric:last-child{border-right:0}

.metric-highlight{
    background:var(--accent-soft);
}

.metric strong{
    display:block;
    color:var(--accent-dark);
    font-family:Georgia,"Times New Roman",serif;
    font-size:3rem;
    line-height:1;
}

.metric b{
    display:block;
    margin-top:10px;
}

.metric span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:.88rem;
}

section{
    padding:88px 0;
    border-bottom:1px solid var(--line);
}

.section-grid{
    display:grid;
    grid-template-columns:230px 1fr;
    gap:72px;
    align-items:start;
}

.side-label{padding-top:8px}

h2{
    margin:0 0 24px;
    font-size:clamp(2.7rem,4.6vw,4.4rem);
    line-height:1;
    letter-spacing:-.035em;
}

.lead-text{
    max-width:820px;
    color:#505050;
    font-size:1.05rem;
    line-height:1.75;
}

.principles{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:34px;
}

.principle,
.competency,
.education,
.impact-card,
.matrix-item{
    border:1px solid var(--line);
    background:rgba(255,255,255,.48);
}

.principle{
    padding:28px;
    border-top:3px solid var(--accent-dark);
}

.principle small,
.competency small{
    color:#666;
    font-weight:900;
    letter-spacing:.1em;
}

.principle h3,
.competency h3,
.education h3{
    margin:12px 0 10px;
    font-size:1.42rem;
}

.principle p,
.competency p,
.education p,
.impact-card p{
    color:var(--muted);
    line-height:1.65;
}

/* Responsibility Matrix */
.matrix{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:18px;
    margin-top:34px;
}

.matrix-main{
    padding:32px;
    border-radius:4px;
    background:var(--accent-dark);
    color:var(--white);
}

.matrix-big{
    font-family:Georgia,"Times New Roman",serif;
    font-size:5rem;
    line-height:.9;
}

.matrix-main h3{
    margin:18px 0 10px;
    font-size:1.6rem;
}

.matrix-main p{
    margin:0;
    color:#DDDDDD;
    line-height:1.7;
}

.matrix-sub{
    display:block;
    margin-top:22px;
    color:#BBBBBB;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.matrix-side{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.matrix-item{
    padding:24px;
}

.matrix-item b{
    display:block;
    margin-bottom:7px;
    font-size:1.05rem;
}

.matrix-item span{
    color:var(--muted);
    line-height:1.55;
}

.impact-layout{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:24px;
    margin-top:34px;
}

.impact-main{
    padding:34px;
    background:#232323;
    color:var(--white);
}

.impact-main strong{
    display:block;
    color:#D0D0D0;
    font-family:Georgia,"Times New Roman",serif;
    font-size:5rem;
    line-height:.9;
}

.impact-main h3{
    margin:18px 0 10px;
    font-size:1.55rem;
}

.impact-main p{
    color:#DDDDDD;
    line-height:1.65;
}

.impact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.impact-card{padding:26px}

.impact-card b{
    display:block;
    margin-bottom:8px;
}

.competency-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:34px;
}

.competency{padding:28px}

.career-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin:34px 0 46px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.career-summary article{
    padding:24px 20px;
    border-right:1px solid var(--line);
}

.career-summary article:last-child{
    border-right:0;
}

.career-summary .current{
    background:var(--accent-soft);
}

.career-summary time,
.timeline-row time,
.education time{
    color:#444;
    font-weight:900;
    font-size:.82rem;
}

.career-summary h3{
    margin:10px 0 0;
    font-size:1.1rem;
}

.timeline-row{
    display:grid;
    grid-template-columns:170px 1fr;
    gap:34px;
    padding:25px 0;
    border-top:1px solid var(--line);
}

.timeline-row h3{
    margin:0 0 6px;
    font-size:1.35rem;
}

.company{
    color:#444;
    font-weight:700;
}

.timeline-row p{
    color:var(--muted);
    line-height:1.65;
}

.education-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:34px;
}

.education{padding:28px}

.education strong{color:#333}

.statement-box{
    padding:34px 0;
    border-top:3px solid var(--accent-dark);
    border-bottom:1px solid var(--line);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(1.7rem,3vw,2.5rem);
    line-height:1.35;
}

.contact-section{
    background:linear-gradient(135deg,#D0D0D0,#EFEFEF);
}

.contact-layout{
    display:grid;
    grid-template-columns:1fr auto;
    gap:40px;
    align-items:center;
}

.contact-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

footer{
    padding:30px 0 40px;
}

.footer-inner{
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
    font-size:.9rem;
}

.footer-inner strong{color:var(--ink)}

.toast{
    position:fixed;
    left:50%;
    bottom:28px;
    z-index:100;
    transform:translate(-50%,18px);
    padding:11px 16px;
    border-radius:10px;
    background:var(--accent-dark);
    color:var(--white);
    box-shadow:0 14px 34px rgba(0,0,0,.18);
    opacity:0;
    pointer-events:none;
    transition:.2s;
}

.toast.show{
    opacity:1;
    transform:translate(-50%,0);
}

@media(max-width:1100px){
    .desktop-nav{display:none}

    .nav-inner{
        grid-template-columns:auto 1fr;
    }

    .menu-button{
        width:44px;
        height:44px;
        padding:0;
        display:inline-flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid #AAAAAA;
        border-radius:12px;
        background:rgba(255,255,255,.55);
        cursor:pointer;
    }

    .menu-button span{
        width:18px;
        height:2px;
        display:block;
        border-radius:999px;
        background:var(--ink);
    }

    .menu-button[aria-expanded="true"] span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .menu-button[aria-expanded="true"] span:nth-child(2){
        opacity:0;
    }

    .menu-button[aria-expanded="true"] span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .mobile-menu{
        border-top:1px solid var(--line);
        background:rgba(217,217,217,.98);
    }

    .mobile-menu.is-open{
        display:block;
    }

    .mobile-menu-inner{
        display:grid;
        padding:10px 20px 16px;
    }

    .mobile-menu-inner a{
        padding:13px 0;
        border-bottom:1px solid rgba(0,0,0,.08);
        color:#444;
        font-weight:700;
    }

    .mobile-menu-inner a:last-child{border-bottom:0}

    .hero-grid,
    .section-grid,
    .contact-layout,
    .matrix{
        grid-template-columns:1fr;
    }

    .hero-grid{gap:42px}

    .photo{max-width:480px}

    .metrics{grid-template-columns:repeat(2,1fr)}

    .metric:nth-child(2){border-right:0}

    .metric:nth-child(-n+2){
        border-bottom:1px solid var(--line);
    }

    .principles,
    .career-summary{
        grid-template-columns:1fr 1fr;
    }

    .impact-layout{grid-template-columns:1fr}

    .contact-buttons{justify-content:flex-start}
}

@media(max-width:650px){
    .nav-button{
        width:46px;
        padding:0;
    }

    .nav-button > span:last-child{display:none}

    .metrics,
    .principles,
    .matrix-side,
    .impact-grid,
    .competency-grid,
    .career-summary,
    .education-grid{
        grid-template-columns:1fr;
    }

    .metric,
    .career-summary article{
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .timeline-row{
        grid-template-columns:1fr;
        gap:7px;
    }

    .footer-inner{flex-direction:column}
}