:root{
    --navy:#1e2d42;
    --gold:#d2a578;
    --ink:#111827;
    --muted:#667085;
    --cream:#f7f2ec;
    --white:#fff;
    --line:rgba(30,45,66,.12)

}

*{
    box-sizing:border-box

}

html{
    scroll-behavior:smooth

}

body{
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    color:var(--ink);
    background:var(--white)

}

img{
    max-width:100%;
    display:block

}

.site-header{
    background:linear-gradient(135deg,#fff 0%,#f8f4ef 55%,#ece3d9 100%);
    min-height:100vh

}

.navbar{
    height:96px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6vw;
    position:sticky;
    top:0;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    z-index:10;
    box-shadow:0 1px 0 rgba(30,45,66,.08)

}

.brand img{
    width:180px

}

.nav-links{
    display:flex;
    gap:24px;
    align-items:center

}

.nav-links a{
    text-decoration:none;
    color:var(--navy);
    font-weight:700;
    font-size:14px

}

.nav-cta{
    background:var(--navy);
    color:white!important;
    padding:12px 20px;
    border-radius:999px

}

.menu-toggle{
    display:none;
    border:0;
    background:transparent;
    font-size:30px;
    color:var(--navy)

}

.hero{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
    padding:70px 6vw 90px

}

.eyebrow{
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:12px;
    font-weight:800;
    color:var(--gold);
    margin:0 0 16px

}

.hero h1,.intro h2,.section-heading h2,.profile h2,.experience h2,.publications h2,.contact h2{
    font-family:"Cormorant Garamond",serif;
    color:var(--navy);
    line-height:.98;
    margin:0

}

.hero h1{
    font-size:clamp(44px,6vw,82px);
    max-width:850px

}

.hero-text{
    font-size:19px;
    line-height:1.75;
    color:#39465a;
    max-width:720px;
    margin:28px 0

}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 24px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    margin-right:12px

}

.primary{
    background:var(--navy);
    color:#fff

}

.secondary{
    border:1px solid var(--navy);
    color:var(--navy)

}

.hero-image{
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(30,45,66,.2);
    max-height:760px

}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover

}

.intro,.services,.experience,.publications,.contact{
    padding:95px 6vw

}

.section-label{
    color:var(--gold);
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
    font-size:12px;
    margin-bottom:20px

}

.intro-grid{
    display:grid;
    grid-template-columns:.8fr 1fr;
    gap:60px

}

.intro h2,.section-heading h2,.contact h2{
    font-size:clamp(36px,4.5vw,64px)

}

.intro p,.profile p,.entity-grid p,.publication-card p,.contact p{
    font-size:18px;
    line-height:1.75;
    color:#475467

}

.services{
    background:var(--navy);
    color:white

}

.services h2,.services h3{
    color:white

}

.section-heading{
    text-align:center;
    max-width:780px;
    margin:0 auto 50px

}

.cards{
    display:grid;
    gap:24px

}

.cards-three{
    grid-template-columns:repeat(3,1fr)

}

.card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.16);
    padding:32px;
    border-radius:24px

}

.card span{
    color:var(--gold);
    font-weight:800

}

.card h3{
    font-family:"Cormorant Garamond",serif;
    font-size:32px;
    line-height:1.05;
    margin:18px 0 12px

}

.card p,.card li{
    line-height:1.65;
    color:#d8dee8

}

.card ul{
    padding-left:18px;
    margin:18px 0 0

}

.card li{
    margin:0 0 10px

}

.profile{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:70px;
    align-items:center;
    padding:110px 6vw;
    background:var(--cream)

}

.profile-image{
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.16)

}

.profile h2{
    font-size:clamp(42px,5vw,72px)

}

.profile h3{
    color:var(--gold);
    font-size:20px;
    margin:10px 0 22px

}

.credentials{
    list-style:none;
    padding:0;
    margin:26px 0 0

}

.credentials li{
    padding:14px 0;
    border-bottom:1px solid rgba(30,45,66,.12);
    font-weight:700;
    color:var(--navy)

}

.narrow{
    max-width:900px

}

.entity-grid{
    max-width:1050px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px

}

.entity-grid div{
    padding:24px 28px;
    border-left:4px solid var(--gold);
    background:#fff;
    box-shadow:0 16px 45px rgba(30,45,66,.08);
    border-radius:16px

}

.entity-grid strong{
    font-size:18px;
    color:var(--navy)

}

.entity-grid p{
    font-size:15px;
    margin:12px 0 0

}

.publications{
    background:#f8f8f7

}

.publication-grid{
    max-width:1050px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.3fr .9fr;
    gap:22px

}

.publication-card{
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    padding:30px;
    box-shadow:0 16px 45px rgba(30,45,66,.08)

}

.publication-card h3{
    font-family:"Cormorant Garamond",serif;
    font-size:32px;
    line-height:1.05;
    color:var(--navy);
    margin:10px 0 16px

}

.pub-tag{
    font-size:12px!important;
    line-height:1.4!important;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
    color:var(--gold)!important;
    margin:0

}

.featured-publication{
    display:flex;
    flex-direction:column;
    justify-content:space-between

}

.featured-publication .btn{
    width:max-content;
    margin-top:15px

}

.contact{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:60px;
    align-items:center;
    background:var(--navy);
    color:white

}

.contact h2{
    color:white

}

.contact p{
    color:#d8dee8

}

.contact-panel{
    display:grid;
    gap:14px

}

.contact-panel a{
    background:white;
    color:var(--navy);
    text-decoration:none;
    padding:20px 24px;
    border-radius:18px;
    font-weight:800

}

.floating-whatsapp{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:20;
    background:#25d366;
    color:white;
    text-decoration:none;
    padding:14px 20px;
    border-radius:999px;
    font-weight:800;
    box-shadow:0 18px 35px rgba(0,0,0,.22)

}

footer{
    text-align:center;
    padding:50px 6vw;
    background:#111827;
    color:#cbd5e1

}

footer img{
    width:160px;
    margin:0 auto 20px;
    filter:brightness(1.12)

}

@media(max-width:1100px){
    .cards-three,.entity-grid{
    grid-template-columns:1fr 1fr

}

.publication-grid{
    grid-template-columns:1fr

}

}

@media(max-width:900px){
    .site-header{
    min-height:auto

}

.navbar{
    height:82px;
    padding:0 6vw

}

.menu-toggle{
    display:block

}

.nav-links{
    position:absolute;
    top:82px;
    left:0;
    right:0;
    background:#fff;
    display:none;
    flex-direction:column;
    padding:25px

}

.nav-links.open{
    display:flex

}

.hero,.intro-grid,.profile,.contact{
    grid-template-columns:1fr

}

.hero{
    padding:26px 6vw 55px;
    gap:42px

}

.hero h1{
    font-size:clamp(44px,13vw,66px)

}

.hero-text{
    font-size:17px;
    line-height:1.72

}

.brand img{
    width:150px

}

.intro,.services,.experience,.publications,.contact{
    padding:68px 6vw

}

.cards-three,.entity-grid{
    grid-template-columns:1fr

}

.hero-image{
    border-radius:26px;
    max-height:none

}

.profile{
    gap:36px

}

.profile-image{
    order:2

}

.profile-content{
    order:1

}

.floating-whatsapp{
    right:16px;
    bottom:16px

}

}

@media(max-width:520px){

    .navbar{
        height:86px;
        display:flex;
        align-items:center;
    }

    .nav-links{
        top:86px;
    }

    .brand img{
        width:105px;
        height:auto;
    }
    
.hero{
    padding-top:18px

}

.eyebrow{
    font-size:11px;
    letter-spacing:.14em;
    margin-bottom:12px

}

.hero h1{
    font-size:44px

}

.btn{
    width:100%;
    margin:0 0 12px

}

.hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px

}

.hero-actions .btn{
    width:auto;
    margin:0;
    padding:14px 16px

}

.intro h2,.section-heading h2,.contact h2{
    font-size:38px

}

.card,.publication-card{
    padding:24px

}

.card h3,.publication-card h3{
    font-size:30px

}

.contact-panel a{
    font-size:14px;
    padding:17px

}

.floating-whatsapp{
    font-size:13px;
    padding:12px 16px

}

}