/* Хир «Доступная помощь». Кадр 2110:2764, холст 1920, колонка 1440 (x − 240).
   y = Figma y − 116 (шапка). Absolute-композиция — от 1401px.
   Ниже 1401 — та же композиция столбиком: title → lead → фото. */

.dp-hero__line {
    display: none;
}

.dp-hero__dot {
    display: none;
}

.dp-hero__photo {
    display: none;
}

.dp-hero__title {
    margin: 48px 0 0;
    color: #3EA74F;
    font-size: 72px;
    line-height: 0.9;
    text-align: center;
}

.dp-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;
}

/* ——— ≤1400: десктопная композиция в одну колонку ——— */
@media (max-width: 991px) {

    body.page-dostupnaya .dp-hero {
        padding: 8px 0 8px;
    }

    body.page-dostupnaya .dp-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-dostupnaya .dp-hero__title {
        order: 1;
        width: 100%;
        margin: 12px 0 0;
        padding: 0 4px;
        font-size: clamp(40px, 11vw, 72px);
        line-height: 0.95;
        letter-spacing: -0.04em;
    }

    body.page-dostupnaya .dp-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-dostupnaya .dp-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;
        background: transparent;
    }

    body.page-dostupnaya .dp-hero__photo--2,
    body.page-dostupnaya .dp-hero__photo--4 { margin-top: 18px; }

    body.page-dostupnaya .dp-hero__line {
        display: none;
    }
}

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

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

    body.page-dostupnaya .dp-hero__photo {
        max-width: 200px;
    }
}

@media (min-width: 992px) {

    body.page-dostupnaya .dp-hero__stage {
        position: relative;
        width: 1440px;
        max-width: 100%;
        height: 800px;
        margin: 0 auto;
    }

    body.page-dostupnaya .dp-hero__line,
    body.page-dostupnaya .dp-hero__photo,
    body.page-dostupnaya .dp-hero__dot,
    body.page-dostupnaya .dp-hero__title,
    body.page-dostupnaya .dp-hero__lead {
        position: absolute;
        margin: 0;
    }

    body.page-dostupnaya .dp-hero__line {
        display: block;
        left: 251.5px;
        top: 471.105px;
        width: 1049.22px;
        height: 265.229px;
        z-index: 1;
        pointer-events: none;
    }

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

    /*
     * Квадрат + rotate (как looking/about).
     * Figma x/y — угол до поворота; left/top = (x−240)+dx, (y−116)+dy,
     * dx=h(cos−sin)−h, dy=h(cos+sin)−h.
     * image 2 @272/393.93 r−4°; image 5 @612.95/632 r6°;
     * image 3 @1007/632.20 r−5°; image 4 @1391.09/394 r8°.
     */
    body.page-dostupnaya .dp-hero__photo--1 {
        left: 39.686px;
        top: 269.686px;
        width: 228.344px;
        height: 228.344px;
        transform: rotate(-4deg);
    }

    body.page-dostupnaya .dp-hero__photo--2 {
        left: 361.4px;
        top: 526.4px;
        width: 210px;
        height: 210px;
        transform: rotate(6deg);
    }

    body.page-dostupnaya .dp-hero__photo--3 {
        left: 777.139px;
        top: 505.139px;
        width: 243.296px;
        height: 243.296px;
        transform: rotate(-5deg);
    }

    body.page-dostupnaya .dp-hero__photo--4 {
        left: 1133.391px;
        top: 293.382px;
        width: 237.664px;
        height: 237.664px;
        transform: rotate(8deg);
    }

    /* Точки поверх фото: Ellipse 56, 63, 60, 61, 62, 58, 59. */
    body.page-dostupnaya .dp-hero__dot {
        display: block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #185E30;
        z-index: 4;
        pointer-events: none;
    }

    body.page-dostupnaya .dp-hero__dot--1 { left: 252px; top: 480px; }
    body.page-dostupnaya .dp-hero__dot--2 { left: 463px; top: 543px; }
    body.page-dostupnaya .dp-hero__dot--3 { left: 356px; top: 613px; }
    body.page-dostupnaya .dp-hero__dot--4 { left: 555px; top: 687px; }
    body.page-dostupnaya .dp-hero__dot--5 { left: 779px; top: 712px; }
    body.page-dostupnaya .dp-hero__dot--6 { left: 1015px; top: 626px; }
    body.page-dostupnaya .dp-hero__dot--7 { left: 1205px; top: 516px; }

    body.page-dostupnaya .dp-hero__title {
        z-index: 4;
        left: 97px;
        top: 76px;
        width: 1212px;
        padding: 0;
        font-size: 132px;
        line-height: 1;
        letter-spacing: -6px;
        text-align: center;
        white-space: nowrap;
        color: #3EA74F;
    }

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