/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1779736404
Updated: 2026-05-25 22:13:24

*/

/* ==========================================================================
   CSS-ПЕРЕМЕННЫЕ (ДИЗАЙН-СИСТЕМА)
   ========================================================================== */

:root {
  /* Цвета */
  --color-dark:  #3B2F2A;
  --color-light: #ece1c6;

  /* Псевдонимы для обратной совместимости */
  --bg-main:   var(--color-light);
  --bg-dark:   var(--color-dark);
  --text-dark: var(--color-dark);
  --text-light: var(--color-light);

  /* Акцент — используется ровно в трёх местах */
  --color-accent: #B8855A;

  /* Тени */
  --shadow-soft: 0 1px 2px rgba(59,47,42,.08), 0 12px 32px rgba(59,47,42,.08);

  /* Шрифты */
  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Montserrat', sans-serif;

  /* Псевдонимы */
  --font-title: var(--font-display);
  --font-main:  var(--font-body);
}

/* ==========================================================================
   ГЛАВНЫЙ ЭКРАН (MOBILE-FIRST)
   ========================================================================== */
/* ==========================================================================
   ОБНОВЛЕННАЯ ТИПОГРАФИКА
   ========================================================================== */

/* 1. Основной шрифт для всего сайта — Montserrat */
body {
    background-color: var(--color-light);
    color: var(--text-dark);
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    position: relative;
    /* OpenType: лигатуры, контекстные альтернаты, кернинг — работают в Montserrat */
    font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
}

/* Grain texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url('assets/img/grain.png');
    background-size: 200px 200px;
    opacity: 0.04;
    mix-blend-mode: multiply;
}

.site-footer, #colophon { display: none; }

/* 2. Шрифт для элегантных текстовых заголовков — Cormorant Garamond */
h2,
h3,
.accent-text,
.hero-desc-bottom {
    font-family: var(--font-title);
    /* Cormorant Garamond */
    font-weight: 400;
    font-size: 22px;
    letter-spacing: 0.02em;
}

/* onum только на Cormorant — Montserrat не поддерживает old-style figures */
h2, h3,
.accent-text,
.hero-desc-top,
.hero-desc-bottom,
.result__title,
.you-are-here__title,
.gains__title,
.gains__card,
.services-help__title,
.services__slide-title,
.programs__card-title,
.programs__card-price,
.footer__quote,
.cta__button,
.price-accent {
    font-feature-settings: "liga" 1, "calt" 1, "onum" 1, "kern" 1;
    font-variant-numeric: oldstyle-nums;
}

/* Верхнее описание */
.hero-desc-top {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-dark);
    /* max-width: 90%; */
    margin-bottom: -30px;
}

.landing-hero {
    background-color: var(--bg-main);
    padding-bottom: 60px;
    overflow: hidden;
}

/* Контейнер логотипа */
.hero-logo-wrapper {
    margin: 25px 0 35px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Сам SVG-логотип */
.hero-logo {
    width: 100%;
    max-width: 280px;
    /* Ограничиваем максимальную ширину на мобилке, чтобы выглядело аккуратно */
    height: auto;
    display: block;
}

/* Хедер: бургер и иконки */
.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-dark);
    padding: 14px 16px;
    border-radius: 0 0 20px 20px;
}

/* Кнопка бургера */
.menu-burger {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 18px;
    padding: 0;
    cursor: pointer;
}

.menu-burger__icon {
    width: 30px;
    height: 18px;
    filter: brightness(0) invert(1) brightness(0.773);
    display: block;
}

/* Блок иконок */
.header-socials {
    display: flex;
    align-items: center;
    gap: 22px; /* Расстояние между иконками */
}

.header-social-link {
    color: inherit; /* Подхватывает цвет текста хедера */
    font-size: 18px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Плавный переход для ховера */
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: transform, opacity;
}

/* Элегантный микро-эффект при наведении */
.header-social-link:hover {
    opacity: 0.6;
    transform: translateY(-2px);
}

.header-social-icon {
    width: 30px;
    height: 30px;
    display: block;
    filter: brightness(0) invert(1) brightness(0.773);
}

/* Первая иконка (Instagram) — чуть крупнее */
.header-socials a:first-child .header-social-icon {
    width: 31px;
    height: 31px;
}

/* Последняя иконка (Phone) */
.header-socials a:last-child .header-social-icon {
    width: 28px;
    height: 28px;
}

/* Контентная часть */
.hero-content {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
}

/* Имя бренда */
.hero-brand-title {
    font-size: 3.5rem;
    /* Крупный каллиграфический размер */
    color: var(--bg-dark);
    text-align: center;
    margin: 20px 0 40px 0;
}


.hero-image-wrapper {
    margin: 0 -24px;
    /* Наш фирменный крутой скос */
    clip-path: polygon(0 20%, 100% 0, 100% 82%, 0 100%);
    overflow: hidden;
    position: relative;
    height: 70vh; /* Чуть приподняли высоту окна для большего панорамного обзора */
    background-color: var(--bg-main);
}

.hero-img {
    /* Duotone: тени → #3B2F2A, света → тёплый крем. Если слишком оранжево — sepia(0.25) */
    filter: grayscale(1) sepia(0.35) hue-rotate(-12deg) contrast(1.08) brightness(0.96);
    position: absolute;
    top: -75px; /* Сдвигаем глубоко наверх */
    left: 0;
    width: 100%;
    height: 150%; /* Картинка теперь в полтора раза выше самого окна */
    object-fit: cover;
    display: block;
    
    /* Аппаратный рендеринг */
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Второе описание (снизу) */
.hero-desc-bottom {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 400;
    color: var(--color-dark);
    line-height: 1;
    text-align: right;
    max-width: 85%;
    align-self: flex-end;
    /* Сдвигаем весь блок вправо */
    margin-top: -30px;
}

/* ==========================================================================
   БАЗОВЫЕ СТИЛИ СЕКЦИЙ
   ========================================================================== */

.section {
    padding: 72px 10px;
}

.section--light {
    background-color: var(--color-light);
    color: var(--color-dark);
}

.section--dark {
    background-color: var(--color-dark);
    color: var(--color-light);
}

/* ==========================================================================
   СЕКЦИЯ: РЕЗУЛЬТАТ
   ========================================================================== */

.result__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-dark);
    text-align: center;
    margin: 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   СЕКЦИЯ: МАНИФЕСТ
   ========================================================================== */

.manifesto {
    background: var(--color-dark);
    color: var(--color-light);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    text-align: center;
}

.manifesto__line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(36px, 9vw, 48px);
    line-height: 1.25;
    letter-spacing: 0.02em;
    max-width: 22ch;
    margin: 0;
    opacity: 0;
}

/* ==========================================================================
   СЕКЦИЯ: ВЫ ЗДЕСЬ ЕСЛИ
   ========================================================================== */


.you-are-here__card {
    background-color: var(--color-dark);
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.you-are-here__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-light);
    text-align: center;
    margin: 0;
}

.you-are-here__list {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.you-are-here__item {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-light);
    padding: 16px 0 16px 18px;
    position: relative;
    list-style: none !important;
}

.you-are-here__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-light);
}

/* ==========================================================================
   CTA BUTTON
   ========================================================================== */

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

.cta__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 339px;
    height: 51px;
    background-color: var(--color-dark);
    color: var(--color-light);
    border: 1px solid var(--color-light);
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   GAINS
   ========================================================================== */

.gains__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-dark);
    margin: 0 0 32px 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.gains__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-items: center;
}

.gains__card {
    background-color: var(--color-dark);
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    width: 100%;
    min-height: 107px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-light);
    padding: 16px 12px;
}

/* ==========================================================================
   SERVICES-HELP
   ========================================================================== */

.services-help__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-dark);
    margin: 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   PROGRAMS
   ========================================================================== */

.programs {
    padding-left: 8px;
    padding-right: 8px;
}

.programs__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.programs__card {
    border: 1px solid #5F5F5F;
    border-radius: 20px;
    padding: 14px 13px;
    box-shadow: var(--shadow-soft);
}

.programs__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.programs__card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-dark);
    text-transform: uppercase;
}

.programs__card-price {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-dark);
    text-transform: uppercase;
}

/* 1. Accent: цена Private session */
.price-accent {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-variant: small-caps;
    color: var(--color-accent);
    letter-spacing: 0.04em;
}

.programs__card-divider {
    border: none;
    border-top: 1px solid #5F5F5F;
    margin: 0 0 12px 0;
}

.programs__card-desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #5F5F5F;
    margin: 0;
    line-height: 1.5;
    font-variant: small-caps;
}

/* ==========================================================================
   SPOTLIGHT (mouse-following glow on dark cards)
   ========================================================================== */

.spotlight {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 235, 200, 0.06),
        transparent 70%
    );
    transition: opacity 0.3s ease;
}

/* Отключаем на touch-устройствах */
@media (hover: none) {
    .spotlight::before { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.landing-footer {
    background-color: var(--color-dark);
    padding: 23px 10px 20px 10px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    position: relative;
    border-radius: 40px 40px 0 0;
}

.footer__left {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 179px;
    flex-shrink: 0;
}

.footer__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.footer__photo {
    /* Тот же duotone что и hero portrait */
    filter: grayscale(1) sepia(0.35) hue-rotate(-12deg) contrast(1.08) brightness(0.96);
    width: 80px;
    height: 87px;
    border-radius: 40px;
    object-fit: cover;
    object-position: top;
    display: block;
    margin-bottom: 10px;
}

.footer__quote {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 400;
    color: var(--color-light);
    line-height: 1.3;
    margin: 0;
    font-style: italic;
    text-align: right;
}

.footer__copy {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    color: #787878;
    margin: 0;
    text-transform: lowercase;
    position: absolute;
    bottom: 12px;
    right: 20px;
}

.footer__social-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer__icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1) brightness(0.773);
}

.footer__social-link {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-light);
    text-decoration: none;
    font-variant: small-caps;
}

/* 2. Accent: hover на ссылках футера */
.landing-footer a:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 4px;
}

/* 3. Accent: активный буллет пагинации Swiper */
.swiper-pagination-bullet-active {
    background: var(--color-accent) !important;
}

/* ==========================================================================
   SERVICES CAROUSEL
   ========================================================================== */

.services {
    background-color: var(--color-light);
    padding: 40px 0;
}

.services__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
}

.services__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-dark);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.services__btn:hover,
.services__btn:active,
.services__btn:focus {
    background: var(--color-dark);
    opacity: 0.7;
}

.services__btn svg {
    width: 16px;
    height: 16px;
    color: var(--color-light);
}

.services__btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.services__swiper-wrap {
    padding: 8px 20px;
    overflow: hidden;
}

.services__swiper {
    overflow: visible !important;
}

.services__swiper .swiper-wrapper {
    align-items: stretch;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.services__swiper .swiper-slide {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.services__slide {
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 72vw;
    max-width: 260px;
    height: 320px;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.services__slide-img {
    width: 100%;
    flex: 1;
    object-fit: cover;
    object-position: center;
    display: block;
    min-height: 0;
}

.services__slide-body {
    padding: 14px 16px;
    background-color: var(--color-dark);
    flex-shrink: 0;
    height: 72px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.services__slide-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    color: var(--color-light);
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}