main {
    .contacts, .departments, .quote {
        width: calc(100% - 40px);
    }
    .contacts {
        padding: 12px 0 100px;
        .hero {
            position: relative;
            padding-bottom: 50px;
            .banner {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                min-height: 500px;
                padding: 118px 50px 50px;
                border-radius: 20px;
                overflow: hidden;
                &::before, &::after {
                    content: '';
                    position: absolute;
                    pointer-events: none;
                    background-repeat: no-repeat;
                }
                &::before {
                    top: 0;
                    right: 0;
                    width: 822px;
                    height: 500px;
                    background-image: url('../images/contacts-right.svg');
                }
                &::after {
                    top: 0;
                    left: 0;
                    width: 900px;
                    height: 500px;
                    background-image: url('../images/contacts-left.svg');
                    z-index: 1;
                }
                .hero-tag {
                    span::before {
                        content: '\f02f';
                        display: inline-block;
                        width: 20px;
                        line-height: 20px;
                        color: var(--text-10);
                    }
                    b {
                        font-family: inherit;
                        font-feature-settings: normal;
                        color: var(--text-10);
                    }
                }
                .art {
                    position: absolute;
                    right: -21px;
                    bottom: 0;
                    display: block;
                    width: 1005px;
                    height: 472px;
                    object-fit: cover;
                }
                .content {
                    position: relative;
                    z-index: 2;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 24px;
                    width: 644px;
                    max-width: 100%;
                    h1 {
                        font-size: 44px;
                        line-height: 1.1;
                        letter-spacing: -1px;
                        color: var(--text-7);
                    }
                    .links {
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        .phones, > a, > p {
                            position: relative;
                            min-height: 24px;
                            padding-left: 34px;
                            font-size: 18px;
                            font-weight: 500;
                            line-height: 24px;
                            &::before {
                                position: absolute;
                                top: 0;
                                left: 0;
                                font-family: icon;
                                font-size: 24px;
                                font-weight: 400;
                                line-height: 24px;
                                color: var(--text-10);
                            }
                        }
                        .phones {
                            display: flex;
                            flex-direction: column;
                            gap: 12px;
                            &::before {
                                content: '\f002';
                            }
                            a {
                                font-size: 24px;
                                font-weight: 700;
                                line-height: 20px;
                                color: var(--text-10);
                            }
                        }
                        .email::before {
                            content: '\f003';
                        }
                        .address::before {
                            content: '\f000';
                        }
                        .work::before {
                            content: '\f001';
                        }
                        a:hover {
                            color: var(--text-8);
                        }
                    }
                    .social {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 12px;
                        &:not(:has(a)) {
                            display: none;
                        }
                        a {
                            min-height: 50px;
                            line-height: 20px;
                            background: var(--bg-14);
                            &::before {
                                content: '';
                                flex: none;
                                width: 20px;
                                height: 20px;
                            }
                            &:hover {
                                background: var(--bg-9);
                            }
                        }
                    }
                }
            }
            .location {
                position: absolute;
                right: 30px;
                bottom: 0;
                z-index: 3;
                display: flex;
                align-items: center;
                gap: 30px;
                width: 459px;
                max-width: calc(100% - 60px);
                min-height: 100px;
                padding: 30px;
                border-radius: 20px;
                background: var(--bg-4);
                box-shadow: var(--shadow-1);
                p {
                    position: relative;
                    flex: 1;
                    min-width: 0;
                    padding-left: 26px;
                    font-family: SSFBreakthrough;
                    font-feature-settings: normal;
                    font-size: 18px;
                    font-weight: 800;
                    line-height: 20px;
                    color: var(--text-7);
                    &::before {
                        content: '';
                        position: absolute;
                        top: calc(50% - 9px);
                        left: 0;
                        width: 14px;
                        height: 18px;
                        font-family: icon;
                        font-size: 18px;
                        font-weight: 400;
                        line-height: 18px;
                        color: var(--text-10);
                    }
                }
                a {
                    flex: none;
                    gap: 6px;
                    min-width: 125px;
                    padding: 10px 16px;
                    font-size: 14px;
                    line-height: 20px;
                    background: var(--bg-14);
                    &::after {
                        content: '\f02b';
                        width: 20px;
                        height: 20px;
                    }
                    &:hover {
                        background: var(--bg-9);
                    }
                }
            }
        }
    }
    .pickup, .departments, .quote {
        h2 {
            font-family: SSFBreakthrough;
            font-feature-settings: normal;
            font-size: 32px;
            font-weight: 800;
            line-height: 1.1;
            color: var(--text-7);
        }
    }
    .pickup {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-top: 50px;
        .body {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 489px;
            gap: 12px;
        }
        .map {
            position: relative;
            min-width: 0;
            min-height: 400px;
            border-radius: 20px;
            background: var(--bg-3);
            overflow: hidden;
            .canvas {
                position: absolute;
                inset: 0;
                z-index: 0;
            }
            .marker {
                display: block;
                width: 150px;
                height: 150px;
                transform: translate(-50%, -100%);
            }
            .zoom {
                position: absolute;
                right: 30px;
                bottom: 30px;
                display: flex;
                flex-direction: column;
                border-radius: 10px;
                background: var(--bg-4);
                box-shadow: var(--shadow-1);
                overflow: hidden;
                button {
                    display: grid;
                    place-items: center;
                    width: 38px;
                    height: 38px;
                    background: var(--bg-4);
                    font-size: 23px;
                    line-height: 1;
                    color: var(--text-7);
                    &:first-child {
                        border-bottom: var(--border-9);
                    }
                    &:hover {
                        background: var(--bg-8);
                    }
                }
            }
            .coordinates {
                position: absolute;
                left: 30px;
                bottom: 30px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 10px;
                max-width: calc(100% - 110px);
                padding: 13px 18px;
                border-radius: 12px;
                background: var(--bg-4);
                box-shadow: var(--shadow-1);
                font-size: 12px;
                line-height: 14px;
                span {
                    font: inherit;
                    color: inherit;
                }
                &::before, &::after {
                    content: '';
                    flex: none;
                    font-family: icon;
                    font-weight: 400;
                }
                &::before {
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                    line-height: 20px;
                    color: var(--text-10);
                }
                &::after {
                    width: 14px;
                    height: 14px;
                    font-size: 14px;
                    line-height: 14px;
                }
                &:hover {
                    background: var(--bg-8);
                }
            }
        }
        .rules {
            display: flex;
            flex-direction: column;
            gap: 16px;
            min-width: 0;
            min-height: 400px;
            padding: 30px;
            border-radius: 20px;
            background: var(--bg-3);
            h3 {
                max-width: 300px;
                font-family: SSFBreakthrough;
                font-feature-settings: normal;
                font-size: 28px;
                font-weight: 800;
                line-height: 1.1;
                text-wrap: balance;
                color: var(--text-7);
            }
            ul {
                display: flex;
                flex-direction: column;
                gap: 10px;
                list-style: none;
            }
            li {
                display: flex;
                align-items: center;
                gap: 10px;
                line-height: 20px;
                &::before {
                    content: '\f023';
                    display: grid;
                    place-items: center;
                    flex: none;
                    width: 32px;
                    height: 32px;
                    border-radius: 10px;
                    background: var(--bg-8);
                    font-family: icon;
                    font-size: 20px;
                    font-weight: 400;
                    color: var(--text-10);
                }
            }
            > a {
                gap: 6px;
                min-height: 50px;
                margin-top: auto;
                padding: 15px 16px;
                background: var(--bg-4);
                font-size: 14px;
                line-height: 20px;
                color: var(--text-1);
                img {
                    display: block;
                    flex: none;
                }
                &:hover {
                    background: var(--bg-8);
                }
            }
        }
    }
    .departments {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-bottom: 100px;
        .cards {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .item {
            display: flex;
            gap: 10px;
            min-width: 0;
            min-height: 158px;
            padding: 30px;
            border-radius: 16px;
            background: var(--bg-3);
            &.sales {
                .content {
                    &::before {
                        content: '\f02c';
                    }
                }
            }
            &.procurement {
                .content {
                    &::before {
                        content: '\f02d';
                    }
                }
            }
            &.accounting {
                .content {
                    &::before {
                        content: '\f02e';
                    }
                }
            }
            &.office {
                .content {
                    &::before {
                        content: '\f02f';
                    }
                }
            }
            &.logistics {
                .content {
                    &::before {
                        content: '\f030';
                    }
                }
            }
            &.director {
                .content {
                    &::before {
                        content: '\f031';
                    }
                }
            }
            .content {
                position: relative;
                flex: 1;
                min-width: 0;
                padding-left: 56px;
                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: grid;
                    place-items: center;
                    width: 40px;
                    height: 40px;
                    border-radius: 12px;
                    background: var(--bg-4);
                    font-family: icon;
                    font-size: 20px;
                    font-weight: 400;
                    color: var(--text-10);
                }
                h3 {
                    font-family: SSFBreakthrough;
                    font-feature-settings: normal;
                    font-size: 20px;
                    font-weight: 800;
                    line-height: 1.1;
                    color: var(--text-7);
                }
                p {
                    font-size: 14px;
                    line-height: 20px;
                }
            }
        }
        .links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            margin-top: 10px;
            a {
                max-width: 100%;
                overflow-wrap: anywhere;
                &:hover {
                    color: var(--text-7);
                }
            }
            .phone {
                font-size: 20px;
                font-weight: 700;
                line-height: 20px;
                color: var(--text-10);
            }
            .email {
                line-height: 19.5px;
                color: var(--text-8);
            }
        }
        .extra {
            display: flex;
            flex: none;
            flex-direction: column;
            justify-content: flex-end;
            gap: 12px;
            width: 191px;
            padding-left: 10px;
            border-left: 1px solid var(--bg-4);
            .note {
                font-size: 14px;
                line-height: 20px;
                text-align: right;
                overflow-wrap: anywhere;
            }
            .social {
                display: flex;
                gap: 12px;
                a {
                    display: grid;
                    place-items: center;
                    flex: 1;
                    min-width: 0;
                    min-height: 50px;
                    border-radius: 12px;
                    background: var(--bg-4);
                    transition: background 0.15s ease-out;
                    &::before {
                        content: '';
                        font-family: icon;
                        font-size: 20px;
                        font-weight: 400;
                        line-height: 20px;
                    }
                    &:hover {
                        background: var(--bg-8);
                    }
                }
            }
            .sample {
                min-height: 50px;
                padding: 15px 12px;
                background: var(--bg-4);
                font-size: 14px;
                line-height: 20px;
                color: var(--text-1);
                &:hover {
                    background: var(--bg-8);
                }
            }
        }
    }
    .quote {
        padding-bottom: 100px;
        .body {
            position: relative;
            padding: 50px;
            border-radius: 20px;
            background: var(--bg-3);
            overflow: hidden;
        }
        .art {
            position: absolute;
            top: 6px;
            left: 565px;
            display: block;
            width: 1054px;
            height: auto;
            pointer-events: none;
        }
        .content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 754px;
            max-width: 100%;
        }
        .head {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            p {
                font-size: 14px;
                line-height: 20px;
            }
        }
        form {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }
        .fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
        .field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
            &.wide {
                grid-column: 1 / -1;
            }
            span {
                font-size: 13px;
                font-weight: 700;
                line-height: 16px;
            }
            input, textarea {
                width: 100%;
                min-width: 0;
                padding: 12px 14px;
                border: 1px solid var(--bg-8);
                border-radius: 12px;
                background: var(--bg-4);
                font-size: 14px;
                line-height: 20px;
                color: var(--text-7);
                &::placeholder {
                    color: var(--text-3);
                }
                &:focus-visible {
                    outline: 2px solid var(--bg-14);
                    outline-offset: 2px;
                }
            }
            input {
                height: 46px;
            }
            textarea {
                min-height: 120px;
                padding: 14px;
                resize: vertical;
            }
        }
        .actions {
            display: flex;
            align-items: flex-end;
            gap: 20px;
            .btn {
                flex: none;
                width: 320px;
                min-height: 50px;
                font-size: 14px;
                line-height: 20px;
                &::after {
                    content: '\f009';
                    flex: none;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                }
                &:disabled {
                    cursor: default;
                }
            }
        }
        .consent {
            display: flex;
            flex: 1;
            align-items: center;
            gap: 10px;
            min-width: 0;
            input {
                appearance: none;
                display: grid;
                place-items: center;
                flex: none;
                width: 20px;
                height: 20px;
                border: var(--border-2);
                border-radius: 6px;
                background: var(--bg-3);
                cursor: pointer;
                &::before {
                    content: '\f023';
                    font-family: icon;
                    font-size: 10px;
                    color: var(--text-6);
                    opacity: 0;
                }
                &:checked {
                    background: var(--bg-14);
                    &::before {
                        opacity: 1;
                    }
                }
            }
            p {
                min-width: 0;
                font-size: 12px;
                line-height: 18px;
            }
            label {
                font: inherit;
                color: var(--text-3);
                cursor: pointer;
            }
            a {
                display: block;
                font: inherit;
                color: var(--text-8);
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        input.invalid, textarea.invalid {
            border-color: var(--text-9);
        }
        .status {
            font-size: 14px;
            line-height: 20px;
            &:empty {
                display: none;
            }
            &.success {
                color: var(--text-8);
            }
            &.error {
                color: var(--text-9);
            }
        }
    }
}
@media screen and (max-width: 1279px) {
    main {
        .contacts, .departments, .quote {
            width: calc(100% - 48px);
        }
        .contacts {
            padding-bottom: 80px;
            .hero {
                padding-bottom: 0;
                .banner {
                    min-height: 0;
                    padding: 24px;
                    background: var(--bg-3);
                    &::before, &::after {
                        display: none;
                    }
                    .hero-tag {
                        position: relative;
                        top: auto;
                        left: -24px;
                        width: max-content;
                        max-width: calc(100% + 24px);
                        margin-bottom: 24px;
                        padding-left: 24px;
                        flex-wrap: wrap;
                    }
                    .art {
                        position: static;
                        order: 1;
                        width: 100%;
                        height: auto;
                        margin-top: 24px;
                        border-radius: 16px;
                    }
                    .content {
                        width: 100%;
                        h1 {
                            font-size: 32px;
                        }
                        .links {
                            width: 100%;
                            overflow-wrap: anywhere;
                        }
                    }
                }
                .location {
                    position: relative;
                    right: auto;
                    bottom: auto;
                    width: 100%;
                    max-width: none;
                    margin-top: 12px;
                    padding: 20px;
                    gap: 16px;
                }
            }
            .pickup {
                gap: 20px;
                margin-top: 40px;
                h2 {
                    font-size: 28px;
                }
                .body {
                    grid-template-columns: minmax(0, 1fr);
                    .rules {
                        min-height: 0;
                        padding: 24px;
                        h3 {
                            max-width: none;
                            font-size: 24px;
                        }
                        > a {
                            margin-top: 14px;
                        }
                    }
                }
            }
        }
        .departments {
            gap: 20px;
            padding-bottom: 80px;
            h2 {
                font-size: 28px;
            }
            .cards {
                grid-template-columns: minmax(0, 1fr);
                .item {
                    padding: 24px;
                    .content {
                        overflow-wrap: anywhere;
                    }
                }
            }
        }
        .quote {
            padding-bottom: 80px;
            .body {
                display: flex;
                flex-direction: column;
                padding: 24px;
                .art {
                    position: static;
                    order: 1;
                    align-self: center;
                    width: 100%;
                    max-width: 600px;
                    margin-top: 24px;
                }
                .content {
                    width: 100%;
                    min-width: 0;
                    .head {
                        h2 {
                            font-size: 28px;
                        }
                    }
                    form {
                        .fields {
                            .field {
                                justify-content: flex-end;
                            }
                        }
                        .actions {
                            .consent {
                                align-items: flex-start;
                            }
                            .btn {
                                max-width: 100%;
                            }
                        }
                        .status {
                            overflow-wrap: anywhere;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    main {
        .contacts, .departments, .quote {
            width: calc(100% - 32px);
        }
        .contacts {
            padding-bottom: 60px;
            .hero {
                .banner {
                    padding: 16px;
                    border-radius: 16px;
                    .hero-tag {
                        left: -16px;
                        max-width: calc(100% + 16px);
                        margin-bottom: 20px;
                        padding-left: 16px;
                        font-size: 12px;
                        span::before {
                            margin-right: 8px;
                        }
                    }
                    .art {
                        margin-top: 20px;
                    }
                    .content {
                        gap: 20px;
                        h1 {
                            font-size: 26px;
                            letter-spacing: 0;
                        }
                        .links {
                            gap: 10px;
                            .phones, > a, > p {
                                padding-left: 28px;
                                font-size: 14px;
                                line-height: 20px;
                                &::before {
                                    font-size: 20px;
                                    line-height: 20px;
                                }
                            }
                            .phones {
                                gap: 8px;
                                a {
                                    font-size: 20px;
                                    line-height: 24px;
                                }
                            }
                        }
                        .social {
                            width: 100%;
                            gap: 8px;
                            a {
                                flex: 1;
                                min-width: 0;
                                min-height: 46px;
                                padding: 12px 10px;
                                font-size: 14px;
                            }
                        }
                    }
                }
                .location {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 12px;
                    min-height: 0;
                    padding: 16px;
                    border-radius: 16px;
                    p {
                        font-size: 16px;
                        overflow-wrap: anywhere;
                    }
                    a {
                        width: 100%;
                        min-height: 44px;
                    }
                }
            }
            .pickup {
                gap: 16px;
                margin-top: 32px;
                h2 {
                    font-size: 22px;
                }
                .body {
                    gap: 8px;
                    .map {
                        min-height: 320px;
                        border-radius: 16px;
                        .marker {
                            width: 110px;
                            height: 110px;
                        }
                        .zoom {
                            top: 12px;
                            right: 12px;
                            bottom: auto;
                            button {
                                width: 40px;
                                height: 40px;
                            }
                        }
                        .coordinates {
                            left: 12px;
                            bottom: 12px;
                            max-width: calc(100% - 24px);
                            gap: 6px;
                            padding: 10px 12px;
                            text-align: left;
                            .value {
                                min-width: 0;
                                overflow-wrap: anywhere;
                            }
                        }
                    }
                    .rules {
                        padding: 16px;
                        border-radius: 16px;
                        h3 {
                            font-size: 22px;
                        }
                        li {
                            align-items: flex-start;
                            font-size: 14px;
                            overflow-wrap: anywhere;
                        }
                        > a {
                            flex-wrap: wrap;
                            min-height: 46px;
                            margin-top: 4px;
                            padding: 12px 10px;
                        }
                    }
                }
            }
        }
        .departments {
            gap: 16px;
            padding-bottom: 60px;
            h2 {
                font-size: 22px;
            }
            .cards {
                gap: 8px;
                .item {
                    flex-direction: column;
                    gap: 16px;
                    min-height: 0;
                    padding: 16px;
                    .content {
                        padding-left: 44px;
                        &::before {
                            width: 32px;
                            height: 32px;
                            border-radius: 10px;
                            font-size: 18px;
                        }
                        h3 {
                            font-size: 18px;
                        }
                        .links {
                            .phone {
                                font-size: 18px;
                                line-height: 24px;
                            }
                            .email {
                                font-size: 14px;
                                line-height: 20px;
                            }
                        }
                    }
                    .extra {
                        width: 100%;
                        padding-top: 12px;
                        padding-left: 0;
                        border-top: 1px solid var(--bg-4);
                        border-left: 0;
                        .note {
                            text-align: left;
                        }
                        .social {
                            width: 100%;
                            gap: 8px;
                            a {
                                min-height: 44px;
                            }
                        }
                        .sample {
                            width: 100%;
                            min-height: 46px;
                            padding: 12px;
                        }
                    }
                }
            }
        }
        .quote {
            padding-bottom: 60px;
            .body {
                padding: 16px;
                border-radius: 16px;
                .art {
                    margin-top: 20px;
                }
                .content {
                    gap: 20px;
                    .head {
                        gap: 8px;
                        h2 {
                            font-size: 22px;
                        }
                    }
                    form {
                        gap: 20px;
                        .fields {
                            grid-template-columns: minmax(0, 1fr);
                            gap: 12px;
                            .field {
                                input, textarea {
                                    font-size: 16px;
                                }
                            }
                        }
                        .actions {
                            flex-direction: column;
                            align-items: stretch;
                            gap: 16px;
                            .consent {
                                flex: none;
                            }
                            .btn {
                                width: 100%;
                                min-height: 46px;
                                padding: 12px 14px;
                            }
                        }
                    }
                }
            }
        }
    }
}