    /* ============================================================
       СЛАВЯНЕ · первый визуальный прототип главной страницы
       HTML + CSS + JS в одном файле, без внешних ресурсов
       ============================================================ */

    :root {
      /* Природная палитра: дерево, земля, солнце */
      --green:        #2e4939;   /* глубокий зелёный */
      --green-deep:   #22372b;
      --green-mid:    #3d5c49;
      --sage:         #6f8b74;
      --clay:         #b25a38;   /* терракота */
      --clay-deep:    #8f4428;
      --clay-soft:    #cf8357;
      --sun:          #eda93f;   /* тёплый жёлтый */
      --sun-soft:     #f4d594;
      --cream:        #f7f1e3;   /* тёплая светлая основа */
      --cream-2:      #f3ead6;
      --ink:          #2b261e;
      --ink-soft:     #5f584a;
      --line:         rgba(43, 38, 30, .14);

      /* Тёмные секции */
      --on-dark:      #f6efe0;
      --on-dark-soft: rgba(246, 239, 224, .66);

      --radius:       22px;
      --shadow-soft:  0 16px 44px rgba(43, 38, 30, .10);
      --header-h:     74px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--header-h) + 18px);
    }

    body {
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: var(--cream);
      color: var(--ink);
      line-height: 1.62;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1, h2, h3, .serif {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      line-height: 1.12;
    }

    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    ::selection { background: var(--sun-soft); color: var(--green-deep); }

    :focus-visible {
      outline: 2px solid var(--clay);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .container {
      width: 100%;
      max-width: 1180px;
      margin-inline: auto;
      padding-inline: clamp(20px, 4.5vw, 48px);
    }

    .section { padding-block: clamp(52px, 7.5vw, 92px); }
    [id] { scroll-margin-top: calc(var(--header-h) + 14px); }

    /* ---------- Общие элементы ---------- */

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--clay);
    }
    .eyebrow::before {
      content: "";
      width: 8px; height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, var(--sun-soft), var(--sun));
      flex: none;
    }
    .eyebrow.on-dark { color: var(--sun-soft); }

    .h2 {
      font-size: clamp(1.85rem, 4.2vw, 2.75rem);
      margin: 14px 0 16px;
      color: var(--green-deep);
    }
    .h2 .accent { color: var(--clay); }
    .h2.on-dark { color: var(--on-dark); }

    .lead {
      font-size: clamp(1.02rem, 1.6vw, 1.16rem);
      color: var(--ink-soft);
      max-width: 640px;
    }
    .lead.on-dark { color: var(--on-dark-soft); }

    /* Кнопки */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 16px 32px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: .02em;
      cursor: pointer;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }
    .btn-primary {
      background: var(--clay);
      color: #fdf6ea;
      box-shadow: 0 10px 26px rgba(178, 90, 56, .32);
    }
    .btn-primary:hover {
      background: var(--clay-deep);
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(143, 68, 40, .36);
    }
    .btn-ghost {
      background: rgba(255, 253, 247, .55);
      color: var(--ink);
      border-color: var(--line);
    }
    .btn-ghost:hover {
      border-color: var(--clay);
      color: var(--clay-deep);
      transform: translateY(-2px);
    }
    .btn-sm { padding: 11px 22px; font-size: 13.5px; }

    /* Появление при скролле (включается JS-классом .js) */
    html.js .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .7s ease, transform .7s ease;
    }
    html.js .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ============================================================
       ШАПКА (тёмная, поверх фото Hero)
       ============================================================ */
    .header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 60;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 24px;
      padding: 14px clamp(20px, 4.5vw, 48px);
      transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
    }
    .header.scrolled {
      background: rgba(21, 32, 25, .92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(246, 239, 224, .12);
    }

    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: 7px;
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: .07em;
      color: var(--on-dark);
      white-space: nowrap;
    }
    .brand-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, var(--sun-soft), var(--sun));
      align-self: center;
    }


    /* Кнопка мобильного меню */
    .menu-btn {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px; height: 44px;
      padding: 10px;
      background: rgba(21, 32, 25, .35);
      border: 1px solid rgba(246, 239, 224, .25);
      border-radius: 12px;
      cursor: pointer;
      transition: background .2s ease;
    }
    .menu-btn:hover { background: rgba(21, 32, 25, .55); }
    .menu-btn span {
      display: block;
      width: 100%; height: 2px;
      border-radius: 2px;
      background: var(--on-dark);
      transition: transform .25s ease, opacity .25s ease;
    }
    .menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-btn.open span:nth-child(2) { opacity: 0; }
    .menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Полноэкранное мобильное меню */
    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 55;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: calc(var(--header-h) + 24px) clamp(24px, 6vw, 48px) 40px;
      justify-content: safe center;
      overflow-y: auto;
      background: linear-gradient(180deg, rgba(18, 28, 21, .98), rgba(18, 28, 21, .97));
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }
    .mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
    .mobile-menu nav { display: flex; flex-direction: column; gap: 4px; }
    .mobile-menu nav a {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 30px;
      font-weight: 700;
      color: var(--on-dark);
      padding: 10px 0;
      border-bottom: 1px solid rgba(246, 239, 224, .12);
      transition: color .2s ease;
    }
    .mobile-menu nav a:hover { color: var(--sun-soft); }
    .mobile-menu .mm-soon {
      display: block;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 30px;
      font-weight: 700;
      color: rgba(246, 239, 224, .32);
      padding: 10px 0;
      border-bottom: 1px solid rgba(246, 239, 224, .12);
      cursor: default;
    }
    .mobile-menu .mm-cta {
      margin-top: 22px;
      text-align: center;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 17px;
      font-weight: 600;
      color: #fdf6ea;
      background: var(--clay);
      border-radius: 999px;
      border-bottom: none;
      padding: 15px 20px;
    }

    /* ============================================================
       HERO — подготовленная фотография на весь фон, текст слева
       Desktop: images/hero-desktop.jpg (замена на мобильную — в media query)
       ============================================================ */
    .hero {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-height: 100svh;
      overflow: hidden;
      color: var(--on-dark);
      background-color: #141b15;
      background-image: url("../images/hero-desktop.jpg");
      background-size: cover;
      background-position: center 26%;
      background-repeat: no-repeat;
    }

    /* Мягкое затемнение только со стороны текста (слева) */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(8, 12, 9, .64) 0%, rgba(8, 12, 9, .32) 34%, rgba(8, 12, 9, 0) 62%);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1 1 auto;
      width: 100%;
      max-width: 1180px;
      margin-inline: auto;
      padding: calc(var(--header-h) + 40px) clamp(20px, 4.5vw, 48px) 40px;
    }

    .hero-kicker {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(246, 239, 224, .82);
    }

    .hero h1 {
      /* Крупная контрастная антиква editorial/Didone-типа */
      font-family: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
      font-weight: 700;
      font-size: clamp(2.9rem, 8.5vw, 6.2rem);
      letter-spacing: .01em;
      color: #faf4e6;
      margin: 14px 0 10px;
      line-height: 1;
      text-shadow: 0 2px 22px rgba(8, 12, 9, .45);
    }

    .hero-slogan {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      font-size: clamp(1.25rem, 3vw, 1.9rem);
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #f4b75a;
      text-shadow: 0 2px 18px rgba(8, 12, 9, .4);
    }

    .hero-lead {
      max-width: 560px;
      margin-top: 20px;
      font-size: clamp(1.05rem, 1.8vw, 1.25rem);
      color: rgba(246, 239, 224, .92);
      text-shadow: 0 2px 14px rgba(10, 15, 11, .5);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 36px;
    }

    /* Четыре преимущества под Hero */
    .hero-perks {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(246, 239, 224, .16);
      background: linear-gradient(0deg, rgba(9, 14, 10, .55) 0%, rgba(9, 14, 10, .18) 100%);
    }
    .hero-perks-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px 28px;
      padding-block: 18px 20px;
    }
    .hero-perks p {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      letter-spacing: .03em;
      color: rgba(246, 239, 224, .85);
    }
    .perk-dot {
      width: 7px; height: 7px;
      flex: none;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, var(--sun-soft), var(--sun));
    }

    .chips {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 30px;
    }
    .chip {
      font-size: 12.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      background: rgba(255, 253, 247, .6);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 16px;
    }

    .hero-landscape {
      width: 100%;
      height: auto;
      margin-top: auto;
      flex: none;
    }

    /* ============================================================
       МАССАЖ / ТЕЛО — главный блок после Hero
       ============================================================ */
    .massage-hero {
      position: relative;
      overflow: hidden;
      color: var(--on-dark);
      background-color: #17251c;
      background-image: url("../images/hero-desktop.jpg");
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      /* Компактнее базового .section: блок должен читаться одним экраном на desktop */
      padding-top: clamp(24px, 3vw, 36px);
      padding-bottom: clamp(24px, 3vw, 36px);
    }
    .massage-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(100deg, rgba(12, 20, 14, .9) 0%, rgba(12, 20, 14, .74) 44%, rgba(12, 20, 14, .46) 100%);
    }
    .massage-hero .container { position: relative; z-index: 2; }
    .massage-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(400px, .95fr);
      column-gap: clamp(32px, 4vw, 60px);
      align-items: start;
    }
    .massage-left {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .massage-right {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      min-width: 0;
      overflow: visible;
      /* На desktop двигаем только по горизонтали.
         Вертикальное выравнивание делаем через реальные отступы ниже,
         чтобы менялся поток страницы, а не только картинка. */
      transform: translateX(-38px);
    }
    .massage-intro { align-self: start; max-width: 560px; }
    .massage-intro .h2 { margin-top: 14px; font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
    .massage-intro .h2 .accent { color: var(--sun); }
    .massage-intro .lead { margin-top: 16px; }
    .massage-intro .lead + .lead { margin-top: 14px; }
    .lead-em {
      color: var(--on-dark);
      font-weight: 600;
    }
    .massage-flower { }
    .massage-principles { }
    .massage-interaction {
      width: 100%;
      max-width: 440px;
      margin-top: 34px;
    }
    .btn-on-dark {
      background: rgba(255, 253, 247, .18);
      color: var(--on-dark);
      border-color: rgba(246, 239, 224, .55);
    }
    .btn-on-dark:hover {
      background: rgba(255, 253, 247, .28);
      border-color: var(--sun-soft);
      color: var(--sun-soft);
      transform: translateY(-2px);
    }

    .massage-flower {
      width: 630px;
      max-width: none;
      /* Поднимаем сам цветок и убираем лишнюю высоту его SVG-box снизу.
         В отличие от translateY отрицательные margin действительно
         подтягивают следующий блок вверх. */
      margin-top: -116px;
      margin-bottom: -138px;
      transform: translateX(12px);
      aspect-ratio: 1;
    }
    .massage-flower svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 14px 18px rgba(10, 15, 11, .35));
    }

    /* ============================================================
       ВИДЫ МАССАЖА И ЦЕНЫ — компактная секция
       ============================================================ */
    .massage-types {
      /* Компактнее глобального .section: секция ≈ один экран на desktop */
      padding-block: clamp(28px, 3.6vw, 46px);
      /* Слои фона: тёплый блик → светлая плёнка → фотофон */
      background:
        radial-gradient(720px 440px at 12% 8%, rgba(238, 179, 79, .22), transparent 62%),
        linear-gradient(180deg, rgba(251, 244, 228, .45) 0%, rgba(246, 236, 212, .50) 100%),
        url("../images/massage-types-desktop.png");
      background-size: auto, auto, cover;
      background-position: center;
    }
    .massage-types-head { max-width: 1080px; margin-bottom: 20px; }
    .massage-types-head .h2 { margin: 12px 0 10px; }
    .massage-types-head .lead { max-width: none; }

    .mt-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .mt-card {
      display: flex;
      flex-direction: column;
      min-height: 130px;
      background: rgba(255, 253, 247, .55);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 14px 16px 15px;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .mt-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-soft);
    }
    .mt-card-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
    }
    .mt-card-top h3 {
      font-size: 1.08rem;
      color: var(--green-deep);
      margin: 0;
    }
    .mt-card > p {
      font-size: 14px;
      line-height: 1.45;
      color: var(--ink-soft);
    }
    .mt-card-price {
      flex: none;
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--clay-deep);
      white-space: nowrap;
    }

    /* Единая нижняя панель: зоны | техники | CTA */
    .mt-panel {
      margin-top: 18px;
      display: grid;
      grid-template-columns: minmax(190px, 1fr) minmax(230px, 1.35fr) auto;
      align-items: start;
      gap: clamp(12px, 2vw, 20px);
      padding: 10px 18px;
      background: rgba(255, 253, 247, .74);
      border: 1px solid var(--line);
      border-radius: 18px;
    }
    .mt-panel-title {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--green-mid);
      margin-bottom: 5px;
    }
    .mt-zones-line {
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-soft);
    }
    .mt-zones-line + .mt-zones-line { margin-top: 2px; }
    .mt-zones-line .sep { color: var(--sun); margin: 0 6px; }

    .mt-zones-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      line-height: 1.1;
    }
    .mt-zone-tag {
      font-size: 13px;
      color: var(--ink-soft);
      background: rgba(255, 253, 247, .6);
      border: 1px solid rgba(178, 90, 56, .18);
      border-radius: 12px;
      padding: 3px 9px;
    }

    .mt-tech-text {
      max-width: 400px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-soft);
    }

    .mt-panel-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .mt-panel-actions-buttons {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    /* Кнопка «Полный прайс» — намеренно вторичная относительно «Записаться» */
    .mt-panel-actions .btn.btn-ghost {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-soft);
      background: rgba(255, 253, 247, .35);
      border-color: rgba(43, 38, 30, .16);
    }
    .mt-panel-actions .btn.btn-ghost:hover {
      color: var(--green-mid);
      background: rgba(255, 253, 247, .5);
      border-color: rgba(43, 38, 30, .22);
    }
    .mt-price-line {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 15px;
      font-weight: 700;
      color: var(--clay-deep);
      white-space: nowrap;
    }
    .mt-panel-actions .btn { padding: 11px 24px; font-size: 14px; }
    .mt-panel-actions .btn-primary { margin: 0; }

    .mt-programs-note {
      font-size: 13px;
      line-height: 1.35;
      color: var(--ink-soft);
      margin-top: 0;
      text-align: center;
    }

    /* Скрытый контейнер полного прайса */
    .mt-fullprice {
      margin-top: 12px;
      padding: 18px 22px;
      background: rgba(255, 253, 247, .85);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow-soft);
      font-size: 14.5px;
      color: var(--ink-soft);
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease;
    }
    .mt-fullprice:not([hidden]) {
      max-height: 2000px;
      opacity: 1;
      margin-top: 16px;
    }
    .mfp-section-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.15rem;
      color: var(--green-deep);
      margin-bottom: 14px;
      margin-top: 20px;
    }
    .mfp-section-title:first-child {
      margin-top: 0;
    }
    .mfp-services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 18px;
    }
    .mfp-services-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 18px;
    }
    .mfp-service-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 8px 12px;
      background: rgba(255, 253, 247, .5);
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .mfp-service-name {
      font-size: 14px;
      color: var(--ink);
    }
    .mfp-service-price {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      font-size: 1rem;
      color: var(--clay-deep);
    }
    .mfp-programs-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 16px;
    }
    .mfp-program-card {
      position: relative;
      background: rgba(255, 253, 247, .5);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px;
    }
    .mfp-program-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(139, 74, 46, .1);
      border: 1px solid rgba(139, 74, 46, .3);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--clay-deep);
      line-height: 1.4;
    }
    .mfp-program-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--green-deep);
      margin-bottom: 4px;
    }
    .mfp-program-term {
      font-size: 13px;
      color: var(--clay);
      margin-bottom: 10px;
    }
    .mfp-program-desc {
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-soft);
      margin-bottom: 10px;
    }
    .mfp-program-condition {
      font-size: 12.5px;
      color: var(--ink-soft);
      opacity: .85;
    }
    .mfp-programs-common {
      font-size: 13.5px;
      color: var(--ink-soft);
      margin-bottom: 4px;
      text-align: center;
    }
    .mfp-close-wrapper {
      margin-top: 20px;
      text-align: center;
    }
    .mfp-close-btn {
      padding: 10px 24px;
      font-size: 14px;
    }

    @media (max-width: 900px) {
      .mt-grid { grid-template-columns: repeat(2, 1fr); }
      .mt-panel {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        align-items: start;
      }
      .mt-panel-actions {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding-top: 6px;
        border-top: 1px dashed var(--line);
      }
      .mt-panel-actions-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
      .mt-price-line { margin-right: 0; }
    }
    @media (max-width: 600px) {
      .mt-grid { grid-template-columns: 1fr; }
      .mt-panel {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: stretch;
      }
      .mt-panel-actions {
        grid-column: auto;
        flex-direction: column;
        align-items: stretch;
        border-top: none;
        padding-top: 0;
      }
      .mt-panel-actions-buttons {
        flex-direction: column;
      }
      .mt-price-line { margin-right: 0; white-space: normal; text-align: center; }
      .mt-panel-actions .btn { width: 100%; }
      .mfp-services-grid { grid-template-columns: 1fr; }
      .mfp-services-list { grid-template-columns: 1fr; }
      .mfp-programs-grid { grid-template-columns: 1fr; }
    }

    /* ============================================================
       О МЕСТЕ — компактный блок (фото + текст + преимущества)
       ============================================================ */
    .o-meste {
      padding-block: clamp(96px, 10vw, 140px) clamp(48px, 6vw, 80px);
      background-color: var(--cream);
      background-image:
        linear-gradient(180deg, rgba(247, 241, 227, .22), transparent 30%, var(--cream)),
        radial-gradient(ellipse at 76% 62%, rgba(247, 241, 227, .97) 12%, rgba(247, 241, 227, .76) 42%, rgba(247, 241, 227, .44) 78%),
        url("../images/place-archway.png");
      background-size: cover;
      background-position: center, center, center 78%;
    }
    .place-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: clamp(32px, 5vw, 64px);
      align-items: center;
    }

    /* Медиа: главное фото в тёплом паспарту + маленький атмосферный акцент */
    .place-media {
      position: relative;
      padding: 0 0 clamp(38px, 5vw, 60px);
    }
    .place-photo {
      margin: 0;
      overflow: hidden;
      aspect-ratio: 1448 / 1086;
      padding: 8px;
      border-radius: 28px;
      background: linear-gradient(160deg, #fdf8ec 0%, #f1e4c8 100%);
      border: 1px solid rgba(178, 90, 56, .16);
      box-shadow: 0 18px 44px rgba(43, 38, 30, .14);
    }
    .place-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 21px;
    }
    .place-accent {
      position: absolute;
      right: 12px;
      bottom: 0;
      width: 40%;
      max-width: 220px;
      aspect-ratio: 1;
      margin: 0;
      overflow: hidden;
      border-radius: 50%;
      background: #fbf4e4;
      border: 5px solid #fbf4e4;
      box-shadow: 0 0 0 1px rgba(178, 90, 56, .18), 0 12px 28px rgba(43, 38, 30, .18);
    }
    .place-accent::before {
      content: "";
      position: absolute;
      inset: -8px;
      background: url("../images/chasha.png") center / cover;
      filter: blur(8px) saturate(.85);
    }
    .place-accent img {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      filter: saturate(.92);
      -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 20%, #000 80%, transparent 88%);
      mask-image: linear-gradient(180deg, transparent 12%, #000 20%, #000 80%, transparent 88%);
    }

    .place-body .h2 { margin-bottom: 10px; }
    .place-list {
      list-style: none;
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 20px;
    }
    .place-list li {
      position: relative;
      padding-left: 26px;
      font-size: 15px;
      color: var(--ink-soft);
    }
    .place-list li::before {
      content: "";
      position: absolute;
      left: 4px; top: 8px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, var(--sun-soft), var(--sun));
    }

    /* Как добраться */
    .place-route {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 20px;
      padding: 16px 18px;
      background: rgba(255, 253, 247, .88);
      border: 1px solid rgba(178, 90, 56, .18);
      border-radius: 18px;
      box-shadow: 0 10px 28px rgba(75, 45, 15, .06);
    }
    .place-route-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.12rem;
      font-weight: 700;
      color: var(--green-deep);
    }
    .place-route-coords {
      margin-top: 2px;
      font-size: 13.5px;
      letter-spacing: .02em;
      color: var(--ink-soft);
      opacity: .85;
      font-variant-numeric: tabular-nums;
    }
    .place-route-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .place-route-actions .btn { padding: 13px 26px; }
    .place-copy {
      padding: 4px 6px;
      border: 0;
      background: none;
      font: inherit;
      font-size: 13px;
      color: var(--ink-soft);
      text-decoration: underline;
      text-decoration-color: rgba(178, 90, 56, .35);
      text-underline-offset: 3px;
      cursor: pointer;
      transition: color .2s ease;
    }
    .place-copy:hover { color: var(--clay-deep); }
    .place-copy.is-copied { color: var(--green-mid); text-decoration: none; }

    /* ============================================================
       МАССАЖНЫЙ БЛОК: принципы, выбранное направление, кнопки
       — компактные элементы левой колонки единого экрана
       ============================================================ */
    .massage-principles {
      /* Нижний левый блок сетки 2×2; плашки распределяются по высоте ряда,
         чтобы низ третьей плашки совпадал с низом кнопок справа */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      max-width: 520px;
    }
    .mp-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 14px;
      background: rgba(255, 253, 247, .08);
      border: 1px solid rgba(246, 239, 224, .16);
      border-radius: 14px;
    }
    .mp-icon {
      flex: none;
      width: 30px; height: 30px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: rgba(237, 169, 63, .18);
      color: var(--sun-soft);
    }
    .mp-body h3 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1rem;
      line-height: 1.25;
      color: var(--on-dark);
    }
    .mp-body p {
      margin-top: 2px;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--on-dark-soft);
    }

    .massage-interaction {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .massage-interaction .massage-direction {
      margin-top: 0;
      width: 100%;
    }
    .md-card {
      background: linear-gradient(160deg, #fffaf0 0%, #f9edd8 100%);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 15px 20px 16px;
      box-shadow: var(--shadow-soft);
      max-width: 440px;
      width: 100%;
    }
    .md-card .md-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.22rem;
      color: var(--green-deep);
      margin-bottom: 3px;
    }
    .md-desc { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
    .md-note {
      margin-top: 8px;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(246, 239, 224, .68);
      font-style: italic;
      max-width: 420px;
      text-align: center;
    }

    .massage-interaction .massage-actions {
      margin-top: 0;
    }
    .massage-actions .hero-actions {
      margin-top: 0;
      gap: 14px;
    }

    @media (max-width: 980px) {
      /* Mobile: последовательность intro → principles → flower → interaction */
      .massage-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .massage-left { gap: 20px; }
      .massage-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        transform: none;
      }
      .massage-flower { transform: none; margin-top: 0; margin-bottom: 0; }
      .massage-interaction { margin-top: 0; }
      .massage-intro { max-width: 640px; margin-inline: auto; text-align: center; }
      .massage-intro .lead { margin-inline: auto; }
      .massage-principles { margin-inline: auto; text-align: left; width: 100%; max-width: 520px; }
      /* Цветок состояний: в исходном SVG много пустого поля, поэтому
         расширяем сам SVG-box примерно в 1.75 раза и компенсируем лишнюю высоту. */
      .massage-flower {
        width: 175vw;
        max-width: none;
        margin-inline: calc((100vw - 175vw) / 2);
        margin-top: -32vw;
        margin-bottom: -32vw;
      }
      .massage-interaction { width: 100%; max-width: 440px; margin-inline: auto; align-items: center; }
      .massage-interaction { gap: 16px; }
      .massage-direction {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .massage-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    /* ============================================================
       ФИРМЕННЫЙ ЦВЕТОК-НАВИГАЦИЯ V73 (интегрирован, изолировано)
       ============================================================ */
    .slavyane-nav {
      position: relative;
      background:
        radial-gradient(560px 420px at 50% 42%, rgba(255, 251, 240, .92), rgba(255, 251, 240, .58) 58%, rgba(240, 230, 205, .84) 100%),
        linear-gradient(180deg, #ede2c8 0%, #e2d4b2 100%);
      overflow: hidden;
    }
    .slavyane-nav::before {
      content: "";
      position: absolute;
      inset: -16px;
      pointer-events: none;
      background: url("../images/place-archway.png") center 55% / cover;
      filter: blur(3px) saturate(.9);
      opacity: .32;
    }
    .slavyane-nav::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(247, 241, 227, .42), rgba(240, 230, 205, .68) 60%, rgba(237, 226, 200, .82));
    }
    .slavyane-nav .nav-grid { position: relative; z-index: 1; }
    .nav-grid {
      max-width: 1280px;
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(28px, 4vw, 56px);
      align-items: center;
    }
    .slavyane-nav .nav-intro { min-width: 0; }
    .slavyane-nav .nav-intro .h2 { margin-top: 14px; }
    .nav-story {
      margin-top: 22px;
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.75;
    }
    .nav-story p + p { margin-top: 14px; }
    .nav-contact-link {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      min-height: 44px;
      margin-top: 18px;
      color: var(--clay-deep);
      font-size: 14px;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-color: rgba(178, 90, 56, .35);
      text-underline-offset: 6px;
    }
    .nav-contact-link:hover { color: var(--green-deep); }
    .nav-dialog {
      width: min(520px, calc(100% - 32px));
      max-height: calc(100% - 48px);
      margin: auto;
      padding: clamp(24px, 5vw, 38px);
      overflow-y: auto;
      border: 1px solid rgba(178, 90, 56, .22);
      border-radius: 24px;
      background: var(--cream);
      color: var(--ink-soft);
      box-shadow: 0 24px 80px rgba(43, 38, 30, .24);
    }
    .nav-dialog::backdrop { background: rgba(25, 37, 28, .62); }
    .nav-dialog .h2 { padding-right: 24px; }
    .nav-dialog-close { position: absolute; right: 12px; top: 12px; }
    .nav-dialog-close button {
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(255, 253, 247, .65);
      color: var(--green-deep);
      font: 26px/1 Georgia, serif;
      cursor: pointer;
    }
    .contact-links {
      --contact-line: rgba(178, 90, 56, .24);
      --contact-bg: rgba(255, 253, 247, .56);
      --contact-hover: rgba(237, 169, 63, .12);
      --contact-accent: var(--clay-deep);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 24px;
    }
    .contact-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      min-height: 52px;
      padding: 13px 16px;
      border: 1px solid var(--contact-line);
      border-radius: 14px;
      background: var(--contact-bg);
      font-size: 14px;
      font-weight: 600;
      transition: background .2s ease, border-color .2s ease;
    }
    .contact-link:hover {
      background: var(--contact-hover);
      border-color: var(--contact-accent);
    }
    .contact-phone { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 4px; }
    .contact-label { font-size: 12px; font-weight: 500; color: var(--contact-accent); }
    .contact-value { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
    .nav-dialog .contact-links { color: var(--green-deep); }

    .slavyane-brand-flower {
      width: 100%;
      max-width: 620px;
      min-width: 0;
      margin-inline: auto;
      aspect-ratio: 1;
    }
    .slavyane-brand-flower svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
      filter: drop-shadow(0 10px 10px rgba(75, 45, 15, .09));
    }

    .slavyane-brand-flower .petal {
      cursor: default;
      transition: filter .24s ease;
    }
    .slavyane-brand-flower .petal:hover,
    .slavyane-brand-flower .petal:focus-visible {
      filter: brightness(1.08);
    }
    .slavyane-brand-flower .petal.is-link { cursor: pointer; }

    .slavyane-brand-flower .shape { stroke: #d1a15b; stroke-width: 2.1; stroke-linejoin: round; }
    .slavyane-brand-flower .highlight { opacity: .10; pointer-events: none; mix-blend-mode: screen; }
    .slavyane-brand-flower .depth { opacity: .42; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .rim { opacity: .30; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .grain { opacity: .56; pointer-events: none; mix-blend-mode: overlay; }
    .slavyane-brand-flower .cloud { opacity: .42; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .velvet { opacity: .58; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .spot { opacity: .022; pointer-events: none; mix-blend-mode: screen; }
    .slavyane-brand-flower .innerShade { opacity: .28; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .leafLift { opacity: .07; pointer-events: none; mix-blend-mode: screen; }
    .slavyane-brand-flower .fiber { opacity: .58; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .pore { opacity: .30; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .vein { fill: none; stroke: rgba(255,255,255,.48); stroke-width: 1.9; stroke-linecap: round; pointer-events: none; }
    .slavyane-brand-flower .vein-soft { fill: none; stroke: rgba(71,96,45,.32); stroke-width: 1.25; stroke-linecap: round; pointer-events: none; }
    .slavyane-brand-flower .vein-mesh { fill: none; stroke: rgba(235,247,214,.42); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
    .slavyane-brand-flower .leaf-edge { fill: none; stroke: rgba(236,246,212,.44); stroke-width: 1.7; pointer-events: none; }

    .slavyane-brand-flower .threadWarm,
    .slavyane-brand-flower .threadCream,
    .slavyane-brand-flower .threadGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .threadWarm { stroke: rgba(255,244,224,.74); }
    .slavyane-brand-flower .threadCream { stroke: rgba(255,251,241,.72); }
    .slavyane-brand-flower .threadGreen { stroke: rgba(236,247,216,.74); }
    .slavyane-brand-flower .threadDeepWarm,
    .slavyane-brand-flower .threadDeepCream,
    .slavyane-brand-flower .threadDeepGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .threadDeepWarm { stroke: rgba(127,60,28,.36); }
    .slavyane-brand-flower .threadDeepCream { stroke: rgba(132,108,64,.30); }
    .slavyane-brand-flower .threadDeepGreen { stroke: rgba(56,84,34,.34); }
    .slavyane-brand-flower .meshWarm,
    .slavyane-brand-flower .meshCream,
    .slavyane-brand-flower .meshGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .meshWarm { stroke: rgba(255,236,214,.60); }
    .slavyane-brand-flower .meshCream { stroke: rgba(255,249,238,.56); }
    .slavyane-brand-flower .meshGreen { stroke: rgba(225,241,201,.58); }
    .slavyane-brand-flower .meshDeepWarm,
    .slavyane-brand-flower .meshDeepCream,
    .slavyane-brand-flower .meshDeepGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .meshDeepWarm { stroke: rgba(111,50,24,.30); }
    .slavyane-brand-flower .meshDeepCream { stroke: rgba(118,95,57,.24); }
    .slavyane-brand-flower .meshDeepGreen { stroke: rgba(49,78,32,.28); }
    .slavyane-brand-flower .threadSoftDark { fill: none; stroke: rgba(88,57,26,.24); stroke-width: 1.1; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .threadSoftLight { fill: none; stroke: rgba(255,248,236,.42); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .material-fiber-light { fill: none; stroke: rgba(255,244,222,.42); stroke-width: 1.55; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .material-fiber-dark { fill: none; stroke: rgba(86,39,18,.24); stroke-width: 1.18; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .material-fiber-cream { fill: none; stroke: rgba(255,252,242,.45); stroke-width: 1.55; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .material-fiber-cream-dark { fill: none; stroke: rgba(118,92,52,.22); stroke-width: 1.18; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .green-vein-main { fill: none; stroke: rgba(235,248,215,.80); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
    .slavyane-brand-flower .green-vein-deep { fill: none; stroke: rgba(39,66,24,.52); stroke-width: 1.3; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .slavyane-brand-flower .green-vein-mesh { fill: none; stroke: rgba(231,244,207,.52); stroke-width: 1.1; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }

    .slavyane-brand-flower .textureWarmLight,
    .slavyane-brand-flower .textureWarmDark,
    .slavyane-brand-flower .textureWarmMesh,
    .slavyane-brand-flower .textureWarmThread,
    .slavyane-brand-flower .textureCreamLight,
    .slavyane-brand-flower .textureCreamDark,
    .slavyane-brand-flower .textureCreamMesh,
    .slavyane-brand-flower .textureCreamThread,
    .slavyane-brand-flower .textureGreenLight,
    .slavyane-brand-flower .textureGreenDark,
    .slavyane-brand-flower .textureGreenMesh,
    .slavyane-brand-flower .textureGreenThread,
    .slavyane-brand-flower .textureGreenNet { fill: none; stroke-linecap: round; pointer-events: none; }
    .slavyane-brand-flower .textureWarmLight { stroke: rgba(255,244,222,.58); stroke-width: 1.75; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .textureWarmDark { stroke: rgba(101,50,26,.30); stroke-width: 1.25; mix-blend-mode: multiply; }
    .slavyane-brand-flower .textureWarmMesh { stroke: rgba(255,233,205,.42); stroke-width: 1.25; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .textureWarmThread { stroke: rgba(114,55,28,.24); stroke-width: 1.1; mix-blend-mode: multiply; }
    .slavyane-brand-flower .textureCreamLight { stroke: rgba(255,251,241,.60); stroke-width: 1.75; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .textureCreamDark { stroke: rgba(121,97,60,.26); stroke-width: 1.2; mix-blend-mode: multiply; }
    .slavyane-brand-flower .textureCreamMesh { stroke: rgba(255,247,231,.42); stroke-width: 1.2; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .textureCreamThread { stroke: rgba(124,101,63,.22); stroke-width: 1.08; mix-blend-mode: multiply; }
    .slavyane-brand-flower .textureGreenLight { stroke: rgba(231,245,210,.54); stroke-width: 1.55; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .textureGreenDark { stroke: rgba(47,77,32,.32); stroke-width: 1.18; mix-blend-mode: multiply; }
    .slavyane-brand-flower .textureGreenMesh { stroke: rgba(225,241,201,.42); stroke-width: 1.2; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .textureGreenThread { stroke: rgba(50,79,33,.24); stroke-width: 1.08; mix-blend-mode: multiply; }
    .slavyane-brand-flower .textureGreenNet { stroke: rgba(237,248,221,.44); stroke-width: 1.18; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .raster-texture { pointer-events: none; opacity: 1; mix-blend-mode: normal; filter: contrast(1.28) saturate(1.08); }
    .slavyane-brand-flower .raster-texture-green { pointer-events: none; opacity: 1; mix-blend-mode: normal; filter: contrast(1.32) saturate(1.08); }
    .slavyane-brand-flower .raster-texture-cream { pointer-events: none; opacity: 1; mix-blend-mode: normal; filter: contrast(1.22) saturate(1.04); }
    .slavyane-brand-flower .centerTexture { opacity: .30; pointer-events: none; mix-blend-mode: overlay; }
    .slavyane-brand-flower .centerWarm2 { opacity: .26; pointer-events: none; mix-blend-mode: soft-light; }

    .slavyane-brand-flower .petal-nav { pointer-events: none; font-family: Georgia, "Times New Roman", serif; text-anchor: middle; }
    .slavyane-brand-flower .petal-nav .title { font-size: 15px; font-weight: 700; letter-spacing: .22px; }
    .slavyane-brand-flower .petal-nav .title.smalltitle { font-size: 13px; }
    .slavyane-brand-flower .petal-nav text { fill: currentColor; }
    .slavyane-brand-flower .petal-nav .icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    .slavyane-brand-flower .petal-nav .arrow-circle { fill: rgba(255,255,255,.05); stroke: currentColor; stroke-width: 1.15; }
    .slavyane-brand-flower .petal-nav .arrow { font: 700 12.5px Arial, sans-serif; dominant-baseline: middle; }
    .slavyane-brand-flower .petal-nav.light { color: #fff0d1; }
    .slavyane-brand-flower .petal-nav.dark { color: #4d321c; }
    .slavyane-brand-flower .petal-nav.green-dark { color: #284b38; }
    .slavyane-brand-flower .center-mark { fill: none; stroke: #9a6335; stroke-width: 1.5; stroke-linecap: round; opacity: .7; }
    .slavyane-brand-flower .disc { fill: url(#centerGrad); stroke: #bf8133; stroke-width: 4; filter: url(#discShadow); }
    .slavyane-brand-flower .disc-inner { fill: url(#centerInnerGrad); stroke: rgba(255,255,255,.62); stroke-width: 1.7; }
    .slavyane-brand-flower .disc-ring { fill: none; stroke: rgba(255,255,255,.50); stroke-width: 2; }
    .slavyane-brand-flower .disc-ring-2 { fill: none; stroke: rgba(139,88,28,.20); stroke-width: 1.4; }
    .slavyane-brand-flower .disc-ring-3 { fill: none; stroke: rgba(202,160,96,.40); stroke-width: 3; }
    .slavyane-brand-flower .center-shine { fill: url(#centerShine); opacity: .64; pointer-events: none; }
    .slavyane-brand-flower .center-vignette { fill: url(#centerVignette); opacity: .42; pointer-events: none; }
    .slavyane-brand-flower .center-grain { opacity: .28; pointer-events: none; mix-blend-mode: overlay; }
    .slavyane-brand-flower .center-warm { opacity: .36; pointer-events: none; mix-blend-mode: soft-light; }
    .slavyane-brand-flower .small { font: 700 11.3px Arial, sans-serif; letter-spacing: 3.35px; fill: #b0503a; text-anchor: middle; }
    .slavyane-brand-flower .brand { font: 700 31px "Bookman Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; letter-spacing: .5px; fill: #274a38; text-anchor: middle; }

    /* ============================================================
       МАССАЖНЫЙ ЦВЕТОК (копия V73, тёплая палитра, изолированный CSS)
       Все id внутри SVG имеют префикс m-, поэтому url(#…) указывают на m-*.
       ============================================================ */
    .massage-flower .petal {
      cursor: default;
      transform-box: fill-box;
      transform-origin: center;
      transition: transform .24s ease, filter .24s ease;
    }
    .massage-flower .petal:hover,
    .massage-flower .petal:focus-visible {
      transform: translateY(-4px) scale(1.018);
      filter: brightness(1.04);
      outline: none !important;
    }
    .massage-flower .petal:focus {
      outline: none !important;
    }
    .massage-flower .shape { stroke: none !important; stroke-width: 0 !important; }
    .massage-flower .petal-nav:hover,
    .massage-flower .petal-nav:focus {
      outline: none !important;
    }
    .massage-flower .highlight { opacity: .10; pointer-events: none; mix-blend-mode: screen; }
    .massage-flower .depth { opacity: .42; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .rim { opacity: .30; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .grain { opacity: .56; pointer-events: none; mix-blend-mode: overlay; }
    .massage-flower .cloud { opacity: .42; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .velvet { opacity: .58; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .spot { opacity: .022; pointer-events: none; mix-blend-mode: screen; }
    .massage-flower .innerShade { opacity: .28; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .leafLift { opacity: .07; pointer-events: none; mix-blend-mode: screen; }
    .massage-flower .fiber { opacity: .58; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .pore { opacity: .30; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .vein { fill: none; stroke: rgba(255,255,255,.48); stroke-width: 1.9; stroke-linecap: round; pointer-events: none; }
    .massage-flower .vein-soft { fill: none; stroke: rgba(71,96,45,.32); stroke-width: 1.25; stroke-linecap: round; pointer-events: none; }
    .massage-flower .vein-mesh { fill: none; stroke: rgba(235,247,214,.42); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; }
    .massage-flower .leaf-edge { fill: none; stroke: rgba(236,246,212,.44); stroke-width: 1.7; pointer-events: none; }

    .massage-flower .threadWarm,
    .massage-flower .threadCream,
    .massage-flower .threadGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .threadWarm { stroke: rgba(255,244,224,.74); }
    .massage-flower .threadCream { stroke: rgba(255,251,241,.72); }
    .massage-flower .threadGreen { stroke: rgba(236,247,216,.74); }
    .massage-flower .threadDeepWarm,
    .massage-flower .threadDeepCream,
    .massage-flower .threadDeepGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .threadDeepWarm { stroke: rgba(127,60,28,.36); }
    .massage-flower .threadDeepCream { stroke: rgba(132,108,64,.30); }
    .massage-flower .threadDeepGreen { stroke: rgba(56,84,34,.34); }
    .massage-flower .meshWarm,
    .massage-flower .meshCream,
    .massage-flower .meshGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .meshWarm { stroke: rgba(255,236,214,.60); }
    .massage-flower .meshCream { stroke: rgba(255,249,238,.56); }
    .massage-flower .meshGreen { stroke: rgba(225,241,201,.58); }
    .massage-flower .meshDeepWarm,
    .massage-flower .meshDeepCream,
    .massage-flower .meshDeepGreen { fill: none; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .meshDeepWarm { stroke: rgba(111,50,24,.30); }
    .massage-flower .meshDeepCream { stroke: rgba(118,95,57,.24); }
    .massage-flower .meshDeepGreen { stroke: rgba(49,78,32,.28); }
    .massage-flower .threadSoftDark { fill: none; stroke: rgba(88,57,26,.24); stroke-width: 1.1; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .threadSoftLight { fill: none; stroke: rgba(255,248,236,.42); stroke-width: 1.2; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .material-fiber-light { fill: none; stroke: rgba(255,244,222,.42); stroke-width: 1.55; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .material-fiber-dark { fill: none; stroke: rgba(86,39,18,.24); stroke-width: 1.18; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .material-fiber-cream { fill: none; stroke: rgba(255,252,242,.45); stroke-width: 1.55; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .material-fiber-cream-dark { fill: none; stroke: rgba(118,92,52,.22); stroke-width: 1.18; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .green-vein-main { fill: none; stroke: rgba(235,248,215,.80); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
    .massage-flower .green-vein-deep { fill: none; stroke: rgba(39,66,24,.52); stroke-width: 1.3; stroke-linecap: round; pointer-events: none; mix-blend-mode: multiply; }
    .massage-flower .green-vein-mesh { fill: none; stroke: rgba(231,244,207,.52); stroke-width: 1.1; stroke-linecap: round; pointer-events: none; mix-blend-mode: soft-light; }

    .massage-flower .textureWarmLight,
    .massage-flower .textureWarmDark,
    .massage-flower .textureWarmMesh,
    .massage-flower .textureWarmThread,
    .massage-flower .textureCreamLight,
    .massage-flower .textureCreamDark,
    .massage-flower .textureCreamMesh,
    .massage-flower .textureCreamThread,
    .massage-flower .textureGreenLight,
    .massage-flower .textureGreenDark,
    .massage-flower .textureGreenMesh,
    .massage-flower .textureGreenThread,
    .massage-flower .textureGreenNet { fill: none; stroke-linecap: round; pointer-events: none; }
    .massage-flower .textureWarmLight { stroke: rgba(255,244,222,.58); stroke-width: 1.75; mix-blend-mode: soft-light; }
    .massage-flower .textureWarmDark { stroke: rgba(101,50,26,.30); stroke-width: 1.25; mix-blend-mode: multiply; }
    .massage-flower .textureWarmMesh { stroke: rgba(255,233,205,.42); stroke-width: 1.25; mix-blend-mode: soft-light; }
    .massage-flower .textureWarmThread { stroke: rgba(114,55,28,.24); stroke-width: 1.1; mix-blend-mode: multiply; }
    .massage-flower .textureCreamLight { stroke: rgba(255,251,241,.60); stroke-width: 1.75; mix-blend-mode: soft-light; }
    .massage-flower .textureCreamDark { stroke: rgba(121,97,60,.26); stroke-width: 1.2; mix-blend-mode: multiply; }
    .massage-flower .textureCreamMesh { stroke: rgba(255,247,231,.42); stroke-width: 1.2; mix-blend-mode: soft-light; }
    .massage-flower .textureCreamThread { stroke: rgba(124,101,63,.22); stroke-width: 1.08; mix-blend-mode: multiply; }
    .massage-flower .textureGreenLight { stroke: rgba(231,245,210,.54); stroke-width: 1.55; mix-blend-mode: soft-light; }
    .massage-flower .textureGreenDark { stroke: rgba(47,77,32,.32); stroke-width: 1.18; mix-blend-mode: multiply; }
    .massage-flower .textureGreenMesh { stroke: rgba(225,241,201,.42); stroke-width: 1.2; mix-blend-mode: soft-light; }
    .massage-flower .textureGreenThread { stroke: rgba(50,79,33,.24); stroke-width: 1.08; mix-blend-mode: multiply; }
    .massage-flower .textureGreenNet { stroke: rgba(237,248,221,.44); stroke-width: 1.18; mix-blend-mode: soft-light; }
    .massage-flower .raster-texture { pointer-events: none; opacity: 1; mix-blend-mode: normal; filter: contrast(1.28) saturate(1.08); }
    .massage-flower .raster-texture-green { pointer-events: none; opacity: 1; mix-blend-mode: normal; filter: contrast(1.32) saturate(1.08); }
    .massage-flower .raster-texture-cream { pointer-events: none; opacity: 1; mix-blend-mode: normal; filter: contrast(1.22) saturate(1.04); }
    .massage-flower .centerTexture { opacity: .30; pointer-events: none; mix-blend-mode: overlay; }
    .massage-flower .centerWarm2 { opacity: .26; pointer-events: none; mix-blend-mode: soft-light; }

    .massage-flower .petal-nav { pointer-events: none; font-family: Georgia, "Times New Roman", serif; text-anchor: middle; }
    .massage-flower .petal-nav .title { font-size: 15px; font-weight: 700; letter-spacing: .12px; text-transform: uppercase; }
    .massage-flower .petal-nav .title.smalltitle { font-size: 13px; letter-spacing: .1px; }
    .massage-flower .petal-nav text { fill: currentColor; }
    .massage-flower .petal-nav.light { color: #fff3dd; }
    .massage-flower .petal-nav.dark { color: #5a3520; }
    .massage-flower .disc { fill: url(#m-centerGrad); stroke: #c07a2c; stroke-width: 4; filter: url(#m-discShadow); }
    .massage-flower .disc-inner { fill: url(#m-centerInnerGrad); stroke: rgba(255,255,255,.62); stroke-width: 1.7; }
    .massage-flower .disc-ring { fill: none; stroke: rgba(255,255,255,.50); stroke-width: 2; }
    .massage-flower .disc-ring-2 { fill: none; stroke: rgba(139,88,28,.20); stroke-width: 1.4; }
    .massage-flower .disc-ring-3 { fill: none; stroke: rgba(202,160,96,.40); stroke-width: 3; }
    .massage-flower .center-shine { fill: url(#m-centerShine); opacity: .64; pointer-events: none; }
    .massage-flower .center-vignette { fill: url(#m-centerVignette); opacity: .42; pointer-events: none; }
    .massage-flower .center-grain { opacity: .28; pointer-events: none; mix-blend-mode: overlay; }
    .massage-flower .center-warm { opacity: .36; pointer-events: none; mix-blend-mode: soft-light; }
    .massage-flower .small { font: 700 11.3px Arial, sans-serif; letter-spacing: 3.35px; fill: #b0503a; text-anchor: middle; }
    .massage-flower .brand { font: 700 27px "Bookman Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; letter-spacing: 2.5px; fill: #6e4526; text-anchor: middle; }

    /* ============================================================
       HOVER ПОДПИСЕЙ: масштабируется только внутренняя группа
       .petal-nav-inner, внешняя .petal-nav сохраняет свой
       transform="translate(...)" — текст не улетает с лепестка
       ============================================================ */
    .slavyane-brand-flower .petal-nav-inner,
    .massage-flower .petal-nav-inner {
      transform-box: fill-box;
      transform-origin: center;
      transition: transform .2s ease, filter .2s ease, opacity .2s ease;
    }
    .slavyane-brand-flower .petal-nav.is-hover .petal-nav-inner,
    .slavyane-brand-flower .petal-nav.is-active .petal-nav-inner {
      filter: brightness(1.12);
    }
    .massage-flower .petal-nav.is-hover .petal-nav-inner,
    .massage-flower .petal-nav.is-active .petal-nav-inner {
      transform: scale(1.14);
      filter: brightness(1.18);
      opacity: 1;
    }
    /* Будущие разделы (Баня, Актив, Отзывы) — приглушены, без стрелки перехода */
    .slavyane-brand-flower .petal-nav.is-future { opacity: .6; }

    /* ============================================================
       О ВЯЧЕСЛАВЕ — фото + рассказ от первого лица + сертификаты
       ============================================================ */
    .about-master {
      padding-block: clamp(36px, 4.5vw, 58px);
      background:
        radial-gradient(620px 420px at 8% 12%, rgba(238, 179, 79, .16), transparent 62%),
        radial-gradient(560px 380px at 96% 70%, rgba(111, 139, 116, .14), transparent 64%),
        var(--cream);
    }
    .am-grid {
      display: grid;
      grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
      gap: clamp(32px, 4.5vw, 64px);
      align-items: start;
    }

    /* Фото: тёплое паспарту в палитре страницы + мягкое солнечное свечение */
    .am-photo {
      position: sticky;
      top: calc(var(--header-h) + 16px);
      z-index: 0;
      margin: 0;
    }
    .am-photo::before {
      content: "";
      position: absolute;
      inset: -26px;
      z-index: -1;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(244, 213, 148, .42), rgba(244, 213, 148, .14) 60%, rgba(244, 213, 148, 0));
      pointer-events: none;
    }
    .am-photo-frame {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      aspect-ratio: 4 / 5;
      padding: 8px;
      background: linear-gradient(160deg, #fdf8ec 0%, #f1e4c8 100%);
      border: 1px solid rgba(178, 90, 56, .16);
      box-shadow: 0 18px 44px rgba(43, 38, 30, .14);
    }
    .am-photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 20%;
      border-radius: 21px;
    }

    .am-body .h2 { margin: 10px 0 14px; }
    .am-text p {
      font-size: 15.5px;
      line-height: 1.62;
      color: var(--ink-soft);
      max-width: 620px;
    }
    .am-text p + p { margin-top: 10px; }
    .am-text .am-highlight {
      color: var(--ink);
      background: rgba(244, 213, 148, .28);
      border-left: 3px solid var(--clay-soft);
      border-radius: 0 14px 14px 0;
      padding: 11px 16px;
    }

    .am-points {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 16px;
    }
    .am-point {
      background: rgba(255, 253, 247, .7);
      border: 1px solid var(--line);
      border-left: 3px solid rgba(207, 131, 87, .55);
      border-radius: 14px;
      padding: 8px 11px 9px;
    }
    .am-point h3 {
      font-size: .94rem;
      line-height: 1.25;
      color: var(--green-deep);
    }
    .am-point p {
      margin-top: 2px;
      font-size: 13px;
      line-height: 1.4;
      color: var(--ink-soft);
    }

    /* Сертификаты */
    .am-certs {
      margin-top: clamp(28px, 3.4vw, 40px);
      padding-top: clamp(20px, 2.4vw, 26px);
      border-top: 1px solid var(--line);
    }
    .am-certs-title {
      font-size: clamp(1.2rem, 2vw, 1.4rem);
      color: var(--green-deep);
      margin-bottom: 14px;
    }
    .am-certs-grid {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }
    .am-cert[hidden] { display: none; }
    .am-cert-btn {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      color: inherit;
      text-align: center;
      cursor: zoom-in;
    }
    .am-cert-thumb {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 6 / 5;
      background: rgba(255, 253, 247, .8);
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .am-cert-thumb img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: calc(100% - 16px);
      max-height: calc(100% - 16px);
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 3px;
      box-shadow: 0 4px 12px rgba(43, 38, 30, .14);
    }
    .am-cert-btn:hover .am-cert-thumb,
    .am-cert-btn:focus-visible .am-cert-thumb {
      transform: translateY(-3px);
      border-color: rgba(178, 90, 56, .35);
      box-shadow: var(--shadow-soft);
    }
    .am-cert-btn:focus-visible { outline: none; }
    .am-cert-caption {
      font-size: 13.5px;
      line-height: 1.35;
      color: var(--ink-soft);
      padding-inline: 2px;
      text-align: center;
    }
    .am-certs-more {
      margin-top: 14px;
      text-align: center;
    }
    .am-certs-more .btn-ghost {
      font-weight: 500;
      color: var(--ink-soft);
    }

    /* Lightbox */
    .am-lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 4vw, 48px);
      background: rgba(15, 22, 17, .86);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .am-lightbox[hidden] { display: none; }
    .am-lb-figure {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      max-width: 100%;
      max-height: 100%;
    }
    .am-lb-img {
      max-width: min(1100px, 100%);
      max-height: calc(100vh - 120px);
      max-height: calc(100dvh - 120px);
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    }
    .am-lb-caption {
      font-size: 14.5px;
      color: var(--on-dark);
      text-align: center;
    }
    .am-lb-close {
      position: absolute;
      top: clamp(10px, 2vw, 20px);
      right: clamp(10px, 2vw, 20px);
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(246, 239, 224, .35);
      background: rgba(21, 32, 25, .6);
      color: var(--on-dark);
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease;
    }
    .am-lb-close:hover { background: rgba(21, 32, 25, .9); border-color: var(--sun-soft); }

    @media (max-width: 1080px) {
      .am-points { grid-template-columns: 1fr; gap: 8px; }
    }
    @media (max-width: 980px) {
      .am-certs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (max-width: 860px) {
      .am-grid { grid-template-columns: 1fr; gap: 28px; }
      .am-photo { position: relative; top: auto; width: min(520px, 100%); margin-inline: auto; }
      .am-photo-frame { aspect-ratio: 1294 / 1216; }
      .am-photo-frame img { object-position: 50% 15%; }
    }
    @media (max-width: 600px) {
      .am-photo::before { inset: -12px; }
      .am-photo-frame { border-radius: 22px; padding: 6px; }
      .am-photo-frame img { border-radius: 17px; }
      .am-text p { font-size: 15px; }
      .am-certs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      .am-lb-img { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
    }

    /* (секция «Атмосфера» удалена — содержимое распределено между «О месте» и финальным CTA) */

    /* ============================================================
       ЗАПИСЬ НА МАССАЖ: выбор слота и форма (frontend-этап)
       Секция вынесена из потока страницы в <dialog id="booking-dialog">.
       ============================================================ */
    .booking {
      padding-block: clamp(18px, 2.2vw, 26px);
      background:
        radial-gradient(720px 420px at 88% 8%, rgba(237, 169, 63, .12), transparent 65%),
        var(--cream);
    }
    .booking-dialog {
      width: min(1020px, calc(100% - 40px));
      max-width: calc(100% - 40px);
      max-height: calc(100vh - 48px);
      max-height: calc(100dvh - 48px);
      margin: auto;
      padding-inline: clamp(16px, 3vw, 30px);
      overflow-y: auto;
      border: 1px solid rgba(178, 90, 56, .22);
      border-radius: 24px;
      color: var(--ink);
      box-shadow: 0 24px 80px rgba(43, 38, 30, .24);
    }
    .booking-dialog::backdrop { background: rgba(25, 37, 28, .62); }
    .booking-dialog .booking-head { padding-right: 44px; }
    .booking-head { max-width: 640px; }
    .booking-head .h2 { margin: 6px 0 8px; }
    .booking-grid {
      margin-top: clamp(12px, 1.6vw, 16px);
      margin-inline: auto;
      max-width: 980px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: clamp(14px, 2vw, 22px);
      align-items: start;
    }
    .booking-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: clamp(14px, 1.7vw, 18px);
      background: rgba(255, 253, 247, .78);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }
    .booking-field { min-width: 0; margin: 0; padding: 0; border: 0; }
    .booking-label {
      display: block;
      margin-bottom: 8px;
      padding: 0;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--green-mid);
    }
    .booking-optional {
      font-weight: 500;
      letter-spacing: .02em;
      text-transform: none;
      color: var(--ink-soft);
    }
    .booking-days {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .booking-times { display: flex; flex-wrap: wrap; gap: 8px; }
    .booking-slot {
      min-width: 0;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      min-height: 46px;
      padding: 8px 14px;
      font: inherit;
      font-weight: 600;
      font-size: 15px;
      color: var(--ink);
      background: rgba(255, 253, 247, .7);
      border: 1px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
    }
    .booking-slot:hover {
      transform: translateY(-2px);
      border-color: var(--clay);
      color: var(--clay-deep);
      box-shadow: 0 8px 20px rgba(43, 38, 30, .10);
    }
    .booking-slot.is-selected {
      background: var(--clay);
      border-color: var(--clay);
      color: #fdf6ea;
      box-shadow: 0 10px 24px rgba(178, 90, 56, .30);
    }
    .booking-slot-week {
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .75;
    }
    .booking-slot-date {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 16px;
      font-variant-numeric: tabular-nums;
    }
    .booking-times .booking-slot { flex: 1 1 96px; font-size: 16px; font-variant-numeric: tabular-nums; }
    .booking-hint { font-size: 13.5px; font-style: italic; color: var(--ink-soft); }
    .booking [hidden] { display: none !important; }
    .booking-input {
      width: 100%;
      padding: 10px 14px;
      font: inherit;
      font-size: 15px;
      color: var(--ink);
      background: rgba(255, 253, 247, .85);
      border: 1px solid var(--line);
      border-radius: 14px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .booking-input::placeholder { color: rgba(95, 88, 74, .55); }
    .booking-input:focus { border-color: var(--clay); }
    .booking-input.has-error { border-color: var(--clay-deep); }
    textarea.booking-input { min-height: 84px; resize: vertical; }
    .booking-contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .booking-radio { position: relative; }
    .booking-radio input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    .booking-radio span {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 7px 16px;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-soft);
      background: rgba(255, 253, 247, .7);
      border: 1px solid var(--line);
      border-radius: 999px;
      transition: border-color .18s ease, background .18s ease, color .18s ease;
    }
    .booking-radio:hover span { border-color: var(--clay); color: var(--clay-deep); }
    .booking-radio input:checked + span {
      background: rgba(178, 90, 56, .12);
      border-color: var(--clay);
      color: var(--clay-deep);
    }
    .booking-radio input:focus-visible + span {
      outline: 2px solid var(--clay);
      outline-offset: 3px;
      border-radius: 999px;
    }
    .booking-error {
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--clay-deep);
    }
    .booking-field[aria-invalid="true"] .booking-slot { border-color: rgba(143, 68, 40, .55); }
    .booking-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--ink);
      cursor: pointer;
    }
    .booking-check input {
      flex: none;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      accent-color: var(--clay);
    }
    .booking-note {
      margin-top: 6px;
      font-size: 12.5px;
      font-style: italic;
      line-height: 1.45;
      color: var(--ink-soft);
    }
    .booking-check a {
      color: var(--clay-deep);
      text-decoration: underline;
      text-decoration-color: rgba(178, 90, 56, .4);
      text-underline-offset: 2px;
    }
    .booking-check a:hover { color: var(--clay); }
    .booking-policy {
      align-self: flex-start;
      margin: 6px 0 0 28px;
      font-size: 13px;
      color: var(--ink-soft);
      text-decoration: underline;
      text-decoration-color: rgba(178, 90, 56, .35);
      text-underline-offset: 3px;
      transition: color .2s ease;
    }
    .booking-policy:hover { color: var(--clay); }
    .booking-submit { width: 100%; padding: 13px 30px; }
    .booking-submit[disabled] { opacity: .55; cursor: default; }
    .booking-success {
      margin: clamp(12px, 1.6vw, 16px) auto 0;
      max-width: 620px;
      align-items: center;
      text-align: center;
    }
    .booking-success-title {
      font-size: clamp(1.5rem, 3vw, 1.9rem);
      color: var(--green-deep);
    }
    .booking-success-when {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.12rem, 2.4vw, 1.32rem);
      font-weight: 700;
      color: var(--clay-deep);
    }
    .booking-success-note { font-size: 15px; color: var(--ink-soft); }
    .booking-reminder {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .booking-reminder[hidden],
    .booking-reminder-btn[hidden] { display: none; }
    .booking-reminder-text { font-size: 14px; color: var(--ink-soft); }
    .booking-reminder-btn[disabled] {
      opacity: .55;
      cursor: default;
      pointer-events: none;
    }
    .booking-empty-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 6px;
    }

    @media (max-width: 980px) {
      .booking-grid { grid-template-columns: 1fr; max-width: 560px; }
    }
    @media (max-width: 600px) {
      /* На mobile диалог занимает почти весь экран и скроллится внутри */
      .booking-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        padding-inline: 14px;
        border-radius: 20px;
      }
      .booking-slot { min-height: 52px; font-size: 16px; }
      .booking-slot-date { font-size: 17px; }
      .booking-times .booking-slot { flex-basis: calc(50% - 5px); }
      .booking-input { font-size: 16px; }
    }

    /* ============================================================
       ФИНАЛЬНЫЙ CTA: запись · цена · контакты · маршрут
       ============================================================ */
    .final-cta {
      padding-block: clamp(20px, 3.5vw, 40px);
      background-image:
        radial-gradient(720px 460px at 50% 0%, rgba(237, 169, 63, .10), transparent 65%),
        linear-gradient(180deg, rgba(29, 48, 38, .78) 0%, rgba(25, 43, 34, .88) 100%),
        url("../images/place-parking-tower.png");
      background-size: cover;
      background-position: center, center, center 30%;
      color: var(--on-dark);
      text-align: center;
    }
    .fc-inner {
      max-width: 1040px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .fc-top {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: clamp(20px, 3vw, 40px);
      align-items: center;
      text-align: left;
    }
    .fc-top-main .eyebrow { justify-content: flex-start; }
    .fc-top-side {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .price {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      font-size: clamp(2.6rem, 7vw, 4.2rem);
      color: var(--sun);
      line-height: 1;
    }
    .price-sub {
      margin-top: 4px;
      font-size: 14.5px;
      color: var(--on-dark-soft);
    }
    .final-cta .btn-primary { margin-top: 12px; }
    .contact-icon { display: inline-flex; flex: none; color: var(--contact-accent); }
    .contact-arrow { margin-left: auto; }
    .contact-pending {
      justify-content: flex-start;
      opacity: .6;
      cursor: default;
      pointer-events: none;
    }
    .fc-contacts {
      width: 100%;
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      text-align: left;
    }
    .fc-card {
      min-width: 0;
      padding: clamp(14px, 1.8vw, 18px);
      border: 1px solid rgba(246, 239, 224, .2);
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(246, 239, 224, .07), rgba(246, 239, 224, .02));
      box-shadow: 0 14px 36px rgba(9, 18, 12, .12);
    }
    .fc-card-title { font-size: 1.5rem; color: var(--on-dark); }
    .fc-card-text { margin-top: 10px; font-size: 14.5px; color: rgba(246, 239, 224, .78); }
    .fc-card .contact-links {
      --contact-line: rgba(246, 239, 224, .22);
      --contact-bg: rgba(246, 239, 224, .04);
      --contact-hover: rgba(246, 239, 224, .1);
      --contact-accent: var(--sun-soft);
      margin-top: 10px;
    }
    .fc-coords { margin-top: 8px; font-size: 16px; font-variant-numeric: tabular-nums; }
    .fc-coords span { display: block; margin-bottom: 4px; font-size: 12px; color: var(--sun-soft); }
    .fc-route-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; }
    .fc-route-actions .btn { padding: 13px 18px; font-size: 14px; }
    .fc-route-actions .place-copy { min-height: 44px; color: var(--on-dark); text-decoration-color: rgba(244, 213, 148, .5); }
    .fc-route-actions .place-copy:hover,
    .fc-route-actions .place-copy.is-copied { color: var(--sun-soft); }
    .final-cta :focus-visible { outline-color: var(--sun-soft); }

    /* ============================================================
       ПОДВАЛ
       ============================================================ */
    .footer {
      background: #15261d;
      color: rgba(246, 239, 224, .66);
      padding: 40px 0;
    }
    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      align-items: center;
      justify-content: space-between;
    }
    .footer .brand { color: var(--on-dark); }
    .footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
    .footer-nav a {
      font-size: 12.5px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: rgba(246, 239, 224, .6);
      transition: color .2s ease;
    }
    .footer-nav a:hover { color: var(--sun-soft); }
    .footer small { font-size: 12.5px; }
    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 18px;
      width: 100%;
    }
    .footer-legal a {
      font-size: 12px;
      color: rgba(246, 239, 224, .45);
      text-decoration: underline;
      text-decoration-color: rgba(246, 239, 224, .2);
      text-underline-offset: 3px;
      transition: color .2s ease;
    }
    .footer-legal a:hover { color: var(--sun-soft); }

    /* ---------- Юридические страницы (privacy.php / consent.php) ---------- */
    .legal { padding-block: clamp(44px, 6vw, 72px); }
    .legal-inner { max-width: 780px; }
    .legal-back {
      display: inline-block;
      margin: 26px 0 34px;
      font-size: 14px;
      font-weight: 600;
      color: var(--clay-deep);
      text-decoration: underline;
      text-decoration-color: rgba(178, 90, 56, .35);
      text-underline-offset: 3px;
      transition: color .2s ease;
    }
    .legal-back:first-child { margin-top: 0; }
    .legal-back:hover { color: var(--clay); }
    .legal-rev {
      margin: 0 0 26px;
      font-size: 14px;
      font-style: italic;
      color: var(--ink-soft);
    }
    .legal-doc h2 {
      margin: 30px 0 8px;
      font-size: 1.15rem;
      color: var(--green-deep);
    }
    .legal-doc p {
      margin-bottom: 12px;
      font-size: 15.5px;
      color: var(--ink);
    }
    .legal-doc a {
      color: var(--clay-deep);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .legal-doc a:hover { color: var(--clay); }

    /* ============================================================
       АДАПТИВНОСТЬ
       ============================================================ */
    @media (max-width: 980px) {
      /* Массажный блок: одна колонка — intro → principles → flower → interaction */
      .massage-grid {
        grid-template-areas:
          "intro"
          "principles"
          "flower"
          "interaction";
        grid-template-columns: 1fr;
        row-gap: 28px;
        column-gap: 0;
      }
      .massage-intro { max-width: 640px; margin-inline: auto; text-align: center; }
      .massage-intro .lead { margin-inline: auto; }
      .massage-principles { margin-inline: auto; text-align: left; width: 100%; max-width: 520px; }
      .massage-flower { width: min(630px, 100%); max-width: 100%; margin-inline: auto; margin-top: 0; margin-bottom: 0; transform: none; }
      .massage-interaction { width: 100%; max-width: 440px; margin-inline: auto; align-items: center; margin-top: 0; }
      .massage-actions .hero-actions { justify-content: center; }
      .o-meste {
        background-image:
          linear-gradient(180deg, rgba(247, 241, 227, .42), rgba(247, 241, 227, .70) 220px, var(--cream) 520px),
          url("../images/place-archway.png");
        background-size: 100% 100%, auto 680px;
        background-position: center, center -185px;
        background-repeat: no-repeat;
      }
      .place-grid { grid-template-columns: 1fr; gap: 26px; }
      .place-media { width: min(640px, 100%); margin-inline: auto; }
      .place-accent { right: 0; }
      .place-body { max-width: 640px; margin-inline: auto; }
      .nav-grid { grid-template-columns: 1fr; gap: 32px; }
      .slavyane-nav .nav-intro { max-width: 640px; margin-inline: auto; }
      .slavyane-brand-flower { max-width: 580px; }
    }

    @media (max-width: 820px) {
      .hero-perks-inner { grid-template-columns: repeat(2, 1fr); }
      .fc-top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
      .fc-top-side { align-items: center; }
    }

    @media (max-width: 768px) {
      /* Финальный CTA: на мобильной версии показываем правую часть фото,
         чтобы в кадре была башня. Desktop не меняем. */
      .final-cta {
        background-position: center, center, 72% 30%;
      }

      /* Замена фото через media query: вертикальная подготовленная фотография */
      .hero {
        background-image: url("../images/hero-mobile.jpg");
        background-position: center 22%;
      }
      .hero-inner { justify-content: flex-end; }
      .hero::after {
        background:
          linear-gradient(0deg, rgba(8, 12, 9, .68) 0%, rgba(8, 12, 9, .30) 34%, rgba(8, 12, 9, 0) 62%),
          linear-gradient(90deg, rgba(8, 12, 9, .42) 0%, rgba(8, 12, 9, 0) 55%);
      }
      /* Замена фотофона секции массажа на мобильную версию */
      .massage-types {
        background:
          radial-gradient(720px 440px at 12% 8%, rgba(238, 179, 79, .22), transparent 62%),
          linear-gradient(180deg, rgba(251, 244, 228, .45) 0%, rgba(246, 236, 212, .50) 100%),
          url("../images/massage-types-mobile.png");
        background-size: auto, auto, cover;
        background-position: center;
      }
    }

    @media (max-width: 720px) {
      .hero-inner { padding-top: calc(var(--header-h) + 26px); padding-bottom: 26px; }
      .hero h1 { font-size: clamp(2.9rem, 14vw, 4.6rem); }
      .hero-kicker { font-size: 11px; letter-spacing: .16em; }
      .hero-actions .btn { width: 100%; min-height: 54px; font-size: 16.5px; }
      .chips .chip { font-size: 11.5px; }
    }

    @media (max-width: 600px) {
      /* Цветы масштабируются целиком, лепестки не перестраиваются */
      .slavyane-brand-flower {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
      }
      .slavyane-brand-flower .brand { font-size: 30px; }
      .slavyane-brand-flower .small { font-size: 11px; }
      .slavyane-brand-flower .petal-nav .title { font-size: 16px; }
      .slavyane-brand-flower .petal-nav .title.smalltitle { font-size: 14px; }
      .massage-flower {
        width: min(630px, 100%);
        max-width: 100%;
        margin-inline: auto;
        overflow: visible;
      }
      .massage-flower > svg {
        transform: scale(1.68);
        transform-origin: 50% 50%;
      }
      .massage-flower .petal-nav .title { font-size: 13px; }
      .massage-flower .petal-nav .title.smalltitle { font-size: 11.5px; }
      .mt-grid { grid-template-columns: 1fr; }
      .fc-contacts { grid-template-columns: 1fr; }
      .fc-card .contact-links { grid-template-columns: 1fr; }
      .place-photo { border-radius: 22px; padding: 6px; }
      .place-photo img { border-radius: 17px; }
      .place-accent { width: 40%; max-width: 190px; border-width: 4px; }
      .place-list { grid-template-columns: 1fr; }
      .place-route { flex-direction: column; align-items: stretch; text-align: center; }
      .place-route-actions .btn { width: 100%; min-height: 52px; }
    }

    /* На сенсорных экранах не показываем рамку focus/tap после нажатия по лепестку.
       Глобальный :focus-visible выше задаёт outline всем интерактивным элементам,
       поэтому здесь переопределяем его именно для лепестков. */
    @media (hover: none), (pointer: coarse) {
      .slavyane-brand-flower .petal,
      .slavyane-brand-flower .petal:focus,
      .slavyane-brand-flower .petal:focus-visible,
      .slavyane-brand-flower .petal:active {
        outline: none !important;
        -webkit-tap-highlight-color: transparent;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
      html.js .reveal { opacity: 1; transform: none; }
    }
  
