.mission-vision-page {
    background: #fff;
    color: #004735;
    font-family: 'Closer Text', sans-serif;
    overflow: hidden;
    padding-top: 160px;
}

.mv-container {
    width: var(--eco-page-shell, min(1320px, calc(100vw - 120px)));
    margin: 0 auto;
}

.mv-hero h1 {
    color: #013026;
    font-size: 64px;
    font-weight: 500;
    line-height: 1.04;
    margin: 0 0 60px;
}

.mv-hero-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mv-top-card,
.mv-goal-card {
    border-radius: 16px;
    min-height: 387px;
    overflow: hidden;
    position: relative;
}

.mv-top-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 38px 40px;
}

.mv-top-card figure {
    border-radius: 0 0 0 120px;
    height: 210px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 292px;
}

.mv-top-card figure img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.mv-top-card--mission {
    background: #004735;
    color: #fff;
}

.mv-top-card--vision {
    background: #cfe2e0;
}

.mv-top-card h2,
.mv-goal-card h2 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 10px;
}

.mv-top-card--mission h2,
.mv-goal-card h2 {
    color: #fff;
}

.mv-top-card--vision h2 {
    color: #013026;
}

.mv-top-card p,
.mv-goal-card p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    max-width: 395px;
}

.mv-top-card--mission p,
.mv-goal-card p {
    color: #cfe2e0;
}

.mv-top-card--vision p {
    color: #004735;
}

.mv-goal-card {
    background: #013026;
    min-height: 222px;
    padding: 40px;
}

.mv-ukraine-map {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 222px;
}

.mv-ukraine-map img {
    display: block;
    height: auto;
    max-height: 235px;
    max-width: min(100%, 713px);
    object-fit: contain;
    width: 100%;
}

.mv-ukraine-map span {
    background: radial-gradient(circle at 20% 20%, #cfe2e0 0 4px, transparent 5px),
        radial-gradient(circle at 45% 24%, #cfe2e0 0 4px, transparent 5px),
        radial-gradient(circle at 66% 31%, #cfe2e0 0 4px, transparent 5px),
        radial-gradient(circle at 37% 56%, #cfe2e0 0 4px, transparent 5px),
        radial-gradient(circle at 62% 65%, #cfe2e0 0 4px, transparent 5px),
        linear-gradient(25deg, transparent 35%, rgba(207, 226, 224, 0.7) 35% 36%, transparent 36%),
        linear-gradient(145deg, transparent 42%, rgba(207, 226, 224, 0.7) 42% 43%, transparent 43%),
        #004735;
    clip-path: polygon(5% 45%, 13% 32%, 28% 28%, 36% 17%, 52% 22%, 62% 14%, 76% 25%, 87% 30%, 86% 43%, 96% 49%, 88% 61%, 76% 60%, 70% 75%, 54% 68%, 43% 76%, 31% 67%, 19% 70%, 12% 59%, 0 58%);
    display: block;
    height: 190px;
    width: 365px;
}

.mv-section {
    padding-top: 70px;
}

.mv-section > h2 {
    color: #013026;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 34px;
}

.mv-card-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mv-card-grid--values .mv-info-card:nth-child(n+4),
.mv-card-grid--principles .mv-info-card:nth-child(n+4) {
    grid-column: span 1;
}

.mv-info-card {
    border: 1px solid #cfe2e0;
    border-radius: 16px;
    min-height: 299px;
    padding: 26px;
}

.mv-info-card--muted {
    background: #f1f5f8;
}

.mv-number {
    align-items: center;
    background: #fff;
    border: 1px solid #cfe2e0;
    border-radius: 50%;
    color: #004735;
    display: inline-flex;
    font-size: 16px;
    font-weight: 500;
    height: 40px;
    justify-content: center;
    line-height: 1;
    margin-bottom: 26px;
    width: 40px;
}

.mv-info-card h3 {
    color: #004735;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 12px;
}

.mv-info-card p {
    color: #004735;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
}

.mv-global {
    padding: 70px 0 60px;
}

.mv-global__heading {
    display: grid;
    gap: 80px;
    grid-template-columns: minmax(0, 520px) minmax(0, 690px);
    margin-bottom: 46px;
}

.mv-global h2 {
    color: #013026;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
}

.mv-global h2 span {
    display: block;
}

.mv-global__heading p {
    color: #004735;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 12px;
}

.mv-global__heading strong {
    color: #1d70b7;
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
}

.mv-global__logo {
    display: block;
    height: auto;
    max-height: 78px;
    max-width: 260px;
    object-fit: contain;
}

.mv-goals {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mv-goal {
    background: #cfe2e0;
    border-radius: 16px;
    min-height: 292px;
    padding: 26px;
}

.mv-goal__icon {
    align-items: center;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 34px;
    font-weight: 700;
    height: 82px;
    justify-content: center;
    margin-bottom: 26px;
    width: 82px;
}

.mv-goal h3 {
    color: #004735;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 12px;
}

.mv-goal p {
    color: #004735;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
}

@media (max-width: 1180px) {
    .mv-container {
        width: calc(100vw - 40px);
    }

    .mv-card-grid,
    .mv-goals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mv-global__heading {
        gap: 30px;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .mission-vision-page {
        padding-top: 104px;
    }

    .mv-hero h1 {
        font-size: 42px;
        line-height: 1.1;
        margin-bottom: 36px;
    }

    .mv-hero-grid,
    .mv-card-grid,
    .mv-goals {
        grid-template-columns: 1fr;
    }

    .mv-top-card,
    .mv-goal-card,
    .mv-info-card,
    .mv-goal {
        min-height: auto;
        padding: 26px;
    }

    .mv-top-card {
        min-height: 360px;
    }

    .mv-top-card figure {
        height: 180px;
        width: 245px;
    }

    .mv-section > h2,
    .mv-global h2 {
        font-size: 32px;
    }

    .mv-info-card p {
        font-size: 16px;
    }

    .mv-ukraine-map span {
        height: 150px;
        width: 290px;
    }
}

@media (max-width: 480px) {
    .mv-container {
        width: calc(100vw - 32px);
    }

    .mv-hero h1 {
        font-size: 34px;
    }

    .mv-top-card figure {
        height: 150px;
        width: 220px;
    }
}