/*
Theme Name: Kollegia Theme
Theme URI: https://ka1-bryansk.ru
Author: Kollegia Advokatov
Description: Pixel-perfect тема для Коллегии адвокатов №1 Брянской области
Version: 2.0
Text Domain: kollegia-theme
*/

/* ==========================================================================
   @FONT-FACE — Vela Sans + Lora (локальные файлы)
   ========================================================================== */
@font-face {
    font-family: 'Vela Sans';
    src: url('assets/fonts/VelaSans-Regular.woff2') format('woff2'),
        url('assets/fonts/VelaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Vela Sans';
    src: url('assets/fonts/VelaSans-Medium.woff2') format('woff2'),
        url('assets/fonts/VelaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Vela Sans';
    src: url('assets/fonts/VelaSans-SemiBold.woff2') format('woff2'),
        url('assets/fonts/VelaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Vela Sans';
    src: url('assets/fonts/VelaSans-Bold.woff2') format('woff2'),
        url('assets/fonts/VelaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Lora';
    src: url('assets/fonts/Lora.woff2') format('woff2'),
        url('assets/fonts/Lora.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: 'Lora';
    src: url('assets/fonts/Lora.woff2') format('woff2'),
        url('assets/fonts/Lora.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: optional;
}

/* ==========================================================================
   CSS VARIABLES — точно по Figma
   ========================================================================== */
:root {
    /* Colors из Figma */
    --color-bg-main: #f5f3f1;
    --color-bg-card: #efece9;
    --color-bg-card-alt: #eae7e4;
    --color-bg-white: #ffffff;
    --color-bg-dark: #002248;
    --color-text-primary: #002248;
    --color-text-secondary: #73787e;
    --color-text-white: #f5f3f1;
    --color-accent: #a58e6e;
    --color-border: #e5e5e5;

    /* Typography — Figma: Vela Sans + Lora */
    --font-primary: 'Vela Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Lora', Georgia, serif;

    /* Figma mobile typography (node 1-1127) */
    --m-h1-size: 26px;
    --m-h1-weight: 500;
    --m-h1-lh: 1.1;
    --m-h2-size: 24px;
    --m-h2-weight: 400;
    --m-h2-lh: 1.1;
    --m-h3-size: 18px;
    --m-h3-weight: 400;
    --m-h3-lh: 1.1;
    --m-h4-size: 15px;
    --m-h4-weight: 400;
    --m-h4-lh: 1.1;
    --m-body-l: 16px;
    --m-body-m: 14px;
    --m-body-s: 12px;
    --m-body-xs: 10px;
    --m-body-m-weight: 600;

    /* Figma mobile spacing */
    --m-gap-xs: 8px;
    --m-gap-s: 12px;
    --m-gap-m: 16px;
    --m-gap-l: 20px;
    --m-gap-xl: 24px;
    --m-gap-xxl: 32px;
    --m-side: 20px;

    /* Spacing */
    --container-max: 1440px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-main);
    /* Sticky footer — футер всегда прижат к низу viewport */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Основной контент занимает всё свободное пространство → футер прижат к низу */
#content {
    flex: 1;
}

/* ==========================================================================
   VERTICAL RHYTHM — отступы между секциями главной страницы
   Фон секций и body одинаковый (#f5f3f1), поэтому margin невидим,
   но создаёт визуальное «дыхание» между блоками.
   ========================================================================== */
.services-section,
.about-section,
.quote-section,
.steps-section,
.team-section,
.reviews-section,
.cta-section,
.news-section,
.map-section {
    margin-top: 48px;
}

.hero-section+.services-section {
    margin-top: 0;
    /* Услуги идут сразу после героя без зазора */
}

a {
    text-decoration: none;
    color: inherit;
}

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

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ==========================================================================
   HEADER — Figma Desktop (1440x129px)
   Фиксированные пиксельные значения для десктопа
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 129px;
    background-color: #f5f3f1;
    overflow: visible;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

/* Хедер прячется при скролле вниз */
.site-header.header-hidden {
    transform: translateY(-100%);
}

/* Хедер с тенью при скролле */
.site-header.header-scrolled {
    box-shadow: 0 2px 20px rgba(0, 34, 72, 0.08);
}

/* Логотип (герб): 76x69px, x=60px */
.header-logo {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    width: 76px;
    height: 69px;
}

.header-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Текст логотипа: x=156px, y=39px */
.header-title {
    position: absolute;
    left: 156px;
    top: 39px;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: #002248;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
}

/* Навигация: x=156px, y=70px */
.header-nav {
    position: absolute;
    left: 156px;
    top: 70px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-nav-link {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #002248;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

.header-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background-color: var(--color-accent);
    transition: width 0.3s ease, left 0.3s ease;
}

.header-nav-link:hover {
    color: var(--color-accent);
}

.header-nav-link:hover::after {
    width: 100%;
    left: 0;
}

/* Active menu item */
.header-nav-link.is-active {
    color: var(--color-accent);
}

.header-nav-link.is-active::after {
    width: 100%;
    left: 0;
}

/* Кнопка: right=60px, y=30px */
.header-btn {
    position: absolute;
    right: 60px;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background-color: #002248;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.header-btn:hover {
    background-color: #a58e6e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(165, 142, 110, 0.4);
}

.header-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 34, 72, 0.2);
}

.header-btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.header-btn-text {
    font-family: var(--font-primary);
    font-weight: 600;
    /* SemiBold */
    font-size: 12px;
    line-height: normal;
    color: #f5f3f1;
}

/* Режим работы: под кнопкой, right=60px, y=78px */
.header-contacts {
    position: absolute;
    right: 60px;
    top: 78px;
    display: flex;
    justify-content: center;
    min-width: 160px;
    text-align: center;
}

.header-phone {
    font-family: var(--font-primary);
    font-weight: 600;
    /* SemiBold */
    font-size: 12px;
    line-height: normal;
    color: #73787e;
    text-decoration: none;
}

.header-hours {
    font-family: var(--font-primary);
    font-weight: 400;
    /* Regular */
    font-size: 12px;
    line-height: normal;
    color: #73787e;
}

/* Мобильный заголовок — скрыт на десктопе */
.header-title-mobile {
    display: none;
}

/* Mobile menu button - hidden on desktop */
.header-menu-btn {
    display: none;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #002248;
}

/* ==========================================================================
   1. HERO SECTION — SLIDER (1440x677px)
   Фиксированные пиксельные значения
   ========================================================================== */
.hero-section {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 677px;
    background-color: var(--color-bg-main);
    overflow: hidden;
}

.hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Slider wrapper */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Individual slide */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Hero card: 1408x645px, отступ 16px со всех сторон */
.hero-card {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 16px;
    height: 645px;
    border-radius: 5px;
    overflow: hidden;
}

.hero-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Градиент: тёмный слева, прозрачный справа */
.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(-52deg, rgba(29, 42, 58, 0) 35%, rgba(0, 34, 72, 0.75) 90%),
        linear-gradient(90deg, rgba(29, 42, 58, 0.25) 0%, rgba(29, 42, 58, 0.1) 100%);
}

/* Hero label: left 80px, top 76px */
.hero-label {
    position: absolute;
    left: 80px;
    top: 76px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.hero-label-line {
    width: 38px;
    height: 1px;
    background-color: var(--color-accent);
}

.hero-label-text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-accent);
}

/* Hero title: left 80px, top 117px, width 740px */
.hero-slide .hero-title {
    position: absolute;
    left: 80px;
    top: 117px;
    width: 740px;
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-text-white);
    z-index: 10;
    margin: 0;
}

/* Hero features: left 80px, top 293px */
.hero-features {
    position: absolute;
    left: 80px;
    top: 293px;
    display: flex;
    gap: 16px;
    z-index: 10;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-feature img {
    width: 22px;
    height: 22px;
}

.hero-feature span {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-white);
}

/* Hero CTA: left 80px, top ~390px */
.hero-cta {
    position: absolute;
    left: 80px;
    top: 388px;
    display: inline-flex;
    z-index: 10;
    text-decoration: none;
}

.hero-cta-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px 48px;
    background-color: var(--color-accent);
    border: 1.4px solid var(--color-accent);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.hero-cta:hover .hero-cta-content {
    background-color: #8a7559;
    border-color: #8a7559;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(165, 142, 110, 0.4);
}

.hero-cta-icon {
    width: 16px;
    height: 16px;
}

.hero-cta-text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-white);
}

/* Hero dots: top 629px, centered */
.hero-dots {
    position: absolute;
    left: 50%;
    top: 629px;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.2s;
}

.hero-dot.active {
    background-color: var(--color-text-white);
}

/* Hero progress bar — тонкая полоска внизу блока */
.hero-progress {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 3px;
    background-color: rgba(165, 142, 110, 0.2);
    z-index: 15;
    overflow: hidden;
    border-radius: 0 0 5px 5px;
}

.hero-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--color-accent);
    will-change: width;
    transition: none;
}

/* Заголовок под слайдером — только на мобильном (по Figma) */
.hero-title-mobile {
    display: none;
}

/* ==========================================================================
   2. SERVICES SECTION (по Figma: 1440x888px)
   ========================================================================== */
.services-section {
    position: relative;
    width: 100%;
    min-height: 888px;
    background-color: var(--color-bg-main);
    display: flex;
    justify-content: center;
}

.services-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    padding: 64px 80px 80px;
}

/* Title: left-[80px], top-[64px] */
.services-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: 32px;
}

/* Tabs: left-[80px], top-[136px] */
/* Tabs */
.services-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.services-tab {
    padding: 10px 20px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s;
}

.services-tab.active {
    background-color: var(--color-text-primary);
    color: var(--color-text-white);
    border-color: var(--color-text-primary);
}

.services-tab:hover:not(.active) {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

/* Tab content */
.services-tab-content {
    display: none;
}

.services-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Services cards grid — на главной управляется через .services-tab-content */

.services-row {
    display: flex;
    gap: 16px;
}

/* Row with 5 cards — narrower cards */
.services-row--5 .service-card {
    flex: 1 1 calc(20% - 13px);
    min-width: 180px;
}

/* Service card base — Figma: 308x200px */
.service-card {
    position: relative;
    height: 200px;
    flex: 1;
    min-width: 308px;
    background-color: #efece9;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
}

.service-card:hover {
    box-shadow: 0 8px 32px rgba(0, 34, 72, 0.12);
    transform: translateY(-4px);
}

/* Card text wrapper */
.service-card-text {
    position: absolute;
    left: 24px;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 220px;
    z-index: 5;
}


/* Title */
.service-card-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
}

/* Description — hidden by default, shown on hover */
.service-card-desc {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-secondary);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.service-card:hover .service-card-desc {
    opacity: 1;
    max-height: 100px;
}

/* Arrow — bottom left */
.service-card-arrow {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-text-primary);
    z-index: 5;
    transition: all 0.3s ease;
}

/* Arrow icon via SVG background */
.service-card-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

/* Arrow hover — accent background, horizontal arrow */
.service-card:hover .service-card-arrow {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.service-card:hover .service-card-arrow::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

/* Image wrapper — positioned at bottom right, large and partially outside (Figma style) */
.service-card-img-wrap {
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 280px;
    height: 240px;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover — картинка сдвигается в угол, освобождая место для текста */
.service-card:hover .service-card-img-wrap {
    transform: translate(20px, 15px) scale(0.82);
}

/* Бизнесу — изображения точно как в Figma */
#biznes .service-card-img-wrap,
#biznesu .service-card-img-wrap {
    left: 99px;
    top: 55px;
    right: auto;
    bottom: auto;
    width: 261px;
    height: 220px;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#biznes .service-card:hover .service-card-img-wrap,
#biznesu .service-card:hover .service-card-img-wrap {
    transform: translate(25px, 10px) scale(0.8);
}

#biznes .service-card-img,
#biznesu .service-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Image — cool blue-steel tint by default (Figma style), full color on hover */
.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    /* Cool steel-blue tint matching Figma */
    filter: grayscale(25%) brightness(0.92) sepia(15%) hue-rotate(185deg) saturate(60%);
    transition: filter 0.4s ease;
}

/* Hover — show full color */
.service-card:hover .service-card-img {
    filter: none;
}

/* Широкая карточка — картинка сдвигается мягче (она больше) */
.service-card--long:hover .service-card-img-wrap {
    transform: translate(15px, 10px) scale(0.88);
}

/* Бесплатная юридическая помощь — shield icon adjustment */
#besplatnaya-pomoshh .service-card-img-wrap {
    left: auto;
    right: 0;
    top: -21px;
    width: 235px;
    height: 120%;
}

#besplatnaya-pomoshh .service-card-img {
    object-position: center center;
    transform: none;
    padding: 0;
}

#besplatnaya-pomoshh .service-card:hover .service-card-img-wrap {
    transform: translate(20px, 20px) scale(0.95);
}

/* Allow overflow for this specific card so the massive icon shows */
#besplatnaya-pomoshh .service-card {
    overflow: visible;
}

/* Long service card — Figma: 632x200px */
.service-card--long {
    flex: 2;
    min-width: 632px;
    background-color: #eae7e4;
}

.service-card--long .service-card-text {
    max-width: 320px;
}

/* Long card always shows description */
.service-card--long .service-card-desc {
    opacity: 1;
    max-height: 100px;
}

.service-card--long .service-card-img-wrap {
    left: auto;
    right: 0;
    top: 0;
    width: 350px;
    height: 100%;
}

/* Бизнесу — широкая карточка (Figma: left:295, top:0, 337x257) */
#biznes .service-card--long .service-card-img-wrap,
#biznesu .service-card--long .service-card-img-wrap {
    left: 295px;
    top: 0;
    right: auto;
    bottom: auto;
    width: 337px;
    height: 257px;
}

/* Single card in row should not stretch (except long cards) */
.services-row .service-card:only-child {
    flex: 0 1 auto;
    max-width: 308px;
}

.services-row .service-card--long:only-child {
    flex: 0 1 auto;
    max-width: 632px;
}

/* Подзаголовок КАС РФ внутри вкладки «Бизнесу» */
.services-kas-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin: 32px 0 16px;
}

/* Decoration */
.services-decoration {
    display: none;
}

/* ==========================================================================
   3. ABOUT SECTION (по Figma: 1440x666px)
   ========================================================================== */
.about-section {
    position: relative;
    width: 100%;
    height: 666px;
    background-color: var(--color-bg-main);
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.about-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
}

/* Background card: left-[16px], top-[17px], 1408x632px, Figma */
.about-card {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 17px;
    height: 632px;
    border-radius: 5px;
    overflow: hidden;
}

.about-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Градиент из Figma: синий оверлей с диагональным затемнением */
.about-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(200.04deg, rgba(29, 42, 58, 0) 0.68%, rgba(0, 34, 72, 0.6) 87.34%),
        linear-gradient(90deg, rgba(29, 42, 58, 0.2) 0%, rgba(29, 42, 58, 0.2) 100%);
}

/* Title: внутри about-card, Figma: Lora 36px */
.about-title {
    position: absolute;
    left: 64px;
    top: 62px;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    color: #f5f3f1;
    z-index: 10;
}

/* Stats: внутри about-card, Figma */
.about-stats {
    position: absolute;
    left: 64px;
    top: 339px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 209px;
    z-index: 10;
}

.about-stats-number {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;
    color: #a58e6e;
    line-height: 1.1;
}

.about-stats-text {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    color: #f5f3f1;
    line-height: 1.4;
}

/* Tags and description: left-[80px], top-[469px], Figma */
.about-content {
    position: absolute;
    left: 80px;
    top: 469px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.about-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* На десктопе ряды тегов в одну строку (inline) */
.about-tags-row {
    display: contents;
    /* На десктопе контейнер не влияет на layout */
}

/* Теги — золотая рамка, Figma: border #a58e6e, pill shape */
.about-tag {
    padding: 4px 12px 6px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: #a58e6e;
    background-color: transparent;
    border: 1px solid #a58e6e;
    border-radius: 50px;
}

.about-desc {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #f5f3f1;
    max-width: 547px;
    line-height: 1.4;
}

/* Заголовок под картинкой — только на мобильном */
.about-title-below {
    display: none;
}

/* ==========================================================================
   4. QUOTE SECTION (по Figma: 1440x455px)
   ========================================================================== */
/* ==========================================================================
   4. QUOTE SECTION (по Figma: 1440x455px, node 1:344)
   Точные значения из Figma
   ========================================================================== */
.quote-section {
    position: relative;
    width: 100%;
    height: 455px;
    background-color: #f5f3f1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.quote-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
}

/* Фоновая карточка (1:345): left-[80px], top-[82px], w-[1280px], h-[340px] */
.quote-card {
    position: absolute;
    left: 80px;
    right: 80px;
    top: 82px;
    height: 340px;
    background: linear-gradient(74.87deg, rgb(239, 236, 233) 1.13%, rgb(238, 232, 226) 21.59%, rgb(239, 236, 233) 82.39%);
    border-radius: 5px;
}

/* Большие кавычки (1:346): x=1039, y=171, w=240.8, h=216.3 из metadata Figma */
.quote-mark-big {
    position: absolute;
    left: 1039px;
    top: 171px;
    width: 240.8px;
    height: 216.323px;
    z-index: 1;
}

/* Фото председателя (1:352): x=117, y=11, w=578, h=411 из metadata Figma */
.quote-photo {
    position: absolute;
    left: 117px;
    top: 11px;
    width: 578px;
    height: 411px;
    overflow: hidden;
    z-index: 5;
}

/* Изображение внутри: w=109.76%, h=232.22%, left=-9.72%, top=-42.42%, scaleX(-1) */
.quote-photo img {
    position: absolute;
    width: 109.76%;
    height: 232.22%;
    max-width: none;
    left: -9.72%;
    top: -42.42%;
    transform: scaleX(-1);
}

/* Имя автора (1:353): left-[104px], top-[107px], w-[265px], gap-[8px] */
.quote-author {
    position: absolute;
    left: 104px;
    top: 107px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 265px;
    z-index: 15;
}

/* Имя (1:354): Vela Sans SemiBold 16px, w-[143px] */
.quote-author-name {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: #002248;
    line-height: normal;
    width: 143px;
}

/* Линия (1:355): w-[38px] */
.quote-author-line {
    width: 38px;
    height: 1px;
    background-color: #a58e6e;
}

/* Должность (1:356): Vela Sans Regular 14px, w-[122px] */
.quote-author-title {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    color: #002248;
    line-height: normal;
    width: 122px;
}

/* Блок цитаты (1:347): x=695, y=127, w=533, h=250 из metadata Figma */
.quote-content {
    position: absolute;
    left: 695px;
    top: 127px;
    width: 533px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    z-index: 10;
}

/* Открывающая кавычка (1:348): Lora SemiBold 40px, #a58e6e */
.quote-mark {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 600;
    color: #a58e6e;
    line-height: 1.1;
    flex-shrink: 0;
}

/* Текстовый блок (1:349): w-[500px], gap-[28px] */
.quote-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 500px;
}

/* Текст цитаты (1:350): Lora Regular 28px, #002248, line-height: 1.1 */
.quote-text {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    color: #002248;
    line-height: 1.1;
}

/* Подпись (1:351): увеличена для заметности */
.quote-signature {
    width: 300px;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   5. TEAM SECTION (по Figma: node 1:357)
   Переиспользуем стили .team-archive из секции ARCHIVE ADVOKAT
   ========================================================================== */

/* Кнопка «Вся команда» (1:370): справа внизу */
.team-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.team-btn:hover {
    opacity: 0.7;
}

.team-btn:hover img {
    transform: translateX(4px);
}

.team-btn img {
    transition: transform 0.3s ease, filter 0.2s;
}

.team-btn:hover img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   6. STEPS SECTION (по Figma: 1440x406px, node 1:375)
   Pixel-perfect: 3 колонки сверху, 2 + картинка снизу, стрелки между
   ========================================================================== */
.steps-section {
    position: relative;
    width: 100%;
    height: 406px;
    background-color: #f5f3f1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.steps-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
}

/* Title (1:377): Lora Regular 36px, left=80, top=60 */
.steps-title {
    position: absolute;
    left: 80px;
    top: 60px;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    color: #002248;
    margin: 0;
}

/* Step item: horizontal layout — number + content side by side */
.step {
    position: absolute;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Step number: Lora Italic 28px, gold */
.step-num {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    font-style: italic;
    color: #a58e6e;
    line-height: 1.1;
    flex-shrink: 0;
}

/* Step content wrapper */
.step-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Step heading: Lora Regular 28px */
.step-heading {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    color: #002248;
    white-space: nowrap;
}

/* Step description: Vela Sans Regular 18px */
.step-desc {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    color: #828c99;
}

/* ---- Step positions — exact Figma pixel values (metadata) ---- */

/* Row 1 (y=134): steps 01, 02, 03 */
.step--1 {
    left: 80px;
    top: 134px;
}

.step--1 .step-content {
    width: 281px;
}

.step--2 {
    left: 512px;
    top: 134px;
}

.step--2 .step-content {
    width: 245px;
}

.step--2 .step-desc {
    width: 277px;
}

.step--3 {
    left: 944px;
    top: 134px;
}

.step--3 .step-content {
    width: 245px;
}

/* Row 2 (y=257): steps 04, 05 */
.step--4 {
    left: 80px;
    top: 257px;
}

.step--4 .step-content {
    width: 245px;
}

.step--4 .step-desc {
    width: 285px;
}

.step--5 {
    left: 512px;
    top: 257px;
}

.step--5 .step-content {
    width: 245px;
}

/* Image (1:403): x=944, y=217, 345x180 — books/scales/gavel */
.steps-image {
    position: absolute;
    left: 944px;
    top: 217px;
    width: 345px;
    height: 180px;
    object-fit: cover;
    border-radius: 0;
    z-index: 1;
}

/* Vector decoration (1:376): x=1212, y=165, 259x236 */
.steps-vector {
    position: absolute;
    left: 1212px;
    top: 165px;
    width: 259px;
    height: 236px;
    pointer-events: none;
    z-index: 0;
}

/* ---- Arrows — connecting step flow (from Figma) ---- */
.steps-arrow {
    position: absolute;
    pointer-events: none;
    display: block;
    height: auto;
    /* Offset -50% since Figma positions at center line (height≈0) */
    transform: translateY(-50%);
}

/* Arrow 01→02 (1:404): x=301, y=150, w=190 */
.steps-arrow--1-2 {
    left: 301px;
    top: 150px;
    width: 190px;
}

/* Arrow 02→03 (1:407): x=738, y=150, w=190 */
.steps-arrow--2-3 {
    left: 738px;
    top: 150px;
    width: 190px;
}

/* Arrow from 03 off-screen right (1:408): x=1250, y=150, w=236 */
.steps-arrow--curve {
    left: 1250px;
    top: 150px;
    width: 236px;
}

/* Arrow coming to 04 from left (1:406): x=-59, y=273, w=118 */
.steps-arrow--to-4 {
    left: -59px;
    top: 273px;
    width: 118px;
}

/* Arrow 04→05 (1:405): x=373, y=273, w=118 */
.steps-arrow--4-5 {
    left: 373px;
    top: 273px;
    width: 118px;
}

/* ==========================================================================
   7. REVIEWS SECTION (по Figma: 1440x483px, node 1:409)
   Pixel-perfect: 3 карточки 416px, bg #efece9, border tag
   ========================================================================== */
.reviews-section {
    position: relative;
    width: 100%;
    height: 483px;
    background-color: #f5f3f1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.reviews-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
}

/* Title (1:410): x=80, y=60, Lora Regular 36px */
.reviews-title {
    position: absolute;
    left: 80px;
    top: 60px;
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    color: #002248;
    margin: 0;
}

/* Cards container (1:411): x=80, y=127, 1280x296, flex row, gap 16px */
.reviews-cards {
    position: absolute;
    left: 80px;
    top: 127px;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Review card (CardReview): 416x296, bg #efece9, rounded 5px, p=24 */
.review-card {
    width: 416px;
    height: 296px;
    flex-shrink: 0;
    background-color: #efece9;
    border-radius: 5px;
    overflow: hidden;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 34, 72, 0.10);
}

/* Card content: flex col, h=248px, justify between (no extra padding) */
.review-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Top section: tag + text */
.review-card-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tag: border #a58e6e, rounded pill, Vela Sans Regular 12px */
.review-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px 6px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: #a58e6e;
    background-color: transparent;
    border: 1px solid #a58e6e;
    border-radius: 50px;
    align-self: flex-start;
    line-height: normal;
}

/* Review text: Vela Sans Regular 18px, #002248 */
.review-text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #002248;
    line-height: normal;
}

/* Author section: flex row, gap 8px */
.review-card-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Avatar: 40x40 circle */
.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Author info: name + date */
.review-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    line-height: normal;
}

/* Author name: Vela Sans Medium 12px, black */
.review-author-name {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    color: #000000;
}

/* Author date: Vela Sans Regular 12px, #73787e */
.review-author-date {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 400;
    color: #73787e;
}

/* Reviews dots & News mobile link — hidden on desktop */
.reviews-dots {
    display: none;
}

.news-all-link-mobile {
    display: none;
}

/* ==========================================================================
   8. CTA CONTACT SECTION (по Figma: 1440x339px, node 3:4773)
   Pixel-perfect: фото слева, текст + кнопки справа
   ========================================================================== */
.cta-section {
    position: relative;
    width: 100%;
    height: 339px;
    background-color: #f5f3f1;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.cta-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
}

/* Vector decoration (3:4774): x=172, y=-22, w=540, h=484 */
.cta-vector {
    position: absolute;
    left: 172px;
    top: -22px;
    width: 540px;
    height: 484px;
    pointer-events: none;
    z-index: 0;
}

/* Person photo container (3:4783): x=172, y=0, w=540, h=339 */
.cta-photo {
    position: absolute;
    left: 172px;
    top: 0;
    width: 540px;
    height: 339px;
    overflow: hidden;
    z-index: 1;
    transform: scaleX(-1);
}

.cta-photo-img {
    position: absolute;
    width: 101.72%;
    height: 243.59%;
    left: -2.38%;
    top: -39.52%;
    max-width: none;
}

/* Gradient overlay: fades photo into background at bottom */
.cta-photo-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(245, 243, 241, 0) 44.84%, #f5f3f1 100%);
    pointer-events: none;
}

/* Person name block (3:4784): left=80, top=60, flex-col, gap=8 */
.cta-name-block {
    position: absolute;
    left: 80px;
    top: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    width: 265px;
    z-index: 10;
}

/* Name: Vela Sans SemiBold 16px, #002248, w=88 */
.cta-person-name {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    color: #002248;
    line-height: normal;
    width: 88px;
}

/* Line decoration: 38x1, gold #a58e6e */
.cta-name-line {
    display: block;
    width: 38px;
    height: 1px;
}

/* Title: Vela Sans Regular 14px, #002248 */
.cta-person-title {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #002248;
    line-height: normal;
}

/* Subtitle label (3:4776): left=728, top=60, flex row, gap=8 */
.cta-label {
    position: absolute;
    left: 728px;
    top: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.cta-label-line {
    display: block;
    width: 38px;
    height: 1px;
}

/* Label text: Vela Sans Regular 18px, #a58e6e */
.cta-label-text {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #a58e6e;
    line-height: normal;
}

/* Title (3:4775): left=728, top=101, w=632, Lora Medium 44px */
.cta-title {
    position: absolute;
    left: 728px;
    top: 101px;
    width: 632px;
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 500;
    line-height: 1.1;
    color: #002248;
    margin: 0;
    z-index: 10;
}

/* Buttons container (3:4779): left=728, top=239, flex row, gap=8 */
.cta-buttons {
    position: absolute;
    left: 728px;
    top: 239px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
}

/* Individual button: bg #a58e6e, rounded 20px, py=12 px=24, gap=6 */
.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background-color: #a58e6e;
    border-radius: 20px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
    color: #f5f3f1;
    text-decoration: none;
    line-height: normal;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.cta-btn:hover {
    background-color: #8f7a5e;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(165, 142, 110, 0.35);
}

.cta-btn img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   9. NEWS SECTION (по Figma: node 1:446)
   Переиспользуем стили карточек из NEWS ARCHIVE (.news-card)
   ========================================================================== */
.news-section {
    position: relative;
    width: 100%;
    background-color: var(--color-bg-main);
    display: flex;
    justify-content: center;
}

.news-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    padding: 100px 80px 100px;
}

/* Заголовок + ссылка «Все новости» в одну строку */
.news-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 40px;
}

.news-title {
    font-family: var(--font-serif);
    font-size: 44px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0;
}

/* Ссылка «Все новости» справа */
.news-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.news-all-link:hover {
    opacity: 0.7;
}

.news-all-link:hover svg {
    transform: translateX(3px) translateY(-3px);
}

.news-all-link svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* ==========================================================================
   10. MAP SECTION (по Figma: 1440x406px, node 1:462)
   Pixel-perfect: карта на фоне, тёмно-синяя карточка слева
   ========================================================================== */
.map-section {
    position: relative;
    width: 100%;
    height: 406px;
    background-color: #f5f3f1;
    overflow: hidden;
}

/* Map background (1:463): full section, interactive Yandex Map */
.map-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Центрированный контейнер для карточки — в границах сайта */
.map-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    height: 100%;
    margin: 0 auto;
    z-index: 10;
    pointer-events: none;
}

/* Contact card (1:464): bg #002248, left=80, top=40, w=524, p=34, rounded=5 */
.map-card {
    position: absolute;
    left: 80px;
    top: 40px;
    width: 524px;
    background-color: #002248;
    border-radius: 5px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 45px;
    pointer-events: auto;
    overflow: hidden;
}

/* Header row (1:465): flex, justify-between, align-center */
.map-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Title: Lora Regular 36px, #f5f3f1 */
.map-card-title {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    color: #f5f3f1;
    margin: 0;
}

/* Social icons (1:467): flex, gap=14 */
.map-card-socials {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* Social icon link: 28x28, no bg */
.map-social {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.map-social:hover {
    opacity: 0.7;
}

.map-social img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Content section (1:480): flex col, gap=16 */
.map-card-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Address block (1:481): flex col, gap=8, Vela Sans Regular 18px, #f5f3f1 */
.map-card-address {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #f5f3f1;
    line-height: normal;
}

/* Address text (1:482): w=370 */
.map-address-text {
    width: 370px;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

/* Hours: inherit styles */
.map-hours {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

/* Divider line (1:484): full width, 1px, #828c99 */
.map-card-divider {
    width: 100%;
    height: 1px;
    background-color: #828c99;
}

/* Contacts block (1:485): flex col, gap=8, Vela Sans Regular 18px, #f5f3f1 */
.map-card-contacts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Phone and email: Vela Sans Regular 18px, #f5f3f1 */
.map-phone,
.map-email {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 400;
    color: #f5f3f1;
    line-height: normal;
    text-decoration: none;
    transition: opacity 0.2s;
}

.map-phone:hover,
.map-email:hover {
    opacity: 0.7;
}

/* ==========================================================================
   POPUP: Связаться с нами (по Figma: node 1:1062)
   848x358px, overlay + modal по центру экрана
   ========================================================================== */

/* Оверлей — затемнение фона */
.popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
}

.popup-overlay.is-active {
    display: flex;
}

/* Модальное окно — 848x358, bg #f5f3f1, rounded 5 */
.popup-modal {
    position: relative;
    width: 848px;
    max-width: calc(100% - 40px);
    min-height: 358px;
    background: #f5f3f1;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: popupFadeIn 0.25s ease;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Декоративный вектор (фон) — герб по центру */
.popup-decor {
    position: absolute;
    width: 488px;
    height: 446px;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 3px), calc(-50% + 0.2px));
    pointer-events: none;
}

/* Кнопка закрыть — top-right */
.popup-close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s;
    z-index: 2;
}

.popup-close:hover {
    opacity: 0.6;
}

/* Контент — по центру */
.popup-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 60px 40px;
}

/* Заголовок — Lora Regular 36px, #002248, center */
.popup-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    color: #002248;
    text-align: center;
    margin: 0;
    max-width: 508px;
}

/* Кнопки контактов */
.popup-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.popup-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.popup-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: #a58e6e;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s;
}

.popup-btn:hover {
    background: #8a7559;
}

.popup-btn img {
    flex-shrink: 0;
}

.popup-btn span {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 12px;
    color: #f5f3f1;
    line-height: normal;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
    .popup-modal {
        min-height: auto;
    }

    .popup-content {
        padding: 48px 24px;
    }

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

    .popup-row {
        flex-direction: column;
        width: 100%;
    }

    .popup-btn {
        width: 100%;
        justify-content: center;
    }

    .popup-close {
        top: 16px;
        right: 16px;
    }
}

/* ==========================================================================
   FOOTER (по Figma: 1440x324px, node 1:488)
   ========================================================================== */
.site-footer {
    position: relative;
    width: 100%;
    background-color: #002248;
    display: flex;
    justify-content: center;
}

.footer-inner {
    position: relative;
    width: 100%;
    max-width: 1440px;
    height: 324px;
}

/* Brand block: logo + title (left=80, top=60) */
.footer-brand {
    position: absolute;
    left: 80px;
    top: 60px;
    display: flex;
    flex-direction: column;
    /* logo 85px high, then 24px gap to title at top=169 → 169-(60+85)=24 */
    gap: 24px;
    width: 215px;
}

.footer-logo {
    display: block;
    width: 92px;
    height: 85px;
}

.footer-logo img {
    display: block;
    width: 92px;
    height: 85px;
}

/* Title: Lora Regular 20px, uppercase, #828C99 (приглушённый, как логотип), line-height 1.1, w=215 */
.footer-brand-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.1;
    color: #828C99;
    text-transform: uppercase;
    width: 215px;
}

/* Nav: 3 columns (left=728, top=60, gap=112) */
.footer-nav {
    position: absolute;
    left: 728px;
    top: 60px;
    display: flex;
    gap: 112px;
    align-items: flex-start;
}

/* Nav column */
.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-nav-col:first-child {
    width: 83px;
}

.footer-nav-col--contacts {
    width: 200px;
}

/* Nav toggle button — invisible on desktop */
.footer-nav-toggle {
    all: unset;
    display: contents;
    cursor: default;
}

/* Nav chevron — hidden on desktop */
.footer-nav-chevron {
    display: none;
}

/* Nav label: Vela Sans SemiBold 12px, #73787e */
.footer-nav-label {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
    color: #73787e;
    line-height: normal;
}

/* Nav links container: gap=8 */
.footer-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Nav link: Vela Sans Regular 14px, #f5f3f1 */
.footer-nav-link {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #f5f3f1;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.2s;
}

.footer-nav-link:hover {
    opacity: 0.7;
}

/* Nav text (non-link items in contacts column) */
.footer-nav-text {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #f5f3f1;
    line-height: 1;
}

.footer-nav-address {
    width: 215px;
    line-height: 1.4;
}

/* Copyright: left=80, top=245, Vela Sans Regular 14px, #73787e */
.footer-copyright {
    position: absolute;
    left: 80px;
    top: 245px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #73787e;
    line-height: normal;
}

/* Socials: left=1161, top=246, gap=14 */
.footer-socials {
    position: absolute;
    left: 1161px;
    top: 246px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.footer-social-link {
    display: block;
    width: 28px;
    height: 28px;
    transition: opacity 0.2s;
}

.footer-social-link:hover {
    opacity: 0.7;
}

.footer-social-link img {
    display: block;
    width: 28px;
    height: 28px;
}

/* ==========================================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {

    /* Header */
    .header-nav {
        display: none;
    }

    .header-menu-btn {
        display: flex;
        position: absolute;
        right: 80px;
        top: 50%;
        transform: translateY(-50%);
    }

    .header-btn,
    .header-contacts {
        display: none;
    }

    /* Hero */
    .hero-title {
        width: 90%;
        max-width: 600px;
        font-size: 36px;
    }

    .hero-features {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Services */
    .services-container {
        padding: 48px 40px 60px;
    }

    .services-row {
        flex-wrap: wrap;
    }

    .service-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 280px;
    }

    .service-card--long {
        flex: 1 1 100%;
    }

    /* About */
    .about-title,
    .about-stats {
        left: 0;
    }

    .about-content {
        left: 40px;
    }

    /* Quote */
    .quote-photo {
        left: 40px;
    }

    .quote-author,
    .quote-content {
        left: 280px;
    }

    /* Team */
    .team-container {
        padding: 48px 40px 60px;
    }

    .team-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Steps */
    .steps-section {
        height: auto;
        min-height: 406px;
    }

    .steps-container {
        padding: 0;
    }

    .steps-image {
        width: 280px;
        height: 150px;
    }

    .steps-arrow--curve {
        display: none;
    }

    /* Reviews */
    .reviews-section {
        height: auto;
        min-height: 483px;
    }

    .reviews-container {
        padding: 60px 40px;
    }

    .reviews-title {
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: 27px;
    }

    .reviews-cards {
        position: relative;
        left: auto;
        top: auto;
        flex-wrap: wrap;
    }

    .review-card {
        width: calc(50% - 8px);
        min-width: 300px;
        height: auto;
    }

    /* CTA */
    .cta-section {
        height: auto;
        min-height: 339px;
    }

    .cta-vector {
        left: 40px;
    }

    .cta-photo {
        left: 40px;
        width: 400px;
    }

    .cta-name-block {
        left: 40px;
    }

    .cta-label {
        left: auto;
        right: 40px;
        left: 480px;
    }

    .cta-title {
        left: 480px;
        width: auto;
        right: 40px;
        font-size: 36px;
    }

    .cta-buttons {
        left: 480px;
    }

    /* News */
    .news-container {
        padding: 80px 40px 80px;
    }

    .news-section .news-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Map */
    .map-card {
        left: 40px;
        width: 420px;
    }

    .map-card-title {
        font-size: 28px;
    }

    .map-address-text {
        width: auto;
    }

    /* Footer */
    .footer-inner {
        height: auto;
        padding: 60px 40px 50px;
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
    }

    .footer-brand {
        position: relative;
        left: auto;
        top: auto;
    }

    .footer-nav {
        position: relative;
        left: auto;
        top: auto;
        gap: 60px;
    }

    .footer-copyright {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
    }

    .footer-socials {
        position: relative;
        left: auto;
        top: auto;
    }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (max-width: 900px)
   Breakpoint увеличен до 900px для корректного responsive на планшетах
   ========================================================================== */
@media (max-width: 900px) {

    /* Header — по Figma mobile (node 1-1613): логотип, «КОЛЛЕГИЯ АДВОКАТОВ», бургер, бежевый фон */
    .site-header {
        height: 80px;
        background-color: #f5f3f1;
    }

    /* Тонкая тёмно-серая полоса сверху (как в макете) */
    .site-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background-color: #2d2d2d;
        z-index: 1;
    }

    .header-logo {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 54px;
        height: 50px;
        z-index: 2;
    }

    .header-title {
        display: none;
    }

    .header-title-mobile {
        display: block;
        position: absolute;
        left: 84px;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-serif);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.15;
        color: #002248;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin: 0;
        white-space: normal;
        z-index: 2;
        max-width: calc(100vw - 84px - 56px);
    }

    .header-menu-btn {
        right: 20px;
        color: #002248;
        z-index: 2;
    }

    .header-menu-btn svg {
        width: 24px;
        height: 24px;
    }

    /* Hero — по Figma mobile: сверху слайдер (только фото + точки), ниже лейбл, заголовок, буллеты, кнопка */
    .hero-section {
        height: auto;
        min-height: 0;
        padding-bottom: 0;
    }

    .hero-container {
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 0 var(--m-side) var(--m-gap-xxl);
        background-color: var(--color-bg-main);
    }

    .hero-slider {
        position: relative;
        order: 1;
        width: 100%;
        height: 280px;
        min-height: 280px;
        flex-shrink: 0;
        border-radius: 5px;
        overflow: hidden;
    }

    .hero-slide {
        position: absolute;
        inset: 0;
    }

    .hero-card {
        left: 0;
        right: 0;
        top: 0;
        height: 100%;
        min-height: 0;
        border-radius: 5px;
    }

    .hero-bg-img {
        object-position: right center;
    }

    /* На мобильном заголовок не поверх слайда — только под слайдером */
    .hero-slide .hero-title {
        display: none;
    }

    /* Figma mobile/h1: Lora 26px Medium, line-height 1.1 */
    .hero-title-mobile {
        display: block;
        order: 4;
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 0 0 var(--m-gap-l);
        padding: 0;
        font-family: var(--font-serif);
        font-size: var(--m-h1-size);
        font-weight: var(--m-h1-weight);
        line-height: var(--m-h1-lh);
        color: var(--color-text-primary);
    }

    .hero-dots {
        order: 2;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: var(--m-gap-s) 0 var(--m-gap-xl);
        justify-content: center;
    }

    .hero-dots .hero-dot {
        background-color: rgba(0, 34, 72, 0.25);
    }

    .hero-dots .hero-dot.active {
        background-color: var(--color-text-primary);
    }

    /* Прогресс-бар — на мобильном под слайдером */
    .hero-progress {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        order: 1;
        margin-top: -3px;
        border-radius: 0 0 5px 5px;
        background-color: rgba(0, 34, 72, 0.1);
    }

    /* Лейбл: Figma mobile/h4 — Lora 15px Regular; разделитель сверху */
    .hero-label {
        order: 3;
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: var(--m-gap-m);
        padding-top: var(--m-gap-l);
        border-top: 1px solid var(--color-border);
    }

    .hero-label-text {
        font-family: var(--font-serif);
        font-size: var(--m-h4-size);
        font-weight: var(--m-h4-weight);
        line-height: var(--m-h4-lh);
        color: var(--color-text-secondary);
    }

    .hero-label-line {
        width: 28px;
    }

    /* Буллеты: Figma mobile — gold circular icons, Vela Sans 16px */
    .hero-features {
        order: 5;
        position: relative;
        left: auto;
        top: auto;
        flex-direction: column;
        gap: var(--m-gap-m);
        margin-bottom: var(--m-gap-xl);
    }

    .hero-feature img {
        /* Figma: маленькие золотые круглые иконки */
        filter: invert(0.65) sepia(0.35) saturate(1.8) hue-rotate(5deg) brightness(0.95);
    }

    .hero-feature span {
        font-family: var(--font-primary);
        font-size: var(--m-body-l);
        font-weight: 400;
        color: var(--color-text-primary);
    }

    /* Кнопка: Figma — золотой фон (#b89c6f), белый текст и иконка */
    .hero-cta {
        order: 6;
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
    }

    .hero-cta-content {
        padding: var(--m-gap-m) var(--m-gap-xxl);
        background-color: #b89c6f;
        border-color: #b89c6f;
        color: #fff;
    }

    .hero-cta:hover .hero-cta-content {
        background-color: #a58e6e;
        border-color: #a58e6e;
    }

    .hero-cta-text {
        font-family: var(--font-primary);
        font-size: var(--m-body-m);
        font-weight: var(--m-body-m-weight);
        color: #fff;
    }

    .hero-cta-icon {
        filter: brightness(0) invert(1);
    }

    /* Services — Figma: заголовок h2 24px, отступы по --m-side */
    .services-section {
        min-height: auto;
    }

    .services-container {
        padding: var(--m-gap-xxl) var(--m-side) var(--m-gap-xxl);
    }

    .services-title {
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
        margin-bottom: var(--m-gap-xl);
    }

    /* Табы услуг — крупные, понятные, с подчёркиванием активного */
    .services-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        margin-bottom: var(--m-gap-xl);
        border-bottom: 1px solid #d9d5d0;
    }

    .services-tab {
        flex: 0 0 auto;
        width: 50%;
        padding: 12px 0;
        background: none;
        border: none;
        border-radius: 0;
        font-family: var(--font-primary);
        font-size: 16px;
        font-weight: 600;
        color: #828c99;
        border-bottom: 3px solid transparent;
        min-width: auto;
        text-align: center;
        transition: color 0.2s, border-color 0.2s;
        margin-bottom: -1px;
    }

    .services-tab.active {
        color: #002248;
        background: none;
        border-bottom-color: #002248;
        font-weight: 700;
    }

    .services-tab:hover:not(.active) {
        color: #002248;
    }

    /* Контент вкладки — 8px gap между рядами, как внутри рядов */
    .services-tab-content.active {
        gap: 8px;
    }

    /* Row-5 — на мобильном как обычные 2 колонки */
    .services-row--5 .service-card {
        flex: none;
        min-width: 0;
    }

    /* КАС подзаголовок — стилизация для мобильного */
    .services-kas-title {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
        margin: var(--m-gap-m) 0 0;
    }

    /* =================================================================
       Услуги — точно по Figma mobile (node 1:1168)
       Карточка 150×150, фон #efece9, radius 3px
       Заголовок: Lora 15px Regular, left:12 top:12
       Стрелка: 20×20, left:12 bottom:12
       Картинка: right-bottom, overflow hidden, серо-синий тон
       Длинная: 308×150, grid-column span 2
       ================================================================= */
    .services-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .service-card {
        position: relative;
        flex: none;
        min-width: 0;
        height: 150px;
        background-color: #efece9;
        border-radius: 3px;
        overflow: hidden;
        box-shadow: none;
        display: block;
    }

    .service-card:hover {
        box-shadow: none;
        transform: none;
    }

    /* Убираем десктопный градиент-оверлей */
    .service-card::before {
        display: none;
    }

    /* Заголовок: Lora 15px Regular, left:12 top:12 */
    .service-card-text {
        position: absolute;
        left: 12px;
        top: 12px;
        right: auto;
        bottom: auto;
        flex: none;
        padding: 0;
        max-width: calc(100% - 24px);
        gap: 0;
        z-index: 5;
        min-height: 0;
        text-align: left;
        display: block;
    }

    .service-card-title {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
    }

    /* Описание скрыто на мобильном */
    .service-card-desc {
        display: none;
    }

    /* Стрелка: 20×20, left:12 bottom:12, контур с диагональной стрелкой */
    .service-card-arrow {
        display: block;
        position: absolute;
        left: 12px;
        bottom: 12px;
        width: 20px;
        height: 20px;
        border: 1px solid #002248;
        border-radius: 50%;
        background-color: transparent;
        z-index: 5;
        box-shadow: none;
    }

    .service-card-arrow::before {
        width: 10px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002248' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
    }

    /* Сброс hover-эффектов стрелки на мобильном */
    .service-card:hover .service-card-arrow {
        background-color: transparent;
        border-color: #002248;
    }

    .service-card:hover .service-card-arrow::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002248' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E");
    }

    /* Картинка: увеличена, смещена в нижний правый угол карточки */
    .service-card-img-wrap {
        position: absolute;
        right: -38px;
        bottom: -45px;
        left: auto;
        top: auto;
        width: 95%;
        height: 100%;
        z-index: 1;
        border-radius: 0;
        border: none;
        background: transparent;
        overflow: visible;
    }

    .service-card:hover .service-card-img-wrap {
        transform: none;
    }

    .service-card-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right bottom;
        filter: grayscale(25%) brightness(0.90) sepia(15%) hue-rotate(195deg) saturate(55%);
    }

    .service-card:hover .service-card-img {
        filter: grayscale(20%) brightness(0.92) sepia(10%) hue-rotate(195deg) saturate(60%);
    }

    /* Длинная карточка: на всю ширину (308px), та же высота 150px */
    .service-card--long {
        grid-column: span 2;
        height: 150px;
    }

    .service-card--long .service-card-text {
        max-width: 55%;
    }

    .service-card--long .service-card-desc {
        display: none;
    }

    .service-card--long .service-card-img-wrap {
        right: -20px;
        bottom: -20px;
        left: auto;
        top: auto;
        width: 70%;
        height: 115%;
    }

    .service-card--long .service-card-title {
        font-size: 15px;
    }

    .service-card--long .service-card-arrow {
        left: 12px;
        bottom: 12px;
    }

    /* На мобильном в «Бизнесу» 5-я карточка (Таможенное право) на всю ширину — убирает дырку */
    #biznes .service-card--full-mobile,
    #biznesu .service-card--full-mobile {
        grid-column: span 2;
    }

    #biznes .service-card--full-mobile .service-card-text,
    #biznesu .service-card--full-mobile .service-card-text {
        max-width: 55%;
    }

    #biznes .service-card--full-mobile .service-card-img-wrap,
    #biznesu .service-card--full-mobile .service-card-img-wrap {
        right: -76px;
        bottom: -68px;
        left: auto;
        top: auto;
        width: 79%;
        height: 131%;
    }

    /* Вкладка «Бизнесу» — те же плитки, картинка увеличена, в нижнем правом углу */
    #biznes .service-card-img-wrap,
    #biznesu .service-card-img-wrap {
        position: absolute;
        right: -38px;
        bottom: -45px;
        left: auto;
        top: auto;
        width: 95%;
        height: 100%;
        border-radius: 0;
        border: none;
    }

    #biznes .service-card--long .service-card-img-wrap,
    #biznesu .service-card--long .service-card-img-wrap {
        right: -20px;
        bottom: -20px;
        left: auto;
        top: auto;
        width: 70%;
        height: 115%;
    }

    /* ==========================================================================
       ABOUT SECTION (по Figma мобильный: node 1:1260, 360x560px)
       Структура: 
       - Фото с градиентом (250px высота) + статистика 25+ внутри
       - Заголовок «О коллегии» под фото (вне карточки)
       - Теги в 2 ряда
       - Описание
       ========================================================================== */
    .about-section {
        height: 560px;
        /* Figma: точная высота 560px */
        min-height: 560px;
        padding: 0;
        /* Убираем padding, позиционирование абсолютное */
        overflow: hidden;
    }

    .about-container {
        position: relative;
        display: block;
        /* Не flex, абсолютное позиционирование элементов */
        width: 100%;
        height: 100%;
        background-color: var(--color-bg-main);
    }

    .about-container::after {
        display: none;
    }

    /* Карточка с фото: под заголовком (отступ сверху = заголовок + gap) */
    .about-card {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 58px;
        /* 26px (отступ) + ~27px (высота заголовка) + 8px (gap) */
        width: auto;
        height: 250px;
        min-height: 250px;
        border-radius: 5px;
        z-index: 1;
    }

    .about-card .about-title {
        display: none;
    }

    /* Градиент из Figma: linear-gradient(210.86deg...) */
    .about-section .about-gradient {
        background:
            linear-gradient(210.86deg, rgba(29, 42, 58, 0) 0.68%, rgba(0, 34, 72, 0.6) 87.34%),
            linear-gradient(90deg, rgba(29, 42, 58, 0.2) 0%, rgba(29, 42, 58, 0.2) 100%);
    }

    /* Статистика «25+»: Figma left=26px, top=158px (относительно секции) */
    .about-stats {
        left: 16px;
        /* 26 - 10 = 16px относительно карточки */
        top: 148px;
        /* 158 - 10 = 148px относительно карточки */
        bottom: auto;
        width: 209px;
        max-width: 209px;
        gap: 8px;
    }

    .about-stats-number {
        font-family: var(--font-serif);
        font-size: 24px;
        /* Figma: Lora 24px */
        font-weight: 400;
        color: #a58e6e;
        /* Figma: золотой цвет */
        line-height: 1.1;
    }

    .about-stats-text {
        font-family: var(--font-sans);
        font-size: 16px;
        /* Figma: Vela Sans 16px */
        font-weight: 400;
        color: #f5f3f1;
        /* Figma: светлый текст */
        line-height: 1;
        /* Figma: line-height normal */
    }

    /* Заголовок «О коллегии»: над карточкой, вверху раздела */
    .about-title-below {
        display: block;
        position: absolute;
        left: 26px;
        top: 26px;
        margin: 0;
        font-family: var(--font-serif);
        font-size: 24px;
        /* Lora 24px */
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
    }

    /* Контент (теги + описание): под карточкой */
    .about-content {
        position: absolute;
        left: 26px;
        right: auto;
        top: 324px;
        /* 58 + 250 (карточка) + 16 (gap) */
        bottom: auto;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        /* Figma: gap=12px между тегами и текстом */
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    /* Теги: 2 ряда, gap=8px */
    .about-tags {
        display: flex;
        flex-direction: column;
        /* Figma: 2 ряда тегов */
        gap: 8px;
    }

    /* Ряд тегов */
    .about-tags-row {
        display: flex;
        gap: 8px;
    }

    /* Теги: Figma border #a58e6e, px=12, pt=4, pb=6, rounded 50px, text 10px */
    .about-tag {
        padding: 4px 12px 6px;
        font-family: var(--font-sans);
        font-size: 10px;
        /* Figma: 10px */
        font-weight: 400;
        color: #a58e6e;
        background-color: transparent;
        border: 1px solid #a58e6e;
        border-radius: 50px;
    }

    /* Описание: Figma Vela Sans 16px, #002248 */
    .about-desc {
        display: block;
        font-family: var(--font-primary);
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        color: #002248;
        margin: 0;
        max-width: calc(100% - 52px);
        width: auto;
    }

    /* ==========================================================================
       QUOTE SECTION (по Figma мобильный: node 1:1279, 360x448px)
       Структура:
       - Фоновая карточка #eee9e5 (402px высота)
       - Цитата с кавычкой слева вверху
       - Подпись под цитатой
       - Имя автора слева внизу
       - Фото председателя справа с поворотом
       - Декоративная большая кавычка в правом верхнем углу
       ========================================================================== */
    .quote-section {
        height: 448px;
        /* Figma: точная высота 448px */
        min-height: 448px;
        padding: 0;
        overflow: hidden;
    }

    .quote-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* Фоновая карточка: Figma left=10px, top=10px, 340x402px */
    .quote-card {
        left: 10px;
        right: 10px;
        top: 10px;
        width: auto;
        height: 402px;
        min-height: 402px;
        background: #eee9e5;
        /* Перезаписываем градиент с десктопа */
        border-radius: 5px;
    }

    /* Фото председателя: нижняя граница выровнена с нижней границей карточки, без поворота */
    .quote-photo {
        position: absolute;
        left: auto;
        right: -60px;
        top: auto;
        bottom: 36px;
        width: 320px;
        height: 357px;
        z-index: 2;
    }

    .quote-photo img {
        position: absolute;
        width: 119.51%;
        height: 158.56%;
        left: 1%;
        top: -28.96%;
        max-width: none;
        object-fit: cover;
        transform: none;
    }

    /* Имя автора */
    .quote-author {
        left: 52px;
        top: 300px;
        width: 107px;
        flex-direction: column;
        gap: 8px;
    }

    .quote-author-name {
        font-family: var(--font-sans);
        font-size: 12px;
        /* Figma: 12px */
        font-weight: 600;
        line-height: normal;
        color: #002248;
        width: 100%;
    }

    .quote-author-line {
        width: 38px;
        height: 1px;
        background-color: #a58e6e;
    }

    .quote-author-title {
        font-family: var(--font-sans);
        font-size: 10px;
        /* Figma: 10px */
        font-weight: 400;
        line-height: normal;
        color: #002248;
        width: 98px;
    }

    /* Блок цитаты: Figma left=26px, top=34px */
    .quote-content {
        position: absolute;
        left: 26px;
        right: auto;
        top: 44px;
        /* 34px + 10px padding */
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: flex-start;
        z-index: 3;
    }

    /* Открывающая кавычка: Figma Lora 24px, #a58e6e */
    .quote-mark {
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 1.1;
        color: #a58e6e;
        flex-shrink: 0;
    }

    /* Текстовый блок: gap=14px между текстом и подписью */
    .quote-text-wrap {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 200px;
    }

    /* Текст цитаты: Figma Lora 18px, #002248, line-height 1.1 */
    .quote-text {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
        margin: 0;
    }

    /* Подпись: крупнее для лучшей читаемости */
    .quote-signature {
        width: 180px;
        height: auto;
        max-height: 80px;
        object-fit: contain;
    }

    /* Большая декоративная кавычка: Figma left=215px, top=-20px внутри карточки */
    .quote-mark-big {
        display: block;
        position: absolute;
        left: auto;
        right: 24px;
        /* 340 - 215 - 111 = 14px, но подкорректируем визуально */
        top: -10px;
        /* 10 + (-20) = -10px */
        width: 111px;
        height: 100px;
        z-index: 1;
        opacity: 1;
    }

    /* Team — по Figma mobile (node 1:1292): высота секции 369px, слайдер в одну строку */
    .team-section {
        min-height: auto;
    }

    .team-container {
        padding: 36px 26px 36px 26px;
        /* Figma: отступы как в макете */
    }

    .team-title {
        font-family: var(--font-serif);
        font-size: 24px;
        /* Figma: Lora 24px */
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
        margin: 0 0 26px 0;
        /* до слайдера 88-36-26 = 26px */
    }

    /* Слайдер: одна строка, свайп — только для главной страницы */
    .team-cards,
    .team-section:not(.team-archive) .team-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        padding: 0 26px 0 0;
        margin: 0 -26px 0 0;
        grid-template-columns: unset;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x pan-y;
    }

    .team-cards::-webkit-scrollbar,
    .team-section:not(.team-archive) .team-grid::-webkit-scrollbar {
        display: none;
    }

    /* Страница «Команда» (архив) — нормальный тач-скролл */
    .team-archive .team-grid {
        touch-action: auto;
        overflow-x: visible;
        overflow-y: visible;
    }

    .team-card {
        flex: 0 0 150px;
        min-width: 150px;
        width: 150px;
        height: 200px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 3px;
        /* Figma */
    }

    /* Страница «Команда» — плитка 2 колонки на мобильном */
    .team-archive .team-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .team-archive .team-card {
        flex: none;
        min-width: 0;
        width: 100%;
        height: 220px;
        border-radius: 5px;
    }

    .team-archive .team-card-info {
        padding: 12px;
        gap: 4px;
    }

    .team-archive .team-card-position {
        font-family: var(--font-sans);
        font-size: 10px;
        /* Figma: Vela Sans 10px */
        font-weight: 400;
        line-height: 1;
        color: #f5f3f1;
    }

    .team-card-name {
        font-family: var(--font-serif);
        font-size: 15px;
        /* Figma: Lora 15px */
        font-weight: 400;
        line-height: 1.1;
        color: #f5f3f1;
    }

    .team-archive .team-card-name {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.1;
        color: #f5f3f1;
    }

    /* Кнопка «Вся команда»: Figma top 314px, arrow 12px + Vela Sans SemiBold 14px */
    .team-btn {
        margin-top: 26px;
        margin-left: 0;
        font-size: 14px;
        font-weight: 600;
        color: #002248;
    }

    .team-btn img {
        width: 12px;
        height: 12px;
    }

    /* ============================================================
       Steps — Figma mobile (node 1:1306): 360×833, vertical layout
       ============================================================ */
    .steps-section {
        height: auto;
        min-height: auto;
        margin-top: 32px;
    }

    .steps-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 36px 26px;
    }

    .steps-title {
        position: relative;
        left: auto;
        top: auto;
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
        margin: 0 0 16px;
        /* title at 36px, first step at 88px, gap ~16px after title */
    }

    .step {
        position: relative;
        left: auto !important;
        top: auto !important;
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    /* Vertical arrows between steps using pseudo-elements */
    .step:not(.step--5)::after {
        content: '';
        position: absolute;
        bottom: -56px;
        left: 8px;
        width: 10px;
        height: 40px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' fill='none'%3E%3Cpath d='M5 0v34' stroke='%23a58e6e' stroke-width='1.2'/%3E%3Cpath d='M1 30l4 6 4-6' stroke='%23a58e6e' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }

    .step {
        margin-bottom: 72px;
        /* Space between steps: 112px total - ~40px step height */
    }

    .step--5 {
        margin-bottom: 32px;
    }

    .step-heading {
        font-family: var(--font-serif);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.1;
        white-space: normal;
        color: #002248;
    }

    .step-desc {
        font-size: 16px;
        color: #828c99;
    }

    .step-num {
        font-size: 18px;
        /* Figma: 18px, not 24px */
        font-style: normal;
        font-weight: 400;
        color: #a58e6e;
        min-width: 24px;
        flex-shrink: 0;
    }

    .step--1 .step-content,
    .step--2 .step-content,
    .step--3 .step-content,
    .step--4 .step-content,
    .step--5 .step-content {
        width: auto;
        flex: 1;
    }

    .step--2 .step-desc,
    .step--4 .step-desc {
        width: auto;
    }

    /* Контейнер этапов — relative для позиционирования подложки */
    .steps-container {
        position: relative;
    }

    .steps-image {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 308px;
        max-width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 0;
        margin-top: 0;
        z-index: 1;
        /* поверх подложки */
    }

    /* Hide desktop arrows on mobile */
    .steps-arrow {
        display: none;
    }

    /* Вектор-подложка под изображением с книгами (z-index ниже) */
    .steps-vector {
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        width: 213px;
        height: 193px;
        margin: 0;
        z-index: 0;
        opacity: 0.5;
        pointer-events: none;
    }

    /* ============================================================
       Reviews — Figma mobile (node 1:1334): horizontal swipe, dots
       ============================================================ */
    .reviews-section {
        height: auto;
        min-height: auto;
        margin-top: 32px;
    }

    .reviews-container {
        padding: 36px 26px;
    }

    .reviews-title {
        position: relative;
        left: auto;
        top: auto;
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
        margin-bottom: 24px;
    }

    .reviews-cards {
        position: relative;
        left: auto;
        top: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .reviews-cards::-webkit-scrollbar {
        display: none;
    }

    .review-card {
        flex: 0 0 100%;
        min-width: 100%;
        width: 100%;
        height: auto;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 5px;
        padding: 16px;
    }

    .review-card:hover {
        transform: none;
        box-shadow: none;
    }

    .review-card-content {
        min-height: 230px;
    }

    .review-tag {
        font-size: 10px;
        padding: 4px 12px 6px;
    }

    .review-text {
        font-size: 16px;
        color: #002248;
    }

    .review-avatar {
        width: 36px;
        height: 36px;
    }

    .review-author-name {
        font-size: 10px;
    }

    .review-author-date {
        font-size: 10px;
    }

    /* Reviews dots navigation */
    .reviews-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 20px;
    }

    .reviews-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #c4c4c4;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .reviews-dot.active {
        background-color: #002248;
        transform: scale(1.2);
    }

    /* ============================================================
       CTA — Figma mobile (node 4:1249): 360×416, left-aligned
       ============================================================ */
    .cta-section {
        height: auto;
        min-height: 416px;
        margin-top: 32px;
        overflow: hidden;
    }

    .cta-container {
        position: relative;
        padding: 36px 26px 36px 28px;
        /* левый 28px — заголовок не прилипает к краю */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        min-height: 416px;
        overflow: visible;
        /* не обрезать заголовок */
    }

    /* Show vector decoration at right */
    .cta-vector {
        display: block;
        position: absolute;
        left: auto;
        right: -90px;
        top: auto;
        bottom: -82px;
        width: 406px;
        height: 364px;
        opacity: 0.15;
        z-index: 0;
        pointer-events: none;
    }

    /* Photo: absolute, bottom right, overlapping — Figma: left calc(8.33%+25.41px), w=443, h=326 */
    .cta-photo {
        position: absolute;
        left: calc(8.33% + 25px);
        right: auto;
        top: auto;
        bottom: -10px;
        width: 443px;
        height: 326px;
        transform: rotate(1.72deg);
        z-index: 1;
    }

    .cta-photo-img {
        position: absolute;
        width: 101.72%;
        height: 211.95%;
        left: -2.38%;
        top: -34.39%;
        bottom: auto;
        right: auto;
        object-fit: cover;
        object-position: center center;
        max-width: none;
    }

    .cta-photo-gradient {
        background: linear-gradient(to bottom, rgba(245, 243, 241, 0) 44.838%, #f5f3f1 100%);
    }

    /* Name block: bottom left */
    .cta-name-block {
        position: relative;
        left: auto;
        top: auto;
        width: 107px;
        align-items: flex-start;
        margin-top: auto;
        margin-bottom: 0;
        z-index: 2;
        order: 5;
    }

    .cta-person-name {
        font-size: 12px;
        font-weight: 600;
        width: auto;
        text-align: left;
        color: #002248;
    }

    .cta-name-line {
        width: 38px;
    }

    .cta-person-title {
        font-size: 10px;
        font-weight: 400;
        color: #002248;
    }

    /* Label: "Есть вопросы?" */
    .cta-label {
        position: relative;
        left: auto;
        top: auto;
        margin-bottom: 12px;
        order: 1;
        z-index: 2;
    }

    .cta-label-text {
        font-family: var(--font-primary);
        font-size: 12px;
        font-weight: 600;
        color: #a58e6e;
    }

    .cta-label-line {
        width: 24px;
    }

    /* Title */
    .cta-title {
        position: relative;
        left: auto;
        top: auto;
        width: 308px;
        max-width: 100%;
        font-family: var(--font-serif);
        font-size: 26px;
        font-weight: 500;
        line-height: 1.1;
        text-align: left;
        color: #002248;
        margin-left: 30px;
        /* отступ от края — заголовок не прилипает */
        margin-bottom: 26px;
        order: 2;
        z-index: 2;
    }

    /* Buttons: stacked vertically */
    .cta-buttons {
        position: relative;
        left: auto;
        top: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: flex-start;
        align-items: flex-start;
        order: 3;
        z-index: 2;
        margin-bottom: 18px;
        /* Figma: name at 334px */
    }

    .cta-btn {
        padding: 12px 24px;
        border-radius: 20px;
        gap: 6px;
    }

    .cta-btn span {
        font-size: 12px;
    }

    /* ============================================================
       News — Figma mobile (node 1:1387): horizontal scroll cards
       ============================================================ */
    .news-section {
        min-height: auto;
        margin-top: 32px;
    }

    .news-container {
        padding: 36px 26px;
    }

    .news-header {
        margin-bottom: 24px;
    }

    /* Hide desktop "Все новости" link in header on mobile */
    .news-all-link {
        display: none;
    }

    .news-title {
        font-family: var(--font-serif);
        font-size: 24px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
    }

    /* Cards: horizontal scroll */
    .news-section .news-cards-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-right: 26px;
        margin-right: -26px;
    }

    .news-section .news-cards-grid::-webkit-scrollbar {
        display: none;
    }

    .news-section .news-card {
        flex: 0 0 229px;
        min-width: 229px;
        width: 229px;
        height: 240px;
        padding: 12px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 5px;
    }

    .news-section .news-card:hover {
        transform: none;
    }

    .news-section .news-card-photo {
        height: 100px;
    }

    .news-section .news-card-heading {
        font-family: var(--font-serif);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.1;
        color: #002248;
    }

    .news-section .news-card-excerpt {
        font-size: 10px;
        color: #828c99;
    }

    .news-section .news-card-text {
        gap: 8px;
    }

    .news-section .news-card-top {
        gap: 12px;
    }

    .news-section .news-card-read span {
        font-size: 12px;
    }

    .news-section .news-card-read svg {
        width: 14px;
        height: 14px;
    }

    /* Mobile "Все новости" link below cards */
    .news-all-link-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        text-decoration: none;
        color: #002248;
    }

    .news-all-link-mobile img {
        width: 12px;
        height: 12px;
    }

    .news-all-link-mobile span {
        font-family: var(--font-primary);
        font-size: 14px;
        font-weight: 600;
        color: #002248;
    }

    /* Map — Figma h2, body L */
    .map-section {
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .map-container {
        position: relative;
        height: auto;
        order: 1;
        z-index: auto;
    }

    .map-bg {
        position: relative;
        height: 250px;
        order: 2;
    }

    .map-card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        border-radius: 0;
        gap: var(--m-gap-xxl);
        padding: var(--m-gap-xxl) var(--m-side);
    }

    .map-card-title {
        font-family: var(--font-serif);
        font-size: var(--m-h2-size);
        font-weight: var(--m-h2-weight);
        line-height: var(--m-h2-lh);
    }

    .map-address-text {
        width: auto;
    }

    .map-card-address,
    .map-card-contacts,
    .map-phone,
    .map-email {
        font-size: var(--m-body-l);
    }

    /* Footer — mobile (по Figma: 360x459, node 1:1453) */
    .footer-inner {
        height: auto;
        padding: 36px 26px;
        display: flex;
        flex-direction: column;
    }

    /* Top row: logo + socials */
    .footer-brand {
        position: relative;
        left: auto;
        top: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    .footer-logo {
        width: 60px;
        height: 54px;
    }

    .footer-logo img {
        width: 60px;
        height: 54px;
    }

    /* Brand title: full width below logo, Lora 15px, white */
    .footer-brand-title {
        font-size: 15px;
        width: 210px;
        line-height: 1.1;
        color: #f5f3f1;
        order: 3;
        flex-basis: 100%;
        margin-top: 15px;
    }

    /* Socials: absolute top-right inside footer-inner */
    .footer-socials {
        position: absolute;
        left: auto;
        right: 26px;
        top: 36px;
    }

    /* Nav: full width, stacked accordion */
    .footer-nav {
        position: relative;
        left: auto;
        top: auto;
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-top: 26px;
    }

    /* Accordion column */
    .footer-nav-col {
        width: 100% !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0;
        gap: 0;
    }

    .footer-nav-col:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Toggle button — full width, clickable */
    .footer-nav-toggle {
        all: unset;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 0;
        cursor: pointer;
        box-sizing: border-box;
    }

    .footer-nav-label {
        font-size: 14px;
        font-weight: 400;
        color: #f5f3f1;
        transition: font-weight 0.2s ease;
    }

    /* Open section label is SemiBold */
    .footer-nav-col.is-open .footer-nav-label {
        font-weight: 600;
    }

    /* Chevron icon — visible on mobile */
    .footer-nav-chevron {
        display: block;
        width: 10px;
        height: 5px;
        color: #f5f3f1;
        transition: transform 0.3s ease;
        transform: rotate(-90deg);
        flex-shrink: 0;
    }

    /* Chevron rotates down when section is open */
    .footer-nav-col.is-open .footer-nav-chevron {
        transform: rotate(0deg);
    }

    /* Links hidden by default on mobile */
    .footer-nav-links {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
    }

    /* Links visible when section is open */
    .footer-nav-col.is-open .footer-nav-links {
        max-height: 300px;
        padding-bottom: 14px;
    }

    .footer-nav-link {
        color: #828c99;
        font-size: 14px;
    }

    .footer-nav-text {
        color: #828c99;
        font-size: 14px;
    }

    .footer-nav-address {
        width: auto;
        line-height: 1.4;
    }

    /* Copyright at bottom */
    .footer-copyright {
        position: relative;
        left: auto;
        top: auto;
        margin-top: 26px;
        font-size: 10px;
        color: #828c99;
    }
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-inner {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 90vw;
    background-color: var(--color-bg-white);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s;
}

.mobile-menu.is-open .mobile-menu-inner {
    transform: translateX(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.mobile-menu-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}

.mobile-nav-link {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-primary);
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu-contacts,
.mobile-contacts {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--color-bg-card);
}

.mobile-phone {
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.mobile-hours {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: #5a6473;
    line-height: 1.3;
}

.mobile-address {
    font-family: var(--font-primary);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #5a6473;
    line-height: 1.4;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   SINGLE ADVOKAT PAGE — по Figma: personalPage (node 1:949)
   ========================================================================== */

/* --- Секция профиля (1:951): bg #f5f3f1, 540px высота --- */
.advokat-section {
    background-color: var(--color-bg-main);
    padding: 0;
}

.advokat-container {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 540px;
    padding: 60px 80px;
    display: grid;
    grid-template-columns: 492px 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 56px;
}

/* Кнопка "Назад" (1:976): left=80, top=60, flex gap=6 */
.advokat-back {
    position: absolute;
    top: 60px;
    left: 80px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    z-index: 2;
}

.advokat-back-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.advokat-back span {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #828c99;
    transition: color 0.2s ease;
}

.advokat-back:hover span {
    color: var(--color-text-primary);
}

.advokat-back:hover .advokat-back-arrow path {
    stroke: var(--color-text-primary);
}

/* Фото (1:958): 492x420, rounded-5, left=calc(8.33%+68px), top=60 */
.advokat-photo {
    grid-row: 1 / -1;
    width: 492px;
    height: 420px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 30px;
    /* отступ от кнопки "Назад" */
}

.advokat-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

/* Правая колонка — информация */
.advokat-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 16px;
}

/* Должность с линией (1:953): flex gap=8 */
.advokat-position-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.advokat-position-line {
    display: block;
    width: 38px;
    height: 1px;
    background-color: var(--color-accent);
    flex-shrink: 0;
}

.advokat-position-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: var(--color-accent);
}

/* ФИО (1:956): Lora Medium 44px, #002248, line-height 1.1 */
.advokat-name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin: 0 0 24px 0;
    max-width: 524px;
}

/* Контакты (1:959): flex gap=16 */
.advokat-contacts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.advokat-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.advokat-contact-item:hover {
    opacity: 0.7;
}

.advokat-contact-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.advokat-contact-item span {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-primary);
}

/* Описание (1:957): Vela Sans Regular 18px, #828c99, w=522px */
.advokat-description {
    max-width: 522px;
}

.advokat-description p {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #828c99;
    margin: 0 0 16px 0;
}

.advokat-description p:last-child {
    margin-bottom: 0;
}

/* --- CTA секция (1:980): bg #f5f3f1, 339px --- */
.advokat-cta {
    background-color: var(--color-bg-main);
    padding: 60px 80px 40px;
}

.advokat-cta-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Заголовок "Нужна консультация?" (1:982) */
.advokat-cta-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.advokat-cta-line {
    display: block;
    width: 38px;
    height: 1px;
    background-color: var(--color-accent);
}

.advokat-cta-label-text {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: var(--color-accent);
}

/* Заголовок (1:981): Lora Medium 44px, #002248, text-center */
.advokat-cta-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin: 0 0 40px 0;
    text-align: center;
}

/* Кнопки (1:986): flex gap=8 */
.advokat-cta-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.advokat-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    background-color: var(--color-accent);
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.advokat-cta-btn:hover {
    background-color: #8a7659;
    transform: translateY(-1px);
}

.advokat-cta-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.advokat-cta-btn span {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: var(--color-text-white);
}

/* ==========================================================================
   SINGLE ADVOKAT — RESPONSIVE
   ========================================================================== */

/* Планшет */
@media (max-width: 1200px) {
    .advokat-container {
        grid-template-columns: 380px 1fr;
        gap: 0 40px;
        padding: 50px 40px;
    }

    .advokat-back {
        left: 40px;
        top: 50px;
    }

    .advokat-photo {
        width: 380px;
        height: 340px;
    }

    .advokat-name {
        font-size: 36px;
    }

    .advokat-cta {
        padding: 50px 40px 40px;
    }

    .advokat-cta-title {
        font-size: 36px;
    }
}

/* Мобильная версия */
@media (max-width: 900px) {
    .advokat-container {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        min-height: auto;
        gap: 24px 0;
    }

    .advokat-back {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 16px;
    }

    .advokat-photo {
        width: 100%;
        height: 0;
        padding-bottom: 85%;
        margin-top: 0;
        grid-row: auto;
    }

    .advokat-photo-img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .advokat-photo {
        position: relative;
    }

    .advokat-info {
        padding-top: 0;
    }

    .advokat-name {
        font-size: 28px;
        max-width: 100%;
    }

    .advokat-contacts {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .advokat-description {
        max-width: 100%;
    }

    .advokat-description p {
        font-size: 16px;
    }

    .advokat-cta {
        padding: 40px 20px;
    }

    .advokat-cta-title {
        font-size: 28px;
        margin-bottom: 32px;
    }

    .advokat-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .advokat-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   ARCHIVE ADVOKAT — Страница «Команда» (по Figma: node 1:583)
   Скоупим под .team-archive, чтобы не конфликтовать с главной
   ========================================================================== */

/* --- Секция с карточками (1:585) --- */
.team-archive {
    background-color: var(--color-bg-main);
    padding: 0;
}

.team-archive .team-container {
    display: flex;
    flex-direction: column;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 80px 40px;
}

/* Заголовок (1:586): Lora Medium 44px */
.team-archive .team-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin: 0 0 40px 0;
}

/* Сетка карточек (1:587): 4 колонки только на десктопе; на мобильной — слайдер в общем блоке 900px */
@media (min-width: 901px) {
    .team-archive .team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* --- Карточка адвоката (CardTeam) на странице «Команда»: 308x380, rounded-5 --- */
.team-archive .team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 380px;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-archive .team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 34, 72, 0.15);
}

/* Фото на фоне — object-cover */
.team-card-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 5px;
    transition: transform 0.4s ease;
}

.team-card:hover .team-card-photo {
    transform: scale(1.05);
}

/* Градиент поверх фото: тёмный снизу — усиленный для читаемости текста */
.team-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(to bottom,
            rgba(0, 34, 72, 0) 40%,
            rgba(0, 34, 72, 0.35) 65%,
            rgba(0, 34, 72, 0.75) 85%,
            rgba(0, 34, 72, 0.9) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Текст внизу карточки */
.team-archive .team-card-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 19px;
}

/* Должность: Vela Sans Regular 12px, #f5f3f1 */
.team-archive .team-card-position {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: var(--color-text-white);
}

/* ФИО: Lora Regular 20px, #f5f3f1, line-height 1.1 */
.team-archive .team-card-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: var(--color-text-white);
    max-width: 270px;
}

/* ==========================================================================
   ARCHIVE ADVOKAT — RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
    .team-archive .team-container {
        padding: 50px 40px 60px;
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-archive .team-card {
        height: 340px;
    }

    .team-archive .team-title {
        font-size: 36px;
    }
}

@media (max-width: 900px) {
    .team-archive .team-container {
        padding: 32px 20px 40px;
    }

    .team-archive .team-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    /* .team-grid — одна строка с горизонтальным скроллом задаётся выше в общем блоке 768px */

    .team-archive .team-card-name {
        font-size: 16px;
    }

    .team-archive .team-card-info {
        padding: 16px 14px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .team-archive .team-card {
        flex: none;
        min-width: 0;
        width: 100%;
        height: 200px;
    }
}

/* ==========================================================================
   SERVICES PAGE — Страница «Услуги адвокатов» (node 1:510)
   ========================================================================== */

.uslugi-page {
    background: #f5f3f1;
    padding: 60px 0 0;
}

.uslugi-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 80px;
}

.uslugi-title {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: #002248;
    margin: 0 0 40px;
}

.uslugi-block {
    margin-bottom: 42px;
}

.uslugi-block:last-child {
    margin-bottom: 0;
    padding-bottom: 60px;
}

.uslugi-subtitle {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    color: var(--color-accent);
    margin: 0 0 34px;
}

/* На странице услуг карточки — display + без ограничения ширины */
.uslugi-page .services-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ---- RESPONSIVE: Страница услуг ---- */

@media (max-width: 1200px) {
    .uslugi-container {
        padding: 0 40px;
    }

    .uslugi-title {
        font-size: 36px;
        margin-bottom: 32px;
    }

    .uslugi-subtitle {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .uslugi-block {
        margin-bottom: 36px;
    }
}

@media (max-width: 900px) {
    .uslugi-page {
        padding: 40px 0 0;
    }

    .uslugi-container {
        padding: 0 20px;
    }

    .uslugi-title {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .uslugi-subtitle {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .uslugi-block {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   SERVICE SINGLE PAGE — Страница отдельной услуги (node 1:1007)
   bg #f5f3f1, two-column: content + sidebar
   ========================================================================== */

.service-page {
    background: #f5f3f1;
    padding: 60px 0 80px;
}

.service-page-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ---- Back button (1:1038) ---- */

.service-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #828c99;
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.2s;
}

.service-page-back:hover {
    color: #002248;
}

.service-page-back:hover svg path {
    stroke: #002248;
    transition: stroke 0.2s;
}

/* ---- Content area (left column) ---- */

.service-page-content {
    flex: 1;
    min-width: 0;
    max-width: 740px;
}

/* Title (1:1011): Lora Medium 44px #002248 */
.service-page-title {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: #002248;
    margin: 0 0 32px;
}

/* Content text from WP editor */
.service-page-text {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #002248;
}

.service-page-text p {
    margin: 0 0 16px;
}

.service-page-text p:last-child {
    margin-bottom: 0;
}

/* Subheadings inside content (h2 = Lora Regular 28px) */
.service-page-text h2 {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    color: #002248;
    margin: 24px 0 16px;
}

.service-page-text h3 {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    color: #002248;
    margin: 24px 0 16px;
}

/* Lists with check-circle bullets */
.service-page-text ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-page-text ul li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-family: 'Vela Sans', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #002248;
}

.service-page-text ul li::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 24px;
    background: url('assets/images/icons/check-circle-new.svg') no-repeat center / contain;
    display: inline-block;
    margin-top: 1px;
}

/* Ordered lists */
.service-page-text ol {
    padding-left: 24px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-page-text ol li {
    font-family: 'Vela Sans', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #002248;
    padding-left: 8px;
}

/* ---- Sidebar (right column, 1:1042) ---- */

.service-page-sidebar {
    width: 346px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
}

.service-sidebar-inner {
    background: #efece9;
    border-radius: 5px;
    padding: 16px 10px;
    overflow: hidden;
}

/* Sidebar heading: "Услуги" — Lora Regular 28px */
.service-sidebar-heading {
    display: block;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    color: #002248;
    padding: 34px 30px 8px;
}

/* Category group */
.service-sidebar-group {
    border-bottom: none;
}

/* Toggle button (category header) */
.service-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    text-align: left;
}

.service-sidebar-dash {
    flex-shrink: 0;
}

.service-sidebar-category {
    flex: 1;
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: #002248;
}

.service-sidebar-arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Arrow rotated when open */
.service-sidebar-group.is-open .service-sidebar-arrow {
    transform: rotate(180deg);
}

/* Submenu list (collapsed by default) */
.service-sidebar-list {
    list-style: none;
    padding: 0 0 6px 60px;
    margin: 0;
    display: none;
    flex-direction: column;
    gap: 12px;
}

.service-sidebar-group.is-open .service-sidebar-list {
    display: flex;
}

/* Service links */
.service-sidebar-link {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.3;
    color: #73787e;
    text-decoration: none;
    transition: color 0.2s;
    display: block;
}

.service-sidebar-link:hover {
    color: #002248;
}

.service-sidebar-link.is-active {
    color: #002248;
    font-weight: 600;
}

/* ---- RESPONSIVE: Service single page ---- */

@media (max-width: 1200px) {
    .service-page-container {
        padding: 0 40px;
        gap: 30px;
    }

    .service-page-title {
        font-size: 36px;
    }

    .service-page-sidebar {
        width: 300px;
    }
}

@media (max-width: 992px) {
    .service-page-container {
        flex-direction: column;
    }

    .service-page-content {
        max-width: 100%;
    }

    .service-page-sidebar {
        width: 100%;
        position: static;
    }
}

@media (max-width: 900px) {
    .service-page {
        padding: 40px 0 60px;
    }

    .service-page-container {
        padding: 0 20px;
    }

    .service-page-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .service-page-text {
        font-size: 16px;
    }

    .service-page-text ul li {
        font-size: 16px;
    }

    .service-page-text h2 {
        font-size: 22px;
    }

    .service-sidebar-heading {
        font-size: 24px;
        padding: 20px 20px 8px;
    }
}


/* ==========================================================================
   NEWS ARCHIVE — Новости коллегии (node 1:631)
   ========================================================================== */

.news-archive {
    background: var(--color-bg);
    padding: 60px 0 80px;
}

.news-archive-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 80px;
}

/* Заголовок — Lora Medium 44px */
.news-archive-title {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: #002248;
    margin: 0 0 40px;
}

/* Сетка карточек — 3 колонки, gap 16px */
.news-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Карточка — bg #efece9, 283px, rounded 5, padding 24 */
.news-card {
    background: #efece9;
    border-radius: 5px;
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 283px;
    overflow: hidden;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    background: #e5e2de;
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 34, 72, 0.10);
}

.news-card-top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Фото 368×100 c синим оверлеем */
.news-card-photo {
    position: relative;
    width: 100%;
    height: 100px;
    border-radius: 3px;
    overflow: hidden;
    background: #d9d9d9;
}

.news-card-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* переопределяется инлайн-стилем из metabox */
    display: block;
}

.news-card-photo-overlay {
    position: absolute;
    inset: 0;
    background: #002248;
    mix-blend-mode: color;
}

.news-card-photo-placeholder {
    width: 100%;
    height: 100%;
    background: #002248 url('assets/images/news-hero-bg.jpg') center / cover no-repeat;
}

/* Текст карточки */
.news-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.news-card-heading {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: #002248;
    margin: 0;
}

.news-card-excerpt {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #73787e;
    margin: 0;
}

/* Кнопка "Читать" — items-end по Figma */
.news-card-read {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.news-card-read svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.news-card-read span {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #002248;
    line-height: 1;
}

/* Пагинация (1:645) — gap 16px между группами, 8px между номерами */
.news-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.news-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.news-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #73787e;
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.2s ease;
}

/* Номера страниц ближе друг к другу — 8px */
.news-pagination .page-numbers+.page-numbers:not(.prev):not(.next) {
    margin-left: -8px;
}

.news-pagination .page-numbers.current {
    color: #002248;
    border: 1px solid #002248;
    border-radius: 50%;
}

.news-pagination .page-numbers:hover:not(.current):not(.dots):not(.prev):not(.next) {
    color: #002248;
}

.news-pagination .page-numbers.dots {
    border: none;
    cursor: default;
}

/* Стрелки prev/next — SVG с кругом внутри, без дополнительного border */
.news-pagination .prev,
.news-pagination .next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    padding: 0;
}

.news-pagination .prev svg,
.news-pagination .next svg {
    width: 32px;
    height: 32px;
}


.news-empty {
    font-family: 'Vela Sans', sans-serif;
    font-size: 18px;
    color: #73787e;
    text-align: center;
    padding: 60px 0;
}

/* === NEWS ARCHIVE RESPONSIVE === */

@media (max-width: 992px) {
    .news-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-archive-container {
        padding: 0 40px;
    }

    .news-archive-title {
        font-size: 36px;
    }
}

@media (max-width: 576px) {
    .news-cards-grid {
        grid-template-columns: 1fr;
    }

    .news-archive-container {
        padding: 0 20px;
    }

    .news-archive {
        padding: 40px 0 60px;
    }

    .news-archive-title {
        font-size: 28px;
        margin-bottom: 24px;
    }
}


/* ==========================================================================
   SINGLE NEWS — Отдельная новость (node 1:1044)
   ========================================================================== */

.news-single {
    background: var(--color-bg);
}

/* Hero — статичная подложка, одна для всех новостей */
.news-hero {
    position: relative;
    max-width: 1408px;
    height: 420px;
    margin: 16px auto 0;
    border-radius: 5px;
    overflow: hidden;
    background: #002248 url('assets/images/news-hero-bg.jpg') center / cover no-repeat;
}

/* Градиент поверх фото — синий, усиленный снизу для читаемости заголовка */
.news-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 34, 72, 0.2) 0%, rgba(0, 34, 72, 0.4) 40%, rgba(0, 34, 72, 0.85) 75%, rgba(0, 34, 72, 0.95) 100%);
    border-radius: 5px;
}

/* Кнопка "Назад" — #828c99, top-left */
.news-hero-back {
    position: absolute;
    top: 44px;
    left: 64px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    z-index: 2;
    transition: opacity 0.2s ease;
}

.news-hero-back:hover {
    opacity: 0.7;
}

.news-hero-back svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.news-hero-back span {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #828c99;
}

/* Дата — bottom-left */
.news-hero-date {
    position: absolute;
    bottom: 60px;
    left: 64px;
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #828c99;
    z-index: 2;
}

/* Заголовок — Lora Medium 44px, white, выровнен с текстовой колонкой */
.news-hero-title {
    position: absolute;
    bottom: 51px;
    left: 500px;
    right: 64px;
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: #f5f3f1;
    z-index: 2;
    margin: 0;
}

/* Контент — центрированная колонка, комфортная для чтения */
.news-content-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 56px 80px 80px;
}

/* Без картинки — текст выровнен по линии заголовка hero.
   Hero max-width 1408px, content-wrap max-width 1440px — разница 32px (16px с каждой стороны).
   Заголовок hero left: 500px. Отступ контента: 80px padding + 436px margin = 516px от content-wrap,
   что равно 500px от hero (516 - 16 = 500). */
.news-content-wrap>.news-content {
    max-width: 720px;
    margin-left: 436px;
}

/* С картинкой — два столбца: изображение слева, текст справа
   Заголовок hero выравнивается по левому краю текстовой колонки */
.news-body--with-image {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    max-width: 1100px;
}

.news-body-image {
    flex-shrink: 0;
    width: 380px;
    height: 380px;
    border-radius: 5px;
    overflow: hidden;
    position: sticky;
    top: 32px;
}

.news-body-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.news-body--with-image .news-content {
    flex: 1;
    min-width: 0;
}

/* Текстовые стили контента */
.news-content p {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    color: #002248;
    margin: 0 0 24px;
}

.news-content p:last-child {
    margin-bottom: 0;
}

.news-content h2 {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
    color: #002248;
    margin: 40px 0 20px;
}

.news-content h2:first-child {
    margin-top: 0;
}

.news-content h3 {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    color: #002248;
    margin: 32px 0 16px;
}

.news-content blockquote {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    color: #002248;
    margin: 32px 0;
    padding: 0 0 0 24px;
    border-left: 3px solid var(--color-accent, #c9a96e);
}

.news-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Изображения внутри контента */
.news-content figure,
.news-content .wp-block-image {
    margin: 32px 0;
}

.news-content figure img,
.news-content .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

.news-content figure figcaption {
    font-family: 'Vela Sans', sans-serif;
    font-size: 14px;
    color: #73787e;
    margin-top: 8px;
}

/* Изображение alignleft — обтекание текстом */
.news-content figure.alignleft,
.news-content .wp-block-image.alignleft,
.news-content .alignleft {
    float: left;
    position: relative;
    left: auto;
    width: 45%;
    max-width: 320px;
    height: auto;
    margin: 4px 28px 20px 0;
    border-radius: 5px;
    overflow: hidden;
}

.news-content figure.alignright,
.news-content .wp-block-image.alignright,
.news-content .alignright {
    float: right;
    width: 45%;
    max-width: 320px;
    margin: 4px 0 20px 28px;
    border-radius: 5px;
    overflow: hidden;
}

.news-content figure.alignleft img,
.news-content figure.alignright img,
.news-content .alignleft img,
.news-content .alignright img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

.news-content ul,
.news-content ol {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    color: #002248;
    margin: 0 0 24px;
    padding-left: 24px;
}

.news-content li {
    margin-bottom: 8px;
}

.news-content a {
    color: #002248;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.news-content a:hover {
    text-decoration: none;
}

/* Разделитель в контенте */
.news-content hr {
    border: none;
    border-top: 1px solid #d9d5d0;
    margin: 40px 0;
}

/* === SINGLE NEWS RESPONSIVE === */

@media (max-width: 1440px) {
    .news-hero {
        margin-left: 16px;
        margin-right: 16px;
        max-width: calc(100% - 32px);
    }

    .news-hero-title {
        left: 36%;
    }

    .news-content-wrap>.news-content {
        margin-left: calc(36% - 80px);
    }
}

@media (max-width: 1200px) {
    .news-content-wrap>.news-content {
        margin-left: 0;
    }

    .news-hero-title {
        left: 40%;
    }
}

@media (max-width: 992px) {
    .news-hero {
        height: 320px;
    }

    .news-hero-title {
        font-size: 32px;
        left: 40%;
        bottom: 40px;
    }

    .news-hero-date {
        bottom: 40px;
        left: 40px;
    }

    .news-hero-back {
        top: 32px;
        left: 40px;
    }

    .news-content-wrap {
        padding: 40px 40px 60px;
    }

    .news-content {
        max-width: 100%;
    }

    .news-content-wrap>.news-content {
        margin-left: 0;
    }

    .news-body--with-image {
        flex-direction: column;
    }

    .news-body-image {
        width: 100%;
        max-width: 400px;
        position: static;
    }
}

@media (max-width: 900px) {
    .news-hero {
        height: 260px;
        margin-left: 12px;
        margin-right: 12px;
        max-width: calc(100% - 24px);
    }

    .news-hero-title {
        font-size: 24px;
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .news-hero-date {
        display: none;
    }

    .news-hero-back {
        top: 20px;
        left: 20px;
    }

    .news-content-wrap {
        padding: 24px 20px 60px;
    }

    .news-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .news-content h2 {
        font-size: 22px;
        margin: 28px 0 16px;
    }

    .news-content h3 {
        font-size: 19px;
    }

    .news-content blockquote {
        font-size: 20px;
    }

    .news-content ul,
    .news-content ol {
        font-size: 16px;
    }

    .news-content figure.alignleft,
    .news-content figure.alignright,
    .news-content .alignleft,
    .news-content .alignright {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 24px 0;
    }
}

/* ==========================================================================
   CONTACTS PAGE (по Figma: node 1:797)
   Две секции: контактная информация + Яндекс.Карта
   ========================================================================== */

/* --- Секция контактной информации (node 1:872) --- */
.contacts-info {
    position: relative;
    background-color: #f5f3f1;
    min-height: 506px;
    overflow: hidden;
    max-width: 1440px;
    margin: 0 auto;
}

.contacts-info-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    padding: 80px 80px 80px 80px;
    max-width: 720px;
}

/* Заголовок: Lora Medium 44px, uppercase */
.contacts-title {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: #002248;
    text-transform: uppercase;
    max-width: 513px;
    margin: 0;
}

/* Контактные данные: 2 колонки */
.contacts-details {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Колонка */
.contacts-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

/* Элемент контакта (иконка + текст) */
.contacts-item {
    display: flex;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.contacts-item--link:hover {
    opacity: 0.7;
}

/* Многострочный элемент (адрес, часы) — иконка по верху */
.contacts-item--multi {
    align-items: flex-start;
}

.contacts-item-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.contacts-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    justify-content: center;
}

.contacts-item-label {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: #828c99;
}

.contacts-item-value {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: #002248;
}

/* Кнопки соцсетей */
.contacts-socials {
    display: flex;
    gap: 16px;
    align-items: center;
}

.contacts-social-btn {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #002248;
    border-radius: 30px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contacts-social-btn:hover {
    opacity: 0.85;
}

.contacts-social-btn img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.contacts-social-btn span {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #f5f3f1;
}

/* Декоративный вектор (герб) — справа.
   Figma: center at calc(70.83%+9.5px), top=0.59%, w=781px, h=679px
   Вектор выходит за нижнюю границу секции на ~34%.
   SVG использует градиент #EFECE9 → #F5F3F1, почти совпадающий с фоном. */
.contacts-decor {
    position: absolute;
    top: 3px;
    left: 43.75%;
    width: 781px;
    height: 679px;
    z-index: 1;
    pointer-events: none;
}

.contacts-decor img {
    display: block;
    width: 781px;
    height: 679px;
}

/* --- Секция карты (node 1:945) --- */
.contacts-map {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    height: 504px;
    background-color: #e8e5e0;
}

.contacts-map-container {
    width: 100%;
    height: 100%;
}

/* --- Адаптив --- */
@media (max-width: 1200px) {
    .contacts-info-content {
        max-width: 100%;
    }

    .contacts-decor {
        left: 40%;
        width: 600px;
        height: auto;
    }

    .contacts-decor img {
        width: 600px;
        height: auto;
    }
}

@media (max-width: 992px) {
    .contacts-info {
        min-height: auto;
    }

    .contacts-info-content {
        padding: 40px 40px;
        gap: 28px;
    }

    .contacts-title {
        font-size: 36px;
        max-width: 100%;
    }

    .contacts-decor {
        display: none;
    }

    .contacts-map {
        height: 400px;
    }
}

@media (max-width: 900px) {
    .contacts-info-content {
        padding: 32px 20px;
        gap: 24px;
    }

    .contacts-title {
        font-size: 28px;
    }

    .contacts-details {
        flex-direction: column;
        gap: 16px;
    }

    .contacts-socials {
        flex-wrap: wrap;
        gap: 10px;
    }

    .contacts-social-btn {
        padding: 8px 16px;
    }

    .contacts-social-btn span {
        font-size: 13px;
    }

    .contacts-map {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .contacts-title {
        font-size: 24px;
    }

    .contacts-info-content {
        padding: 24px 16px;
    }

    .contacts-map {
        height: 250px;
    }
}


/* ==========================================================================
   USEFUL CONTACTS PAGE (по Figma: node 1:655)
   Секция карточек + карта с оверлеем «Как нас найти»
   ========================================================================== */

/* --- Секция карточек (node 1:657) --- */
.uc-section {
    background-color: #f5f3f1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 80px 80px;
}

/* Заголовок: Lora Medium 44px */
.uc-title {
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: #002248;
    margin: 0 0 40px;
}

/* Сетка карточек — вертикальная, 16px gap */
.uc-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Ряд — 2 карточки горизонтально */
.uc-row {
    display: flex;
    gap: 16px;
}

/* Карточка контакта */
.uc-card {
    background-color: #eae7e4;
    border-radius: 5px;
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 42px;
    min-height: 158px;
    overflow: hidden;
}

/* Текстовая часть карточки */
.uc-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Имя с золотой линией */
.uc-card-name {
    display: flex;
    gap: 8px;
    align-items: center;
}

.uc-card-line {
    width: 24px;
    height: 1px;
    flex-shrink: 0;
}

.uc-card-person {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #a58e6e;
}

/* Название должности/организации */
.uc-card-role {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: #002248;
    max-width: 376px;
    margin: 0;
}

/* Контакты внизу карточки */
.uc-card-contacts {
    display: flex;
    gap: 16px;
    align-items: center;
}

.uc-contact-item {
    display: flex;
    gap: 6px;
    align-items: center;
}

.uc-contact-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.uc-contact-item span,
.uc-contact-item a {
    font-family: 'Vela Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #002248;
    text-decoration: none;
}

.uc-contact-item a:hover {
    opacity: 0.7;
}

/* --- Секция карты (node 1:770) --- */
.uc-map-section {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    height: 406px;
    background-color: #e8e5e0;
    overflow: hidden;
}

.uc-map-bg {
    width: 100%;
    height: 100%;
}

/* Оверлей .map-card — уже есть стили от главной страницы, переиспользуем */

/* --- Адаптив для Useful Contacts --- */
@media (max-width: 1200px) {
    .uc-section {
        padding: 50px 40px 60px;
    }
}

@media (max-width: 992px) {
    .uc-title {
        font-size: 36px;
    }

    .uc-row {
        flex-direction: column;
    }

    .uc-card {
        min-height: auto;
    }

    .uc-map-section {
        height: auto;
        min-height: 500px;
    }

    .uc-map-bg {
        height: 400px;
    }

    .uc-map-section .map-card {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        border-radius: 0;
    }
}

@media (max-width: 900px) {
    .uc-section {
        padding: 32px 20px 40px;
    }

    .uc-title {
        font-size: 28px;
        margin-bottom: 24px;
    }

    .uc-card {
        gap: 24px;
        padding: 20px;
    }

    .uc-card-contacts {
        flex-wrap: wrap;
        gap: 12px;
    }

    .uc-map-section {
        height: auto;
    }
}

@media (max-width: 480px) {
    .uc-title {
        font-size: 24px;
    }
}

/* ==========================================================================
   КНОПКА «НАВЕРХ»
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 900;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background-color: #002248;
    color: #f5f3f1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 4px 20px rgba(0, 34, 72, 0.25);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: #a58e6e;
    box-shadow: 0 6px 24px rgba(165, 142, 110, 0.4);
    transform: translateY(-2px);
}

.back-to-top:active {
    transform: translateY(0);
}

.back-to-top svg {
    flex-shrink: 0;
}

/* Lenis smooth scroll — html/body */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

@media (max-width: 900px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   AOS — облегчённые анимации на мобильных
   На мобильных оставляем только fade (opacity), убираем сдвиги (translate)
   для плавности и быстродействия
   ========================================================================== */
@media (max-width: 900px) {

    /* Убираем transform-сдвиги, оставляем только плавное появление */
    [data-aos="fade-up"],
    [data-aos="fade-down"],
    [data-aos="fade-right"],
    [data-aos="fade-left"] {
        transform: none !important;
    }

    /* Укорачиваем длительность и убираем задержки */
    [data-aos] {
        transition-duration: 450ms !important;
    }

    [data-aos][data-aos-delay] {
        transition-delay: 0s !important;
    }
}