/*
Theme Name: Design Band
Author: Design Band
Version: 1.0
*/

/* Сброс + базовые стили */

@font-face {
	font-family: 'Lato';
	src: url('font/lato-light.eot');
	src: url('font/lato-light.eot?#iefix') format('embedded-opentype'),
		url('font/lato-light.woff2') format('woff2'),
		url('font/lato-light.woff') format('woff'),
		url('font/lato-light.ttf') format('truetype'),
		url('font/lato-light.svg#Lato-Regular') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Lato';
	src: url('font/lato-regular.eot');
	src: url('font/lato-regular.eot?#iefix') format('embedded-opentype'),
		url('font/lato-regular.woff2') format('woff2'),
		url('font/lato-regular.woff') format('woff'),
		url('font/lato-regular.ttf') format('truetype'),
		url('font/lato-regular.svg#Lato-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Lato';
	src: url('font/lato-medium.eot');
	src: url('font/lato-medium.eot?#iefix') format('embedded-opentype'),
		url('font/lato-medium.woff2') format('woff2'),
		url('font/lato-medium.woff') format('woff'),
		url('font/lato-medium.ttf') format('truetype'),
		url('font/lato-medium.svg#Lato-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Lato';
	src: url('font/lato-semibold.eot');
	src: url('font/lato-semibold.eot?#iefix') format('embedded-opentype'),
		url('font/lato-semibold.woff2') format('woff2'),
		url('font/lato-semibold.woff') format('woff'),
		url('font/lato-semibold.ttf') format('truetype'),
		url('font/lato-semibold.svg#Lato-Semibold') format('svg');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Lato';
	src: url('font/lato-bold.eot');
	src: url('font/lato-bold.eot?#iefix') format('embedded-opentype'),
		url('font/lato-bold.woff2') format('woff2'),
		url('font/lato-bold.woff') format('woff'),
		url('font/lato-bold.ttf') format('truetype'),
		url('font/lato-bold.svg#Lato-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}


:root {
    /* ===== ЦВЕТА ===== */
    --color-bg: #FBF6F0;
    --color-text: #444444;
    --color-border: #444444;
    --color-white: #FBF6F0;

    /* ===== ТИПОГРАФИКА ===== */
    --font-family: "Lato", sans-serif;

    /* Размеры шрифтов */
    --text-title: 110px;
    --text-page: 16px;
    --text-card-title: 32px;
    --text-card-description: 16px;
    --text-card-big-title: 54px;
    --text-card-big-description: 32px;
    --section-title-size: 48px;
    --section-title-line-height: 58px;

    /* Межстрочные интервалы */
    --leading-tight: 1.2;
    /* Заголовки */
    --leading-normal: 1.5;
    /* Основной текст */
    --leading-relaxed: 1.6;
    /* Описания */

    /* ===== СКРУГЛЕНИЯ ===== */
    --radius-main: 30px;

    /* ===== ГРАНИЦЫ ===== */
    --border-width: 3px;
    --border-type: solid;
    --border-color: #444444;

    /* ===== СЕТКА ===== */
    --container-max: 1780px;
    --grid-gap: 80px;
    --grid-columns: repeat(4, 1fr);

    /* ===== ТЕНИ (если понадобятся) ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
}

@media (max-width: 1800px) {
    :root {
        --container-max: calc(100% - 80px);

        /* Размеры шрифтов */
        --text-title: 110px;
        --text-page: 16px;
        --text-card-title: 28px;
        --text-card-description: 16px;
        --text-card-big-title: 54px;
        --text-card-big-description: 32px;
    }
}

@media (max-width: 1600px) {
    :root {
        --container-max: calc(100% - 80px);
        --grid-gap: 60px;

        /* Размеры шрифтов */
        --text-title: 90px;
        --text-page: 16px;
        --text-card-title: 26px;
        --text-card-description: 16px;
        --text-card-big-title: 44px;
        --text-card-big-description: 26px;
    }
}

@media (max-width: 1500px) {
    :root {
        --text-card-title: 26px;
    }
}

@media (max-width: 1400px) {
    :root {
        --grid-columns: repeat(2, 1fr);
        --text-card-big-description: 22px;
    }
}

@media (max-width: 1300px) {
    :root {
        --text-card-big-title: 36px;
    }
}

@media (max-width: 1100px) {
    :root {
        --grid-gap: 40px;
        --text-card-big-title: 32px;
    }
}

@media (max-width: 920px) {
    :root {
        --text-card-big-title: 24px;
        --text-card-big-description: 18px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-max: calc(100% - 56px);
        --grid-columns: repeat(2, 1fr);
        --grid-gap: 16px;
        --radius-main: 20px;
        --border-width: 2px;

        /* Размеры шрифтов */
        --text-title: 32px;
        --text-page: 16px;
        --text-card-title: 22px;
        --text-card-description: 16px;
        --text-card-big-title: 22px;
        --text-card-big-description: 16px;
    }
}


*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    overflow-x: clip;

    font-family: var(--font-family);
    line-height: 1.5;
    font-weight: 400;
    font-style: normal;
    color: var(--color-text);
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    min-height: 100vh;
    overflow-x: clip;
    background: var(--color-bg);
}

a {
    color: var(--color-text);
    text-decoration: none;

    transition: 500ms ease;
}

a:hover {
    opacity: 0.5;
}


input,
textarea,
select,
button {
    outline: none;          
    border: none;           
    box-shadow: none;        
    appearance: none;       
    -webkit-appearance: none; 
    background: none;        
}

input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
}

.section-title {
    margin-bottom: 28px;

    font-weight: 600;
    font-size: var(--section-title-size);
    line-height: var(--section-title-line-height);
}

.section-subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    padding-top: 2px;
    background: var(--color-border);
    border-radius: 7px;

    font-family: var(--font-family);
    color: var(--color-white);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 10%;
    text-transform: uppercase;

}

.mob-btn {
    display: none;
}






/* slider */
.slider {
    position: relative;
    overflow: hidden;
    overflow-anchor: none;
    width: 100%;
    height: auto;
}

.slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: var(--radius-main);
	overflow: hidden;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

/* Активный слайд видим */
.slider__slide.active {
    opacity: 1;
    z-index: 2;
}

.slider__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-main);
}

.slider-dots {
    position: absolute;
    bottom: 30px;
    left: 65px;
    display: flex;
    gap: 18px;
    z-index: 10;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #FBF6F0;
    cursor: pointer;
    transition: 0.2s;
}

.slider-dot.active {
    background-color: #FBF6F0;
}

/* Адаптация под светлый фон (опционально) */
.slider.light-bg .slider-dot {
    background-color: rgba(0, 0, 0, 0.5);
}
.slider.light-bg .slider-dot.active {
    background-color: #000;
}






.header {
    margin-bottom: 48px;
}

.header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.header__logo {
    display: flex;
    width: 192px;
}

.header__logo a {
    width: 100%;
    height: auto;
}

.header__logo svg {
    width: 100%;
    height: auto;
}

.header__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
}

.header__link {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 10px;

    font-size: 18px;
    line-height: 1;
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 10%;

    transition: 500ms ease;
}

.header__nav .header__link:not(.current) {
    opacity: 0.5;
}

.header__phone {
    width: 192px;
    justify-content: flex-end;
    padding: 0;
}

.header__link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-text);
    transition: 500ms ease;
}


.header__link:hover::after {
    width: 100%;
}

.header__link:hover {
    opacity: 1 !important;
}


.header_burger {
    display: none;
}



.page-header {
    
}

.page-header__wrapper {
    position: relative;
}

.page-header__top {
    position: relative;
}

.page-header__title {
    max-width: 1180px;
	max-width: 100%;
    margin-left: -9px;

    font-size: var(--text-title);
    line-height: 112px;
    font-weight: 400;
    letter-spacing: 6px;

    text-transform: uppercase;
}

.page-header__title:last-child {
    max-width: 100%;
    letter-spacing: 0px;
}

.page-header__title br + span {
    margin-left: -7px;
}

.page-header__subtitle {
    position: absolute;
    bottom: 20px;
    right: 450px;
    width: 440px;

    text-align: left;
    font-size: 16px;
    line-height: 20px;
    text-wrap: balance;
}

.page-header__subtitle + .page-header__subtitle {
    right: 0;
    width: 400px;
}

.page-header__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    margin-top: 24px;
}

.page-header__grid .page-header__subtitle {
    position: static;
    width: 100% !important;
    max-width: 40% !important;
    margin-top: 0px !important;
    text-wrap: auto !important;
}

.page-header__slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    
    margin-top: 75px;

}




@media (max-width: 1800px) {
    .page-header__subtitle {left: auto; right: 400px; bottom: 18px}
    .page-header__subtitle + .page-header__subtitle {left: auto; right: 0px;}
}

@media (max-width: 1700px) {
    .page-header__subtitle {bottom: 16px}
	.page-header__title {font-size: 100px; line-height: 1;}
}

@media (max-width: 1600px) {
    .page-header__subtitle {bottom: 14px}
	.page-header__title {font-size: 90px; margin-left: -7px;}
}

@media (max-width: 1500px) {
    .page-header__title {font-size: 80px; line-height: 1.05; margin-left: -6px;}
    .page-header__subtitle:nth-child(2) {right: 350px;}
	.page-header__subtitle {bottom: 13px;}

    .page-blog .page-header__subtitle {width: 400px;}
    .page-blog .page-header__subtitle + .page-header__subtitle {width: 360px;}
}

@media (max-width: 1400px) {
    .page-header__title {font-size: 70px; margin-left: -5px;}
	.page-header__subtitle {font-size: 15px; width: 320px !important; bottom: 10px;}
}

@media (max-width: 1300px) {
	.page-header__top {width: 100%;}
    .page-header__title {font-size: 64px; margin-left: -4px; max-width: 100%;}
    
	.page-header__subtitle {position: relative; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;}
    .page-header__subtitle + .page-header__subtitle {margin-top: 1em;}
	.page-header__subtitle:nth-child(2) {max-width: 50ch; margin-top: 15px;}
	.page-header__subtitle:nth-child(3) {max-width: 45ch;}
}

@media (max-width: 1100px) {
    .page-header__title {font-size: 46px; line-height: 1.1; max-width: calc(100% - 400px); margin-left: -3px;}
}

@media (max-width: 1000px) {
    .page-header__title {max-width: calc(100% - 200px); margin-left: -2px;}
	.page-header__subtitle {font-size: 14px; line-height: 1.2;}
    .page-header__subtitle:nth-child(3) {width: 200px !important;}
}

@media (max-width: 900px) {
    .page-header__title {font-size: 40px;}
}

@media (max-width: 800px) {
    .page-header__title {font-size: 36px;}
}

@media (max-width: 768px) {
    .page-header {margin-bottom: 0px;}
    .page-header__title {font-size: 40px; line-height: 1.15; letter-spacing: -0.025em; max-width: 100%; margin-left: -3px;}
	.page-header__subtitle {font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; position: relative; top: auto; bottom: auto; left: auto; right: auto;}
    .page-header__subtitle + .page-header__subtitle {margin-top: 1em;}
	.page-header__subtitle:nth-child(2) {max-width: 50ch; margin-top: 15px;}
	.page-header__subtitle:nth-child(3) {max-width: 45ch;}
    .page-header__grid {grid-template-columns: repeat(1, 1fr); row-gap: 1em;}
    .page-header__grid .page-header__subtitle + .page-header__subtitle {margin-top: 0; }
    .page-header__grid .page-header__subtitle {max-width: 38ch !important; text-wrap: balance !important;}

    .page-header__slider {aspect-ratio: 5 / 4; max-height: 62vh; margin-top: 35px;}
    .slider-dots {left: 22px; bottom: 26px; gap: 8px;}
    .slider-dot {width: 6px; height: 6px;}
}

@media (max-width: 500px) {
    .page-header__title {font-size: 32px; margin-left: -2px;}
    .page-header__subtitle:nth-child(2) {max-width: 38ch; text-wrap: balance; width: auto !important;}
	.page-header__subtitle:nth-child(3) {max-width: 38ch; text-wrap: balance; width: auto !important;}
}



.services {
    margin-top: 100px;
}

.services__wrapper {
}

.services__grid {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.services-item {
    position: relative;
    z-index: 1;
    overflow-anchor: none;
    --services-transition-duration: 800ms;
    --services-transition-timing: ease;
    --services-content-height: 0px;
    --services-border-closed-height: 28px;
    --services-border-height: var(--services-border-closed-height);
    --services-open-gap: 14px;
    --services-border-min-height: 300px;

    height: 146px;

    overflow: hidden;

    transition: none;
}

.services-item * {
    position: relative;
    z-index: 2;

    transition: 800ms ease;
}

.services-item__border {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: var(--services-border-height);

    overflow: hidden;
    transition: none;
    pointer-events: none;
}

.services-item__border::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: var(--services-border-min-height);
    background: var(--color-bg);
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--radius-main);
}

.services-item__count {
    position: absolute;
    top: 40px;
    left: 68px;

    font-size: 32px;
    line-height: 1;
}

.services-item__name {
    display: flex;
    align-items: center;
    height: 132px;
    padding-top: 35px;
    padding-left: 175px;
    
    font-size: 100px;
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;

    transition: 500ms ease;
}

.services-item__name:hover {
    opacity: 0.5;
}

.services-item__content {
    padding-bottom: 76px;
    max-height: var(--services-content-height);
    overflow: hidden;
    transition: none;
}

.services-item__desc {
    padding-left: 180px;
    padding-right: 290px;
    margin-top: 52px;

    font-size: 48px;
    line-height: 68px;
    
    cursor: pointer;
}

.services-item__desc p:not(:last-child) {
    margin-bottom: 30px;
}

.services-item__arrow {
    position: relative;

    display: flex;
    margin-left: auto;
    margin-right: 100px;
    margin-top: -50px;

    width: 74px;
    height: 42px;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="74" height="42" fill="none" viewBox="0 0 74 42"><path fill="%23444" d="M71.866 19.374 74 21.37l-2.058 1.996H0v-3.992h71.866Z"/><path fill="%23444" d="m52.702 0 21.204 21.446L52.93 42l-2.746-2.865 18.093-17.733L49.91 2.822 52.701 0Z"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
    transition: 500ms ease;
}

.services-item__arrow:hover {
    opacity: 0.5;
}

.services-item_open + .services-item {
    margin-top: var(--services-open-gap);
}

@media (max-width: 1500px) {
	.services-item__name {font-size: 84px; height: 110px;}
}

@media (max-width: 1100px) {
	.services-item {height: 100px;}
	.services-item__name {height: 90px; padding-top: 15px;}
	.services-item__count {top: 30px;}
}

@media (max-width: 420px) {
	.services-item__name {font-size: 30px !important; }
}


.team {
    margin-top: 145px;
}

.team__wrapper {

}

.team__subtitle {
    display: grid;
    grid-template-columns: var(--grid-columns);
    gap: var(--grid-gap);
}

.team__subtitle p {
    max-width: 350px;
}

.team__grid {
    display: block;
    margin-top: 62px;
}

.team-slider-dots {
    display: none;
}

.team-slider-controls {
    display: none;
}

.team-slider-viewport {
    display: block;
}

.team-slider-track {
    display: grid;
    grid-template-columns: var(--grid-columns);
    gap: var(--grid-gap);
}

.team-card {
    position: relative;
}

.team-card * {
    transition: 800ms ease;
}

.team-card:nth-child(1) {
	z-index: 1;
}
.team-card:nth-child(2) {
	z-index: 2;
}
.team-card:nth-child(3) {
	z-index: 3;
}
.team-card:nth-child(4) {
	z-index: 4;
}

.team-card__photo {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

    width: 100%;
    height: 100%;
    background: #262626;
    border-radius: var(--radius-main);

    opacity: 0;
	object-fit: cover;
	object-position: center;
}


.team-card__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    height: 484px;
    padding-top: 52px;
    padding-left: 36px;
    padding-right: 36px;
    padding-bottom: 36px;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--radius-main);
}

.team-card__name {
    margin-bottom: 5px;
    margin-left: -2px;

    font-size: 32px;
    line-height: 1;
    font-weight: 500;
}

.team-card__prof {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

.team-card__desc {
    margin-top: auto;
    
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

.team-card:hover .team-card__photo {
    top: -230px;
    left: -154px;
    opacity: 1;
    transform: rotate(-18.33deg);
}

.team-card:hover .team-card__content {
    transform: rotate(11.04deg);
    background: #262626;
    border-color: #262626;
    color: #FBF6F0;
}

.team-card:nth-child(1):hover .team-card__photo {
	left: auto;
    left: 154px;
	transform: rotate(18.33deg);
}

.team-card:nth-child(1):hover .team-card__content {
	transform: rotate(-11.04deg);
}

.team-card:nth-child(1):hover {
	z-index: 3;
}

@media (max-width: 1400px) {
	.team-card:nth-child(3):hover .team-card__photo {
		left: auto;
		left: 154px;
		transform: rotate(18.33deg);
	}

	.team-card:nth-child(3):hover .team-card__content {
		transform: rotate(-11.04deg);
	}

	.team-card:nth-child(3):hover {
		z-index: 3;
	}
}



.blog {
	margin-top: 75px;
}

.blog__wrapper {}

.blog__grid {
    display: grid;
    grid-template-columns: var(--grid-columns);
    gap: var(--grid-gap);
}



.blog-small {
    margin-top: 170px;
}

.blog-small__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.blog-small__title {
    margin-top: -3px;
}

.blog-small__desc {
    margin-bottom: 115px;

    font-size: 16px;
    line-height: 20px;
    text-wrap: balance;
}

.blog-small__mob-btn {
    display: none;
}



/* Обычная карточка статьи */

.single-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

.with-excluded .single-card:nth-child(1) {order: 1;}
.with-excluded .single-card:nth-child(2) {order: 6;}
.with-excluded .single-card:nth-child(3) {order: 2;}
.with-excluded .single-card:nth-child(4) {order: 3;}
.with-excluded .single-card:nth-child(5) {order: 4;}
.with-excluded .single-card:nth-child(6) {order: 5;}
.with-excluded .single-card {order: 99;}

.single-card:nth-child(1) {order: 1;}
.single-card:nth-child(2) {order: 2;}
.single-card:nth-child(3) {order: 3;}
.single-card:nth-child(4) {order: 4;}
.single-card:nth-child(5) {order: 5;}
.blog-service {order: 6;}
.single-card {order: 99;}

.single-card__image {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    border-radius: var(--radius-main);
    aspect-ratio: 4 / 3;

    margin-bottom: 34px;
    overflow: hidden;
}

.single-card__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;

    transition: 500ms ease;
}

.single-card__title {
    min-height: 64px;
    padding-right: 20px;
    margin-bottom: 22px;

    font-size: var(--text-card-title);
    line-height: 1;
    font-weight: 600;
    color: var(--color-text);

    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.single-card__title a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 2;
}

.single-card__text {
    padding-right: 20px;
    margin-bottom: 34px;

    font-size: var(--text-card-description);
    line-height: 1.25;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-card__arrow {
    display: flex;
    width: 38px;
    height: 22px;
    background: url(images/arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    transition: 500ms ease;
}

.single-card:hover .single-card__image img {
    transform: scale(1.05);
}

.single-card:hover .single-card__arrow {
    margin-left: 20px;
}

.single-card__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    margin-top: auto;
    background: var(--color-white);
    border-radius: 7px;

    font-size: 18px;
    line-height: 1;
    letter-spacing: 10%;
    text-transform: uppercase;
}



/* Большая разделенная карточка статьи */

.single-card_split {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
}

.single-card_split::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid var(--color-border);
    border-radius: var(--radius-main);
    z-index: -1;
}

.single-card_split .single-card__image {
    position: relative;
    display: flex;
    width: 47.6%;
    height: 634px;
    margin: 0;
    overflow: hidden;
}

.single-card_split .single-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 52.4%;
    height: 100%;
    padding-top: 76px;
    padding-left: 82px;
    padding-right: 70px;
    padding-bottom: 70px;
}

.single-card_split .single-card__title {
    padding: 0;

    font-size: var(--text-card-big-title);
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;

    -webkit-line-clamp: 4;
}


/* Большая полная карточка статьи */

.single-card_full {
    grid-column: 1 / -1;
    height: 634px;

    border-radius: var(--radius-main);
    overflow: hidden;
}

.single-card_full .single-card__image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.single-card_full .single-card__content {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: 122px;
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 80px;
}

.single-card_full .single-card__title {
    max-width: 500px;
    padding: 0;

    font-size: var(--text-card-big-title);
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-white);

    -webkit-line-clamp: 4;
}

.single-card_full .single-card__title a {
    color: var(--color-white);
}

.single-card_full .single-card__text {
    max-width: 840px;

    font-size: var(--text-card-big-description);
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-white);
}



.pagination {
	grid-column: 1 / -1;
	order: 100;

	display: flex;
  	justify-content: flex-end;
  	align-items: center;
  	gap: 20px;

	font-weight: 400;
	font-size: 24px;
	line-height: 24px;
}

.page-numbers.current {
	opacity: 0.5;
}



.blog-service {
	position: relative;
	display: flex;
	grid-column: 1 / -1;
	width: 100%;
	padding-top: 126px;
	padding-bottom: 80px;
	padding-left: 80px;
	padding-right: 80px;
	border-radius: var(--radius-main);
	overflow: hidden;
	
	background-image: url("/wp-content/uploads/2026/07/blog-service__bg-scaled.jpg");
	background-size: 130%;
	background-position: left center;
}

.blog-service__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.blog-service__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	color: #FBF6F0;
}

.blog-service__title {
	font-weight: 600;
	font-size: 54px;
	line-height: 64px;
	letter-spacing: 0%;
}

.blog-service__text {
	margin-top: 23px;
	
	font-weight: 400;
	font-size: 32px;
	line-height: 44px;
	letter-spacing: 0%;
}

.blog-service__button {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    padding-top: 2px;
	margin-top: 105px;
    background: #FBF6F0;
    border-radius: 7px;

    color: var(--color-border);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 10%;
    text-transform: uppercase;

	cursor: pointer;
}


.footer {
    margin-top: 100px;
    padding-bottom: 84px;
}

.footer__wrapper {

}

.footer__top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 12px;
    width: calc(100% - 400px);
    margin-bottom: 30px;
}

.footer__phone {
    font-size: 32px;
    line-height: 1;
    letter-spacing: -2%;
}

.footer__bottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 46px;
}

.footer__email {
    display: flex;
    width: calc(100% - 400px);
    height: auto;
}

.footer__email svg {
    width: 100%;
    height: auto;
}

.footer__logo {
    display: flex;
    flex-direction: column;
	align-items: flex-start;
    gap: 24px;
    width: 120px;
    margin-bottom: 21px;

    font-size: 16px;
    line-height: 20px;
}

.footer__logo img {
    width: 100%;
    height: auto;
}


.single {
	margin-bottom: 150px;
}
.single__wrapper{
	
}
.single__title {
	margin-left: -7px;
	margin-bottom: 70px;

  	font-size: var(--text-title);
  	line-height: 1;
  	font-weight: 400;
	text-transform: uppercase;
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	word-break: normal;
  	text-wrap: balance;
}
.single__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	
	padding-top: 250px;
}
.single__content {
	position: relative;
	
	width: calc(100% - 460px);
	padding-left: 90px;
	
	font-weight: 400;
	font-size: 32px;
	line-height: 1.35;
	letter-spacing: 0%;
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	word-break: normal;
  	text-wrap: balance;
}

.single__content * {
    font-family: var(--font-family);
}

.single__content p:first-child {
	position: absolute;
	top: -250px;
}

.single__content h2 {
	margin-top: 2.5em;
	margin-bottom: 1em;

    font-weight: 600;
	font-size: 48px;
	line-height: 1.3;
	letter-spacing: 0%;

}

.single__content strong,
.single__content b {
    font-weight: 600;
}

.single__content p {
	margin-bottom: 1em;
}

.single__content h2:nth-child(2) {
	margin-top: 0;
}

.single__content figure.wp-block-image {
	border-radius: var(--radius-main);
	overflow: hidden;
}

.single__content figure {
	margin-top: 1em;
}

.single__content p + figure {
	margin-top: 60px;
}

.single__content figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top center;
}

.single__content ul,
.single__content ol {
	padding-left: 30px;
}


.single__sidebar {
	display: flex;
	flex-direction: column;
	gap: 60px;
	width: 460px;
	padding-top: 35px;
	padding-left: 80px;
}

.single__sidebar-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	word-break: normal;
  	text-wrap: balance;
}

.single__sidebar-title {
	width: 100%;
	padding-right: 5%;
	margin-bottom: 15px;
	font-weight: 600;
	font-size: 32px;
	line-height: 32px;
}

.single__sidebar-text {
	margin-bottom: 30px;
	font-size: 16px;
	line-height: 20px;
}

.single.page .single__content {
	width: 100%;
}

.single.page .single__row {
	padding-top: 0px;
}

.single.page .single__content p:first-child {
	position: relative;
	top: 0px;
}

.single.page .single__content h2:first-child {
	margin-top: 0px;
}




.callback {
    margin-top: 95px;
}

.callback__wrapper {}

.callback__title {
    margin-bottom: 30px;
}

.callback__subtitle {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.callback__subtitle p {
    width: 100%;
}

.callback__subtitle p:empty {
    display: none !important;
}

.form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 58px;
    column-gap: 80px;
	margin-top: 50px;
}

.form__label {
    display: flex;
    width: calc(50% - 40px);
    border-bottom: 3px solid var(--color-border);
}

.form__label_full {
    width: 100%;
}

.form__field {
    width: calc(50% - 40px);
    margin: 0;
    padding: 0;
    border: 0;
}

.form__field_empty {
    pointer-events: none;
}

.form__input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 56px;
    padding-bottom: 5px;
    background-color: transparent;
    border: 0;

    font-family: var(--font-family);
    font-weight: 400;
    font-size: 32px;
    line-height: 55px;
    color: var(--color-text);

}

.form__action {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding-top: 20px;
}

.form__legend {
    width: 100%;
    margin-bottom: 22px;
    padding: 0;
    font-size: 32px;
    line-height: 40px;
}

.form__options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px 48px;
}

.form__options .form__legend {
    padding-top: 5px;
}

.form__radio {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}

.form__radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form__radio-control {
    width: 22px;
    height: 22px;
    border: 3px solid var(--color-border);
    border-radius: 50%;
}

.form__radio-input:checked + .form__radio-control {
    box-shadow: inset 0 0 0 5px var(--color-bg);
    background: var(--color-border);
}

.form__radio-input:focus-visible + .form__radio-control {
    outline: 2px solid var(--color-border);
    outline-offset: 3px;
}

.form__agreements {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-top: 6px;
}

.form__checkbox {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 850px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

.form__checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form__checkbox-control {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border);
    border-radius: 3px;
}

.form__checkbox-control::after {
    content: "";
    position: absolute;
    left: 4px;
    top: -1px;
    width: 8px;
    height: 14px;
    border-right: 2px solid var(--color-border);
    border-bottom: 2px solid var(--color-border);
    opacity: 0;
    transform: rotate(45deg);
}

.form__checkbox-input:checked + .form__checkbox-control::after {
    opacity: 1;
}

.form__checkbox-input:focus-visible + .form__checkbox-control {
    outline: 2px solid var(--color-border);
    outline-offset: 3px;
}

.form__checkbox_invalid > span:last-child {
    color: #b24b43;
}

.form__checkbox_invalid .form__checkbox-control {
    border-color: #b24b43;
}

.form__privacy-link {
    width: fit-content;
    margin-top: 4px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 22px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form__action .form__privacy-link {
	text-decoration: none;
}

.form__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    padding-top: 2px;
    margin-top: auto;
    background: var(--color-border);
    border-radius: 7px;

    font-family: var(--font-family);
    color: var(--color-white);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 10%;
    text-transform: uppercase;

}

.form__policy {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

.form__policy a {
    text-decoration: underline;
}

#form-result {
	width: 100%;
}

html.form-popup-is-open,
body.form-popup-is-open {
    overflow: hidden;
}

.form-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.form-popup_open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.form-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(68, 68, 68, 0.32);
}

.form-popup__dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 46px 52px 42px;
    background: var(--color-bg);
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: var(--radius-main);
    color: var(--color-text);
    transform: translateY(20px);
    transition: transform 300ms ease;
}

.form-popup_open .form-popup__dialog {
    transform: translateY(0);
}

.form-popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.form-popup__close::before,
.form-popup__close::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 3px;
    width: 24px;
    height: 2px;
    background: var(--color-text);
}

.form-popup__close::before {
    transform: rotate(45deg);
}

.form-popup__close::after {
    transform: rotate(-45deg);
}

.form-popup__title {
    max-width: 460px;
    margin-bottom: 22px;
    font-size: 48px;
    line-height: 55px;
}

.form-popup__text {
    max-width: 420px;
    margin-bottom: 34px;
    font-size: 18px;
    line-height: 24px;
}

.form-popup__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 40px;
    background: var(--color-border);
    border-radius: 7px;
    color: var(--color-white);
    font-family: var(--font-family);
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.form__button:disabled {
    opacity: 0.6;
    cursor: wait;
}






.projects {
    margin-top: 46px;
}

.projects__wrpaper {

}

.filters {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
}

.filters__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 44px;
    padding: 0 25px;
    padding-top: 2px;;
    background: transparent;
    border: var(--border-width) var(--border-type) var(--border-color);
    border-radius: 7px;

    font-family: var(--font-family);
    color: var(--color-text);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 10%;
    text-transform: uppercase;

    cursor: pointer;

    transition: 500ms ease;
}

.filters__item:hover {
    opacity: 0.5;
}

.filters__item.current {
    background: var(--color-border);
    color: var(--color-white);
}

.projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 165px;
    column-gap: 194px;
    margin-top: 125px;
}

.project-card {
	position: relative;
    min-width: 0;
    cursor: pointer;

    transition: 500ms ease;
}

.project-card_current {
    cursor: default;
}

.project-card__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 10;
}

.project-card * {
    transition: 500ms ease;
}

.project-card_3 {
    grid-column: span 3;
}

.project-card_2 {
    grid-column: span 2;
}

.project-card__info {
    position: relative;
    z-index: 2;
    min-width: 0;
    margin-bottom: 50px;
}

.project-card:not(.project-card_current):hover .project-card__info {
    opacity: 0.5;
}

.project-card__name {
    margin-bottom: 15px;

    font-size: 48px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
}

.project-card__company,
.project-card__desc {
    font-size: 16px;
    line-height: 20px;
}

.project-card__desc p {
    margin-bottom: 10px;
}

.project-card__media {
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;

    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: var(--radius-main);
}

.project-card:not(.project-card_current, .project-card_hero, .project-card_big):hover .project-card__media {
    transform: rotate(3deg);
}

.project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
	border-radius: var(--radius-main);
}

.project-card__media .slider__slide img {
	height: 100%;
}

.project-single .project-card_current .project-card__media {
    overflow: hidden;
}

.project-single .project-card_current .project-card__media img {
    width: 100%;
    height: auto;
    object-position: center;
}

.project-single .project-card_current .project-card__media.slider img {
    height: 100%;
    object-fit: cover;
}

.project-single .project-card_related .project-card__media {
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.project-single .project-card_hero.project-card_current .project-card__media {
    align-items: center;
    justify-content: center;
    max-height: min(620px, 70vh);
    border-radius: var(--radius-main);
}

.project-single .project-card_hero.project-card_current .project-card__media > img {
    width: 100%;
    max-width: none;
    max-height: none;
    flex-shrink: 0;
}

.project-single .project-card_hero.project-card_current .project-card__media.slider {
    max-height: min(620px, 70vh);
}

.project-single .project-card_related .project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* project-card hero */

.project-card_hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.project-card_hero .project-card__info {
    width: 400px;
    padding-top: 40px;
}

.project-card_hero .project-card__name {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

.project-card_hero .project-card__media {
    display: flex;
    width: calc(100% - 465px);
}

.project-card_hero .project-card__header {
    margin-bottom: 45px;
}

/* project-card big */

.project-card_big {

}

.project-card_big .project-card__info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 90px;
}

.project-card_big .project-card__desc {
    max-width: 584px;
}

.project-card_big .project-card__media {
    aspect-ratio: 2 / 1;
}

/* project-card small */

.project-card_small {
    display: flex;
    flex-direction: column;
}

.project-card_small .project-card__name {
    padding-right: 58px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
    margin-left: -3px;
}

.project-card_small .project-card__media {
    margin-top: auto;
    aspect-ratio: 4 / 5;
}

.project-card_small .project-card__desc {
    display: none;
}

.project-card_2 .project-card__desc {
    display: none;
}

.project-card_small .project-card__info {
    position: relative;
}

.project-card_small .project-card__info::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 0px;
    display: block;
    width: 38px;
    height: 22px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="22" fill="none" viewBox="0 0 38 22"><path fill="%23444" d="m36.419 9.707 1.081 1-1.043 1H0v-2h36.419Z"/><path stroke="%23444" stroke-width="2" d="m26.128 20.325 9.9-9.59L26 .706"/></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    transition: 500ms ease;
}


.project-card:not(.project-card_current):hover .project-card__info::after {
    right: -20px;
}


@media (max-width: 1800px) {
    .single-card_split {justify-content: flex-start;}
    .single-card_split .single-card__image {height: auto; width: calc(50% - 40px);}
    .single-card_full {height: calc( ( ( (100vw - 80px) / 2) - 40px ) * 0.75);}
    .footer__email {font-size: 160px;}

	.single__content h2 {line-height: 1.3; margin-bottom: 52px;}
	
	.project-card__name {font-size: 44px; padding-right: 40px;}
	.project-card_small .project-card__info::after {top: 0; height: 44px;}

    .footer__logo {margin-bottom: 20px;}
}

@media (max-width: 1700px) {
    .footer__logo {margin-bottom: 18px;}
}

@media (max-width: 1600px) {
    .single-card__title {padding-right: 40px; min-height: 10px;}
    .single-card_split .single-card__image {height: auto; width: calc(50% - 30px);}
    .single-card_split .single-card__content {padding-left: 60px;}
    .single-card_full {height: calc( ( ( (100vw - 60px) / 2) - 30px ) * 0.75);}
    .single-card_full .single-card__content {padding-top: 80px;}
    .single-card_full .single-card__text {max-width: 650px;}
	
	.single__content {font-size: 30px}
	.single__content h2 {font-size: 44px}
	
	.project-card__name {font-size: 40px;}
	.project-card_small .project-card__info::after {height: 40px;}
	.projects__grid {column-gap: 150px;}
    .project-card_small .project-card__name {margin-left: -2px;}
	
	.services-item__desc {font-size: 36px; line-height: 46px;}
    .services-item__arrow {height: 36px; margin-top: -36px; background-position: center left;}

    .team__subtitle {grid-template-columns: 3fr;}

    .footer__logo {margin-bottom: 17px;}
}

@media (max-width: 1500px) {
	.header__nav {gap: 30px;}
    .single-card__title {padding-right: 30px;}
    .footer__email {font-size: 140px;}
	
	.single__content {font-size: 28px; padding-left: 50px;}
	.single__content h2 {font-size: 40px}

    .footer__logo {margin-bottom: 15px;}
}

@media (max-width: 1400px) {
    .single-card__text {padding-right: 30%;}
    .single-card__arrow {margin-top: auto;}
    .single-card__content {margin-top: auto;}
    .single-card_split .single-card__content {padding: 60px;}
    .single-card_full .single-card__content {padding: 60px;}
    .single-card_full .single-card__text {max-width: 900px;}

    .footer__email {font-size: 100px;}

	.single__row {padding-top: 210px}
	.single__content p:first-child {top: -210px}
	.single__content {font-size: 24px; padding-left: 40px;}
	.single__content h2 {font-size: 36px}
	
	.project-card__name {font-size: 32px;}
	.project-card_small .project-card__info::after {height: 36px;}
	.projects__grid {column-gap: 100px; row-gap: 130px;}
	.project-card_big .project-card__info {gap: 50px;}
	.project-card__desc {font-size: 14px;}
	.project-card_hero .project-card__info {padding-top: 25px;}
    .project-card_small .project-card__name {margin-left: -1px;}
	
	.slider-dots {bottom: 20px; left: 30px; gap: 12px;}

    .footer__logo {margin-bottom: 13px;}
}

@media (max-width: 1300px) {
	.header__nav {gap: 15px;}
	.header__link {font-size: 16px;}
    .single-card__title {padding-right: 30%;}

    .footer__logo {margin-bottom: 10px;}
	
	.project-card__name {font-size: 30px;}
	.project-card_small .project-card__info::after {height: 30px; width: 28px;}
}

@media (max-width: 1200px) {
    .footer__logo {margin-bottom: 9px;}
}

@media (max-width: 1100px) {
    .header__nav {gap: 5px;}
	.header__link {font-size: 14px;}

    .single-card__image {margin-bottom: 24px;}
    .single-card_split .single-card__content {padding: 40px;}
    .single-card_split .single-card__image {height: auto; width: calc(50% - 20px);}
    .single-card_full {height: calc( ( ( (100vw - 40px) / 2) - 20px ) * 0.75);}
    .single-card_full .single-card__title {max-width: 100%;}
    .single-card_full .single-card__content {padding: 40px;}

    .footer__top {}
    .footer__logo {margin-bottom: 7px;}

	.single__title {font-size: 50px; line-height: 1.1;}
	.single__row {flex-wrap: wrap; padding-top: 0;}
	.single__content p:first-child {top: 0; position: relative;}
	.single__content {font-size: 22px; padding-left: 0px; width: 100%;}
	.single__content h2 {font-size: 34px; margin-top: 80px;}
	.single__content h2:nth-child(2) {margin-top: 80px;}
	.single__sidebar {display: none;}

    .services-item__name {font-size: 50px;}
	.services-item__desc {font-size: 30px; line-height: 42px;}
    .services-item__arrow {height: 30px; margin-top: -30px;}
	
	.project-card__name {font-size: 28px;}
	.project-card_small .project-card__info::after {height: 28px;}
	.project-card_big .project-card__info {gap: 30px;}
	.project-card_big.project-card_2 .project-card__desc {display: none;}
	
	.project-card_hero {flex-direction: column; gap: 0;}
	.project-card_hero .project-card__info {width: 100%;}
	.project-card_hero .project-card__media {width: 100%;}
	
	.projects__grid {column-gap: 40px; row-gap: 100px;}
}

@media (max-width: 920px) {
    body {padding-top: 90px; max-width: 100%;}
    .header {position: absolute; top: 0; left: 0; width: 100%; margin-bottom: 10px; transition: 500ms ease; z-index: 10;}
    .header * {transition: 500ms ease;}
    .header__wrapper {align-items: flex-start; height: 500px; max-height: 90px; padding-top: 30px; overflow: hidden; position: relative;}
    .header__nav {position: absolute; top: 100px; left: 0; flex-direction: column; align-items: flex-start; gap: 22px; width: 100%;}
    .header__link {font-size: 32px; line-height: 32px; padding: 0; color: #FBF6F0; opacity: 0.5; letter-spacing: 5%;}
    .header__phone {position: absolute; top: 420px; left: 0; width: auto; font-size: 18px; color: #FBF6F0; opacity: 1; letter-spacing: 10%;}
    .header__logo {height: 24px;}
    .header_burger {display: flex; justify-content: flex-end; align-items: center; width: 24px; height: 24px; cursor: pointer;}

    .header.open {background: var(--color-border);}
    .header.open .header_burger path {fill: #FBF6F0;}
    .header.open .header__logo path {fill: #FBF6F0;}
    .header.open .header__wrapper {max-height: 500px;}

    .single__title {font-size: 40px;}

    .single-card__title {padding-right: 20%;}
    .single-card__text {padding-right: 15%;}

    .footer__top {padding-left: 0;}
    .footer__bottom {align-items: flex-start; flex-direction: column;}
    .footer__email {font-size: 60px; margin-left: -3px;}
    .footer__logo {margin-bottom: 0px;}
	
	.project-card__name {font-size: 22px;}
	.project-card_small .project-card__info::after {height: 22px;}
	.project-card__info {margin-bottom: 25px;}



}

@media (max-width: 768px) {
    .section-title {margin-bottom: 0px;}
    .section-subtitle {font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; margin-top: 15px;}
    .btn {width: 100%; height: 72px; font-size: 26px;}
    .mob-btn {display: flex}

    .header__logo {width: 120px;}

    .services {margin-top: 56px;}
    .services-item {--services-border-closed-height: 20px;}
    .services-item__border::before {border-width: 1px;}
    .services-item__count {top: 20px; left: 22px; font-size: 14px;}
    .services-item__name {padding-left: 56px; padding-top: 15px; font-size: 38px; height: 50px;}
    .services-item {height: 66px;}
    .services-item__content {padding-bottom: 30px; padding-top: 10px;}
    .services-item__desc {padding-left: 57px; padding-right: 28px; margin-top: 0; font-size: 16px; line-height: 22px;}
    .services-item__arrow {width: 30px; height: 12px; margin-left: 58px; margin-top: 24px; margin-right: auto; background-position: center left;}
    .services-item__desc p:not(:last-child) {margin-bottom: 22px;}

    .team {margin-top: 50px;}
    .team__wrapper {position: relative;}
    .team__subtitle {gap: 5px; display: flex; flex-direction: column; margin-top: 15px;}
    .team__subtitle p {max-width: 80%;}
    .team__subtitle p + p {margin-top: 1em;}
    .team-slider-controls {position: absolute; top: 0; right: 0; display: none; gap: 10px; height: var(--section-title-line-height);}
    .team-slider-controls_ready {display: flex; align-items: center; justify-content: flex-end;}
    .team-slider-button {position: relative; display: block; width: 20px; height: 10px; color: var(--color-text); cursor: pointer;}
    .team-slider-button_prev{background: url('data:image/svg+xml,<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5812 4.97876L0.00439262 5.48849L0.560644 5.99822H20.0044V4.97876H0.5812Z" fill="%23444444"/><path d="M6.06959 10.3912L0.789923 5.50235L6.1377 0.391235" stroke="%23444444" stroke-width="1.08248"/></svg>'); background-position: center; background-size: contain; background-repeat: no-repeat;}
    .team-slider-button_next {background: url('data:image/svg+xml,<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4232 4.97876L20 5.48849L19.4438 5.99822H0V4.97876H19.4232Z" fill="%23444444"/><path d="M13.9348 10.3912L19.2145 5.50235L13.8667 0.391235" stroke="%23444444" stroke-width="1.08248"/></svg>'); background-position: center; background-size: contain; background-repeat: no-repeat;}
    .team__grid {position: relative; display: block; margin-top: 22px; overflow: visible; overflow-anchor: none;}
    .team-slider-viewport {--team-slider-gap: 14px; display: block; width: calc(100% + 56px); margin-left: -28px; overflow: hidden; padding: 28px 0 0 28px;}
    .team-slider-track {display: grid; width: calc(100% - 28px);}
    .team-card {width: 100%; background: #262626; border-radius: var(--radius-main); color: #FBF6F0;}
    .team__grid.team-slider_ready .team-slider-track {grid-template-columns: 1fr;}
    .team__grid.team-slider_ready .team-card {grid-area: 1 / 1; pointer-events: none; transition: transform 500ms ease;}
    .team__grid.team-slider_ready .team-card.active {pointer-events: auto;}
    .team-card__content {min-height: 265px; padding: 44px 26px 28px 30px; padding-right: clamp(130px, 36vw, 180px); height: auto; z-index: 1; border-color: #262626; background: #262626;}
    .team-card__name {font-size: 18px; line-height: 20px; margin-bottom: 8px; margin-left: -1px;}
    .team-card__prof {font-size: 12px; line-height: 16px; margin-bottom: 25px;}    
    .team-card__desc {font-size: 12px; line-height: 16px;}
    .team-card__photo {z-index: 2; opacity: 1; width: clamp(120px, 32vw, 160px); height: clamp(150px, 40vw, 205px); left: auto; right: 40px; top: -18px; transform: rotate(-12.51deg) !important;}
    .team-card:hover .team-card__content {transform: none !important;}
    .team-card:hover .team-card__photo {left: auto !important; top: -18px;}
    .team-slider-dots {position: static; display: flex; margin-top: 18px; justify-content: flex-start; gap: 8px; display: none !important;}
    .team-slider-dots .slider-dot {flex: 0 0 auto; width: 8px; height: 8px; background: var(--color-border); border-radius: 50%; opacity: 0.35;}
    .team-slider-dots .slider-dot.active {width: 8px; height: 8px; opacity: 1;}

	.blog__grid {row-gap: 35px;}
    .blog-small {margin-top: 50px;}
    .blog-small__header {grid-column: span 2;}
    .blog-small__desc {font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; max-width: 80%; margin-bottom: 0; margin-top: 15px;}
    .blog-small__header .btn {display: none;}
    .blog-small__mob-btn {display: flex; margin-top: 30px; padding-bottom: 2px;}

    .single-card__image {margin-bottom: 18px;}
    .single-card__title {padding-right: 0; font-size: 18px; line-height: 20px; min-height: auto; margin-bottom: 10px;}
    .single-card__text {padding-right: 0; margin-bottom: 14px; font-size: 12px; line-height: 16px;}
    .single-card__arrow {width: 30px; height: 12px; background-position: center left;}
    .single-card__button {font-size: 14px; width: auto; padding: 0 10px;}
    .blog-small .single-card:last-child {display: none;}

    .single-card_split {flex-direction: column-reverse; align-items: flex-start;}
	.single-card_split:first-child {margin-bottom: 20px;}
    .single-card_split::before {border-width: 1px;}
    .single-card_split .single-card__image {width: 100%; aspect-ratio: 4 / 3;}
    .single-card_split .single-card__content {width: 100%; height: auto; padding: 30px 15px;}
    .single-card_split .single-card__title {width: 100%; margin-bottom: 30px; text-transform: none; font-size: 26px; line-height: 32px; max-width: 320px; margin-bottom: 0;}
	.single-card_split .single-card__arrow {display: none;}

    .single-card_full {height: auto;}
    .single-card_full .single-card__content {position: relative; padding: 30px; background: rgba(0, 0, 0, 0.3);}
    .single-card_full .single-card__text {margin-bottom: 40px; -webkit-line-clamp: 6;}
	
	.blog-service {padding: 44px 28px; margin-left: -28px; margin-top: 50px; margin-bottom: 50px; width: calc(100% + 58px); background-image: url("/wp-content/uploads/2026/06/blog-service__bg-mobile.jpg"); background-position: center right; border-radius: 0;}
	.blog-service__content {padding-right: 23px;}
	.blog-service__title {font-size: 28px; line-height: 38px;}
	.blog-service__text {font-size: 18px; line-height: 24px;}
	.blog-service__text br {display: none;}
	.blog-service__button {position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; font-size: 0px; color: transparent; overflow: hidden; background: url('data:image/svg+xml,<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4232 4.97876L20 5.48849L19.4438 5.99822H0V4.97876H19.4232Z" fill="%23FBF6F0"/><path d="M13.9348 10.3912L19.2145 5.50235L13.8667 0.391235" stroke="%23FBF6F0" stroke-width="1.08248"/></svg>'); background-size: contain; background-position: center right; background-repeat: no-repeat;}

    .footer {margin-top: 60px;}
    .footer__top {flex-direction: row-reverse; align-items: center; width: 100%; }
    .footer__social {font-size: 12px; line-height: 16px;}
    .footer__phone {font-size: 18px; line-height: 20px; margin-left: auto;}
    .footer__bottom {gap: 30px;}
    .footer__email {width: 100%; margin-left: 0px;}
	.footer__logo {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; font-size: 10px; line-height: 12px;}
    .footer__logo img {width: 85px; gap: 23px;}
	.footer__privacy {font-size: 14px; margin-top: 10px; display: inline-block;}
	
	.single__title {font-size: 32px; line-height: 1.3; margin-bottom: 40px; margin-left: 0;}
	.single__content {font-size: 12px; line-height: 1.35; letter-spacing: -0.01em; padding-left: 0px;}
	.single__content h2 {font-size: 18px; line-height: 20px; margin-top: 57px !important; margin-bottom: 20px;}
	.single__content h2:nth-child(2) {margin-top: 57px !important;}
	
    .callback {margin-top: 50px;}
	.callback__title {margin-bottom: 0px;}

	.form {row-gap: 30px; margin-top: 35px;}
	.form__label {width: 100%; border-width: var(--border-width);}
    .form__field {width: 100%;}
    .form__field_empty {display: none;}
	.form__input {font-size: 18px; height: 37px; padding-bottom: 15px;}
    .form__legend {margin-bottom: 12px; font-size: var(--section-title-size); line-height: var(--section-title-line-height); font-weight: 600;}
    .form__options .form__legend {padding-top: 2px;}
    .form__options + .form__options .form__legend {padding-top: 0px; margin-top: -4px;}
    .form__options {gap: 14px 28px;}
    .form__radio {gap: 9px; font-size: 14px; line-height: 18px;}
    .form__radio-control {width: 18px; height: 18px; border-width: 2px;}
    .form__agreements {gap: 16px; padding-top: 0;}
    .form__checkbox {align-items: center; gap: 10px; font-size: 12px; line-height: 16px;}
    .form__checkbox-control {width: 16px; height: 16px; border-width: 2px;}
    .form__checkbox-control::after {left: 3px; top: -1px; width: 6px; height: 11px; border-width: 0 2px 2px 0;}
    .form__privacy-link {margin-top: 2px; font-size: 12px; line-height: 16px;}
	.form__action {flex-direction: column; justify-content: center; align-items: center; gap: 15px; padding-top: 10px;}
    .form__button {width: 100%; height: 72px; font-size: 26px;}
    .form__policy {width: 100%; font-size: 10px; line-height: 12px;}
    .form__policy br {display: none;}
    .form-popup {padding: 20px;}
    .form-popup__dialog {padding: 34px 24px 28px;}
    .form-popup__title {font-size: 26px; line-height: 32px; margin-bottom: 16px;}
    .form-popup__text {font-size: 14px; line-height: 20px; margin-bottom: 26px;}
    .form-popup__button {width: 100%; height: 56px; font-size: 18px;}
    .form-popup__close {top: 14px; right: 14px;}



    .projects {margin-top: 26px;}

    .filters {gap: 10px; flex-wrap: wrap;}
    .filters__item {padding: 0 18px; padding-top: 2px; height: 40px;}
    .filters__item:nth-child(1) {order: 1;}
    .filters__item:nth-child(2) {order: 3;}
    .filters__item:nth-child(3) {order: 4;}
    .filters__item:nth-child(4) {order: 2;}

    .projects__grid {margin-top: 40px; grid-template-columns: repeat(2, 1fr); row-gap: 57px; column-gap: var(--grid-gap);}
    .project-card:nth-child(1) {order: 1;}
    .project-card:nth-child(2) {order: 6;}
    .project-card:nth-child(3) {order: 2;}
    .project-card:nth-child(4) {order: 3;}
    .project-card:nth-child(5) {order: 4; margin-top:-22px}
    .project-card:nth-child(6) {order: 7;}
    .project-card:nth-child(7) {order: 5; margin-top:-22px}
    .project-card:nth-child(8) {order: 8;}
    .project-card:nth-child(9) {order: 9;}
    .project-card {display: flex; flex-direction: column; gap: 20px;}
    .project-card_3 {grid-column: span 2;}
    .project-card_2 {grid-column: span 2;}
    .project-card__info {margin-bottom: 0 !important;}
    .project-card__name {font-size: 18px; line-height: 22px; margin-bottom: 5px; white-space: normal; overflow-wrap: normal; word-break: normal; text-wrap: balance;}
    .project-card_small .project-card__name {padding-right: 0;}
    .project-card__company {font-size: 12px; line-height: 16px;}
    .project-card__desc {font-size: 12px; line-height: 16px; padding-right: 80px;}
    .project-card__media {aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-main);}
    .project-card__media img {height: 100%; width: 100%; object-fit: cover; object-position: center; border-radius: var(--radius-main);}
    
    
    .project-card_hero {flex-direction: column; gap: 35px;}
    .project-card_hero .project-card__info {padding-top: 0;}
    .project-card_hero .project-card__header {margin-bottom: 20px;}
    .project-card_hero .project-card__media {width: 100%; aspect-ratio: 3 / 4;}
    .project-card_hero .project-card__media img {height: 100%;}

    .project-card_big {display:flex; flex-direction: column; gap: 35px;}
    .project-card_big .project-card__info {flex-direction: column; gap: 20px;}
    .project-card_big .project-card__media {width: 100%; aspect-ratio: 3 / 4;}

    .project-card_small .project-card__media {aspect-ratio: 4 / 3;}
    .project-card_small .project-card__info::after {display: none;}

    .blog {margin-top: 50px;}
    .pagination:empty {display: none;}


    a:hover {opacity: 1;}
    .single-card:hover .single-card__image img {transform: none !important;}
    .single-card:hover .single-card__arrow {margin-left: 0 !important;}
    .project-card:hover .project-card__info {opacity: 1 !important;}
    .project-card:hover .project-card__media {transform: none !important;}
    

    .form__button {padding-bottom: 2px;}
}

@media (max-width: 500px) {
	.project-card__name {font-size: 16px;}
	.project-card__desc {padding-right: 40px;}
    .filters__item {border-width: 1px; font-size: 16px; padding: 0; padding-top: 0px;}
    .filters__item:nth-child(1) {order: 1; width: calc(50% - 5px); letter-spacing: 13%;}
    .filters__item:nth-child(2) {order: 3; width: calc(50% - 5px);}
    .filters__item:nth-child(3) {order: 4; width: calc(50% - 5px);}
    .filters__item:nth-child(4) {order: 2; width: calc(50% - 40px);}

    .team-card__content {padding: 31px 22px;}
    .team-card__name {padding-right: clamp(130px, 36vw, 180px);}
    .team-card__prof {margin-bottom: 0; padding-right: 70%;}
    .team-card__desc {margin-top: 60px;}
    .team-card__photo {width: 130px; height: 150px; object-position: top center; right: 30px;}
    .team__subtitle p {max-width: 90%;}

    .page-77 .page-header__subtitle:nth-child(2) {padding-right: 15%;}
}


/* ANIMATIONS */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.project-single .project-card_current .project-card__media {
    aspect-ratio: auto;
}

.project-single .project-card_current .project-card__media img {
    height: auto;
    object-fit: initial;
}

.project-single .project-card_current .project-card__media.slider img {
    height: 100%;
    object-fit: cover;
}

.project-single .project-card_related .project-card__media {
    aspect-ratio: 2 / 1;
}

/* Responsive section title scale */
@media (max-width: 1600px) {
    :root {
        --section-title-size: 40px;
        --section-title-line-height: 52px;
    }
}

@media (max-width: 1400px) {
    :root {
        --section-title-size: 34px;
        --section-title-line-height: 44px;
    }
}

@media (max-width: 1200px) {
    :root {
        --section-title-size: 30px;
        --section-title-line-height: 40px;
    }
}

@media (max-width: 1000px) {
    :root {
        --section-title-size: 24px;
        --section-title-line-height: 32px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-title-size: 18px;
        --section-title-line-height: 24px;
    }
}

/* Project listing media tokens applied to each card type */
:root {
    --project-hero-media-height: 740px;
    --project-wide-media-height: 880px;
    --project-two-column-media-height: 630px;
    --project-small-media-height: 350px;
}

.projects__wrapper:has(.filters) .project-card_hero .project-card__media {
    aspect-ratio: unset !important;
    height: var(--project-hero-media-height) !important;
}

.projects__wrapper:has(.filters) .project-card_big.project-card_3 .project-card__media {
    aspect-ratio: unset !important;
    height: var(--project-wide-media-height) !important;
}

.projects__wrapper:has(.filters) .project-card_big.project-card_2 .project-card__media {
    aspect-ratio: unset !important;
    height: var(--project-two-column-media-height) !important;
}

.projects__wrapper:has(.filters) .project-card_small .project-card__media {
    aspect-ratio: unset !important;
    height: var(--project-small-media-height) !important;
}

@media (max-width: 1800px) {
    :root {
        --project-hero-media-height: 700px;
        --project-wide-media-height: 840px;
        --project-two-column-media-height: 600px;
        --project-small-media-height: 330px;
    }
}

@media (max-width: 1700px) {
    :root {
        --project-hero-media-height: 660px;
        --project-wide-media-height: 790px;
        --project-two-column-media-height: 560px;
        --project-small-media-height: 310px;
    }
}

@media (max-width: 1600px) {
    :root {
        --project-hero-media-height: 620px;
        --project-wide-media-height: 740px;
        --project-two-column-media-height: 530px;
        --project-small-media-height: 300px;
    }
}

@media (max-width: 1500px) {
    :root {
        --project-hero-media-height: 580px;
        --project-wide-media-height: 700px;
        --project-two-column-media-height: 500px;
        --project-small-media-height: 270px;
    }
}

@media (max-width: 1400px) {
    :root {
        --project-hero-media-height: 560px;
        --project-wide-media-height: 670px;
        --project-two-column-media-height: 480px;
        --project-small-media-height: 270px;
    }
}

@media (max-width: 1300px) {
    :root {
        --project-hero-media-height: 520px;
        --project-wide-media-height: 620px;
        --project-two-column-media-height: 440px;
        --project-small-media-height: 250px;
    }
}

@media (max-width: 1200px) {
    :root {
        --project-hero-media-height: 480px;
        --project-wide-media-height: 580px;
        --project-two-column-media-height: 420px;
        --project-small-media-height: 240px;
    }
}

@media (max-width: 1100px) {
    :root {
        --project-hero-media-height: 440px;
        --project-wide-media-height: 530px;
        --project-two-column-media-height: 380px;
        --project-small-media-height: 220px;
    }
}

@media (max-width: 1000px) {
    :root {
        --project-hero-media-height: 400px;
        --project-wide-media-height: 480px;
        --project-two-column-media-height: 350px;
        --project-small-media-height: 200px;
    }
}

@media (max-width: 920px) {
    :root {
        --project-hero-media-height: 360px;
        --project-wide-media-height: 430px;
        --project-two-column-media-height: 320px;
        --project-small-media-height: 185px;
    }
}

@media (max-width: 768px) {
    :root {
        --project-hero-media-height: 320px;
        --project-wide-media-height: 390px;
        --project-two-column-media-height: 300px;
        --project-small-media-height: 180px;
    }
}

@media (max-width: 600px) {
    :root {
        --project-hero-media-height: 280px;
        --project-wide-media-height: 340px;
        --project-two-column-media-height: 260px;
        --project-small-media-height: 165px;
    }
}

@media (max-width: 480px) {
    :root {
        --project-hero-media-height: 240px;
        --project-wide-media-height: 300px;
        --project-two-column-media-height: 230px;
        --project-small-media-height: 150px;
    }
}

@media (max-width: 400px) {
    :root {
        --project-hero-media-height: 220px;
        --project-wide-media-height: 270px;
        --project-two-column-media-height: 210px;
        --project-small-media-height: 140px;
    }
}

/* Keep the two-column card pair aligned on desktop */
@media (min-width: 769px) {
    .projects__wrapper:has(.filters) .project-card_big.project-card_2,
    .projects__wrapper:has(.filters) .project-card_big.project-card_2 + .project-card_small {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .projects__wrapper:has(.filters) .project-card_big.project-card_2 .project-card__media,
    .projects__wrapper:has(.filters) .project-card_big.project-card_2 + .project-card_small .project-card__media {
        margin-top: auto;
    }

    .projects__wrapper:has(.filters) .project-card_big.project-card_2 + .project-card_small .project-card__media {
        height: var(--project-two-column-media-height) !important;
    }
}