@font-face { font-family: 'ploni'; font-weight: 400; /*(regular)*/ font-style: normal; src: url('assets/fonts/ploni-regular-aaa.woff') format('woff'), url('assets/fonts/ploni-regular-aaa.woff2') format('woff2'), url('assets/fonts/ploni-regular-aaa.otf') format('opentype'); }
@font-face { font-family: 'ploni'; font-weight: 700; /*(bold)*/ font-style: normal; src: url('assets/fonts/ploni-bold-aaa.otf') format('opentype'); }
:root {
    --color-primary: #F6C074;
    --color-text: #3D3D3D;
    --color-text-light: #3D3D3D;
    --color-white: #ffffff;
    --font-main: 'ploni', sans-serif;
}
/* --- 1. Global & Reset --- */
html {
    font-size: 20px; /* THE BASE: 1rem = 20px */
}

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

body {
    font-family: var(--font-main);
    color: var(--color-text);
    direction: rtl;
    overflow-x: hidden;
    background-color: #fff;
    /* Body text size: 16px / 20 = 0.8rem */
    font-size: 0.9rem; 
}

.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0;
}
.btn-primary {
    background-color: var(--primary-orange);
    color: var(--primary-blue);
}

.btn-primary:hover {
    background-color: #e0a035;
}

.btn-dark {
    background-color: #333;
    color: #fff;
}
/* --- 2. Header --- */
.site-header {
    background-color: #fff;
    /* 90px / 20 = 4.5rem */
    height: 5rem; 
    display: flex;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 0.1rem 0.5rem rgba(0,0,0,0.05);
}

.header-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    padding: 0 2.5rem;
}

.logo img {
    /* 50px = 2.5rem */
    height: 2.5rem; 
    width: auto;
}
nav.main-nav {
    display: flex;
    align-items: center;
    padding: 0 1rem;
}
.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav a:hover {
    color: #999;
}
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center; /* Центрируем меню или flex-end, если нужно прижать к лого */
    margin-right: 2rem;
}

.main-nav li {
    position: relative;
    padding: 0 1.65rem; /* Отступы между словами */
}

/* 2. Разделители (палочки) между пунктами */
/* В RTL: border-left рисует линию слева от элемента */
.main-nav li:not(:last-child) {
    border-left: 1px solid var(--color-text); 
}

.main-nav a {
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s;
    color: var(--color-text);
}

.main-nav a:hover {
    color: var(--color-primary);
}

/* 4. Активный пункт меню (WordPress класс) */
.main-nav li.current-menu-item a,
.main-nav li.current_page_item a {
    color: var(--color-primary); /* Оранжевый */
    font-weight: 700;
}
.header-left {
    height: 5rem;
    display: flex;
}

.lang-switcher {
    background-color: var(--color-primary);
    /* 15px 25px = 0.75rem 1.25rem */
    padding: 0.75rem 1.25rem; 
    display: flex;
    /* 10px = 0.5rem */
    gap: 0.5rem; 
    font-weight: 700;
    /* 14px = 0.7rem */
    font-size: 0.7rem; 
        align-items: center;
}

.lang-switcher a {
    text-decoration: none;
    color: var(--color-text);
}

.lang-switcher .sep {
    opacity: 0.5;
}

/* --- 3. Hero Section --- */
.hero-section {
    position: relative;
    height: 80vh; 
    width: 100%;
    /* Update this URL with your image */
    background-image: url('https://images.unsplash.com/photo-1519817914152-22d216bb9170?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2); 
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-title {
    /* 64px = 3.2rem */
    font-size: 3.2rem; 
    line-height: 1.1;
    font-weight: 700;
    /* 20px = 1rem */
    margin-bottom: 1rem; 
    text-shadow: 0 0.2rem 0.75rem rgba(0,0,0,0.3);
}

.hero-subtitle {
    /* 20px = 1rem */
    font-size: 1rem; 
    font-weight: 300;
    /* 40px = 2rem */
    margin-bottom: 2rem; 
    opacity: 0.9;
}

.btn-hero {
    background-color: var(--color-primary);
    color: var(--color-text);
    /* 15px 40px = 0.75rem 2rem */
    padding: 0.75rem 2rem; 
    font-weight: 700;
    /* 18px = 0.9rem */
    font-size: 0.9rem; 
    text-decoration: none;
    border-radius: 0.2rem;
    transition: transform 0.3s;
}

.btn-hero:hover {
    transform: translateY(-0.15rem);
    background-color: #eec050;
}

.video-trigger {
    position: absolute;
    /* 50px = 2.5rem */
    bottom: 2.5rem; 
    left: 2.5rem;
    z-index: 2;
    /* 60px = 3rem */
    width: 3rem; 
    height: 3rem; 
    border: 0.1rem solid rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* 20px = 1rem */
    font-size: 1rem; 
    transition: 0.3s;
}

.video-trigger:hover {
    background: rgba(255,255,255,0.2);
}

/* --- 4. Stats Section --- */
.stats-section {
    /* 100px = 5rem */
    padding: 5rem 0; 
    background-color: #fff;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    /* 50px = 2.5rem */
    gap: 2.5rem; 
    align-items: start;
}

.stats-info-col p {
    /* 18px = 0.9rem */
    font-size: 0.9rem; 
    line-height: 1.6;
    color: var(--color-text-light);
    /* 30px = 1.5rem */
    margin-bottom: 1.5rem; 
    text-align: right;
}

.btn-arrow {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-text);
    /* 10px 25px = 0.5rem 1.25rem */
    padding: 0.5rem 1.25rem; 
    font-weight: 700;
    /* 14px = 0.7rem */
    font-size: 0.7rem; 
    text-decoration: none;
    border-radius: 0;
}

.stat-item {
    text-align: center;
    /* 10px = 0.5rem */
    margin-top: 0.5rem; 
}

.stat-number {
    /* 60px = 3rem */
    font-size: 3rem; 
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    /* 10px = 0.5rem */
    margin-bottom: 0.5rem; 
}

.stat-label {
    /* 16px = 0.8rem */
    font-size: 0.8rem; 
    color: var(--color-text-light);
    line-height: 1.3;
}

/* --- 5. Specialties Grid --- */
.specialties-section {
    /* 80px = 4rem */
    padding: 4rem 0; 
    background-color: #fff;
}

.section-title {
    /* 40px = 2rem */
    font-size: 2rem; 
    font-weight: 700;
    /* 50px = 2.5rem */
    margin-bottom: 2.5rem; 
    color: var(--color-text);
}

.specialties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 25px = 1.25rem */
    gap: 1.25rem; 
}

.specialty-card {
    position: relative;
    /* 450px = 22.5rem */
    height: 22.5rem; 
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.specialty-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 10%, rgba(0,0,0,0.2) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 30px = 1.5rem */
    padding: 1.5rem; 
    transition: background 0.4s ease;
}

.card-content {
    transform: translateY(0);
    transition: transform 0.4s ease;
}

.specialty-card h3 {
    color: #fff;
    /* 24px = 1.2rem */
    font-size: 1.2rem; 
    line-height: 1.3;
    font-weight: 700;
    /* 10px = 0.5rem */
    margin-bottom: 0.5rem; 
    transition: margin 0.4s;
}

.card-desc {
    color: rgba(255,255,255,0.8);
    /* 16px = 0.8rem */
    font-size: 0.8rem; 
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.card-arrow {
    display: inline-block;
    color: var(--color-primary);
    /* 15px = 0.75rem */
    margin-top: 0.75rem; 
    opacity: 0;
    /* 20px = 1rem */
    transform: translateX(1rem); 
    transition: all 0.4s ease 0.1s;
}

/* Hover Effects */
.specialty-card:hover img {
    transform: scale(1.1);
}
.specialty-card:hover .card-overlay {
    background: rgba(0,0,0,0.6);
}
.specialty-card:hover .card-content {
    /* -20px = -1rem */
    transform: translateY(-1rem); 
}
.specialty-card:hover .card-desc {
    /* 200px = 10rem (max height) */
    max-height: 10rem; 
    /* 10px = 0.5rem */
    margin-bottom: 0.5rem; 
    opacity: 1;
}
.specialty-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- 6. Projects Section --- */
.projects-section {
    /* 100px = 5rem */
    padding: 5rem 0; 
    position: relative;
    background-color: #fcfcfc;
    overflow: hidden;
}

.bg-line-decoration {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.projects-section .container {
    position: relative;
    z-index: 1;
}

.projects-header {
    text-align: right;
    /* 60px = 3rem */
    margin-bottom: 3rem; 
    /* 800px = 40rem */
    max-width: 40rem; 
}

.projects-subtitle {
    /* 18px = 0.9rem */
    font-size: 0.9rem; 
    color: var(--color-text-light);
    line-height: 1.6;
}

.projects-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 60px = 3rem */
    gap: 3rem; 
}

.projects-list-col {
    flex: 0 0 35%;
}

.projects-tabs {
    list-style: none;
}

.project-tab {
    /* 20px = 1rem */
    font-size: 1rem; 
    color: #999;
    /* 20px = 1rem */
    padding: 1rem 0; 
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 0.05rem solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-tab:hover {
    color: var(--color-text);
}

.project-tab.active {
    color: var(--color-text);
    font-weight: 700;
}

.tab-arrow {
    opacity: 0;
    color: var(--color-primary);
    /* 10px = 0.5rem */
    transform: translateX(0.5rem); 
    transition: all 0.3s ease;
}

.project-tab.active .tab-arrow {
    opacity: 1;
    transform: translateX(0);
}

.all-projects-link {
    display: inline-flex;
    align-items: center;
    /* 10px = 0.5rem */
    gap: 0.5rem; 
    /* 40px = 2rem */
    margin-top: 2rem; 
    color: var(--color-primary);
    font-weight: 700;
    /* 16px = 0.8rem */
    font-size: 0.8rem; 
    text-decoration: none;
}

/* Left Col: Preview Image */
.projects-preview-col {
    flex: 1;
    position: relative;
}

.preview-wrapper {
    position: relative;
    width: 100%;
    /* 500px = 25rem */
    height: 25rem; 
    background: #eee;
}

#project-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-info-box {
    position: absolute;
    /* -30px = -1.5rem */
    bottom: -1.5rem; 
    right: -1.5rem; 
    background-color: var(--color-primary);
    /* 40px = 2rem */
    padding: 2rem; 
    /* 320px = 16rem */
    width: 16rem; 
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
}

.project-info-box h4 {
    /* 24px = 1.2rem */
    font-size: 1.2rem; 
    font-weight: 700;
    color: var(--color-text);
    /* 15px = 0.75rem */
    margin-bottom: 0.75rem; 
}

.project-info-box p {
    /* 16px = 0.8rem */
    font-size: 0.8rem; 
    line-height: 1.5;
    color: var(--color-text);
    /* 25px = 1.25rem */
    margin-bottom: 1.25rem; 
}

.btn-white-outline {
    display: inline-block;
    background: #fff;
    color: var(--color-text);
    /* 10px 20px = 0.5rem 1rem */
    padding: 0.5rem 1rem; 
    font-weight: 700;
    /* 14px = 0.7rem */
    font-size: 0.7rem; 
    text-decoration: none;
    transition: 0.3s;
}

.btn-white-outline:hover {
    background: #f0f0f0;
}
/* --- 6. Projects Section --- */

/* --- 6. Projects Section --- */

/* Grid Layout - Возвращаем горизонтальность */
.projects-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 60px = 3rem */
    gap: 3rem; 
}

/* Right Col: List (Справа) */
.projects-list-col {
    flex: 0 0 35%; /* Ширина списка */
}

/* Left Col: Preview Image (Слева) */
.projects-preview-col {
    flex: 1;
    position: relative;
    /* Чтобы ссылка под картинкой выравнивалась по левому краю (визуально в RTL это конец строки) */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Прижимаем ссылку влево (в RTL flex-end это лево) */
}

/* Обертка картинки */
.preview-wrapper {
    position: relative;
    width: 100%;
    /* 500px = 25rem */
    height: 25rem; 
    background: #eee;
}

.project-info-box {
    position: absolute;
    bottom: -1.5rem;
    
    /* --- ИСПРАВЛЕНИЕ --- */
    right: auto; /* Сбрасываем право */
    
    /* 1. Прижимаем к левому краю картинки */
    left: 0; 
    
    /* 2. Вытягиваем влево до края экрана */
    /* Формула: (Ширина экрана - Ширина контейнера) / -2 минус отступ контейнера */
    /* Это заставит блок коснуться самого края браузера */
    margin-left: calc((100vw - 70rem) / -2 - 2rem);
    
    /* Делаем блок широким, чтобы текст в нем смотрелся красиво */
    width: 25rem; 
    
    /* Оформление */
    background-color: var(--color-primary);
    padding: 2rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
    z-index: 10;
}

/* Адаптив для мобильных (возвращаем в норму) */
@media (max-width: 1024px) {
    .project-info-box {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin-left: 0; /* Сбрасываем вытягивание */
        width: 100%;
    }
}

/* Ссылка под картинкой */
.link-wrapper-under-image {
    width: 100%;
    margin-top: 3rem; /* Отступ от картинки (учитывая свисающий желтый блок) */
    display: flex;
    /* Выравнивание ссылки: flex-end в RTL означает СЛЕВА */
    justify-content: flex-end; 
}

.all-projects-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; 
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.8rem; 
    text-decoration: none;
}

/* Responsive */
@media (max-width: 1024px) {
    .projects-layout {
        flex-direction: column;
    }
    .projects-list-col {
        width: 100%;
        margin-bottom: 2rem;
    }
    .projects-preview-col {
        width: 100%;
    }
    .project-info-box {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
    }
    .link-wrapper-under-image {
        margin-top: 1.5rem;
        justify-content: center; /* На мобильном по центру */
    }
}
/* --- 7. Career Section --- */

.career-section {
    /* 100px = 5rem */
    padding: 5rem 0; 
    background-color: #fff;
    overflow: hidden; /* Чтобы мазок кисти не вылезал за пределы */
}

.career-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 50px = 2.5rem */
    gap: 2.5rem; 
}

.career-text-col {
    flex: 1;
    padding-left: 2rem; /* Отступ от картинки */
}

.career-title {
    /* 50px = 2.5rem */
    font-size: 2.5rem; 
    font-weight: 700;
    color: var(--color-text);
    /* 20px = 1rem */
    margin-bottom: 1rem; 
}

.career-desc {
    /* 18px = 0.9rem */
    font-size: 0.9rem; 
    line-height: 1.6;
    color: var(--color-text-light);
    /* 30px = 1.5rem */
    margin-bottom: 1.5rem; 
    max-width: 25rem; /* Ограничиваем ширину текста */
}

/* --- Career Quote Marquee (Fixed) --- */
.career-quote-marquee {
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Force the section to hide the overflow */
    max-width: 100vw; 
        background: linear-gradient(180deg, rgba(246, 192, 116, 0.00) 6.13%, #F6C074 188.45%);
}

/* Background Brush */
.marquee-bg-brush {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 80rem;
    height: 12rem;
    z-index: 0;
    pointer-events: none;
}
.marquee-bg-brush svg {
    width: 100%;
    height: 100%;
}

/* THE TRACK */
.marquee-track {
    display: flex;
    /* CRITICAL: Allow the track to be as wide as it needs to be */
    width: max-content; 
    min-width: 100%;
    position: relative;
    z-index: 1;
    
    /* Structure must be LTR for the infinite loop logic to work */
    direction: ltr; 
    
    animation: marquee-rtl-scroll 35s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* THE CONTENT GROUP */
.marquee-content {
    display: flex;
    align-items: center;
    /* CRITICAL: Prevent this group from squishing */
    flex-shrink: 0; 
}

/* THE INDIVIDUAL ITEM */
.marquee-item {
    /* Reset text direction to RTL for Hebrew */
    direction: rtl; 
    
    font-size: 3.5rem;
    font-weight: 400;
    padding: 0 4rem;
    
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    
    /* CRITICAL: Force text to stay on one line */
    white-space: nowrap; 
    /* CRITICAL: Prevent the item from shrinking */
    flex-shrink: 0; 
}

.quote-icon {
    font-size: 7.5rem;
    /* Ensure icon doesn't shrink either */
    flex-shrink: 0; 
}

/* Animation: Left To Right */
@keyframes marquee-rtl-scroll {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .marquee-item {
        font-size: 1.5rem;
        padding: 0 2rem;
    }
    .career-quote-marquee {
        padding: 5rem 0;
    }
}

/* The Icon */
.big-quote-icon {
    font-size: 3rem;
    color: var(--color-text);
    margin-bottom: 1rem;
    opacity: 0.8;
}

/* Container for text + background */
.quote-text-container {
    position: relative;
    display: inline-block;
    padding: 2rem 4rem; /* Space around text */
}

/* The Text */
.quote-content {
    position: relative;
    z-index: 2; /* On top of the background */
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

/* The Orange Background */
.quote-brush-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%; /* Slightly wider than text */
    height: 140%; /* Taller than text */
    z-index: 1; /* Behind text */
    pointer-events: none;
}

.quote-brush-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .quote-content {
        font-size: 1.5rem;
    }
    .quote-text-container {
        padding: 1.5rem 1rem;
    }
    .quote-brush-bg {
        width: 120%;
    }
}
/* --- Career Intro Section --- */
.career-intro-section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.career-intro-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    overflow: hidden;
}

/* --- Content Column --- */
.career-content-col {
    flex: 1.2;
    position: relative;
    z-index: 2;
    padding-right: 8rem;
}

.career-main-title {
    font-size: 3.5rem; /* Крупный заголовок */
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4rem;
    line-height: 1.2;
    position: relative;
}

.career-text-block {
    margin-bottom: 2.5rem;
    max-width: 90%;
    padding-right: 7rem;
}

.career-text-block h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.8rem;
}

.career-text-block p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-light);
}

/* --- Image Column --- */
.career-intro-image-col {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.career-intro-image-col img {
    width: 100%;
    max-width: 25rem; /* Ограничиваем ширину фото, чтобы не было гигантским */
    height: auto;
    border-radius: 1rem; /* Легкое скругление углов самой фото, если нужно */
    position: relative;
    z-index: 2;
}
.career-intro-image-col-brush {
    position: absolute;
    left: 0;
    top: 0;
}
/* --- Brush Shapes (Background Blobs) --- */
.brush-shape {
    position: absolute;
    background-color: var(--color-primary); /* Orange */
    opacity: 0.6; /* Полупрозрачность */
    z-index: -1; /* Уводим на задний план */
    pointer-events: none;
}

/* Пятно за текстом (Сверху справа) */
.brush-top-right {
    top: -3rem;
    right: -5rem;
    width: 20rem;
    height: 15rem;
    /* Органическая форма */
    border-radius: 48% 52% 68% 32% / 42% 28% 72% 58%;
    transform: rotate(-10deg);
}

/* Пятно за девушкой (Слева посередине) */
.brush-mid-left {
    top: 20%;
    left: -3rem;
    width: 120%; /* Шире контейнера картинки */
    height: 70%;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: rotate(5deg);
}

/* Responsive */
@media (max-width: 992px) {
    .career-intro-grid {
        flex-direction: column;
        gap: 3rem;
    }
    .career-content-col {
        order: 1;
    }
    .career-intro-image-col {
        order: 2;
        width: 100%;
    }
    .career-main-title {
        font-size: 2.5rem;
        text-align: center;
    }
    .brush-top-right {
        right: 0;
        top: 0;
        width: 100%;
        opacity: 0.4;
    }
}
/* --- Career Jobs Section --- */
.career-jobs-section {
    padding: 5rem 0;
    background-color: #fcfcfc; /* Светлый фон всей секции */
}

.jobs-section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4rem;
}

/* --- Grid Layout --- */
.jobs-grid {
    display: grid;
    /* 2 колонки */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 5rem;
}

/* Job Card */
.job-card {
    background: #fff;
    padding: 3rem;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.05); /* Мягкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание по правому краю (RTL) */
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.1);
}

.job-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.job-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: 2rem;
    flex: 1; /* Чтобы кнопка всегда была внизу */
}

.job-btn {
    display: inline-block;
    background-color: rgba(254, 203, 88, 0.2); /* Бледно-оранжевый фон */
    color: #b8860b; /* Темно-оранжевый текст */
    padding: 0.6rem 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: 0.3s;
}

.job-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-text);
}

/* --- Bottom CTA Area --- */
.jobs-cta-wrapper {
    position: relative;
    text-align: center;
    padding: 3rem 1rem;
    max-width: 50rem;
    margin: 0 auto;
}

.cta-blob-bg {
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(254,203,88,0.4) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    pointer-events: none;
}

.jobs-cta-content {
    position: relative;
    z-index: 1;
}

.cta-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 2rem;
}

/* Выделяем первый абзац жирным (как на макете "Если вы ищете...") */
.cta-text p:first-child {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .jobs-grid {
        grid-template-columns: 1fr; /* 1 колонка на мобильном */
    }
    .job-card {
        padding: 2rem;
    }
}
.btn-dark {
    display: inline-block;
    background-color: #333;
    color: #fff;
    /* 12px 30px = 0.6rem 1.5rem */
    padding: 0.6rem 1.5rem; 
    font-weight: 700;
    /* 16px = 0.8rem */
    font-size: 0.8rem; 
    text-decoration: none;
    transition: 0.3s;
}

.btn-dark:hover {
    background-color: #000;
}

/* Image Side & Blob */
.career-image-col {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Оранжевое пятно (CSS Shape) */
.blob-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 100%;
    background-color: var(--color-primary);
    opacity: 0.8;
    z-index: 0;
    /* Создает органическую форму */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; 
}

.career-image-col img {
    position: relative;
    z-index: 1;
    /* 450px = 22.5rem */
    max-height: 22.5rem; 
    width: auto;
    /* Обрезка низа картинки, чтобы она была плоской */
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

/* --- 8. Partners Strip (Infinite Carousel) --- */
.partners-strip {
    background-color: #fff;
    /* 40px = 2rem */
    padding: 2rem 0; 
    border-top: 1px solid #eee;
    border-bottom: 0.2rem solid var(--color-primary); /* 4px yellow line */
    overflow: hidden; /* Hides the scrollbar */
}

.partners-slider {
    width: 100%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.partners-track {
    display: flex;
    /* Width = (Number of slides * Slide Width) * 2 */
    /* Example: 12 slides total * 200px = 2400px approx */
    width: calc(12rem * 12); 
    animation: scroll 30s linear infinite;
}

/* The Individual Logo Container */
.slide {
    /* 200px = 10rem */
    width: 10rem; 
    /* 100px = 5rem */
    height: 5rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: 0.3s;
}

/* Hover Effect: Pause and Colorize */
.partners-track:hover {
    animation-play-state: paused;
}

.slide img:hover {
    opacity: 1;
    filter: grayscale(0%);
    cursor: pointer;
}

/* Animation Keyframes */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move left by 50% of the total track width (since we doubled the items) */
        /* In RTL, we use positive values to move right, or negative to move left.
           Standard marquee moves right-to-left (negative X). */
        transform: translateX(calc(-10rem * 6)); /* Move by width of 1 set of items */
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .partners-track {
        /* Speed up animation on mobile if needed */
        animation: scroll 15s linear infinite;
    }
    .slide {
        width: 8rem; /* Smaller width on mobile */
    }
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-8rem * 6)); }
    }
}

/* --- 9. Footer --- */

.footer-top {
    background-color: #F5F5F5;
    padding: 4rem 0 1.5rem;
}
.footer-bottom {
    background-color: #fff;
}
.footer-top--wraper {
    display: grid;
    /* 4 колонки */
    grid-template-columns: repeat(4, 1fr) 2.25fr;
    gap: 2rem;
    padding-bottom: 3.75rem;
}
.footer-top--wraper2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-col h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.footer-links, .contact-info {
    list-style: none;
}

.footer-links li, .contact-info li {
    line-height: 155.556%;
    font-size: 0.9rem;
    color: var(--color-text-light);
}
.contact-info a {
    color: var(--color-text-light);
}
.footer-links a {
    text-decoration: none;
    color: var(--color-text-light);
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--color-primary);
}

/* Back to Top Button inside header */
.col-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-footer {
    position: relative;
    border-top: 0.5rem solid var(--color-primary);
}
.back-to-top {
    width: 2.75rem;
    height: 6rem;
    border: 1px solid #ddd;
    border-radius: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-size: 0.8rem;
    transition: 0.3s;
    border: 2px solid #F6C074;
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.back-to-top:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Socials */
.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-socials a {
width: 3rem;
    height: 3rem;
    background: var(--color-primary);
    color: var(--color-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}

.footer-socials a:hover {
    transform: translateY(-3px);
}

/* Footer Bottom */
.footer-bottom--wraper {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
}
/* --- Inner Page Hero (WP Version) --- */
.hero-inner {
    position: relative;
    /* Высота (можно вынести в ACF поле, если нужна разная высота) */
    height: 25rem; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 3rem; /* Отступ до контента страницы */
}

.hero-bg-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.hero-inner .hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
   background: linear-gradient(180deg, rgba(25, 45, 56, 0.00) 0%, rgba(25, 45, 56, 0.50) 100%), linear-gradient(0deg, rgba(25, 45, 56, 0.30) 0%, rgba(25, 45, 56, 0.30) 100%);
    z-index: 1;
}

.hero-inner-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.page-title {
    color: #fff;
    font-size: 5.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}
.page-title.page-title--service {
    font-size: 3.2rem;
}
/* --- Breadcrumbs Styling (Yoast/RankMath Compatible) --- */
.breadcrumbs {
    position: relative;
    font-size: 0.7rem;
    color: var(--color-text);
    font-weight: 700;
    z-index: 10;
}

/* Стилизация ссылок внутри крошек */
.breadcrumbs a, 
.breadcrumbs span {
    color: var(--color-text);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
}

/* Разделители (Yoast обычно ставит их сам, но на всякий случай) */
.breadcrumbs .sep {
    margin: 0 0.5rem;
    opacity: 0.6;
}

.breadcrumbs a:hover {
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-inner {
        height: 15rem;
    }
    .page-title {
        font-size: 2rem;
    }
    .breadcrumbs {
        top: 1rem;
        right: 1rem;
        font-size: 0.7rem;
    }
}
/* Responsive */
@media (max-width: 992px) {
    .career-container {
        flex-direction: column;
        text-align: center;
    }
    .career-text-col {
        padding-left: 0;
    }
    .career-desc {
        margin: 0 auto 1.5rem auto;
    }
    
    .footer-top {
        grid-template-columns: 1fr 1fr; /* 2 колонки на планшете */
    }
}

@media (max-width: 600px) {
    .partners-grid {
        justify-content: center;
    }
    .footer-top {
        grid-template-columns: 1fr; /* 1 колонка на мобильном */
        text-align: center;
    }
    .col-header-flex {
        justify-content: center; /* Центрируем заголовок и кнопку вверх */
        gap: 1rem;
    }
    .footer-bottom {
        flex-direction: column-reverse;
        gap: 1rem;
    }
    .footer-socials {
        justify-content: center;
    }
}
/* ... (остальные медиа-запросы остаются) ... */
/* --- Responsive Breakpoints --- */
/* Note: Media Queries usually use px or em for device widths */

@media (max-width: 1024px) {
    .hero-title { font-size: 2.1rem; /* 42px */ }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .specialties-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-layout { flex-direction: column; }
    .projects-list-col { width: 100%; margin-bottom: 2rem; }
    .project-info-box { right: 0; bottom: 0; width: 100%; position: relative; }
    .preview-wrapper { height: auto; }
}

@media (max-width: 768px) {
    .header-right { gap: 1rem; }
    .main-nav { display: none; }
    .stats-grid { grid-template-columns: 1fr; text-align: center; }
    .stats-info-col p { text-align: center; }
    .specialties-grid { grid-template-columns: 1fr; }
    .specialty-card { height: 17.5rem; } /* 350px */
}

/* --- About Intro Section --- */
.about-intro-section {
    /* 100px = 5rem */
    padding: 5rem 0;
    background-color: #fff;
}

/* Lead Text (Top) */
.about-lead-text {
padding: 0 6.5rem 5rem;
}

.about-lead-text p {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.17;
}

/* Grid Layout */
.about-grid {
    display: flex;
    align-items: center; /* Выравнивание по центру по вертикали */
    justify-content: space-between;
    gap: 6.5rem;
}

/* Right Column (Text) */
.about-content-col {
    flex: 1;
}

.about-paragraphs p {
    font-size: 1.6rem;
    line-height:131.25%;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

/* Stats specific for About Page */
.about-stats-row {
    display: flex;
    gap: 1.75rem;
    margin-top: 5rem;
}

.stat-item-small .stat-number {
    margin-bottom: 0.5rem;
    font-size: 5.05rem;
    font-weight: 500;
    letter-spacing: 1.05px;
}

.stat-item-small .stat-label {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 133.333%;
    letter-spacing: -0.48px;
    text-align: right;
}

/* Left Column (Image) */
.about-image-col {
    flex: 1;
    position: relative;
}

.about-image-col img {
    width: 100%;
    height: auto;
    display: block;
    /* Можно добавить легкую тень, как в дизайне */
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.1); 
}

/* Responsive */
@media (max-width: 992px) {
    .about-grid {
        flex-direction: column;
        gap: 2rem;
    }
    .about-image-col {
        order: -1; /* На планшете картинку часто лучше поднять наверх, или уберите это свойство, чтобы она была снизу */
        width: 100%;
    }
    .about-stats-row {
        justify-content: center; /* Центрируем статистику */
    }
}

@media (max-width: 600px) {
    .about-stats-row {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
    .about-lead-text p {
        font-size: 1rem;
        text-align: right; /* На мобильном часто удобнее читать справа налево без центровки */
    }
}
/* --- Quote Banner Section --- */
.quote-banner-section {
    position: relative;
    /* 120px = 6rem */
    padding: 6rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(246, 192, 116, 0.00) 6.13%, #F6C074 188.45%);
}

/* Фоновое пятно (Organic Shape) */
.quote-bg-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    max-width: 90rem;
    height: 150%;
    background: url(assets/img/about-vector.png);
    background-repeat: no-repeat;
    background-position-y: bottom;
}

.quote-container {
    position: relative;
    z-index: 1;
    max-width: 60rem; /* Ограничиваем ширину текста */
    display: flex;
    gap: 2.2rem;
}

/* Иконка */
.quote-icon {
    font-size: 7.5rem;
    line-height: 1.1;
}

/* Текст */
.quote-content {
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 114.286%;
}

/* Адаптив */
@media (max-width: 768px) {
    .quote-content {
        font-size: 1.5rem;
    }
    .quote-icon {
        font-size: 2rem;
    }
    .quote-bg-shape {
        width: 120%; /* Чуть шире на мобильных */
        border-radius: 40%;
    }
}
/* --- Team Section --- */
.team-section {
    padding: 8rem 0;
        background: url(assets/img/team-bg.png) #F5F5F5;
        background-repeat: no-repeat;
        background-position-y: bottom;
        background-position-x: right;
}

.team-category-block {
    margin-bottom: 4rem;
}

/* Category Header with Line */
.category-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.cat-title {
font-size: 2.5rem;
font-weight: 400;
line-height: 150%;
letter-spacing: 0.5px;
}

.cat-line {
    width: 100%;
    height: 1px;
    background-color: #ddd;
    border-top: 2px solid var(--color-primary); /* Yellow line */
}

/* Grid */
.team-grid {
    display: grid;
    /* 4 колонки, как на макете */
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Member Card */
.team-member-card {
    cursor: pointer;
    group: hover; /* For interactions */
}

.member-image-wrapper {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    background: #eee;
    aspect-ratio: 1 / 1.1; /* Пропорции фото */
}

.member-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.team-member-card:hover .member-image-wrapper img {
    transform: scale(1.05);
}

.member-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.member-role {
    font-size: 1.2rem;
}

/* --- MODAL STYLES --- */
.team-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.team-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
}

.modal-content-wrapper {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 60rem; /* Широкое окно */
    height: auto;
    max-height: 90vh;
    box-shadow: 0 2rem 4rem rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Важно для скруглений */
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem; /* RTL: Слева */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    z-index: 10;
    transition: 0.3s;
}

.modal-close:hover { color: var(--color-text); }

/* Navigation Buttons */
.modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-light);
    cursor: pointer;
    z-index: 5;
    padding: 1rem;
    transition: 0.3s;
}
.modal-nav:hover { color: var(--color-primary); }
.modal-nav.prev { right: 1rem; }
.modal-nav.next { left: 1rem; }

/* Inner Layout */
.modal-inner {
    display: flex;
    flex-direction: row; /* RTL: Row means Left to Right, but content flows Right to Left */
    min-height: 26rem;
}

/* Info Col (Left visual, Right in HTML/Flex logic if LTR, but we are RTL) 
   В RTL: первый элемент flex-контейнера будет справа.
   Судя по макету: Картинка СПРАВА, Текст СЛЕВА.
*/

.modal-info-col {
    flex: 1.2;
    padding: 3rem 4.5rem 4rem 4.5rem; /* Больше отступ слева для навигации */
    overflow-y: auto; /* Если текст длинный */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-image-col {
    flex: 0.8;
    position: relative;
    overflow: hidden;
}

.modal-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

/* Градиент под текстом/картинкой как на макете */
.modal-img-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Оранжевый градиент */
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(254,203,88,0.2) 100%); 
    z-index: 0;
}

/* Typography in Modal */
#modalName {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

#modalRole {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

.modal-bio-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 2rem;
}

.modal-linkedin-btn {
    display: inline-flex;
    width: 2.5rem; height: 2.5rem;
    background: #f0f0f0;
    color: #0077b5;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s;
}

.modal-linkedin-btn:hover {
    background: #0077b5;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    
    .modal-content-wrapper { width: 95%; max-height: 95vh; }
    .modal-inner { flex-direction: column-reverse; height: auto; overflow-y: auto; }
    
    .modal-image-col { height: 20rem; flex: none; }
    .modal-info-col { padding: 2rem; flex: none; }
    
    .modal-nav { display: none; /* На мобильном сложно с кликами, лучше убрать стрелки или переместить вниз */ }
}
@media (max-width: 600px) {
    .team-grid { grid-template-columns: 1fr; }
}
/* --- Contact Page Layout --- */
.contact-page-container {
    padding: 4rem 0 6rem;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.contact-flex-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Выравнивание по верху */
    gap: 4rem;
}

/* --- 1. Form Column --- */
.contact-form-col {
    flex: 1.5; /* Форма занимает больше места */
}

.form-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-text);
}

/* CF7 Styling Reset */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ccc; /* Только нижняя линия */
    padding: 1rem 0;
    font-family: var(--font-main);
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    transition: 0.3s;
    border-radius: 0;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    border-color: var(--color-primary);
}

/* Grid for Name/Lastname */
.form-row-half {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.form-col {
    flex: 1;
}

.form-row {
    margin-bottom: 1.5rem;
}

/* Checkbox */
.checkbox-row {
    font-size: 0.9rem;
    color: #777;
    margin-top: 1rem;
}
.wpcf7-list-item { margin: 0; }

/* Submit Button */
.custom-submit {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    transition: 0.3s;
}

.custom-submit:hover {
    background-color: #000;
}

/* --- 2. Divider Line --- */
.contact-divider {
    width: 1px;
    background-color: #e0e0e0;
    /* Высота линии - растягиваем или фиксируем */
    align-self: stretch; 
    min-height: 400px;
    margin-top: 2rem;
}

/* --- 3. Info Column --- */
.contact-info-col {
    flex: 1;
    position: relative;
    padding-top: 4rem; /* Опускаем контент чуть ниже заголовка формы */
}

/* Декоративный зигзаг (SVG) */
.contact-decor-shape {
    position: absolute;
    top: 50%;
    right: -2rem; /* Сдвиг относительно колонки */
    width: 250px;
    height: auto;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
    transform: translateY(-50%);
}

.contact-details-list {
    list-style: none;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-details-list li {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Текст слева от иконки */
    gap: 1.5rem;
    text-align: right;
}

.detail-text {
    font-size: 1.1rem;
    color: #555;
    font-weight: 500;
}

.detail-icon {
    width: 3rem;
    height: 3rem;
    background-color: #333;
    color: var(--color-primary); /* Желтая иконка */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* --- 4. Map Section --- */
.contact-map-section {
    width: 100%;
    height: 400px;
    /* Убираем отступы, чтобы карта прилипла к футеру */
    margin-bottom: -5px; 
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0%); /* Можно grayscale(100%) если нужен ч/б стиль */
}

/* Responsive */
@media (max-width: 992px) {
    .contact-flex-layout {
        flex-direction: column;
        gap: 3rem;
    }
    .contact-divider {
        display: none; /* Убираем линию на мобильном */
    }
    .contact-info-col {
        width: 100%;
        padding-top: 0;
    }
    .contact-details-list li {
        justify-content: flex-start; /* На мобильном лучше выровнять по стандарту */
        flex-direction: row-reverse; /* Чтобы иконка была справа */
    }
    .contact-decor-shape {
        display: none; /* Упрощаем на мобильном */
    }
}

/* --- Service Section --- */
.service-section {
    /* 100px = 5rem */
    padding: 5rem 0;
    background-color: #fff;
    overflow: hidden; /* Чтобы анимации не вызывали скролл */
}

.service-layout {
    display: flex;
    /* Выравниваем элементы, чтобы картинка могла быть высокой */
    align-items: stretch; 
    gap: 7.5rem;
    position: relative;
}

/* --- Text Column --- */
.service-content-col {
    flex: 1; /* Текст занимает чуть больше места */
    display: flex;
    flex-direction: column;
    /* Важно: отступ снизу, чтобы место под оранжевый блок не "съедалось" */
    padding-bottom: 8rem; 
    position: relative;
    z-index: 2; /* Текст выше картинки */
}

.service-title {
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--color-text);
    margin-bottom: 2rem;

}

.service-desc {
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 300;
    max-width: 90%;
    margin-bottom: 2rem;
}
.features-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: -6rem;
    margin-right: 8rem;
    z-index: 9;
    position: relative;
}
/* --- Orange Features Bar --- */
.service-features-bar {
    background-color: var(--color-primary);
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.feat-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #fff; /* Или белый, зависит от иконки */
    white-space: nowrap;
    margin-bottom: 1.5rem;
}

.feat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    flex: 1;
    justify-content: space-between;
}

.feat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 8rem;
}

.feat-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
}

.feat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Если иконки черные, а нужны белые, используем фильтр: */
    /* filter: brightness(0) invert(1); */
}

.feat-label {
font-size: 1.6rem;
    line-height: 1.09;
    font-weight: 500;
    color: var(--color-text);
}

/* --- Image Column --- */
.service-image-col {
    position: relative;
    z-index: 1;
    flex: 0 0 27.25rem; 
    width: 27.25rem;
}

.service-image-col img {
    width: 100%;
    height: 100%; /* Растягиваем на всю высоту секции */
    object-fit: cover;
    /* Скругляем угол, если нужно */
    border-radius: 0; 
}

/* Responsive */
@media (max-width: 992px) {
    .service-layout {
        flex-direction: column;
        gap: 0;
    }
    
    .service-content-col {
        width: 100%;
        padding-bottom: 0;
        z-index: 2;
    }
    
    .service-features-bar {
        width: 100%; /* Возвращаем ширину */
        margin-right: 0;
        margin-top: -2rem; /* Небольшой наезд на картинку снизу */
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        position: relative;
        z-index: 3;
    }
    
    .feat-header h3 {
        border-left: none;
        padding-left: 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 1rem;
        width: 100%;
    }

    .service-image-col {
        height: 20rem; /* Фикс высота на мобильном */
        width: 100%;
        order: -1; /* Картинка сверху */
    }
}

/* --- Стили для секции вакансий (из прошлого ответа) остаются --- */
/* Убедитесь, что .job-card, .jobs-grid и т.д. уже есть */


/* --- CV MODAL STYLES --- */
.cv-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.cv-modal.active {
    opacity: 1;
    visibility: visible;
}

.cv-modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.cv-modal-content {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 50rem; /* Ширина попапа как на макете */
    padding: 3rem 4rem;
    box-shadow: 0 2rem 5rem rgba(0,0,0,0.2);
    /* Оранжевый градиент снизу попапа */
    background-image: linear-gradient(to top, rgba(254,203,88,0.3) 0%, rgba(255,255,255,0) 20%);
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 10;
}

.cv-modal-close {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem; /* RTL close button */
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    transition: 0.3s;
}
.cv-modal-close:hover { color: #333; }

/* --- CF7 Form Inside Modal --- */
.cv-popup-form h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: right;
}

/* Стили полей (копируем из страницы контактов, но делаем компактнее) */
.cv-popup-form input[type="text"],
.cv-popup-form input[type="email"],
.cv-popup-form input[type="tel"] {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 0.8rem 0;
    font-size: 1rem;
    outline: none;
    background: transparent;
}
.cv-popup-form input:focus { border-color: var(--color-primary); }

.form-row-half {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}
.form-col { flex: 1; }

/* FILE UPLOAD BUTTON STYLING */
.file-upload-row {
    text-align: left; /* Кнопка слева (в RTL это конец строки) */
    margin-bottom: 1.5rem;
}

/* Прячем стандартный инпут */
.wpcf7-file {
    display: none; 
}

/* Стилизуем лэйбл как кнопку */
.btn-orange-small {
    display: inline-block;
    background-color: var(--color-primary); /* Yellow/Orange */
    color: var(--color-text);
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
}
.btn-orange-small:hover {
    background-color: #e6b035;
}

/* Submit Button Dark */
.custom-submit-dark {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.8rem 2.5rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.custom-submit-dark:hover { background-color: #000; }

/* Mobile */
@media (max-width: 768px) {
    .cv-modal-content { padding: 2rem; }
    .form-row-half { flex-direction: column; gap: 1rem; }
}

/* --- Single Job Page --- */

.single-job-container {
    padding-top:4rem;
}

/* Header */
.job-main-title {
    font-size: 3.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    letter-spacing: 0.7px;
    line-height: 1.07;
}

.job-code-badge {
    font-size: 0.9rem;
    display: inline-block;
}

/* Body Content (The Editor Output) */
.job-body-content {
    font-size: 1.6rem;
    line-height: 1.31;
    color: var(--color-text);
    margin-top: 5rem;
    padding: 0 7rem;
}
.job-body-content h2 {
letter-spacing: 0.4px;
font-size: 2rem;
font-weight: 500;
margin-bottom: 1rem;
}
.job-body-content h3 {
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}


.job-body-content ul {
    list-style: disc;
    margin-right: 1.5rem; /* Indent for RTL */
    margin-bottom: 1.5rem;
}

.job-body-content li {
    margin-bottom: 0.5rem;
}

/* --- Bottom Action Bar --- */
.job-action-bar {
    background-color: var(--color-primary); /* Orange */
    padding: 2rem 0;
    margin-top: 4rem;
}

.action-bar-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.2rem;
}

.action-text p {
    font-size: 1rem;
    color: var(--color-text);
    opacity: 0.9;
}

.btn-white {
    background-color: #fff;
    color: var(--color-text);
    border: none;
    padding: 1rem 3rem;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.btn-white:hover {
    background-color: #333;
    color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
    .job-main-title { font-size: 2rem; }
    .action-bar-flex {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
}

/* --- Job Application Section (Orange Bottom) --- */
.job-application-section {
    position: relative;
    background-color: var(--color-primary); /* The Yellow/Orange */
    padding: 5rem 0;
    margin-top: 5rem;
    overflow: hidden;
}

/* Decorative Brush Stroke */
.job-decor-brush {
    position: absolute;
    top: 0;
    left: -10%; /* Move slightly off screen */
    width: 60%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.job-decor-brush svg {
    width: 100%;
    height: 100%;
    opacity: 0.5; /* Make it subtle */
}

/* Container */
.app-form-container {
    position: relative;
    z-index: 1;
    max-width: 50rem; /* Limit width */
    margin: 0 auto;
}

/* Form Heading */
.form-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-text);
    text-align: right;
}

/* --- Form Inputs Styling (On Orange BG) --- */
.job-app-form input[type="text"],
.job-app-form input[type="email"],
.job-app-form input[type="tel"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.3); /* Dark but subtle line */
    padding: 0.8rem 0;
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    transition: 0.3s;
}

.job-app-form input::placeholder {
    color: rgba(0,0,0,0.6);
}

.job-app-form input:focus {
    border-bottom-color: #000;
}

.form-row-half {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.form-col {
    flex: 1;
}

/* File Upload Button (Small White Button style) */
.file-row {
    margin-bottom: 1.5rem;
    text-align: left; /* Align left in RTL */
}

.cv-upload-label {
    cursor: pointer;
}

.btn-file-trigger {
    display: inline-block;
    background-color: #fff; /* White background */
    color: var(--color-text);
    padding: 0.4rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.btn-file-trigger:hover {
    background-color: #f0f0f0;
}

/* Submit Button */
.custom-submit-dark {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.8rem 2.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.custom-submit-dark:hover {
    background-color: #000;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row-half {
        flex-direction: column;
        gap: 1rem;
    }
    .job-decor-brush {
        width: 100%;
        left: -20%;
        opacity: 0.2;
    }
}

/* --- 404 Error Page --- */
.error-404-container {
    padding: 8rem 0;
    background-color: #fff;
    min-height: 70vh; /* Ensure it takes up most of the screen */
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-content-wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. Visuals Row (Barriers + 404) */
.error-visuals {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.big-404 {
    font-size: 8rem; /* Very large text */
    font-weight: 700;
    color: #999; /* Grey color as per design */
    line-height: 1;
    letter-spacing: 5px;
}

.barrier-icon svg {
    width: 80px;
    height: auto;
    opacity: 0.7;
}

/* 2. Message Area (Orange Blob + Text) */
.error-message-area {
    position: relative;
    width: 100%;
    max-width: 40rem;
    padding: 4rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Orange Blob Background */
.error-brush-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-2deg);
    width: 100%;
    height: 100%;
    background-color: var(--color-primary); /* Orange */
    opacity: 0.4; /* Semi-transparent */
    z-index: 0;
    /* Organic Shape */
    border-radius: 45% 55% 70% 30% / 30% 60% 40% 70%; 
}

.error-text-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

/* Reusing your existing .btn-dark, but ensuring styles here just in case */
.btn-dark {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 0.8rem 2.5rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
    border: none;
    cursor: pointer;
}

.btn-dark:hover {
    background-color: #000;
}

/* Responsive */
@media (max-width: 768px) {
    .big-404 {
        font-size: 5rem;
    }
    .barrier-icon svg {
        width: 50px;
    }
    .error-visuals {
        gap: 1rem;
    }
    .error-brush-bg {
        width: 120%; /* Wider on mobile */
    }
}