/*
Theme Name: Новая Буква
Author: Твое Миша Мееров
Version: 1.0
*/

/* ==========================================
   ШРИФТЫ
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* ==========================================
   ПЕРЕМЕННЫЕ (ЦВЕТА, ТИПОГРАФИКА, ТЕНИ, СКРУГЛЕНИЯ)
   ========================================== */
:root {
    font-size: 14px;

    --color-btn: #414df4;
    --color-text: #222F30;
    --color-text-inverted: #FFFFFF;
    --color-bg: #F8F8F8;
    --color-card-bg: #FFFFFF;
    --color-gray-btn: rgba(255, 255, 255, 0.2);
    
    --color-service-hover: #ebaeae;
    --color-border-main: #4e4e4e;
    --color-border-subtle: #dbdbdb;
    --color-input-bg: #F4F7FB;
    --color-input-border: #DDE1E6;
    --color-text-dark: #101010;
    --color-text-muted: #988A8A;
    --color-footer-top: #222F30;
    --color-footer-bottom: #4B5556;
    --color-footer-text: #FFFFFF99;
    --color-icons-muted: #C9C9C9;
    --color-text-subhead-white: #afafaf;
    
    --color-preloader-stroke: #E63121;
    --color-reviews-h3: #4e4e4e;
    --color-modal-input-bg: #777777;
    --color-modal-input-text: #E9E9E9;
    --color-modal-input-border: rgba(255, 255, 255, 0.3);
    --color-overlay-bg: rgba(0, 0, 0, 0.6);
    --color-card-overlay: rgba(34, 47, 48, 0.85);

    --section-gap: 11rem;
    --space-lg: 3rem;

    --radius-pill: 100px;
    --radius-lg: 40px;
    --radius-md: 20px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --radius-tag: 2rem;

    --shadow-btn: 0px 4px 4px rgba(0, 0, 0, 0.1), inset 0px 4px 4px rgba(255, 255, 255, 0.25);
    --shadow-btn-active: 0px 4px 4px rgba(0, 0, 0, 0.1), inset 0px -4px 4px rgba(255, 255, 255, 0.25);
    --shadow-card: 0px 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-map: 0 4px 15px rgba(16, 16, 16, 0.2);
    --shadow-gallery: 0 10px 30px rgba(0,0,0,0.5);
}


/* ==========================================
   СБРОС И ОБЩИЕ СТИЛИ
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
}

body {
    background-color: var(--color-bg);
}

.container {
    width: 80vw;
    margin: 0 auto;
}


/* ==========================================
   БАЗОВАЯ ТИПОГРАФИКА
   ========================================== */
h1 {
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 600;
    color: var(--color-text-inverted);
    margin-bottom: 10px;
}

h3 {
    margin: 0;
    font-size: clamp(1rem, 7.3vw, 20rem);
    font-weight: 100;
    letter-spacing: 0.3em;
    width: 100%;
    text-align: center;
}

p {
    font-size: clamp(1rem, 1vw, 1.5rem);
}


/* ==========================================
   0. PRELOADER
   ========================================== */
.preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-text-dark);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}

.preloader svg {
    width: 107px;
    height: 122px;
    overflow: visible;
}

.preloader path {
    fill: none;
    stroke: var(--color-preloader-stroke);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.preloader .svg-elem-1 { animation: animate-stroke 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both; }
.preloader .svg-elem-2 { animation: animate-stroke 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s both; }
.preloader .svg-elem-3 { animation: animate-stroke 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both; }

@keyframes animate-stroke {
    0% { stroke-dashoffset: 400; opacity: 0; }
    10% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}


/* ==========================================
   1. ШАПКА (HEADER)
   ========================================== */
   
header {
    display: grid;
    grid-template-columns: 5fr 2fr 5fr;
    padding: 5px;
    border: 1px solid var(--color-border-main);
    border-radius: var(--radius-pill);
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(7px);
}

.main-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}

.main-nav ul, menu {
    display: flex;
    list-style-image: url(./img/menu-bullit.svg);
    padding-left: 45px;
    gap: 40px;
    margin: 0;
}

.main-nav li a, menu li a {
    text-decoration: none;
    color: var(--color-text-inverted);
    font-size: clamp(0.7rem, 1vw, 1.5rem);
    font-weight: 500;
    transition: color 0.3s ease;
}

.main-nav li a:hover, menu li a:hover {
    color: var(--color-btn);
}

menu {
    display: flex;
    justify-content: left;
    align-items: center;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 70%;
    height: auto;
}

.connect {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 20px;
    padding: 5px;
}

.connect-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.social-icon-link {
    display: inline-flex;
    align-items: center;
}

.social-icon-link img {
    filter: brightness(0) invert(81%);
    transition: filter 0.5s ease;
}

.social-icon-link:hover img {
    filter: none;
}

.connect-phone {
    display: inline-block;
    background-color: var(--color-btn);
    color: var(--color-text-inverted);
    padding: 5px 20px;
    border-radius: 60px;
    box-shadow: var(--shadow-btn);
    transition: 1s;
    text-decoration: none;
    text-align: center;
}

.connect-phone:active {
    box-shadow: var(--shadow-btn-active);
    transform: scale(0.99);
    transition: 0.1s;
}

.menu-phone-number {
    color: var(--color-icons-muted);
    font-weight: 600;
    font-size: 1.3rem;
}

.menu-phone-number-small {
    font-size: 1rem;
    color: var(--color-icons-muted);
}

.mobile-menu-btn {
    display: none;
    cursor: pointer;
    z-index: 101;
    background: none;
    border: none;
    padding: 0;
}

.mobile-menu-btn img {
    width: 30px;
    height: 30px;
    display: block;
}


/* ==========================================
   2. HERO (ПЕРВЫЙ БЛОК)
   ========================================== */
.hero-banner-main-page {
    width: 98vw;
    height: 96vh;
    background-image: url(./img/hero-banner-main-page.png);
    background-size: cover;
    background-position: center;
    margin: 0 auto;
    position: absolute;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: var(--radius-lg);
}

.hero-location {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.hero-map-icon {
    width: 20px;
    height: 20px;
}

.hero-location a {
    color: var(--color-btn);
    font-size: clamp(1.5rem, 2vw, 2rem);
}

.hero-text {
    padding: 0 45px;
    margin-top: 40vh;
    margin-bottom: 30vh;
}

.hero-text p {
    color: var(--color-text-subhead-white);
    padding-bottom: 10rem;
}

.hero-text button {
    color: var(--color-text-inverted);
    background-color: var(--color-gray-btn);
    padding: 2vh 8vw;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-btn);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1), inset -32px 10px 33.5px rgba(255, 255, 255, 0.25);
    transition: 1000ms;
    backdrop-filter: blur(5px);
}

.hero-text button:hover {
    background-color: var(--color-btn);
}

.hero-text button:active {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1), inset -32px -10px 33.5px rgba(255, 255, 255, 0.25);
    transform: scale(0.99);
    transition: 100ms;
}

.hero-text .connect-phone {
    width: 100%;
}


/* ==========================================
   3. НАШИ КЛИЕНТЫ
   ========================================== */
.our-clients h3 {
    color: #000;
}

.our-clients {
    margin-top: var(--section-gap);
}

.clients-logo {
    margin-top: calc(-6vw + 55px);
    margin-bottom: 7vw;
    overflow: hidden;
    width: 100%;
}

.clients-logo-track {
    display: flex;
    align-items: center;
    gap: 1vw;
    width: max-content;
    animation: clients-marquee 28s linear infinite;
}

.client-logo {
    flex: 0 0 clamp(130px, 11vw, 220px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.client-logo img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

@keyframes clients-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 0.5vw));
    }
}


/* ==========================================
   4. НАШИ РАБОТЫ (ПОРТФОЛИО)
   ========================================== */
.portfolio input {
    display: none;
}

.portfolio-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row;
    gap: 40px;
}

.menu-string {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem auto;
}

.menu-string > label {
    font-size: 1.5rem;
    font-weight: 200;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-tag);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: 0.3s;
    text-decoration: none;
}



@keyframes fadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.portfolio-item p {
    font-size: 1.1rem;
    font-weight: 200;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-tag);
    padding: 0.3rem 1rem;
    display: inline-block;
    margin-top: 1rem;
    width: fit-content;
}

.pf-image, .pf-overlay {
    border-radius: var(--radius-xs);
    background-image: url('./img/menu-bullit.svg'), url('./img/menu-bullit.svg'), url('./img/menu-bullit.svg'), url('./img/menu-bullit.svg');
    background-position: 0.4vw 0.4vw, calc(100% - 0.4vw) 0.4vw, 0.4vw calc(100% - 0.4vw), calc(100% - 0.4vw) calc(100% - 0.4vw);
    background-size: 0.7vw 0.7vw;
    background-repeat: no-repeat;
}

.pf-image {
    position: relative;
    background-color: var(--color-card-bg);
    padding: 1.5vw;
    aspect-ratio: 3 / 2;
    box-shadow: var(--shadow-card);
}

.pf-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3rem;
    display: block;
}

.pf-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    background-color: var(--color-card-overlay);
}

.portfolio-item:hover .pf-overlay {
    opacity: 1;
}

.pf-overlay a {
    font-size: 1.1rem;
    font-weight: 200;
    color: var(--color-text-inverted);
    border: 1px solid var(--color-text-inverted);
    border-radius: var(--radius-tag);
    padding: 0.3rem 1.5rem;
    text-decoration: none;
    transition: 0.3s ease;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.pf-overlay a:hover {
    background: rgba(255, 255, 255, 0.2);
}


/* ==========================================
   5. ОСТАВИТЬ ЗАЯВКУ (МАЛЫЙ БЛОК)
   ========================================== */
.leave-request-small-block {
    width: 98vw;
    height: auto;
    background-image: url(./img/colsult-bg.png);
    background-size: cover;
    background-position: right;
    margin: 0 auto;
    border-radius: var(--radius-md);
    padding: 20px;
    margin-top: var(--section-gap);
}

.leave-request-small-block .container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    align-items: center;
}

.leave-request-small-block button {
    background-color: var(--color-btn);
    color: var(--color-text-inverted);
    padding: 1rem 40px;
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: var(--shadow-btn);
    font-size: 1rem;
    line-height: 100%;
}

.leave-request-small-block button:active {
    box-shadow: var(--shadow-btn-active);
    transform: scale(0.99);
    transition: 100ms;
}


/* ==========================================
   6. ВИДЫ УСЛУГ
   ========================================== */
.services {
    margin-top: var(--section-gap);
}

.services h3 {
    font-size: clamp(2rem, 9vw, 20rem);
}

.scene {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5vw auto;
}

.services .scene {
    display: none;
}

.prism {
    position: relative;
    width: 550px;
    height: 70px;
    transform-style: preserve-3d;
    animation: rotateX 6s infinite linear;
    align-items: center;
    justify-content: center;
}

.face {
    position: absolute;
    width: 550px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    font-size: 2.2rem;
    font-weight: 200;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-dark);
    backface-visibility: visible;
    background: var(--color-card-bg);
    border: 2px solid var(--color-text-dark);
}

.front { transform: translateZ(20.2px); }
.top { transform: rotateX(120deg) translateZ(20.2px); }
.back { transform: rotateX(240deg) translateZ(20.2px); }

@keyframes rotateX {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}

.services-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2vh;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    height: 100%;
}

.service-icon {
    width: 100%;
    aspect-ratio: 1 / 0.77;
    background-color: var(--color-card-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 auto 1rem auto;
}

.service-icon img {
    height: 60%;
    width: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.service-item:hover .service-icon {
    background-color: var(--color-service-hover);
    box-shadow: var(--shadow-card);
    transition: 0.5s ease;
}

.service-item:hover .service-icon img {
    filter: brightness(0) invert(1);
}

.service-item p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    transition: 0.5s ease;
    line-height: 1.3;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

[class*="badge-"] {
    position: relative;
}

[class*="badge-"]::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 32px;
    top: 0; right: 0;
    transform: translate(50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
    pointer-events: none;
}

.badge-hot::after { background-image: url('./img/accents/hot.svg'); }
.badge-new::after { background-image: url('./img/accents/new.svg'); }
.badge-star::after { background-image: url('./img/accents/star.svg'); }

.service-link {
    display: flex;
    flex-direction: column; /* Иконка сверху, текст снизу (как было раньше) */
    align-items: center; /* Выравниваем по центру */
    width: 100%;
    height: 100%;
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Текст наследует цвет от родителя, а не синий по умолчанию */
}


/* ==========================================
   7. НОВАЯ БУКВА ЭТО...
   ========================================== */
.this-is h3 {
    font-size: clamp(1rem, 6vw, 20rem);
    line-height: 150%;
}

.this-is {
    margin-top: var(--section-gap);
}

.number, .subtext {
    font-size: 1rem;
    color: var(--color-text-muted);
}

.number {
    margin-bottom: 10px;
}

.this-is-text {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
}

.this-is-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 2rem;
}

.this-is-card-full, .this-is-card-half {
    background-color: var(--color-card-bg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 17rem;
    border-radius: var(--radius-md);
    transition: 0.5s ease;
    position: relative;
    overflow: hidden;
}

.this-is-card-full:hover, .this-is-card-half:hover {
    box-shadow: var(--shadow-card);
    transition: 0.5s ease;
}

.this-is-card-full {
    grid-column: span 2;
}

.this-is-card-half {
    grid-column: span 1;
}

.this-is-card-full::before, .this-is-card-half::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('./img/logo-turned.svg');
    background-position: right top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: var(--color-card-bg);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.this-is-card-full:hover::before, .this-is-card-half:hover::before {
    opacity: 1;
}

.this-is-card-full .number, .this-is-card-full .this-is-text, .this-is-card-full .subtext,
.this-is-card-half .number, .this-is-card-half .this-is-text, .this-is-card-half .subtext {
    position: relative;
    z-index: 1;
}

.subtext {
    margin: 0;
    margin-top: auto;
}


/* ==========================================
   8. ОТВЕТСТВЕННОСТЬ
   ========================================== */
.responsobility-bg {
    background-image: url(./img/bg3.png);
    border-radius: var(--radius-lg);
    width: 98vw;
    background-size: cover;
    background-position: center;
    margin: var(--section-gap) auto 0 auto;
    padding: 3rem 0;
    background-attachment: fixed;
}

.responsobility h1 {
    text-align: center;
    padding: 3rem 5rem;
}

.responsobility {
    padding-bottom: var(--space-lg);
}

.responsobility-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.responsobility-item {
    padding: 20px calc(100% / 12 + 20px);
}

.responsobility-icon-and-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 20px;
}

.responsobility-icon-and-header img {
    width: 70px;
    height: 70px;
    background-color: var(--color-text-inverted);
    border-radius: 12px;
    padding: 12px;
    object-fit: contain;
    box-shadow: var(--shadow-card);
}

.responsobility-icon-and-header h4 {
    color: var(--color-text-inverted);
    font-size: clamp(1rem, 2vw, 4rem);
    font-weight: 500;
}

.responsobility-item p {
    color: var(--color-text-inverted);
    font-weight: 300;
    font-size: 1.2rem;
}


/* ==========================================
   9. ОТЗЫВЫ
   ========================================== */
.reviews {
    padding: var(--section-gap) 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.reviews h3 {
    font-size: clamp(2rem, 16vw, 20rem);
    line-height: 1;
    color: var(--color-reviews-h3);
    grid-column: 1 / 13;
}

.reviews > p {
    font-size: clamp(2rem, 5vw, 10rem);
    text-align: center;
    font-weight: 100;
    letter-spacing: 0.43em;
    grid-column: 1 / 13;
    margin-bottom: 10vh;
}

.review-anootation {
    grid-column: 3 / 6;
    font-size: 2rem;
}

.yandex-reviews {
    grid-column: 7 / 13;
    height: 100vh;
}


/* ==========================================
   10. КАРТА
   ========================================== */
.yandex-map-wrapper {
    width: 98vw;
    margin: var(--section-gap) auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.yandex-map {
    filter: invert() grayscale(0.6) hue-rotate(180deg);
    position: relative;
}

.map-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    pointer-events: none;
}

.map-overlay h3 {
    font-size: clamp(2rem, 12vw, 20rem);
    line-height: 90%;
    letter-spacing: 0.3em;
    margin-bottom: 3rem;
}

.cotacts-block {
    pointer-events: auto;
    filter: invert();
    background-color: var(--color-bg);
    width: calc(100% / 4);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-map);
}

.adress, .phone {
    font-size: 1.5rem;
    font-weight: 500;
    padding-bottom: 2rem;
}


/* ==========================================
   11. РАССЧИТАТЬ СТОИМОСТЬ
   ========================================== */
.calculate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    background-color: var(--color-card-bg);
    border-radius: 0 1.5rem 1.5rem 0;
    margin: var(--section-gap) auto;
}

.calculate-image {
    background: linear-gradient(0deg, rgba(87, 87, 87, 0), rgba(87, 87, 87, 0)), url(./img/one-more-bg.png);
    width: 100%;
    height: auto;
    padding: 0;
    background-size: 100% 100%, auto;
    background-position: left top, right center;
    background-repeat: no-repeat;
    border-radius: 1.5rem 0 0 1.5rem;
    overflow: hidden;
}

.calculate-form {
    padding: 2rem 0;
}

.calculate-form h1 {
    color: var(--color-text-dark);
}

.form-group {
    text-align: left;
}

.form-group input {
    background-color: var(--color-input-bg);
    padding: 1.5rem;
    margin: 0.5rem 0;
    width: 80%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-input-border);
    outline: none;
}

.checkbox-group {
    display: flex;
    gap: 12px;
    width: 80%;
}

.checkbox-group input {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    accent-color: gray;
}

.submit-btn {
    margin-top: 2rem;
    background-color: var(--color-btn);
    color: var(--color-text-inverted);
    padding: 1.5rem 0;
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: var(--shadow-btn);
    font-size: 1.5rem;
    width: 80%;
}

.submit-btn:active {
    box-shadow: var(--shadow-btn-active);
    transform: scale(0.99);
    transition: 100ms;
}


/* ==========================================
   12. ПОДВАЛ (FOOTER)
   ========================================== */
footer {
    background-color: var(--color-footer-top);
}

.footer-logo {
    vertical-align: middle;
    text-align: center;
    padding: 5rem;
}

.footer-logo img {
    width: 70vw;
}

.footer-menu {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding-bottom: 5rem;
}

.footer-menu-block {
    grid-column: auto / span 3;
}

.just-menu { grid-column-start: 4; }
.footer-catalog { grid-column-start: 7; }
.footer-contacts { grid-column-start: 10; }

.footer-menu-block h5 {
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-text-inverted);
    padding-bottom: 0.9rem;
    letter-spacing: 0.1em;
}

.footer-menu-block ul {
    display: block;
    list-style: none;
    color: var(--color-footer-text);
    font-weight: 200;
    line-height: 200%;
}

.footer-sosial-icons {
    display: flex;
    margin-top: 2rem;
    gap: 1rem;
}

.pre-text {
    color: var(--color-text-inverted);
}

.wecontur-plate {
    display: flex;
    width: 100%;
    padding: 2rem 0;
    background-color: var(--color-footer-bottom);
    justify-content: center;
    gap: 2rem;
    color: var(--color-text-inverted);
    font-weight: 200;
}


/* ==========================================
   ВСПЛЫВАЮЩЕЕ ОКНО (МОДАЛКА)
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url(./img/hero-banner-main-page.png);
    background-size: cover;
    background-position: center;
    filter: blur(3px);
    z-index: 1;
}

.modal-overlay::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--color-overlay-bg);
    z-index: 2;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    box-sizing: border-box;
    position: relative;
    width: 479px;
    max-width: 90vw;
    /* ИЗМЕНЕНИЕ 1: Убираем жесткую высоту, окно будет тянуться по контенту */
    height: fit-content; 
    /* Ограничение, чтобы на маленьких экранах окно не вылезло за низ */
    max-height: 90vh; 
    background: linear-gradient(180deg, rgba(34, 47, 48, 0.8) 0%, rgba(34, 35, 35, 0.8) 100%);
    border: 1px solid var(--color-modal-input-border);
    border-radius: var(--radius-sm);
    z-index: 3;
    padding: 13px 13px 40px 13px;
    display: flex;
    flex-direction: column;
    /* Оставляем auto на случай, если контент превысит max-height (на мобилках) */
    overflow-y: auto; 
}

.modal-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-xs);
}

.modal-content h6 {
    color: var(--color-text-inverted);
    font-size: 1.786rem;
    font-weight: 600;
    margin: 20px 0 20px 0;
    text-align: center;
}

.modal-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.143rem;
    text-align: center;
    margin-bottom: 35px;
    padding: 0 50px;
    line-height: 1.3;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: calc(100% - 2rem);
    margin: 0 auto;
}

/* ИЗМЕНЕНИЕ 2: Точечно указываем типы инпутов, чтобы не сломать чекбокс */
.modal-form input[type="text"],
.modal-form input[type="tel"],
.modal-form input[type="email"] {
    width: 100%;
    background-color: var(--color-modal-input-bg);
    border: 1px solid var(--color-modal-input-border);
    border-radius: 5px;
    padding: 15px;
    color: var(--color-modal-input-text) !important;
    outline: none;
    font-family: Montserrat, sans-serif;
    text-align: center;
    box-shadow: var(--shadow-btn-active);
}

.modal-form input::placeholder {
    color: var(--color-modal-input-text);
}

.modal-form input:-webkit-autofill,
.modal-form input:-webkit-autofill:hover,
.modal-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-modal-input-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--color-modal-input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ИЗМЕНЕНИЕ 3: Меняем тень на кнопке местами */
.modal-submit-btn {
    width: 100%;
    color: var(--color-text-inverted);
    background-color: var(--color-btn);
    padding: 15px;
    border-radius: var(--radius-sm);
    border: none;
    box-shadow: var(--shadow-btn-active); /* Теперь кнопка вдавлена по умолчанию */
    cursor: pointer;
    font-size: 1rem;
    font-family: Montserrat, sans-serif;
    transition: 100ms;
}

.modal-submit-btn:active {
    box-shadow: var(--shadow-btn); /* При клике становится выпуклой */
    transform: scale(0.99);
    transition: 100ms;
}

/* ИЗМЕНЕНИЕ 4: Правильная верстка чекбокса CF7 */
/* Обертка чекбокса на всю ширину */
.modal-form .checkbox-group,
.modal-form .wpcf7-acceptance {
    display: flex !important;
    align-items: flex-start !important;
    width: 100%;
}

.modal-form .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    margin: 0;
}

/* Сама галочка: сбрасываем ширину, даем отступ справа, чтобы текст не прилипал */
.modal-form input[type="checkbox"] {
    width: auto !important; 
    margin-top: 3px; /* Приподнимаем галочку к верху текста */
    margin-right: 8px; /* Отступ от текста */
    flex-shrink: 0; /* Чтобы галочка не сжималась */
}

/* Текст чекбокса: занимает всю оставшуюся ширину и не обтекает галочку */
.modal-form .wpcf7-list-item-label {
    flex: 1;
    text-align: left; /* Текст выравнивается по левому краю */
    color: rgba(255, 255, 255, 0.8); /* Цвет текста как у остального текста в модалке */
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Ссылка в чекбоксе */
.modal-form .wpcf7-list-item-label a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}


/* ==========================================
   ГАЛЕРЕЯ
   ========================================== */
.gallery-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--color-overlay-bg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.gallery-close-btn {
    position: absolute;
    top: 20px; right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10001;
}

.gallery-close-btn img, .gallery-arrow img {
    width: 40px; height: 40px;
    filter: brightness(0) invert(1);
    transition: 0.3s;
}

.gallery-close-btn:hover img, .gallery-arrow:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,0.8));
}

.gallery-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 90vw;
}

.gallery-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.gallery-prev img {
    transform: rotate(180deg);
}

.gallery-main-image {
    width: 50vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-gallery);
}

.gallery-caption {
    color: white;
    text-align: center;
    margin-top: 15px;
    font-size: 1.2rem;
    max-width: 50vw;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.gallery-thumb {
    width: calc(50vw / 4 - 10px);
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    opacity: 0.5;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.3s;
}

.gallery-thumb.active {
    opacity: 1;
    border-color: white;
}


/* ==========================================
   LANDING HERO (Шаблон для посадочных страниц)
   ========================================== */
.page-hero-landing {
    position: relative;
    width: 98vw;
    height: 77vh;
    background-color: var(--color-text);
    border-radius: var(--radius-lg);
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2vh;
}

.page-hero-bg {
    position: absolute;
    width: 120%;
    opacity: 0.1;
    z-index: 0;
    left: -33%;
}

.page-hero-bg img {
    width: 100%; height: 100%;
    object-fit: contain;
}

.page-hero-landing h1 {
    position: relative;
    z-index: 1;
    color: var(--color-text-inverted);
    text-align: center;
    font-size: clamp(3rem, 7vw, 20rem);
    font-weight: 100;
    padding: 0 40px;
}

.text-grid-center {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-top: var(--section-gap);
}

.text-grid-center p {
    font-size: 1.5rem;
    grid-column: 2 / 12;
    line-height: 120%;
    padding: 0.3rem 0;
}

.text-grid-center h2{
    font-size: 4.5rem;
    grid-column: 2 / 12;
    line-height: 120%;
    padding: 2rem 0;
}

.text-grid-center h4{
    font-size: 3rem;
    grid-column: 2 / 12;
    line-height: 120%;
    padding: 2rem 0;
}

.text-grid-center h6{
    font-size: 2rem;
    grid-column: 2 / 12;
    line-height: 120%;
    padding: 1rem 0;
}



.text-grid-center ul,
.text-grid-center ol  {
    grid-column: 2 / 12;
    font-size: 1.5rem;
    line-height: 120%;
    float: none;
    width: 100%;
    padding: 1rem 0;
}

.text-grid-center li{
    padding: 0.23rem 0;
}

.text-grid-center ul > li{
    list-style-type: circle;
}



.page-gallery {
    width: 80vw;
    margin: var(--section-gap) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.pg-viewer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.pg-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.pg-arrow img {
    width: 40px; height: 40px;
    filter: brightness(0) invert(1);
    transition: 0.3s;
}

.pg-arrow:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,0.8));
}

.pg-arrow.left img {
    transform: rotate(180deg);
}

.pg-main-img {
    width: 70%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-xs);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.pg-caption {
    font-size: 1.2rem;
    color: var(--color-text);
    text-align: center;
}

.pg-thumbs {
    display: flex;
    gap: 15px;
}

.pg-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    opacity: 0.5;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.3s;
}

.pg-thumb.active {
    opacity: 1;
    border-color: var(--color-btn);
}


/* ==========================================
   СТИЛИ МОБИЛЬНОГО МЕНЮ
   ========================================== */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--color-text);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 120px;
    padding-left: 5vw;
}

.mobile-menu-overlay.active {
    transform: translateX(0);
}

.mobile-menu-close-btn {
    position: absolute;
    top: 45px; right: 25px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-close-btn img {
    width: 30px; height: 30px;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
}

.mobile-menu-close-btn:hover img {
    opacity: 0.7;
}

.mobile-nav {
    width: 100%;
    max-width: 400px;
}

.mobile-nav ul {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav li:last-child {
    border-bottom: none;
}

.mobile-nav a {
    display: block;
    color: var(--color-text-inverted);
    text-decoration: none;
    font-family: Montserrat, sans-serif;
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 500;
    padding: 18px 0;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 20px;
}

.mobile-nav a:hover, .mobile-nav a:focus {
    color: var(--color-btn);
    padding-left: 28px;
}

.mobile-nav a:active {
    opacity: 0.8;
}


/* ==========================================
   МЕДИАЗАПРОСЫ
   ========================================== */

@media (max-width: 1200px) {
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90vw;
        padding: 15px 25px;
        position: absolute;
        top: 40px; left: 50%;
        transform: translateX(-50%);
        grid-template-columns: unset;
        border-radius: var(--radius-pill);
    }

    .main-nav, .connect {
        display: none !important;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo {
        display: flex;
        flex: 1;
        justify-content: left;
        margin-left: 10px;
    }
    
    .logo img {
        width: 130px; height: auto;
    }

    /* Убрали .hero-location отсюда! */

    .hero-text button {
        display: none;
    }

    .services-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 2vh;
    }
}

@media (min-width: 1201px) {
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .hero-text .connect-phone {
        display: none;
    }

    /* Добавили скрытие ссылки "Как добраться" на десктопе */
    .hero-location {
        display: none;
    }
}
@media (max-width: 768px) {
    .container {
        width: 90vw;
    }

    .clients-logo {
        margin-top: 35px;
        margin-bottom: 40px;
    }

    .clients-logo-track {
        gap: 20px;
        animation-duration: 22s;
    }

    .client-logo {
        flex-basis: clamp(110px, 36vw, 180px);
    }

    .client-logo img {
        max-width: 80%;
        height: auto;
    }

    .menu-string {
        flex-wrap: wrap;
        gap: 10px 15px;
        margin: 1.5rem auto;
    }

    .menu-string > label {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }

    .portfolio-content {
        gap: 20px;
    }

    .portfolio-item {
        grid-column: span 12;
    }

    .pf-image {
        padding: 5vw; 
    }

    .portfolio-item p {
        font-size: 0.9rem;
    }

    .pf-overlay, .pf-image {
        background-position: 1.3vw 1.3vw, calc(100% - 1.3vw) 1.3vw, 1.3vw calc(100% - 1.3vw), calc(100% - 1.3vw) calc(100% - 1.3vw);
        background-size: 3vw 3vw;
    }

    .leave-request-small-block .container {
        flex-direction: column;
        align-items: center;
        text-align: left;
        gap: 20px;
        padding: 30px 20px;
    }

    .leave-request-small-block button {
        width: 100%;
        max-width: 320px;
        padding: 1rem 20px;
    }

    .this-is-cards {
        grid-template-columns: 1fr;
    }

    .this-is-card-full, .this-is-card-half {
        grid-column: span 1;
        height: auto;
        min-height: 140px;
    }

    .this-is-text {
        font-size: 1.5rem;
    }

    .responsobility-bg {
        background-attachment: scroll;
    }

    .responsobility h1 {
        padding: 2rem 1rem;
    }

    .responsobility-items {
        grid-template-columns: 1fr;
    }

    .responsobility-item {
        padding: 2rem 1rem;     
    }

    .responsobility h4 {
        font-size: 1.5rem;
    }

    .reviews {
        gap: 20px;
    }

    .reviews > p {
        margin-bottom: 3rem;
    }

    .review-anootation {
        grid-column: 1 / -1;
        font-size: 1.2rem;
    }

    .yandex-reviews {
        grid-column: 1 / -1;
        height: 150vh;
    }

    .yandex-map {
        filter: none;
        display: flex;
        flex-direction: column;
    }

    .map-overlay {
        position: static;
        pointer-events: auto;
        order: 1;
        padding: 2rem 0;
    }

    .map-overlay h3 {
        color: var(--color-text);
        text-align: left; 
        margin-bottom: 1.5rem;
    }

    .cotacts-block {
        width: 100%;
        filter: none;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
        margin-bottom: 2rem;
    }

    .adress, .phone {
        color: var(--color-text);
        padding-bottom: 1rem;
        font-size: 1.2rem;
    }

    .workking-time, .map-route {
        color: var(--color-text-muted);
    }

    .yandex-map iframe {
        order: 2;
        filter: invert() grayscale(0.6) hue-rotate(180deg);
        height: 80vh; 
        width: 90vw;
        border-radius: var(--radius-md);
        margin: 0 auto;
    }

    .calculate {
        display: flex;
        flex-direction: column;
        border-radius: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .calculate-image {
        min-height: 250px;
        border-radius: 0;
    }

    .calculate-form {
        padding: 2rem 1.5rem;
    }

    .calculate-form h1 {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-inverted);
        text-align: left;
        padding: 0 2rem;
        pointer-events: none;
    }

    .form-group input[type="text"],
    .form-group input[type="tel"],
    .form-group input[type="email"] {
        width: 100%;
    }

    .form-group input[type="checkbox"] {
        width: 1.5rem; height: 1.5rem;
    }
    
    .checkbox-group {
        width: 100%;
        margin-top: 1rem;
    }
    
    .checkbox-group label {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .submit-btn {
        width: 100%;
        font-size: 1.2rem;
    }

    .footer-logo {
        padding: 3rem 0;
    }

    .footer-logo img {
        display: block;
        margin: 0 auto;
        max-width: 70vw;
    }

    .footer-menu {
        display: block;
        text-align: center;
        padding-bottom: 3rem;
    }

    .just-menu, .footer-catalog {
        display: none;
    }

    .footer-contacts {
        grid-column-start: auto;
        width: 100%;
    }

    .footer-contacts ul {
        display: inline-block;
        text-align: center;
    }

    .footer-sosial-icons {
        justify-content: center;
        margin-top: 1.5rem;
    }

    .page-hero-landing {
        border-radius: var(--radius-md);
        height: 50vh;
        margin-top: 1vh;
    }

    .page-hero-landing h1 {
        font-size: clamp(2rem, 8vw, 5rem);
        padding: 0 20px;
    }

    .page-hero-bg {
        width: 100%;
        left: 0;
        opacity: 0.05;
    }

    .text-grid-center {
        display: block;
    }

    .text-grid-center p {
        font-size: 1.1rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .page-gallery {
        width: 90vw;
    }

    .pg-viewer {
        position: relative;
        display: block;
        width: 100%;
    }

    .pg-main-image {
        width: 100%;
        max-height: 50vh;
        object-fit: contain;
        display: block;
        border-radius: var(--radius-xs);
        background-color: var(--color-card-bg);
    }

    .pg-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        width: 40px; height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .pg-arrow.left { left: 10px; }
    .pg-arrow.right { right: 10px; }

    .pg-arrow img {
        width: 20px; height: 20px;
        filter: brightness(0) invert(1);
    }

    .pg-caption {
        font-size: 1rem;
        margin-top: 15px;
    }

    .pg-thumbs {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-top: 15px;
    }

    .pg-thumb {
        width: 60px;
        height: 45px;
        border-radius: 4px;
    }
}

@media (max-width: 700px) {
    .prism, .face {
        width: 375px;
    }
    .face {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .hero-text {
        margin-top: 20vh;
        margin-bottom: 50vh;
        padding: 0 20px;
    }
    
    .services-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5vh;
    }
    
    .service-item p {
        font-size: 0.85rem;
        min-height: 2.2rem;
    }
    
    header {
        width: 95vw;
        padding: 12px 20px;
    }
    
    .logo img {
        width: 110px;
    }
    
    .mobile-menu-overlay {
        padding-left: 8vw;
        padding-top: 100px;
    }
    
    .mobile-nav a {
        font-size: 1.2rem;
        padding: 16px 0;
    }

    .prism, .face {
        width: 250px;
    }
    .face {
        font-size: 20px;
    }
}

/* Сброс стилей для меню подвала */
.footer-menu-block ul li a {
    color: inherit; /* Наследует цвет от родителя */
    text-decoration: none; /* Убирает подчеркивание */
}