/* ============================================================
   SOVA / Белая Сова — Light Premium System
   Luxury wellness · cinematic editorial · champagne palette
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --milk: #FAF7F0;
  --white: #FFFDF8;
  --pearl: #EEE8DC;
  --champagne: #F4E4C1;
  --champagne-light: #FFF3D8;
  --champagne-deep: #E7D0A3;
  --sand: #D8C7A3;
  --gold: #C8A96A;
  --soft-gold: #E4C987;
  --deep-gold: #9F7A32;
  --graphite: #242321;
  --muted: #6F6A61;
  --line: rgba(159, 122, 50, 0.18);
  --gold-line: rgba(200, 169, 106, 0.34);
  --card: rgba(255, 253, 248, 0.78);
  --shadow-soft: 0 24px 80px rgba(36, 35, 33, 0.08);
  --shadow-card: 0 18px 54px rgba(36, 35, 33, 0.07);
  --shadow-gold: 0 18px 42px rgba(200, 169, 106, 0.28);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --display: "Oranienbaum", "Cormorant Garamond", "Prata", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink-display: #332B22;             /* display headings: warm, softer than graphite */

  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.125rem);
  line-height: 1.65;
  color: var(--graphite);
  background: var(--milk);            /* solid fallback — page can never render black */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(200, 169, 106, 0.28); color: var(--graphite); }

/* ---------- Background decor (clean, behind everything) ---------- */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* viewport-locked champagne wash (replaces background-attachment: fixed for perf) */
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 243, 216, 0.78), transparent 34%),
    radial-gradient(circle at 12% 78%, rgba(244, 228, 193, 0.42), transparent 38%),
    linear-gradient(135deg, #FFFDF8 0%, #FAF7F0 48%, #F4E4C1 100%);
}
.bg-decor .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.bg-decor .glow-1 {
  width: 52vw; height: 52vw;
  top: -14vw; right: -10vw;
  background: radial-gradient(circle, rgba(255, 243, 216, 0.85), transparent 68%);
}
.bg-decor .glow-2 {
  width: 46vw; height: 46vw;
  bottom: -8vw; left: -12vw;
  background: radial-gradient(circle, rgba(244, 228, 193, 0.6), transparent 68%);
}
.bg-decor .glow-3 {
  width: 38vw; height: 38vw;
  top: 42%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 253, 248, 0.5), transparent 70%);
}
/* a few round, soft bokeh — never square, max ~10 */
.bg-decor .bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 201, 135, 0.5), rgba(228, 201, 135, 0) 70%);
  filter: blur(1px);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, blockquote {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--graphite);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;                 /* even, sculptural line breaks on headings */
}
/* Display headings: Oranienbaum only for large h1/h2 — single 400 weight,
   airy spacing, never heavy. Body text stays on Inter. */
h1 {
  font-family: var(--display);
  font-size: clamp(2.9rem, 5.6vw, 5.2rem);
  line-height: 1.04;                  /* tighter leading reads more editorial at display size */
  font-weight: 400;
  letter-spacing: 0.004em;
  color: var(--ink-display);
}
h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.7rem);
  line-height: 1.09;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--ink-display);
  max-width: 24ch;
}
.light-moment h2 { margin-inline: auto; }
h3 {
  font-size: clamp(1.4rem, 1.6vw, 1.7rem);
  line-height: 1.18;
  font-weight: 600;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.26em;             /* wider, more delicate tracking on the kicker */
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--deep-gold);
  margin: 0 0 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.lead {
  font-size: clamp(1.1rem, 1.1vw + 0.7rem, 1.32rem);
  line-height: 1.62;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;                  /* avoid orphans / ragged last lines */
}
p { text-wrap: pretty; }
blockquote {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--deep-gold);
  margin: 1.6rem 0 0;
  padding-left: 1.3rem;
  border-left: 2px solid var(--gold-line);
}

/* ---------- Layout ---------- */
main { display: block; }
.section {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 4vw, 3.8rem);
}
.section-head h2 { margin-bottom: 0.7rem; }
.section-head p { color: var(--muted); font-size: 1.1rem; max-width: 52ch; }

/* split = two-column intro blocks */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split > div:first-child h2 { position: sticky; top: 120px; }
.section-text p { color: var(--muted); font-size: 1.1rem; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem var(--gutter);
  background: rgba(255, 253, 248, 0.62);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.site-header.scrolled {
  background: rgba(255, 253, 248, 0.82);
  border-bottom-color: var(--gold-line);
  box-shadow: 0 8px 30px rgba(36, 35, 33, 0.05);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-mark { width: 36px; height: 36px; }
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
}
.nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--graphite);
  opacity: 0.82;
  transition: opacity 0.3s, color 0.3s;
  position: relative;
}
.nav a:not(.nav-cta):hover { opacity: 1; color: var(--deep-gold); }
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}
.nav a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--soft-gold), var(--gold));
  color: #2a2114 !important;
  font-weight: 600;
  opacity: 1 !important;
  box-shadow: 0 8px 22px rgba(200, 169, 106, 0.32);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200, 169, 106, 0.42); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--graphite);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.3s;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s;
  white-space: nowrap;
}
.button.primary {
  background: linear-gradient(135deg, var(--soft-gold), var(--gold));
  color: #2a2114;
  box-shadow: var(--shadow-gold);
}
.button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(200, 169, 106, 0.38);
}
.button.secondary {
  background: rgba(255, 253, 248, 0.55);
  border-color: var(--gold-line);
  color: var(--graphite);
  backdrop-filter: blur(8px);
}
.button.secondary:hover {
  background: rgba(255, 253, 248, 0.9);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.button.wide { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding-top: clamp(7rem, 12vh, 11rem);
  padding-bottom: var(--section-y);
}
.hero-copy { max-width: 40rem; }
.hero h1 { margin-bottom: 1.5rem; max-width: 16ch; }
.hero .lead { margin-bottom: 1.8rem; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}
.chips span {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.6);
  border: 1px solid var(--line);
}
.hero-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  color: var(--deep-gold);
  margin-bottom: 2rem;
  line-height: 1.35;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.3rem;
  margin-bottom: 1.4rem;
}
.hero-proof span {
  font-size: 0.9rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
}
.hero-proof span + span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 0.9rem;
  margin-left: -0.7rem;
}
.contact-line { font-size: 0.92rem; color: var(--muted); }
.contact-line a { color: var(--deep-gold); font-weight: 500; }
.contact-line a:hover { text-decoration: underline; }

/* Hero visual / owl slot */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(360px, 46vw, 620px);
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: 92%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 216, 0.9), rgba(244, 228, 193, 0.32) 55%, transparent 72%);
  filter: blur(8px);
}
.owl-hero-slot {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
}
.owl-static {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 34px 70px rgba(159, 122, 50, 0.2));
  animation: owlBreathe 7s ease-in-out infinite;
}
@keyframes owlBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.012); }
}

/* (the desktop owl is rendered on the #owlStage canvas by owl-sequence.js —
   Higgsfield frame sequences, GSAP ScrollTrigger scrub; no DOM owl element) */

/* Desktop with motion: the canvas owl renders the hero sit too — hide the in-flow copy.
   Reduced-motion / mobile keep .owl-static (the flight owl is disabled there). */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .owl-static { display: none; }
  /* the live owl flies into the finale and dissolves there — the static flyby
     copy would just sit on top of it, so hide it on desktop with motion. */
  .light-moment .flyby { display: none; }
}

/* ============================================================
   Scene world (Stage A): atmosphere canvas + forest stage + eyes
   Desktop with motion only — mobile / reduced-motion keep the
   light hero (engine skips cinematics there too).
   ============================================================ */
#sovaAtmosphere,
#sovaFg,
.scene-stage,
.owl-stage,
.hero-scene { display: none; }

main { position: relative; z-index: 2; }

/* hybrid hero: the scrubbed forest+owl scene replaces the old static stage */
.hybrid-hero .scene-stage { display: none !important; }
/* the scene already contains the owl — drop the hero's static owl column and
   let the copy sit over the cinematic scene full-bleed */
.hybrid-hero .hero { grid-template-columns: minmax(0, 1fr); }
.hybrid-hero .hero-visual { display: none; }
.hybrid-hero .hero-copy { max-width: 46rem; position: relative; z-index: 2; }
/* hero must be exactly 100svh — content overflow broke the overlay-pin timing
   (was measuring 1080px at VH800, offset the cross-dissolve by 280px) */
.hybrid-hero .hero { height: 100svh; min-height: unset; overflow: hidden; }
/* body background must stay light after the hero dissolves — the dark
   scene-night class is only needed for the forest hero, not the content world */
html.hybrid-hero body.scene-night { background-color: var(--milk); }
/* overlay-hero stacking: lift the scene ABOVE the page content so the first
   section scrolls up behind it during the pin (gapless reveal on dissolve),
   and lift the hero section so its copy stays above the scene */
.hybrid-hero main { z-index: auto; }
.hybrid-hero .hero-scene { z-index: 5; }
.hybrid-hero .hero { position: relative; z-index: 6; }
/* content sections must sit ABOVE the hero canvas (z-index:5) and the hero section
   itself (z-index:6 + translateY after pin) so the dark forest never bleeds through */
.hybrid-hero main section:not(.hero):not(.light-moment) {
  position: relative;
  z-index: 7;
  background-color: var(--milk);
}
/* finale vortex scene: starts hidden. Unlike the hero (which sits at the very
   top with nothing above it), the finale plays MID-PAGE — so it must overlay
   the content (z:9, above sections z:7 and the foreground atmosphere z:8),
   otherwise the opaque text blocks scrolling past cover the rabbit-hole and the
   owl diving into it (reported: "сова в чёрную дыру не видна за блоками").
   It is visibility:hidden whenever opacity≤0, so it only overlays while active. */
.finale-scene { opacity: 0; visibility: hidden; }
.hybrid-hero .finale-scene { z-index: 9; }
/* full-viewport, solid block: the dive owns its own screen. Being 100vh tall
   means the next section ("Как записаться") cannot rise into view until the pin
   fully ends — so the vortex never bleeds over the booking block, and its
   fade-out reveals this milk backdrop, not the content behind it. */
.hybrid-hero .light-moment {
  position: relative;
  z-index: 6;
  min-height: 100svh;
  background-color: var(--milk);
}
/* the cinematic vortex video IS the content — remove all HTML overlays that
   were causing the "champagne blob + text artifact" reported by the user */
.hybrid-hero .light-moment::before,
.hybrid-hero .light-moment .flyby,
.hybrid-hero .light-moment h2,
.hybrid-hero .light-moment > p { display: none; }
.hero-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  will-change: opacity;
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero-scene { display: block; }
}
/* on mobile / reduced-motion show the cinematic scene as a static hero bg */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero-scene { display: block; z-index: -1; opacity: 1; }

  /* the static forest frame sits behind the hero copy — keep the text light
     and lay a soft scrim under it so the heading stays legible over the trees
     (the desktop night-palette overrides live in a min-width:901px block and
     never reach mobile, which left the copy dark and unreadable here) */
  .hero { position: relative; isolation: isolate; }
  /* heavy, even veil — the bright god-rays in the frame washed out cream text
     on a real iPhone, so the forest now reads as a deep moody backdrop and the
     copy pops (≈12–30 % of the trees still show through) */
  .hero::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(180deg,
      rgba(8, 6, 3, 0.9) 0%,
      rgba(8, 6, 3, 0.86) 50%,
      rgba(8, 6, 3, 0.94) 100%);
    z-index: -1;
    pointer-events: none;
  }
  .hero .hero-copy { position: relative; z-index: 1; }
  .hero h1 {
    color: #FBF5E8;
    text-shadow: 0 1px 3px rgba(6, 4, 1, 0.92), 0 2px 22px rgba(6, 4, 1, 0.8);
  }
  .hero .lead {
    color: rgba(247, 239, 222, 0.98);
    text-shadow: 0 1px 12px rgba(6, 4, 1, 0.82);
  }
  .hero .eyebrow {
    color: #F1DCA6;
    text-shadow: 0 1px 8px rgba(6, 4, 1, 0.7);
  }
  .hero .hero-line {
    color: #F1DCA6;
    text-shadow: 0 1px 10px rgba(6, 4, 1, 0.75);
  }
  .hero .chips span {
    color: rgba(247, 239, 222, 0.96);
    background: rgba(20, 14, 8, 0.5);
    border-color: rgba(228, 201, 135, 0.42);
  }
  .hero .hero-proof span { color: rgba(243, 233, 213, 0.86); text-shadow: 0 1px 8px rgba(6, 4, 1, 0.6); }
  .hero .contact-line { color: rgba(243, 233, 213, 0.82); }
  .hero .contact-line a { color: #F1DCA6; }
  /* the duplicate static owl image is redundant over the forest frame */
  .hero .owl-static { display: none; }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #sovaAtmosphere {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .scene-stage {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }
  /* foreground plane: gold threads (light world) + fireflies / god rays (night)
     — lifted ABOVE the opaque content sections (z:7) so the thin golden threads
     pierce the champagne space in front of the text, exactly as the brief asks
     («тонкие золотистые нити… в основном за текстом, иногда наслаиваясь»).
     Night-only sparks are gated by nightAmount, so by the time light content is
     on screen this layer carries threads alone. */
  #sovaFg {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    pointer-events: none;
  }
  /* owl Canvas stage — sits above content, plays the frame sequences */
  .owl-stage {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
  }
  .scene-stage img {
    position: absolute;
    max-width: none;
    height: auto;       /* keep aspect ratio: CSS width + HTML height attr otherwise squash */
    will-change: transform, opacity;
  }
  /* cinematic depth of field: far plane soft, mid slightly soft, branch crisp.
     layers fade into the canvas sky through a soft top mask */
  .scene-stage .forest-far {
    left: -8vw; bottom: -4vh; width: 116vw;
    filter: blur(5px) saturate(1.06) brightness(0.97);
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 96%);
            mask-image: linear-gradient(to top, #000 55%, transparent 96%);
  }
  .scene-stage .forest-mid {
    left: -10vw; bottom: -8vh; width: 124vw;
    filter: blur(1.4px) contrast(1.02);
    -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 88%);
            mask-image: linear-gradient(to top, #000 42%, transparent 88%);
  }
  .scene-stage .branch {
    left: 57vw; top: 28vh; width: 46vw;
    filter: contrast(1.04) drop-shadow(0 18px 40px rgba(10, 7, 4, 0.5));
  }
  /* soft photographic vignette over the whole stage */
  .scene-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 95% at 50% 42%,
      rgba(0, 0, 0, 0) 58%,
      rgba(10, 7, 4, 0.18) 84%,
      rgba(10, 7, 4, 0.38) 100%);
  }
  /* cinematic scrim: darkens the left where hero text sits, clears toward the
     owl + central glow on the right — keeps text legible over the bright forest */
  .scene-stage .scene-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    background:
      linear-gradient(100deg,
        rgba(14, 10, 5, 0.93) 0%,
        rgba(14, 10, 5, 0.80) 38%,
        rgba(14, 10, 5, 0.38) 56%,
        rgba(14, 10, 5, 0) 72%),
      linear-gradient(to top,
        rgba(14, 10, 5, 0.60) 0%,
        rgba(14, 10, 5, 0) 34%);
  }

  /* (eye glow is drawn on the owl canvas by owl-sequence.js) */

  /* ---------- night palette (hero under the evening forest) ---------- */
  body { transition: background-color 0.8s var(--ease-soft); }
  .bg-decor { transition: opacity 0.8s var(--ease-soft); }
  .hero h1,
  .hero .lead,
  .hero .eyebrow,
  .hero-line,
  .contact-line,
  .hero-proof span { transition: color 0.7s var(--ease-soft); }
  .chips span {
    transition: color 0.7s var(--ease-soft),
                background-color 0.7s var(--ease-soft),
                border-color 0.7s var(--ease-soft);
  }
  .hero-visual::before { transition: opacity 0.7s var(--ease-soft); }

  body.scene-night { background-color: #211910; }
  body.scene-night .bg-decor { opacity: 0; }
  body.scene-night .hero-visual::before { opacity: 0.16; }

  body.scene-night .site-header {
    background: rgba(24, 18, 11, 0.42);
    border-bottom-color: rgba(228, 201, 135, 0.14);
  }
  body.scene-night .site-header.scrolled {
    background: rgba(24, 18, 11, 0.66);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  }
  body.scene-night .brand,
  body.scene-night .nav a:not(.nav-cta) { color: #F3E9D5; }
  body.scene-night .nav a:not(.nav-cta):hover { color: var(--soft-gold); }
  body.scene-night .menu-toggle span { background: #F3E9D5; }

  body.scene-night .hero h1 {
    color: #FAF3E4;
    text-shadow: 0 1px 2px rgba(8, 5, 2, 0.75), 0 2px 14px rgba(8, 5, 2, 0.6);
  }
  body.scene-night .hero .lead {
    text-shadow: 0 1px 8px rgba(8, 5, 2, 0.55);
  }
  body.scene-night .hero .eyebrow { color: var(--soft-gold); }
  body.scene-night .hero .lead { color: rgba(243, 233, 213, 0.85); }
  body.scene-night .hero-line { color: var(--soft-gold); }
  body.scene-night .chips span {
    color: rgba(243, 233, 213, 0.85);
    background: rgba(26, 19, 11, 0.38);
    border-color: rgba(228, 201, 135, 0.3);
  }
  body.scene-night .hero-proof span { color: rgba(243, 233, 213, 0.72); }
  body.scene-night .contact-line { color: rgba(243, 233, 213, 0.66); }
  body.scene-night .contact-line a { color: var(--soft-gold); }
  body.scene-night .button.secondary {
    background: rgba(26, 19, 11, 0.3);
    border-color: rgba(243, 233, 213, 0.35);
    color: #F6EDDC;
  }
  body.scene-night .button.secondary:hover {
    background: rgba(26, 19, 11, 0.55);
    border-color: var(--soft-gold);
  }

  /* the positioning block lives in the twilight band (owl perch #1 — she sits
     ON the heading letters): light ink over the dark forest until dawn */
  body.scene-night #positioning .eyebrow { color: var(--soft-gold); }
  body.scene-night #positioning h2 {
    color: #F6EDDC;
    text-shadow: 0 2px 26px rgba(10, 7, 4, 0.55);
  }
  body.scene-night #positioning .section-text > p { color: rgba(243, 233, 213, 0.86); }
  body.scene-night #positioning .mini-grid article {
    background: rgba(20, 16, 12, 0.38);
    border: 1px solid rgba(228, 201, 135, 0.22);
    backdrop-filter: blur(6px);
  }
  body.scene-night #positioning .mini-grid h3 { color: #F3E9D5; }
  body.scene-night #positioning .mini-grid p { color: rgba(243, 233, 213, 0.72); }
}

/* ---------- GSAP motion layer (sova-motion.js) ----------
   when <html>.gsap-motion is set, GSAP owns the entrances: the CSS reveal
   becomes a no-op so layout is final from the first frame and the owl's
   live anchors never chase a transitioning container */
.gsap-motion .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
/* pinned reading slides must FIT the viewport (voice-note: «блок должен
   уместиться в экран») — sova-motion marks every pinned section .owl-slide
   and these compact metrics keep heading + content + CTA above the fold */
section.owl-slide { padding-block: clamp(2rem, 3.6vw, 3.4rem); }
section.owl-slide .section-head { margin-bottom: 1.4rem; }
section.owl-slide .section-head h2,
section.owl-slide > div > h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
section.owl-slide .section-head > p { margin-top: 0.4rem; font-size: 1rem; }
section.owl-slide .cosmos-panel { padding: clamp(1.6rem, 2.6vw, 2.4rem); }
section.owl-slide .cosmos-panel p { font-size: 1rem; margin-bottom: 0.85em; }
section.owl-slide .cosmos-steps { margin-top: 1.1rem; }
section.owl-slide .mini-grid article { padding: 1.3rem; }

/* ── Per-section overflow fixes (VH 800px audit 2026-06-13) ──────────────
   #inner-cosmos was 885px at VH800 (+85px). Reduce vertical rhythm so the
   cosmos-panel + steps fit without cutting content.                        */

/* #wax was 1149px — doesn't fit in viewport. Compact to ~720px.
   Wax is a fly-through section (no owl landing), but per ТЗ it must
   "помещаться в экран логично и отцентрированно".                      */
#wax { padding-block: 1.8rem 1.4rem; }
#wax .section-head { margin-bottom: 1rem; }
#wax .section-head p { font-size: 0.98rem; }
#wax .wax-copy p { font-size: 0.9rem; line-height: 1.58; margin-bottom: 0.55em; }
#wax .wax-card { padding: 1.4rem 1.6rem; }
#wax .wax-card h3 { font-size: 1.28rem; margin-bottom: 0.6rem; }
#wax .wax-card ul { margin: 0.5rem 0 0.6rem; gap: 0.4rem; }
#wax .wax-card li { font-size: 0.87rem; }
#wax .wax-format { margin-top: 0.6rem; font-size: 0.93rem; }
#wax .wax-price { font-size: 0.9rem; }
#wax .wax-note { margin-top: 1rem; font-size: 0.82rem; }

#inner-cosmos.owl-slide { padding-block: 1.2rem 1.5rem; }
#inner-cosmos.owl-slide .section-head { margin-bottom: 0.9rem; }
#inner-cosmos.owl-slide .cosmos-panel { padding: clamp(1.1rem, 1.8vw, 1.6rem); }
#inner-cosmos.owl-slide .cosmos-panel p { font-size: 0.95rem; margin-bottom: 0.5em; }
#inner-cosmos.owl-slide .cosmos-steps { margin-top: 0.6rem; }
#inner-cosmos.owl-slide .mini-grid article { padding: 0.95rem 1rem; }
/* #formats was 807px at VH800 (+7px). Tighten top/bottom padding only.    */
#formats.owl-slide { padding-block: 1.6rem 1.2rem; }
#formats.owl-slide .section-head { margin-bottom: 1rem; }
#formats.owl-slide .note { margin-top: 0.7rem; font-size: 0.82rem; }
section.owl-slide .about-card { padding: clamp(1.6rem, 2.6vw, 2.2rem); }
section.owl-slide .about-card p { font-size: 0.98rem; line-height: 1.52; margin-bottom: 0.7em; }
section.owl-slide .about-card blockquote { font-size: 1.15rem; margin-top: 0.9rem; }
section.owl-slide .cards { gap: 1rem; }
section.owl-slide .card { padding: 1.35rem; }
section.owl-slide .card p { font-size: 0.92rem; }
section.owl-slide .pricing { gap: 1rem; }
section.owl-slide .price-card { padding: 1.25rem 1.35rem; }
section.owl-slide .price-card h3 { font-size: 1.22rem; }
section.owl-slide .price-card .price { font-size: 1.8rem; margin: 0.25rem 0 0; }
section.owl-slide .price-card .duration { margin-bottom: 0.55rem; }
section.owl-slide .price-card p { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.6em; }
section.owl-slide .price-card ul { margin: 0.5rem 0 0.8rem; }
section.owl-slide .price-card li { font-size: 0.87rem; line-height: 1.42; }
section.owl-slide .price-card .button { padding: 0.7rem 1.4rem; font-size: 0.92rem; }
/* #questions has 5 cards (2 rows) — squeeze slightly so section ≤ 752 px */
#questions.owl-slide { padding-block: 1.4rem 1rem; }
#questions.owl-slide .section-head { margin-bottom: 0.8rem; }
#questions.owl-slide .cards { gap: 0.8rem; }
#questions.owl-slide .card { padding: 1.1rem 1.2rem; }
#questions.owl-slide .card h3 { font-size: 1.3rem; margin-bottom: 0.25rem; }
#questions.owl-slide .card p { font-size: 0.88rem; }
/* #confidential-reviews: 784px — trim to ≤ 752 px */
#confidential-reviews.owl-slide { padding-block: 1.4rem 1rem; }
#confidential-reviews.owl-slide .section-head { margin-bottom: 1rem; }
#confidential-reviews.owl-slide .mini-grid { margin-top: 0.9rem; }
section.owl-slide .confidential-copy { padding: clamp(1.6rem, 2.6vw, 2.4rem); }
section.owl-slide .confidential-copy p { font-size: 1rem; margin-bottom: 0.85em; }
section.owl-slide .accordion { gap: 0.8rem; }

.light-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 45%,
    rgba(255, 250, 238, 0.95),
    rgba(255, 243, 216, 0.6) 45%,
    rgba(255, 243, 216, 0) 75%);
}

/* perch micro-shake — applies ONLY to the active perch text element */
@keyframes perchMicroShake {
  0%   { transform: translate3d(0,0,0) rotate(0); }
  20%  { transform: translate3d(1px,-1px,0) rotate(-0.12deg); }
  40%  { transform: translate3d(-1px,1px,0) rotate(0.12deg); }
  60%  { transform: translate3d(1px,0,0) rotate(-0.08deg); }
  80%  { transform: translate3d(-1px,0,0) rotate(0.08deg); }
  100% { transform: translate3d(0,0,0) rotate(0); }
}
.perch-shake {
  animation: perchMicroShake 320ms cubic-bezier(.2,.8,.2,1) both;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* ---------- Premium card base ---------- */
.premium-card,
.card,
.price-card,
.cosmos-panel,
.about-card,
.wax-card,
.confidential-copy,
.booking-form,
.mini-grid article,
.accordion article {
  background: linear-gradient(145deg, rgba(255, 253, 248, 0.9), rgba(250, 247, 240, 0.66));
  border: 1px solid rgba(200, 169, 106, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* gold-thread dusting (voice-note): a hair-thin champagne thread along the
   top frame of the blocks the owl perches on — decorative, never loud */
.cosmos-panel,
.about-card,
.confidential-copy,
.wax-card { position: relative; }
.cosmos-panel::before,
.about-card::before,
.confidential-copy::before,
.wax-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 8%; right: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(228, 201, 135, 0) 0%,
    rgba(228, 201, 135, 0.85) 22%,
    rgba(255, 243, 216, 0.95) 50%,
    rgba(228, 201, 135, 0.85) 78%,
    rgba(228, 201, 135, 0) 100%);
  filter: drop-shadow(0 0 3px rgba(228, 201, 135, 0.6));
}

/* ---------- Mini grid (feature blocks) ---------- */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.3rem;
  margin-top: 2rem;
}
.mini-grid article {
  padding: 1.8rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mini-grid article:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.mini-grid h3 { margin-bottom: 0.6rem; }
.mini-grid p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Inner cosmos ---------- */
.inner-cosmos .cosmos-panel {
  padding: clamp(2rem, 4vw, 3.4rem);
  max-width: 60rem;
}
.inner-cosmos .cosmos-panel p { color: var(--muted); font-size: 1.08rem; }
.cosmos-steps { margin-top: 1.5rem; }
.cosmos-steps h3 { color: var(--deep-gold); font-style: italic; }

/* ---------- About ---------- */
.about-card {
  padding: clamp(2.2rem, 5vw, 4rem);
  max-width: 64rem;
  margin-inline: auto;
}
.about-card .eyebrow + h2 { display: none; } /* eyebrow already reads "О Сове" */
.about-card p { color: var(--muted); font-size: 1.1rem; }

/* ---------- Questions cards ---------- */
.cards {
  display: grid;
  gap: 1.4rem;
}
.cards.four {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  padding: 2rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold-line);
}
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Process / steps / timeline ---------- */
.steps,
.timeline {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.steps article,
.timeline article {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.steps article span,
.timeline article span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--deep-gold);
  background: rgba(244, 228, 193, 0.5);
  border: 1px solid var(--gold-line);
}
.steps article h3 { font-size: 1.15rem; }
.timeline article p { color: var(--muted); font-size: 0.98rem; margin: 0; }

/* ---------- Formats / pricing ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.6rem;
  align-items: stretch;
}
.price-card {
  padding: clamp(2rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.price-card h3 { margin-bottom: 1rem; }
.price-card .price {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  font-weight: 600;
  color: var(--deep-gold);
  margin-bottom: 0.2rem;
}
/* prices are quoted individually — render "Цена под запрос" as an elegant
   clickable gold link straight to the booking bot (regional/returning clients
   may have different rates, so no fixed numbers are shown) */
.price.on-request {
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--deep-gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 3px;
  margin: 0.1rem 0 0.5rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.price.on-request::after { content: "→"; transition: transform 0.3s var(--ease); }
.price.on-request:hover { color: var(--gold); border-color: var(--gold); }
.price.on-request:hover::after { transform: translateX(3px); }
section.owl-slide .price-card .price.on-request { font-size: 1.06rem; margin: 0 0 0.45rem; }
#wax .wax-price.on-request { font-size: 1.08rem; margin-top: 0.7rem; }
.price-card .duration {
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
}
.price-card > p { color: var(--muted); font-size: 0.98rem; }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0;
  display: grid;
  gap: 0.65rem;
  flex: 1;
}
.price-card li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: var(--graphite);
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.price-card .button { margin-top: auto; }
.price-card.featured {
  border-color: var(--gold);
  box-shadow: 0 28px 70px rgba(159, 122, 50, 0.16);
  position: relative;
}
.price-card.featured::before {
  content: "Рекомендуемый формат";
  position: absolute;
  top: -0.9rem; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--soft-gold), var(--gold));
  color: #2a2114;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow-gold);
}
.note {
  margin-top: 2rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* ---------- Wax (closed format) ---------- */
.wax-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.wax-copy p { color: var(--muted); font-size: 1.06rem; }
.wax-card { padding: clamp(2rem, 3vw, 2.6rem); }
.wax-card ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
  display: grid;
  gap: 0.6rem;
}
.wax-card li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.96rem;
  color: var(--graphite);
}
.wax-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.wax-format { font-weight: 600; margin-top: 1rem; }
.wax-price { color: var(--muted); font-style: italic; }
.wax-note {
  margin-top: 2.2rem;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.55;
}

/* ---------- Value list / pill rows ---------- */
.value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.value-list span {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(244, 228, 193, 0.4);
  border: 1px solid var(--gold-line);
  font-size: 0.9rem;
  color: var(--deep-gold);
  font-weight: 500;
}

/* ---------- Confidentiality ---------- */
.confidential-copy {
  padding: clamp(2rem, 4vw, 3.4rem);
  max-width: 62rem;
}
.confidential-copy p { color: var(--muted); font-size: 1.06rem; }

/* ---------- Light moment (final cinematic glow) ---------- */
.light-moment {
  position: relative;
  max-width: none;
  padding: clamp(5rem, 12vw, 10rem) var(--gutter);
  text-align: center;
  overflow: hidden;
}
.light-moment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 243, 216, 0.95), rgba(244, 228, 193, 0.3) 45%, transparent 70%);
}
.light-moment .flyby {
  position: relative;
  width: min(440px, 76vw);
  margin: 0 auto 2rem;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 52%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 45%, #000 52%, transparent 72%);
  animation: owlBreathe 8s ease-in-out infinite;
}
.light-moment h2 {
  position: relative;
  max-width: 18ch;
  margin: 0 auto 1rem;
}
.light-moment p {
  position: relative;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  max-width: 40ch;
  margin: 0 auto;
}

/* ---------- Booking ---------- */
.booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.booking-copy h2 { margin-bottom: 1rem; }
.booking-copy > p { color: var(--muted); font-size: 1.08rem; }
.booking-note {
  font-size: 0.95rem !important;
  font-style: italic;
  color: var(--deep-gold) !important;
}
.quick-contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
}
/* the two contact buttons must match in size (voice-note: «не бьются кнопки») */
.quick-contacts .button {
  flex: 1 1 0;
  min-width: 180px;
}
.quick-contacts p { width: 100%; margin: 0; font-size: 0.95rem; color: var(--muted); }
.quick-contacts a:not(.button) { color: var(--deep-gold); font-weight: 500; }
.booking-form {
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: grid;
  gap: 1.2rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.form-group input,
.form-group select {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.7);
  color: var(--graphite);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 106, 0.18);
}

/* ---------- FAQ accordion ---------- */
.accordion { display: grid; gap: 1rem; }
.accordion article {
  overflow: hidden;
  transition: border-color 0.3s;
}
.accordion article.open { border-color: var(--gold-line); }
.accordion button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.4rem 1.7rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--serif);
  color: var(--graphite);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.accordion button::after {
  content: "";
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.accordion article.open button::after { transform: rotate(-135deg); }
.accordion article p {
  margin: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 1.7rem;
  color: var(--muted);
  font-size: 1rem;
  transition: max-height 0.45s var(--ease), opacity 0.35s, padding 0.45s var(--ease);
}
.accordion article.open p {
  max-height: 320px;
  opacity: 1;
  padding: 0 1.7rem 1.5rem;
}

/* ---------- Ethics ---------- */
.ethics .reveal { max-width: 70ch; }
.ethics p { color: var(--muted); }
.ethics ul {
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
.ethics li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
  font-size: 0.98rem;
}
.ethics li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  text-align: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--gold-line);
  background: linear-gradient(180deg, transparent, rgba(244, 228, 193, 0.3));
}
.footer-logo { width: 120px; height: auto; margin: 0 auto 1.5rem; }
.site-footer p { color: var(--muted); font-size: 0.95rem; margin: 0 auto 0.6rem; max-width: 56ch; }
.site-footer a { color: var(--deep-gold); font-weight: 500; }
.site-footer a:hover { text-decoration: underline; }
.fineprint { font-size: 0.82rem !important; opacity: 0.8; }

/* ---------- Progress bar ---------- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--soft-gold), var(--deep-gold));
}

/* ---------- Modal ---------- */
.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 480px;
  width: calc(100% - 2.5rem);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  color: var(--graphite);
}
.modal::backdrop { background: rgba(36, 35, 33, 0.45); backdrop-filter: blur(4px); }
.modal > div { padding: clamp(1.8rem, 4vw, 2.6rem); position: relative; }
.modal h2 { font-size: 1.7rem; margin-bottom: 0.8rem; }
.modal-message { color: var(--muted); margin-bottom: 1.2rem; }
.modal-text {
  display: none;
  white-space: pre-wrap;
  font-family: var(--sans);
  font-size: 0.9rem;
  background: var(--milk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.2rem;
  color: var(--graphite);
}
.modal.show-text .modal-text { display: block; }
.modal-close {
  position: absolute;
  top: 1rem; right: 1.2rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .split { grid-template-columns: 1fr; }
  .split > div:first-child h2 { position: static; }
  .wax-grid { grid-template-columns: 1fr; }
  .booking { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* tighten the vertical rhythm on phones — with no desktop pin compaction the
     full 4.5rem band on every section made the page feel very long on iPhone */
  :root { --section-y: 2.4rem; }
  .section { padding-block: var(--section-y); }
  .section-head { margin-bottom: 1rem; }

  /* the fixed forest frame (hero-scene, z:-1) spans the whole viewport, and the
     desktop-only .hybrid-hero milk backgrounds never reach mobile — so the trees
     bled behind every section and washed out the dark text. Give the content
     world a solid champagne background; the forest now lives in the hero alone. */
  main > section:not(.hero) {
    position: relative;
    z-index: 1;
    background-color: var(--milk);
  }
  .site-footer { position: relative; z-index: 1; background-color: var(--milk); }
  /* a touch denser inside long prose / cards so the page reads quicker */
  p { margin-bottom: 0.9em; }
  .card, .wax-card, .mini-grid article { padding: 1.1rem 1.2rem; }
  .cards, .mini-grid, .pricing { gap: 0.8rem; }
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    min-height: 100svh;
    align-content: center;
    gap: 1.25rem;
    padding-top: clamp(6rem, 16vh, 8rem);
    padding-bottom: clamp(3rem, 10vh, 5rem);
  }
  .hero-visual { display: none; }            /* forest frame is the hero visual on mobile */
  .owl-hero-slot { max-width: 300px; margin: 0 auto; }
  /* lift the record CTA onto the first screen: on a phone the 6 chips + proof
     pushed "Записаться" below the fold (Юра: кнопка должна быть на первом
     экране). Reorder so the button sits right under the lead; the chips and
     supporting details drop below it. */
  .hero-copy { display: flex; flex-direction: column; }
  .hero-copy .eyebrow      { order: 1; }
  .hero-copy h1            { order: 2; }
  .hero-copy .lead         { order: 3; margin-bottom: 1.4rem; }
  .hero-copy .hero-actions { order: 4; margin-bottom: 1.5rem; }
  .hero-copy .chips        { order: 5; margin-bottom: 1.2rem; }
  .hero-copy .hero-line    { order: 6; }
  .hero-copy .hero-proof   { order: 7; }
  .hero-copy .contact-line { order: 8; }
  .sova-owl { display: none !important; } /* no flight choreography on mobile */
  .nav {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 253, 248, 0.97);
    backdrop-filter: blur(20px);
    padding: 0.5rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--gold-line);
    box-shadow: var(--shadow-soft);
    transform: translateY(-130%);
    transition: transform 0.45s var(--ease);
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: none; }
  .nav-cta { text-align: center; margin-top: 0.7rem; }
  .menu-toggle { display: flex; }
}

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; }
  .pricing,
  .cards.four,
  .mini-grid,
  .steps,
  .timeline { grid-template-columns: 1fr; }
  .brand span { font-size: 1.05rem; }
  blockquote { font-size: 1.3rem; }
}

/* ---------- Mobile layout fixes: lock horizontal, fit headings, compact booking ---------- */
@media (max-width: 1024px) {
  /* single column earlier so the heading + contacts never get squeezed into a
     half-width column on landscape phones and small tablets */
  .booking { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  /* contact buttons stack full width — "Перейти в канал" always fits */
  .quick-contacts .button { flex: 1 1 100%; min-width: 0; width: 100%; }
}
@media (max-width: 900px) {
  html { overflow-x: clip; }                 /* nothing can drift sideways */
  /* long headings must fit a narrow screen ("Начните с личного разговора") */
  .booking-copy h2 { font-size: clamp(1.9rem, 7.5vw, 2.5rem); }
  /* compact the stretched "Как записаться" flow + the booking block */
  .booking-flow .timeline { gap: 0.55rem; }
  .booking-flow .section-head { margin-bottom: 0.5rem; }
  .booking-form { padding: 1.3rem; }
}

/* ---------- Tactile button FX: glow ring + themed particles (sova-fx.js) ---------- */
.sova-glow {
  position: fixed; left: 0; top: 0; width: 120px; height: 120px;
  pointer-events: none; z-index: 119; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(228, 201, 135, 0.55), rgba(228, 201, 135, 0) 65%);
}
.sova-glow.g-wax {
  width: 168px; height: 168px;
  background: radial-gradient(circle, rgba(214, 170, 86, 0.72), rgba(214, 170, 86, 0) 62%);
}
.sova-particle {
  position: fixed; left: 0; top: 0; pointer-events: none;
  z-index: 120; will-change: transform, opacity;
}
.p-feather { width: 12px; height: 30px; }
.p-feather svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(120, 90, 30, 0.25)); }
.p-tarot {
  width: 20px; height: 30px; border-radius: 3px;
  background: linear-gradient(160deg, #fbf4e2, #ecdcb4);
  border: 1px solid rgba(190, 150, 80, 0.9);
  box-shadow: 0 2px 8px rgba(120, 90, 30, 0.28), inset 0 0 6px rgba(228, 201, 135, 0.5);
  display: flex; align-items: center; justify-content: center;
}
.p-tarot .tcard-glyph { color: #b8902f; font-size: 12px; line-height: 1; }
.p-wax {
  width: 14px; height: 14px; border-radius: 60% 60% 65% 35%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #e9c987 55%, #bd942f);
  box-shadow: 0 0 10px rgba(228, 201, 135, 0.8), 0 2px 6px rgba(120, 80, 20, 0.32);
}
/* tactile press on touch devices (desktop keeps the GSAP magnetic transform) */
@media (pointer: coarse) {
  .button:active, .nav-cta:active, .price.on-request:active { transform: scale(0.97); }
}

/* ---------- Mobile collapsibles "подкаты" (script.js toggles .open) ---------- */
.m-toggle { display: none; }                 /* desktop: content fully open, no toggle */
@media (max-width: 900px) {
  .m-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease, ease);
  }
  .m-collapse > .m-collapse-inner { overflow: hidden; min-height: 0; }
  .m-collapse.open { grid-template-rows: 1fr; }
  .m-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.7rem; padding: 0.5rem 0;
    background: none; border: none; cursor: pointer;
    font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
    color: var(--deep-gold); letter-spacing: 0.01em;
  }
  .m-toggle::after { content: "▾"; font-size: 0.85em; transition: transform 0.3s var(--ease, ease); }
  .m-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
}

/* ---------- Mobile hero idle owl (sova-idle-owl.js) ---------- */
.hero-owl-idle { display: none; }                /* desktop has the cinematic hero */
@media (max-width: 900px) {
  .hero-owl-idle {
    display: block; position: absolute; z-index: 1;
    top: 8.5vh; right: -1vw; width: 33vw; max-width: 145px;
    pointer-events: none;
  }
  .hero .eyebrow { max-width: 60%; }       /* keep the lead-in clear of the corner owl */
  /* soft darkening seats the owl and hides the baked owl in the forest behind */
  .hero-owl-idle::before {
    content: ""; position: absolute; inset: -32% -22% -12% -28%; z-index: -1;
    background: radial-gradient(closest-side, rgba(8, 6, 3, 0.58), rgba(8, 6, 3, 0) 76%);
  }
  .hero-owl-branch {
    position: absolute; bottom: 1%; right: -14%; width: 130%; height: auto;
    opacity: 0.92; filter: brightness(0.82) saturate(0.9);
  }
  .hero-owl-anim { position: relative; width: 100%; }
  .hero-owl-canvas {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  }
  .owl-eye {
    position: absolute; width: 8%; height: 8%; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 228, 150, 0.95), rgba(255, 196, 86, 0) 70%);
    opacity: 0; pointer-events: none;
    animation: owlEyeSpark 5s ease-in-out infinite;
  }
  .owl-eye-l { left: 40%; top: 18%; }
  .owl-eye-r { left: 49.5%; top: 18%; }
}
@keyframes owlEyeSpark {
  0%, 86%, 100% { opacity: 0; transform: scale(0.5); }
  90% { opacity: 1; transform: scale(1.2); }
  94% { opacity: 0.35; transform: scale(0.9); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .sova-owl { display: none !important; }
  .owl-static { animation: none !important; }
}