:root {
  --bg: #DFD6CB;
  --bg-soft: #EAE3D9;
  --text: #54330F;
  --text-soft: rgba(84, 51, 15, 0.62);
  --line: rgba(84, 51, 15, 0.16);
  --card: #ffffff;
  --gold: #CB9A34;
  --gold-light: #E9C878;
  --hero-dark: #3A2410;
  --cream: #F3ECE2;
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --content-max: 820px;

  /* Three-tier opacity system for every dark panel on the home page, instead of ad hoc
     numbers per block. Pick the tier by what the block is FOR, not by eyeballing it:
     soft   — the frame is the point (Направления работы): stays sharp, no blur.
     firm   — dense small text (price lists, FAQ, the course-info block): needs the most
              protection, gets backdrop-blur so it reads as frosted glass, not a flat tint.
     peak   — the closing block: frame should read almost fully, text leans on
              text-shadow instead of panel coverage. */
  --panel-soft: .35;
  --panel-firm: .55;
  --panel-peak: .15;
}

/* Backgrounds stay full-bleed; only the reading column is capped, so desktop lines
   don't run the whole 1280px+ width. */
.hero__content,
.section,
.page-header,
.filters,
.search-box,
.card-list,
.contact-list,
.contact-actions,
.price-note {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
/* hero children are flex items: without an explicit width, auto side margins would
   shrink them to their content instead of centring a full-width column */
.hero__content { width: 100%; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { font-family: 'Prata', serif; font-weight: 400; margin: 0; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

#app {
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background: var(--bg);
}

.pages { position: relative; }

.page {
  display: none;
  position: relative;
  z-index: 2;
  /* Opaque so the fixed video layer (z-index 1) can never show through on the light
     pages. .page--dark overrides this to transparent — it wants the video visible. */
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + 36px);
  animation: page-in .38s var(--ease);
}
.page.is-active { display: block; }

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- DARK HOME (page background is transparent — the fixed video layer shows
   through it in the gaps; the .sec blocks below carry their own light/dark treatment) ---------- */
.page--dark {
  background: transparent;
  color: var(--cream);
}
.page--dark .hero__content { margin-bottom: 36px; }

.page--dark ~ * .bottom-nav,
.bottom-nav { border: 1px solid rgba(243, 236, 226, 0.09); }

/* ---------- BACKGROUND FRAME (site-wide, fixed, scroll-scrubbed) ---------- */
/* One 24-frame sequence, fixed behind everything, drawn to a full-bleed canvas (cover-
   cropped in js/app.js — canvas has no native object-fit). Non-home pages cover it
   completely with their own opaque .page background. Dark blocks (.video-zone) are only
   partially opaque, so the frame shows through them; light blocks are fully opaque and
   hide it completely — never make .sec-light transparent, that's what keeps the text
   readable everywhere else on the site. The frame only advances while a .video-zone is
   crossing the middle of the screen and holds still the rest of the time; see
   readBgProgress() in js/app.js — that is the "freeze on light blocks" mechanism, not a
   separate pause/play switch. */
.bg-video-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
#bgCanvas { width: 100%; height: 100%; display: block; }

/* Hero has no background of its own — it sits directly over the fixed video layer.
   Four static layers give the same depth the reference site uses: a diagonal top-left→
   bottom-right dark wash, a bottom wash so the copy always sits on solid dark, a left
   wash for the eyebrow/logo corner, and a faint grain texture on top so the dark
   gradient doesn't band. */
.hero-ov { position: absolute; inset: 0; z-index: 1; }
.hero-ov--diag { background: linear-gradient(160deg, rgba(18,12,10,.88) 0%, rgba(18,12,10,.35) 50%, rgba(18,12,10,.12) 100%); }
.hero-ov--bottom { background: linear-gradient(to top, rgba(18,12,10,.98) 0%, rgba(18,12,10,.5) 30%, transparent 60%); }
.hero-ov--left { background: linear-gradient(to right, rgba(18,12,10,.7) 0%, transparent 60%); }
.hero-grain {
  position: absolute; inset: 0; z-index: 1; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- STATS BAND ---------- */
.stats-band {
  position: relative;
  z-index: 2;
  margin: 10px 20px 0;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(32,16,9,.9) 0%, rgba(22,11,6,.95) 50%, rgba(28,14,8,.92) 100%);
  border: 1px solid rgba(233, 200, 120, .18);
}
.stats-band__inner { display: flex; align-items: stretch; max-width: var(--content-max); margin: 0 auto; padding: 0 12px; }
.sband-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px 8px; text-align: center; }
.sband-val { font-family: 'Prata', serif; font-size: clamp(20px, 5vw, 28px); color: var(--gold-light); line-height: 1; }
.sband-lbl { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,236,226,.5); }
.sband-sep { width: 1px; margin: 14px 0; background: rgba(233, 200, 120, .18); flex-shrink: 0; }

/* ---------- SEC (light/dark alternating blocks) ---------- */
.sec { position: relative; z-index: 2; padding: 44px 20px; }
.sec .wrap { position: relative; z-index: 2; max-width: var(--content-max); margin: 0 auto; }
/* Fully opaque — this is what hides the background video completely on light blocks. */
.sec-light {
  background: var(--bg);
  color: var(--text);
  border-radius: 32px;
  box-shadow: 0 30px 60px rgba(84, 51, 15, .1);
}
/* Only partially opaque (not a solid fill) — this is what lets the fixed frame show
   through on dark blocks, "как преображается девушка" per the client. Text-shadow
   carries the legibility load that a solid panel used to — same fix the pre-panel hero
   copy used. This is the "soft" tier: the frame stays sharp behind it, no blur, because
   this is the block where the client wants the picture itself to read, not the text
   density (that's what the separate .sec-dark--info blocks below are for). */
.sec-dark {
  color: var(--cream);
  background: rgba(16, 10, 3, var(--panel-soft));
  border-radius: 32px;
  margin: 10px 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.sec-dark .eyebrow { color: var(--gold-light); }
.sec-dark .eyebrow i { background: var(--gold-light); }
.sec-dark h2 { color: var(--cream); }
.sec-dark h2, .sec-dark .wrap p, .sec-dark .eyebrow, .sec-dark .dir-hint,
.sec-dark .step h3, .sec-dark .step p, .sec-dark .link-more--light {
  text-shadow: 0 2px 14px rgba(10, 6, 1, .85);
}
.sec h2 { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.24; margin-bottom: 16px; }
.dir-hint { margin: -8px 0 4px; font-size: 12px; color: rgba(243, 236, 226, .55); }

/* "Firm" tier — the reinforcement blocks (усилители): course info, price lists, FAQ.
   Separate standalone blocks now, not squeezed beside the main content — each one is its
   own full-width dark glass panel. Denser text needs denser cover, so this tier sits at
   --panel-firm, well above --panel-soft — but backdrop-blur is what actually buys the
   legibility, not just alpha: the frame behind still shows as colour and light, just
   soft-focused, so the panel reads as frosted glass over the transformation rather than
   a flat tinted box stacked on top of it. */
.sec-dark--info {
  background: rgba(16, 10, 3, var(--panel-firm));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(233, 200, 120, .3);
  padding-top: 30px;
  padding-bottom: 30px;
}

/* "Peak" tier — the closing block. Deliberately the most transparent of all and the
   only one with zero blur, so the frame reads at its sharpest right here (js/app.js also
   drops the frame crossfade and adds a slow push-in as this block approaches, so it's a
   crisp, detailed still, not a soft mid-blend). A thin gold rule ties it to the same
   family as .sec-dark--info and .stats-band instead of reading as one-off. */
.sec-dark--peak {
  background: rgba(16, 10, 3, var(--panel-peak));
  border: 1px solid rgba(233, 200, 120, .35);
}
.sec-dark--peak::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(16, 10, 3, .3) 0%, rgba(16, 10, 3, .05) 55%, transparent 100%);
  pointer-events: none;
}
.sec-dark--peak .wrap { text-shadow: 0 2px 16px rgba(10, 6, 1, .9); }
.sec-dark--peak .cta-badge { text-shadow: none; }

/* "Brown" — the last two blocks on the page (Перед визитом, closing CTA), sharing one
   deliberately literal treatment instead of each having its own tier: brand brown
   (--hero-dark) at a flat 50%, no blur, so the frame reads through both exactly the same
   way. 30% first (client's own earlier number) read as too washed out; 50% still lets
   the frame come through clearly (it's well under the .86-ish opacity that made older
   panels on this site read as solid) while giving text a real half-tone base to sit on
   instead of leaning on text-shadow alone. Keep the shadow anyway — it's cheap insurance
   for the busiest, brightest frames the canvas ever hits, same fix the pre-panel hero
   copy used. */
.sec-dark--brown { background: rgba(58, 36, 16, .5); }
.sec-dark--brown h2, .sec-dark--brown .eyebrow, .sec-dark--brown .wrap p,
.sec-dark--brown .faq-grid b, .sec-dark--brown .faq-grid span {
  text-shadow: 0 2px 16px rgba(10, 6, 1, .85), 0 1px 3px rgba(10, 6, 1, .9);
}
.sec-dark--brown .faq-grid li { background: rgba(58, 36, 16, .35); border-color: rgba(233, 200, 120, .22); }

.link-more--light { color: var(--cream); border-bottom-color: rgba(243, 236, 226, .5); }
.sec-dark .step__num { color: var(--gold-light); }
.sec-dark .step p { color: rgba(243, 236, 226, .72); }
.sec-dark .step h3 { color: var(--cream); }

/* ---------- ACCENT CARD (text styling reused by the hero promo card AND the standalone
   .sec-dark--info blocks — .accent-card itself is now only a wrapper where one is still
   needed (the hero promo, which sits beside the hero copy rather than as its own block);
   the info blocks apply these classes directly to .wrap, no extra nested panel) ---------- */
.accent-card {
  border-radius: 22px;
  padding: 26px;
  background: rgba(16, 10, 3, var(--panel-firm));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(233, 200, 120, .3);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(10, 6, 1, .7);
}

.accent-card__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 22px 0 12px;
}
.accent-card__label:first-child { margin-top: 0; }

.accent-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.accent-card__list li { display: flex; flex-direction: column; gap: 4px; }
.accent-card__list b { font-size: 14px; font-weight: 700; }
.accent-card__list span { font-size: 13px; line-height: 1.5; color: rgba(243, 236, 226, .7); }

.accent-card__tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #241305; background: var(--gold);
  padding: 5px 12px; border-radius: 999px;
}
.accent-card__price { display: block; margin: 15px 0 6px; font-family: 'Prata', serif; font-size: 28px; color: var(--gold-light); }
.accent-card__price s { font-size: 15px; color: rgba(243, 236, 226, .45); margin-left: 9px; }
.accent-card__title { font-size: 16px; margin-bottom: 8px; color: var(--cream); }
.accent-card__note { font-size: 13px; line-height: 1.5; color: rgba(243, 236, 226, .72); margin: 0 0 15px; }

/* ---------- DIRECTIONS CARD GRID (flip cards) ---------- */
.dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 22px; }

.dir-card {
  position: relative;
  height: 280px;
  perspective: 1200px;
  cursor: pointer;
  touch-action: manipulation;
}
.dir-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s var(--ease);
  transform-style: preserve-3d;
}
/* Click/tap toggles this class in js/app.js — the primary interaction on every device,
   touch included, since :hover alone never fires on a phone. Hover below is a bonus for
   mice, not the mechanism itself. */
.dir-card.is-flipped .dir-card__inner { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .dir-card:hover .dir-card__inner { transform: rotateY(180deg); }
}

.dir-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dir-card__face--front {
  border: 1px solid rgba(243, 236, 226, .1);
  transition: box-shadow .3s var(--ease);
}
.dir-card:hover .dir-card__face--front { box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.dir-card__img { height: 110px; flex-shrink: 0; background-size: cover; background-position: center; transition: transform .4s var(--ease); }
.dir-card:hover .dir-card__img { transform: scale(1.05); }
/* This is what the parent .sec-dark being much more transparent now (--panel-soft) costs
   the card grid: a photo tile can't lean on the section panel for legibility any more, it
   needs its own solid-enough backing regardless of how bright the frame behind gets. The
   photo itself stays untouched (it's already opaque); only the text area below it needs
   this. */
.dir-card__body { padding: 12px 14px 16px; background: rgba(16, 10, 3, .78); flex: 1; }
.dir-card__body h3 { font-size: 14px; color: var(--cream); margin-bottom: 4px; }
.dir-card__body p { margin: 0; font-size: 11.5px; line-height: 1.4; color: rgba(243, 236, 226, .6); }
.dir-card__price { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--gold-light); }
.dir-arr {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(16,10,3,.6); color: var(--cream); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-style: italic; font-weight: 700; font-family: 'Prata', serif;
  transition: background-color .2s var(--ease);
}
.dir-card:hover .dir-arr { background: var(--gold); color: #241305; }

/* Back face — same frosted-glass language as .sec-dark--info / .accent-card, so a
   flipped procedure card reads as the same design system, not a one-off popup. */
.dir-card__face--back {
  transform: rotateY(180deg);
  background: rgba(16, 10, 3, var(--panel-firm));
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(233, 200, 120, .35);
  padding: 16px;
  justify-content: flex-start;
}
.dir-card__face--back h3 { font-size: 14px; color: var(--gold-light); margin: 0 0 6px; }
/* One paragraph only, by design — the client asked for the back to hold just the
   procedure description and fit inside the fixed card height, no overflow. Verified: at
   the correct 11.5px/1.5 all four descriptions fit the 280px card with room to spare
   (measured 278px of content against a 278px face, zero overflow) — no line-clamp
   needed. Selector is 3 classes deep, not just one: `.sec .wrap p` (generic body copy
   elsewhere on the page, defined further down the file) ties this at 2-classes-plus-
   element specificity and then wins on source order, which is what was actually handing
   this paragraph 14.5px/1.68 instead of 11.5px/1.5 before — confirmed via the matched
   CSSOM rules, not guessed. That mismatch was the real overflow, not the copy length. */
.dir-card .dir-card__face--back p.dir-card__back-text {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(243, 236, 226, .85);
}
.dir-card__more {
  margin-top: auto; padding-top: 8px; font-size: 11.5px; font-weight: 700;
  color: var(--cream); display: inline-flex; align-items: center; gap: 5px;
}

/* CTA banner now lives inside a .sec-dark .wrap, no longer a standalone block */
.cta-banner { text-align: center; }
.cta-banner .btn--dark { background: var(--gold); color: #241305; }

/* ---------- HOME PRICE LIST (reuses the real .card__row/.price-lines pattern from the
   Прайс page, themed for the dark glass panel instead of a white card — same structure
   the client already recognises, not a one-off list style) ---------- */
.price-item + .price-item { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(233, 200, 120, .18); }
.price-item .card__row { margin-bottom: 8px; }
.price-item .card__tag { color: var(--gold-light); }
.price-item .card__meta { color: rgba(243, 236, 226, .55); }
.price-item h3 { font-size: 16px; color: var(--cream); margin-bottom: 10px; text-shadow: 0 2px 14px rgba(10, 6, 1, .85); }
.price-item .price-line { border-bottom-color: rgba(243, 236, 226, .14); color: rgba(243, 236, 226, .65); }
.price-item .price-line b { color: var(--cream); }
.price-item .price-line--trial span { color: var(--gold-light); }
.price-item .price-line--trial b { color: var(--gold-light); }

/* ---------- FAQ GRID (the "что стоит знать заранее" block — same stat-tile language as
   .stats-band near the hero: big value, small caption, always two columns, so the block
   reads as a sibling of that one instead of an unrelated list) ---------- */
.faq-grid {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px;
}
.faq-grid li {
  padding: 16px 14px;
  background: rgba(16, 10, 3, .3);
  border: 1px solid rgba(233, 200, 120, .18);
  border-radius: 16px;
}
.faq-grid b {
  display: block; font-family: 'Prata', serif; font-size: 19px; color: var(--gold-light);
  margin-bottom: 6px; text-shadow: 0 2px 14px rgba(10, 6, 1, .85);
}
.faq-grid span {
  display: block; font-size: 12px; line-height: 1.4; color: rgba(243, 236, 226, .72);
  text-shadow: 0 1px 10px rgba(10, 6, 1, .7);
}

/* ---------- REVEAL ON SCROLL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (min-width: 960px) {
  .sec { padding: 60px 24px; }
  .dir-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- EYEBROW ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.eyebrow i { display: block; width: 18px; height: 1px; background: var(--gold); }
.eyebrow--light { color: #E3C69B; }
.eyebrow--light i { background: #E3C69B; }

/* ---------- HERO ---------- */
/* min-height, not height: the hero has to grow when the content is taller than the
   screen (it gained the offer card), otherwise the copy overflows upward and the old
   `overflow: hidden` silently cut the heading off on short phones.
   dvh so the collapsing browser address bar doesn't shrink the usable area. */
.hero {
  position: relative;
  z-index: 2;
  min-height: 94vh;
  min-height: 94dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* The hero deliberately has no background of its own — it is transparent over the fixed
   video layer, same mechanism as any other .video-zone block further down the page. */

.hero__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
  margin-bottom: auto;
}
.hero__logo {
  height: 46px;
  width: auto;
  display: block;
  /* the source is dark brown for a light background; screen it onto the dark hero the
     same way the lotus footage is composited, so it reads as cream instead of near-black */
  filter: brightness(0) invert(1) opacity(0.92);
}
@media (min-width: 600px) {
  .hero__logo { height: 56px; }
}
.pill-btn {
  background: rgba(243, 236, 226, 0.12);
  border: 1px solid rgba(243, 236, 226, 0.3);
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 0 24px 44px;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.hero__promo { max-width: 360px; }
@media (min-width: 960px) {
  .hero__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    column-gap: 36px;
    align-items: end;
  }
  .hero__promo { max-width: none; }
}

.hero__title {
  /* Prata sets wider than Playfair did, so the size scales with the viewport to keep
     the accent line "фигуры и лица" on a single row on narrow phones */
  font-size: clamp(32px, 8.8vw, 50px);
  line-height: 1.14;
  letter-spacing: -.005em;
}
/* Prata ships a single upright weight, so the accent line is slanted by hand */
.hero__title em {
  display: inline-block;
  font-style: normal;
  transform: skewX(-9deg);
  color: var(--gold-light);
}

.hero__text {
  margin: 18px 0 30px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(243, 236, 226, 0.78);
  max-width: 40ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
/* every interactive element answers within the 150–300ms micro-interaction window */
.btn, .pill-btn, .link-more, .filter-chip, .nav-btn { transition: opacity .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
.btn:hover, .pill-btn:hover, .link-more:hover { opacity: .85; }
.btn:focus-visible, .pill-btn:focus-visible, .link-more:focus-visible,
.filter-chip:focus-visible, .nav-btn:focus-visible, .card:focus-visible,
.dir-card:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.btn--gold { background: var(--gold); color: #241305; }
.btn--outline-light { border-color: rgba(243,236,226,0.35); color: var(--cream); }
.btn--dark { background: var(--hero-dark); color: var(--cream); }
.btn--outline-dark { border-color: var(--line); color: var(--text); }
.btn--block { display: flex; justify-content: center; width: 100%; }

.scroll-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243, 236, 226, 0.45);
}

/* ---------- SECTIONS ---------- */
.section { padding: 52px 24px; }
.section h2 { font-size: clamp(22px, 6.2vw, 30px); line-height: 1.24; margin-bottom: 16px; }
.sec .wrap p { font-size: 14.5px; line-height: 1.68; color: var(--text-soft); margin: 0 0 14px; }
.sec-dark .wrap p { color: rgba(243, 236, 226, .72); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
}

/* ---------- STEPS (home) ---------- */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.step {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
}
.step__num {
  font-family: 'Prata', serif;
  font-size: 20px;
  color: var(--gold);
  line-height: 1.2;
}
.step h3 { font-size: 15.5px; margin-bottom: 5px; }
.step p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }

.cta-banner p { font-size: 13.5px; margin: 8px 0 22px; }
.cta-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #241305;
  background: var(--gold);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ---------- PAGE HEADER ---------- */
.page-header { padding: 30px 24px 6px; }
.page-header h1 { font-size: clamp(26px, 7.4vw, 36px); line-height: 1.2; }
.page-header p { margin: 6px 0 0; font-size: 13.5px; color: var(--text-soft); }

/* ---------- FILTERS ---------- */
.filters {
  display: flex;
  gap: 8px;
  padding: 18px 20px 4px;
  overflow-x: auto;
}
.filter-chip {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.filter-chip.is-active { background: var(--text); border-color: var(--text); color: var(--cream); }

/* ---------- PROCEDURES ---------- */
.card-list {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.card {
  background: var(--card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(84,51,15,0.06);
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.card-list--grid .card:active { transform: scale(.97); }
.card__media {
  height: 96px;
  background: linear-gradient(135deg, var(--bg-soft), #d8cbb6);
  background-size: cover;
  background-position: center;
}
.card-list--grid .card__media { height: 150px; }
.card-list--grid .card__body { padding: 12px; }
.card-list--grid .card__body h3 { font-size: 14px; }
.card-list--grid .card__body p {
  font-size: 11.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-list--grid .card__row { flex-direction: column; align-items: flex-start; gap: 3px; }
.card-list--grid .card__tag { font-size: 9.5px; margin-bottom: 0; }
.card-list--grid .card__meta { font-size: 10.5px; }
.card-list--grid .card__price { font-size: 12px; }
.card__body { padding: 16px; }
.card__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card__tag {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.card__row .card__tag { margin-bottom: 0; }
.card__meta { font-size: 11.5px; color: var(--text-soft); }
.card__body h3 { font-size: 16px; margin-bottom: 6px; }
.card__body p { margin: 0 0 10px; font-size: 13px; color: var(--text-soft); line-height: 1.45; }
.card__price { display: block; font-size: 13.5px; font-weight: 700; }

/* ---------- PRICE ---------- */
.card--price { cursor: default; }
.card--price h3 { margin-bottom: 12px; }

.price-lines { display: flex; flex-direction: column; }
.price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-soft);
}
.price-line:last-child { border-bottom: none; }
.price-line b {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.price-line--trial span { color: var(--gold); font-weight: 600; }
.price-line--trial b { color: var(--gold); }

.search-box { padding: 14px 24px 4px; }
.search-box input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--text);
  font-family: inherit;
}
.search-box input::placeholder { color: var(--text-soft); }

.price-note { padding: 10px 24px 0; font-size: 12.5px; color: var(--text-soft); }

/* ---------- CONTACTS ---------- */
.contact-list { padding: 16px 24px 0; }
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row__label { font-size: 12.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.contact-row__value { font-size: 14.5px; font-weight: 600; }

.map-embed { margin: 20px 24px 0; border-radius: 16px; overflow: hidden; }
.map-embed iframe { display: block; }

.how-to { padding-top: 20px; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.steps li { font-size: 13.5px; color: var(--text-soft); line-height: 1.5; }

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 24px 0;
}

/* ---------- BOTTOM NAV ---------- */
/* Плавающая кнопка "Онлайн-запись" от виджета YClients (.yButton) перекрывала
   нижнюю навигацию — поднимаем её выше пилюли меню. Виджет догружает свой CSS
   (newweb.css) уже после нашего и с тем же !important, так что при равной
   специфичности побеждает он: приходится намеренно поднимать нашу специфичность
   выше, чем у их правила, а не просто повторять !important. */
.yButton.yButton.yButton.bottom.right {
  bottom: calc(var(--nav-h) + 32px + var(--safe-b)) !important;
}

.bottom-nav {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(16px + var(--safe-b));
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  height: var(--nav-h);
  padding: 0 10px;
  background: var(--hero-dark);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 12px 30px rgba(20,12,4,0.35);
  z-index: 10;
}

.nav-btn {
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 16px;
  color: rgba(243, 236, 226, 0.5);
  cursor: pointer;
  position: relative;
}
.nav-btn svg { width: 21px; height: 21px; }
.nav-btn span { font-size: 10px; font-weight: 600; letter-spacing: .01em; }
.nav-btn.is-active { color: var(--cream); }
.nav-dot {
  position: absolute;
  top: 4px;
  right: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.nav-btn.is-active .nav-dot { opacity: 1; }

/* ---------- PROCEDURE MODAL ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.modal.is-open { opacity: 1; pointer-events: auto; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 4, 0.55);
}

.modal__sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 40px rgba(20,12,4,0.3);
  transform: translateY(28px);
  transition: transform .34s var(--ease);
}
.modal.is-open .modal__sheet { transform: translateY(0); }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  color: var(--text);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.modal__media {
  height: 220px;
  background: linear-gradient(135deg, var(--bg-soft), #d8cbb6);
  background-size: cover;
  background-position: center;
  border-radius: 28px 28px 0 0;
}

.modal__body { padding: 20px 24px 36px; }
.modal__title { font-size: 24px; margin: 6px 0 4px; }

.modal__section { margin-top: 18px; }
.modal__section h4 {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gold);
  margin-bottom: 6px;
}
.modal__section p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.modal__section--warn h4 { color: #9C4A3C; }

.modal__price {
  display: block;
  margin-top: 22px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
}

.modal__body .btn { margin-top: 16px; }