/* ═══════════════════════════════════════════
   RESPONSIVE — All Sections
   ═══════════════════════════════════════════ */

@media (max-width: 968px) {

    /* About */
    .about-container {
        flex-direction: column;
        gap: 40px;
    }

    .about-ghost-number {
        font-size: 140px;
        top: -40px;
    }

    /* Mission */
    .mission-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mission-card:last-child {
        grid-column: auto;
    }

    /* Programs */
    .programs-layout {
        flex-direction: column;
        gap: 32px;
    }

    .programs-vertical-label {
        min-width: unset;
    }

    .programs-vertical-label span {
        writing-mode: horizontal-tb;
        transform: none;
    }

    /* Reach */
    .reach-container {
        flex-direction: column;
        gap: 48px;
    }

    .reach-map-wrapper {
        max-width: 580px;
    }

    /* Partnerships */
    .partnerships-pills {
        gap: 10px;
    }

    .pill {
        padding: 10px 18px;
        font-size: 13px;
    }

    /* Property */
    .property-container {
        flex-direction: column;
        gap: 48px;
    }

    .property-diagram {
        flex-direction: column;
        gap: 32px;
    }

    .diagram-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 750px) {
    .dot-label {
        font-size: clamp(8px, 1.6vw, 11px);
    }
}

@media (max-width: 716px) {
    .reach-dot.dot-resettlement {
        left: auto !important;
        right: 17% !important;
        flex-direction: row-reverse;
    }
}

@media (max-width: 600px) {

    /* Mission */
    .mission-grid {
        grid-template-columns: 1fr;
    }

    .mission-headline {
        font-size: 32px;
    }

    /* Programs */
    .program-row {
        gap: 16px;
    }

    .program-num {
        font-size: 22px;
        min-width: 36px;
    }

    /* Transparency */
    .transparency-panel {
        padding: 80px 0;
    }

    .transparency-headline {
        font-size: 32px;
    }

    /* Property */
    .node-icon {
        width: 64px;
        height: 64px;
    }

    .arrow-svg {
        width: 80px;
    }
}