:root {
    --unep-green: #064e3b;
    --unep-dark: #032f24;
    --unep-primary: #047857;
    --unep-gold: #d4af37;
    --unep-pale: #eff8f3;
    --unep-muted: #667085
}

* {
    box-sizing: border-box
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #344054;
    line-height: 1.7
}

.topbar {
    background: var(--unep-dark);
    color: #fff;
    font-size: .82rem;
    padding: 7px 0
}

.topbar a {
    color: #fff;
    text-decoration: none
}

.brand-header {
    background: #fff;
    border-bottom: 3px solid var(--unep-gold)
}

.brand-logo {
    width: 65px;
    height: 65px;
    object-fit: contain
}

.brand-name {
    font-size: clamp(.9rem, 2vw, 1.2rem);
    font-weight: 800;
    color: var(--unep-green);
    line-height: 1.3
}

.brand-tagline {
    font-size: .68rem;
    letter-spacing: 2px;
    color: #667085
}

.unep-nav {
    background: var(--unep-green)
}

.unep-nav .nav-link {
    font-size: .84rem;
    font-weight: 650;
    color: #fff;
    padding: .9rem 1rem !important
}

.unep-nav .nav-link:hover {
    color: var(--unep-gold)
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 390px;
    color: #fff;
    background: linear-gradient(90deg, rgba(3, 47, 36, .97), rgba(3, 47, 36, .72)), url('../img/finance-hero-placeholder.svg') center/cover;
    border-bottom: 5px solid var(--unep-gold)
}

.hero-kicker {
    color: var(--unep-gold);
    font-size: .8rem;
    letter-spacing: 2px;
    font-weight: 800;
    text-transform: uppercase
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 850;
    line-height: 1.13
}

.hero p {
    max-width: 720px;
    color: #e5eee9
}

.section-pad {
    padding: 72px 0
}

.section-title {
    color: var(--unep-green);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .7px
}

.section-rule {
    height: 4px;
    width: 65px;
    background: var(--unep-gold);
    margin: 15px auto 25px
}

.profile-photo {
    width: 100%;
    max-width: 360px;
    height: 410px;
    object-fit: cover;
    object-position: top center;
    border-bottom: 6px solid var(--unep-gold)
}

.profile-role {
    font-size: .8rem;
    letter-spacing: 1.3px;
    color: var(--unep-primary);
    font-weight: 800;
    text-transform: uppercase
}

.profile-name {
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 850;
    color: var(--unep-green)
}

.profile-copy {
    color: var(--unep-muted);
    text-align: justify
}

.commitment {
    border-left: 3px solid var(--unep-gold);
    padding-left: 18px
}

.soft-section {
    background: var(--unep-pale)
}

.service-item {
    height: 100%;
    padding: 25px 20px;
    border: 1px solid #e5e7eb;
    border-bottom: 3px solid var(--unep-green);
    transition: .2s
}

.service-item:hover {
    transform: translateY(-4px);
    border-bottom-color: var(--unep-gold)
}

.service-item i {
    font-size: 2rem;
    color: var(--unep-primary)
}

.service-item h3 {
    font-size: 1.08rem;
    color: var(--unep-green);
    font-weight: 750;
    margin-top: 12px
}

.announcement {
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb
}

.announcement h3 {
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--unep-green)
}

.announcement-date {
    font-size: .75rem;
    color: var(--unep-primary);
    font-weight: 800
}

.document-row {
    padding: 15px 0;
    border-bottom: 1px solid #e5e7eb
}

.contact-section {
    background: var(--unep-dark);
    color: #fff
}

.contact-section .section-title {
    color: #fff
}

.contact-icon {
    font-size: 1.4rem;
    color: var(--unep-gold);
    min-width: 30px
}

.site-footer {
    background: #02251c;
    color: #d0d8d4;
    padding: 24px 0;
    font-size: .85rem
}

.site-footer a {
    color: #fff;
    text-decoration: none
}

.admin-body {
    background: #f4f7f5;
    min-height: 100vh
}

.admin-top {
    background: var(--unep-dark);
    color: #fff
}

.admin-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 18px
}

.admin-sidebar a {
    display: block;
    padding: 9px 5px;
    color: var(--unep-green);
    text-decoration: none;
    font-weight: 650
}

.admin-sidebar a:hover {
    color: var(--unep-gold)
}

.admin-content {
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 24px
}

.btn-unep {
    background: var(--unep-green);
    border-color: var(--unep-green);
    color: #fff
}

.btn-unep:hover {
    background: var(--unep-dark);
    color: #fff
}

.form-label {
    font-weight: 650;
    color: #344054
}

@media(max-width:767px) {
    .section-pad {
        padding: 48px 0
    }

    .hero {
        min-height: 320px;
        text-align: center
    }

    .profile-photo {
        height: 350px;
        margin-bottom: 24px
    }

    .brand-logo {
        width: 52px;
        height: 52px
    }

    .unep-nav .nav-link {
        padding: .65rem .5rem !important
    }

    .admin-content {
        padding: 16px
    }
}