/* =========================================
   YADI NIGERIA - COMPONENT STYLES
   ========================================= */

/* TOP BAR */
.topbar {
    background: var(--color-primary-deep);
    color: white;
    font-size: 14px;
}

.topbar-wrapper {
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-left span,
.topbar-right a {
    color: rgba(255, 255, 255, 0.86);
}

.topbar .divider {
    opacity: 0.35;
}

.topbar-right a {
    font-weight: 600;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.topbar-right a:hover {
    color: white;
}

/* Topbar divider between links and action buttons */
.topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.25);
    display: inline-block;
    flex-shrink: 0;
}

/* Topbar Volunteer / Donate action buttons */
.topbar-action {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.topbar-action:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: inherit !important;
}

.topbar-volunteer {
    background: rgba(255, 255, 255, 0.15);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.topbar-donate {
    background: var(--color-emergency);
    color: white !important;
    border: 1px solid rgba(217, 45, 76, 0.4);
    box-shadow: 0 2px 8px rgba(217, 45, 76, 0.3);
}

/* ALERT BAR */
.alert-bar {
    background: var(--color-soft-red);
    color: var(--color-text);
    font-size: 14px;
    border-bottom: 1px solid rgba(217, 45, 76, 0.14);
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.alert-bar.is-hidden {
    max-height: 0;
    opacity: 0;
    border-color: transparent;
}

.alert-wrapper {
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

.alert-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-emergency);
    color: white;
    font-size: 12px;
    flex: 0 0 auto;
}

.alert-message {
    flex: 1;
    color: var(--color-text);
    font-weight: 500;
    min-width: 0;
}

.alert-message span {
    display: inline-block;
}

.alert-action a {
    color: var(--color-emergency);
    font-weight: 700;
    white-space: nowrap;
}

.alert-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 0 0 auto;
    border: 1px solid rgba(217, 45, 76, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.alert-close:hover {
    background: white;
    transform: translateY(-1px);
}

.alert-close span {
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-emergency);
}

.alert-close span:first-child {
    transform: rotate(45deg);
}

.alert-close span:last-child {
    transform: rotate(-45deg);
}

@keyframes alertTicker {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* NAVBAR */
.navbar {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(227, 232, 228, 0.82);
    backdrop-filter: blur(18px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-nav);
    border-color: rgba(227, 232, 228, 0.55);
}

.navbar-wrapper {
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.nav-logo {
    flex-shrink: 0;
}

.nav-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-primary-deep);
}

.nav-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.brand-text {
    display: grid;
    line-height: 1.05;
}

.brand-text strong {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    letter-spacing: 0;
}

.brand-text small {
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    flex-shrink: 1;
    min-width: 0;
}

.nav-links li {
    position: relative;
}

.nav-links a,
.nav-dropdown-toggle {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-dropdown-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.nav-links a:hover,
.nav-dropdown-toggle:hover,
.dropdown.open > .nav-dropdown-toggle {
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
}

.dropdown.open > .nav-dropdown-toggle::after {
    transform: rotate(225deg) translate(-1px, -1px);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 264px;
    display: grid;
    gap: 4px;
    padding: 10px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
}

.dropdown-menu a:hover {
    color: var(--color-primary-deep);
}

.nav-cta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* MEMBER NAV BUTTON */
.member-nav-btn {
    background: var(--color-primary);
    color: white !important;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 18px;
    min-height: 40px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 136, 67, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.member-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 136, 67, 0.3);
    color: white !important;
}

.menu-toggle {
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card);
    cursor: pointer;
}

.menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--color-primary-deep);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* HERO SECTION */
.hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    background-color: var(--color-primary-deep);
    background-size: cover;
    background-position: center;
    padding: 0;
}

.hero-overlay {
    width: 100%;
    min-height: 620px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(7, 92, 49, 0.88), rgba(7, 92, 49, 0.52), rgba(7, 92, 49, 0.18)),
        radial-gradient(circle at 82% 18%, rgba(242, 140, 40, 0.22), transparent 34%);
}

.hero-content {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}

.hero-content h1 {
    max-width: 760px;
    color: white;
}

.hero-content p {
    max-width: 640px;
    margin: 24px 0 32px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-buttons .volunteer {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 16px 32px rgba(15, 136, 67, 0.24);
}

.hero-buttons .donate {
    background: var(--color-card);
    color: var(--color-primary-deep);
}

/* PAGE SHELL */
.page-shell {
    padding-top: 80px;
    padding-bottom: 80px;
}

.page-shell h1 {
    margin-bottom: 16px;
}

/* DONATE PAGE */
.donate-page {
    background: #ffffff;
}

.donate-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(242, 140, 40, 0.2), transparent 30%),
        linear-gradient(135deg, rgba(4, 59, 36, 0.98), rgba(15, 136, 67, 0.88));
}

.donate-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 76px 76px;
    opacity: 0.25;
    pointer-events: none;
}

.donate-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    gap: 42px;
    align-items: center;
}

.donate-hero-copy .section-kicker,
.donate-demo-notes .section-kicker {
    color: var(--color-warning);
}

.donate-hero-copy h1 {
    max-width: 760px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.04;
}

.donate-hero-copy p {
    max-width: 650px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.75;
}

.donate-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.donate-trust-strip span {
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 800;
}

.donate-checkout-card {
    display: grid;
    gap: 12px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.18);
}

.donate-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.donate-card-header span {
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.donate-card-header strong {
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-red);
    color: var(--color-emergency);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.donate-checkout-card label {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 800;
}

.donate-checkout-card input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--color-text);
    font: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.donate-checkout-card input:focus {
    border-color: rgba(15, 136, 67, 0.55);
    box-shadow: 0 0 0 4px rgba(15, 136, 67, 0.1);
}

.amount-input {
    display: grid;
    grid-template-columns: 76px 1fr;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #ffffff;
}

.amount-input span {
    display: grid;
    place-items: center;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-weight: 900;
}

.amount-input input {
    border: 0;
    border-radius: 0;
}

.quick-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 4px 0 8px;
}

.quick-amounts button {
    min-height: 42px;
    border: 1px solid rgba(15, 136, 67, 0.16);
    border-radius: var(--radius-sm);
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.quick-amounts button:hover,
.quick-amounts button.active {
    transform: translateY(-1px);
    background: var(--color-primary);
    color: #ffffff;
}

.donate-paystack-btn {
    width: 100%;
    border: 0;
    background: var(--color-emergency);
    color: #ffffff;
    cursor: pointer;
}

.donate-status {
    min-height: 42px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.donate-status.is-warning {
    background: var(--color-soft-red);
    color: var(--color-emergency);
}

.donate-status.is-success {
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
}

.donate-demo-notes {
    padding: 76px 0;
    background: #f7f9f8;
}

.donate-demo-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: 32px;
    align-items: center;
}

.donate-demo-grid h2 {
    max-width: 620px;
    margin-bottom: 14px;
    color: var(--color-primary-deep);
}

.donate-demo-grid p {
    max-width: 650px;
}

.test-card-panel {
    padding: 26px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(7, 92, 49, 0.08);
}

.test-card-panel span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.test-card-panel strong {
    display: block;
    margin: 10px 0 18px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    line-height: 1.2;
}

.test-card-panel p {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 14px;
}

@media (max-width: 900px) {
    .donate-hero-layout,
    .donate-demo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .donate-hero {
        padding: 72px 0;
    }

    .donate-checkout-card {
        padding: 20px;
    }

    .quick-amounts {
        grid-template-columns: 1fr;
    }
}

/* FOOTER */
.main-footer {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.98), rgba(7, 92, 49, 0.94)),
        radial-gradient(circle at 12% 0%, rgba(242, 140, 40, 0.2), transparent 28%);
    color: white;
    padding: 48px 0 0;
}

.main-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 0.18;
    pointer-events: none;
}

.footer-cta,
.footer-grid,
.footer-bottom {
    position: relative;
    z-index: 1;
}

.footer-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 32px;
    margin-bottom: 48px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.14);
}

.footer-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 700;
}

.footer-cta h2 {
    max-width: 700px;
    color: white;
    font-size: 30px;
    line-height: 1.25;
}

.footer-cta-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
}

.footer-donate {
    background: var(--color-emergency);
    color: white;
}

.footer-volunteer {
    background: white;
    color: var(--color-primary-deep);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 0.9fr 0.9fr 1.25fr;
    gap: 32px;
    align-items: start;
    padding-bottom: 48px;
}

.footer-brand {
    max-width: 430px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: white;
}

.footer-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 12px;
    background: white;
    padding: 4px;
}

.footer-logo span {
    display: grid;
    line-height: 1.05;
}

.footer-logo strong {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
}

.footer-logo small {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.footer-brand p {
    max-width: 390px;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.footer-badges span {
    display: inline-flex;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 700;
}

.main-footer h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 16px;
}

.main-footer p
 {
    color: rgba(255, 255, 255, 0.76);
}

.main-footer a {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

.main-footer a:hover {
    color: white;
}

.footer-links,
.footer-contact {
    display: grid;
}

.footer-contact {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.07);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    min-height: 68px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
}

.footer-bottom-links {
    display: flex;
    gap: 18px;
}

.footer-bottom-links a {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    font-weight: 700;
}

/* =========================
   ABOUT SECTION
========================= */

.about-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: linear-gradient(180deg, var(--color-card), var(--color-soft-green));
}

.about-section::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -140px;
    top: 60px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.09);
}

.about-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    gap: 64px;
    align-items: center;
}

.section-kicker {
    display: inline-flex;
    margin-bottom: 14px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.about-copy h2 {
    max-width: 650px;
    margin-bottom: 20px;
    color: var(--color-primary-deep);
}

.about-copy > p {
    max-width: 620px;
    margin-bottom: 28px;
    color: var(--color-muted);
    font-size: 17px;
}

.about-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.about-proof-grid div {
    min-height: 104px;
    padding: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 36px rgba(7, 92, 49, 0.07);
}

.about-proof-grid strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
}

.about-proof-grid span {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.about-text-link {
    color: var(--color-primary-deep);
    font-weight: 800;
}

.about-text-link:hover {
    color: var(--color-primary);
}

.about-visual {
    position: relative;
    min-height: 520px;
}

.about-image-card {
    position: absolute;
    inset: 0 0 48px 42px;
    overflow: hidden;
    border: 1px solid rgba(227, 232, 228, 0.84);
    border-radius: 28px;
    background: var(--color-card);
    box-shadow: 0 28px 70px rgba(7, 92, 49, 0.18);
}

.about-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-mission-card {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(360px, 78%);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
    background: rgba(7, 92, 49, 0.94);
    box-shadow: 0 24px 54px rgba(7, 92, 49, 0.24);
}

.about-mission-card span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.about-mission-card p {
    color: white;
    font-weight: 600;
}
/* =========================
   STRATEGIC FOCUS SECTION
========================= */

.strategic-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(180deg, var(--color-soft-green), var(--color-bg));
}

.strategic-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(7, 92, 49, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(7, 92, 49, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.45;
    pointer-events: none;
}

.strategic-header,
.strategic-grid {
    position: relative;
    z-index: 1;
}

.strategic-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 40px;
}

.strategic-header h2 {
    max-width: 760px;
    color: var(--color-primary-deep);
}

.strategic-header p {
    padding: 22px;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(255, 255, 255, 0.74);
    color: var(--color-muted);
    box-shadow: 0 14px 34px rgba(7, 92, 49, 0.07);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 16px;
    color: #6B7280;
    max-width: 700px;
    margin: auto;
    line-height: 1.6;
}

/* GRID */
.strategic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.strategic-card {
    position: relative;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(227, 232, 228, 0.92);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.strategic-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -48px;
    top: -48px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.strategic-featured {
    grid-column: span 2;
    min-height: 300px;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.96), rgba(15, 136, 67, 0.9)),
        radial-gradient(circle at 92% 12%, rgba(242, 140, 40, 0.26), transparent 30%);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 26px 64px rgba(7, 92, 49, 0.22);
}

.strategic-number {
    width: fit-content;
    margin-bottom: 28px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.strategic-featured .strategic-number {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.strategic-card h3 {
    position: relative;
    margin-bottom: 12px;
    color: var(--color-text);
    font-size: 22px;
    line-height: 1.25;
}

.strategic-card p {
    position: relative;
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}

.strategic-card a {
    position: relative;
    width: fit-content;
    margin-top: auto;
    color: var(--color-primary-deep);
    font-weight: 800;
}

.strategic-card a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
}

.strategic-featured h3,
.strategic-featured p,
.strategic-featured a {
    color: white;
}

.strategic-featured p {
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
}

.strategic-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 136, 67, 0.2);
    box-shadow: 0 26px 60px rgba(7, 92, 49, 0.14);
}
/* =========================
   YOUTH-CENTERED MODEL
========================= */

.youth-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: var(--color-card);
}

.youth-section::before {
    content: "";
    position: absolute;
    inset: auto -120px 80px auto;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(234, 243, 255, 0.9);
}

.youth-layout,
.youth-grid,
.youth-pathway {
    position: relative;
    z-index: 1;
}

.youth-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 56px;
    align-items: center;
    margin-bottom: 28px;
}

.youth-intro h2 {
    max-width: 680px;
    margin-bottom: 20px;
    color: var(--color-primary-deep);
}

.youth-intro > p {
    max-width: 610px;
    color: var(--color-muted);
    font-size: 17px;
    margin-bottom: 28px;
}

.youth-model-note {
    display: grid;
    gap: 6px;
    max-width: 520px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-soft-blue);
}

.youth-model-note strong {
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
}

.youth-model-note span {
    color: var(--color-muted);
    font-weight: 600;
}

.youth-media {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: var(--color-soft-green);
    box-shadow: 0 28px 70px rgba(7, 92, 49, 0.16);
}

.youth-media::after {
    content: "Youth Action";
    position: absolute;
    left: 22px;
    bottom: 22px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(7, 92, 49, 0.9);
    color: white;
    font-size: 13px;
    font-weight: 800;
}

.youth-media img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

.youth-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.youth-card {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.youth-card span {
    width: fit-content;
    margin-bottom: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.youth-card h3 {
    margin-bottom: 12px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.25;
}

.youth-card p {
    color: var(--color-muted);
    line-height: 1.6;
}

.youth-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 136, 67, 0.22);
    box-shadow: 0 24px 54px rgba(7, 92, 49, 0.12);
}

.youth-pathway {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-border);
}

.youth-pathway span {
    display: flex;
    justify-content: center;
    padding: 14px;
    background: white;
    color: var(--color-primary-deep);
    font-size: 14px;
    font-weight: 800;
}
/* =========================
   NATIONAL FOOTPRINT
========================= */

.national-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(180deg, var(--color-bg), var(--color-soft-green));
}

.national-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -220px;
    top: 80px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.national-header,
.national-grid,
.coordinator-strip {
    position: relative;
    z-index: 1;
}

.national-header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.72fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 40px;
}

.national-header h2 {
    max-width: 760px;
    color: var(--color-primary-deep);
}

.national-header p {
    padding: 22px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.76);
    color: var(--color-muted);
    box-shadow: 0 14px 34px rgba(7, 92, 49, 0.07);
}

.national-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1.08fr) minmax(0, 0.92fr);
    gap: 24px;
    align-items: stretch;
}

.national-map-card {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: var(--color-primary-deep);
    box-shadow: 0 28px 70px rgba(7, 92, 49, 0.16);
}

.national-map-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
}

.national-map-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7, 92, 49, 0.88));
}

.national-map-overlay {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    display: grid;
    gap: 6px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.national-role {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.national-map-overlay strong {
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
}

.national-map-overlay p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

.national-map-overlay a {
    width: fit-content;
    margin-top: 8px;
    color: white;
    font-weight: 800;
}

.national-map-overlay a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
}

.national-zone-panel {
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.08);
}

.national-zone-panel h3 {
    margin-bottom: 20px;
    color: var(--color-primary-deep);
    font-size: 24px;
}

.zone-list {
    display: grid;
    gap: 10px;
}

.zone-list a {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.zone-list a:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 136, 67, 0.22);
    box-shadow: 0 14px 30px rgba(7, 92, 49, 0.08);
}

.zone-list span {
    grid-row: span 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-weight: 900;
}

.zone-list strong {
    color: var(--color-text);
}

.zone-list small {
    color: var(--color-muted);
    font-weight: 700;
}

.coordinator-strip {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.07);
}

.coordinator-intro h3 {
    margin-bottom: 8px;
    color: var(--color-primary-deep);
    font-size: 24px;
}

.coordinator-placeholders {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.coordinator-placeholders a {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.coordinator-placeholders a:hover {
    background: var(--color-soft-green);
    transform: translateY(-2px);
}

.coordinator-placeholders span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 2px solid var(--color-soft-green);
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-primary-deep);
    font-weight: 900;
}

.coordinator-placeholders strong {
    text-align: center;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.25;
}
/* =========================
   LATEST UPDATES SECTION
========================= */

.updates-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: var(--color-card);
}

.updates-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(233, 245, 238, 0.48), transparent 42%);
    pointer-events: none;
}

.updates-header,
.updates-grid,
.resources-row,
.updates-cta {
    position: relative;
    z-index: 1;
}

.updates-header {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.74fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 40px;
}

.updates-header h2 {
    max-width: 760px;
    color: var(--color-primary-deep);
}

.updates-header p {
    padding: 22px;
    border-radius: var(--radius-md);
    background: var(--color-soft-blue);
    color: var(--color-muted);
    box-shadow: 0 14px 34px rgba(7, 92, 49, 0.07);
}

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

.update-card {
    display: grid;
    grid-template-rows: 210px 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.update-featured {
    grid-row: span 2;
    grid-template-rows: 360px 1fr;
    background: var(--color-primary-deep);
}

.update-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.update-content {
    display: grid;
    align-content: start;
    padding: 24px;
}

.update-content span {
    width: fit-content;
    margin-bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
}

.update-content h3 {
    margin-bottom: 12px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.25;
}

.update-content p {
    color: var(--color-muted);
    line-height: 1.6;
    margin-bottom: 20px;
}

.update-content a {
    width: fit-content;
    margin-top: auto;
    color: var(--color-primary-deep);
    font-weight: 800;
}

.update-content a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
}

.update-featured .update-content {
    background: var(--color-primary-deep);
}

.update-featured .update-content span {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}

.update-featured .update-content h3,
.update-featured .update-content a {
    color: white;
}

.update-featured .update-content p {
    color: rgba(255, 255, 255, 0.78);
}

.update-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 136, 67, 0.2);
    box-shadow: 0 26px 60px rgba(7, 92, 49, 0.14);
}

.resources-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.resource-box {
    min-height: 170px;
    display: grid;
    align-content: start;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.resource-box span {
    width: fit-content;
    margin-bottom: 28px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
}

.resource-box h3 {
    color: var(--color-primary-deep);
    margin-bottom: 8px;
    font-size: 21px;
}

.resource-box p {
    color: var(--color-muted);
}

.alert-resource {
    background: var(--color-soft-red);
    border-color: rgba(217, 45, 76, 0.16);
}

.alert-resource span {
    background: rgba(217, 45, 76, 0.11);
    color: var(--color-emergency);
}

.resource-box:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 136, 67, 0.2);
    box-shadow: 0 20px 44px rgba(7, 92, 49, 0.1);
}

.updates-cta {
    text-align: center;
    margin-top: 32px;
}

/* =========================
   JOIN YADI MOVEMENT
========================= */

.join-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.98), rgba(15, 136, 67, 0.92)),
        radial-gradient(circle at 80% 20%, rgba(242, 140, 40, 0.2), transparent 32%);
}

.join-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 76px 76px;
    opacity: 0.2;
    pointer-events: none;
}

.join-shell,
.join-grid,
.donation-highlight {
    position: relative;
    z-index: 1;
}

.join-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr);
    gap: 32px;
    align-items: stretch;
    margin-bottom: 24px;
}

.join-hero {
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.16);
}

.join-hero .section-kicker {
    color: rgba(255, 255, 255, 0.74);
}

.join-hero h2 {
    max-width: 820px;
    color: white;
}

.join-hero p {
    max-width: 660px;
    margin: 20px 0 30px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}

.join-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.join-primary-btn {
    background: white;
    color: var(--color-primary-deep);
}

.join-donate-btn {
    background: var(--color-emergency);
    color: white;
}

.join-impact-panel {
    display: grid;
    align-content: end;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
}

.join-impact-panel span {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.join-impact-panel strong {
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    line-height: 1.24;
}

.join-impact-panel p {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.76);
}

.join-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.join-card {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.join-card span {
    width: fit-content;
    margin-bottom: 32px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
}

.join-card h3 {
    margin-bottom: 12px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.25;
}

.join-card p {
    color: var(--color-muted);
    line-height: 1.6;
}

.join-card strong {
    width: fit-content;
    margin-top: auto;
    color: var(--color-primary-deep);
    font-size: 15px;
}

.join-card strong::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-1px);
}

.join-card-emergency {
    background: var(--color-soft-red);
}

.join-card-emergency span {
    background: rgba(217, 45, 76, 0.12);
    color: var(--color-emergency);
}

.join-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.16);
}

.donation-highlight {
    display: grid;
    grid-template-columns: 0.95fr 1.15fr auto;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
}

.donation-highlight span {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.donation-highlight h3 {
    color: white;
    font-size: 24px;
    line-height: 1.28;
}

.donation-highlight p {
    color: rgba(255, 255, 255, 0.76);
}

.donation-highlight-btn {
    background: var(--color-emergency);
    color: white;
    white-space: nowrap;
}

.join-footer {
    display: none;
}

/* =========================
   ABOUT HERO SECTION
========================= */

.about-hero {
    height: 70vh;
    background: url('../images/about/about-hero.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.about-hero-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.about-hero-text {
    color: #ffffff;
    max-width: 750px;
}

.about-hero-text h1 {
    font-size: 44px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.about-subtitle {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 10px;
}

.about-tagline {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-hero-cta {
    margin-top: 10px;
}

.about-hero {
    height: 75vh;
    background: url('../images/about/about-hero.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
}

.about-hero-grid {
    position: relative;
    z-index: 2;
    width: 100%;
}

.about-hero-text {
    color: #fff;
    max-width: 750px;
}

.about-hero-text h1 {
    font-size: 46px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.about-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.about-tagline {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 20px;
}

/* =========================
   ORGANIZATION OVERVIEW
========================= */

.about-overview {
    padding: 100px 0;
    background: #ffffff;
}

/* GRID */
.about-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

/* TEXT */
.overview-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT BOX */
.overview-highlight {
    background: #F7F9F8;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    height: fit-content;
}

.overview-highlight h3 {
    margin-bottom: 15px;
}

.overview-highlight ul {
    list-style: none;
    padding: 0;
}

.overview-highlight ul li {
    padding: 10px 0;
    border-bottom: 1px solid #E3E8E4;
    font-size: 14px;
    color: #4B5563;
}

/* FOOTER TEXT */
.overview-footer {
    margin-top: 50px;
    text-align: center;
    color: #6B7280;
    font-size: 15px;
}

/* =========================
   VISION & MISSION
========================= */

.vision-mission {
    padding: 100px 0;
    background: #F7F9F8;
}

/* GRID */
.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

/* CARDS */
.vm-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.vm-card h3 {
    margin-bottom: 15px;
    font-size: 20px;
}

.vm-card p {
    line-height: 1.7;
    color: #4B5563;
    font-size: 15px;
}

/* HOVER EFFECT (subtle premium feel) */
.vm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* FOOTER TEXT */
.vision-footer {
    margin-top: 50px;
    text-align: center;
    color: #6B7280;
    font-size: 15px;
}

/* =========================
   OBJECTIVES SECTION
========================= */

.objectives-section {
    padding: 100px 0;
    background: #ffffff;
}

/* INTRO TEXT */
.objectives-intro {
    margin-top: 30px;
    margin-bottom: 40px;
}

.objectives-intro p {
    line-height: 1.8;
    color: #4B5563;
    font-size: 16px;
}

/* LIST STYLING */
.objectives-list ul {
    list-style: none;
    padding: 0;
}

.objectives-list ul li {
    position: relative;
    padding: 15px 20px 15px 40px;
    margin-bottom: 10px;
    background: #F7F9F8;
    border-left: 4px solid #0F8843;
    border-radius: 8px;
    line-height: 1.7;
    font-size: 15px;
    color: #374151;
}

/* BULLET ACCENT */
.objectives-list ul li::before {
    content: "✔";
    position: absolute;
    left: 15px;
    top: 15px;
    color: #0F8843;
    font-weight: bold;
}

/* =========================
   VISUAL IMPACT SECTION
========================= */

.visual-impact {
    padding: 100px 0;
    background: #F7F9F8;
}

/* GRID */
.visual-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.visual-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

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

/* LARGE IMAGE */
.visual-card.large {
    grid-row: span 2;
}

/* CAPTION */
.visual-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 15px;
    font-size: 14px;
}

/* FOOTER TEXT */
.visual-footer {
    margin-top: 50px;
    text-align: center;
    color: #6B7280;
    font-size: 15px;
}

/* =========================
   CLOSING STATEMENT
========================= */

.closing-statement {
    padding: 100px 0;
    background: #ffffff;
}

.closing-statement .closing-box {
    text-align: center;
    max-width: 800px;
    margin: auto;
}

.closing-box h2 {
    font-size: 34px;
    margin-bottom: 20px;
    color: #1C1C1C;
}

.closing-box p {
    font-size: 16px;
    line-height: 1.8;
    color: #4B5563;
    margin-bottom: 15px;
}

.closing-note {
    font-weight: 500;
    color: #0F8843;
}

/* =========================
   ABOUT PAGE PREMIUM LAYOUT
========================= */

.about-hero {
    min-height: 680px;
    position: relative;
    display: flex;
    align-items: stretch;
    background: url('../images/banners/about-yadi.png') center/cover no-repeat;
}

.about-hero-overlay {
    width: 100%;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(7, 92, 49, 0.9), rgba(7, 92, 49, 0.58), rgba(7, 92, 49, 0.14)),
        radial-gradient(circle at 82% 18%, rgba(242, 140, 40, 0.24), transparent 34%);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.56fr);
    gap: 40px;
    align-items: end;
    padding: 96px 0;
}

.about-hero-text {
    max-width: 820px;
    color: white;
}

.about-hero-text .section-kicker {
    color: rgba(255, 255, 255, 0.74);
}

.about-hero-text h1 {
    color: white;
    font-size: 56px;
    line-height: 1.08;
    margin-bottom: 22px;
}

.about-subtitle {
    max-width: 690px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 18px;
}

.about-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
}

.about-hero-link {
    color: white;
    font-weight: 800;
}

.about-hero-card {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
}

.about-hero-card span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.about-hero-card strong {
    display: block;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    margin-bottom: 12px;
}

.about-hero-card p {
    color: rgba(255, 255, 255, 0.78);
}

.about-credibility {
    padding: 0;
    background: var(--color-bg);
}

.about-credibility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    overflow: hidden;
    transform: translateY(-36px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-border);
    box-shadow: 0 20px 54px rgba(7, 92, 49, 0.12);
}

.about-credibility-grid div {
    padding: 24px;
    background: white;
}

.about-credibility-grid strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
}

.about-credibility-grid span {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 800;
}

.about-overview {
    position: relative;
    overflow: hidden;
    padding: 72px 0 96px;
    background:
        linear-gradient(180deg, var(--color-bg), var(--color-card));
}

.about-overview::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -160px;
    top: 40px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.about-overview-grid {
    position: relative;
    z-index: 1;
}

.about-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.64fr);
    gap: 40px;
    align-items: start;
}

.overview-text h2,
.about-section-heading h2,
.objectives-intro h2 {
    max-width: 760px;
    color: var(--color-primary-deep);
    margin-bottom: 20px;
}

.overview-text p {
    max-width: 790px;
    margin-bottom: 16px;
    color: var(--color-muted);
    font-size: 17px;
}

.overview-lead {
    padding: 24px;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 34px rgba(7, 92, 49, 0.07);
    font-weight: 600;
}

.overview-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 790px;
    margin-top: 28px;
}

.overview-meta-grid div {
    padding: 22px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: 0 16px 38px rgba(7, 92, 49, 0.08);
}

.overview-meta-grid span {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.overview-meta-grid strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.overview-meta-grid small {
    color: var(--color-muted);
    font-weight: 700;
}

.overview-highlight {
    position: relative;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(233, 245, 238, 0.68));
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.08);
}

.overview-highlight::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.1);
}

.overview-highlight h3 {
    position: relative;
    margin-bottom: 18px;
    color: var(--color-primary-deep);
}

.overview-definition-list {
    position: relative;
    display: grid;
    gap: 10px;
}

.overview-definition-list div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(227, 232, 228, 0.9);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.82);
}

.overview-definition-list span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-weight: 900;
    font-size: 13px;
}

.overview-definition-list p {
    color: var(--color-muted);
    font-weight: 700;
    margin: 0;
}

.visual-impact {
    padding: 96px 0;
    background: white;
}

.vision-mission {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.98), rgba(15, 136, 67, 0.9)),
        radial-gradient(circle at 90% 12%, rgba(242, 140, 40, 0.22), transparent 34%);
}

.vision-mission::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 78px 78px;
    opacity: 0.2;
    pointer-events: none;
}

.vm-header,
.vision-mission-grid,
.vm-action-bridge {
    position: relative;
    z-index: 1;
}

.vm-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 30px;
}

.vm-header .section-kicker {
    color: rgba(255, 255, 255, 0.74);
}

.vm-header h2 {
    max-width: 760px;
    color: white;
}

.vm-header p {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.76);
    font-weight: 600;
}

.about-section-heading {
    max-width: 820px;
    margin-bottom: 40px;
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.vm-card {
    position: relative;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 36px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}

.vm-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.vm-label {
    position: relative;
    width: fit-content;
    margin-bottom: 56px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 800;
}

.vm-card h3 {
    position: relative;
    color: var(--color-primary-deep);
    font-size: 32px;
    margin-bottom: 14px;
}

.vm-card p {
    position: relative;
    color: var(--color-muted);
    font-size: 17px;
}

.vm-card strong {
    position: relative;
    width: fit-content;
    margin-top: auto;
    padding-top: 28px;
    color: var(--color-primary-deep);
    font-size: 15px;
}

.mission {
    background: rgba(233, 245, 238, 0.96);
}

.mission::before {
    background: rgba(242, 140, 40, 0.14);
}

.vm-action-bridge {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.16);
}

.vm-action-bridge div {
    display: grid;
    gap: 8px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.1);
}

.vm-action-bridge span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 900;
}

.vm-action-bridge strong {
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
}

.vm-action-bridge small {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.objectives-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(15, 136, 67, 0.12), transparent 28%),
        linear-gradient(180deg, var(--color-soft-green), var(--color-bg));
}

.objectives-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(7, 92, 49, 0.06) 1px, transparent 1px);
    background-size: 100% 96px;
    pointer-events: none;
}

.objectives-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: 48px;
    align-items: start;
}

.objectives-intro {
    position: sticky;
    top: 110px;
    padding: 34px;
    border: 1px solid rgba(227, 232, 228, 0.9);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.objectives-intro p {
    color: var(--color-muted);
    font-size: 17px;
}

.objectives-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 28px;
}

.objectives-summary div {
    padding: 16px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.objectives-summary strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.objectives-summary span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.objectives-list ul {
    counter-reset: objective;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.objectives-list li {
    counter-increment: objective;
    position: relative;
    min-height: 198px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-muted);
    font-weight: 600;
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.07);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.objectives-list li::before {
    content: counter(objective, decimal-leading-zero);
    position: absolute;
    right: 20px;
    top: 18px;
    color: rgba(15, 136, 67, 0.12);
    font-family: 'Poppins', sans-serif;
    font-size: 58px;
    font-weight: 800;
    line-height: 1;
}

.objectives-list li::after {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--color-primary) 0 28%, transparent 30%),
        var(--color-soft-green);
    box-shadow: inset 0 0 0 1px rgba(15, 136, 67, 0.12);
    order: -1;
}

.objectives-list li:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 136, 67, 0.24);
    box-shadow: 0 24px 58px rgba(7, 92, 49, 0.12);
}

.objectives-list strong {
    position: relative;
    z-index: 1;
    max-width: 82%;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    line-height: 1.35;
}

.objectives-list span {
    position: relative;
    z-index: 1;
    color: var(--color-muted);
    line-height: 1.7;
}

.visual-impact-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
    margin-bottom: 34px;
}

.about-section-heading p {
    max-width: 720px;
    color: var(--color-muted);
    font-size: 17px;
}

.gallery-controls {
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    box-shadow: var(--shadow-soft);
}

.gallery-control {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-weight: 900;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.gallery-control:hover,
.gallery-control.is-active {
    transform: translateY(-1px);
    background: var(--color-primary-deep);
    color: white;
}

.impact-gallery-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
    gap: 28px;
    align-items: stretch;
}

.gallery-stage {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0 17%, rgba(233, 245, 238, 0.9) 18% 34%, transparent 35%),
        linear-gradient(135deg, rgba(7, 92, 49, 0.08), rgba(242, 140, 40, 0.08));
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
    perspective: 1100px;
}

.gallery-stage::before,
.gallery-stage::after {
    content: "";
    position: absolute;
    inset: 92px;
    border-radius: 50%;
    border: 1px dashed rgba(15, 136, 67, 0.22);
    pointer-events: none;
}

.gallery-stage::after {
    inset: 156px;
    border-style: solid;
    border-color: rgba(242, 140, 40, 0.18);
}

.gallery-orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: min(260px, 42%);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: white;
    box-shadow: 0 26px 68px rgba(7, 92, 49, 0.28);
    transform: translate(-50%, -50%);
}

.gallery-orbit-core span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gallery-orbit-core strong {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.18;
}

.gallery-orbit-core small {
    color: rgba(255, 255, 255, 0.72);
    font-weight: 700;
}

.gallery-item {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: clamp(150px, 24vw, 220px);
    height: clamp(190px, 29vw, 270px);
    overflow: hidden;
    padding: 0;
    border: 6px solid white;
    border-radius: 22px;
    background: white;
    box-shadow: 0 22px 54px rgba(28, 28, 28, 0.17);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.55s ease, opacity 0.35s ease, filter 0.35s ease, box-shadow 0.25s ease;
}

.gallery-item.is-active {
    z-index: 3;
    box-shadow: 0 30px 70px rgba(7, 92, 49, 0.25);
}

.gallery-item:hover {
    box-shadow: 0 34px 76px rgba(7, 92, 49, 0.28);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item span {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(7, 92, 49, 0.88);
    color: white;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.gallery-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 620px;
    padding: 34px;
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(7, 92, 49, 0.08), rgba(7, 92, 49, 0.02)),
        white;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.gallery-feature h3 {
    color: var(--color-primary-deep);
    margin-bottom: 14px;
}

.gallery-feature p {
    color: var(--color-muted);
}

.gallery-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.gallery-feature-meta span {
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 92, 49, 0.82);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.gallery-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.gallery-lightbox figure {
    width: min(980px, 94vw);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: white;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.35);
    transform: scale(0.94);
    transition: transform 0.24s ease;
}

.gallery-lightbox.is-open figure {
    transform: scale(1);
}

.gallery-lightbox img {
    width: 100%;
    max-height: 72vh;
    object-fit: cover;
    display: block;
}

.gallery-lightbox figcaption {
    padding: 18px 22px;
    color: var(--color-primary-deep);
    font-weight: 900;
}

.gallery-lightbox-close {
    position: absolute;
    right: 24px;
    top: 24px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-weight: 900;
    cursor: pointer;
}

body.gallery-open {
    overflow: hidden;
}

.closing-statement {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(180deg, white, var(--color-bg));
}

.closing-statement::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -160px;
    top: 24px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.1);
}

.closing-statement::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -120px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.1);
}

.closing-box {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: 26px;
    align-items: stretch;
    overflow: hidden;
    padding: 18px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.98), rgba(15, 136, 67, 0.9)),
        var(--color-primary-deep);
    box-shadow: 0 32px 82px rgba(7, 92, 49, 0.2);
}

.closing-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.35;
    pointer-events: none;
}

.closing-content,
.closing-next-steps {
    position: relative;
    z-index: 1;
}

.closing-content {
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.closing-box .section-kicker,
.closing-box h2,
.closing-box p {
    color: white;
}

.closing-box p {
    max-width: 760px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.8);
}

.closing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.closing-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    color: white;
    font-weight: 900;
}

.closing-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.closing-next-steps {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
}

.closing-next-steps article {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.08);
}

.closing-next-steps article::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -34px;
    top: -34px;
    border-radius: 50%;
    background: var(--color-soft-green);
}

.closing-next-steps span {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--color-primary-deep);
    color: white;
    font-size: 12px;
    font-weight: 900;
}

.closing-next-steps strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
}

.closing-next-steps p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.65;
}

.scroll-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 3500;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.34), transparent 24%),
        linear-gradient(135deg, var(--color-primary), var(--color-primary-deep));
    color: white;
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.9);
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.scroll-to-top::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 1px solid rgba(15, 136, 67, 0.22);
}

.scroll-to-top span {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 24px 58px rgba(7, 92, 49, 0.34);
}

.scroll-to-top:focus-visible {
    outline: 3px solid rgba(242, 140, 40, 0.45);
    outline-offset: 4px;
}


/* =========================
   VOLUNTEER FORM WIZARD
========================= */

.volunteer-hero {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    background:
        linear-gradient(115deg, rgba(7, 92, 49, 0.96) 0%, rgba(7, 92, 49, 0.86) 42%, rgba(15, 136, 67, 0.34) 100%),
        url("../images/banners/regional.jpg") center/cover no-repeat;
}

.volunteer-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 86px 86px;
    opacity: 0.24;
    pointer-events: none;
}

.volunteer-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    bottom: -170px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.2);
    filter: blur(2px);
}

.volunteer-hero-overlay {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding: 96px 0 76px;
}

.volunteer-hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.72fr);
    gap: 56px;
    align-items: center;
}

.volunteer-hero-text {
    max-width: 760px;
}

.volunteer-hero-text .section-kicker {
    color: rgba(255, 255, 255, 0.76);
}

.volunteer-hero h1 {
    max-width: 760px;
    margin-bottom: 18px;
    color: white;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
}

.volunteer-subtitle {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.55;
}

.volunteer-description,
.volunteer-note {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
}

.volunteer-note {
    margin-top: 16px;
    padding: 16px 18px;
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 700;
}

.volunteer-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.volunteer-hero-link {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    color: white;
    font-weight: 900;
}

.volunteer-hero-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
}

.volunteer-hero-panel {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px);
}

.volunteer-panel-card,
.volunteer-panel-grid div {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.volunteer-panel-card.main {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(7, 92, 49, 0.92)),
        url("../images/banners/about-yadi.png") center/cover no-repeat;
    color: white;
}

.volunteer-panel-card.main span {
    width: fit-content;
    margin-bottom: 72px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.volunteer-panel-card.main strong {
    max-width: 320px;
    font-family: 'Poppins', sans-serif;
    font-size: 27px;
    line-height: 1.18;
}

.volunteer-panel-card.main p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.volunteer-panel-grid {
    display: grid;
    gap: 10px;
}

.volunteer-panel-grid div {
    padding: 20px;
}

.volunteer-panel-grid div::after {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    right: -26px;
    top: -26px;
    border-radius: 50%;
    background: var(--color-soft-green);
}

.volunteer-panel-grid strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
}

.volunteer-panel-grid span {
    position: relative;
    z-index: 1;
    color: var(--color-muted);
    font-weight: 700;
}

.volunteer-form-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(15, 136, 67, 0.12), transparent 26%),
        linear-gradient(180deg, var(--color-bg), white 52%, var(--color-bg));
}

.volunteer-form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(7, 92, 49, 0.05) 1px, transparent 1px);
    background-size: 100% 92px;
    pointer-events: none;
}

.volunteer-form-section > .container {
    position: relative;
    z-index: 1;
}

.volunteer-form-header {
    max-width: 820px;
    margin-bottom: 34px;
}

.volunteer-form-header h2 {
    color: var(--color-primary-deep);
    margin-bottom: 12px;
}

.volunteer-form-header p {
    max-width: 740px;
    color: var(--color-muted);
    font-size: 17px;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-status {
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: var(--radius-sm);
    font-weight: 800;
}

.form-status.success {
    border: 1px solid rgba(15, 136, 67, 0.22);
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
}

.form-status.error {
    border: 1px solid rgba(217, 45, 76, 0.22);
    background: var(--color-soft-red);
    color: var(--color-emergency);
}

/* PROGRESS BAR */
.form-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.progress-step {
    position: relative;
    min-height: 74px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
}

.progress-step.active {
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: #fff;
    box-shadow: 0 16px 34px rgba(7, 92, 49, 0.2);
}

.progress-step.complete {
    border-color: rgba(15, 136, 67, 0.22);
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
}

.progress-step span {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: white;
    color: var(--color-primary-deep);
    font-size: 12px;
    font-weight: 900;
}

.progress-step.active span {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

.progress-step.complete span {
    background: var(--color-primary);
    color: white;
}

.progress-step strong {
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
    line-height: 1.25;
}

/* GRID */
.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
    gap: 24px;
    align-items: start;
}

/* FORM AREA */
.form-area {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 70px rgba(7, 92, 49, 0.1);
}

.form-area::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -110px;
    top: -110px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
    pointer-events: none;
}

/* STEPS */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    position: relative;
    z-index: 1;
}

.form-step h2 {
    margin-bottom: 24px;
    color: var(--color-primary-deep);
    font-size: 30px;
}

/* INPUT LAYOUT */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.field-with-message {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field-message {
    min-height: 18px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.field-message.error {
    color: var(--color-emergency);
}

.field-message.success {
    color: var(--color-primary-deep);
}

.volunteer-form-section input,
.volunteer-form-section select,
.volunteer-form-section textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 15px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.volunteer-form-section textarea {
    min-height: 140px;
    resize: vertical;
}

.volunteer-form-section input:focus,
.volunteer-form-section select:focus,
.volunteer-form-section textarea:focus {
    outline: none;
    border-color: rgba(15, 136, 67, 0.52);
    background: white;
    box-shadow: 0 0 0 4px rgba(15, 136, 67, 0.1);
}

.volunteer-form-section .is-invalid {
    border-color: var(--color-emergency);
    background: var(--color-soft-red);
    box-shadow: 0 0 0 4px rgba(217, 45, 76, 0.1);
}

/* BUTTON AREA */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
}

/* SUMMARY PANEL */
.form-summary {
    position: sticky;
    top: 118px;
    height: fit-content;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(233, 245, 238, 0.88), rgba(255, 255, 255, 0.94));
    box-shadow: var(--shadow-soft);
}

.form-summary::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: -72px;
    top: -72px;
    border-radius: 50%;
    background: rgba(242, 140, 40, 0.16);
}

.form-summary h3 {
    position: relative;
    margin-bottom: 18px;
    color: var(--color-primary-deep);
    font-size: 24px;
}

.summary-box {
    position: relative;
    display: grid;
    gap: 10px;
}

.summary-box p {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(227, 232, 228, 0.9);
    border-radius: 12px;
    background: white;
    color: var(--color-muted);
    font-size: 14px;
}

.summary-box strong {
    color: var(--color-primary-deep);
}

.summary-note {
    position: relative;
    margin-top: 15px;
    padding: 14px;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 12px 12px 0;
    background: rgba(255, 255, 255, 0.68);
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
}

/* =========================
   MOTIVATION & INTERESTS
========================= */

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 14px;
    font-weight: 800;
}

.volunteer-form-section textarea {
    line-height: 1.7;
}

/* INTEREST GRID */
.interest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.interest-grid label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 58px;
    margin: 0;
    padding: 13px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.interest-grid label:hover {
    transform: translateY(-2px);
    background: var(--color-soft-green);
    border-color: rgba(15, 136, 67, 0.26);
}

.interest-grid input,
.checkbox-label input {
    width: 18px;
    min-height: auto;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
}

/* =========================
   LANGUAGES & SKILLS
========================= */

.form-step h2 {
    margin-bottom: 24px;
    font-size: 30px;
    color: var(--color-primary-deep);
}

.declaration-text {
    padding: 18px;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 14px 14px 0;
    background: var(--color-soft-green);
    color: var(--color-muted);
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.75;
    font-weight: 700;
}

.checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: white;
    color: var(--color-muted) !important;
    font-size: 14px !important;
    line-height: 1.6;
    font-weight: 700 !important;
}

/* =========================
   LEADERSHIP HERO
========================= */

.leadership-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 120px 0 82px;
    background:
        linear-gradient(135deg, rgba(4, 59, 36, 0.96), rgba(8, 93, 51, 0.9) 46%, rgba(241, 248, 244, 0.98) 46.2%, rgba(255, 255, 255, 0.98));
}

.leadership-hero::before {
    content: "";
    position: absolute;
    inset: auto -14% -28% 40%;
    height: 58%;
    background: rgba(15, 136, 67, 0.08);
    transform: rotate(-8deg);
    pointer-events: none;
}

.leadership-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
    gap: 56px;
    align-items: center;
}

.leadership-text {
    color: #ffffff;
    max-width: 760px;
}

.leadership-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.leadership-text h1 {
    max-width: 640px;
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 82px;
    line-height: 0.96;
}

.leadership-role {
    max-width: 660px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.42;
}

.leadership-summary {
    max-width: 690px;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.75;
}

.leadership-focus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 680px;
}

.leadership-focus-list span {
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 800;
}

.leadership-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 34px;
}

.leadership-text-link {
    color: #ffffff;
    font-weight: 900;
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.38);
    padding-bottom: 4px;
}

.leadership-text-link:hover {
    border-color: #ffffff;
}

.leadership-visual {
    position: relative;
    min-height: 540px;
    border-radius: 28px;
    box-shadow: 0 34px 90px rgba(7, 92, 49, 0.2);
}

.leadership-visual img {
    width: 100%;
    height: 540px;
    display: block;
    object-fit: cover;
    object-position: center;
    border: 10px solid #ffffff;
    border-radius: 28px;
}

.leadership-credential {
    position: absolute;
    left: -26px;
    bottom: 34px;
    width: min(320px, calc(100% - 36px));
    padding: 18px;
    border: 1px solid rgba(227, 232, 228, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 54px rgba(11, 63, 39, 0.18);
}

.leadership-credential span {
    display: block;
    margin-bottom: 7px;
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 900;
}

.leadership-credential strong {
    color: var(--color-primary-deep);
    font-size: 14px;
    line-height: 1.45;
}

/* =========================
   LEADERSHIP SNAPSHOT
========================= */

.leadership-snapshot {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f9f8 100%);
}

.leadership-snapshot::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 36%;
    background: rgba(15, 136, 67, 0.06);
    pointer-events: none;
}

.snapshot-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1fr);
    gap: 34px;
    align-items: stretch;
}

.snapshot-profile-card {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    padding: 34px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(5, 73, 42, 0.96), rgba(15, 136, 67, 0.88)),
        url('../images/banners/regional.jpg') center/cover no-repeat;
    color: #ffffff;
    box-shadow: 0 24px 70px rgba(7, 92, 49, 0.14);
}

.snapshot-profile-card::after {
    content: "";
    position: absolute;
    right: -62px;
    bottom: -72px;
    width: 220px;
    height: 220px;
    border: 34px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.snapshot-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    margin-bottom: 58px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.snapshot-initials {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 900;
}

.snapshot-profile-card h2 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.08;
}

.snapshot-profile-card p {
    position: relative;
    z-index: 1;
    max-width: 360px;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.55;
}

.snapshot-profile-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.snapshot-profile-meta span {
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 800;
}

/* TEXT */
.snapshot-details h2 {
    max-width: 760px;
    margin-bottom: 18px;
    color: var(--color-primary-deep);
    font-size: 38px;
    line-height: 1.12;
}

.snapshot-details p {
    max-width: 780px;
    margin-bottom: 20px;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.75;
}

/* CARDS */
.snapshot-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 26px;
}

.snapshot-card {
    min-height: 136px;
    padding: 20px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(7, 92, 49, 0.07);
}

.snapshot-card h4 {
    margin-bottom: 12px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.snapshot-card p {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    margin: 0;
}

/* EXPERIENCE STRIP */
.experience-strip {
    margin-top: 18px;
    padding: 22px 24px;
    border: 1px solid rgba(15, 136, 67, 0.2);
    border-left: 5px solid var(--color-primary);
    border-radius: 16px;
    background: var(--color-soft-green);
}

.experience-strip strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
    font-size: 15px;
}

.experience-strip p {
    margin: 0;
    color: var(--color-primary-deep);
}

/* =========================
   LEADERSHIP BIOGRAPHY
========================= */

.leadership-bio {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        linear-gradient(180deg, #f7f9f8 0%, #ffffff 72%);
}

.leadership-bio::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 136, 67, 0.28), transparent);
}

.bio-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.54fr) minmax(0, 1fr);
    gap: 42px;
    align-items: start;
}

.bio-intro {
    position: sticky;
    top: 112px;
}

.bio-intro h2 {
    margin: 12px 0 18px;
    color: var(--color-primary-deep);
    font-size: 38px;
    line-height: 1.12;
}

.bio-intro p {
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.75;
}

.bio-intro-note {
    margin-top: 26px;
    padding: 20px;
    border: 1px solid rgba(15, 136, 67, 0.2);
    border-radius: 18px;
    background: var(--color-soft-green);
}

.bio-intro-note strong {
    display: block;
    margin-bottom: 7px;
    color: var(--color-primary-deep);
    font-size: 15px;
}

.bio-intro-note span {
    color: var(--color-primary-deep);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.bio-story {
    display: grid;
    gap: 16px;
}

.bio-block {
    position: relative;
    min-height: 190px;
    padding: 26px 26px 26px 86px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(7, 92, 49, 0.07);
}

.bio-block::before {
    content: "";
    position: absolute;
    left: 53px;
    top: 84px;
    bottom: -17px;
    width: 1px;
    background: rgba(15, 136, 67, 0.22);
}

.bio-block:last-child::before {
    display: none;
}

.bio-block span {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: var(--color-primary-deep);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 900;
}

.bio-block h3 {
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.25;
}

.bio-block p {
    margin-bottom: 12px;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.8;
}

.bio-block p:last-child {
    margin-bottom: 0;
}

/* =========================
   PARTNERS & NETWORKS
========================= */

.leadership-partners {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background: #ffffff;
}

.leadership-partners::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 48%;
    background:
        linear-gradient(135deg, rgba(4, 59, 36, 0.96), rgba(15, 136, 67, 0.88));
    pointer-events: none;
}

.leadership-section-header {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin-bottom: 30px;
}

.leadership-partners .leadership-section-header h2,
.leadership-partners .leadership-section-header p {
    color: #ffffff;
}

.leadership-section-header h2 {
    margin: 10px 0 12px;
    color: var(--color-primary-deep);
    font-size: 38px;
    line-height: 1.12;
}

.leadership-section-header p {
    max-width: 760px;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.75;
}

/* GRID */
.partner-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* PARTNER ITEMS */
.partner-item {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 52px rgba(7, 92, 49, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.partner-item span {
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.partner-item strong {
    color: var(--color-primary-deep);
    font-size: 16px;
    line-height: 1.35;
}

.partner-item:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 136, 67, 0.42);
    box-shadow: 0 26px 60px rgba(7, 92, 49, 0.12);
}

/* TRUST NOTE */
.partner-note {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 22px auto 0;
    padding: 22px 24px;
    border: 1px solid rgba(15, 136, 67, 0.2);
    border-radius: 18px;
    background: var(--color-soft-green);
    text-align: center;
}

.partner-note p {
    margin: 0;
    color: var(--color-primary-deep);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.7;
}

/* =========================
   AWARDS & RECOGNITION
========================= */

.leadership-awards {
    padding: 96px 0;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f9f8 100%);
}

/* GRID */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 28px;
}

/* CARD */
.award-card {
    position: relative;
    min-height: 170px;
    overflow: hidden;
    padding: 22px 24px 24px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(7, 92, 49, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.award-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--color-primary);
}

.award-card span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 22px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.award-card h4 {
    color: var(--color-primary);
    margin-bottom: 8px;
    font-size: 24px;
    line-height: 1;
}

.award-card p {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

/* HOVER EFFECT */
.award-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(7, 92, 49, 0.12);
}

/* SUMMARY */
.awards-summary {
    max-width: 800px;
    margin: 24px auto 0;
    padding: 22px 24px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 18px;
    background: #ffffff;
    color: var(--color-muted);
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    box-shadow: 0 18px 48px rgba(7, 92, 49, 0.06);
}

.awards-summary p {
    margin: 0;
}

/* =========================
   CLOSING LEADERSHIP STATEMENT
========================= */

.leadership-closing {
    padding: 96px 0;
    background: #f7f9f8;
}

.leadership-closing .closing-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
    gap: 28px;
    align-items: stretch;
    padding: 34px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(4, 59, 36, 0.98), rgba(15, 136, 67, 0.88));
    box-shadow: 0 28px 80px rgba(7, 92, 49, 0.16);
}

.leadership-closing .closing-content {
    padding: 20px 10px;
}

.leadership-closing .closing-box h2 {
    max-width: 620px;
    margin: 10px 0 18px;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.08;
}

.leadership-closing .closing-box p {
    max-width: 760px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 1.8;
}

.leadership-closing .closing-commitment-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
}

.leadership-closing .closing-commitment-card strong {
    color: #ffffff;
    font-size: 28px;
    line-height: 1.15;
}

.leadership-closing .closing-highlight {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 700;
}

/* =========================
   REGIONAL HERO
========================= */

.regional-hero {
    position: relative;
    min-height: 720px;
    padding: 110px 0 90px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 78% 22%, rgba(242, 140, 40, 0.16), transparent 28%),
        linear-gradient(135deg, #f7fbf8 0%, #eef7f1 48%, #ffffff 100%);
}

.regional-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 136, 67, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15, 136, 67, 0.08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(0,0,0,0));
    pointer-events: none;
}

.regional-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    gap: 58px;
    align-items: center;
}

.regional-text {
    max-width: 650px;
}

.regional-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid rgba(15, 136, 67, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--color-primary-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(7, 92, 49, 0.08);
}

.regional-text h1 {
    max-width: 640px;
    margin-bottom: 18px;
    color: var(--color-primary-deep);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.04;
}

.regional-subtitle {
    max-width: 620px;
    color: #40534a;
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 28px;
}

.regional-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 30px;
}

.regional-hero-link {
    background: #ffffff;
    border-color: rgba(15, 136, 67, 0.24);
}

.regional-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 600px;
}

.regional-hero-stats div {
    padding: 16px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 30px rgba(7, 92, 49, 0.06);
}

.regional-hero-stats strong {
    display: block;
    color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    line-height: 1;
}

.regional-hero-stats span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.regional-hero-visual {
    position: relative;
    display: grid;
    gap: 16px;
}

.regional-lead-card,
.regional-portrait-grid {
    border: 1px solid rgba(15, 136, 67, 0.14);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 22px 54px rgba(7, 92, 49, 0.14);
    backdrop-filter: blur(14px);
}

.regional-lead-card {
    display: grid;
    grid-template-columns: 138px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: var(--radius-md);
}

.regional-lead-card img {
    width: 138px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
}

.regional-lead-card span {
    display: block;
    color: var(--color-emergency);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.regional-lead-card strong {
    display: block;
    margin-top: 6px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    line-height: 1.2;
}

.regional-portrait-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
}

.regional-portrait-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    background: var(--color-soft-green);
}

@media (max-width: 992px) {
    .regional-hero {
        min-height: auto;
        padding: 80px 0 70px;
    }

    .regional-hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .regional-text {
        max-width: 760px;
    }

    .regional-hero-visual {
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    .regional-hero {
        padding: 58px 0;
    }

    .regional-hero-stats {
        grid-template-columns: 1fr;
    }

    .regional-hero-actions .btn {
        width: 100%;
    }

    .regional-lead-card {
        grid-template-columns: 96px 1fr;
        padding: 12px;
    }

    .regional-lead-card img {
        width: 96px;
    }

    .regional-lead-card strong {
        font-size: 20px;
    }

    .regional-portrait-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* =========================
   NATIONAL COORDINATOR BLOCK
========================= */

.national-coordinator {
    padding: 80px 0;
    background: #ffffff;
}

.national-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: center;
    background: #F7F9F8;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

/* IMAGE */
.national-image img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* TEXT */
.national-content .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.6;
    margin-bottom: 10px;
}

.national-content h2 {
    margin-bottom: 5px;
}

.national-content h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #555;
}

.national-content p {
    line-height: 1.7;
    color: #4B5563;
}

/* TAGS */
.national-tags {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.national-tags span {
    font-size: 12px;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #ddd;
}

/* =========================
   REGIONAL GRID SYSTEM
========================= */

.regional-grid-section {
    position: relative;
    overflow: hidden;
    padding: 104px 0;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f9f8 38%, #eef7f1 100%);
}

.regional-grid-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 16%, rgba(217, 45, 76, 0.07), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(15, 136, 67, 0.12), transparent 28%),
        linear-gradient(90deg, rgba(15, 136, 67, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15, 136, 67, 0.05) 1px, transparent 1px);
    background-size: auto, auto, 82px 82px, 82px 82px;
    pointer-events: none;
}

.regional-grid-section .container {
    position: relative;
    z-index: 1;
}

.regional-section-header {
    max-width: 780px;
    margin: 0 auto 42px;
    text-align: center;
}

.regional-section-header .regional-label {
    margin-left: auto;
    margin-right: auto;
}

.regional-section-header h2 {
    margin: 0 0 14px;
    color: var(--color-primary-deep);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
}

.regional-section-header p {
    color: #4b5c54;
    font-size: 17px;
    line-height: 1.75;
}

.global-coordinator-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
    gap: 0;
    margin-bottom: 34px;
    border: 1px solid rgba(15, 136, 67, 0.18);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(4, 59, 36, 0.98), rgba(15, 136, 67, 0.86)),
        radial-gradient(circle at 88% 12%, rgba(242, 140, 40, 0.34), transparent 30%);
    box-shadow: 0 30px 78px rgba(7, 92, 49, 0.18);
}

.global-coordinator-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 70px 70px;
    opacity: 0.32;
    pointer-events: none;
}

.global-coordinator-image {
    position: relative;
    min-height: 420px;
    background: var(--color-primary-deep);
}

.global-coordinator-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, rgba(4, 59, 36, 0.34));
    pointer-events: none;
}

.global-coordinator-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.global-coordinator-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px;
}

.global-label {
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.84);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.global-coordinator-content h3 {
    max-width: 620px;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
}

.global-role {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    font-weight: 800;
}

.global-coordinator-content p:not(.global-role):not(.global-label) {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.75;
}

.global-tags {
    margin-top: 24px;
    margin-bottom: 22px;
}

.global-tags span {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.88);
}

.global-profile-btn {
    width: fit-content;
    min-width: 190px;
    border-color: rgba(255, 255, 255, 0.24);
    background: #ffffff;
    color: var(--color-primary-deep);
}

.global-profile-btn:hover {
    background: var(--color-warning);
    color: #1C1C1C;
    box-shadow: 0 14px 32px rgba(242, 140, 40, 0.24);
}

/* GRID */
.regional-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

/* CARD */
.region-card {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    box-shadow: 0 18px 46px rgba(7, 92, 49, 0.07);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.region-card:hover {
    transform: translateY(-7px);
    border-color: rgba(15, 136, 67, 0.28);
    box-shadow: 0 28px 68px rgba(7, 92, 49, 0.13);
}

.region-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: var(--color-soft-green);
}

.region-image::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(4, 59, 36, 0.68));
    pointer-events: none;
}

.region-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.32s ease;
}

.region-card:hover .region-image img {
    transform: scale(1.045);
}

.region-code {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.region-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
}

/* HEADER */
.region-header {
    width: fit-content;
    margin-bottom: 12px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* TEXT */
.region-card h3 {
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 24px;
    line-height: 1.18;
}

.region-card p {
    margin-bottom: 18px;
    color: #4B5563;
    font-size: 14.5px;
    line-height: 1.6;
}

.region-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 18px;
}

.region-tags span {
    padding: 7px 9px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 999px;
    background: #ffffff;
    color: #4B5563;
    font-size: 12px;
    font-weight: 800;
}

/* BUTTON */
.view-profile {
    width: 100%;
    min-height: 44px;
    margin-top: 0;
    padding: 11px 14px;
    border: 1px solid rgba(15, 136, 67, 0.2);
    border-radius: var(--radius-sm);
    background: #0F8843;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.view-profile:hover {
    transform: translateY(-2px);
    background: var(--color-primary-deep);
    box-shadow: 0 12px 26px rgba(15, 136, 67, 0.22);
}

.view-profile.disabled {
    background: #ccc;
    cursor: not-allowed;
}

@media (max-width: 992px) {
    .global-coordinator-card {
        grid-template-columns: 1fr;
    }

    .global-coordinator-image {
        min-height: 440px;
    }

    .global-coordinator-content {
        padding: 34px;
    }

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

@media (max-width: 640px) {
    .regional-grid-section {
        padding: 72px 0;
    }

    .regional-grid {
        grid-template-columns: 1fr;
    }

    .global-coordinator-card {
        border-radius: 18px;
    }

    .global-coordinator-image {
        min-height: 360px;
    }

    .global-coordinator-content {
        padding: 26px 20px;
    }

    .global-profile-btn {
        width: 100%;
    }

    .region-image {
        height: 320px;
    }

    .region-card-body {
        padding: 20px;
    }
}

/* =========================
   REGIONAL MODAL SYSTEM
========================= */

.region-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 9999;
}

/* OVERLAY */
.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

/* MODAL BOX */
.modal-content {
    position: relative;
    background: #ffffff;
    width: 90%;
    max-width: 800px;
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px;
    z-index: 2;
    max-height: 80vh;
    overflow-y: auto;
}

/* CLOSE BUTTON */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
}

/* SHOW STATE */
.region-modal.active {
    display: block;
}

body.staff-modal-open {
    overflow: hidden;
}

.staff-modal .modal-overlay {
    width: 100%;
    border: 0;
    cursor: default;
}

.staff-modal .modal-content {
    width: min(1040px, calc(100% - 32px));
    max-width: 1040px;
    margin: clamp(18px, 4vh, 48px) auto;
    padding: 0;
    overflow: hidden auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    box-shadow: 0 34px 90px rgba(4, 59, 36, 0.28);
}

.staff-modal .modal-close {
    top: 14px;
    right: 16px;
    z-index: 4;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 136, 67, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-primary-deep);
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 10px 28px rgba(4, 59, 36, 0.14);
}

.staff-modal .modal-close:hover,
.staff-modal .modal-close:focus-visible {
    background: var(--color-primary-deep);
    color: #ffffff;
}

.staff-modal-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.55fr);
    min-height: 600px;
}

.staff-modal-image {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #F4F8F5;
}

.staff-modal-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(4, 59, 36, 0.72));
    pointer-events: none;
}

.staff-modal-image img {
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: contain;
    object-position: center;
    background: #F4F8F5;
}

.staff-page .regional-lead-card img,
.staff-page .regional-portrait-grid img,
.staff-page .region-image img {
    object-fit: contain;
    object-position: center;
    background: #F4F8F5;
}

.staff-page .region-card:hover .region-image img {
    transform: none;
}

.staff-modal-image span {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.staff-modal-content {
    padding: 46px 44px 40px;
}

.staff-modal-kicker {
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.staff-modal-content h2 {
    margin: 0 52px 6px 0;
    color: var(--color-primary-deep);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.08;
}

.staff-modal-role {
    margin: 0;
    color: #4B5563;
    font-size: 17px;
    font-weight: 800;
}

.staff-modal-tags {
    margin: 18px 0 26px;
}

.staff-modal-section {
    padding: 20px;
    border: 1px solid rgba(15, 136, 67, 0.12);
    border-radius: 12px;
    background: #F8FBF9;
}

.staff-modal-section h3 {
    margin: 0 0 10px;
    color: var(--color-primary-deep);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.staff-modal-section p,
.staff-modal-section li {
    color: #4B5563;
    font-size: 14px;
    line-height: 1.7;
}

.staff-modal-section p {
    margin: 0;
    white-space: pre-line;
}

.staff-modal-section ul {
    margin: 0;
    padding-left: 20px;
}

.staff-modal-section li + li {
    margin-top: 6px;
}

.staff-modal-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.staff-modal-contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.staff-modal-contact div {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-soft-green);
}

.staff-modal-contact span {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.staff-modal-contact strong {
    overflow-wrap: anywhere;
    color: var(--color-primary-deep);
    font-size: 14px;
}

@media (max-width: 820px) {
    .staff-modal .modal-content {
        max-height: calc(100vh - 24px);
        margin: 12px auto;
    }

    .staff-modal-layout {
        grid-template-columns: 1fr;
    }

    .staff-modal-image,
    .staff-modal-image img {
        min-height: 300px;
        height: 300px;
    }

    .staff-modal-content {
        padding: 32px 24px 28px;
    }
}

@media (max-width: 560px) {
    .staff-modal .modal-content {
        width: calc(100% - 20px);
        border-radius: 16px;
    }

    .staff-modal-details,
    .staff-modal-contact {
        grid-template-columns: 1fr;
    }

    .staff-modal-image,
    .staff-modal-image img {
        min-height: 240px;
        height: 240px;
    }

    .staff-modal-content {
        padding: 28px 18px 22px;
    }

    .staff-modal-section {
        padding: 17px;
    }
}

/* =========================
   EMERGENCY HERO SECTION
========================= */

.emergency-hero {
    height: 70vh;
    background: url("../images/banners/natural-disaster.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.emergency-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.emergency-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 850px;
}

.emergency-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 10px;
}

.emergency-hero-text h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   EMERGENCY OVERVIEW
========================= */

.emergency-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* GRID */
.overview-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 30px;
}

/* TEXT */
.overview-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT BOX */
.overview-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.overview-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   YOUTH PHILOSOPHY SECTION
========================= */

.emergency-philosophy {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.philosophy-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARDS */
.philosophy-card {
    background: #F7F9F8;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    text-align: center;
}

.philosophy-card h3 {
    margin-bottom: 10px;
    color: #0F8843;
}

.philosophy-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FOOTER LINE */
.philosophy-footer {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #1F2937;
}

/* =========================
   VOLUNTEER MOBILIZATION SYSTEM
========================= */

.emergency-mobilization {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.mobilization-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.mobilization-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-step {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    font-size: 18px;
    color: #0F8843;
}

/* GRID */
.mobilization-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mobilization-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.mobilization-card h3 {
    color: #0F8843;
    margin-bottom: 10px;
}

.mobilization-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* =========================
   TRAINING & CAPACITY BUILDING
========================= */

.emergency-training {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.training-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.training-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.training-card h3 {
    color: #0F8843;
    margin-bottom: 10px;
    font-size: 16px;
}

.training-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* HIGHLIGHT */
.training-highlight {
    margin-top: 40px;
    padding: 20px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    text-align: center;
    font-weight: 500;
    color: #1F2937;
}

/* =========================
   EMERGENCY OPERATIONS FLOW
========================= */

.emergency-operations {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.operations-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW GRID */
.operations-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* STEP CARD */
.operation-step {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    position: relative;
    transition: 0.3s ease;
}

.operation-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* STEP NUMBER */
.step-number {
    font-size: 14px;
    font-weight: bold;
    color: #0F8843;
    margin-bottom: 10px;
}

/* TITLE */
.operation-step h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #1F2937;
}

/* TEXT */
.operation-step p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.operations-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 500;
    color: #374151;
}
/* =========================
   DIGITAL RESPONSE LAYER
========================= */

.emergency-digital {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.digital-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.digital-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.digital-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.digital-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

.digital-card h3 {
    color: #0F8843;
    margin-bottom: 10px;
    font-size: 16px;
}

.digital-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.digital-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 500;
    color: #374151;
}

/* =========================
   PARTNERSHIPS & COORDINATION
========================= */

.emergency-partners {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.partners-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* ITEM */
.partner-item {
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
    text-align: center;
    color: #374151;
    transition: 0.3s ease;
}

.partner-item:hover {
    transform: translateY(-3px);
    border-color: #0F8843;
}

/* NOTE */
.partners-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 500;
    color: #374151;
}

/* =========================
   IMPACT SUMMARY
========================= */

.emergency-impact {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.impact-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

.impact-card h3 {
    color: #0F8843;
    margin-bottom: 10px;
    font-size: 16px;
}

.impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FOOTER */
.impact-footer {
    margin-top: 40px;
    text-align: center;
    font-weight: 500;
    color: #374151;
    line-height: 1.7;
}

/* =========================
   FINAL CALL TO ACTION
========================= */

.emergency-cta {
    padding: 90px 0;
    background: #0F172A;
    color: #ffffff;
}

/* HEADER */
.cta-header {
    text-align: center;
    max-width: 850px;
    margin: auto;
}

.cta-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.cta-header p {
    opacity: 0.85;
    line-height: 1.7;
}

/* GRID */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.cta-card {
    background: rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.cta-card h3 {
    margin-bottom: 10px;
}

.cta-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* FOOT NOTE */
.cta-note {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
}

/* =========================
   EMERGENCY RESPONSE MAKEOVER
========================= */

.er-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0f172a;
    color: #ffffff;
}

.er-hero-media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.76) 48%, rgba(15, 23, 42, 0.28) 100%),
        url("../images/banners/natural-disaster.jpg") center/cover no-repeat;
}

.er-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.55fr);
    gap: 48px;
    align-items: center;
    width: 100%;
    padding-top: 72px;
    padding-bottom: 72px;
}

.er-kicker {
    margin: 0 0 14px;
    color: #d92d4c;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.er-hero-copy h1,
.er-overview h2,
.er-section-heading h2,
.er-feature-card h2,
.er-mobilization-grid h2,
.er-partners-grid h2,
.er-cta h2 {
    margin: 0;
    color: inherit;
    font-family: var(--font-heading);
    line-height: 1.05;
}

.er-hero-copy h1 {
    max-width: 820px;
    font-size: clamp(40px, 6vw, 76px);
}

.er-hero-copy > p:not(.er-kicker) {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.75;
}

.er-hero-actions,
.er-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.er-btn-light {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.er-btn-light:hover {
    background: #ffffff;
    color: #0f172a;
}

.er-command-panel {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.74);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(14px);
}

.er-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.er-panel-header span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.er-panel-header strong {
    color: #ffffff;
    font-size: 14px;
}

.er-priority-list {
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

.er-priority-list div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.er-priority-list span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #d92d4c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.er-priority-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.5;
}

.er-overview,
.er-section {
    padding: 96px 0;
}

.er-overview {
    background: #ffffff;
}

.er-overview-grid,
.er-split,
.er-mobilization-grid,
.er-partners-grid,
.er-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 54px;
    align-items: start;
}

.er-overview h2,
.er-section-heading h2,
.er-feature-card h2,
.er-mobilization-grid h2,
.er-partners-grid h2,
.er-cta h2 {
    color: #14213d;
    font-size: clamp(30px, 4vw, 48px);
}

.er-overview-copy p,
.er-section-heading p,
.er-feature-card p,
.er-mobilization-grid p,
.er-partners-grid p,
.er-cta p {
    color: #526070;
    font-size: 16px;
    line-height: 1.8;
}

.er-overview-copy p:first-child {
    margin-top: 0;
}

.er-stat-band {
    padding: 34px 0;
    background: #14213d;
    color: #ffffff;
}

.er-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.er-stat-grid div {
    display: grid;
    gap: 8px;
    padding: 22px 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.er-stat-grid strong {
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
}

.er-stat-grid span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    line-height: 1.55;
}

.er-system,
.er-mobilization,
.er-impact {
    background: #f5f7f6;
}

.er-youth,
.er-digital {
    background: #ffffff;
}

.er-section-heading {
    max-width: 760px;
    margin-bottom: 42px;
}

.er-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.er-timeline article,
.er-pillar-grid article,
.er-capability-grid article,
.er-digital-grid article,
.er-impact-grid article {
    border: 1px solid #e1e7e4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.er-timeline article {
    position: relative;
    min-height: 260px;
    padding: 24px;
}

.er-timeline article::after {
    content: "";
    position: absolute;
    top: 42px;
    right: -18px;
    width: 18px;
    height: 1px;
    background: #b8c5bf;
}

.er-timeline article:last-child::after {
    display: none;
}

.er-timeline span,
.er-capability-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eaf6ef;
    color: #0f8843;
    font-size: 12px;
    font-weight: 800;
}

.er-timeline h3,
.er-pillar-grid h3,
.er-capability-grid h3,
.er-digital-grid h3,
.er-impact-grid h3 {
    margin: 18px 0 10px;
    color: #14213d;
    font-size: 18px;
}

.er-timeline p,
.er-pillar-grid p,
.er-capability-grid p,
.er-digital-grid p,
.er-impact-grid p {
    margin: 0;
    color: #526070;
    font-size: 14px;
    line-height: 1.7;
}

.er-feature-card {
    position: sticky;
    top: 110px;
    padding: 34px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 33, 61, 0.92), rgba(20, 33, 61, 0.86)),
        url("../images/banners/diaster-preventions.png") center/cover no-repeat;
    color: #ffffff;
}

.er-feature-card h2 {
    color: #ffffff;
}

.er-feature-card p {
    color: rgba(255, 255, 255, 0.8);
}

.er-pillar-grid,
.er-capability-grid,
.er-digital-grid,
.er-impact-grid {
    display: grid;
    gap: 18px;
}

.er-pillar-grid,
.er-digital-grid,
.er-impact-grid {
    grid-template-columns: repeat(2, 1fr);
}

.er-pillar-grid article,
.er-capability-grid article,
.er-digital-grid article,
.er-impact-grid article {
    padding: 24px;
}

.er-capability-grid {
    grid-template-columns: repeat(3, 1fr);
}

.er-capabilities {
    background:
        linear-gradient(180deg, #ffffff 0%, #f8faf9 100%);
}

.er-network-list {
    display: grid;
    gap: 12px;
}

.er-network-list div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #e1e7e4;
    border-radius: 8px;
    background: #ffffff;
}

.er-network-list span {
    color: #14213d;
    font-weight: 800;
}

.er-network-list strong {
    color: #526070;
    font-size: 14px;
    text-align: right;
}

.er-digital {
    background: #14213d;
    color: #ffffff;
}

.er-digital .er-section-heading h2,
.er-digital .er-digital-grid h3 {
    color: #ffffff;
}

.er-digital .er-section-heading p,
.er-digital .er-digital-grid p {
    color: rgba(255, 255, 255, 0.74);
}

.er-digital-grid article {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

.er-partners {
    background: #ffffff;
}

.er-partner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.er-partner-list span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #dce5e0;
    border-radius: 999px;
    background: #f8faf9;
    color: #324152;
    font-size: 14px;
    font-weight: 700;
}

.er-impact-grid article {
    border-left: 4px solid #d92d4c;
}

.er-cta {
    padding: 96px 0;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.78)),
        url("../images/banners/background-also.png") center/cover no-repeat;
    color: #ffffff;
}

.er-cta h2 {
    color: #ffffff;
}

.er-cta p {
    max-width: 660px;
    color: rgba(255, 255, 255, 0.8);
}

.er-cta-actions {
    justify-content: flex-end;
    align-content: start;
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .er-hero-grid,
    .er-overview-grid,
    .er-split,
    .er-mobilization-grid,
    .er-partners-grid,
    .er-cta-grid {
        grid-template-columns: 1fr;
    }

    .er-command-panel,
    .er-feature-card {
        max-width: 680px;
    }

    .er-timeline,
    .er-capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .er-timeline article::after {
        display: none;
    }

    .er-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .er-hero {
        min-height: auto;
    }

    .er-hero-grid {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .er-hero-copy h1 {
        font-size: 38px;
    }

    .er-hero-copy > p:not(.er-kicker) {
        font-size: 16px;
    }

    .er-overview,
    .er-section,
    .er-cta {
        padding: 64px 0;
    }

    .er-stat-grid,
    .er-timeline,
    .er-pillar-grid,
    .er-capability-grid,
    .er-digital-grid,
    .er-impact-grid {
        grid-template-columns: 1fr;
    }

    .er-stat-grid div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .er-network-list div {
        display: grid;
        gap: 6px;
    }

    .er-network-list strong {
        text-align: left;
    }

    .er-hero-actions .btn,
    .er-cta-actions .btn {
        width: 100%;
    }
}

/* =========================
   EARLY WARNING MAKEOVER
========================= */

.ew-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #102118;
    color: #ffffff;
}

.ew-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 28, 22, 0.95) 0%, rgba(10, 28, 22, 0.82) 48%, rgba(10, 28, 22, 0.34) 100%),
        url("../images/banners/diaster-preventions.png") center/cover no-repeat;
}

.ew-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.58fr);
    gap: 52px;
    align-items: center;
    width: 100%;
    padding-top: 72px;
    padding-bottom: 72px;
}

.ew-kicker {
    margin: 0 0 14px;
    color: #f28c28;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ew-hero-copy h1,
.ew-overview h2,
.ew-section-heading h2,
.ew-feature-card h2,
.ew-linkage-grid h2,
.ew-inclusion-grid h2,
.ew-cta h2 {
    margin: 0;
    font-family: var(--font-heading);
    line-height: 1.05;
}

.ew-hero-copy h1 {
    max-width: 860px;
    color: #ffffff;
    font-size: clamp(40px, 5.7vw, 72px);
}

.ew-hero-copy > p:not(.ew-kicker) {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.75;
}

.ew-hero-actions,
.ew-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.ew-btn-light {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.ew-btn-light:hover {
    background: #ffffff;
    color: #102118;
}

.ew-signal-panel {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(5, 20, 16, 0.76);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
}

.ew-signal-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ew-signal-top span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.ew-signal-top strong {
    color: #ffffff;
    font-size: 14px;
}

.ew-signal-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.ew-signal-list div {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.ew-signal-list span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.ew-signal-list span.active {
    background: #f28c28;
    box-shadow: 0 0 0 6px rgba(242, 140, 40, 0.16);
}

.ew-signal-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.5;
}

.ew-overview,
.ew-section {
    padding: 96px 0;
}

.ew-overview {
    background: #ffffff;
}

.ew-overview-grid,
.ew-split,
.ew-linkage-grid,
.ew-inclusion-grid,
.ew-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 54px;
    align-items: start;
}

.ew-overview h2,
.ew-section-heading h2,
.ew-feature-card h2,
.ew-linkage-grid h2,
.ew-inclusion-grid h2,
.ew-cta h2 {
    color: #14213d;
    font-size: clamp(30px, 4vw, 48px);
}

.ew-overview-copy p,
.ew-section-heading p,
.ew-feature-card p,
.ew-linkage-grid p,
.ew-inclusion-grid p,
.ew-cta p {
    color: #526070;
    font-size: 16px;
    line-height: 1.8;
}

.ew-overview-copy p:first-child {
    margin-top: 0;
}

.ew-metrics {
    padding: 34px 0;
    background: #102118;
    color: #ffffff;
}

.ew-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ew-metrics-grid div {
    display: grid;
    gap: 8px;
    padding: 22px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ew-metrics-grid strong {
    color: #f28c28;
    font-size: 28px;
    line-height: 1;
}

.ew-metrics-grid span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
}

.ew-system,
.ew-youth,
.ew-action,
.ew-impact {
    background: #f5f7f6;
}

.ew-community,
.ew-linkage,
.ew-inclusion {
    background: #ffffff;
}

.ew-section-heading {
    max-width: 780px;
    margin-bottom: 42px;
}

.ew-flow,
.ew-role-grid,
.ew-action-grid,
.ew-impact-grid {
    display: grid;
    gap: 18px;
}

.ew-flow {
    grid-template-columns: repeat(4, 1fr);
}

.ew-role-grid,
.ew-action-grid,
.ew-impact-grid {
    grid-template-columns: repeat(4, 1fr);
}

.ew-flow article,
.ew-actor-grid article,
.ew-role-grid article,
.ew-action-grid article,
.ew-impact-grid article {
    border: 1px solid #e1e7e4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.ew-flow article,
.ew-role-grid article,
.ew-action-grid article,
.ew-impact-grid article {
    padding: 24px;
}

.ew-flow span,
.ew-action-grid span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff4e7;
    color: #b95710;
    font-size: 12px;
    font-weight: 800;
}

.ew-flow h3,
.ew-actor-grid h3,
.ew-role-grid h3,
.ew-action-grid h3,
.ew-impact-grid h3 {
    margin: 18px 0 10px;
    color: #14213d;
    font-size: 18px;
}

.ew-flow p,
.ew-actor-grid p,
.ew-role-grid p,
.ew-action-grid p,
.ew-impact-grid p {
    margin: 0;
    color: #526070;
    font-size: 14px;
    line-height: 1.7;
}

.ew-feature-card {
    position: sticky;
    top: 110px;
    padding: 34px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(16, 33, 24, 0.9), rgba(16, 33, 24, 0.86)),
        url("../images/banners/likable-background.png") center/cover no-repeat;
    color: #ffffff;
}

.ew-feature-card h2 {
    color: #ffffff;
}

.ew-feature-card p {
    color: rgba(255, 255, 255, 0.8);
}

.ew-actor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ew-actor-grid article {
    padding: 24px;
}

.ew-actor-grid article:nth-child(5) {
    grid-column: 1 / -1;
}

.ew-linkage {
    background: #14213d;
    color: #ffffff;
}

.ew-linkage .ew-kicker,
.ew-cta .ew-kicker {
    color: #f28c28;
}

.ew-linkage h2,
.ew-linkage p {
    color: #ffffff;
}

.ew-linkage p {
    color: rgba(255, 255, 255, 0.78);
}

.ew-partner-stack {
    display: grid;
    gap: 12px;
}

.ew-partner-stack div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}

.ew-partner-stack span {
    color: #ffffff;
    font-weight: 800;
}

.ew-partner-stack strong {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    text-align: right;
}

.ew-action-grid article {
    border-top: 4px solid #f28c28;
}

.ew-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ew-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #dce5e0;
    border-radius: 999px;
    background: #f8faf9;
    color: #324152;
    font-size: 14px;
    font-weight: 700;
}

.ew-impact-grid article {
    border-left: 4px solid #0f8843;
}

.ew-cta {
    padding: 96px 0;
    background:
        linear-gradient(90deg, rgba(16, 33, 24, 0.96), rgba(16, 33, 24, 0.78)),
        url("../images/banners/background.png") center/cover no-repeat;
    color: #ffffff;
}

.ew-cta h2 {
    color: #ffffff;
}

.ew-cta p {
    max-width: 660px;
    color: rgba(255, 255, 255, 0.8);
}

.ew-cta-actions {
    justify-content: flex-end;
    align-content: start;
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .ew-hero-grid,
    .ew-overview-grid,
    .ew-split,
    .ew-linkage-grid,
    .ew-inclusion-grid,
    .ew-cta-grid {
        grid-template-columns: 1fr;
    }

    .ew-signal-panel,
    .ew-feature-card {
        max-width: 680px;
    }

    .ew-metrics-grid,
    .ew-flow,
    .ew-role-grid,
    .ew-action-grid,
    .ew-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ew-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .ew-hero {
        min-height: auto;
    }

    .ew-hero-grid {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .ew-hero-copy h1 {
        font-size: 38px;
    }

    .ew-hero-copy > p:not(.ew-kicker) {
        font-size: 16px;
    }

    .ew-overview,
    .ew-section,
    .ew-cta {
        padding: 64px 0;
    }

    .ew-metrics-grid,
    .ew-flow,
    .ew-actor-grid,
    .ew-role-grid,
    .ew-action-grid,
    .ew-impact-grid {
        grid-template-columns: 1fr;
    }

    .ew-metrics-grid div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .ew-actor-grid article:nth-child(5) {
        grid-column: auto;
    }

    .ew-partner-stack div {
        display: grid;
        gap: 6px;
    }

    .ew-partner-stack strong {
        text-align: left;
    }

    .ew-hero-actions .btn,
    .ew-cta-actions .btn {
        width: 100%;
    }
}

/* =========================
   EARLY WARNING HERO
========================= */

.ewer-hero {
    height: 70vh;
    background: url("../images/banners/diaster-preventions.png") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.ewer-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.ewer-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 850px;
}

.ewer-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 10px;
}

.ewer-hero-text h1 {
    font-size: 46px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   EARLY WARNING OVERVIEW
========================= */

.ewer-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.ewer-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.ewer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.ewer-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT BOX */
.ewer-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.ewer-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   COMMUNITY EARLY WARNING SYSTEM
========================= */

.ewer-community {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.community-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.community-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.community-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.community-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.community-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* HIGHLIGHT */
.community-highlight {
    margin-top: 40px;
    padding: 18px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    text-align: center;
    color: #1F2937;
}

/* =========================
   YOUTH EARLY WARNING NETWORK
========================= */

.ewer-youth-network {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   INSTITUTIONAL LINKAGE SYSTEM
========================= */

.ewer-institutional {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.institutional-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.institutional-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-step {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* GRID */
.institutional-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.institutional-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    text-align: center;
    transition: 0.3s ease;
}

.institutional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.institutional-card h3 {
    color: #0F8843;
    margin-bottom: 5px;
}

.institutional-card p {
    font-size: 13px;
    color: #4B5563;
}

/* NOTE */
.institutional-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   ANTICIPATORY ACTION SYSTEM
========================= */

.ewer-anticipatory {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.anticipatory-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.anticipatory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.anticipatory-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.anticipatory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.anticipatory-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.anticipatory-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.anticipatory-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   INCLUSION & ACCOUNTABILITY
========================= */

.ewer-inclusion {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.inclusion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.inclusion-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.inclusion-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.inclusion-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.inclusion-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   IMPACT SUMMARY
========================= */

.ewer-impact {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.impact-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   FINAL CALL TO ACTION
========================= */

.ewer-cta {
    padding: 90px 0;
    background: #0F172A;
    color: #ffffff;
}

/* HEADER */
.cta-header {
    text-align: center;
    max-width: 850px;
    margin: auto;
}

.cta-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.cta-header p {
    opacity: 0.85;
    line-height: 1.7;
}

/* GRID */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.cta-card {
    background: rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.cta-card h3 {
    margin-bottom: 10px;
}

.cta-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* FOOT NOTE */
.cta-note {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
}

/* =========================
   CLIMATE RISK HERO
========================= */

.climate-hero {
    height: 70vh;
    background: url("../../assets/images/programs/climate-risk-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.climate-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.climate-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 850px;
}

.climate-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 10px;
}

.climate-hero-text h1 {
    font-size: 46px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   CLIMATE OVERVIEW
========================= */

.climate-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.climate-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.climate-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.climate-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.climate-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.climate-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}
/* =========================
   CLIMATE RISK ASSESSMENT
========================= */

.climate-assessment {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.assessment-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.assessment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.assessment-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.assessment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.assessment-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.assessment-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* HIGHLIGHT */
.assessment-highlight {
    margin-top: 40px;
    padding: 18px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    text-align: center;
    color: #1F2937;
}

/* =========================
   YOUTH CLIMATE RISK CHAMPIONS
========================= */

.climate-youth {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   ANTICIPATORY ACTION SYSTEM
========================= */

.climate-anticipatory {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.anticipatory-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.anticipatory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.anticipatory-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.anticipatory-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.anticipatory-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.anticipatory-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.anticipatory-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   CLIMATE ADAPTATION & RESILIENCE
========================= */

.climate-adaptation {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.adaptation-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.adaptation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.adaptation-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.adaptation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.adaptation-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.adaptation-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.adaptation-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}
/* =========================
   INSTITUTIONAL ALIGNMENT
========================= */

.climate-institutional {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.institutional-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.institutional-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* GRID */
.institutional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.institutional-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.institutional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.institutional-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.institutional-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.institutional-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}
/* =========================
   INCLUSION & KNOWLEDGE SYSTEM
========================= */

.climate-inclusion {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.inclusion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.inclusion-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.inclusion-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.inclusion-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.inclusion-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   CLIMATE IMPACT SUMMARY
========================= */

.climate-impact {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.impact-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.impact-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   FINAL CALL TO ACTION
========================= */

.climate-cta {
    padding: 90px 0;
    background: #0F172A;
    color: #ffffff;
}

/* HEADER */
.cta-header {
    text-align: center;
    max-width: 850px;
    margin: auto;
}

.cta-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.cta-header p {
    opacity: 0.85;
    line-height: 1.7;
}

/* GRID */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.cta-card {
    background: rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.cta-card h3 {
    margin-bottom: 10px;
}

.cta-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* FOOT NOTE */
.cta-note {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
}

/* =========================
   FINAL CALL TO ACTION
========================= */

.climate-cta {
    padding: 90px 0;
    background: #0F172A;
    color: #ffffff;
}

/* HEADER */
.cta-header {
    text-align: center;
    max-width: 850px;
    margin: auto;
}

.cta-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.cta-header p {
    opacity: 0.85;
    line-height: 1.7;
}

/* GRID */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.cta-card {
    background: rgba(255,255,255,0.05);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.cta-card h3 {
    margin-bottom: 10px;
}

.cta-card p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 15px;
}

/* FOOT NOTE */
.cta-note {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
}

/* =========================
   WASH HERO SECTION
========================= */

.wash-hero {
    height: 70vh;
    background: url("../../assets/images/programs/wash-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.wash-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.wash-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 850px;
}

.wash-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 10px;
}

.wash-hero-text h1 {
    font-size: 46px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 18px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   WASH OVERVIEW
========================= */

.wash-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.wash-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.wash-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.wash-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.wash-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.wash-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   COMMUNITY ASSESSMENT SYSTEM
========================= */

.wash-assessment {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.assessment-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.assessment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.assessment-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.assessment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.assessment-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.assessment-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* HIGHLIGHT */
.assessment-highlight {
    margin-top: 40px;
    padding: 18px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    text-align: center;
    color: #1F2937;
}

/* =========================
   YOUTH WASH CHAMPIONS NETWORK
========================= */

.wash-youth {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   WATER ACCESS INTERVENTIONS
========================= */

.wash-water {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.water-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.water-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.water-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.water-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.water-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.water-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.water-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   SANITATION & HYGIENE SYSTEMS
========================= */

.wash-sanitation {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.sanitation-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.sanitation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.sanitation-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.sanitation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.sanitation-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.sanitation-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.sanitation-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}
/* =========================
   EMERGENCY WASH RESPONSE
========================= */

.wash-emergency {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.emergency-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.emergency-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.emergency-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.emergency-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.emergency-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.emergency-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.emergency-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.emergency-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   INSTITUTIONAL COORDINATION
========================= */

.wash-institutional {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.institutional-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.institutional-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* GRID */
.institutional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.institutional-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.institutional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.institutional-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.institutional-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.institutional-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   MONITORING & ACCOUNTABILITY
========================= */

.wash-monitoring {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.monitoring-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.monitoring-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.monitoring-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.monitoring-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.monitoring-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.monitoring-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.monitoring-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.monitoring-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   WASH IMPACT SUMMARY
========================= */

.wash-impact {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.impact-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.impact-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
}

.impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   FOOD SECURITY HERO
========================= */

.food-hero {
    height: 70vh;
    background: url("../../assets/images/programs/food-security-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.food-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
}

.food-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.food-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.food-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
/* =========================
   FOOD SECURITY OVERVIEW
========================= */

.food-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.food-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.food-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.food-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.food-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   FOOD SECURITY ASSESSMENT SYSTEM
========================= */

.food-assessment {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.food-assessment-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-assessment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.food-assessment-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-assessment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-assessment-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-assessment-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* HIGHLIGHT */
.food-assessment-highlight {
    margin-top: 40px;
    padding: 18px;
    background: #E9F5EE;
    border-left: 4px solid #0F8843;
    font-weight: 600;
    text-align: center;
    color: #1F2937;
}

/* =========================
   EMERGENCY FOOD SECURITY RESPONSE
========================= */

.food-emergency {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.food-emergency-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-emergency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.food-emergency-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-emergency-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-emergency-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-emergency-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.food-emergency-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.food-emergency-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}
/* =========================
   LIVELIHOOD PROTECTION & RESTORATION
========================= */

.food-livelihood {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.food-livelihood-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-livelihood-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.food-livelihood-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-livelihood-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-livelihood-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-livelihood-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.food-livelihood-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   CLIMATE-SMART FOOD SYSTEMS
========================= */

.food-climate {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.food-climate-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-climate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.food-climate-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-climate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-climate-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-climate-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.food-climate-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   YOUTH FOOD SECURITY NETWORK
========================= */

.food-youth {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.food-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.food-youth-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-youth-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.food-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.food-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}
/* =========================
   NUTRITION RESPONSE SYSTEM
========================= */

.food-nutrition {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.food-nutrition-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.food-nutrition-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-nutrition-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-nutrition-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-nutrition-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.food-nutrition-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.food-nutrition-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   CMAM & HEALTH REFERRAL SYSTEM
========================= */

.food-cmam {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.food-cmam-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-cmam-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.food-cmam-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-cmam-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-cmam-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-cmam-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.food-cmam-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* NOTE */
.food-cmam-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   NUTRITION EDUCATION & BEHAVIOUR CHANGE
========================= */

.food-nutrition-edu {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.food-edu-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-edu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.food-edu-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-edu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-edu-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-edu-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.food-edu-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   COORDINATION & PARTNERSHIPS
========================= */

.food-partners {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.food-partners-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.food-partners-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #0F8843;
    font-weight: bold;
}

/* GRID */
.food-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.food-partners-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-partners-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-partners-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-partners-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.food-partners-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.food-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.food-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.food-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.food-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.food-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.food-impact-card h3 {
    color: #0F8843;
    margin-bottom: 8px;
    font-size: 16px;
}

.food-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.food-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.food-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   PEACEBUILDING HERO
========================= */

.peace-hero {
    height: 70vh;
    background: url("../../assets/images/programs/peacebuilding-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.peace-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 40, 0.55);
}

.peace-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.peace-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.peace-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   PEACEBUILDING OVERVIEW
========================= */

.peace-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.peace-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.peace-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.peace-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.peace-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   DO-NO-HARM FRAMEWORK
========================= */

.peace-donoharm {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.peace-donoharm-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-donoharm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.peace-donoharm-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-donoharm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-donoharm-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-donoharm-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.peace-donoharm-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   CONFLICT ANALYSIS & MAPPING
========================= */

.peace-mapping {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.peace-mapping-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-mapping-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.peace-mapping-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-mapping-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-mapping-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-mapping-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.peace-mapping-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.peace-mapping-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   YOUTH PEACE ACTORS NETWORK
========================= */

.peace-youth {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.peace-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.peace-youth-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.peace-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.peace-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}
/* =========================
   COMMUNITY DIALOGUE PLATFORMS
========================= */

.peace-dialogue {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.peace-dialogue-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-dialogue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.peace-dialogue-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-dialogue-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-dialogue-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-dialogue-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.peace-dialogue-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.peace-dialogue-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* =========================
   DRR + PEACE INTEGRATION
========================= */

.peace-drr {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.peace-drr-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-drr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.peace-drr-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-drr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-drr-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-drr-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.peace-drr-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.peace-drr-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   MONITORING & ADAPTIVE LEARNING
========================= */

.peace-monitoring {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.peace-monitoring-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.peace-monitoring-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-monitoring-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-monitoring-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-monitoring-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.peace-monitoring-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.peace-monitoring-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.peace-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.peace-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.peace-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.peace-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.peace-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.peace-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.peace-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.peace-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.peace-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   RECOVERY & REINTEGRATION HERO
========================= */

.recovery-hero {
    height: 70vh;
    background: url("../../assets/images/programs/recovery-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.recovery-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(25, 35, 45, 0.55);
}

.recovery-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.recovery-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.recovery-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   PROGRAM OVERVIEW
========================= */

.recovery-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.recovery-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.recovery-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.recovery-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.recovery-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   YOUTH MOBILIZATION & LEADERSHIP IN RECOVERY
========================= */

.recovery-youth {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.recovery-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-youth-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.recovery-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.recovery-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   MULTI-SECTOR RECOVERY INTERVENTIONS
========================= */

.recovery-multisector {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.recovery-multisector-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-multisector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-multisector-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-multisector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-multisector-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-multisector-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.recovery-multisector-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   LIVELIHOOD RESTORATION & RESILIENCE BUILDING
========================= */

.recovery-livelihood {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.recovery-livelihood-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-livelihood-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-livelihood-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-livelihood-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-livelihood-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-livelihood-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.recovery-livelihood-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   REINTEGRATION SYSTEM
========================= */

.recovery-reintegration {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.recovery-reintegration-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-reintegration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-reintegration-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-reintegration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-reintegration-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-reintegration-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.recovery-reintegration-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.recovery-reintegration-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   COORDINATION & INSTITUTIONAL ALIGNMENT
========================= */

.recovery-coordination {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.recovery-coordination-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-coordination-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-coordination-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-coordination-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-coordination-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-coordination-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.recovery-coordination-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.recovery-coordination-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   MONITORING, EVALUATION & LEARNING
========================= */

.recovery-mel {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.recovery-mel-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-mel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-mel-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-mel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-mel-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-mel-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.recovery-mel-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.recovery-mel-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.recovery-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.recovery-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.recovery-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.recovery-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.recovery-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.recovery-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.recovery-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.recovery-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.recovery-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   PROGRAM OVERVIEW
========================= */

.resilience-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.resilience-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.resilience-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.resilience-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.resilience-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   PARTICIPATORY VULNERABILITY & CAPACITY ASSESSMENT
========================= */

.resilience-vca {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.resilience-vca-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-vca-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-vca-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-vca-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-vca-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-vca-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.resilience-vca-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.resilience-vca-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   YOUTH RESILIENCE CHAMPIONS
========================= */

.resilience-youth {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.resilience-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.resilience-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.resilience-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   MULTI-SECTOR RESILIENCE INTERVENTIONS
========================= */

.resilience-multisector {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.resilience-multisector-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-multisector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-multisector-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-multisector-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-multisector-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-multisector-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.resilience-multisector-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   CAPACITY BUILDING & COMMUNITY LEARNING
========================= */

.resilience-capacity {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.resilience-capacity-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-capacity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-capacity-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-capacity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-capacity-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-capacity-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.resilience-capacity-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.resilience-capacity-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INSTITUTIONAL LINKAGES & SYSTEM COORDINATION
========================= */

.resilience-institutional {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.resilience-institutional-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-institutional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-institutional-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-institutional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-institutional-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-institutional-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.resilience-institutional-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.resilience-institutional-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INCLUSIVITY & PROTECTION FRAMEWORK
========================= */

.resilience-inclusion {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.resilience-inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-inclusion-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-inclusion-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-inclusion-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.resilience-inclusion-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.resilience-inclusion-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   MONITORING, FEEDBACK & ADAPTIVE RESILIENCE
========================= */

.resilience-mel {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.resilience-mel-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-mel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-mel-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-mel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-mel-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-mel-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.resilience-mel-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.resilience-mel-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.resilience-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.resilience-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.resilience-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.resilience-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.resilience-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.resilience-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.resilience-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.resilience-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.resilience-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   ENVIRONMENT, LAND & ENERGY HERO
========================= */

.env-hero {
    height: 70vh;
    background: url("../../assets/images/programs/env-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.env-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 40, 25, 0.55);
}

.env-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.env-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.env-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   PROGRAM OVERVIEW
========================= */

.env-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.env-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.env-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.env-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.env-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   COMMUNITY-BASED ENVIRONMENTAL & LAND-USE ASSESSMENTS
========================= */

.env-assessment {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.env-assessment-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-assessment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.env-assessment-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-assessment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-assessment-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-assessment-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-assessment-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-assessment-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   YOUTH ENVIRONMENTAL STEWARDS
========================= */

.env-youth {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.env-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.env-youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   ENVIRONMENTAL PROTECTION (NATURE-BASED SOLUTIONS)
========================= */

.env-protection {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.env-protection-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-protection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.env-protection-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-protection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-protection-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-protection-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-protection-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-protection-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   LAND MANAGEMENT & CONFLICT PREVENTION
========================= */

.env-land {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.env-land-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-land-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.env-land-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-land-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-land-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-land-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-land-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-land-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   CLEAN ENERGY TRANSITION
========================= */

.env-energy {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.env-energy-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-energy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.env-energy-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-energy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-energy-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-energy-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-energy-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-energy-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INSTITUTIONAL LINKAGES
========================= */

.env-institutional {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.env-institutional-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-institutional-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.env-institutional-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-institutional-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-institutional-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-institutional-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-institutional-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-institutional-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INCLUSION & SUSTAINABILITY FRAMEWORK
========================= */

.env-inclusion {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.env-inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.env-inclusion-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-inclusion-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-inclusion-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.env-inclusion-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.env-inclusion-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.env-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.env-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.env-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.env-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.env-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.env-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.env-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.env-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.env-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================================
   FOOD SECURITY & NUTRITION - PREMIUM PROGRAM PAGE
   ========================================= */

.fsn-kicker {
    margin: 0 0 14px;
    color: #C8A24A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fsn-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(9, 58, 35, 0.96) 0%, rgba(13, 94, 52, 0.9) 50%, rgba(19, 126, 67, 0.78) 100%),
        url("../images/programs/food-security-overview.jpg") center/cover;
    color: #ffffff;
}

.fsn-hero-media {
    position: absolute;
    inset: auto -8% -34% 38%;
    height: 380px;
    background: radial-gradient(circle, rgba(248, 202, 90, 0.22), rgba(248, 202, 90, 0) 68%);
    pointer-events: none;
}

.fsn-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.fsn-hero-copy {
    max-width: 760px;
}

.fsn-hero-copy h1 {
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.fsn-hero-copy > p:not(.fsn-kicker) {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.fsn-hero-actions,
.fsn-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.fsn-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.fsn-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.fsn-nutrition-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(8, 43, 29, 0.58);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.fsn-panel-top,
.fsn-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.fsn-panel-top span,
.fsn-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fsn-panel-top strong,
.fsn-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.fsn-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(248, 202, 90, 0.18), rgba(255, 255, 255, 0.08));
}

.fsn-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.fsn-panel-list {
    display: grid;
    gap: 15px;
}

.fsn-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.fsn-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.fsn-panel-list span.active {
    background: #F8CA5A;
    box-shadow: 0 0 0 8px rgba(248, 202, 90, 0.12);
}

.fsn-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.fsn-overview {
    padding: 86px 0;
    background: #ffffff;
}

.fsn-overview-grid,
.fsn-linkage-grid,
.fsn-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.fsn-overview h2,
.fsn-linkage-grid h2,
.fsn-inclusion-grid h2,
.fsn-feature-card h2,
.fsn-section-heading h2,
.fsn-cta h2 {
    margin: 0;
    color: #143D29;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.fsn-overview-copy p,
.fsn-linkage-grid p,
.fsn-inclusion-grid p,
.fsn-section-heading p,
.fsn-feature-card p,
.fsn-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.fsn-overview-copy p:first-child {
    margin-top: 0;
}

.fsn-metrics {
    background: #123B28;
    color: #ffffff;
}

.fsn-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.fsn-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.fsn-metrics-grid strong {
    color: #F8CA5A;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.fsn-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.fsn-section {
    padding: 96px 0;
}

.fsn-system,
.fsn-response,
.fsn-coordination {
    background: #F7FAF6;
}

.fsn-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.fsn-section-heading > p:not(.fsn-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.fsn-flow,
.fsn-action-grid,
.fsn-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.fsn-flow article,
.fsn-action-grid article,
.fsn-impact-grid article,
.fsn-role-grid article,
.fsn-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #E3E8E4;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(20, 61, 41, 0.06);
}

.fsn-flow article span,
.fsn-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #0F8843;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fsn-flow h3,
.fsn-action-grid h3,
.fsn-impact-grid h3,
.fsn-role-grid h3,
.fsn-actor-grid h3 {
    margin: 0 0 10px;
    color: #143D29;
    font-size: 18px;
    line-height: 1.25;
}

.fsn-flow p,
.fsn-action-grid p,
.fsn-impact-grid p,
.fsn-role-grid p,
.fsn-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.fsn-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.fsn-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #143D29;
    color: #ffffff;
}

.fsn-feature-card h2,
.fsn-feature-card p {
    color: #ffffff;
}

.fsn-feature-card p:not(.fsn-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.fsn-actor-grid,
.fsn-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.fsn-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.fsn-livelihood,
.fsn-youth,
.fsn-impact {
    background: #ffffff;
}

.fsn-partner-stack {
    display: grid;
    gap: 14px;
}

.fsn-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #C8A24A;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(20, 61, 41, 0.07);
}

.fsn-livelihood .fsn-partner-stack div,
.fsn-coordination .fsn-partner-stack div {
    background: #F9FBF8;
}

.fsn-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fsn-partner-stack strong {
    color: #223127;
    font-size: 15px;
    line-height: 1.45;
}

.fsn-nutrition {
    background: linear-gradient(180deg, #F7FAF6 0%, #ffffff 100%);
}

.fsn-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fsn-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE6DD;
    border-radius: 999px;
    background: #F8FBF6;
    color: #143D29;
    font-size: 14px;
    font-weight: 700;
}

.fsn-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(14, 82, 48, 0.96), rgba(12, 112, 59, 0.9)),
        url("../images/programs/food-security-overview.jpg") center/cover;
    color: #ffffff;
}

.fsn-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.fsn-cta h2,
.fsn-cta p {
    color: #ffffff;
}

.fsn-cta p:not(.fsn-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.fsn-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .fsn-hero-grid,
    .fsn-overview-grid,
    .fsn-linkage-grid,
    .fsn-inclusion-grid,
    .fsn-split,
    .fsn-cta-grid {
        grid-template-columns: 1fr;
    }

    .fsn-nutrition-panel {
        min-height: auto;
    }

    .fsn-metrics-grid,
    .fsn-flow,
    .fsn-role-grid,
    .fsn-action-grid,
    .fsn-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fsn-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .fsn-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .fsn-hero-copy h1 {
        font-size: 40px;
    }

    .fsn-hero-copy > p:not(.fsn-kicker) {
        font-size: 16px;
    }

    .fsn-section,
    .fsn-overview,
    .fsn-cta {
        padding: 68px 0;
    }

    .fsn-metrics-grid,
    .fsn-flow,
    .fsn-role-grid,
    .fsn-action-grid,
    .fsn-impact-grid,
    .fsn-actor-grid {
        grid-template-columns: 1fr;
    }

    .fsn-metrics-grid {
        border-left: 0;
    }

    .fsn-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .fsn-nutrition-panel,
    .fsn-feature-card,
    .fsn-flow article,
    .fsn-action-grid article,
    .fsn-impact-grid article,
    .fsn-role-grid article,
    .fsn-actor-grid article {
        padding: 22px;
    }
}

/* =========================================
   PEACEBUILDING - PREMIUM PROGRAM PAGE
   ========================================= */

.pb-kicker {
    margin: 0 0 14px;
    color: #C9B16E;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pb-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(20, 44, 42, 0.96) 0%, rgba(30, 80, 66, 0.91) 52%, rgba(54, 120, 84, 0.78) 100%),
        url("../images/programs/peacebuilding-overview.jpg") center/cover;
    color: #ffffff;
}

.pb-hero-media {
    position: absolute;
    inset: auto -10% -34% 35%;
    height: 390px;
    background: radial-gradient(circle, rgba(201, 177, 110, 0.24), rgba(201, 177, 110, 0) 68%);
    pointer-events: none;
}

.pb-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.pb-hero-copy {
    max-width: 760px;
}

.pb-hero-copy h1 {
    max-width: 820px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.pb-hero-copy > p:not(.pb-kicker) {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.pb-hero-actions,
.pb-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.pb-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.pb-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.pb-dialogue-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(16, 42, 40, 0.6);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.pb-panel-top,
.pb-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.pb-panel-top span,
.pb-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pb-panel-top strong,
.pb-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.pb-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(201, 177, 110, 0.2), rgba(255, 255, 255, 0.08));
}

.pb-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.pb-panel-list {
    display: grid;
    gap: 15px;
}

.pb-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.pb-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.pb-panel-list span.active {
    background: #C9B16E;
    box-shadow: 0 0 0 8px rgba(201, 177, 110, 0.12);
}

.pb-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.pb-overview {
    padding: 86px 0;
    background: #ffffff;
}

.pb-overview-grid,
.pb-linkage-grid,
.pb-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.pb-overview h2,
.pb-linkage-grid h2,
.pb-inclusion-grid h2,
.pb-feature-card h2,
.pb-section-heading h2,
.pb-cta h2 {
    margin: 0;
    color: #173C39;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.pb-overview-copy p,
.pb-linkage-grid p,
.pb-inclusion-grid p,
.pb-section-heading p,
.pb-feature-card p,
.pb-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.pb-overview-copy p:first-child {
    margin-top: 0;
}

.pb-metrics {
    background: #173C39;
    color: #ffffff;
}

.pb-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.pb-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.pb-metrics-grid strong {
    color: #C9B16E;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.pb-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.pb-section {
    padding: 96px 0;
}

.pb-system,
.pb-mapping,
.pb-drr {
    background: #F7FAF8;
}

.pb-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.pb-section-heading > p:not(.pb-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.pb-flow,
.pb-action-grid,
.pb-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.pb-flow article,
.pb-action-grid article,
.pb-impact-grid article,
.pb-role-grid article,
.pb-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #E2E8E5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(23, 60, 57, 0.06);
}

.pb-flow article span,
.pb-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #0F8843;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pb-flow h3,
.pb-action-grid h3,
.pb-impact-grid h3,
.pb-role-grid h3,
.pb-actor-grid h3 {
    margin: 0 0 10px;
    color: #173C39;
    font-size: 18px;
    line-height: 1.25;
}

.pb-flow p,
.pb-action-grid p,
.pb-impact-grid p,
.pb-role-grid p,
.pb-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.pb-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.pb-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #173C39;
    color: #ffffff;
}

.pb-feature-card h2,
.pb-feature-card p {
    color: #ffffff;
}

.pb-feature-card p:not(.pb-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.pb-actor-grid,
.pb-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.pb-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.pb-youth,
.pb-learning,
.pb-impact {
    background: #ffffff;
}

.pb-dialogue {
    background: linear-gradient(180deg, #F7FAF8 0%, #ffffff 100%);
}

.pb-partner-stack {
    display: grid;
    gap: 14px;
}

.pb-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #C9B16E;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(23, 60, 57, 0.07);
}

.pb-youth .pb-partner-stack div,
.pb-drr .pb-partner-stack div {
    background: #F9FBFA;
}

.pb-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pb-partner-stack strong {
    color: #22312F;
    font-size: 15px;
    line-height: 1.45;
}

.pb-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pb-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE6E2;
    border-radius: 999px;
    background: #F8FBFA;
    color: #173C39;
    font-size: 14px;
    font-weight: 700;
}

.pb-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(20, 62, 56, 0.96), rgba(25, 102, 72, 0.9)),
        url("../images/programs/peacebuilding-overview.jpg") center/cover;
    color: #ffffff;
}

.pb-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.pb-cta h2,
.pb-cta p {
    color: #ffffff;
}

.pb-cta p:not(.pb-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.pb-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .pb-hero-grid,
    .pb-overview-grid,
    .pb-linkage-grid,
    .pb-inclusion-grid,
    .pb-split,
    .pb-cta-grid {
        grid-template-columns: 1fr;
    }

    .pb-dialogue-panel {
        min-height: auto;
    }

    .pb-metrics-grid,
    .pb-flow,
    .pb-role-grid,
    .pb-action-grid,
    .pb-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pb-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .pb-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .pb-hero-copy h1 {
        font-size: 40px;
    }

    .pb-hero-copy > p:not(.pb-kicker) {
        font-size: 16px;
    }

    .pb-section,
    .pb-overview,
    .pb-cta {
        padding: 68px 0;
    }

    .pb-metrics-grid,
    .pb-flow,
    .pb-role-grid,
    .pb-action-grid,
    .pb-impact-grid,
    .pb-actor-grid {
        grid-template-columns: 1fr;
    }

    .pb-metrics-grid {
        border-left: 0;
    }

    .pb-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .pb-dialogue-panel,
    .pb-feature-card,
    .pb-flow article,
    .pb-action-grid article,
    .pb-impact-grid article,
    .pb-role-grid article,
    .pb-actor-grid article {
        padding: 22px;
    }
}

/* =========================================
   RECOVERY & REINTEGRATION - PREMIUM PROGRAM PAGE
   ========================================= */

.rr-kicker {
    margin: 0 0 14px;
    color: #D7A756;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rr-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(28, 51, 42, 0.96) 0%, rgba(43, 93, 68, 0.91) 52%, rgba(96, 132, 81, 0.78) 100%),
        url("../images/programs/recovery-overview.jpg") center/cover;
    color: #ffffff;
}

.rr-hero-media {
    position: absolute;
    inset: auto -10% -34% 35%;
    height: 390px;
    background: radial-gradient(circle, rgba(215, 167, 86, 0.24), rgba(215, 167, 86, 0) 68%);
    pointer-events: none;
}

.rr-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.rr-hero-copy {
    max-width: 760px;
}

.rr-hero-copy h1 {
    max-width: 850px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.rr-hero-copy > p:not(.rr-kicker) {
    max-width: 680px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.rr-hero-actions,
.rr-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.rr-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.rr-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.rr-recovery-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(22, 45, 38, 0.6);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.rr-panel-top,
.rr-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.rr-panel-top span,
.rr-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rr-panel-top strong,
.rr-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.rr-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(215, 167, 86, 0.2), rgba(255, 255, 255, 0.08));
}

.rr-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.rr-panel-list {
    display: grid;
    gap: 15px;
}

.rr-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.rr-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.rr-panel-list span.active {
    background: #D7A756;
    box-shadow: 0 0 0 8px rgba(215, 167, 86, 0.12);
}

.rr-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.rr-overview {
    padding: 86px 0;
    background: #ffffff;
}

.rr-overview-grid,
.rr-linkage-grid,
.rr-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.rr-overview h2,
.rr-linkage-grid h2,
.rr-inclusion-grid h2,
.rr-feature-card h2,
.rr-section-heading h2,
.rr-cta h2 {
    margin: 0;
    color: #1F3F35;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.rr-overview-copy p,
.rr-linkage-grid p,
.rr-inclusion-grid p,
.rr-section-heading p,
.rr-feature-card p,
.rr-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.rr-overview-copy p:first-child {
    margin-top: 0;
}

.rr-metrics {
    background: #1F3F35;
    color: #ffffff;
}

.rr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.rr-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.rr-metrics-grid strong {
    color: #D7A756;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.rr-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.rr-section {
    padding: 96px 0;
}

.rr-system,
.rr-multisector,
.rr-coordination {
    background: #F8FAF7;
}

.rr-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.rr-section-heading > p:not(.rr-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.rr-flow,
.rr-action-grid,
.rr-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.rr-flow article,
.rr-action-grid article,
.rr-impact-grid article,
.rr-role-grid article,
.rr-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #E2E8E1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(31, 63, 53, 0.06);
}

.rr-flow article span,
.rr-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #0F8843;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rr-flow h3,
.rr-action-grid h3,
.rr-impact-grid h3,
.rr-role-grid h3,
.rr-actor-grid h3 {
    margin: 0 0 10px;
    color: #1F3F35;
    font-size: 18px;
    line-height: 1.25;
}

.rr-flow p,
.rr-action-grid p,
.rr-impact-grid p,
.rr-role-grid p,
.rr-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.rr-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.rr-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #1F3F35;
    color: #ffffff;
}

.rr-feature-card h2,
.rr-feature-card p {
    color: #ffffff;
}

.rr-feature-card p:not(.rr-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.rr-actor-grid,
.rr-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.rr-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.rr-youth,
.rr-livelihood,
.rr-learning,
.rr-impact {
    background: #ffffff;
}

.rr-reintegration {
    background: linear-gradient(180deg, #F8FAF7 0%, #ffffff 100%);
}

.rr-partner-stack {
    display: grid;
    gap: 14px;
}

.rr-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #D7A756;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(31, 63, 53, 0.07);
}

.rr-livelihood .rr-partner-stack div,
.rr-coordination .rr-partner-stack div {
    background: #F9FBF8;
}

.rr-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rr-partner-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.rr-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rr-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE6DC;
    border-radius: 999px;
    background: #F8FBF7;
    color: #1F3F35;
    font-size: 14px;
    font-weight: 700;
}

.rr-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(31, 63, 53, 0.96), rgba(51, 111, 73, 0.9)),
        url("../images/programs/recovery-overview.jpg") center/cover;
    color: #ffffff;
}

.rr-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.rr-cta h2,
.rr-cta p {
    color: #ffffff;
}

.rr-cta p:not(.rr-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.rr-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .rr-hero-grid,
    .rr-overview-grid,
    .rr-linkage-grid,
    .rr-inclusion-grid,
    .rr-split,
    .rr-cta-grid {
        grid-template-columns: 1fr;
    }

    .rr-recovery-panel {
        min-height: auto;
    }

    .rr-metrics-grid,
    .rr-flow,
    .rr-role-grid,
    .rr-action-grid,
    .rr-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rr-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .rr-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .rr-hero-copy h1 {
        font-size: 40px;
    }

    .rr-hero-copy > p:not(.rr-kicker) {
        font-size: 16px;
    }

    .rr-section,
    .rr-overview,
    .rr-cta {
        padding: 68px 0;
    }

    .rr-metrics-grid,
    .rr-flow,
    .rr-role-grid,
    .rr-action-grid,
    .rr-impact-grid,
    .rr-actor-grid {
        grid-template-columns: 1fr;
    }

    .rr-metrics-grid {
        border-left: 0;
    }

    .rr-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .rr-recovery-panel,
    .rr-feature-card,
    .rr-flow article,
    .rr-action-grid article,
    .rr-impact-grid article,
    .rr-role-grid article,
    .rr-actor-grid article {
        padding: 22px;
    }
}

/* =========================================
   COMMUNITY RESILIENCE BUILDING - PREMIUM PROGRAM PAGE
   ========================================= */

.crb-kicker {
    margin: 0 0 14px;
    color: #BFD56B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.crb-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(17, 53, 42, 0.97) 0%, rgba(33, 89, 62, 0.92) 52%, rgba(93, 130, 67, 0.78) 100%),
        url("../images/programs/resilience-overview.jpg") center/cover;
    color: #ffffff;
}

.crb-hero-media {
    position: absolute;
    inset: auto -10% -34% 35%;
    height: 390px;
    background: radial-gradient(circle, rgba(191, 213, 107, 0.24), rgba(191, 213, 107, 0) 68%);
    pointer-events: none;
}

.crb-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.crb-hero-copy {
    max-width: 780px;
}

.crb-hero-copy h1 {
    max-width: 860px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.crb-hero-copy > p:not(.crb-kicker) {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.crb-hero-actions,
.crb-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.crb-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.crb-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.crb-resilience-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(13, 44, 34, 0.62);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.crb-panel-top,
.crb-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.crb-panel-top span,
.crb-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crb-panel-top strong,
.crb-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.crb-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(191, 213, 107, 0.2), rgba(255, 255, 255, 0.08));
}

.crb-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.crb-panel-list {
    display: grid;
    gap: 15px;
}

.crb-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.crb-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.crb-panel-list span.active {
    background: #BFD56B;
    box-shadow: 0 0 0 8px rgba(191, 213, 107, 0.12);
}

.crb-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.crb-overview {
    padding: 86px 0;
    background: #ffffff;
}

.crb-overview-grid,
.crb-linkage-grid,
.crb-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.crb-overview h2,
.crb-linkage-grid h2,
.crb-inclusion-grid h2,
.crb-feature-card h2,
.crb-section-heading h2,
.crb-cta h2 {
    margin: 0;
    color: #173F31;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.crb-overview-copy p,
.crb-linkage-grid p,
.crb-inclusion-grid p,
.crb-section-heading p,
.crb-feature-card p,
.crb-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.crb-overview-copy p:first-child {
    margin-top: 0;
}

.crb-metrics {
    background: #173F31;
    color: #ffffff;
}

.crb-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.crb-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.crb-metrics-grid strong {
    color: #BFD56B;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.crb-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.crb-section {
    padding: 96px 0;
}

.crb-system,
.crb-multisector,
.crb-institutional,
.crb-learning {
    background: #F7FAF4;
}

.crb-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.crb-section-heading > p:not(.crb-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.crb-flow,
.crb-action-grid,
.crb-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.crb-flow article,
.crb-action-grid article,
.crb-impact-grid article,
.crb-role-grid article,
.crb-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #E0E8DC;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(23, 63, 49, 0.06);
}

.crb-flow article span,
.crb-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #0F8843;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.crb-flow h3,
.crb-action-grid h3,
.crb-impact-grid h3,
.crb-role-grid h3,
.crb-actor-grid h3 {
    margin: 0 0 10px;
    color: #173F31;
    font-size: 18px;
    line-height: 1.25;
}

.crb-flow p,
.crb-action-grid p,
.crb-impact-grid p,
.crb-role-grid p,
.crb-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.crb-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.crb-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #173F31;
    color: #ffffff;
}

.crb-feature-card h2,
.crb-feature-card p {
    color: #ffffff;
}

.crb-feature-card p:not(.crb-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.crb-actor-grid,
.crb-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.crb-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.crb-vca,
.crb-youth,
.crb-capacity,
.crb-inclusion,
.crb-impact {
    background: #ffffff;
}

.crb-partner-stack {
    display: grid;
    gap: 14px;
}

.crb-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #BFD56B;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(23, 63, 49, 0.07);
}

.crb-youth .crb-partner-stack div,
.crb-institutional .crb-partner-stack div {
    background: #F9FBF6;
}

.crb-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crb-partner-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.crb-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.crb-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE8D8;
    border-radius: 999px;
    background: #F8FBF5;
    color: #173F31;
    font-size: 14px;
    font-weight: 700;
}

.crb-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(23, 63, 49, 0.96), rgba(45, 111, 69, 0.9)),
        url("../images/programs/resilience-overview.jpg") center/cover;
    color: #ffffff;
}

.crb-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.crb-cta h2,
.crb-cta p {
    color: #ffffff;
}

.crb-cta p:not(.crb-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.crb-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .crb-hero-grid,
    .crb-overview-grid,
    .crb-linkage-grid,
    .crb-inclusion-grid,
    .crb-split,
    .crb-cta-grid {
        grid-template-columns: 1fr;
    }

    .crb-resilience-panel {
        min-height: auto;
    }

    .crb-metrics-grid,
    .crb-flow,
    .crb-role-grid,
    .crb-action-grid,
    .crb-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .crb-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .crb-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .crb-hero-copy h1 {
        font-size: 40px;
    }

    .crb-hero-copy > p:not(.crb-kicker) {
        font-size: 16px;
    }

    .crb-section,
    .crb-overview,
    .crb-cta {
        padding: 68px 0;
    }

    .crb-metrics-grid,
    .crb-flow,
    .crb-role-grid,
    .crb-action-grid,
    .crb-impact-grid,
    .crb-actor-grid {
        grid-template-columns: 1fr;
    }

    .crb-metrics-grid {
        border-left: 0;
    }

    .crb-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .crb-resilience-panel,
    .crb-feature-card,
    .crb-flow article,
    .crb-action-grid article,
    .crb-impact-grid article,
    .crb-role-grid article,
    .crb-actor-grid article {
        padding: 22px;
    }
}

/* =========================================
   ENVIRONMENT, LAND & ENERGY - PREMIUM PROGRAM PAGE
   ========================================= */

.ele-kicker {
    margin: 0 0 14px;
    color: #9FD86B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ele-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(13, 52, 39, 0.97) 0%, rgba(27, 91, 58, 0.92) 52%, rgba(86, 132, 56, 0.78) 100%),
        url("../images/programs/env-overview.jpg") center/cover;
    color: #ffffff;
}

.ele-hero-media {
    position: absolute;
    inset: auto -10% -34% 35%;
    height: 390px;
    background: radial-gradient(circle, rgba(159, 216, 107, 0.24), rgba(159, 216, 107, 0) 68%);
    pointer-events: none;
}

.ele-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.ele-hero-copy {
    max-width: 800px;
}

.ele-hero-copy h1 {
    max-width: 900px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.ele-hero-copy > p:not(.ele-kicker) {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.ele-hero-actions,
.ele-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.ele-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.ele-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.ele-environment-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(10, 42, 31, 0.62);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.ele-panel-top,
.ele-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.ele-panel-top span,
.ele-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ele-panel-top strong,
.ele-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.ele-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(159, 216, 107, 0.2), rgba(255, 255, 255, 0.08));
}

.ele-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.ele-panel-list {
    display: grid;
    gap: 15px;
}

.ele-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.ele-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.ele-panel-list span.active {
    background: #9FD86B;
    box-shadow: 0 0 0 8px rgba(159, 216, 107, 0.12);
}

.ele-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.ele-overview {
    padding: 86px 0;
    background: #ffffff;
}

.ele-overview-grid,
.ele-linkage-grid,
.ele-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.ele-overview h2,
.ele-linkage-grid h2,
.ele-inclusion-grid h2,
.ele-feature-card h2,
.ele-section-heading h2,
.ele-cta h2 {
    margin: 0;
    color: #123F2E;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.ele-overview-copy p,
.ele-linkage-grid p,
.ele-inclusion-grid p,
.ele-section-heading p,
.ele-feature-card p,
.ele-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.ele-overview-copy p:first-child {
    margin-top: 0;
}

.ele-metrics {
    background: #123F2E;
    color: #ffffff;
}

.ele-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ele-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.ele-metrics-grid strong {
    color: #9FD86B;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.ele-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.ele-section {
    padding: 96px 0;
}

.ele-system,
.ele-protection,
.ele-institutional {
    background: #F6FAF3;
}

.ele-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.ele-section-heading > p:not(.ele-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.ele-flow,
.ele-action-grid,
.ele-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ele-flow article,
.ele-action-grid article,
.ele-impact-grid article,
.ele-role-grid article,
.ele-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #DDE8D8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(18, 63, 46, 0.06);
}

.ele-flow article span,
.ele-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #0F8843;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ele-flow h3,
.ele-action-grid h3,
.ele-impact-grid h3,
.ele-role-grid h3,
.ele-actor-grid h3 {
    margin: 0 0 10px;
    color: #123F2E;
    font-size: 18px;
    line-height: 1.25;
}

.ele-flow p,
.ele-action-grid p,
.ele-impact-grid p,
.ele-role-grid p,
.ele-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.ele-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.ele-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #123F2E;
    color: #ffffff;
}

.ele-feature-card h2,
.ele-feature-card p {
    color: #ffffff;
}

.ele-feature-card p:not(.ele-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.ele-actor-grid,
.ele-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ele-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.ele-assessment,
.ele-youth,
.ele-land,
.ele-energy,
.ele-inclusion,
.ele-impact {
    background: #ffffff;
}

.ele-partner-stack {
    display: grid;
    gap: 14px;
}

.ele-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #9FD86B;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(18, 63, 46, 0.07);
}

.ele-youth .ele-partner-stack div,
.ele-land .ele-partner-stack div,
.ele-institutional .ele-partner-stack div {
    background: #F9FBF6;
}

.ele-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ele-partner-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.ele-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ele-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE8D7;
    border-radius: 999px;
    background: #F8FBF5;
    color: #123F2E;
    font-size: 14px;
    font-weight: 700;
}

.ele-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(18, 63, 46, 0.96), rgba(42, 111, 64, 0.9)),
        url("../images/programs/env-overview.jpg") center/cover;
    color: #ffffff;
}

.ele-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.ele-cta h2,
.ele-cta p {
    color: #ffffff;
}

.ele-cta p:not(.ele-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.ele-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .ele-hero-grid,
    .ele-overview-grid,
    .ele-linkage-grid,
    .ele-inclusion-grid,
    .ele-split,
    .ele-cta-grid {
        grid-template-columns: 1fr;
    }

    .ele-environment-panel {
        min-height: auto;
    }

    .ele-metrics-grid,
    .ele-flow,
    .ele-role-grid,
    .ele-action-grid,
    .ele-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ele-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .ele-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .ele-hero-copy h1 {
        font-size: 40px;
    }

    .ele-hero-copy > p:not(.ele-kicker) {
        font-size: 16px;
    }

    .ele-section,
    .ele-overview,
    .ele-cta {
        padding: 68px 0;
    }

    .ele-metrics-grid,
    .ele-flow,
    .ele-role-grid,
    .ele-action-grid,
    .ele-impact-grid,
    .ele-actor-grid {
        grid-template-columns: 1fr;
    }

    .ele-metrics-grid {
        border-left: 0;
    }

    .ele-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .ele-environment-panel,
    .ele-feature-card,
    .ele-flow article,
    .ele-action-grid article,
    .ele-impact-grid article,
    .ele-role-grid article,
    .ele-actor-grid article {
        padding: 22px;
    }
}

/* =========================
   DISASTER RISK COMMUNICATION HERO
========================= */

.drc-hero {
    height: 70vh;
    background: url("../../assets/images/programs/drc-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.drc-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 25, 40, 0.65);
}

.drc-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.drc-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.drc-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.drc-hero-text .hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.drc-hero-text .hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.drc-hero-text .hero-note {
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   PROGRAM OVERVIEW
========================= */

.drc-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.drc-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.drc-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.drc-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.drc-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   COMMUNITY ENGAGEMENT & PARTICIPATORY ASSESSMENT
========================= */

.drc-engagement {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.drc-engagement-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-engagement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.drc-engagement-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-engagement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-engagement-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-engagement-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.drc-engagement-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.drc-engagement-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   YOUTH DISASTER COMMUNICATORS
========================= */

.drc-youth {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.drc-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.drc-youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.drc-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.drc-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   GOVERNMENT & PARTNER COORDINATION
========================= */

.drc-partners {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.drc-partners-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.drc-partners-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-partners-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-partners-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-partners-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.drc-partners-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.drc-partners-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   EMERGENCY & REAL-TIME COMMUNICATION
========================= */

.drc-emergency {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.drc-emergency-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-emergency-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.drc-emergency-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-emergency-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-emergency-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-emergency-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.drc-emergency-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.drc-emergency-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   EDUCATION & RESILIENCE INTEGRATION
========================= */

.drc-education {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.drc-education-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-education-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.drc-education-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-education-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-education-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-education-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.drc-education-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.drc-education-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INCLUSION, ACCOUNTABILITY & SUSTAINABILITY
========================= */

.drc-inclusion {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.drc-inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.drc-inclusion-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-inclusion-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-inclusion-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.drc-inclusion-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.drc-inclusion-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.drc-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.drc-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.drc-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.drc-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.drc-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.drc-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.drc-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.drc-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.drc-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   COMMUNITY RISK MANAGEMENT HERO
========================= */

.crm-hero {
    height: 70vh;
    background: url("../../assets/images/programs/crm-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.crm-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 30, 0.65);
}

.crm-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.crm-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.crm-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.crm-hero-text .hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.crm-hero-text .hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.crm-hero-text .hero-note {
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   CBDRM PROGRAM OVERVIEW
========================= */

.crm-overview {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.crm-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

/* TEXT */
.crm-text p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #4B5563;
}

/* HIGHLIGHT */
.crm-highlight {
    margin-top: 20px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
}

/* IMAGE */
.crm-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

/* =========================
   PARTICIPATORY RISK & VULNERABILITY ASSESSMENT
========================= */

.crm-assessment {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.crm-assessment-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-assessment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.crm-assessment-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-assessment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-assessment-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-assessment-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* INCLUSION */
.crm-assessment-inclusion {
    margin-top: 30px;
    padding: 15px;
    background: #EAF2F6;
    border-left: 4px solid #2B6CB0;
    font-weight: 600;
    color: #1F2937;
    text-align: center;
}

/* FLOW */
.crm-assessment-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* =========================
   COMMUNITY PLANNING & CONTINGENCY DEVELOPMENT
========================= */

.crm-planning {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.crm-planning-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-planning-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.crm-planning-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-planning-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-planning-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-planning-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.crm-planning-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.crm-planning-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   YOUTH AS COMMUNITY CHANGE AGENTS
========================= */

.crm-youth {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.crm-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-youth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.crm-youth-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-youth-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.crm-youth-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.crm-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   RISK REDUCTION & MITIGATION STRATEGIES
========================= */

.crm-mitigation {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.crm-mitigation-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-mitigation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.crm-mitigation-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-mitigation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-mitigation-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-mitigation-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.crm-mitigation-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.crm-mitigation-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   COMMUNITY STRUCTURES & SUSTAINABILITY
========================= */

.crm-structures {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.crm-structures-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-structures-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.crm-structures-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-structures-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-structures-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-structures-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.crm-structures-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.crm-structures-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INCLUSION, ACCOUNTABILITY & LEARNING
========================= */

.crm-inclusion {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.crm-inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.crm-inclusion-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-inclusion-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-inclusion-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* FLOW */
.crm-inclusion-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.crm-inclusion-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT SUMMARY + CTA
========================= */

.crm-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.crm-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.crm-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* CARD */
.crm-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.crm-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.crm-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 16px;
}

.crm-impact-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #4B5563;
}

/* NOTE */
.crm-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
}

/* CTA */
.crm-impact-cta {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================================
   DISASTER RISK COMMUNICATION - PREMIUM PROGRAM PAGE
   ========================================= */

.dcom-kicker {
    margin: 0 0 14px;
    color: #8FC7E8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dcom-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(18, 45, 64, 0.97) 0%, rgba(28, 84, 104, 0.92) 52%, rgba(52, 122, 124, 0.78) 100%),
        url("../images/programs/drc-overview.jpg") center/cover;
    color: #ffffff;
}

.dcom-hero-media {
    position: absolute;
    inset: auto -10% -34% 35%;
    height: 390px;
    background: radial-gradient(circle, rgba(143, 199, 232, 0.24), rgba(143, 199, 232, 0) 68%);
    pointer-events: none;
}

.dcom-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.dcom-hero-copy {
    max-width: 800px;
}

.dcom-hero-copy h1 {
    max-width: 900px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.dcom-hero-copy > p:not(.dcom-kicker) {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.dcom-hero-actions,
.dcom-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.dcom-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.dcom-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.dcom-signal-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(14, 39, 56, 0.62);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.dcom-panel-top,
.dcom-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.dcom-panel-top span,
.dcom-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dcom-panel-top strong,
.dcom-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.dcom-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(143, 199, 232, 0.2), rgba(255, 255, 255, 0.08));
}

.dcom-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.dcom-panel-list {
    display: grid;
    gap: 15px;
}

.dcom-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.dcom-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.dcom-panel-list span.active {
    background: #8FC7E8;
    box-shadow: 0 0 0 8px rgba(143, 199, 232, 0.12);
}

.dcom-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.dcom-overview {
    padding: 86px 0;
    background: #ffffff;
}

.dcom-overview-grid,
.dcom-linkage-grid,
.dcom-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.dcom-overview h2,
.dcom-linkage-grid h2,
.dcom-inclusion-grid h2,
.dcom-feature-card h2,
.dcom-section-heading h2,
.dcom-cta h2 {
    margin: 0;
    color: #183C52;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.dcom-overview-copy p,
.dcom-linkage-grid p,
.dcom-inclusion-grid p,
.dcom-section-heading p,
.dcom-feature-card p,
.dcom-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.dcom-overview-copy p:first-child {
    margin-top: 0;
}

.dcom-metrics {
    background: #183C52;
    color: #ffffff;
}

.dcom-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.dcom-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.dcom-metrics-grid strong {
    color: #8FC7E8;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.dcom-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.dcom-section {
    padding: 96px 0;
}

.dcom-system,
.dcom-coordination,
.dcom-education {
    background: #F4F9FC;
}

.dcom-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.dcom-section-heading > p:not(.dcom-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.dcom-flow,
.dcom-action-grid,
.dcom-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dcom-flow article,
.dcom-action-grid article,
.dcom-impact-grid article,
.dcom-role-grid article,
.dcom-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #DCE8EE;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(24, 60, 82, 0.06);
}

.dcom-flow article span,
.dcom-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #2B6CB0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dcom-flow h3,
.dcom-action-grid h3,
.dcom-impact-grid h3,
.dcom-role-grid h3,
.dcom-actor-grid h3 {
    margin: 0 0 10px;
    color: #183C52;
    font-size: 18px;
    line-height: 1.25;
}

.dcom-flow p,
.dcom-action-grid p,
.dcom-impact-grid p,
.dcom-role-grid p,
.dcom-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.dcom-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.dcom-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #183C52;
    color: #ffffff;
}

.dcom-feature-card h2,
.dcom-feature-card p {
    color: #ffffff;
}

.dcom-feature-card p:not(.dcom-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.dcom-actor-grid,
.dcom-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.dcom-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.dcom-engagement,
.dcom-youth,
.dcom-emergency,
.dcom-inclusion,
.dcom-impact {
    background: #ffffff;
}

.dcom-partner-stack {
    display: grid;
    gap: 14px;
}

.dcom-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #8FC7E8;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(24, 60, 82, 0.07);
}

.dcom-youth .dcom-partner-stack div,
.dcom-coordination .dcom-partner-stack div {
    background: #F8FBFD;
}

.dcom-partner-stack span {
    color: #2B6CB0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dcom-partner-stack strong {
    color: #233540;
    font-size: 15px;
    line-height: 1.45;
}

.dcom-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dcom-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE8EE;
    border-radius: 999px;
    background: #F8FBFD;
    color: #183C52;
    font-size: 14px;
    font-weight: 700;
}

.dcom-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(24, 60, 82, 0.96), rgba(34, 103, 126, 0.9)),
        url("../images/programs/drc-overview.jpg") center/cover;
    color: #ffffff;
}

.dcom-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.dcom-cta h2,
.dcom-cta p {
    color: #ffffff;
}

.dcom-cta p:not(.dcom-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.dcom-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

/* =========================================
   COMMUNITY RISK MANAGEMENT - PREMIUM PROGRAM PAGE
   ========================================= */

.cbdrm-kicker {
    margin: 0 0 14px;
    color: #C7B36A;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cbdrm-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(21, 52, 44, 0.97) 0%, rgba(36, 88, 65, 0.92) 52%, rgba(85, 128, 78, 0.78) 100%),
        url("../images/programs/crm-overview.jpg") center/cover;
    color: #ffffff;
}

.cbdrm-hero-media {
    position: absolute;
    inset: auto -10% -34% 35%;
    height: 390px;
    background: radial-gradient(circle, rgba(199, 179, 106, 0.24), rgba(199, 179, 106, 0) 68%);
    pointer-events: none;
}

.cbdrm-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.cbdrm-hero-copy {
    max-width: 800px;
}

.cbdrm-hero-copy h1 {
    max-width: 900px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.cbdrm-hero-copy > p:not(.cbdrm-kicker) {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.cbdrm-hero-actions,
.cbdrm-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.cbdrm-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.cbdrm-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.cbdrm-risk-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(16, 44, 37, 0.62);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.cbdrm-panel-top,
.cbdrm-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.cbdrm-panel-top span,
.cbdrm-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cbdrm-panel-top strong,
.cbdrm-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.cbdrm-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(199, 179, 106, 0.2), rgba(255, 255, 255, 0.08));
}

.cbdrm-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.cbdrm-panel-list {
    display: grid;
    gap: 15px;
}

.cbdrm-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.cbdrm-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.cbdrm-panel-list span.active {
    background: #C7B36A;
    box-shadow: 0 0 0 8px rgba(199, 179, 106, 0.12);
}

.cbdrm-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.cbdrm-overview {
    padding: 86px 0;
    background: #ffffff;
}

.cbdrm-overview-grid,
.cbdrm-linkage-grid,
.cbdrm-inclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.cbdrm-overview h2,
.cbdrm-linkage-grid h2,
.cbdrm-inclusion-grid h2,
.cbdrm-feature-card h2,
.cbdrm-section-heading h2,
.cbdrm-cta h2 {
    margin: 0;
    color: #173F33;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.cbdrm-overview-copy p,
.cbdrm-linkage-grid p,
.cbdrm-inclusion-grid p,
.cbdrm-section-heading p,
.cbdrm-feature-card p,
.cbdrm-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.cbdrm-overview-copy p:first-child {
    margin-top: 0;
}

.cbdrm-metrics {
    background: #173F33;
    color: #ffffff;
}

.cbdrm-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.cbdrm-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.cbdrm-metrics-grid strong {
    color: #C7B36A;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.cbdrm-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.cbdrm-section {
    padding: 96px 0;
}

.cbdrm-system,
.cbdrm-planning,
.cbdrm-structures {
    background: #F8FAF6;
}

.cbdrm-section-heading {
    max-width: 820px;
    margin-bottom: 42px;
}

.cbdrm-section-heading > p:not(.cbdrm-kicker) {
    max-width: 720px;
    margin: 16px 0 0;
}

.cbdrm-flow,
.cbdrm-action-grid,
.cbdrm-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.cbdrm-flow article,
.cbdrm-action-grid article,
.cbdrm-impact-grid article,
.cbdrm-role-grid article,
.cbdrm-actor-grid article {
    min-height: 100%;
    padding: 24px;
    border: 1px solid #E1E8DD;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(23, 63, 51, 0.06);
}

.cbdrm-flow article span,
.cbdrm-action-grid article span {
    display: inline-flex;
    margin-bottom: 16px;
    color: #0F8843;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cbdrm-flow h3,
.cbdrm-action-grid h3,
.cbdrm-impact-grid h3,
.cbdrm-role-grid h3,
.cbdrm-actor-grid h3 {
    margin: 0 0 10px;
    color: #173F33;
    font-size: 18px;
    line-height: 1.25;
}

.cbdrm-flow p,
.cbdrm-action-grid p,
.cbdrm-impact-grid p,
.cbdrm-role-grid p,
.cbdrm-actor-grid p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.65;
}

.cbdrm-split {
    display: grid;
    grid-template-columns: minmax(290px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: stretch;
}

.cbdrm-feature-card {
    padding: 36px;
    border-radius: 8px;
    background: #173F33;
    color: #ffffff;
}

.cbdrm-feature-card h2,
.cbdrm-feature-card p {
    color: #ffffff;
}

.cbdrm-feature-card p:not(.cbdrm-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.cbdrm-actor-grid,
.cbdrm-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.cbdrm-role-grid {
    grid-template-columns: repeat(4, 1fr);
}

.cbdrm-assessment,
.cbdrm-youth,
.cbdrm-mitigation,
.cbdrm-inclusion,
.cbdrm-impact {
    background: #ffffff;
}

.cbdrm-partner-stack {
    display: grid;
    gap: 14px;
}

.cbdrm-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #C7B36A;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(23, 63, 51, 0.07);
}

.cbdrm-youth .cbdrm-partner-stack div,
.cbdrm-structures .cbdrm-partner-stack div {
    background: #F9FBF7;
}

.cbdrm-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cbdrm-partner-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.cbdrm-inclusion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cbdrm-inclusion-list span {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid #DCE8D8;
    border-radius: 999px;
    background: #F8FBF6;
    color: #173F33;
    font-size: 14px;
    font-weight: 700;
}

.cbdrm-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(23, 63, 51, 0.96), rgba(45, 104, 68, 0.9)),
        url("../images/programs/crm-overview.jpg") center/cover;
    color: #ffffff;
}

.cbdrm-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.cbdrm-cta h2,
.cbdrm-cta p {
    color: #ffffff;
}

.cbdrm-cta p:not(.cbdrm-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.cbdrm-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .cbdrm-hero-grid,
    .cbdrm-overview-grid,
    .cbdrm-linkage-grid,
    .cbdrm-inclusion-grid,
    .cbdrm-split,
    .cbdrm-cta-grid {
        grid-template-columns: 1fr;
    }

    .cbdrm-risk-panel {
        min-height: auto;
    }

    .cbdrm-metrics-grid,
    .cbdrm-flow,
    .cbdrm-role-grid,
    .cbdrm-action-grid,
    .cbdrm-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cbdrm-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .cbdrm-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .cbdrm-hero-copy h1 {
        font-size: 40px;
    }

    .cbdrm-hero-copy > p:not(.cbdrm-kicker) {
        font-size: 16px;
    }

    .cbdrm-section,
    .cbdrm-overview,
    .cbdrm-cta {
        padding: 68px 0;
    }

    .cbdrm-metrics-grid,
    .cbdrm-flow,
    .cbdrm-role-grid,
    .cbdrm-action-grid,
    .cbdrm-impact-grid,
    .cbdrm-actor-grid {
        grid-template-columns: 1fr;
    }

    .cbdrm-metrics-grid {
        border-left: 0;
    }

    .cbdrm-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .cbdrm-risk-panel,
    .cbdrm-feature-card,
    .cbdrm-flow article,
    .cbdrm-action-grid article,
    .cbdrm-impact-grid article,
    .cbdrm-role-grid article,
    .cbdrm-actor-grid article {
        padding: 22px;
    }
}

@media (max-width: 1080px) {
    .dcom-hero-grid,
    .dcom-overview-grid,
    .dcom-linkage-grid,
    .dcom-inclusion-grid,
    .dcom-split,
    .dcom-cta-grid {
        grid-template-columns: 1fr;
    }

    .dcom-signal-panel {
        min-height: auto;
    }

    .dcom-metrics-grid,
    .dcom-flow,
    .dcom-role-grid,
    .dcom-action-grid,
    .dcom-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dcom-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .dcom-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .dcom-hero-copy h1 {
        font-size: 40px;
    }

    .dcom-hero-copy > p:not(.dcom-kicker) {
        font-size: 16px;
    }

    .dcom-section,
    .dcom-overview,
    .dcom-cta {
        padding: 68px 0;
    }

    .dcom-metrics-grid,
    .dcom-flow,
    .dcom-role-grid,
    .dcom-action-grid,
    .dcom-impact-grid,
    .dcom-actor-grid {
        grid-template-columns: 1fr;
    }

    .dcom-metrics-grid {
        border-left: 0;
    }

    .dcom-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .dcom-signal-panel,
    .dcom-feature-card,
    .dcom-flow article,
    .dcom-action-grid article,
    .dcom-impact-grid article,
    .dcom-role-grid article,
    .dcom-actor-grid article {
        padding: 22px;
    }
}

/* =========================================
   MODERN SITE FOOTER
   ========================================= */

.main-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 10%, rgba(15, 136, 67, 0.22), rgba(15, 136, 67, 0) 34%),
        linear-gradient(180deg, #0D2E20 0%, #071D15 100%);
    color: #ffffff;
}

.footer-shell {
    position: relative;
    padding: 72px 0 28px;
}

.footer-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
}

.footer-eyebrow {
    display: inline-flex;
    margin-bottom: 12px;
    color: #F2C94C;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-cta h2 {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
    letter-spacing: 0;
}

.footer-cta p {
    max-width: 680px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.75;
}

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.footer-donate {
    background: var(--color-emergency);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(217, 45, 76, 0.25);
}

.footer-volunteer {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, 0.65fr)) minmax(230px, 0.85fr);
    gap: 34px;
    padding-top: 58px;
    padding-bottom: 38px;
}

.footer-brand,
.footer-links,
.footer-contact {
    min-width: 0;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
}

.footer-logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px;
}

.footer-logo span {
    display: grid;
    line-height: 1.05;
}

.footer-logo strong {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    letter-spacing: 0;
}

.footer-logo small {
    color: rgba(255, 255, 255, 0.64);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-brand p {
    max-width: 390px;
    margin: 20px 0 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.75;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-socials a {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.footer-socials a:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-primary-deep);
}

.footer-socials svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.footer-links h3,
.footer-contact h3 {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-links,
.footer-contact {
    display: grid;
    align-content: start;
    gap: 10px;
}

.footer-links a,
.footer-contact a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    line-height: 1.45;
    transition: color 0.2s ease, transform 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.footer-contact {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.footer-contact-note {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    line-height: 1.55;
}

.footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
}

.footer-trig8-stamp {
    display: inline-flex;
    justify-self: center;
    opacity: 0.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-trig8-stamp:hover,
.footer-trig8-stamp:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

.footer-trig8-stamp:focus-visible {
    outline: 2px solid #F4DCA0;
    outline-offset: 4px;
    border-radius: 4px;
}

.footer-trig8-stamp svg {
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(201, 167, 70, 0.28));
}

.footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-self: end;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}

@media (max-width: 1180px) {
    .footer-grid {
        grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(170px, 1fr));
    }

    .footer-contact {
        grid-column: span 2;
    }
}

@media (max-width: 820px) {
    .footer-shell {
        padding-top: 52px;
    }

    .footer-cta,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-cta {
        padding: 26px;
    }

    .footer-cta-actions {
        justify-content: flex-start;
    }

    .footer-contact {
        grid-column: auto;
    }

    .footer-bottom {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }

    .footer-trig8-stamp,
    .footer-bottom-links {
        justify-self: auto;
    }
}

@media (max-width: 560px) {
    .footer-shell {
        padding: 42px 0 24px;
    }

    .footer-cta {
        padding: 22px;
    }

    .footer-cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .footer-grid {
        gap: 28px;
        padding-top: 42px;
    }

    .footer-socials a {
        width: 40px;
        height: 40px;
    }
}

/* =========================
   CAMPAIGN HUB MODEL
========================= */

.camp-hub {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.camp-hub-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* HUB VISUAL */
.camp-hub-visual {
    text-align: center;
    margin-bottom: 40px;
}

.hub-center {
    display: inline-block;
    padding: 20px 30px;
    background: #2B6CB0;
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hub-center span {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-top: 5px;
}

.hub-spokes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 600px;
    margin: auto;
}

.spoke {
    background: #ffffff;
    border: 1px solid #E3E8E4;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
}

/* GRID */
.camp-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.camp-hub-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-hub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-hub-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-hub-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.camp-hub-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   REGIONAL COORDINATION STRUCTURE
========================= */

.camp-regions {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.camp-regions-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.camp-regions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.camp-region-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-region-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-region-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-region-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* ROLE SECTION */
.camp-regions-role {
    margin-top: 40px;
    padding: 20px;
    background: #F7F9F8;
    border-left: 4px solid #2B6CB0;
}

.camp-regions-role h3 {
    margin-bottom: 10px;
    color: #1F2937;
}

/* NOTE */
.camp-regions-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   VOLUNTEER NETWORK SYSTEM
========================= */

.camp-volunteers {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.camp-volunteers-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.camp-volunteers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.camp-volunteer-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-volunteer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-volunteer-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-volunteer-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.camp-volunteers-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.camp-volunteers-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   CAMPAIGN ACTIVITIES & IMPLEMENTATION
========================= */

.camp-activities {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.camp-activities-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.camp-activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.camp-activity-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-activity-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-activity-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* CHANNELS */
.camp-activities-channels {
    margin-top: 40px;
    text-align: center;
}

.channel-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.channel {
    background: #EAF2F6;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* FLOW */
.camp-activities-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.camp-activities-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   NETWORKING & STAKEHOLDER ENGAGEMENT
========================= */

.camp-network {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.camp-network-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.camp-network-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.camp-network-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-network-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-network-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-network-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NETWORK MODEL */
.camp-network-model {
    text-align: center;
    margin-top: 50px;
}

.network-center {
    display: inline-block;
    padding: 20px 30px;
    background: #2B6CB0;
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
}

.network-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.network-node {
    background: #ffffff;
    border: 1px solid #E3E8E4;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 13px;
}

/* FLOW */
.camp-network-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.camp-network-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   CROSS-REGIONAL LEARNING SYSTEM
========================= */

.camp-learning {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.camp-learning-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.camp-learning-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.camp-learning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.camp-learning-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-learning-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-learning-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-learning-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.camp-learning-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT & NATIONAL SCALING
========================= */

.camp-impact {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.camp-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.camp-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.camp-impact-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.camp-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.camp-impact-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.camp-impact-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.camp-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   FINAL CALL TO ACTION
========================= */

.camp-cta {
    padding: 90px 0;
    background: #ffffff;
}

/* INTRO */
.camp-cta-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.camp-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.camp-cta-card {
    background: #F7F9F8;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    text-align: center;
    transition: 0.3s ease;
}

.camp-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.camp-cta-card h3 {
    color: #2B6CB0;
    margin-bottom: 10px;
}

.camp-cta-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* NOTE */
.camp-cta-note {
    margin-top: 50px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}
/* =========================
   CAMPAIGNS PAGE
========================= */

.campaigns-page {
    overflow: hidden;
    background: #ffffff;
}

.camp-hero {
    position: relative;
    overflow: hidden;
    padding: 108px 0 82px;
    background:
        linear-gradient(112deg, rgba(7, 92, 49, 0.97) 0%, rgba(7, 92, 49, 0.88) 47%, rgba(15, 136, 67, 0.36) 100%),
        url("../images/banners/regional.jpg") center/cover no-repeat;
}

.camp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: 0.23;
    pointer-events: none;
}

.camp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.74fr);
    gap: 54px;
    align-items: center;
}

.camp-hero-copy .section-kicker,
.camp-cta .section-kicker {
    color: rgba(255, 255, 255, 0.76);
}

.camp-hero h1 {
    max-width: 780px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
}

.camp-hero-copy p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.78;
}

.camp-hero-copy .camp-hero-lede {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.58;
}

.camp-hero-actions,
.camp-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.camp-light-btn {
    background: #ffffff;
    color: var(--color-primary-deep);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.camp-light-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.camp-hero-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.camp-panel-image {
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 92, 49, 0.9)),
        url("../images/banners/about-yadi.png") center/cover no-repeat;
}

.camp-panel-image span {
    max-width: 260px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.camp-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.camp-panel-stats article {
    min-height: 116px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.camp-panel-stats strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.camp-panel-stats span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.camp-overview {
    position: relative;
    z-index: 2;
    padding: 0 0 78px;
    margin-top: -34px;
    background: linear-gradient(180deg, transparent 0, #ffffff 34px);
}

.camp-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.camp-overview-grid article,
.camp-card-grid article,
.camp-feature-row,
.camp-impact-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(227, 232, 228, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 54px rgba(7, 92, 49, 0.08);
}

.camp-overview-grid article {
    min-height: 210px;
    padding: 26px;
    border-radius: 18px;
}

.camp-overview-grid span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
}

.camp-overview-grid h3,
.camp-card-grid h3,
.camp-feature-row h3 {
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.28;
}

.camp-section {
    position: relative;
    padding: 92px 0;
}

.camp-model,
.camp-volunteers,
.camp-learning {
    background:
        radial-gradient(circle at 8% 10%, rgba(15, 136, 67, 0.1), transparent 25%),
        linear-gradient(180deg, var(--color-bg), #ffffff 54%, var(--color-bg));
}

.camp-regions,
.camp-network {
    background: #ffffff;
}

.camp-section-heading {
    max-width: 820px;
    margin-bottom: 34px;
}

.camp-section-heading h2 {
    margin-bottom: 14px;
    color: var(--color-primary-deep);
}

.camp-section-heading p:not(.section-kicker) {
    max-width: 760px;
    font-size: 17px;
}

.camp-model-grid,
.camp-network-grid,
.camp-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
}

.camp-hub-visual {
    display: grid;
    gap: 18px;
    padding: 24px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.hub-center {
    display: grid;
    place-items: center;
    min-height: 210px;
    padding: 34px;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: #ffffff;
}

.hub-center strong {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    line-height: 1.18;
}

.hub-center span {
    max-width: 280px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 700;
}

.hub-spokes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.hub-spokes span,
.camp-channel-strip span,
.camp-process span,
.camp-learning-flow span,
.network-nodes span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.camp-model-copy {
    display: grid;
    gap: 16px;
}

.camp-note {
    padding: 18px 20px;
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: #ffffff;
    color: var(--color-primary-deep);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.camp-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.camp-card-grid article {
    min-height: 188px;
    padding: 24px;
    border-radius: 18px;
}

.camp-card-grid article::after,
.camp-overview-grid article::after,
.camp-impact-grid article::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -36px;
    top: -36px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.camp-card-grid h3,
.camp-card-grid p,
.camp-overview-grid h3,
.camp-overview-grid p,
.camp-impact-grid strong,
.camp-impact-grid span {
    position: relative;
    z-index: 1;
}

.camp-feature-row {
    display: grid;
    grid-template-columns: minmax(250px, 0.75fr) minmax(0, 1.25fr);
    gap: 26px;
    align-items: center;
    margin-top: 18px;
    padding: 28px;
    border-radius: 20px;
}

.camp-feature-row span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.camp-split {
    align-items: start;
}

.camp-split .camp-section-heading {
    position: sticky;
    top: 118px;
}

.camp-volunteer-grid {
    grid-template-columns: repeat(2, 1fr);
}

.camp-volunteer-grid article:last-child,
.camp-learning-grid article:last-child {
    grid-column: span 2;
}

.camp-process,
.camp-learning-flow {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.camp-process {
    grid-template-columns: repeat(4, 1fr);
}

.camp-process span,
.camp-learning-flow span {
    position: relative;
    min-height: 58px;
    background: #ffffff;
    border: 1px solid rgba(15, 136, 67, 0.14);
    box-shadow: 0 14px 32px rgba(7, 92, 49, 0.06);
}

.camp-process span:not(:last-child)::after,
.camp-learning-flow span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.camp-channel-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg);
}

.camp-channel-strip span {
    flex: 1 1 180px;
    background: #ffffff;
}

.camp-network-map {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 26px;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.96), rgba(15, 136, 67, 0.88)),
        var(--color-primary-deep);
    box-shadow: 0 26px 68px rgba(7, 92, 49, 0.18);
}

.network-center {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.network-nodes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.network-nodes span {
    background: rgba(255, 255, 255, 0.94);
}

.camp-network .camp-card-grid {
    margin-top: 28px;
}

.camp-learning-flow {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 24px;
}

.camp-impact {
    background: #ffffff;
}

.camp-impact-box {
    padding: 44px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.97), rgba(15, 136, 67, 0.9)),
        var(--color-primary-deep);
    box-shadow: 0 32px 82px rgba(7, 92, 49, 0.2);
}

.camp-impact-box .camp-section-heading h2,
.camp-impact-box .camp-section-heading p,
.camp-impact-box .section-kicker {
    color: #ffffff;
}

.camp-impact-box .camp-section-heading p {
    color: rgba(255, 255, 255, 0.76);
}

.camp-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.camp-impact-grid article {
    min-height: 160px;
    padding: 22px;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.camp-impact-grid strong {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    line-height: 1.25;
}

.camp-impact-grid span {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.camp-impact-process span {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: none;
}

.camp-impact-process span:not(:last-child)::after {
    background: var(--color-primary);
    border-color: #ffffff;
}

.camp-cta {
    padding: 92px 0;
    background:
        radial-gradient(circle at 88% 14%, rgba(242, 140, 40, 0.16), transparent 28%),
        linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
}

.camp-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.camp-cta h2 {
    max-width: 760px;
    margin-bottom: 12px;
    color: #ffffff;
}

.camp-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.camp-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 980px) {
    .camp-hero-grid,
    .camp-model-grid,
    .camp-network-grid,
    .camp-split,
    .camp-cta-box {
        grid-template-columns: 1fr;
    }

    .camp-split .camp-section-heading {
        position: static;
    }

    .camp-card-grid,
    .camp-overview-grid,
    .camp-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .camp-learning-flow {
        grid-template-columns: 1fr;
    }

    .camp-learning-flow span:not(:last-child)::after {
        display: none;
    }

    .camp-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .camp-hero {
        padding: 78px 0 58px;
    }

    .camp-hero-grid {
        gap: 28px;
    }

    .camp-hero-copy .camp-hero-lede {
        font-size: 18px;
    }

    .camp-hero-panel {
        border-radius: 20px;
    }

    .camp-panel-image {
        min-height: 230px;
        padding: 20px;
    }

    .camp-panel-image span {
        font-size: 23px;
    }

    .camp-panel-stats,
    .camp-card-grid,
    .camp-overview-grid,
    .camp-impact-grid,
    .camp-volunteer-grid,
    .camp-process,
    .hub-spokes,
    .network-nodes,
    .camp-feature-row {
        grid-template-columns: 1fr;
    }

    .camp-volunteer-grid article:last-child,
    .camp-learning-grid article:last-child {
        grid-column: auto;
    }

    .camp-section {
        padding: 64px 0;
    }

    .camp-overview {
        padding-bottom: 56px;
    }

    .camp-overview-grid article,
    .camp-card-grid article {
        min-height: auto;
    }

    .camp-process span:not(:last-child)::after {
        display: none;
    }

    .camp-impact-box {
        padding: 24px;
        border-radius: 20px;
    }

    .camp-cta {
        padding: 68px 0;
    }
}

/* =========================
   YOUTH MOBILISATION PAGE
========================= */

.youth-page {
    overflow: hidden;
    background: #ffffff;
}

.youth-hero {
    position: relative;
    overflow: hidden;
    padding: 108px 0 82px;
    background:
        linear-gradient(112deg, rgba(7, 92, 49, 0.97) 0%, rgba(7, 92, 49, 0.86) 46%, rgba(242, 140, 40, 0.3) 100%),
        url("../images/banners/about-yadi.png") center/cover no-repeat;
}

.youth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: 0.23;
    pointer-events: none;
}

.youth-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.74fr);
    gap: 54px;
    align-items: center;
}

.youth-hero-copy .section-kicker,
.youth-cta .section-kicker {
    color: rgba(255, 255, 255, 0.76);
}

.youth-hero h1 {
    max-width: 780px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
}

.youth-hero-copy p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.78;
}

.youth-hero-copy .youth-hero-lede {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.58;
}

.youth-hero-actions,
.youth-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.youth-light-btn {
    background: #ffffff;
    color: var(--color-primary-deep);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.youth-light-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.youth-hero-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.youth-panel-image {
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 92, 49, 0.9)),
        url("../images/banners/regional.jpg") center/cover no-repeat;
}

.youth-panel-image span {
    max-width: 280px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.youth-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.youth-panel-stats article {
    min-height: 116px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.youth-panel-stats strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.youth-panel-stats span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.youth-overview {
    position: relative;
    z-index: 2;
    padding: 0 0 78px;
    margin-top: -34px;
    background: linear-gradient(180deg, transparent 0, #ffffff 34px);
}

.youth-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.youth-overview-grid article,
.youth-card-grid article,
.youth-impact-grid article {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(227, 232, 228, 0.95);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 54px rgba(7, 92, 49, 0.08);
}

.youth-overview-grid article {
    min-height: 210px;
    padding: 26px;
    border-radius: 18px;
}

.youth-overview-grid span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
}

.youth-section {
    position: relative;
    padding: 92px 0;
}

.youth-structure,
.youth-training,
.youth-bottomup,
.youth-sustainability {
    background:
        radial-gradient(circle at 8% 10%, rgba(15, 136, 67, 0.1), transparent 25%),
        linear-gradient(180deg, var(--color-bg), #ffffff 54%, var(--color-bg));
}

.youth-recruitment,
.youth-implementers,
.youth-digital {
    background: #ffffff;
}

.youth-section-heading {
    max-width: 820px;
    margin-bottom: 34px;
}

.youth-section-heading h2 {
    margin-bottom: 14px;
    color: var(--color-primary-deep);
}

.youth-section-heading p:not(.section-kicker) {
    max-width: 760px;
    font-size: 17px;
}

.youth-structure-grid,
.youth-model-grid,
.youth-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
}

.youth-ladder,
.youth-bottomup-panel {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.youth-ladder span,
.youth-bottomup-panel span {
    position: relative;
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 14px 18px 14px 58px;
    border-radius: 14px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-weight: 900;
}

.youth-ladder span::before,
.youth-bottomup-panel span::before {
    content: "";
    position: absolute;
    left: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: inset 0 0 0 7px #ffffff;
}

.youth-ladder span:first-child,
.youth-bottomup-panel span:first-child {
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: #ffffff;
}

.youth-structure-copy {
    display: grid;
    gap: 16px;
}

.youth-note {
    padding: 18px 20px;
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: #ffffff;
    color: var(--color-primary-deep);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.youth-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.youth-card-grid article {
    min-height: 188px;
    padding: 24px;
    border-radius: 18px;
}

.youth-card-grid article::after,
.youth-overview-grid article::after,
.youth-impact-grid article::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -36px;
    top: -36px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.youth-overview-grid h3,
.youth-card-grid h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.28;
}

.youth-overview-grid p,
.youth-card-grid p {
    position: relative;
    z-index: 1;
}

.youth-role-grid,
.youth-recruitment-grid {
    margin-top: 24px;
}

.youth-recruitment-grid article:last-child {
    grid-column: span 2;
}

.youth-split {
    align-items: start;
}

.youth-split .youth-section-heading {
    position: sticky;
    top: 118px;
}

.youth-training-grid,
.youth-implementer-grid,
.youth-bottomup-grid,
.youth-digital-grid,
.youth-sustainability-grid {
    grid-template-columns: repeat(2, 1fr);
}

.youth-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.youth-sustainability-process {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 24px;
}

.youth-process span,
.youth-channel-strip span {
    position: relative;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--color-primary-deep);
    box-shadow: 0 14px 32px rgba(7, 92, 49, 0.06);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.youth-process span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.youth-channel-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-bg);
}

.youth-channel-strip span {
    flex: 1 1 140px;
    min-height: 46px;
    background: #ffffff;
}

.youth-impact {
    background: #ffffff;
}

.youth-impact-box {
    padding: 44px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.97), rgba(15, 136, 67, 0.9)),
        var(--color-primary-deep);
    box-shadow: 0 32px 82px rgba(7, 92, 49, 0.2);
}

.youth-impact-box .youth-section-heading h2,
.youth-impact-box .youth-section-heading p,
.youth-impact-box .section-kicker {
    color: #ffffff;
}

.youth-impact-box .youth-section-heading p {
    color: rgba(255, 255, 255, 0.76);
}

.youth-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.youth-impact-grid article {
    min-height: 160px;
    padding: 22px;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.youth-impact-grid strong,
.youth-impact-grid span {
    position: relative;
    z-index: 1;
}

.youth-impact-grid strong {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    line-height: 1.25;
}

.youth-impact-grid span {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.youth-impact-process span {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: none;
}

.youth-impact-process span:not(:last-child)::after {
    background: var(--color-primary);
    border-color: #ffffff;
}

.youth-cta {
    padding: 92px 0;
    background:
        radial-gradient(circle at 88% 14%, rgba(242, 140, 40, 0.16), transparent 28%),
        linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
}

.youth-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.youth-cta h2 {
    max-width: 760px;
    margin-bottom: 12px;
    color: #ffffff;
}

.youth-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.youth-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 980px) {
    .youth-hero-grid,
    .youth-structure-grid,
    .youth-model-grid,
    .youth-split,
    .youth-cta-box {
        grid-template-columns: 1fr;
    }

    .youth-split .youth-section-heading {
        position: static;
    }

    .youth-card-grid,
    .youth-overview-grid,
    .youth-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .youth-sustainability-process {
        grid-template-columns: 1fr;
    }

    .youth-sustainability-process span:not(:last-child)::after {
        display: none;
    }

    .youth-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .youth-hero {
        padding: 78px 0 58px;
    }

    .youth-hero-grid {
        gap: 28px;
    }

    .youth-hero-copy .youth-hero-lede {
        font-size: 18px;
    }

    .youth-hero-panel {
        border-radius: 20px;
    }

    .youth-panel-image {
        min-height: 230px;
        padding: 20px;
    }

    .youth-panel-image span {
        font-size: 23px;
    }

    .youth-panel-stats,
    .youth-card-grid,
    .youth-overview-grid,
    .youth-impact-grid,
    .youth-training-grid,
    .youth-implementer-grid,
    .youth-bottomup-grid,
    .youth-digital-grid,
    .youth-sustainability-grid,
    .youth-process {
        grid-template-columns: 1fr;
    }

    .youth-recruitment-grid article:last-child {
        grid-column: auto;
    }

    .youth-section {
        padding: 64px 0;
    }

    .youth-overview {
        padding-bottom: 56px;
    }

    .youth-overview-grid article,
    .youth-card-grid article {
        min-height: auto;
    }

    .youth-process span:not(:last-child)::after {
        display: none;
    }

    .youth-impact-box {
        padding: 24px;
        border-radius: 20px;
    }

    .youth-cta {
        padding: 68px 0;
    }
}

/* =========================
   YOUTH MOBILISATION HERO
========================= */

.youth-hero {
    height: 70vh;
    background: url("../../assets/images/youth/youth-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.youth-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 35, 0.65);
}

.youth-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.youth-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.youth-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.youth-hero-text .hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.youth-hero-text .hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.youth-hero-text .hero-note {
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   YOUTH MOBILISATION STRUCTURE
========================= */

.youth-structure {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-structure-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.youth-structure-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.youth-structure-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.youth-structure-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-structure-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-structure-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
    font-size: 15px;
}

.youth-structure-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.youth-structure-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   RECRUITMENT & INCLUSION MODEL
========================= */

.youth-recruitment {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.youth-recruitment-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-recruitment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.youth-recruitment-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-recruitment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-recruitment-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-recruitment-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.youth-recruitment-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* FLOW */
.youth-recruitment-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}
/* =========================
   CAPACITY BUILDING & TRAINING
========================= */

.youth-training {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-training-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.youth-training-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-training-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-training-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-training-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.youth-training-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.youth-training-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   YOUTH AS CAMPAIGN IMPLEMENTERS
========================= */

.youth-implementers {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.youth-implementers-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-implementers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.youth-implementer-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-implementer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-implementer-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-implementer-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.youth-implementers-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.youth-implementers-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   BOTTOM-UP CAMPAIGN MODEL
========================= */

.youth-bottomup {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-bottomup-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.youth-bottomup-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
    text-align: center;
    min-width: 250px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.youth-bottomup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.youth-bottomup-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-bottomup-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-bottomup-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-bottomup-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.youth-bottomup-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   DIGITAL & CREATIVE MOBILISATION
========================= */

.youth-digital {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-digital-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-digital-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.youth-digital-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-digital-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-digital-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-digital-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* PLATFORMS */
.youth-digital-platforms {
    text-align: center;
    margin-top: 40px;
}

.platform-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.platform {
    background: #EAF2F6;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* FLOW */
.youth-digital-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.youth-digital-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   SUSTAINABILITY SYSTEM
========================= */

.youth-sustainability {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.youth-sustainability-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.youth-sustainability-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.youth-sustainability-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.youth-sustainability-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-sustainability-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-sustainability-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-sustainability-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.youth-sustainability-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   IMPACT + FINAL CTA
========================= */

.youth-impact {
    padding: 90px 0;
    background: #ffffff;
}

/* INTRO */
.youth-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.youth-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.youth-impact-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-impact-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.youth-impact-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* CTA */
.youth-impact-cta {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: #F7F9F8;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.youth-impact-cta h3 {
    color: #1F2937;
    margin-bottom: 10px;
}

.youth-impact-cta p {
    margin-bottom: 20px;
    color: #4B5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Final youth mobilisation refresh overrides.
   Kept after the legacy youth rules so the rebuilt page controls the layout. */
.youth-page .youth-hero {
    position: relative;
    overflow: hidden;
    min-height: auto;
    padding: 108px 0 112px;
    background:
        linear-gradient(112deg, rgba(7, 92, 49, 0.97) 0%, rgba(7, 92, 49, 0.86) 46%, rgba(242, 140, 40, 0.3) 100%),
        url("../images/banners/about-yadi.png") center/cover no-repeat;
}

.youth-page .youth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: 0.23;
    pointer-events: none;
}

.youth-page .youth-hero-grid,
.youth-page .youth-structure-grid,
.youth-page .youth-model-grid,
.youth-page .youth-split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
}

.youth-page .youth-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.74fr);
    gap: 54px;
    align-items: center;
}

.youth-page .youth-hero h1 {
    max-width: 780px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
}

.youth-page .youth-hero-copy p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.78;
}

.youth-page .youth-hero-copy .youth-hero-lede {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.58;
}

.youth-page .youth-hero-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
    align-self: center;
}

.youth-page .youth-overview {
    position: relative;
    z-index: 2;
    padding: 64px 0 78px;
    margin-top: 0;
    background: #ffffff;
}

.youth-page .youth-overview-grid,
.youth-page .youth-card-grid,
.youth-page .youth-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.youth-page .youth-impact-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.youth-page .youth-section {
    position: relative;
    padding: 92px 0;
}

.youth-page .youth-structure,
.youth-page .youth-training,
.youth-page .youth-bottomup,
.youth-page .youth-sustainability {
    background:
        radial-gradient(circle at 8% 10%, rgba(15, 136, 67, 0.1), transparent 25%),
        linear-gradient(180deg, var(--color-bg), #ffffff 54%, var(--color-bg));
}

.youth-page .youth-recruitment,
.youth-page .youth-implementers,
.youth-page .youth-digital,
.youth-page .youth-impact {
    background: #ffffff;
}

.youth-page .youth-section-heading {
    max-width: 820px;
    margin-bottom: 34px;
}

.youth-page .youth-section-heading h2 {
    margin-bottom: 14px;
    color: var(--color-primary-deep);
}

.youth-page .youth-card-grid article,
.youth-page .youth-overview-grid article,
.youth-page .youth-impact-grid article {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 24px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 54px rgba(7, 92, 49, 0.08);
}

.youth-page .youth-training-grid,
.youth-page .youth-implementer-grid,
.youth-page .youth-bottomup-grid,
.youth-page .youth-digital-grid,
.youth-page .youth-sustainability-grid {
    grid-template-columns: repeat(2, 1fr);
}

.youth-page .youth-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.youth-page .youth-sustainability-process {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 24px;
}

.youth-page .youth-impact-box {
    padding: 44px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(7, 92, 49, 0.97), rgba(15, 136, 67, 0.9)),
        var(--color-primary-deep);
    box-shadow: 0 32px 82px rgba(7, 92, 49, 0.2);
}

.youth-page .youth-impact-box .youth-section-heading h2,
.youth-page .youth-impact-box .youth-section-heading p,
.youth-page .youth-impact-box .section-kicker {
    color: #ffffff;
}

.youth-page .youth-impact-process span {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: none;
}

.youth-page .youth-cta {
    padding: 92px 0;
    background:
        radial-gradient(circle at 88% 14%, rgba(242, 140, 40, 0.16), transparent 28%),
        linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
}

.youth-page .youth-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.youth-page .youth-cta h2,
.youth-page .youth-cta .section-kicker {
    color: #ffffff;
}

.youth-page .youth-cta p {
    color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 980px) {
    .youth-page .youth-hero-grid,
    .youth-page .youth-structure-grid,
    .youth-page .youth-model-grid,
    .youth-page .youth-split,
    .youth-page .youth-cta-box {
        grid-template-columns: 1fr;
    }

    .youth-page .youth-card-grid,
    .youth-page .youth-overview-grid,
    .youth-page .youth-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .youth-page .youth-hero {
        padding: 78px 0 74px;
    }

    .youth-page .youth-panel-stats,
    .youth-page .youth-card-grid,
    .youth-page .youth-overview-grid,
    .youth-page .youth-impact-grid,
    .youth-page .youth-training-grid,
    .youth-page .youth-implementer-grid,
    .youth-page .youth-bottomup-grid,
    .youth-page .youth-digital-grid,
    .youth-page .youth-sustainability-grid,
    .youth-page .youth-process {
        grid-template-columns: 1fr;
    }

    .youth-page .youth-section {
        padding: 64px 0;
    }

    .youth-page .youth-overview {
        padding-top: 44px;
    }

.youth-page .youth-impact-box {
        padding: 24px;
        border-radius: 20px;
    }
}

/* =========================
   COMMUNITY MOBILISATION PAGE
========================= */

/* ADVOCACY PAGE OVERRIDES */
.advocacy-page .community-hero.advocacy-hero {
    /* slightly taller hero with a policy-themed image */
    padding: 128px 0 140px;
    background:
        linear-gradient(112deg, rgba(4,59,36,0.9) 0%, rgba(7,92,49,0.78) 46%, rgba(15,136,67,0.14) 100%),
        url("../images/hero/hero4.png") center/cover no-repeat;
}

.advocacy-page .community-hero.advocacy-hero::before {
    opacity: 0.28;
}

.advocacy-page .community-hero.advocacy-hero .community-hero-copy .section-kicker {
    color: rgba(255,255,255,0.9);
}

.advocacy-page .community-panel-image {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(7,92,49,0.86)),
        url("../images/banners/natural-disaster.jpg") center/cover no-repeat;
}

.advocacy-page .community-panel-stats article {
    min-height: 130px;
    padding: 20px;
    border-radius: 14px;
}

.advocacy-page .community-panel-stats strong {
    font-size: 38px;
}



.community-page {
    overflow: hidden;
    background: #ffffff;
}

.community-page .community-hero {
    position: relative;
    overflow: hidden;
    padding: 108px 0 112px;
    background:
        linear-gradient(112deg, rgba(7, 92, 49, 0.97) 0%, rgba(7, 92, 49, 0.86) 46%, rgba(242, 140, 40, 0.28) 100%),
        url("../images/banners/regional.jpg") center/cover no-repeat;
}

.community-page .community-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: 0.23;
    pointer-events: none;
}

.community-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.74fr);
    gap: 54px;
    align-items: center;
}

.community-hero-copy .section-kicker,
.community-cta .section-kicker {
    color: rgba(255, 255, 255, 0.76);
}

.community-hero h1 {
    max-width: 820px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
}

.community-hero-copy p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.78;
}

.community-hero-copy .community-hero-lede,
.community-hero-lede {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.58;
}

.community-hero-lede p {
    margin-bottom: 18px;
}

.community-hero-actions,
.community-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.community-light-btn {
    background: #ffffff;
    color: var(--color-primary-deep);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.community-light-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.community-hero-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.community-panel-image {
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 92, 49, 0.9)),
        url("../images/banners/about-yadi.png") center/cover no-repeat;
}

.community-panel-image span {
    max-width: 280px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.community-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.community-panel-stats article {
    min-height: 116px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.community-panel-stats strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.community-panel-stats span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.community-overview {
    position: relative;
    z-index: 2;
    padding: 64px 0 94px;
    background: #ffffff;
}

.advocacy-page .community-section {
    padding: 86px 0;
}

.advocacy-page .community-section-heading {
    margin-bottom: 42px;
}

.advocacy-page .community-process {
    margin-top: 32px;
}

.advocacy-page .community-cta {
    padding: 96px 0;
}

.advocacy-page .community-cta-box {
    gap: 26px;
}

.community-overview-grid,
.community-card-grid,
.community-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.community-overview-grid article,
.community-card-grid article,
.community-impact-grid article {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 24px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 54px rgba(7, 92, 49, 0.08);
}

.advocacy-page .community-card-grid article {
    min-height: 220px;
}

.advocacy-page .community-card-grid article h3 {
    margin-bottom: 12px;
}

.advocacy-page .community-note {
    max-width: 760px;
}

.community-overview-grid article {
    min-height: 210px;
    padding: 26px;
}

.community-overview-grid span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
}

.community-card-grid article::after,
.community-overview-grid article::after,
.community-impact-grid article::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -36px;
    top: -36px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.community-overview-grid h3,
.community-card-grid h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.28;
}

.community-overview-grid p,
.community-card-grid p {
    position: relative;
    z-index: 1;
}

.community-section {
    position: relative;
    padding: 92px 0;
}

.community-philosophy,
.community-implementation,
.community-partners,
.community-feedback {
    background:
        radial-gradient(circle at 8% 10%, rgba(15, 136, 67, 0.1), transparent 25%),
        linear-gradient(180deg, var(--color-bg), #ffffff 54%, var(--color-bg));
}

.community-entry,
.community-leadership,
.community-activities,
.community-impact {
    background: #ffffff;
}

.community-section-heading {
    max-width: 820px;
    margin-bottom: 34px;
}

.community-section-heading h2 {
    margin-bottom: 14px;
    color: var(--color-primary-deep);
}

.community-section-heading p:not(.section-kicker) {
    max-width: 760px;
    font-size: 17px;
}

.community-model-grid,
.community-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
}

.community-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.community-compare-grid article {
    padding: 28px;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.community-compare-grid article.preferred {
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: #ffffff;
}

.community-compare-grid span {
    display: block;
    margin-bottom: 16px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.community-compare-grid .preferred span {
    color: #ffffff;
}

.community-compare-grid ul {
    display: grid;
    gap: 10px;
    padding-left: 18px;
    color: var(--color-muted);
}

.community-compare-grid .preferred ul {
    color: rgba(255, 255, 255, 0.84);
}

.community-principles,
.community-channel-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: #ffffff;
}

.community-principles span,
.community-ladder span,
.community-network-panel span,
.community-process span {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.community-principles span {
    flex: 1 1 220px;
}

.community-ladder {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.community-ladder span {
    justify-content: flex-start;
    min-height: 64px;
    padding-left: 22px;
}

.community-ladder span:first-child {
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: #ffffff;
}

.community-note {
    margin-top: 18px;
    padding: 18px 20px;
    border-left: 4px solid var(--color-warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: #ffffff;
    color: var(--color-primary-deep);
    font-weight: 900;
    box-shadow: var(--shadow-soft);
}

.community-split {
    align-items: start;
}

.community-split .community-section-heading {
    position: sticky;
    top: 118px;
}

.community-entry-grid,
.community-implementation-grid,
.community-partners-grid,
.community-feedback-grid {
    grid-template-columns: repeat(2, 1fr);
}

.community-leadership-grid article:last-child,
.community-activities-grid article:last-child {
    grid-column: span 2;
}

.community-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.community-feedback-process {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 24px;
}

.community-process span {
    position: relative;
    min-height: 58px;
    background: #ffffff;
    border: 1px solid rgba(15, 136, 67, 0.14);
    box-shadow: 0 14px 32px rgba(7, 92, 49, 0.06);
}

.community-process span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.community-network-panel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(7, 92, 49, 0.96), rgba(15, 136, 67, 0.88));
    box-shadow: 0 26px 68px rgba(7, 92, 49, 0.18);
}

.community-network-panel div {
    grid-column: 1 / -1;
    min-height: 160px;
    display: grid;
    place-items: center;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.community-network-panel span {
    background: rgba(255, 255, 255, 0.94);
}

.community-impact-box {
    padding: 44px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(7, 92, 49, 0.97), rgba(15, 136, 67, 0.9));
    box-shadow: 0 32px 82px rgba(7, 92, 49, 0.2);
}

.community-impact-box .community-section-heading h2,
.community-impact-box .community-section-heading p,
.community-impact-box .section-kicker {
    color: #ffffff;
}

.community-impact-box .community-section-heading p {
    color: rgba(255, 255, 255, 0.76);
}

.community-impact-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.community-impact-grid article {
    min-height: 160px;
    padding: 22px;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.community-impact-grid strong,
.community-impact-grid span {
    position: relative;
    z-index: 1;
}

.community-impact-grid strong {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    line-height: 1.25;
}

.community-impact-grid span {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.community-impact-process span {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: none;
}

.community-impact-process span:not(:last-child)::after {
    background: var(--color-primary);
    border-color: #ffffff;
}

.community-cta {
    padding: 92px 0;
    background:
        radial-gradient(circle at 88% 14%, rgba(242, 140, 40, 0.16), transparent 28%),
        linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
}

.community-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.community-cta h2 {
    max-width: 760px;
    margin-bottom: 12px;
    color: #ffffff;
}

.community-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.community-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 980px) {
    .community-hero-grid,
    .community-model-grid,
    .community-split,
    .community-cta-box,
    .community-compare-grid {
        grid-template-columns: 1fr;
    }

    .community-split .community-section-heading {
        position: static;
    }

    .community-card-grid,
    .community-overview-grid,
    .community-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .community-feedback-process {
        grid-template-columns: 1fr;
    }

    .community-feedback-process span:not(:last-child)::after {
        display: none;
    }

    .community-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .community-page .community-hero {
        padding: 78px 0 74px;
    }

    .community-hero-grid {
        gap: 28px;
    }

    .community-hero-copy .community-hero-lede {
        font-size: 18px;
    }

    .community-hero-panel {
        border-radius: 20px;
    }

    .community-panel-image {
        min-height: 230px;
        padding: 20px;
    }

    .community-panel-image span {
        font-size: 23px;
    }

    .community-panel-stats,
    .community-card-grid,
    .community-overview-grid,
    .community-impact-grid,
    .community-entry-grid,
    .community-implementation-grid,
    .community-partners-grid,
    .community-feedback-grid,
    .community-process,
    .community-network-panel {
        grid-template-columns: 1fr;
    }

    .community-leadership-grid article:last-child,
    .community-activities-grid article:last-child {
        grid-column: auto;
    }

    .community-section {
        padding: 64px 0;
    }

    .community-overview {
        padding: 44px 0 56px;
    }

    .community-overview-grid article,
    .community-card-grid article {
        min-height: auto;
    }

    .community-process span:not(:last-child)::after {
        display: none;
    }

    .community-impact-box {
        padding: 24px;
        border-radius: 20px;
    }

    .community-cta {
        padding: 68px 0;
    }
}

/* =========================
   RESEARCH PAGE
========================= */

.research-page {
    overflow: hidden;
    background: #ffffff;
}

.research-page .research-hero {
    position: relative;
    overflow: hidden;
    padding: 108px 0 112px;
    background:
        linear-gradient(112deg, rgba(7, 92, 49, 0.97) 0%, rgba(7, 92, 49, 0.86) 46%, rgba(242, 140, 40, 0.28) 100%),
        url("../images/banners/about-yadi.png") center/cover no-repeat;
}

.research-page .research-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 84px 84px;
    opacity: 0.23;
    pointer-events: none;
}

.research-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.74fr);
    gap: 54px;
    align-items: center;
}

.research-hero-copy .section-kicker,
.research-cta .section-kicker {
    color: rgba(255, 255, 255, 0.76);
}

.research-hero h1 {
    max-width: 820px;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: clamp(42px, 5.4vw, 72px);
    line-height: 1.02;
}

.research-hero-copy p {
    max-width: 700px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    line-height: 1.78;
}

.research-hero-copy .research-hero-lede {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.58;
}

.research-hero-actions,
.research-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 30px;
}

.research-light-btn {
    background: #ffffff;
    color: var(--color-primary-deep);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.research-light-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.research-hero-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.13);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.research-panel-image {
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 26px;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 92, 49, 0.9)),
        url("../images/banners/regional.jpg") center/cover no-repeat;
}

.research-panel-image span {
    max-width: 280px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.research-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.research-panel-stats article {
    min-height: 116px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.research-panel-stats strong {
    display: block;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 34px;
    line-height: 1;
}

.research-panel-stats span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.research-overview {
    position: relative;
    z-index: 2;
    padding: 64px 0 78px;
    background: #ffffff;
}

.research-overview-grid,
.research-card-grid,
.research-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.research-overview-grid article,
.research-card-grid article,
.research-impact-grid article {
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 24px;
    border: 1px solid rgba(227, 232, 228, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 54px rgba(7, 92, 49, 0.08);
}

.research-overview-grid article {
    min-height: 210px;
    padding: 26px;
}

.research-overview-grid span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-size: 13px;
    font-weight: 900;
}

.research-card-grid article::after,
.research-overview-grid article::after,
.research-impact-grid article::after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    right: -36px;
    top: -36px;
    border-radius: 50%;
    background: rgba(15, 136, 67, 0.08);
}

.research-overview-grid h3,
.research-card-grid h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-size: 21px;
    line-height: 1.28;
}

.research-overview-grid p,
.research-card-grid p {
    position: relative;
    z-index: 1;
}

.research-section {
    position: relative;
    padding: 92px 0;
}

.research-approach,
.research-quality,
.research-impact {
    background:
        radial-gradient(circle at 8% 10%, rgba(15, 136, 67, 0.1), transparent 25%),
        linear-gradient(180deg, var(--color-bg), #ffffff 54%, var(--color-bg));
}

.research-methods,
.research-output {
    background: #ffffff;
}

.research-section-heading {
    max-width: 820px;
    margin-bottom: 34px;
}

.research-section-heading h2 {
    margin-bottom: 14px;
    color: var(--color-primary-deep);
}

.research-section-heading p:not(.section-kicker) {
    max-width: 760px;
    font-size: 17px;
}

.research-model-grid,
.research-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 34px;
    align-items: center;
}

.research-ladder {
    display: grid;
    gap: 12px;
    padding: 22px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.research-ladder span {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 14px 18px 14px 22px;
    border-radius: 14px;
    background: var(--color-soft-green);
    color: var(--color-primary-deep);
    font-weight: 900;
}

.research-ladder span:first-child {
    background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
    color: #ffffff;
}

.research-approach-grid,
.research-output-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 24px;
}

.research-process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 24px;
}

.research-output-process {
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 24px;
}

.research-process span {
    position: relative;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid rgba(15, 136, 67, 0.14);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--color-primary-deep);
    box-shadow: 0 14px 32px rgba(7, 92, 49, 0.06);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.research-process span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    z-index: 2;
    width: 18px;
    height: 18px;
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    background: #ffffff;
    transform: translateY(-50%) rotate(45deg);
}

.research-split {
    align-items: start;
}

.research-split .research-section-heading {
    position: sticky;
    top: 118px;
}

.research-quality-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(7, 92, 49, 0.96), rgba(15, 136, 67, 0.88));
    box-shadow: 0 26px 68px rgba(7, 92, 49, 0.18);
}

.research-quality-panel article {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
}

.research-quality-panel strong {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
}

.research-quality-panel span {
    color: var(--color-muted);
    font-weight: 700;
    line-height: 1.6;
}

.research-impact-box {
    padding: 44px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(7, 92, 49, 0.97), rgba(15, 136, 67, 0.9));
    box-shadow: 0 32px 82px rgba(7, 92, 49, 0.2);
}

.research-impact-box .research-section-heading h2,
.research-impact-box .research-section-heading p,
.research-impact-box .section-kicker {
    color: #ffffff;
}

.research-impact-box .research-section-heading p {
    color: rgba(255, 255, 255, 0.76);
}

.research-impact-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.research-impact-grid article {
    min-height: 160px;
    padding: 22px;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
}

.research-impact-grid strong,
.research-impact-grid span {
    position: relative;
    z-index: 1;
}

.research-impact-grid strong {
    display: block;
    margin-bottom: 10px;
    color: var(--color-primary-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    line-height: 1.25;
}

.research-impact-grid span {
    color: var(--color-muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.research-cta {
    padding: 92px 0;
    background:
        radial-gradient(circle at 88% 14%, rgba(242, 140, 40, 0.16), transparent 28%),
        linear-gradient(135deg, var(--color-primary-deep), var(--color-primary));
}

.research-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.research-cta h2 {
    max-width: 760px;
    margin-bottom: 12px;
    color: #ffffff;
}

.research-cta p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.research-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 980px) {
    .research-hero-grid,
    .research-model-grid,
    .research-split,
    .research-cta-box {
        grid-template-columns: 1fr;
    }

    .research-split .research-section-heading {
        position: static;
    }

    .research-card-grid,
    .research-overview-grid,
    .research-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .research-output-process {
        grid-template-columns: 1fr;
    }

    .research-output-process span:not(:last-child)::after {
        display: none;
    }

    .research-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .research-page .research-hero {
        padding: 78px 0 74px;
    }

    .research-hero-grid {
        gap: 28px;
    }

    .research-hero-copy .research-hero-lede {
        font-size: 18px;
    }

    .research-hero-panel {
        border-radius: 20px;
    }

    .research-panel-image {
        min-height: 230px;
        padding: 20px;
    }

    .research-panel-image span {
        font-size: 23px;
    }

    .research-panel-stats,
    .research-card-grid,
    .research-overview-grid,
    .research-impact-grid,
    .research-approach-grid,
    .research-output-grid,
    .research-process {
        grid-template-columns: 1fr;
    }

    .research-section {
        padding: 64px 0;
    }

    .research-overview {
        padding: 44px 0 56px;
    }

    .research-overview-grid article,
    .research-card-grid article {
        min-height: auto;
    }

    .research-process span:not(:last-child)::after {
        display: none;
    }

    .research-impact-box {
        padding: 24px;
        border-radius: 20px;
    }

    .research-cta {
        padding: 68px 0;
    }
}

/* =========================
   COMMUNITY MOBILISATION HERO
========================= */

.community-hero {
    height: 70vh;
    background: url("../../assets/images/community/community-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.community-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 30, 0.65);
}

.community-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.community-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.community-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.community-hero-text .hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.community-hero-text .hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.community-hero-text .hero-note {
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   CORE PHILOSOPHY - COMMUNITY OWNERSHIP
========================= */

.community-philosophy {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.community-philosophy-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.community-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.philosophy-box {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.philosophy-box h3 {
    color: #2B6CB0;
    margin-bottom: 10px;
}

.philosophy-box ul {
    padding-left: 18px;
    color: #4B5563;
    line-height: 1.7;
    font-size: 14px;
}

/* PRINCIPLES */
.community-philosophy-principles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.principle {
    background: #ffffff;
    border: 1px solid #E3E8E4;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 13px;
}

/* NOTE */
.community-philosophy-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   COMMUNITY ENTRY & TRUST BUILDING
========================= */

.community-entry {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.community-entry-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.community-entry-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.community-entry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.entry-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.entry-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.entry-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.entry-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.community-entry-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   COMMUNITY LEADERSHIP STRUCTURE
========================= */

.community-leadership {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.community-leadership-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.community-leadership-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.leadership-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.leadership-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.leadership-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.leadership-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.community-leadership-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.community-leadership-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   DECENTRALISED IMPLEMENTATION SYSTEM
========================= */

.community-implementation {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.community-implementation-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.community-implementation-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.community-implementation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.implementation-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.implementation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.implementation-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.implementation-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.community-implementation-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   COMMUNITY-LED ACTIVITIES
========================= */

.community-activities {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.community-activities-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.community-activities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.activity-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.activity-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.activity-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.community-activities-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.community-activities-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   PARTNERSHIPS & ECOSYSTEM
========================= */

.community-partners {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.community-partners-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.community-partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.partner-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.partner-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.partner-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.community-partners-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.community-partners-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   FEEDBACK & LEARNING SYSTEM
========================= */

.community-feedback {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.community-feedback-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.community-feedback-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.community-feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feedback-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.feedback-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.feedback-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.feedback-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.community-feedback-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   CROSS-COMMUNITY LEARNING + FINAL CTA
========================= */

.community-final {
    padding: 90px 0;
    background: #ffffff;
}

/* INTRO */
.community-final-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.community-final-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.community-final-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.final-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.final-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.final-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.final-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* CTA */
.community-final-cta {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: #F7F9F8;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.community-final-cta h3 {
    color: #1F2937;
    margin-bottom: 10px;
}

.community-final-cta p {
    margin-bottom: 20px;
    color: #4B5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   RESEARCH APPROACH & STRUCTURE
========================= */

.research-approach {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.research-approach-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.research-approach-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.research-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.approach-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.approach-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.approach-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.approach-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.research-approach-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}
/* =========================
   DATA COLLECTION METHODS
========================= */

.research-methods {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.research-methods-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.research-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.method-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.method-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.method-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.method-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.research-methods-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.research-methods-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   ANALYSIS, OUTPUT & POLICY IMPACT
========================= */

.research-impact {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.research-impact-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.research-impact-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.research-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.impact-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.impact-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.impact-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.research-impact-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* CTA */
.research-impact-cta {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.research-impact-cta h3 {
    color: #1F2937;
    margin-bottom: 10px;
}

.research-impact-cta p {
    margin-bottom: 20px;
    color: #4B5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}


/* =========================
   EDUCATION & CAPACITY BUILDING HERO
========================= */

.ecb-hero {
    height: 70vh;
    background: url("../../assets/images/education/ecb-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.ecb-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 35, 0.65);
}

.ecb-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.ecb-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.ecb-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.ecb-hero-text .hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.ecb-hero-text .hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.ecb-hero-text .hero-note {
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   STRATEGIC APPROACH
========================= */

.ecb-approach {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.ecb-approach-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.ecb-approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ecb-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.ecb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.ecb-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.ecb-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* AUDIENCE */
.ecb-audience {
    margin-top: 50px;
    text-align: center;
}

.ecb-audience h3 {
    margin-bottom: 20px;
    color: #1F2937;
}

.ecb-audience-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.audience-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

/* NOTE */
.ecb-approach-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   TRAINING DELIVERY MODEL
========================= */

.ecb-training {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.ecb-training-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.ecb-training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.training-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.training-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.training-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.training-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.ecb-training-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.ecb-training-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   PARTNERSHIPS + OUTCOMES
========================= */

.ecb-partnerships {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.ecb-partnerships-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* PARTNERS GRID */
.ecb-partnerships-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.partner-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.partner-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.partner-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* OUTCOMES FLOW */
.ecb-outcomes-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.ecb-partnerships-note {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* CTA */
.ecb-partnerships-cta {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.ecb-partnerships-cta h3 {
    color: #1F2937;
    margin-bottom: 10px;
}

.ecb-partnerships-cta p {
    margin-bottom: 20px;
    color: #4B5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   POLICY & ADVOCACY HERO
========================= */

/* =========================================
   EDUCATION & CAPACITY BUILDING - PREMIUM PAGE
   ========================================= */

.ecb-premium-kicker {
    margin: 0 0 14px;
    color: #9FD86B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ecb-premium-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(13, 52, 39, 0.98) 0%, rgba(19, 81, 78, 0.94) 52%, rgba(43, 111, 64, 0.78) 100%),
        url("../../assets/images/banners/background.png") center/cover;
    color: #ffffff;
}

.ecb-premium-media {
    position: absolute;
    inset: auto -12% -36% 34%;
    height: 410px;
    background: radial-gradient(circle, rgba(159, 216, 107, 0.24), rgba(159, 216, 107, 0) 68%);
    pointer-events: none;
}

.ecb-premium-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.ecb-premium-copy {
    max-width: 820px;
}

.ecb-premium-copy h1 {
    max-width: 940px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.ecb-premium-copy > p:not(.ecb-premium-kicker) {
    max-width: 720px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.ecb-premium-actions,
.ecb-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.ecb-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.ecb-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.ecb-learning-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(8, 42, 39, 0.64);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.ecb-panel-top,
.ecb-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.ecb-panel-top span,
.ecb-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ecb-panel-top strong,
.ecb-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.ecb-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(159, 216, 107, 0.2), rgba(255, 255, 255, 0.08));
}

.ecb-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.ecb-panel-list {
    display: grid;
    gap: 15px;
}

.ecb-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.ecb-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.ecb-panel-list span.active {
    background: #9FD86B;
    box-shadow: 0 0 0 8px rgba(159, 216, 107, 0.12);
}

.ecb-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.ecb-premium-overview {
    padding: 86px 0;
    background: #ffffff;
}

.ecb-overview-grid,
.ecb-linkage-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.ecb-overview-grid h2,
.ecb-linkage-grid h2,
.ecb-feature-card h2,
.ecb-section-heading h2,
.ecb-premium-cta h2 {
    margin: 0;
    color: #123F2E;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.ecb-overview-copy p,
.ecb-linkage-grid p,
.ecb-section-heading p,
.ecb-feature-card p,
.ecb-premium-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.ecb-overview-copy p:first-child {
    margin-top: 0;
}

.ecb-premium-metrics {
    background: #123F2E;
    color: #ffffff;
}

.ecb-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.ecb-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.ecb-metrics-grid strong {
    color: #9FD86B;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.ecb-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.ecb-premium-section {
    padding: 96px 0;
}

.ecb-system,
.ecb-audiences,
.ecb-partnership-model {
    background: #F6FAF3;
}

.ecb-curriculum,
.ecb-training-model,
.ecb-impact {
    background: #ffffff;
}

.ecb-section-heading {
    max-width: 820px;
    margin-bottom: 38px;
}

.ecb-section-heading p {
    max-width: 760px;
}

.ecb-flow,
.ecb-role-grid,
.ecb-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.ecb-flow article,
.ecb-role-grid article,
.ecb-impact-grid article,
.ecb-actor-grid article {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid #DCE8D7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(18, 63, 46, 0.08);
}

.ecb-flow article span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ecb-flow article h3,
.ecb-role-grid article h3,
.ecb-impact-grid article h3,
.ecb-actor-grid article h3 {
    margin: 24px 0 12px;
    color: #123F2E;
    font-size: 22px;
    line-height: 1.22;
}

.ecb-flow article p,
.ecb-role-grid article p,
.ecb-impact-grid article p,
.ecb-actor-grid article p {
    margin: 0;
    color: #4B5563;
    font-size: 15px;
    line-height: 1.75;
}

.ecb-split {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 36px;
    align-items: stretch;
}

.ecb-feature-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 470px;
    padding: 34px;
    border-radius: 8px;
    background:
        linear-gradient(150deg, rgba(18, 63, 46, 0.96), rgba(19, 81, 78, 0.86)),
        url("../../assets/images/banners/background-also.png") center/cover;
    box-shadow: 0 24px 64px rgba(18, 63, 46, 0.18);
}

.ecb-feature-card h2,
.ecb-feature-card p {
    color: #ffffff;
}

.ecb-feature-card p:not(.ecb-premium-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.ecb-actor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.ecb-partner-stack {
    display: grid;
    gap: 14px;
}

.ecb-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #9FD86B;
    border-radius: 8px;
    background: #F9FBF6;
    box-shadow: 0 14px 34px rgba(18, 63, 46, 0.07);
}

.ecb-training-model .ecb-partner-stack div,
.ecb-partnership-model .ecb-partner-stack div {
    background: #ffffff;
}

.ecb-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ecb-partner-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.ecb-premium-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(18, 63, 46, 0.96), rgba(19, 81, 78, 0.88)),
        url("../../assets/images/banners/background.png") center/cover;
    color: #ffffff;
}

.ecb-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.ecb-premium-cta h2,
.ecb-premium-cta p {
    color: #ffffff;
}

.ecb-premium-cta p:not(.ecb-premium-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.ecb-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .ecb-premium-hero-grid,
    .ecb-overview-grid,
    .ecb-linkage-grid,
    .ecb-split,
    .ecb-cta-grid {
        grid-template-columns: 1fr;
    }

    .ecb-learning-panel {
        min-height: auto;
    }

    .ecb-metrics-grid,
    .ecb-flow,
    .ecb-role-grid,
    .ecb-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ecb-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .ecb-premium-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .ecb-premium-copy h1 {
        font-size: 40px;
    }

    .ecb-premium-copy > p:not(.ecb-premium-kicker) {
        font-size: 16px;
    }

    .ecb-premium-overview,
    .ecb-premium-section,
    .ecb-premium-cta {
        padding: 68px 0;
    }

    .ecb-metrics-grid,
    .ecb-flow,
    .ecb-role-grid,
    .ecb-impact-grid,
    .ecb-actor-grid {
        grid-template-columns: 1fr;
    }

    .ecb-metrics-grid {
        border-left: 0;
    }

    .ecb-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .ecb-learning-panel,
    .ecb-feature-card,
    .ecb-flow article,
    .ecb-role-grid article,
    .ecb-impact-grid article,
    .ecb-actor-grid article {
        padding: 22px;
    }
}

.advocacy-hero {
    height: 70vh;
    background: url("../../assets/images/advocacy/advocacy-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
}

.advocacy-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 16, 30, 0.65);
}

.advocacy-hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 900px;
}

.advocacy-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 10px;
}

.advocacy-hero-text h1 {
    font-size: 44px;
    margin-bottom: 10px;
}

.advocacy-hero-text .hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 15px;
}

.advocacy-hero-text .hero-description {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.advocacy-hero-text .hero-note {
    font-size: 14px;
    font-style: italic;
    opacity: 0.85;
    margin-bottom: 25px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   EVIDENCE-BASED ADVOCACY APPROACH
========================= */

.advocacy-approach {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.advocacy-approach-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* FLOW */
.advocacy-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* GRID */
.advocacy-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.advocacy-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.advocacy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.advocacy-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.advocacy-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* NOTE */
.advocacy-approach-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   GOVERNMENT & STAKEHOLDER ENGAGEMENT
========================= */

.advocacy-engagement {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.advocacy-engagement-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.advocacy-engagement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.engagement-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.engagement-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.engagement-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.engagement-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.advocacy-engagement-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.advocacy-engagement-note {
    margin-top: 30px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   COALITIONS, MEDIA & PUBLIC INFLUENCE
========================= */

.advocacy-coalitions {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.advocacy-coalitions-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.advocacy-coalitions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.coalition-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.coalition-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.coalition-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.coalition-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.advocacy-coalitions-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.advocacy-coalitions-note {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* CTA */
.advocacy-coalitions-cta {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.advocacy-coalitions-cta h3 {
    color: #1F2937;
    margin-bottom: 10px;
}

.advocacy-coalitions-cta p {
    margin-bottom: 20px;
    color: #4B5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   WOMEN & YOUTH EMPOWERMENT HERO
========================= */

.wey-hero {
    min-height: 78vh;
    background: url("../../assets/images/wey/wey-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    padding: 90px 0;
    overflow: hidden;
}

.wey-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 18, 35, 0.55) 0%, rgba(7, 18, 35, 0.85) 100%);
    z-index: 1;
}

.wey-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 22, 42, 0.48);
    z-index: 2;
}

.wey-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 1180px;
}

.wey-hero-text {
    color: #ffffff;
    max-width: 720px;
}

.wey-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.82;
    margin-bottom: 16px;
}

.wey-hero-text h1 {
    font-size: 52px;
    line-height: 1.02;
    margin-bottom: 20px;
    max-width: 640px;
}

.wey-hero-text .hero-subtitle,
.wey-hero-text .hero-description {
    font-size: 17px;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 22px;
}

.wey-hero-text .hero-note {
    font-size: 15px;
    font-style: italic;
    opacity: 0.86;
    margin-bottom: 34px;
    max-width: 620px;
}

.hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.wey-hero-panel {
    display: grid;
    gap: 22px;
    align-self: start;
    justify-items: stretch;
}

.wey-panel-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 24px;
    padding: 28px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #f8fafc;
}

.wey-panel-card span {
    display: inline-block;
    color: rgba(255,255,255,0.72);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 12px;
    margin-bottom: 14px;
}

.wey-panel-card h3 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 14px;
    line-height: 1.3;
}

.wey-panel-card p {
    color: rgba(255,255,255,0.86);
    line-height: 1.75;
}

.wey-hero-stats {
    display: grid;
    gap: 16px;
}

.wey-hero-stats article {
    display: grid;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    padding: 22px;
    color: #ffffff;
}

.wey-hero-stats strong {
    display: block;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
}

.wey-hero-stats span {
    font-size: 13px;
    opacity: 0.88;
}

.wey-hero-text,
.wey-hero-panel {
    min-width: 0;
}

@media (max-width: 1024px) {
    .wey-hero-grid {
        grid-template-columns: 1fr;
    }

    .wey-hero-panel {
        order: -1;
    }
}

@media (max-width: 860px) {
    .wey-hero {
        min-height: auto;
        padding: 70px 0;
    }

    .wey-hero-text h1 {
        font-size: 38px;
    }

    .wey-panel-card,
    .wey-hero-stats article {
        padding: 22px;
    }
}

@media (max-width: 640px) {
    .wey-hero {
        padding: 56px 0;
    }

    .wey-hero-text h1 {
        font-size: 32px;
    }

    .wey-hero-text,
    .wey-hero-panel {
        width: 100%;
    }
}

.wey-youth,
.wey-women,
.wey-inclusion {
    padding: 90px 0;
}

.section-kicker {
    display: inline-block;
    color: #2563eb;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 12px;
}

.section-header {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.section-header h2 {
    font-size: 34px;
    margin-bottom: 18px;
    line-height: 1.15;
}

.section-header p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.75;
}

.wey-youth-intro,
.wey-women-intro,
.wey-inclusion-intro {
    max-width: 840px;
    margin: 0 auto 40px;
    text-align: center;
    color: #4b5563;
    line-height: 1.78;
}

.wey-youth-grid,
.wey-women-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.wey-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.youth-card,
.women-card,
.inclusion-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.youth-card:hover,
.women-card:hover,
.inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
}

.youth-card h3,
.women-card h3,
.inclusion-card h3 {
    color: #1d4ed8;
    font-size: 20px;
    margin-bottom: 12px;
}

.youth-card p,
.women-card p,
.inclusion-card p {
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
}

.wey-youth-flow,
.wey-women-flow,
.wey-inclusion-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 48px auto 0;
    max-width: 860px;
}

.flow-box {
    background: #ffffff;
    padding: 14px 18px;
    border-radius: 22px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    color: #1f2937;
    min-width: 170px;
    text-align: center;
}

.flow-arrow {
    color: #2563eb;
    font-weight: 700;
    font-size: 18px;
}

.wey-youth-note,
.wey-women-note,
.wey-inclusion-note {
    margin-top: 50px;
    text-align: center;
    font-weight: 600;
    color: #1f2937;
    background: #eef2ff;
    padding: 22px 24px;
    border-radius: 16px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.wey-inclusion-cta {
    margin-top: 56px;
    text-align: center;
    padding: 42px 32px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.wey-inclusion-cta h3 {
    font-size: 26px;
    margin-bottom: 16px;
}

.wey-inclusion-cta p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 26px;
}

.wey-join {
    padding: 90px 0 110px;
    background: #f8fafc;
}

.wey-join-card {
    max-width: 860px;
    margin: 0 auto;
    padding: 42px 36px;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e5e7eb;
    text-align: center;
    box-shadow: 0 18px 56px rgba(15, 23, 42, 0.05);
}

.wey-join-card .section-kicker {
    color: #2563eb;
    margin-bottom: 14px;
}

.wey-join-card h2 {
    font-size: 34px;
    margin-bottom: 18px;
    line-height: 1.15;
}

.wey-join-card p {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
    max-width: 760px;
    margin: 0 auto 32px;
}

.wey-join-actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .wey-hero-grid {
        grid-template-columns: 1fr;
    }

    .wey-hero-panel {
        order: -1;
    }
}

@media (max-width: 860px) {
    .wey-youth-grid,
    .wey-women-grid {
        grid-template-columns: 1fr;
    }

    .wey-inclusion-grid {
        grid-template-columns: 1fr;
    }

    .wey-hero-text h1 {
        font-size: 38px;
    }
}

@media (max-width: 640px) {
    .wey-hero {
        min-height: auto;
        padding: 60px 0;
    }

    .wey-hero-text h1 {
        font-size: 32px;
    }

    .wey-hero-panel,
    .wey-join-card,
    .wey-inclusion-cta {
        padding: 24px;
    }

    .hero-actions,
    .wey-join-actions {
        justify-content: center;
    }
}

/* =========================
   YOUTH EMPOWERMENT MODEL
========================= */

.wey-youth {
    padding: 80px 0;
    background: #F7F9F8;
}

/* INTRO */
.wey-youth-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.wey-youth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.youth-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.youth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.youth-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.youth-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.wey-youth-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.wey-youth-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   WOMEN EMPOWERMENT MODEL
========================= */

.wey-women {
    padding: 80px 0;
    background: #ffffff;
}

/* INTRO */
.wey-women-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.wey-women-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.women-card {
    background: #F7F9F8;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.women-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.women-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.women-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.wey-women-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.flow-box {
    background: #F7F9F8;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.wey-women-note {
    margin-top: 40px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* =========================
   INCLUSION, SAFETY & SOCIAL COHESION
========================= */

.wey-inclusion {
    padding: 90px 0;
    background: #F7F9F8;
}

/* INTRO */
.wey-inclusion-intro {
    max-width: 850px;
    margin: 20px auto 40px;
    text-align: center;
    color: #4B5563;
    line-height: 1.7;
}

/* GRID */
.wey-inclusion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.inclusion-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
    transition: 0.3s ease;
}

.inclusion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

.inclusion-card h3 {
    color: #2B6CB0;
    margin-bottom: 8px;
}

.inclusion-card p {
    font-size: 14px;
    color: #4B5563;
    line-height: 1.6;
}

/* FLOW */
.wey-inclusion-flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 40px 0;
}

.flow-box {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 20px;
    border: 1px solid #E3E8E4;
    font-size: 13px;
}

.flow-arrow {
    color: #2B6CB0;
    font-weight: bold;
}

/* NOTE */
.wey-inclusion-note {
    margin-top: 20px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 15px;
    border-radius: 10px;
}

/* CTA */
.wey-inclusion-cta {
    margin-top: 50px;
    text-align: center;
    padding: 30px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E3E8E4;
}

.wey-inclusion-cta h3 {
    color: #1F2937;
    margin-bottom: 10px;
}

.wey-inclusion-cta p {
    margin-bottom: 20px;
    color: #4B5563;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* =========================
   CONTACT HERO SECTION
========================= */

/* =========================================
   WOMEN & YOUTH EMPOWERMENT - PREMIUM PAGE
   ========================================= */

.wey-premium-kicker {
    margin: 0 0 14px;
    color: #9FD86B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wey-premium-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(13, 43, 49, 0.98) 0%, rgba(15, 86, 76, 0.94) 50%, rgba(15, 136, 67, 0.74) 100%),
        url("../../assets/images/wey/wey-hero.jpg") center/cover;
    color: #ffffff;
}

.wey-premium-media {
    position: absolute;
    inset: auto -12% -36% 34%;
    height: 410px;
    background: radial-gradient(circle, rgba(159, 216, 107, 0.24), rgba(159, 216, 107, 0) 68%);
    pointer-events: none;
}

.wey-premium-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.wey-premium-copy {
    max-width: 820px;
}

.wey-premium-copy h1 {
    max-width: 940px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.wey-premium-copy > p:not(.wey-premium-kicker) {
    max-width: 720px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.wey-premium-actions,
.wey-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.wey-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.wey-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.wey-strategy-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(8, 40, 42, 0.64);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.wey-panel-top,
.wey-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.wey-panel-top span,
.wey-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wey-panel-top strong,
.wey-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.wey-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(159, 216, 107, 0.2), rgba(255, 255, 255, 0.08));
}

.wey-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.wey-panel-list {
    display: grid;
    gap: 15px;
}

.wey-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.wey-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.wey-panel-list span.active {
    background: #9FD86B;
    box-shadow: 0 0 0 8px rgba(159, 216, 107, 0.12);
}

.wey-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.wey-premium-overview {
    padding: 86px 0;
    background: #ffffff;
}

.wey-overview-grid,
.wey-linkage-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.wey-overview-grid h2,
.wey-linkage-grid h2,
.wey-feature-card h2,
.wey-section-heading h2,
.wey-premium-cta h2 {
    margin: 0;
    color: #123F2E;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.wey-overview-copy p,
.wey-linkage-grid p,
.wey-section-heading p,
.wey-feature-card p,
.wey-premium-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.wey-overview-copy p:first-child {
    margin-top: 0;
}

.wey-premium-metrics {
    background: #123F2E;
    color: #ffffff;
}

.wey-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.wey-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.wey-metrics-grid strong {
    color: #9FD86B;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.wey-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.wey-premium-section {
    padding: 96px 0;
}

.wey-system,
.wey-safety,
.wey-institutional-model {
    background: #F6FAF3;
}

.wey-youth-model,
.wey-women-model,
.wey-impact {
    background: #ffffff;
}

.wey-section-heading {
    max-width: 820px;
    margin-bottom: 38px;
}

.wey-section-heading p {
    max-width: 760px;
}

.wey-flow,
.wey-role-grid,
.wey-impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.wey-flow article,
.wey-role-grid article,
.wey-impact-grid article,
.wey-actor-grid article {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border: 1px solid #DCE8D7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(18, 63, 46, 0.08);
}

.wey-flow article span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wey-flow article h3,
.wey-role-grid article h3,
.wey-impact-grid article h3,
.wey-actor-grid article h3 {
    margin: 24px 0 12px;
    color: #123F2E;
    font-size: 22px;
    line-height: 1.22;
}

.wey-flow article p,
.wey-role-grid article p,
.wey-impact-grid article p,
.wey-actor-grid article p {
    margin: 0;
    color: #4B5563;
    font-size: 15px;
    line-height: 1.75;
}

.wey-split {
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
    gap: 36px;
    align-items: stretch;
}

.wey-feature-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 470px;
    padding: 34px;
    border-radius: 8px;
    background:
        linear-gradient(150deg, rgba(18, 63, 46, 0.96), rgba(15, 86, 76, 0.86)),
        url("../../assets/images/wey/wey-hero.jpg") center/cover;
    box-shadow: 0 24px 64px rgba(18, 63, 46, 0.18);
}

.wey-feature-card h2,
.wey-feature-card p {
    color: #ffffff;
}

.wey-feature-card p:not(.wey-premium-kicker) {
    color: rgba(255, 255, 255, 0.78);
}

.wey-actor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.wey-partner-stack {
    display: grid;
    gap: 14px;
}

.wey-partner-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #9FD86B;
    border-radius: 8px;
    background: #F9FBF6;
    box-shadow: 0 14px 34px rgba(18, 63, 46, 0.07);
}

.wey-women-model .wey-partner-stack div,
.wey-institutional-model .wey-partner-stack div {
    background: #ffffff;
}

.wey-partner-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wey-partner-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.wey-premium-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(18, 63, 46, 0.96), rgba(15, 86, 76, 0.88)),
        url("../../assets/images/wey/wey-hero.jpg") center/cover;
    color: #ffffff;
}

.wey-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.wey-premium-cta h2,
.wey-premium-cta p {
    color: #ffffff;
}

.wey-premium-cta p:not(.wey-premium-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.wey-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .wey-premium-hero-grid,
    .wey-overview-grid,
    .wey-linkage-grid,
    .wey-split,
    .wey-cta-grid {
        grid-template-columns: 1fr;
    }

    .wey-strategy-panel {
        min-height: auto;
    }

    .wey-metrics-grid,
    .wey-flow,
    .wey-role-grid,
    .wey-impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wey-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .wey-premium-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .wey-premium-copy h1 {
        font-size: 40px;
    }

    .wey-premium-copy > p:not(.wey-premium-kicker) {
        font-size: 16px;
    }

    .wey-premium-overview,
    .wey-premium-section,
    .wey-premium-cta {
        padding: 68px 0;
    }

    .wey-metrics-grid,
    .wey-flow,
    .wey-role-grid,
    .wey-impact-grid,
    .wey-actor-grid {
        grid-template-columns: 1fr;
    }

    .wey-metrics-grid {
        border-left: 0;
    }

    .wey-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .wey-strategy-panel,
    .wey-feature-card,
    .wey-flow article,
    .wey-role-grid article,
    .wey-impact-grid article,
    .wey-actor-grid article {
        padding: 22px;
    }
}

.contact-hero {
    min-height: 78vh;
    background: url("../../assets/images/contact/contact-hero.jpg") center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    padding: 90px 0;
    overflow: hidden;
}

.contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(4, 16, 28, 0.82) 0%, rgba(6, 30, 54, 0.78) 100%);
    z-index: 1;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 38, 0.35);
    z-index: 2;
}

.contact-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 1180px;
}

.contact-hero-text {
    color: #fff;
    max-width: 720px;
}

.contact-hero-text .hero-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.82;
    margin-bottom: 16px;
}

.contact-hero-text h1 {
    font-size: 52px;
    line-height: 1.02;
    margin-bottom: 20px;
    max-width: 640px;
}

.contact-hero-text .hero-subtitle {
    font-size: 17px;
    line-height: 1.8;
    opacity: 0.95;
    margin-bottom: 20px;
}

.contact-hero-text .hero-description {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 20px;
}

.contact-hero-text .hero-note {
    font-size: 15px;
    font-style: italic;
    opacity: 0.86;
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.contact-hero-panel {
    display: grid;
    gap: 18px;
}

.contact-panel-card {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 24px;
    padding: 28px;
    color: #f8fafc;
}

.contact-panel-card span {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    color: rgba(255,255,255,0.76);
}

.contact-panel-card h3 {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 12px;
    color: #fff;
}

.contact-panel-card p {
    color: rgba(255,255,255,0.82);
    line-height: 1.7;
}

.contact-hero-stats {
    display: grid;
    gap: 14px;
}

.contact-hero-stats article {
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    padding: 18px 20px;
    color: #fff;
}

.contact-hero-stats strong {
    display: block;
    font-size: 28px;
    margin-bottom: 6px;
}

.contact-hero-stats span {
    font-size: 13px;
    opacity: 0.86;
}

/* =========================
   CONTACT INFORMATION CORE BLOCK
========================= */

.contact-info {
    padding: 90px 0;
    background: #F7F9F8;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.contact-card {
    background: #ffffff;
    padding: 30px 24px;
    border-radius: 18px;
    border: 1px solid #E3E8E4;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.05);
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.08);
}

.contact-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EAF2F6;
    margin-bottom: 16px;
    font-size: 20px;
}

.contact-card h3 {
    color: #1D4ED8;
    margin-bottom: 10px;
    font-size: 20px;
}

.contact-card p {
    font-size: 15px;
    color: #4B5563;
    line-height: 1.7;
}

.contact-card a {
    color: #1F2937;
    text-decoration: none;
    font-weight: 600;
}

.contact-card a:hover {
    color: #2563EB;
}

.contact-note {
    margin-top: 36px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 18px 22px;
    border-radius: 16px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   CONTACT FORM SECTION
========================= */

.contact-form-section {
    padding: 90px 0;
    background: #ffffff;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.85fr;
    gap: 32px;
    margin-top: 36px;
    align-items: start;
}

.contact-form {
    background: #ffffff;
    padding: 32px;
    border-radius: 22px;
    border: 1px solid #E3E8E4;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #1F2937;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.contact-side {
    display: grid;
    gap: 18px;
}

.contact-side-card {
    background: #F8FAFC;
    border: 1px solid #E3E8E4;
    border-radius: 20px;
    padding: 24px;
}

.contact-side h3 {
    color: #1D4ED8;
    margin-bottom: 10px;
    font-size: 20px;
}

.contact-side p {
    color: #4B5563;
    line-height: 1.7;
    margin-bottom: 15px;
}

.contact-side ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-side ul li {
    margin-bottom: 10px;
    color: #374151;
}

.contact-side-note {
    background: #EAF2F6;
    padding: 18px 20px;
    border-radius: 16px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.7;
}

/* =========================
   MAP SECTION
========================= */

.contact-map {
    padding: 90px 0;
    background: #F7F9F8;
}

.map-wrapper {
    margin-top: 36px;
    padding: 12px;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid #E3E8E4;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.05);
}

.map-wrapper iframe {
    border-radius: 16px;
}

.map-note {
    margin-top: 28px;
    text-align: center;
    font-weight: 600;
    color: #1F2937;
    background: #EAF2F6;
    padding: 18px 22px;
    border-radius: 16px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 860px) {
    .contact-grid,
    .contact-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .contact-hero {
        padding: 60px 0;
        min-height: auto;
    }

    .contact-hero-text h1 {
        font-size: 32px;
    }

    .contact-card,
    .contact-form,
    .contact-side-card {
        padding: 24px;
    }
}

/* =========================================
   CONTACT PAGE - PREMIUM LAYOUT
   ========================================= */

.contact-kicker {
    margin: 0 0 14px;
    color: #9FD86B;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-premium-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(10, 42, 31, 0.98) 0%, rgba(20, 76, 49, 0.94) 52%, rgba(15, 136, 67, 0.76) 100%),
        url("../../assets/images/contact/contact-hero.jpg") center/cover;
    color: #ffffff;
}

.contact-hero-media {
    position: absolute;
    inset: auto -12% -36% 34%;
    height: 410px;
    background: radial-gradient(circle, rgba(159, 216, 107, 0.24), rgba(159, 216, 107, 0) 68%);
    pointer-events: none;
}

.contact-premium-hero-grid {
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 54px;
    padding-top: 86px;
    padding-bottom: 86px;
}

.contact-premium-copy {
    max-width: 800px;
}

.contact-premium-copy h1 {
    max-width: 900px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
    letter-spacing: 0;
}

.contact-premium-copy > p:not(.contact-kicker) {
    max-width: 700px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.8;
}

.contact-premium-actions,
.contact-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.contact-btn-light {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px);
}

.contact-btn-light:hover {
    background: #ffffff;
    color: var(--color-primary-deep);
}

.contact-command-panel {
    position: relative;
    align-self: stretch;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(8, 38, 29, 0.64);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(18px);
}

.contact-panel-top,
.contact-panel-score {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.contact-panel-top span,
.contact-panel-score span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-panel-top strong,
.contact-panel-score strong {
    color: #ffffff;
    font-size: 15px;
}

.contact-panel-score {
    display: grid;
    padding: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(159, 216, 107, 0.2), rgba(255, 255, 255, 0.08));
}

.contact-panel-score strong {
    margin-top: 8px;
    font-size: 26px;
    line-height: 1.15;
}

.contact-panel-list {
    display: grid;
    gap: 15px;
}

.contact-panel-list div {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: start;
    gap: 12px;
}

.contact-panel-list span {
    width: 10px;
    height: 10px;
    margin-top: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
}

.contact-panel-list span.active {
    background: #9FD86B;
    box-shadow: 0 0 0 8px rgba(159, 216, 107, 0.12);
}

.contact-panel-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.55;
}

.contact-overview {
    padding: 86px 0;
    background: #ffffff;
}

.contact-overview-grid,
.contact-location-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 64px;
    align-items: start;
}

.contact-overview h2,
.contact-section-heading h2,
.contact-form-intro h2,
.contact-location-copy h2,
.contact-cta h2 {
    margin: 0;
    color: #123F2E;
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
}

.contact-overview-copy p,
.contact-section-heading p,
.contact-form-intro p,
.contact-location-copy p,
.contact-cta p {
    color: #4B5563;
    font-size: 16px;
    line-height: 1.8;
}

.contact-overview-copy p:first-child {
    margin-top: 0;
}

.contact-metrics {
    background: #123F2E;
    color: #ffffff;
}

.contact-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-metrics-grid div {
    min-height: 154px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-metrics-grid strong {
    color: #9FD86B;
    font-size: 15px;
    letter-spacing: 0.1em;
}

.contact-metrics-grid span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.55;
}

.contact-methods,
.contact-location {
    padding: 96px 0;
    background: #F6FAF3;
}

.contact-section-heading {
    max-width: 780px;
    margin-bottom: 36px;
}

.contact-section-heading p {
    max-width: 720px;
}

.contact-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.contact-method-grid article {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border: 1px solid #DCE8D7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgba(18, 63, 46, 0.08);
}

.contact-method-grid article span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-method-grid article h3 {
    margin: 24px 0 12px;
    color: #123F2E;
    font-size: 24px;
    line-height: 1.2;
}

.contact-method-grid article p,
.contact-method-grid article a {
    color: #4B5563;
    font-size: 15px;
    line-height: 1.75;
}

.contact-method-grid article a {
    font-weight: 800;
}

.contact-method-grid article a:hover {
    color: #0F8843;
}

.contact-form-section {
    padding: 96px 0;
    background: #ffffff;
}

.contact-form-premium-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.82fr);
    gap: 56px;
    align-items: start;
}

.contact-form-intro {
    max-width: 650px;
}

.contact-routing-stack {
    display: grid;
    gap: 14px;
    margin-top: 34px;
}

.contact-routing-stack div {
    display: grid;
    gap: 7px;
    padding: 20px 22px;
    border-left: 4px solid #9FD86B;
    border-radius: 8px;
    background: #F9FBF6;
    box-shadow: 0 14px 34px rgba(18, 63, 46, 0.07);
}

.contact-routing-stack span {
    color: #0F8843;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-routing-stack strong {
    color: #25342D;
    font-size: 15px;
    line-height: 1.45;
}

.contact-premium-form {
    padding: 30px;
    border: 1px solid #DCE8D7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(18, 63, 46, 0.1);
}

.contact-form-alert {
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
}

.contact-form-alert-success {
    border: 1px solid rgba(15, 136, 67, 0.2);
    background: #F0FAF3;
    color: #0B6B35;
}

.contact-form-alert-error {
    border: 1px solid rgba(217, 45, 76, 0.2);
    background: #FFF1F3;
    color: #B4233C;
}

.contact-premium-form .form-group label {
    color: #123F2E;
    font-size: 14px;
    font-weight: 800;
}

.contact-premium-form .form-group input,
.contact-premium-form .form-group textarea {
    min-height: 50px;
    border-color: #DCE8D7;
    border-radius: 8px;
    color: #25342D;
}

.contact-premium-form .form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-premium-form .form-group input:focus,
.contact-premium-form .form-group textarea:focus {
    border-color: rgba(15, 136, 67, 0.55);
    box-shadow: 0 0 0 4px rgba(15, 136, 67, 0.1);
}

.contact-location {
    background: #F6FAF3;
}

.contact-location-copy {
    position: sticky;
    top: 112px;
}

.contact-location-note {
    margin-top: 28px;
    padding: 22px;
    border-left: 4px solid #9FD86B;
    border-radius: 8px;
    background: #ffffff;
    color: #25342D;
    font-weight: 700;
    line-height: 1.65;
    box-shadow: 0 14px 34px rgba(18, 63, 46, 0.07);
}

.contact-map-panel {
    overflow: hidden;
    padding: 10px;
    border: 1px solid #DCE8D7;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(18, 63, 46, 0.1);
}

.contact-map-panel iframe {
    display: block;
    border-radius: 6px;
}

.contact-cta {
    padding: 84px 0;
    background:
        linear-gradient(120deg, rgba(18, 63, 46, 0.96), rgba(42, 111, 64, 0.9)),
        url("../../assets/images/contact/contact-hero.jpg") center/cover;
    color: #ffffff;
}

.contact-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px;
    align-items: center;
}

.contact-cta h2,
.contact-cta p {
    color: #ffffff;
}

.contact-cta p:not(.contact-kicker) {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.78);
}

.contact-cta-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 1080px) {
    .contact-premium-hero-grid,
    .contact-overview-grid,
    .contact-form-premium-grid,
    .contact-location-grid,
    .contact-cta-grid {
        grid-template-columns: 1fr;
    }

    .contact-command-panel {
        min-height: auto;
    }

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

    .contact-location-copy {
        position: static;
    }

    .contact-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 680px) {
    .contact-premium-hero-grid {
        min-height: auto;
        gap: 34px;
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .contact-premium-copy h1 {
        font-size: 40px;
    }

    .contact-premium-copy > p:not(.contact-kicker) {
        font-size: 16px;
    }

    .contact-overview,
    .contact-methods,
    .contact-form-section,
    .contact-location,
    .contact-cta {
        padding: 68px 0;
    }

    .contact-metrics-grid,
    .contact-method-grid {
        grid-template-columns: 1fr;
    }

    .contact-metrics-grid {
        border-left: 0;
    }

    .contact-metrics-grid div {
        min-height: 126px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .contact-command-panel,
    .contact-method-grid article,
    .contact-premium-form,
    .contact-routing-stack div,
    .contact-location-note {
        padding: 22px;
    }
}