/*
 * Trud Expertiza — visual system v2
 * Loaded after the legacy styles. Keeps Bitrix markup and behaviour intact.
 */

:root {
    --page-max: 1440px;
    --page-gutter: clamp(16px, 2.5vw, 32px);
    --section-space: clamp(72px, 8vw, 112px);
    --surface-space: clamp(24px, 3vw, 48px);
    --card-space: clamp(20px, 2.2vw, 32px);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --shadow-soft: 0 12px 40px rgba(18, 38, 30, 0.06);
    --black: #17201d;
    --bg-grey: #f4f6f5;
    --grey: #a7afab;
    --green-light: #13b86a;
    --green-medium: #087d50;
    --green-dark: #07573a;
    --main-gradient: linear-gradient(135deg, #087d50 0%, #13b86a 100%);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.55;
    color: var(--black);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

a,
button,
input,
textarea,
select,
[tabindex] {
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(18, 193, 111, 0.38);
}

.container,
.header-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
}

.section {
    margin-top: var(--section-space);
}

.section-top {
    margin-top: clamp(36px, 4vw, 56px);
}

.title-h1 {
    font-size: clamp(38px, 4.6vw, 66px);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.title-h2 {
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.title-h4 {
    font-size: clamp(23px, 2.2vw, 32px);
    line-height: 1.28;
    letter-spacing: -0.015em;
}

.title-h5,
.section-grid .section-grid__title,
.stages-work__name,
.footer__title {
    font-size: clamp(19px, 1.7vw, 24px);
    line-height: 1.3;
}

.description,
.advantages-description .advantages-description__text,
.attention .attention__text,
.stages-work__text,
.hero-adv .hero-adv__text {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.55;
}

.text-xl,
.reviews__text {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.42;
}

.header-container {
    margin-top: 16px;
    margin-bottom: 20px;
    padding: 0;
}

.header,
.hero,
.advantages,
.attention,
.stages-work,
.about-company,
.breadcrumb,
.footer__top,
.footer__bottom {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.header {
    min-height: 78px;
    padding: 16px 22px;
}

.header-fixed {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--page-max));
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 12px 40px rgba(18, 38, 30, 0.12);
}

.logo {
    gap: 10px;
}

.logo .logo__text {
    font-size: clamp(15px, 1.2vw, 18px);
    letter-spacing: -0.02em;
}

.menu {
    gap: clamp(14px, 1.5vw, 24px);
}

.menu .menu__item .menu__link,
.phone,
.btn {
    font-size: 16px;
}

.menu .menu__item .menu__link {
    line-height: 1.25;
    transition: color .2s ease, opacity .2s ease;
}

.menu .menu__item .menu__link:hover {
    color: var(--green-medium);
}

.btn,
.hero__btn,
.btn--card,
.btn-services,
.breadcrumb-btn,
.notice__btn {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.hero {
    padding: clamp(16px, 2.1vw, 30px);
}

.hero .hero__top {
    gap: clamp(14px, 1.8vw, 24px);
}

.hero .hero__slider {
    padding: clamp(32px, 4vw, 58px) clamp(24px, 3.4vw, 48px) clamp(24px, 2.5vw, 36px);
    border-radius: var(--radius-md);
}

.hero .hero__img,
.swiper-services__img,
.articles__img,
.services__img,
.swiper-gallery__img img,
.swiper-reviews__wrapper-img {
    border-radius: var(--radius-md);
}

.swiper-hero__text {
    margin-top: clamp(18px, 2vw, 28px);
}

.swiper-hero__bottom {
    margin-top: clamp(42px, 5vw, 68px);
}

.hero__btn {
    padding: 15px clamp(30px, 5vw, 76px);
    margin-top: clamp(28px, 3vw, 40px);
}

.hero-adv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.hero-adv .hero-adv__item {
    justify-content: flex-start;
    padding: clamp(20px, 2vw, 28px);
    border-radius: var(--radius-md);
}

.advantages,
.stages-work,
.about-company {
    padding: var(--surface-space);
}

.advantages .advantages__head,
.wrapper,
.stages-work {
    gap: clamp(32px, 5vw, 72px);
}

.advantages .advantages__title,
.stages-work__title {
    min-width: min(40%, 480px);
}

.advantages-description {
    gap: 18px;
}

.section-grid {
    gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(30px, 4vw, 52px);
}

.section-grid .section-grid__item {
    padding: var(--card-space);
    border-radius: var(--radius-md);
}

.section-grid .section-grid__order {
    margin-bottom: clamp(36px, 5vw, 58px);
}

.section-grid .section-grid__description {
    margin-top: 12px;
    line-height: 1.55;
}

.attention {
    gap: clamp(30px, 5vw, 72px);
    padding: var(--surface-space);
}

.attention .attention__info,
.attention .attention__form {
    width: 50%;
}

.attention .attention__form {
    padding: clamp(24px, 3.4vw, 48px);
    border-radius: var(--radius-md);
}

.attention .attention__subtitle {
    margin-top: clamp(24px, 3vw, 34px);
}

.attention .attention__text {
    margin-top: 14px;
}

.form {
    gap: 16px;
    margin-top: 28px;
}

.form__input,
.form .form__input,
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
    min-height: 50px;
    border-radius: 999px;
}

textarea {
    border-radius: var(--radius-sm);
}

.swiper-services__wrapper,
.gallery__wrapper,
.swiper-gallery__wrapper,
.swiper-reviews__wrapper,
.office__wrapper,
.office-tabs__wrapper {
    margin-top: clamp(24px, 3vw, 36px);
}

.swiper-services__card,
.services__card,
.articles__card,
.swiper-reviews__card {
    padding: var(--card-space);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
}

.swiper-services__card-description,
.services__card-description,
.articles__card-description {
    margin-top: 20px;
}

.swiper-services__text,
.services__text,
.articles__text {
    line-height: 1.55;
}

.swiper-services__card-bottom,
.services__card-bottom,
.articles__card-bottom {
    margin-top: clamp(28px, 4vw, 44px);
    gap: 16px;
}

.stages-work__list {
    gap: 12px;
}

.stages-work__item {
    gap: 20px;
    padding: clamp(20px, 2.2vw, 28px);
    border-radius: var(--radius-md);
}

.about-company__text {
    line-height: 1.6;
}

.gallery {
    width: 100%;
}

.swiper-gallery {
    margin-top: -36px;
}

.swiper-gallery__btn-wrapper {
    padding-right: 0;
}

.gallery-tabs__list,
.office-tabs__list {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.gallery-tabs__list li,
.office-tabs__list li {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px clamp(24px, 3.5vw, 48px);
}

.reviews {
    gap: 28px;
}

.swiper-reviews__card {
    padding: clamp(20px, 2.5vw, 34px);
}

.swiper-reviews__wrapper-img {
    padding: clamp(16px, 2vw, 24px);
}

.map iframe {
    height: clamp(380px, 45vw, 560px);
    border-radius: var(--radius-lg);
}

.contacts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.contacts__item {
    min-height: 112px;
    padding: clamp(20px, 2.2vw, 30px);
    border-radius: var(--radius-md);
}

.contacts__item .contacts__text,
.contacts__item--white .contacts__link {
    font-size: clamp(18px, 1.7vw, 23px);
}

.footer__top {
    padding: clamp(30px, 4vw, 52px);
    gap: clamp(28px, 4vw, 52px);
}

.footer__list {
    gap: 10px;
}

.footer__link {
    font-size: 15px;
    line-height: 1.5;
}

.footer-contacts__link,
.footer-contacts__text {
    font-size: clamp(17px, 1.6vw, 22px);
}

.footer__bottom {
    margin-top: 12px;
    padding: 22px clamp(24px, 4vw, 52px);
}

.footer__info {
    gap: clamp(30px, 7vw, 110px);
}

.breadcrumb {
    padding: clamp(16px, 2vw, 28px);
}

.breadcrumb__wrapper {
    padding: clamp(30px, 4vw, 52px);
    border-radius: var(--radius-md);
}

@media (max-width: 1180px) {
    .hero-adv {
        grid-template-columns: 1fr;
    }

    .hero-adv .hero-adv__item {
        min-height: 88px;
    }

    .contacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    :root {
        --section-space: clamp(64px, 9vw, 84px);
    }

    .hero .hero__top,
    .attention,
    .stages-work,
    .advantages .advantages__head,
    .wrapper {
        flex-direction: column;
    }

    .hero .hero__slider,
    .hero .hero__img,
    .attention .attention__info,
    .attention .attention__form,
    .wrapper__info {
        width: 100%;
    }

    .hero .hero__img {
        aspect-ratio: 16 / 8;
    }

    .hero .hero__img img {
        width: 100%;
        object-fit: cover;
    }

    .advantages .advantages__title,
    .stages-work__title {
        min-width: 0;
    }

    .section-grid--advantages,
    .section-grid--about-company {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --page-gutter: 14px;
        --section-space: 64px;
        --surface-space: 24px;
        --card-space: 22px;
        --radius-lg: 20px;
        --radius-md: 16px;
    }

    .header-container {
        margin-top: 10px;
        margin-bottom: 14px;
    }

    .header {
        min-height: 68px;
        padding: 14px 16px;
    }

    .header-resolution__wrapper {
        top: calc(100% + 12px);
    }

    .hero .hero__img {
        aspect-ratio: 4 / 3;
    }

    .section-grid--advantages,
    .section-grid--about-company,
    .contacts {
        grid-template-columns: 1fr;
    }

    .section-grid .section-grid__order {
        margin-bottom: 28px;
    }

    .swiper-gallery {
        margin-top: 18px;
    }

    .swiper-gallery__img img {
        width: 100%;
    }

    .gallery-tabs__list,
    .office-tabs__list {
        width: 100%;
    }

    .gallery-tabs__list li,
    .office-tabs__list li {
        flex: 0 0 auto;
        padding-left: 22px;
        padding-right: 22px;
    }

    .footer__top,
    .footer__bottom {
        grid-template-columns: 1fr;
    }

    .footer__info {
        grid-column: auto;
        grid-row: auto;
        align-items: flex-start;
        gap: 16px;
    }

    .confidence-link {
        text-align: left;
    }
}

@media (max-width: 480px) {
    :root {
        --page-gutter: 10px;
        --section-space: 52px;
        --surface-space: 18px;
        --card-space: 18px;
        --radius-lg: 18px;
        --radius-md: 14px;
    }

    .title-h1 {
        font-size: clamp(31px, 10vw, 40px);
        line-height: 1.08;
    }

    .title-h2 {
        font-size: clamp(27px, 8vw, 34px);
    }

    .logo img {
        width: 38px;
    }

    .logo .logo__text {
        font-size: 13px;
    }

    .btn-phone,
    .btn-menu {
        width: 44px;
        height: 44px;
    }

    .hero {
        padding: 10px;
    }

    .hero .hero__slider {
        padding: 24px 20px 20px;
    }

    .hero .hero__img {
        aspect-ratio: 16 / 10;
    }

    .hero__btn,
    .btn--card,
    .btn-services,
    .notice__btn {
        width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .swiper-hero__bottom {
        margin-top: 34px;
    }

    .hero-adv .hero-adv__item {
        min-height: 0;
        padding: 16px;
    }

    .section-grid .section-grid__item,
    .stages-work__item {
        padding: 18px;
    }

    .stages-work__item {
        align-items: flex-start;
    }

    .swiper-services__card-bottom,
    .services__card-bottom,
    .articles__card-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .map iframe {
        height: 360px;
    }

    .contacts__item {
        min-height: 88px;
    }

    .footer__top,
    .footer__bottom {
        padding: 24px 20px;
    }
}

@media (max-width: 360px) {
    .logo__header {
        display: none;
    }

    .header__btn-wrapper {
        gap: 8px;
    }

    .title-h1 {
        font-size: 30px;
    }

    .title-h2 {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}