/* «Голубые озёра» — общая оболочка всех страниц (13.10.2026, по одобренной Леонидом главной 12.10):
   шапка с меню слева, кнопки, подвал на дубовых рейках, нижняя полоса на телефоне.
   Цвета — с эскиза входа в термы: дубовые рейки, кремовые стены, голубая волна, сине-серый камень, белая подсветка.
   Оболочка не полагается на сброс страницы: свои отступы, шрифты и списки. */

:root {
  --dub: #9a6236;
  --dub-svet: #c48f5e;
  --dub-temn: #5e3a1f;
  --krem: #efe7da;
  --krem-svet: #f7f2ea;
  --goluboy-glub: #6f93bd;
  --nebo-chernila: #1f2e3d;
  --nebo-tekst: #41617f;
  --kamen: #3a4a55;
  --kamen-temn: #24303a;
  --led: #f4fbff;
  --led-oreol: rgba(186, 226, 255, .75);
  --chernila: #2a2520;
  --chernila-2: #5f554b;
  --med: #c9a27a;
  --zag: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --txt: "Ysabeau Office", "Segoe UI", -apple-system, Roboto, sans-serif;
  --pole: clamp(18px, 4.4vw, 72px);
  --shapka-h: 76px;
  --plavno: cubic-bezier(.2, .8, .2, 1);
  /* дубовые рейки — как потолок терм */
  --reyki:
    linear-gradient(180deg, rgba(255, 228, 196, .10), rgba(28, 15, 7, .30)),
    repeating-linear-gradient(90deg, rgba(255, 226, 190, .07) 0 54px, rgba(0, 0, 0, .07) 54px 108px, rgba(255, 226, 190, .02) 108px 198px),
    repeating-linear-gradient(90deg, #a56b3c 0 12px, #8b5830 12px 14px, #2a180c 14px 18px);
  --reyki-melko: repeating-linear-gradient(90deg, #ab7142 0 5px, #8c5931 5px 6px, #3c2313 6px 7.5px);
  /* полированный камень пола терм */
  --mramor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --zerno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .37 0 0 0 0 .23 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E");
}

.shapka, .menu, .podval, .niz-mob { font-family: var(--txt); -webkit-font-smoothing: antialiased; }
.shapka *, .menu *, .podval *, .niz-mob *, .shapka, .menu, .podval, .niz-mob { box-sizing: border-box; }
.shapka p, .menu p, .podval p, .menu ol, .menu li, .podval nav { margin: 0; }
.menu ol { list-style: none; padding: 0; }
.shapka a, .menu a, .podval a, .niz-mob a { color: inherit; }
.shapka svg, .menu svg, .podval svg { display: block; max-width: none; }
.menu img { display: block; max-width: none; }
.shapka button { margin: 0; font: inherit; color: inherit; }
.shapka :focus-visible, .menu :focus-visible, .podval :focus-visible, .niz-mob :focus-visible { outline: 2px solid var(--goluboy-glub); outline-offset: 3px; }

/* ───────── кнопки и метки ───────── */
.cip {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 5px 10px 4px; border-radius: 99px;
  background: #d3e2f2; color: #2d4a6b; font: 700 10px/1 var(--txt); letter-spacing: .14em;
  text-transform: uppercase; font-style: normal; white-space: nowrap;
}
.kn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 999px; font: 700 13.5px/1 var(--txt); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .25s, background .3s, box-shadow .3s, color .3s;
}
.kn--dub {
  color: #fff8ef;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 4px, rgba(0, 0, 0, .08) 4px 6px), linear-gradient(180deg, #b47844, #8a5530);
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, .35), 0 12px 26px -12px rgba(60, 34, 16, .85);
}
.kn--dub:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 236, 210, .35), 0 16px 30px -12px rgba(60, 34, 16, .9), 0 0 0 4px rgba(196, 143, 94, .2); }
.kn--steklo {
  color: var(--led); background: rgba(244, 251, 255, .1); box-shadow: inset 0 0 0 1px rgba(244, 251, 255, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kn--steklo:hover { background: rgba(244, 251, 255, .22); }
.kn--malaya { min-height: 42px; padding: 0 20px; font-size: 12px; }

/* ───────── шапка ───────── */
.shapka {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--shapka-h);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 0 var(--pole); color: var(--led);
  transition: background .4s, color .4s, box-shadow .4s, height .4s;
}
.shapka::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + 70px);
  background: linear-gradient(180deg, rgba(18, 26, 32, .58), rgba(18, 26, 32, 0)); pointer-events: none; transition: opacity .4s;
}
.shapka.skolzit {
  height: 64px; color: var(--chernila); background: rgba(247, 242, 234, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(94, 58, 31, .12);
}
.shapka.skolzit::before { opacity: 0; }

.menu-kn {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px 0 16px; cursor: pointer;
  border: 1px solid rgba(244, 251, 255, .5); border-radius: 999px; background: rgba(20, 28, 34, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 700 12.5px/1 var(--txt); letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s, border-color .3s, color .3s;
}
.menu-kn:hover { background: rgba(20, 28, 34, .4); }
.skolzit .menu-kn { border-color: rgba(94, 58, 31, .3); background: transparent; }
.skolzit .menu-kn:hover { background: rgba(169, 195, 224, .3); }
.menu-otkryto .menu-kn, .menu-otkryto.skolzit .menu-kn { background: var(--krem-svet); color: var(--chernila); border-color: transparent; }
.menu-kn__ikon { position: relative; width: 20px; height: 14px; }
.menu-kn__ikon i {
  position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--plavno), opacity .25s, width .35s;
}
.menu-kn__ikon i:nth-child(1) { top: 0; }
.menu-kn__ikon i:nth-child(2) { top: 6px; width: 68%; }
.menu-kn__ikon i:nth-child(3) { top: 12px; }
.menu-kn:hover .menu-kn__ikon i:nth-child(2) { width: 100%; }
.menu-otkryto .menu-kn__ikon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-otkryto .menu-kn__ikon i:nth-child(2) { opacity: 0; }
.menu-otkryto .menu-kn__ikon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-kn__t { display: grid; }
.menu-kn__t > span { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--plavno); }
.menu-kn__zakr { opacity: 0; transform: translateY(6px); }
.menu-otkryto .menu-kn__otkr { opacity: 0; transform: translateY(-6px); }
.menu-otkryto .menu-kn__zakr { opacity: 1; transform: none; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__znak { width: 30px; height: 31px; fill: currentColor; fill-rule: evenodd; flex: none; }
.logo__t { display: flex; flex-direction: column; line-height: 1; }
.logo__t b { font: 500 25px/1 var(--zag); letter-spacing: .01em; white-space: nowrap; }
.logo__t small { margin-top: 5px; font: 700 10px/1 var(--txt); letter-spacing: .26em; text-transform: uppercase; opacity: .82; }
.shapka__pravo { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.shapka__tel { font: 600 15px/1 var(--txt); letter-spacing: .03em; text-decoration: none; white-space: nowrap; }
.shapka__tel-ikon { display: none; }

/* ───────── меню слева: выпадает вниз от кнопки ───────── */
.menu {
  position: fixed; z-index: 49; top: calc(var(--shapka-h) - 4px); left: var(--pole);
  width: min(880px, calc(100vw - 2 * var(--pole))); max-height: calc(100vh - var(--shapka-h) - 20px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  background: var(--krem-svet) var(--zerno); color: var(--chernila); border-radius: 6px 26px 26px 26px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(20, 28, 34, .6), 0 0 0 1px rgba(94, 58, 31, .08);
  clip-path: inset(0 0 100% 0 round 6px 26px 26px 26px); visibility: hidden;
  transition: clip-path .6s var(--plavno), visibility 0s linear .6s, top .4s;
}
.menu.otkryto { clip-path: inset(0 0 0 0 round 6px 26px 26px 26px); visibility: visible; transition: clip-path .6s var(--plavno), visibility 0s, top .4s; }
.shapka.skolzit ~ .menu { top: 58px; max-height: calc(100vh - 78px); }
.menu-ten {
  position: fixed; z-index: 48; inset: 0; background: rgba(14, 22, 28, .52); opacity: 0; visibility: hidden;
  transition: opacity .45s, visibility 0s linear .45s;
}
.shapka.menu-otkryto ~ .menu-ten { opacity: 1; visibility: visible; transition: opacity .45s, visibility 0s; }
.menu__spisok-blok { display: flex; flex-direction: column; padding: 28px 30px 26px 34px; overflow: auto; }
.menu__metka { margin-bottom: 12px; font: 700 11px/1.2 var(--txt); letter-spacing: .24em; text-transform: uppercase; color: var(--dub); }
.menu__spisok li { border-top: 1px solid rgba(94, 58, 31, .12); }
.menu__spisok a {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px;
  padding: 13px 40px 13px 0; text-decoration: none; transition: padding .35s var(--plavno), background .35s;
}
.menu__spisok a::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: var(--goluboy-glub); box-shadow: 0 0 10px var(--led-oreol); transform: scaleY(0); transition: transform .35s var(--plavno);
}
.menu__spisok a::after {
  content: "→"; position: absolute; right: 12px; top: 50%; color: var(--dub); font-size: 18px;
  opacity: 0; transform: translate(-8px, -50%); transition: opacity .3s, transform .35s var(--plavno);
}
.menu__spisok a:hover, .menu__spisok a:focus-visible { padding-left: 16px; background: linear-gradient(90deg, rgba(169, 195, 224, .38), rgba(169, 195, 224, 0) 85%); }
.menu__spisok a:hover::before, .menu__spisok a:focus-visible::before, .menu__spisok a[aria-current="page"]::before { transform: scaleY(1); }
.menu__spisok a:hover::after, .menu__spisok a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.menu__spisok a[aria-current="page"] { padding-left: 16px; }
.menu__spisok a[aria-current="page"] .menu__nazv::after {
  content: "вы здесь"; display: inline-block; vertical-align: middle; margin-left: 10px;
  font: 700 10px/1 var(--txt); letter-spacing: .16em; text-transform: uppercase; color: var(--goluboy-glub);
}
.menu__n { grid-row: 1 / 3; padding-top: 9px; font: 700 11px/1 var(--txt); letter-spacing: .1em; color: var(--dub); }
.menu__nazv { font: 500 30px/1.05 var(--zag); }
.menu__pod { margin-top: 4px; font: 400 14px/1.4 var(--txt); color: var(--chernila-2); }
.menu__niz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 16px; padding-top: 18px;
  border-top: 1px solid rgba(94, 58, 31, .12); font: 700 14px/1.2 var(--txt);
}
.menu__niz a:not(.kn) { text-decoration: none; }
.menu__tel { font-size: 17px; letter-spacing: .02em; }
.js-anim .menu__spisok li, .js-anim .menu__niz { opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .5s var(--plavno); }
.js-anim .menu.otkryto .menu__spisok li, .js-anim .menu.otkryto .menu__niz { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .05s); }
.menu__prevyu { position: relative; margin: 12px; border-radius: 20px; overflow: hidden; background: var(--kamen); min-height: 300px; }
.menu__prevyu::before {
  content: ""; position: absolute; inset: -30px; background: url(img/fasad-eskiz.jpg) center / cover;
  filter: blur(26px) saturate(1.1); opacity: 0; transition: opacity .5s;
}
.menu__prevyu.shir::before { opacity: .9; }
.menu__prevyu img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .5s, transform 1.4s var(--plavno);
}
.menu__prevyu img.tut { opacity: 1; transform: none; }
.menu__prevyu img.shirokoe { object-fit: contain; }
.menu__prevyu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(0deg, rgba(20, 28, 34, .62), rgba(20, 28, 34, 0)); }
.menu__prevyu-podpis { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 18px; color: var(--led); font: italic 400 26px/1.1 var(--zag); }

/* ───────── подвал на тёмных рейках ───────── */
.podval { padding: clamp(56px, 7vw, 90px) var(--pole) 34px; color: #f3e9dc; background: linear-gradient(180deg, rgba(20, 12, 6, .62), rgba(20, 12, 6, .8)), var(--reyki); }
.podval__verh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.podval__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.podval__logo svg { width: 44px; height: 46px; fill: currentColor; fill-rule: evenodd; }
.podval__logo b { display: block; font: 500 30px/1 var(--zag); }
.podval__logo small { display: block; margin-top: 6px; font: 700 10.5px/1 var(--txt); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.podval__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; padding-top: 8px; font: 600 14.5px/1.3 var(--txt); }
.podval__nav a, .podval__svyaz a, .podval__yur a { text-decoration: none; }
.podval__nav a:hover, .podval__svyaz a:hover, .podval__yur a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.podval__nav a[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(243, 233, 220, .45); }
.podval__svyaz { display: flex; flex-direction: column; gap: 8px; text-align: right; font: 500 15px/1.3 var(--txt); }
.podval__yur { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(243, 233, 220, .18); font: 400 13px/1.5 var(--txt); opacity: .72; }
.podval__panel { white-space: nowrap; }

.niz-mob { display: none; }

@media (max-width: 1100px) {
  .shapka__tel { display: none; }
}
@media (max-width: 900px) {
  .podval__verh { grid-template-columns: 1fr; gap: 26px; }
  .podval__nav { justify-content: flex-start; padding-top: 0; }
  .podval__svyaz { text-align: left; }
}
@media (max-width: 759px) {
  :root { --shapka-h: 64px; }
  .shapka { gap: 10px; }
  .shapka.skolzit { height: 58px; }
  .menu-kn { height: 42px; gap: 10px; padding: 0 14px 0 12px; font-size: 11.5px; letter-spacing: .14em; }
  .logo { gap: 9px; }
  .logo__znak { width: 25px; height: 26px; }
  .logo__t b { font-size: 21px; }
  .logo__t small { font-size: 8.5px; letter-spacing: .22em; }
  .shapka__pravo { gap: 8px; }
  .shapka__pravo .kn { display: none; }
  .shapka__tel-ikon {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(244, 251, 255, .5); background: rgba(20, 28, 34, .22);
  }
  .skolzit .shapka__tel-ikon { border-color: rgba(94, 58, 31, .3); background: transparent; }
  .shapka__tel-ikon svg { width: 18px; height: 18px; fill: currentColor; }
  .menu, .shapka.skolzit ~ .menu {
    left: 0; width: 100%; top: var(--shapka-h); max-height: calc(100svh - var(--shapka-h)); grid-template-columns: 1fr;
    border-radius: 0 0 26px 26px; clip-path: inset(0 0 100% 0 round 0 0 26px 26px);
  }
  .shapka.skolzit ~ .menu { top: 58px; max-height: calc(100svh - 58px); }
  .menu.otkryto { clip-path: inset(0 0 0 0 round 0 0 26px 26px); }
  .menu__prevyu { display: none; }
  .menu__spisok-blok { padding: 18px var(--pole) 24px; }
  .menu__spisok a { padding: 12px 34px 12px 0; }
  .menu__nazv { font-size: 28px; }
  .menu__pod { font-size: 13.5px; }

  .podval { padding-bottom: 110px; }
  .niz-mob {
    position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; padding: 8px; border-radius: 22px;
    background: rgba(36, 48, 58, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); transform: translateY(150%); transition: transform .5s var(--plavno);
  }
  .niz-mob.vidno { transform: none; }
  .niz-mob .kn { min-height: 48px; padding: 0 12px; font-size: 12px; }
  .kn--steklo-t { color: var(--led); background: rgba(244, 251, 255, .1); box-shadow: inset 0 0 0 1px rgba(244, 251, 255, .38); }
}
/* узкие телефоны (360 и меньше): «Меню», название и трубка помещаются в строку */
@media (max-width: 380px) {
  :root { --pole: 14px; }
  .shapka { gap: 8px; }
  .menu-kn { gap: 8px; padding: 0 11px 0 10px; letter-spacing: .1em; }
  .logo { gap: 7px; }
  .logo__znak { width: 22px; height: 23px; }
  .logo__t b { font-size: 19px; }
  .logo__t small { font-size: 8px; letter-spacing: .18em; }
  .shapka__tel-ikon { width: 40px; height: 40px; }
}
@media (max-width: 345px) {
  .menu-kn__t { display: none; }
  .menu-kn { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .shapka, .menu, .menu *, .menu-ten, .niz-mob, .kn, .menu-kn, .menu-kn * { transition-duration: .01ms !important; }
}