/* Хир «О фонде». Кадр 2103:1456, холст 1920, колонка 1440 (x − 240).
   y = Figma y − 116 (шапка). Absolute-сцена от 992px (scale 992–1439 — about-laptop-2026).
   ≤991 — title + lead + 4 фото столбиком. */

body.page-about.about-us,
body.page-about.about-fund {
    background-color: #ffffff !important;
    background-image: linear-gradient(180deg, #E2FFE7 0%, #FFFFFF 100%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 556px !important;
    overflow-x: clip;
}

body.page-about .af-hero {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 0 8px;
    overflow: visible;
    background: transparent;
}

body.page-about .af-hero img,
body.page-about .af-hero svg {
    max-width: none;
}

.af-hero__line,
.af-hero__dot {
    display: none;
}

.af-hero__photo {
    display: none;
}

.af-hero__title {
    position: relative;
    margin: 48px auto 0;
    width: min(707.648px, calc(100% - 32px));
    /* length/length → number; иначе min(1, <length>) invalid и scale/height отваливаются */
    height: calc(177.999px * min(1, (100vw - 32px) / 707.648px));
    overflow: hidden;
}

.af-hero__title-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.af-hero__title-art {
    display: block;
    position: relative;
    width: 707.648px;
    height: 177.999px;
    transform: scale(min(1, (100vw - 32px) / 707.648px));
    transform-origin: top left;
}

.af-hero__letter {
    position: absolute;
    display: block;
    pointer-events: none;
}

.af-hero__letter--o1 { left: 0; top: 15.937px; }
.af-hero__letter--f { left: 142.642px; top: 5.578px; }
.af-hero__letter--o2 { left: 271.728px; top: 10.359px; }
.af-hero__letter--n { left: 367.359px; top: 0; }
.af-hero__letter--d { left: 466.165px; top: 4.781px; }
.af-hero__letter--e { left: 638.283px; top: 0; }

.af-hero__lead {
    margin: 24px auto 48px;
    max-width: 688px;
    padding: 0 20px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.44px;
    text-align: center;
    color: #4D4D4D;
}

@media (max-width: 991px) {

    body.page-about .af-hero__stage {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px 14px;
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        padding: 0 16px 40px;
        box-sizing: border-box;
    }

    body.page-about .af-hero__title {
        order: 1;
        width: 100%;
        margin: 12px 0 0;
        /* stage padding 16+16; length/length → number */
        height: calc(177.999px * min(1, (100vw - 32px) / 707.648px));
    }

    body.page-about .af-hero__title-art {
        transform: scale(min(1, (100vw - 32px) / 707.648px));
        transform-origin: top left;
    }

    body.page-about .af-hero__lead {
        order: 2;
        width: 100%;
        margin: 16px auto 28px;
        padding: 0;
        max-width: 36em;
        font-size: clamp(16px, 4.2vw, 22px);
        letter-spacing: -0.02em;
    }

    body.page-about .af-hero__photo {
        display: block;
        order: 3;
        width: calc(50% - 10px);
        max-width: 168px;
        aspect-ratio: 1;
        height: auto;
        object-fit: contain;
        flex: 0 0 auto;
    }

    body.page-about .af-hero__line,
    body.page-about .af-hero__dot {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 991px) {

    body.page-about .af-hero__stage {
        gap: 14px 20px;
        padding-bottom: 56px;
    }

    body.page-about .af-hero__photo {
        max-width: 200px;
    }
}

@media (min-width: 992px) {

    body.page-about .af-hero {
        padding: 0;
        overflow: visible;
    }

    body.page-about .af-hero__stage {
        position: relative;
        width: 1440px;
        max-width: 100%;
        height: 800px;
        margin: 0 auto;
        padding: 0;
        overflow: visible;
    }

    body.page-about .af-hero__line,
    body.page-about .af-hero__photo,
    body.page-about .af-hero__dot,
    body.page-about .af-hero__title,
    body.page-about .af-hero__lead,
    body.page-about .af-hero__title-art,
    body.page-about .af-hero__letter {
        position: absolute;
        margin: 0;
    }

    body.page-about .af-hero__title {
        z-index: 4;
        left: 366px;
        top: 137px;
        width: 707.648px;
        height: 177.999px;
        padding: 0;
        margin: 0;
        overflow: visible;
        transform: none;
    }

    body.page-about .af-hero__title-art {
        position: absolute;
        left: 0;
        top: 0;
        transform: none;
    }

    body.page-about .af-hero__line {
        display: block;
        left: 192.031px;
        top: 398.216px;
        z-index: 1;
        pointer-events: none;
    }

    body.page-about .af-hero__photo {
        display: block;
        z-index: 2;
        object-fit: cover;
        border-radius: 12px;
        pointer-events: none;
        background: transparent;
        max-width: none;
    }

    /*
     * Как looking: квадрат + CSS rotate.
     * Figma x/y — угол до поворота; left/top = (x−240)+dx, (y−116)+dy,
     * dx=h(cos−sin)−h, dy=h(cos+sin)−h. Не AABB и не сжатие контейнером.
     * image 2 @297/385.93 r−4°; image 5 @680.95/673 r6°.
     */
    body.page-about .af-hero__photo--left {
        left: 64.686px;
        top: 261.686px;
        width: 228.343px;
        height: 228.343px;
        transform: rotate(-4deg);
    }

    body.page-about .af-hero__photo--mid {
        left: 429.402px;
        top: 567.4px;
        width: 210px;
        height: 210px;
        transform: rotate(6deg);
    }

    body.page-about .af-hero__photo--right {
        left: 867px;
        top: 557.303px;
        width: 227.504px;
        height: 227.504px;
        object-fit: fill;
        border-radius: 0;
    }

    body.page-about .af-hero__photo--right-top {
        left: 1183.086px;
        top: 140px;
        width: 268.427px;
        height: 268.427px;
        object-fit: fill;
        border-radius: 0;
    }

    body.page-about .af-hero__dot {
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #185E30;
        z-index: 4;
        pointer-events: none;
    }

    body.page-about .af-hero__dot--1 { left: 185px; top: 484px; }
    body.page-about .af-hero__dot--2 { left: 421px; top: 657px; }
    body.page-about .af-hero__dot--3 { left: 624px; top: 745px; }
    body.page-about .af-hero__dot--4 { left: 867px; top: 638px; }
    body.page-about .af-hero__dot--5 { left: 1082px; top: 710px; }
    body.page-about .af-hero__dot--6 { left: 1283px; top: 385px; }

    body.page-about .af-hero__title {
        z-index: 4;
        left: 366px;
        top: 137px;
        width: 707.648px;
        height: 177.999px;
        padding: 0;
    }

    body.page-about .af-hero__lead {
        z-index: 4;
        left: 373px;
        top: 384px;
        width: 688px;
        max-width: none;
        padding: 0;
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: -0.56px;
    }
}