/*
 * Transitional direction pages.
 * Expressive entry, functional continuation.
 */

.direction-page {
    --direction-accent: #a9503d;
    --direction-accent-bright: #c36d56;
    --direction-line: rgb(169 80 61 / 0.5);
    --direction-line-soft: rgb(169 80 61 / 0.22);
    --direction-wash: rgb(169 80 61 / 0.08);
    padding-bottom: clamp(2rem, 7vw, 6rem);
}

.direction-page--methodology {
    --direction-accent: #426f7a;
    --direction-accent-bright: #6f9eaa;
    --direction-line: rgb(66 111 122 / 0.54);
    --direction-line-soft: rgb(66 111 122 / 0.24);
    --direction-wash: rgb(66 111 122 / 0.09);
}

html[data-reading-theme="dark"] .direction-page {
    --direction-accent: #d48770;
    --direction-accent-bright: #eba18b;
    --direction-line: rgb(212 135 112 / 0.56);
    --direction-line-soft: rgb(212 135 112 / 0.25);
    --direction-wash: rgb(212 135 112 / 0.1);
}

html[data-reading-theme="dark"] .direction-page--methodology {
    --direction-accent: #78a8b3;
    --direction-accent-bright: #9fc6cf;
    --direction-line: rgb(120 168 179 / 0.58);
    --direction-line-soft: rgb(120 168 179 / 0.27);
    --direction-wash: rgb(120 168 179 / 0.1);
}

.direction-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    min-height: min(620px, 66vh);
    margin: 0 0 clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2rem, 6vw, 5.5rem);
    overflow: hidden;
    border: 1px solid var(--direction-line);
    background:
        linear-gradient(
            120deg,
            var(--direction-wash),
            transparent 60%
        );
}

.direction-hero::before {
    position: absolute;
    inset: 18px 18px auto auto;
    z-index: -1;
    width: min(34vw, 360px);
    height: min(20vw, 200px);
    border-top: 1px solid var(--direction-line);
    border-right: 1px solid var(--direction-line);
    content: "";
}

.direction-hero__eyebrow {
    max-width: 44rem;
    margin: 0 0 clamp(1rem, 2vw, 2rem);
    color: var(--direction-accent-bright);
    font-family: var(--font-interface);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.direction-hero h1 {
    max-width: 14ch;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--font-display);
    font-size: clamp(3.3rem, 7.6vw, 7rem);
    font-weight: 300;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.direction-hero__copy {
    max-width: 760px;
    font-family: var(--font-interface);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    line-height: 1.62;
}

.direction-hero__action {
    margin-top: 1.5rem;
}

.direction-page .button-link {
    border-color: var(--direction-accent);
}

.direction-page .button-link:hover {
    border-color: var(--direction-accent);
    background: var(--direction-accent);
    color: #fff;
}

.direction-hero__psi {
    position: absolute;
    right: clamp(1rem, 6vw, 6rem);
    top: 50%;
    z-index: -1;
    color: transparent;
    font-family: Georgia, serif;
    font-size: clamp(10rem, 25vw, 25rem);
    line-height: 0.75;
    opacity: 0.65;
    -webkit-text-stroke: 1px var(--direction-line);
    transform: translateY(-48%);
}

.direction-hero__neuro-mark,
.direction-hero__system-mark {
    position: absolute;
    right: clamp(1rem, 6vw, 6rem);
    top: 50%;
    z-index: -1;
    width: clamp(12rem, 27vw, 24rem);
    aspect-ratio: 1;
    opacity: 0.62;
    transform: translateY(-50%) rotate(-6deg);
}

.direction-hero__neuro-mark {
    border: 1px solid var(--direction-line);
}

.direction-hero__neuro-mark::before,
.direction-hero__neuro-mark::after {
    position: absolute;
    border: 1px solid var(--direction-line-soft);
    content: "";
}

.direction-hero__neuro-mark::before {
    inset: 15% -9% -8% 18%;
}

.direction-hero__neuro-mark::after {
    inset: 34% 20% 20% -18%;
}

.direction-hero__neuro-mark i,
.direction-hero__system-mark i {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid var(--direction-accent);
    background: var(--bg);
}

.direction-hero__neuro-mark i {
    border-radius: 50%;
}

.direction-hero__neuro-mark i:nth-child(1) {
    top: -5px;
    left: 24%;
}

.direction-hero__neuro-mark i:nth-child(2) {
    top: 31%;
    right: -5px;
}

.direction-hero__neuro-mark i:nth-child(3) {
    right: 26%;
    bottom: -5px;
}

.direction-hero__neuro-mark i:nth-child(4) {
    top: 58%;
    left: -5px;
}

.direction-hero__system-mark {
    border-top: 1px solid var(--direction-line);
    border-left: 1px solid var(--direction-line);
    transform: translateY(-50%);
}

.direction-hero__system-mark::before,
.direction-hero__system-mark::after {
    position: absolute;
    background: var(--direction-line);
    content: "";
}

.direction-hero__system-mark::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}

.direction-hero__system-mark::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
}

.direction-hero__system-mark i:nth-child(1) {
    top: -5px;
    left: -5px;
}

.direction-hero__system-mark i:nth-child(2) {
    top: -5px;
    right: -5px;
}

.direction-hero__system-mark i:nth-child(3) {
    right: -5px;
    bottom: -5px;
}

.direction-hero__system-mark i:nth-child(4) {
    bottom: -5px;
    left: -5px;
}

.direction-transition {
    display: grid;
    grid-template-columns: minmax(3rem, 0.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    align-items: start;
    margin: 0 0 clamp(3rem, 7vw, 6rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--direction-line-soft);
}

.direction-transition__number {
    margin: 0;
    color: var(--direction-accent-bright);
    font-family: var(--font-interface);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.direction-transition h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 3.25rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.direction-transition > p:last-child {
    max-width: 42ch;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.direction-page .therapy-card__label,
.direction-page .service-card__label,
.direction-page .neurodiversity-card__label,
.direction-page .neurodiversity-step__number,
.direction-page .article-card__link {
    color: var(--direction-accent-bright);
}

.direction-page .therapy-card,
.direction-page .service-card,
.direction-page .neurodiversity-card,
.direction-page .neurodiversity-step,
.direction-page .neurodiversity-principles li,
.direction-page .article-card {
    border-color: var(--direction-line-soft);
}

.direction-page .soft-note,
.direction-page .neurodiversity-note,
.direction-page .neurodiversity-cta {
    border-color: var(--direction-line-soft);
    border-left: 2px solid var(--direction-accent);
    background:
        linear-gradient(
            110deg,
            var(--direction-wash),
            var(--surface) 72%
        );
}

.direction-page .article-collection {
    padding-top: clamp(2rem, 5vw, 4rem);
    border-top: 1px solid var(--direction-line-soft);
}

@media (max-width: 800px) {
    .direction-hero {
        min-height: 0;
    }

    .direction-hero__psi,
    .direction-hero__neuro-mark,
    .direction-hero__system-mark {
        opacity: 0.38;
    }

    .direction-transition {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .direction-transition > p:last-child {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .direction-hero {
        padding: 2rem 1.25rem 3rem;
    }

    .direction-hero::before {
        inset: 10px 10px auto auto;
        width: 7rem;
        height: 4rem;
    }

    .direction-hero h1 {
        font-size: clamp(3rem, 15vw, 4.8rem);
    }

    .direction-hero__psi {
        right: -0.5rem;
        font-size: 10rem;
    }

    .direction-hero__neuro-mark,
    .direction-hero__system-mark {
        right: -4rem;
        width: 13rem;
    }

    .direction-transition {
        grid-template-columns: 1fr;
    }

    .direction-transition > p:last-child {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .direction-hero__neuro-mark {
        transform: translateY(-50%);
    }
}


/* DESIGN SYSTEM GRADIENT BRIDGE */

/*
 * Первый экран сохраняет выразительный язык главной.
 * Его нижняя часть постепенно смешивается с фоном
 * функционального интерфейса.
 */

.direction-hero {
    min-height: min(760px, 82vh);
    margin-bottom: 0;
    padding-bottom: clamp(9rem, 17vw, 15rem);
    border-bottom: 0;
}

.direction-page--psychology .direction-hero,
.direction-page--neurodiversity .direction-hero {
    background:
        radial-gradient(
            circle at 84% 36%,
            rgb(224 139 112 / 0.17),
            transparent 30%
        ),
        linear-gradient(
            118deg,
            var(--bg) 0%,
            color-mix(
                in srgb,
                var(--bg) 74%,
                #743d32
            ) 52%,
            color-mix(
                in srgb,
                var(--bg) 36%,
                #aa5844
            ) 100%
        );
}

.direction-page--methodology .direction-hero {
    background:
        radial-gradient(
            circle at 84% 36%,
            rgb(104 157 170 / 0.16),
            transparent 30%
        ),
        linear-gradient(
            118deg,
            var(--bg) 0%,
            color-mix(
                in srgb,
                var(--bg) 76%,
                #243e45
            ) 54%,
            color-mix(
                in srgb,
                var(--bg) 46%,
                #365c65
            ) 100%
        );
}

/*
 * Нижний слой обложки постепенно возвращает
 * стандартный фон внутренней страницы.
 */

.direction-hero::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: -1;
    height: clamp(13rem, 25vw, 22rem);
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            color-mix(
                in srgb,
                var(--bg) 18%,
                transparent
            ) 20%,
            color-mix(
                in srgb,
                var(--bg) 62%,
                transparent
            ) 58%,
            var(--bg) 100%
        );
    content: "";
}

/*
 * Первый функциональный блок входит в градиент,
 * поэтому смена композиции происходит постепенно.
 */

.direction-hero + * {
    position: relative;
    z-index: 3;
    margin-top: clamp(-6.5rem, -8vw, -4rem);
}

.direction-hero + .reading-tools {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.direction-hero + .therapy-grid,
.direction-hero + .neurodiversity-grid,
.direction-hero + .service-grid {
    padding-top: 0;
}

.direction-page .therapy-card,
.direction-page .service-card,
.direction-page .neurodiversity-card,
.direction-page .neurodiversity-step,
.direction-page .neurodiversity-principles li {
    background:
        linear-gradient(
            145deg,
            var(--direction-wash),
            var(--surface) 58%
        );
    box-shadow:
        0 22px 60px rgb(0 0 0 / 0.08);
}

/*
 * Ниже первого экрана акцент постепенно остаётся
 * только в линиях, метках и интерактивных элементах.
 */

.direction-page
:is(
    .therapy-grid,
    .service-grid,
    .neurodiversity-grid
) {
    position: relative;
    z-index: 3;
}

@media (max-width: 800px) {
    .direction-hero {
        min-height: 0;
        padding-bottom: 10rem;
    }

    .direction-hero + * {
        margin-top: -4.5rem;
    }
}

@media (max-width: 560px) {
    .direction-hero {
        padding-bottom: 8rem;
    }

    .direction-hero + * {
        margin-top: -3.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .direction-hero::after {
        transition: none;
    }
}


/* DIGITAL DIRECTION PAGE */

.direction-section-label {
    margin: 0 0 1rem;
    color: var(--direction-accent-bright);
    font-family: var(--font-interface);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.direction-page--digital
:is(
    .digital-entry,
    .digital-work,
    .digital-case,
    .digital-specializations,
    .digital-contact
) {
    margin-top: clamp(4rem, 9vw, 8rem);
}

.digital-entry__heading,
.digital-work > header,
.digital-specializations > header {
    display: grid;
    grid-template-columns:
        minmax(8rem, 0.4fr)
        minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 4rem);
    margin-bottom: clamp(2rem, 5vw, 4rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--direction-line-soft);
}

.digital-entry__heading h2,
.digital-work h2,
.digital-case h2,
.digital-specializations h2 {
    max-width: 17ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
}

.digital-entry__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.digital-entry__grid .service-card h3 {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    line-height: 1.12;
}

.digital-work__steps {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--direction-line-soft);
    list-style: none;
}

.digital-work__steps li {
    display: grid;
    grid-template-columns:
        minmax(3rem, 0.18fr)
        minmax(12rem, 0.65fr)
        minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--direction-line-soft);
}

.digital-work__steps li > span {
    color: var(--direction-accent-bright);
    font-family: var(--font-interface);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.digital-work__steps h3 {
    margin: 0 0 0.65rem;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    font-weight: 300;
}

.digital-work__steps p {
    max-width: 50ch;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.digital-case {
    padding: clamp(2rem, 6vw, 5rem);
    border: 1px solid var(--direction-line);
    background:
        linear-gradient(
            130deg,
            var(--direction-wash),
            var(--surface) 64%
        );
}

.digital-case__lead {
    max-width: 56ch;
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
    line-height: 1.6;
}

.digital-case__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(2rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--direction-line-soft);
    border-bottom: 1px solid var(--direction-line-soft);
}

.digital-case__facts article {
    padding: clamp(1.25rem, 3vw, 2rem);
    border-right: 1px solid var(--direction-line-soft);
}

.digital-case__facts article:last-child {
    border-right: 0;
}

.digital-case__facts strong {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--direction-accent-bright);
    font-family: var(--font-interface);
}

.digital-case__facts p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.digital-specializations__links {
    display: grid;
    border-top: 1px solid var(--direction-line-soft);
}

.digital-specializations__links > a {
    display: grid;
    grid-template-columns:
        minmax(12rem, 0.75fr)
        minmax(0, 1fr)
        auto;
    gap: clamp(1rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-bottom: 1px solid var(--direction-line-soft);
    color: inherit;
    text-decoration: none;
}

.digital-specializations__links span {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.digital-specializations__links small {
    max-width: 52ch;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.digital-specializations__links b {
    color: var(--direction-accent-bright);
    font-size: 1.3rem;
}

@media (max-width: 800px) {
    .digital-entry__grid,
    .digital-case__facts {
        grid-template-columns: 1fr 1fr;
    }

    .digital-work__steps li {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .digital-case__facts article:nth-child(2) {
        border-right: 0;
    }

    .digital-case__facts article:nth-child(-n + 2) {
        border-bottom: 1px solid var(--direction-line-soft);
    }
}

@media (max-width: 560px) {
    .digital-entry__heading,
    .digital-work > header,
    .digital-specializations > header {
        grid-template-columns: 1fr;
    }

    .digital-entry__grid,
    .digital-case__facts {
        grid-template-columns: 1fr;
    }

    .digital-case {
        padding: 1.5rem 1.25rem;
    }

    .digital-case__facts article {
        border-right: 0;
        border-bottom: 1px solid var(--direction-line-soft);
    }

    .digital-case__facts article:last-child {
        border-bottom: 0;
    }

    .digital-specializations__links > a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .digital-specializations__links small {
        grid-column: 1 / -1;
    }
}


/* FULL WIDTH DIGITAL COVER */

/*
 * Только презентационная обложка выходит за границы
 * стандартного контейнера. Функциональное содержание
 * сохраняет удобную ширину чтения.
 */

.direction-page--digital {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: clip;
}

.direction-page--digital > .direction-hero {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    padding-left:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    border-right: 0;
    border-left: 0;
}

/*
 * После полноширинной сцены контент возвращается
 * к ширине обычной внутренней страницы.
 */

.direction-page--digital > :not(.direction-hero) {
    width: min(
        1040px,
        calc(100% - 3rem)
    );
    margin-right: auto;
    margin-left: auto;
}

.direction-page--digital .direction-hero__copy {
    max-width: 680px;
}

.direction-page--digital .direction-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 12ch;
}

/*
 * Системная схема находится в отдельной правой зоне
 * и больше не пересекается с основной колонкой текста.
 */

.direction-page--digital
.direction-hero__system-mark {
    right:
        max(
            5vw,
            calc((100vw - 1240px) / 2)
        );
    width: clamp(12rem, 23vw, 21rem);
    opacity: 0.46;
}

/*
 * Нижний градиент связывает презентационный экран
 * с функциональной частью страницы.
 */

.direction-page--digital .direction-hero::after {
    height: clamp(14rem, 27vw, 24rem);
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgb(16 17 16 / 0.16) 22%,
            rgb(16 17 16 / 0.62) 62%,
            var(--bg) 100%
        );
}

.direction-page--digital
.direction-hero + * {
    margin-top: clamp(-6rem, -8vw, -4rem);
}

@media (max-width: 800px) {
    .direction-page--digital > .direction-hero {
        padding-right: clamp(1.25rem, 6vw, 3rem);
        padding-left: clamp(1.25rem, 6vw, 3rem);
    }

    .direction-page--digital > :not(.direction-hero) {
        width: min(
            100% - 2.5rem,
            1040px
        );
    }

    .direction-page--digital
    .direction-hero__system-mark {
        right: -3rem;
        width: min(58vw, 20rem);
        opacity: 0.28;
    }
}

@media (max-width: 560px) {
    .direction-page--digital {
        margin-top: -1rem;
    }

    .direction-page--digital > .direction-hero {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .direction-page--digital > :not(.direction-hero) {
        width: calc(100% - 2.5rem);
    }

    .direction-page--digital
    .direction-hero__system-mark {
        right: -5rem;
        width: 16rem;
        opacity: 0.22;
    }

    .direction-page--digital
    .direction-hero + * {
        margin-top: -3.25rem;
    }
}


/* FULL WIDTH PSYCHOLOGY COVERS */

/*
 * Психотерапия и нейроотличия используют одну
 * терракотовую дизайн-систему, но разные символы.
 */

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: clip;
}

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) > .direction-hero {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    padding-left:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    border-right: 0;
    border-left: 0;
    background:
        radial-gradient(
            circle at 84% 34%,
            rgb(235 168 144 / 0.18),
            transparent 29%
        ),
        linear-gradient(
            118deg,
            var(--bg) 0%,
            color-mix(
                in srgb,
                var(--bg) 70%,
                #713b31
            ) 50%,
            color-mix(
                in srgb,
                var(--bg) 34%,
                #ad5943
            ) 100%
        );
}

/*
 * Все последующие функциональные блоки возвращаются
 * к стандартной ширине внутренней страницы.
 */

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) > :not(.direction-hero) {
    width: min(
        1040px,
        calc(100% - 3rem)
    );
    margin-right: auto;
    margin-left: auto;
}

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) .direction-hero__copy {
    max-width: 680px;
}

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) .direction-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 12ch;
}

/*
 * Нижняя часть первого экрана переходит
 * из терракотового фона в обычный фон страницы.
 */

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) .direction-hero::after {
    height: clamp(14rem, 27vw, 24rem);
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            color-mix(
                in srgb,
                var(--bg) 16%,
                transparent
            ) 20%,
            color-mix(
                in srgb,
                var(--bg) 62%,
                transparent
            ) 62%,
            var(--bg) 100%
        );
}

/*
 * Символы находятся в правой части сцены
 * и не пересекаются с текстовой колонкой.
 */

.direction-page--psychology
.direction-hero__psi {
    right:
        max(
            5vw,
            calc((100vw - 1240px) / 2)
        );
    opacity: 0.48;
}

.direction-page--neurodiversity
.direction-hero__neuro-mark {
    right:
        max(
            5vw,
            calc((100vw - 1240px) / 2)
        );
    width: clamp(12rem, 23vw, 21rem);
    opacity: 0.48;
}

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
) .direction-hero + * {
    margin-top: clamp(-6rem, -8vw, -4rem);
}

/*
 * Терракотовый цвет сохраняется в функциональной части
 * только в окантовках, метках и действиях.
 */

:is(
    .direction-page--psychology,
    .direction-page--neurodiversity
)
:is(
    .therapy-card,
    .therapy-process,
    .soft-note,
    .neurodiversity-card,
    .neurodiversity-step,
    .neurodiversity-principles li,
    .neurodiversity-note,
    .neurodiversity-cta
) {
    border-color: var(--direction-line-soft);
}

@media (max-width: 800px) {
    :is(
        .direction-page--psychology,
        .direction-page--neurodiversity
    ) > .direction-hero {
        padding-right: clamp(1.25rem, 6vw, 3rem);
        padding-left: clamp(1.25rem, 6vw, 3rem);
    }

    :is(
        .direction-page--psychology,
        .direction-page--neurodiversity
    ) > :not(.direction-hero) {
        width: min(
            100% - 2.5rem,
            1040px
        );
    }

    .direction-page--psychology
    .direction-hero__psi {
        right: -1rem;
        opacity: 0.28;
    }

    .direction-page--neurodiversity
    .direction-hero__neuro-mark {
        right: -3rem;
        width: min(58vw, 20rem);
        opacity: 0.28;
    }
}

@media (max-width: 560px) {
    :is(
        .direction-page--psychology,
        .direction-page--neurodiversity
    ) {
        margin-top: -1rem;
    }

    :is(
        .direction-page--psychology,
        .direction-page--neurodiversity
    ) > .direction-hero {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    :is(
        .direction-page--psychology,
        .direction-page--neurodiversity
    ) > :not(.direction-hero) {
        width: calc(100% - 2.5rem);
    }

    .direction-page--psychology
    .direction-hero__psi {
        right: -2.5rem;
        font-size: 12rem;
        opacity: 0.2;
    }

    .direction-page--neurodiversity
    .direction-hero__neuro-mark {
        right: -5rem;
        width: 16rem;
        opacity: 0.2;
    }

    :is(
        .direction-page--psychology,
        .direction-page--neurodiversity
    ) .direction-hero + * {
        margin-top: -3.25rem;
    }
}


/* SERVICES ARCHITECTURE */

.services-architecture {
    display: grid;
    gap: clamp(4rem, 9vw, 8rem);
}

.services-architecture__intro {
    max-width: 920px;
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.services-architecture__intro h1 {
    max-width: 13ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 300;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.services-architecture__intro > p:last-child {
    max-width: 650px;
    margin-top: 2rem;
    font-size: clamp(1.1rem, 1.7vw, 1.32rem);
    line-height: 1.6;
}

.services-direction {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--direction-line-soft);
}

.services-direction__header {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(8rem, 0.36fr)
        minmax(0, 1fr)
        minmax(12rem, 0.45fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    min-height: 580px;
    padding: clamp(2rem, 6vw, 5rem);
}

.services-direction--psychology
.services-direction__header {
    background:
        radial-gradient(
            circle at 84% 36%,
            rgb(232 155 129 / 0.18),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            var(--bg),
            color-mix(
                in srgb,
                var(--bg) 38%,
                #a6533f
            )
        );
}

.services-direction--digital
.services-direction__header {
    background:
        radial-gradient(
            circle at 84% 36%,
            rgb(104 157 170 / 0.16),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            var(--bg),
            color-mix(
                in srgb,
                var(--bg) 44%,
                #365c65
            )
        );
}

.services-direction__number {
    margin: 0 0 1.25rem;
    color: var(--direction-accent-bright);
    font-family: var(--font-interface);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
}

.services-direction__header h2 {
    max-width: 15ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5.3vw, 5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.045em;
}

.services-direction__header h2 + p {
    max-width: 620px;
    margin: 1.7rem 0 2rem;
    line-height: 1.65;
}

.services-direction__psi {
    align-self: center;
    color: transparent;
    font-family: Georgia, serif;
    font-size: clamp(10rem, 21vw, 20rem);
    line-height: 0.8;
    opacity: 0.5;
    -webkit-text-stroke:
        1px var(--direction-line);
}

.services-direction__system {
    position: relative;
    align-self: center;
    width: min(100%, 320px);
    aspect-ratio: 1;
    border-top: 1px solid var(--direction-line);
    border-left: 1px solid var(--direction-line);
    opacity: 0.55;
}

.services-direction__system::before,
.services-direction__system::after {
    position: absolute;
    background: var(--direction-line);
    content: "";
}

.services-direction__system::before {
    top: 50%;
    width: 100%;
    height: 1px;
}

.services-direction__system::after {
    left: 50%;
    width: 1px;
    height: 100%;
}

.services-direction__system i {
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid var(--direction-accent);
    background: var(--bg);
}

.services-direction__system i:nth-child(1) {
    top: -5px;
    left: -5px;
}

.services-direction__system i:nth-child(2) {
    top: -5px;
    right: -5px;
}

.services-direction__system i:nth-child(3) {
    right: -5px;
    bottom: -5px;
}

.services-direction__system i:nth-child(4) {
    bottom: -5px;
    left: -5px;
}

.services-direction__routes {
    display: grid;
    padding: 0 clamp(2rem, 6vw, 5rem);
}

.services-direction__routes a {
    display: grid;
    grid-template-columns:
        minmax(12rem, 0.72fr)
        minmax(0, 1fr)
        auto;
    gap: clamp(1rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2.4rem) 0;
    border-top: 1px solid var(--direction-line-soft);
    color: inherit;
    text-decoration: none;
}

.services-direction__routes strong {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.7vw, 2.25rem);
    font-weight: 300;
}

.services-direction__routes span {
    max-width: 52ch;
    color: var(--muted);
    line-height: 1.55;
}

.services-direction__routes b {
    color: var(--direction-accent-bright);
    font-size: 1.3rem;
}

.services-cooperation {
    max-width: 820px;
    padding: clamp(2rem, 5vw, 4rem);
    border-left: 2px solid var(--direction-accent);
    background:
        linear-gradient(
            110deg,
            var(--direction-wash),
            var(--surface) 72%
        );
}

.services-cooperation h2 {
    margin-top: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    font-weight: 300;
    line-height: 1.05;
}

@media (max-width: 800px) {
    .services-direction__header {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .services-direction__psi,
    .services-direction__system {
        width: min(66vw, 18rem);
        margin-left: auto;
    }
}

@media (max-width: 560px) {
    .services-architecture__intro h1 {
        font-size: clamp(3rem, 15vw, 4.8rem);
    }

    .services-direction__header,
    .services-direction__routes {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .services-direction__routes a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .services-direction__routes span {
        grid-column: 1 / -1;
    }
}


/* REFINED SERVICES PROPORTIONS */

/*
 * Страница выходит из стандартного контейнера,
 * а текстовые области получают собственную
 * ограниченную ширину.
 */

.services-architecture {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.services-architecture__intro {
    width: min(
        1040px,
        calc(100% - 3rem)
    );
    margin-right: auto;
    margin-left: auto;
}

.services-direction {
    width: 100%;
    border-right: 0;
    border-left: 0;
}

/*
 * На широком экране заголовок получает достаточную
 * ширину и перестаёт распадаться на отдельные слова.
 */

.services-direction__header {
    grid-template-columns:
        minmax(7rem, 0.24fr)
        minmax(0, 1fr)
        minmax(14rem, 0.42fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    min-height: min(720px, 78vh);
    padding-right:
        max(
            6vw,
            calc((100vw - 1180px) / 2)
        );
    padding-left:
        max(
            6vw,
            calc((100vw - 1180px) / 2)
        );
}

.services-direction__header h2 {
    max-width: 18ch;
    font-size: clamp(3.2rem, 5.4vw, 5.8rem);
    line-height: 0.98;
}

.services-direction__header h2 + p {
    max-width: 620px;
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    line-height: 1.65;
}

/*
 * Маршруты остаются внутри широкой,
 * но контролируемой рабочей области.
 */

.services-direction__routes {
    padding-right:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    padding-left:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
}

.services-direction__routes a {
    min-height: 112px;
}

.services-direction__routes strong {
    font-size: clamp(1.55rem, 2.5vw, 2.35rem);
    line-height: 1.15;
}

.services-direction__routes span {
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.6;
}

.services-direction__psi {
    justify-self: end;
    opacity: 0.44;
}

.services-direction__system {
    justify-self: end;
    opacity: 0.48;
}

.services-cooperation {
    width: min(
        1040px,
        calc(100% - 3rem)
    );
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 1000px) {
    .services-direction__header {
        grid-template-columns:
            minmax(6rem, 0.2fr)
            minmax(0, 1fr);
        min-height: 0;
    }

    .services-direction__psi,
    .services-direction__system {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-width: 800px) {
    .services-direction__header {
        grid-template-columns: 1fr;
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .services-direction__header h2 {
        max-width: 16ch;
        font-size: clamp(3rem, 11vw, 5rem);
    }

    .services-direction__psi,
    .services-direction__system {
        grid-column: 1;
    }

    .services-direction__routes {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

@media (max-width: 560px) {
    .services-architecture__intro,
    .services-cooperation {
        width: calc(100% - 2.5rem);
    }

    .services-direction__header {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .services-direction__header h2 {
        font-size: clamp(2.7rem, 13vw, 4.4rem);
    }

    .services-direction__header h2 + p,
    .services-direction__routes span {
        font-size: 1.05rem;
    }

    .services-direction__routes {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .services-direction__routes a {
        min-height: 0;
    }
}


/* DIGITAL TOOLS DIRECTION PAGE */

.direction-page--digital-tools {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    overflow: clip;
}

.direction-page--digital-tools > .direction-hero {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    padding-left:
        max(
            6vw,
            calc((100vw - 1040px) / 2)
        );
    border-right: 0;
    border-left: 0;
    background:
        radial-gradient(
            circle at 84% 36%,
            rgb(104 157 170 / 0.17),
            transparent 30%
        ),
        linear-gradient(
            118deg,
            var(--bg) 0%,
            color-mix(
                in srgb,
                var(--bg) 75%,
                #243e45
            ) 52%,
            color-mix(
                in srgb,
                var(--bg) 44%,
                #365c65
            ) 100%
        );
}

.direction-page--digital-tools
> :not(.direction-hero) {
    width: min(
        1040px,
        calc(100% - 3rem)
    );
    margin-right: auto;
    margin-left: auto;
}

.direction-page--digital-tools
.direction-hero__copy {
    max-width: 680px;
}

.direction-page--digital-tools
.direction-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 13ch;
}

.direction-page--digital-tools
.direction-hero__system-mark {
    right:
        max(
            5vw,
            calc((100vw - 1240px) / 2)
        );
    width: clamp(12rem, 23vw, 21rem);
    opacity: 0.45;
}

.direction-page--digital-tools
.direction-hero::after {
    height: clamp(14rem, 27vw, 24rem);
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgb(16 17 16 / 0.16) 22%,
            rgb(16 17 16 / 0.62) 62%,
            var(--bg) 100%
        );
}

.direction-page--digital-tools
.direction-hero + * {
    position: relative;
    z-index: 3;
    margin-top: clamp(-6rem, -8vw, -4rem);
}

.direction-page--digital-tools
.services-grid {
    position: relative;
}

.direction-page--digital-tools
.service-card {
    border-color: var(--direction-line-soft);
    background:
        linear-gradient(
            145deg,
            var(--direction-wash),
            var(--surface) 58%
        );
}

@media (max-width: 800px) {
    .direction-page--digital-tools
    > .direction-hero {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .direction-page--digital-tools
    > :not(.direction-hero) {
        width: calc(100% - 3rem);
    }

    .direction-page--digital-tools
    .direction-hero__system-mark {
        right: -3rem;
        width: min(58vw, 20rem);
        opacity: 0.27;
    }
}

@media (max-width: 560px) {
    .direction-page--digital-tools {
        margin-top: -1rem;
    }

    .direction-page--digital-tools
    > .direction-hero {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .direction-page--digital-tools
    > :not(.direction-hero) {
        width: calc(100% - 2.5rem);
    }

    .direction-page--digital-tools
    .direction-hero__system-mark {
        right: -5rem;
        width: 16rem;
        opacity: 0.2;
    }

    .direction-page--digital-tools
    .direction-hero + * {
        margin-top: -3.25rem;
    }
}