/* Главная 2026: стили из макета 04_Макеты/v3/index.html (собрано build_h26_theme.py, руками не править) */
  :root {
    --white: #FFFFFF;
    --mist: #F2F3F1;
    --stone: #DCDFDB;
    --slate: #5D6560;
    --graphite: #1C211F;
    --forest: #1F3E33;
    --gold: #B08D4A;

    --accent: var(--forest);
    --accent-hover: #17322A;
    --on-accent: #FFFFFF;

    --r-lg: 28px;
    --r-md: 20px;
    --r-sm: 12px;
    --wrap: 1320px;
    --gutter: clamp(16px, 3vw, 32px);
    --sans: "Onest", system-ui, sans-serif;
    --serif: "Literata", Georgia, serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
  }
  html[data-accent="gold"]     { --accent: #B08D4A; --accent-hover: #C29E5A; --on-accent: #1C211F; }
  html[data-accent="graphite"] { --accent: #1C211F; --accent-hover: #000000; --on-accent: #FFFFFF; }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--white); color: var(--graphite);
    font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  /* ---------- Кнопки ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 0 28px; border-radius: 14px;
    font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent;
    transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
  }
  .btn:active { transform: scale(.98); }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-ghost { background: rgba(255,255,255,.7); color: var(--graphite); border-color: var(--stone); }
  .btn-ghost:hover { border-color: var(--graphite); background: var(--white); }
  .btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: 12px; }

  /* ---------- Шапка ---------- */
  .top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); transition: box-shadow .3s; }
  .top.is-scrolled { box-shadow: 0 1px 0 var(--stone), 0 8px 24px rgba(28,33,31,.06); }
  .top-row { display: flex; align-items: center; gap: 28px; height: 76px; }
  .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
  .brand-mark {
    width: 54px; height: 40px; background: var(--forest);
    -webkit-mask: url(img/logo.svg) center / contain no-repeat; mask: url(img/logo.svg) center / contain no-repeat;
  }
  .brand-text { line-height: 1.15; }
  .brand-text b { display: block; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
  .brand-text span { font-size: 13px; color: var(--slate); }
  .info { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; text-decoration: none; }
  .info-ico {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; background: var(--mist); color: var(--graphite);
  }
  .info small { display: block; color: var(--slate); font-size: 13px; }
  .info b { font-weight: 600; font-size: 15px; }
  .info-addr { margin-left: 12px; }
  .top-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
  .soc { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); text-decoration: none; transition: background-color .2s; }
  .soc:hover { background: var(--stone); }
  .nav-row { border-top: 1px solid var(--stone); }
  .nav { display: flex; gap: 34px; height: 50px; align-items: center; }
  .nav a { position: relative; text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .nav a:hover::after { transform: scaleX(1); }
  .icon-btn { display: none; }

  /* ---------- Первый экран ---------- */
  .hero { padding: 16px 0 0; }
  .hero-card {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    min-height: clamp(620px, 80vh, 780px);
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    background: var(--mist);
  }
  .hero-photo { grid-column: 2; grid-row: 1; position: relative; margin: 14px 14px 14px 0; border-radius: var(--r-md); overflow: hidden; }
  .hero-photo img {
    position: absolute; inset: -6% 0; width: 100%; height: 112%;
    object-fit: cover; object-position: 50% 30%;
    will-change: transform;
  }
  .hero-body {
    grid-column: 1; grid-row: 1;
    position: relative; z-index: 2; align-self: center;
    padding: 48px clamp(24px, 4vw, 64px) 150px;
  }
  h1 {
    margin: 0 0 22px; font-family: var(--serif); font-weight: 500;
    font-size: clamp(2.3rem, 3.7vw, 3.6rem); line-height: 1.07; letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lead { margin: 0 0 34px; max-width: 28em; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: #3E4541; }
  .ctas { display: flex; flex-wrap: wrap; gap: 12px; }

  .hero-bar {
    position: absolute; z-index: 3; left: 24px; right: 38px; bottom: 28px;
    display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); align-items: stretch;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(28,33,31,.08);
  }
  .bar-item { padding: 18px 22px; display: flex; align-items: center; gap: 14px; text-decoration: none; }
  .bar-item + .bar-item { border-left: 1px solid var(--stone); }
  .bar-item small { display: block; font-size: 13.5px; color: var(--slate); }
  .bar-item b { font-weight: 600; font-size: 15.5px; }
  .faces { display: flex; flex-shrink: 0; }
  .faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); }
  .faces img + img { margin-left: -10px; }
  .chief-face img { width: 52px; height: 52px; }
  .score { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 1px; font-family: var(--serif); font-size: 26px; line-height: 1.1; font-weight: 500; }
  .score i { font-style: normal; color: var(--gold); font-size: 18px; }
  .score .tbd { align-self: center; }
  .asof { margin: 10px 4px 0; text-align: right; font-size: 12.5px; color: var(--slate); }
  .tbd { display: inline-block; width: 52px; height: 13px; border-radius: 4px; background: var(--stone); opacity: .7; }
  a.bar-item { transition: background-color .2s; }
  a.bar-item:hover { background: rgba(255,255,255,.7); }
  .bar-item:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
  .bar-item:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

  /* ---------- Блок 2: с чем можем помочь ---------- */
  .help { padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px); }
  .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
  h2 {
    margin: 0; font-family: var(--serif); font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.02em;
  }
  .more { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; color: var(--slate); white-space: nowrap; }
  .more span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--graphite); transition: transform .3s var(--ease), background-color .3s; }
  .more:hover span { transform: rotate(-45deg); background: var(--stone); }

  .ask { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-bottom: 28px; }
  .ask p { margin: 0; font-weight: 600; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .chips button {
    min-height: 44px; padding: 0 18px; white-space: nowrap;
    background: var(--mist); color: var(--graphite); border: 1px solid transparent; border-radius: 999px;
    font: 500 15px/1 var(--sans); cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s;
  }
  .chips button:hover { border-color: var(--stone); background: var(--white); }
  .chips button[aria-pressed="true"] { background: var(--graphite); color: #fff; }

  .cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .card {
    position: relative; overflow: hidden; border-radius: var(--r-md);
    aspect-ratio: 3 / 4; background: #3A403D; color: #fff; isolation: isolate;
    transition: opacity .35s, transform .45s var(--ease), box-shadow .45s;
  }
  .card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(28,33,31,.2); }
  .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
  .card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(20,24,22,0) 28%, rgba(20,24,22,.52) 50%, rgba(20,24,22,.9) 78%, rgba(20,24,22,.94) 100%);
    transition: opacity .45s;
  }
  .card:hover > img { transform: scale(1.06); }
  .tag {
    position: absolute; top: 16px; left: 16px;
    padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
    background: rgba(255,255,255,.88); color: var(--graphite); backdrop-filter: blur(6px);
  }
  .card-body {
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
    position: absolute; left: 0; right: 0; top: 54%; bottom: 0;
    display: flex; flex-direction: column; padding: 0 20px 18px;
    transition: top .55s var(--ease);
  }
  .card:hover .card-body, .card:focus-within .card-body { top: 34%; }
  .card h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.12; letter-spacing: -0.01em; }
  .card h3 a { text-decoration: none; }
  .card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .card h3 a:focus-visible { outline: none; }
  .card:has(h3 a:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
  .what { margin: 0; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.88);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .reveal-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
  .reveal-more > div { overflow: hidden; }
  .card:hover .reveal-more, .card:focus-within .reveal-more { grid-template-rows: 1fr; }
  .procs { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
  .procs a {
    position: relative; z-index: 2; display: inline-block; padding: 5px 10px; border-radius: 999px;
    font-size: 13px; text-decoration: none; background: rgba(255,255,255,.16); color: #fff;
    transition: background-color .2s;
  }
  .procs a:hover { background: rgba(255,255,255,.3); }
  .who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; font-size: 13.5px; color: #fff; }
  .who .faces img { width: 30px; height: 30px; border-color: rgba(255,255,255,.9); }
  .who .faces img + img { margin-left: -8px; }

  .card.nophoto { background: linear-gradient(160deg, #6B736E 0%, #2B312E 100%); }
  .card.nophoto .ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -80%); font-size: 13px; color: rgba(255,255,255,.6); border: 1px dashed rgba(255,255,255,.4); padding: 8px 12px; border-radius: 10px; white-space: nowrap; }

  .cards.is-filtering .card:not(.is-match) { opacity: .32; transform: scale(.98); }
  .card.is-match { box-shadow: 0 0 0 3px var(--gold); }

  .consult {
    margin-top: 16px; padding: 26px 28px; border-radius: var(--r-md); background: var(--mist);
    display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap;
  }
  .consult p { margin: 0; max-width: 44em; }
  .consult b { font-family: var(--serif); font-weight: 500; font-size: 22px; display: block; margin-bottom: 4px; }
  .consult a.link { color: var(--slate); text-underline-offset: 3px; }


  /* ---------- Общее для блоков 3-9 ---------- */
  .sec { padding: clamp(64px, 8vw, 112px) 0; }
  .sec.tint { background: var(--mist); }
  .sec-lead { margin: 12px 0 0; color: var(--slate); max-width: 36em; }
  .sec-head > div { min-width: 0; }
  .arrows { display: flex; gap: 8px; }
  .arrows[hidden] { display: none; }
  .arrows button {
    width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--white); color: var(--graphite); display: grid; place-items: center;
    transition: background-color .25s, transform .25s var(--ease);
  }
  .sec:not(.tint) .arrows button { background: var(--mist); }
  .arrows button:hover { background: var(--stone); }
  .arrows button:active { transform: scale(.94); }
  .rail {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    margin: 0; padding: 0 0 6px; list-style: none; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > li { scroll-snap-align: start; flex-shrink: 0; }
  .chipline { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .chipline li { padding: 6px 12px; border-radius: 999px; background: var(--mist); font-size: 13.5px; }
  .tint .chipline li { background: var(--white); }
  .note { font-size: 13px; color: var(--slate); }
  .sec:not(.tint) .case, .sec:not(.tint) .ya, .sec:not(.tint) .platform { background: var(--mist); }
  .sec:not(.tint) .case .chipline li, .sec:not(.tint) .ya .bars .meter { background: var(--white); }

  /* ---------- Блок 3: истории лечения ---------- */
  .case { width: calc((100% - 32px) / 3); background: var(--white); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
  .compare { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #2B312E; touch-action: pan-y; user-select: none; }
  .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .compare .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
  .compare .handle {
    position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px;
    background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); pointer-events: none;
  }
  .compare .handle::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231C211F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
  }
  .compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
  .compare input[type=range]:focus-visible + .handle::after { outline: 3px solid var(--gold); outline-offset: 2px; }
  .ba { position: absolute; top: 14px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.9); color: var(--graphite); pointer-events: none; }
  .ba.b { left: 14px; } .ba.a { right: 14px; }
  .case-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .case h3 { margin: 10px 0 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.18; }
  .case dl { margin: 0 0 16px; display: grid; gap: 10px; font-size: 15px; }
  .case dt { font-size: 13px; color: var(--slate); }
  .case dd { margin: 2px 0 0; }
  .case .link { margin-top: auto; font-weight: 600; color: var(--graphite); text-underline-offset: 4px; }

  /* ---------- Блок 4: команда ---------- */
  .doc { width: calc((100% - 48px) / 4); display: flex; flex-direction: column; }
  .doc-actions { margin-top: auto; }
  .doc-photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: #3B403E; }
  .doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .8s var(--ease); }
  .doc:hover .doc-photo img { transform: scale(1.04); }
  .exp { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; }
  .doc h3 { margin: 16px 0 4px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; }
  .doc .role { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: var(--forest); }
  .doc .about { margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
  .doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .doc-actions .btn { flex: 1; min-height: 46px; padding: 0 14px; font-size: 14.5px; border-radius: 12px; }

  /* ---------- Блок 5: отзывы ---------- */
  .rev-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
  .ya { background: var(--white); border-radius: var(--r-md); padding: 28px; }
  .ya-top { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 6px; }
  .ya-score { font-family: var(--serif); font-size: 64px; line-height: .9; font-weight: 500; }
  .ya-stars { color: var(--gold); letter-spacing: 2px; font-size: 18px; }
  .ya-meta { font-size: 14.5px; color: var(--slate); }
  .award { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 22px; padding: 7px 12px; border-radius: 999px; background: var(--gold-soft, #F3ECDD); font-size: 13.5px; font-weight: 600; }
  .bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14.5px; }
  .bars .meter { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--mist); overflow: hidden; }
  .bars .meter i { display: block; height: 100%; width: var(--v); border-radius: 6px; background: var(--gold); transform-origin: left; }
  .bars small { color: var(--slate); font-size: 13px; }
  .ya .link { display: inline-block; margin-top: 22px; font-weight: 600; text-underline-offset: 4px; }
  .rev-side { display: flex; flex-direction: column; gap: 16px; }
  .rev-side .videos { flex: 1; }
  .rev-side .video { aspect-ratio: auto; min-height: 320px; height: 100%; }
  .videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .video {
    position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; color: #fff;
    background: linear-gradient(160deg, #6B736E 0%, #2B312E 100%); text-decoration: none; display: block; isolation: isolate;
  }
  .video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
  .video::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,24,22,0) 40%, rgba(20,24,22,.85) 100%); }
  .video:hover img { transform: scale(1.05); }
  .play {
    position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
    background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--graphite);
    transition: transform .35s var(--ease);
  }
  .video:hover .play { transform: scale(1.1); }
  .video .v-body { position: absolute; left: 16px; right: 16px; bottom: 16px; }
  .video b { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; }
  .video small { font-size: 13px; color: rgba(255,255,255,.8); }
  .video .ph { position: absolute; top: 16px; left: 16px; right: 16px; font-size: 12.5px; color: rgba(255,255,255,.7); border: 1px dashed rgba(255,255,255,.4); border-radius: 10px; padding: 6px 10px; text-align: center; }
  .videos.one { grid-template-columns: minmax(0, 1fr); }
  .videos.one .ph { left: auto; right: 16px; width: auto; }
  .platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .platform { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-radius: var(--r-md); background: var(--white); text-decoration: none; transition: transform .3s var(--ease); }
  .platform:hover { transform: translateY(-3px); }
  .platform b { font-family: var(--serif); font-weight: 500; font-size: 24px; }
  .platform small { display: block; color: var(--slate); font-size: 13.5px; }

  /* ---------- Блок 6: главный врач ---------- */
  .chief { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
  .chief-photos { position: relative; padding-bottom: 72px; }
  .chief-main { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: #3B403E; }
  .chief-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
  .chief-work {
    position: absolute; right: -24px; bottom: 0; width: 56%; aspect-ratio: 3 / 2;
    border-radius: var(--r-md); overflow: hidden; border: 6px solid var(--white); box-shadow: 0 16px 40px rgba(28,33,31,.16);
  }
  .chief-work img { width: 100%; height: 100%; object-fit: cover; }
  .chief h2 { margin: 18px 0 6px; }
  .chief-role { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--forest); }
  .chief-study { margin: -10px 0 24px; font-size: 14.5px; color: var(--slate); max-width: 40em; }
  .chief-links-title { margin: 0 0 10px; font-weight: 600; font-size: 15px; }
  .chief .title { margin: 0 0 22px; color: var(--slate); }
  .chief-text { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.6; margin: 0 0 26px; max-width: 34em; }
  .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--stone); }
  .facts li { padding: 16px 16px 0 0; }
  .facts li + li { padding-left: 16px; border-left: 1px solid var(--stone); }
  .facts b { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; }
  .facts small { font-size: 13.5px; color: var(--slate); }
  .chief-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  .chief-links a { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--stone); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: border-color .2s, background-color .2s; }
  .chief-links a:hover { border-color: var(--graphite); background: var(--white); }
  .chief-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .chief-cta .note { font-size: 14px; }
  .with-team { margin-top: 24px; font-size: 15px; }
  .with-team a { color: var(--slate); text-underline-offset: 4px; }

  /* ---------- Блок 7: первый визит и цены ---------- */
  .visit { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 16px; }
  .steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
  .steps li { counter-increment: st; position: relative; padding: 22px 22px 22px 84px; border-radius: var(--r-md); background: var(--white); }
  .steps li::before {
    content: counter(st); position: absolute; left: 22px; top: 20px; width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; background: var(--mist); font-family: var(--serif); font-size: 20px;
  }
  .steps b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px; }
  .steps p { margin: 0; font-size: 15px; color: var(--slate); line-height: 1.5; }
  .prices { background: var(--white); border-radius: var(--r-md); padding: 26px 28px; display: flex; flex-direction: column; }
  .prices h3 { margin: 0 0 14px; font-family: var(--serif); font-weight: 500; font-size: 24px; }
  .price-list { margin: 0; padding: 0; list-style: none; }
  .price-list li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mist); font-size: 15.5px; }
  .price-list li span:first-child { flex: 1; }
  .price-list b { font-weight: 600; white-space: nowrap; }
  .pay { margin: 18px 0 0; font-size: 14px; color: var(--slate); }
  .prices .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
  .prices .row a.link { font-weight: 600; text-underline-offset: 4px; }

  /* ---------- Блок 8: жизнь клиники ---------- */
  .life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 16px; }
  .life figure { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--mist); }
  .life figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .life figure:hover img:not([style*="scale"]) { transform: scale(1.05); }
  .life figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 13px; font-weight: 500; }
  .life .big { grid-column: span 2; grid-row: span 2; }
  .life .tall { grid-row: span 2; }
  .equip { grid-column: span 2; background: var(--white); border: 1px solid var(--stone); border-radius: var(--r-md); padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
  .equip h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; }
  .social { grid-column: span 2; border-radius: var(--r-md); padding: 22px 24px; background: var(--forest); color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
  .social h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 22px; }
  .social p { margin: 0; color: rgba(255,255,255,.8); font-size: 14.5px; }
  .soc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .soc-links a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background-color .2s; }
  .soc-links a:hover { background: rgba(255,255,255,.22); }

  /* ---------- Блок 9: контакты и запись ---------- */
  .contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
  .map-card { border-radius: var(--r-md); overflow: hidden; background: var(--white); display: grid; grid-template-rows: auto 1fr; }
  .map-info { padding: 24px 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .map-info small { display: block; font-size: 13px; color: var(--slate); margin-bottom: 4px; }
  .map-info b, .map-info a { font-weight: 600; font-size: 15.5px; text-decoration: none; }
  .map-info p { margin: 0; }
  .map { min-height: 340px; position: relative; background: var(--stone); }
  .map iframe, .map-static { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
  .map-live { position: absolute; right: 16px; top: 16px; z-index: 2; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--white); font: 600 14.5px/1 var(--sans); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
  .route { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 2; }
  .route a { padding: 10px 16px; border-radius: 12px; background: var(--white); text-decoration: none; font-weight: 600; font-size: 14.5px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
  .form-card { border-radius: var(--r-md); background: var(--white); padding: 28px; }
  .form-card h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1; }
  .form-card > p { margin: 0 0 20px; color: var(--slate); font-size: 15px; }
  .field { display: block; margin-bottom: 14px; }
  .field span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
  .field input, .field textarea {
    width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--stone);
    font: 400 16px/1.3 var(--sans); color: var(--graphite); background: var(--white); transition: border-color .2s;
  }
  .field textarea { min-height: 88px; resize: vertical; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--graphite); }
  .field.err input { border-color: #B3261E; }
  .field .msg { display: none; margin-top: 6px; font-size: 13px; color: #B3261E; }
  .field.err .msg { display: block; }
  .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--slate); margin: 6px 0 18px; }
  .agree input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--forest); flex-shrink: 0; }
  .form-card .btn { width: 100%; }
  .done { display: none; text-align: center; padding: 30px 6px; }
  .done b { display: block; font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 14px 0 8px; }
  .done p { margin: 0; color: var(--slate); }
  .form-card.is-sent form { display: none; }
  .form-card.is-sent .done { display: block; animation: up .6s var(--ease) both; }
  .check { width: 64px; height: 64px; border-radius: 50%; background: var(--mist); display: inline-grid; place-items: center; color: var(--forest); }

  /* ---------- Подвал ---------- */
  .foot { background: var(--graphite); color: rgba(255,255,255,.78); padding: 56px 0 28px; font-size: 14.5px; }
  .foot a { color: inherit; text-decoration: none; }
  .foot a:hover { color: #fff; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
  .foot h4 { margin: 0 0 14px; color: #fff; font-size: 15px; font-weight: 600; }
  .foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .foot .brand-mark { background: #fff; }
  .foot .brand-text b { color: #fff; }
  .foot .brand-text span { color: rgba(255,255,255,.6); }
  .foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.55); }
  .warn { margin: 26px 0 0; font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: rgba(255,255,255,.5); text-align: center; letter-spacing: .02em; }

  /* ---------- Движение ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .hero-photo { animation: settle 1.4s var(--ease) both; }
    @keyframes settle { from { opacity: 0; transform: scale(1.03); } }
    .hero-body > * { animation: up .9s var(--ease) both; }
    .hero-body .lead { animation-delay: .14s; }
    .hero-body .ctas { animation-delay: .26s; }
    .hero-bar { animation: up .9s .5s var(--ease) both; }
    @keyframes up { from { opacity: 0; transform: translateY(22px); } }

    .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
    .js .reveal.is-in { opacity: 1; transform: none; }
    .js .bars .meter i { transform: scaleX(0); transition: transform 1.2s var(--ease); }
    .js .ya.is-in .bars .meter i { transform: scaleX(1); }
    .js .ya.is-in .bars li:nth-child(2) .meter i { transition-delay: .08s; }
    .js .ya.is-in .bars li:nth-child(3) .meter i { transition-delay: .16s; }
    .js .ya.is-in .bars li:nth-child(4) .meter i { transition-delay: .24s; }
    .js .ya.is-in .bars li:nth-child(5) .meter i { transition-delay: .32s; }
    .js .ya.is-in .bars li:nth-child(6) .meter i { transition-delay: .4s; }
  }

  /* Переключатель цвета кнопок (только для показа клиенту) */
  .variants {
    position: fixed; right: 16px; bottom: 16px; z-index: 50;
    display: flex; align-items: center; gap: 4px;
    background: var(--white); border: 1px solid var(--stone); border-radius: 999px;
    padding: 6px 8px 6px 14px; font-size: 13px; box-shadow: 0 6px 24px rgba(28,33,31,.12);
  }
  .variants p { margin: 0 6px 0 0; font-weight: 600; }
  .variants label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 8px; border-radius: 999px; }
  .variants label:has(input:checked) { background: var(--mist); }
  .variants input { position: absolute; opacity: 0; pointer-events: none; }
  .variants label:has(input:focus-visible) { outline: 2px solid var(--gold); }
  .swatch { width: 14px; height: 14px; border-radius: 4px; }
  .dock { display: none; }

  /* ---------- Планшет ---------- */
  @media (max-width: 1180px) {
    .info-addr, .info-rate { display: none; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { aspect-ratio: 4 / 4.2; }
    .reveal-more { grid-template-rows: 1fr; }
    .card-body, .card:hover .card-body, .card:focus-within .card-body { top: auto; }
    .card:hover { transform: none; box-shadow: none; }
    .hero-card { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .hero-bar { left: 14px; right: 14px; bottom: 14px; }
    .hero-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-body { padding-bottom: 210px; }
    .case { width: calc((100% - 16px) / 2); }
    .doc { width: calc((100% - 32px) / 3); }
    .rev-grid, .visit, .contact { grid-template-columns: minmax(0, 1fr); }
    .chief { grid-template-columns: minmax(0, 1fr); }
    .chief-photos { max-width: 560px; }
    .life { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .hero-bar .bar-team { grid-column: 1 / -1; border-bottom: 1px solid var(--stone); border-radius: var(--r-md) var(--r-md) 0 0; }
    .hero-bar .bar-team + .bar-item { border-left: 0; border-radius: 0 0 0 var(--r-md); }
  }

  /* ---------- Телефон ---------- */
  @media (max-width: 760px) {
    body { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .top-row { height: 64px; gap: 10px; }
    .brand-mark { width: 44px; height: 32px; }
    .brand-text b { font-size: 16px; }
    .brand-text span { font-size: 12px; }
    .info, .soc, .top-right .btn, .nav-row { display: none; }
    .top-right { gap: 8px; }
    .icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mist); border: 0; color: var(--graphite); }
    /* Меню на телефоне открывается списком под шапкой */
    .top.is-open .nav-row { display: block; max-height: calc(100vh - 64px); overflow-y: auto; }
    .top.is-open .nav { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding-top: 6px; padding-bottom: 14px; }
    .top.is-open .nav a { padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--mist); }
    .top.is-open .nav a::after { display: none; }
    .top.is-open .menu-btn { background: var(--stone); }

    .hero { padding-top: 8px; }
    .hero-card { display: block; min-height: 0; border-radius: var(--r-md); background: var(--white); overflow: visible; }
    .hero-body { padding: 20px 0 20px; }
    h1 { font-size: 2.2rem; margin-bottom: 14px; }
    .lead { margin-bottom: 20px; }
    .ctas { flex-direction: column; }
    .ctas .btn { width: 100%; }
    .hero-photo { margin: 0; aspect-ratio: 1 / 1; }
    .hero-photo img { inset: 0; height: 100%; object-position: 50% 30%; }
    .hero-bar { position: static; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--mist); box-shadow: none; backdrop-filter: none; }
    .bar-item { padding: 14px 12px; gap: 10px; flex-direction: column; align-items: flex-start; }
    .bar-item small { font-size: 12.5px; }
    .score { font-size: 22px; }
    .hero-bar .bar-team { flex-direction: row; align-items: center; }
    .asof { text-align: left; }

    .sec-head { margin-bottom: 18px; }
    .more { font-size: 0; gap: 0; }
    .ask { margin-bottom: 18px; gap: 12px; }
    .chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
    .chips::-webkit-scrollbar { display: none; }
    .chips li { flex-shrink: 0; }
    .chips button { min-height: 42px; padding: 0 15px; font-size: 14.5px; }

    /* Карточки листаются пальцем */
    .cards {
      display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
      margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none;
    }
    .cards::-webkit-scrollbar { display: none; }
    .card { flex: 0 0 78%; aspect-ratio: 3 / 4; scroll-snap-align: start; }
    .card h3 { font-size: 22px; }
    .consult { padding: 20px; }
    .sec { padding: 56px 0; }
    .arrows { display: none; }
    .rail { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); gap: 12px; }
    .case { width: 86%; }
    .doc { width: 72%; }
    .ya { padding: 22px; }
    .ya-score { font-size: 52px; }
    .videos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
    .videos::-webkit-scrollbar { display: none; }
    .video { flex: 0 0 62%; scroll-snap-align: start; }
    .videos.one { display: block; margin: 0; padding: 0; }
    .videos.one .video { min-height: 240px; }
    .platforms { grid-template-columns: minmax(0, 1fr); }
    .chief-photos { padding-bottom: 56px; }
    .chief-work { right: 0; width: 60%; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
    .facts li { padding-bottom: 14px; }
    .steps li { padding: 18px 18px 18px 72px; }
    .steps li::before { left: 16px; top: 16px; width: 40px; height: 40px; }
    .prices { padding: 22px; }
    .life { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
    .life figure { height: 220px; }
    .life .big { grid-column: span 2; grid-row: auto; height: 260px; }
    .life .tall { grid-row: auto; }
    .equip, .social { grid-column: span 2; grid-row: auto; }
    .map-info { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 14px; }
    .map { min-height: 280px; }
    .route { flex-wrap: wrap; }
    .form-card { padding: 22px; }
    .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .foot ul { gap: 0; }
    .foot li a { display: inline-block; padding: 9px 0; }
    .map-live { min-height: 44px; }
    .consult .btn { width: 100%; }

    .dock {
      display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: rgba(255,255,255,.96); border-top: 1px solid var(--stone); backdrop-filter: blur(8px);
    }
    .dock .btn { min-height: 50px; width: 100%; }
    .variants { position: static; margin: 0 16px 16px; justify-content: center; flex-wrap: wrap; border-radius: 14px; box-shadow: none; }
  }
  /* ---------- Новые варианты кнопок (14.10, по просьбе клиента: золото контрастнее, зелёный насыщеннее) ---------- */
  html[data-accent="gold-bright"] { --accent: #C9A23A; --accent-hover: #D6B14E; --on-accent: #1C211F; }
  html[data-accent="gold-shine"]  { --accent: linear-gradient(135deg, #E6C566 0%, #C9A23A 45%, #A87B1E 100%); --accent-hover: linear-gradient(135deg, #EDD07A 0%, #D3AC45 45%, #B38727 100%); --on-accent: #1C211F; }
  html[data-accent="green-rich"]  { --accent: #17704F; --accent-hover: #125C41; --on-accent: #FFFFFF; }
  html[data-accent="gold-shine"] .btn-primary { background-image: var(--accent); background-color: #C9A23A; box-shadow: 0 6px 18px rgba(168,123,30,.28); }
  html[data-accent="gold-shine"] .btn-primary:hover { background-image: var(--accent-hover); }

  /* ---------- Декор: точечные сетки по краям блоков (v4: крупнее, контрастнее, с объёмом) ---------- */
  .help, .sec { position: relative; isolation: isolate; overflow: hidden; }
  .help::before, .help::after, .sec::before, .sec::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 6px;
    /* каждая точка как маленький шарик: светлый блик сверху слева */
    background-image: radial-gradient(circle at 40% 38%, var(--hi) 0 0.9px, var(--dot) 1.6px, var(--dot) 2.6px, transparent 3.1px);
    background-size: 16px 16px;
    filter: drop-shadow(0 1px 1px rgba(28, 33, 31, .18));
  }
  .help::before, .sec::before { --dot: #2B4A3E; --hi: #7FA394; width: 176px; height: 176px; opacity: .55; }
  .help::after, .sec::after { --dot: #B08D4A; --hi: #F3DFAE; width: 128px; height: 128px; opacity: .9; }
  .tint::before { --dot: #1F3E33; --hi: #6E9384; opacity: .5; }
  .help::before, main > .sec:nth-of-type(odd)::before { right: -28px; top: -64px; }
  .help::after, main > .sec:nth-of-type(odd)::after { right: 112px; top: -40px; }
  main > .sec:nth-of-type(even)::before { left: -28px; bottom: -68px; }
  main > .sec:nth-of-type(even)::after { left: 112px; bottom: -48px; }
  /* Фирменная черта под заголовками блоков */
  .sec-head h2::after, .story-head h2::after {
    content: ""; display: block; width: 84px; height: 3px; margin-top: 18px; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold) 0 54%, transparent 54% 64%, var(--gold) 64% 80%, transparent 80% 88%, var(--gold) 88% 100%);
  }

  /* ---------- v4: типографика крупнее, как просил клиент (по образцу recstom: заголовки с засечками, обычной толщины) ---------- */
  h1 { font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.04; letter-spacing: -0.025em; }
  h2 { font-weight: 400; font-size: clamp(2.1rem, 4.2vw, 3.7rem); line-height: 1.04; letter-spacing: -0.022em; }
  .sec-lead, .lead { color: #4A524D; }

  /* Кнопка для тёмных подложек */
  .btn-light { background: #fff; color: var(--forest); }
  .btn-light:hover { background: #F2EBDD; }
  .btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
  .btn-line:hover { border-color: #fff; }

  /* ---------- v4: тёмно-зелёные подложки ---------- */
  .dark-panel { background: var(--forest); color: #fff; border-radius: 32px; position: relative; overflow: hidden; isolation: isolate; }
  .dark-panel::before {
    content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(176,141,74,.28), rgba(176,141,74,0) 68%);
  }

  /* Плашка «Не знаете, что нужно?» */
  .consult { background: var(--forest); color: #fff; }
  .consult a.link { color: #E7D3A8; }
  .consult .btn-primary { background: #fff; color: var(--forest); }
  .consult .btn-primary:hover { background: #F2EBDD; }

  /* Блок главврача на тёмно-зелёной подложке */

  /* ---------- v4: истории пациентов: до и после + видеоотзыв этого же пациента ---------- */
  .stories { padding: clamp(24px, 3.5vw, 48px); margin-bottom: 40px; }
  .story { display: none; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr) minmax(0, 1.1fr); gap: clamp(14px, 1.8vw, 24px); align-items: stretch; }
  .story.is-active { display: grid; animation: storyIn .5s var(--ease); }
  @keyframes storyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .story .compare { border-radius: 20px; aspect-ratio: auto; min-height: 380px; height: 100%; }
  .story-video {
    position: relative; border-radius: 20px; overflow: hidden; background: #0F1F19; min-height: 380px;
    display: block; width: 100%; padding: 0; border: 0; cursor: pointer; color: #fff; text-align: left; font: inherit;
  }
  .story-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .story-video:hover img { transform: scale(1.04); }
  .story-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.62)); }
  .story-video .play {
    position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--forest); box-shadow: 0 10px 30px rgba(0,0,0,.3);
    transition: transform .3s var(--ease);
  }
  .story-video:hover .play { transform: scale(1.08); }
  .story-video .v-cap { position: absolute; z-index: 2; left: 16px; right: 16px; top: 14px; font-size: 13.5px; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
  .story-video .v-cap b { display: block; font-size: 15px; }
  .story-video .ph { position: absolute; z-index: 2; bottom: 12px; left: 12px; right: 12px; font-size: 12px; color: rgba(255,255,255,.75); border: 1px dashed rgba(255,255,255,.45); border-radius: 10px; padding: 5px 8px; text-align: center; }
  .story-video video, .story-video iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
  .story-text { display: flex; flex-direction: column; padding: 6px 4px; }
  .story-text .chipline li { background: rgba(255,255,255,.1); color: #fff; }
  .story-text h3 { margin: 14px 0 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.12; }
  .story-text dl { margin: 0 0 18px; display: grid; gap: 12px; font-size: 15.5px; }
  .story-text dt { font-size: 13px; color: #E7D3A8; }
  .story-text dd { margin: 3px 0 0; color: rgba(255,255,255,.9); }
  .story-text .who-did { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.8); margin: auto 0 18px; }
  .story-text .who-did .faces img { border-color: var(--forest); }
  .story-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
  .story-dots { display: flex; gap: 8px; }
  .story-dots button { width: 34px; height: 4px; border: 0; padding: 0; border-radius: 2px; background: rgba(255,255,255,.25); cursor: pointer; transition: background-color .3s; }
  .story-dots button[aria-current="true"] { background: #E7D3A8; }
  .story-arrows { display: flex; gap: 8px; }
  .story-arrows button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
  .story-arrows button:hover { background: rgba(255,255,255,.1); }
  .more-cases-title { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: 26px; }

  @media (max-width: 1100px) {
    .story { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }
    .story-text { grid-column: 1 / -1; }
  }
  @media (max-width: 760px) {
    .help::before, .sec::before { width: 104px; height: 104px; }
    .help::after, .sec::after { width: 76px; height: 76px; }
    .help::before, main > .sec:nth-of-type(odd)::before { top: -52px; }
    .help::after, main > .sec:nth-of-type(odd)::after { right: 62px; top: -38px; }
    main > .sec:nth-of-type(even)::before { bottom: -56px; }
    main > .sec:nth-of-type(even)::after { left: 62px; bottom: -42px; }
    .sec-head h2::after, .story-head h2::after { width: 62px; margin-top: 12px; }
    .dark-panel { border-radius: 22px; }
    #glavvrach .chief { padding: 20px 18px 26px; margin: 0 calc(-1 * var(--gutter) + 8px); }
    .stories { padding: 14px 14px 18px; margin: 0 calc(-1 * var(--gutter) + 8px) 32px; }
    .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .story .compare { grid-column: 1 / -1; min-height: 0; aspect-ratio: 4 / 3; }
    .story-video { min-height: 0; aspect-ratio: 9 / 14; }
    .story-text { grid-column: 2; padding: 0; }
    .story-text h3 { font-size: 1.25rem; margin: 8px 0 8px; }
    .story-text dl { font-size: 14px; gap: 8px; }
    .story-text .btn { width: 100%; padding: 0 12px; font-size: 14.5px; }
    .story-text .who-did { display: none; }
    .story-video .v-cap { top: 12px; left: 12px; right: 12px; font-size: 0; }
    .story-video .v-cap b { font-size: 13.5px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
  }
  /* ===================== v5 (16.10, переделка по сообщениям клиента 15.10, подход recstom) ===================== */

  /* ---------- Подложки: графит как у recstom, приглушённый зелёный, прежний тёмно-зелёный ---------- */
  :root {
    --panel: #1E252B; --panel-2: #2A333B; --panel-ink: #FFFFFF; --panel-ink2: rgba(255,255,255,.72);
    --panel-gold: #DCC28A; --panel-line: rgba(255,255,255,.16); --panel-chip: rgba(255,255,255,.1);
    --snow: #F6F6F4;
  }
  html[data-panel="sage"] { --panel: #2F4D42; --panel-2: #4A6A5E; }
  html[data-panel="green"] { --panel: #1F3E33; --panel-2: #2B5144; }
  body { font-size: 18px; }

  .dark-panel { background: linear-gradient(120deg, var(--panel) 35%, var(--panel-2)); color: var(--panel-ink); }
  .dark-panel::before { background: radial-gradient(circle, rgba(176,141,74,.22), rgba(176,141,74,0) 68%); }
  .consult { background: linear-gradient(120deg, var(--panel) 35%, var(--panel-2)); color: var(--panel-ink); }
  .consult a.link { color: var(--panel-gold); }
  .story-text dt { color: var(--panel-gold); }
  .story-dots button[aria-current="true"] { background: var(--panel-gold); }

  /* ---------- Декор: точечные «квадратики» убраны, вместо них золотая сетка из дизайна клиники ---------- */
  .help::before, .help::after, .sec::before, .sec::after { content: none; }
  .deco { position: relative; isolation: isolate; }
  .deco::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: max(0px, calc((100vw - var(--wrap)) / 2 - 140px)); top: -40px; width: 420px; height: 300px;
    background: url("img/plexus-corner.svg") no-repeat center / contain; opacity: .85;
  }
  .deco-left::after { right: auto; left: max(0px, calc((100vw - var(--wrap)) / 2 - 160px)); transform: scaleX(-1); }

  /* ---------- Первый экран: видео клиники во всю ширину, как просил клиент ---------- */
  .hero-card.hero-v { display: block; min-height: clamp(560px, 78vh, 760px); background: #12171B; color: #fff; isolation: isolate; }
  .hero-v .hero-video, .hero-v .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .hero-v .hero-poster { z-index: -3; }
  .hero-v::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,20,24,.86) 0%, rgba(15,20,24,.62) 42%, rgba(15,20,24,.1) 75%), linear-gradient(0deg, rgba(15,20,24,.55), rgba(15,20,24,0) 40%); }
  .hero-v .hero-body { max-width: 760px; padding: clamp(48px, 7vw, 96px) clamp(24px, 4.5vw, 72px) 200px; }
  .hero-v h1 { color: #fff; font-weight: 400; }
  .hero-v .lead { color: rgba(255,255,255,.86); }
  .hero-v .btn-line { min-height: 54px; }
  @media (prefers-reduced-motion: reduce) { .hero-v .hero-video { display: none; } }

  /* ---------- Цитата главного врача: тёмная подложка, силуэт справа, золотая сетка ---------- */
  .sec-tight { padding: clamp(24px, 3vw, 40px) 0 0; }
  .quote-banner { position: relative; overflow: hidden; border-radius: 32px; min-height: clamp(420px, 40vw, 520px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); isolation: isolate; }
  .quote-banner .plexus { position: absolute; z-index: -1; right: -8%; top: -6%; width: 70%; height: 112%; object-fit: cover; opacity: .9; pointer-events: none; }
  .quote-banner .tooth { position: absolute; z-index: 0; right: 4%; bottom: 8%; width: clamp(70px, 8vw, 120px); opacity: .9; pointer-events: none; }
  .quote-body { align-self: center; padding: clamp(36px, 5vw, 80px); padding-right: 0; }
  .quote-body blockquote { position: relative; margin: 0 0 28px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.9vw, 2.75rem); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; }
  .quote-body blockquote::before { content: "“"; position: absolute; left: -.08em; top: -.62em; font-size: 3.4em; line-height: 1; color: var(--panel-gold); opacity: .55; }
  .quote-sign b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; }
  .quote-sign span { display: block; margin-top: 4px; font-size: 15px; color: var(--panel-ink2); }
  .quote-figure { position: relative; margin: 0; }
  .quote-figure img { position: absolute; left: 50%; top: 26px; transform: translateX(-46%); height: calc(100% + 190px); width: auto; max-width: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,.35)); }

  /* ---------- Главный врач и команда (как у recstom: большой силуэт на круге и карточки врачей) ---------- */
  .snow { background: var(--snow); }
  .chief2 { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
  .chief2-photo { position: relative; margin: 0; aspect-ratio: 1 / 1.02; isolation: isolate; }
  .chief2-photo::before { content: ""; position: absolute; z-index: -2; left: 8%; right: 8%; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #E3E5E2, #D5D9D6); }
  .chief2-photo .plexus { position: absolute; z-index: -1; left: -6%; top: 0; width: 112%; opacity: .55; pointer-events: none; }
  .chief2-photo .main { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 92%; height: auto; filter: drop-shadow(0 20px 30px rgba(28,33,31,.18)); }
  .chief2-photo .tooth { position: absolute; right: 2%; top: 6%; width: 74px; opacity: .9; }
  .pill { display: inline-block; padding: 6px 14px; border: 1px solid var(--graphite); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
  .chief2-name { margin: 18px 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; }
  .chief2-role { margin: 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6A5326; }
  .chief2-text { margin: 0 0 24px; max-width: 36em; }
  .chief2 .facts { margin-bottom: 22px; }
  .chief2 .facts b { color: var(--forest); }
  .chief2 .chief-study { margin: 0 0 22px; }
  .chief2 .chief-links a { background: var(--white); }
  .chief2-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
  .chief2-cta .note { font-size: 14px; }
  .team-row { margin-top: clamp(40px, 5vw, 64px); }
  .team-row-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
  .team-row-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); }
  .team-row-head p { margin: 4px 0 0; font-size: 15px; color: var(--slate); }
  .team-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; margin: 0; padding: 0; list-style: none; }
  .team-mini a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border-radius: 18px; background: var(--white); text-decoration: none; box-shadow: 0 1px 0 rgba(28,33,31,.04); transition: box-shadow .25s, transform .25s var(--ease); }
  .team-mini a:hover { box-shadow: 0 12px 28px rgba(28,33,31,.1); transform: translateY(-2px); }
  .team-mini img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; background: #3B403E; }
  .team-mini b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.2; }
  .team-mini small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--slate); }
  .team-mini .all a { justify-content: center; padding: 14px 22px; font-weight: 600; font-size: 15px; white-space: nowrap; }

  /* ---------- Истории пациентов: обложки = фирменные заставки «Отзыв пациента» ---------- */
  .story-video img { object-position: 50% 30%; }
  .story-video .v-cap { top: auto; bottom: 14px; }
  .story-text blockquote { margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--panel-gold); font-size: 16.5px; line-height: 1.55; color: var(--panel-ink); opacity: .92; }
  .story-text blockquote small { display: block; margin-top: 8px; font-size: 13px; color: var(--panel-ink2); }
  .story-text .who-did { color: var(--panel-ink2); }

  /* ---------- Ещё работы клиники: лента как «Истории лечения» у recstom, без описаний ---------- */
  .works-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: clamp(40px, 5vw, 64px) 0 18px; }
  .works-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; }
  .works-head p { margin: 6px 0 0; color: var(--slate); font-size: 15.5px; }
  .work { width: calc((100% - 32px) / 3); margin: 0; }
  .work-pic { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--mist); }
  .work-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .work:hover .work-pic > img { transform: scale(1.04); }
  .work-tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 9px; border-radius: 999px; background: rgba(30,37,43,.82); backdrop-filter: blur(6px); color: #fff; font-size: 13.5px; font-weight: 600; }
  .work-tag img { width: 18px; height: 20px; }
  .work-before { position: absolute; left: 14px; bottom: 14px; width: 34%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.25); }
  .work-before img { width: 100%; height: 100%; object-fit: cover; }
  .work-before span { position: absolute; right: 6px; top: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(30,37,43,.8); color: #fff; font-size: 11.5px; font-weight: 600; }

  /* ---------- Видеоотзывы: вертикальные ролики с фирменной обложкой ---------- */
  .rev-side .videos.vert { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos.vert .video { aspect-ratio: 9 / 16; min-height: 0; height: auto; }
  .videos.vert .video::before { background: linear-gradient(180deg, rgba(20,24,22,.55) 0%, rgba(20,24,22,0) 22%); }
  .videos.vert .video .v-body { top: 14px; bottom: auto; left: 14px; }
  .videos.vert .video .play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .videos.vert .video:hover .play { transform: translate(-50%, -50%) scale(1.08); }
  button.video { display: block; width: 100%; padding: 0; border: 0; font: inherit; color: #fff; text-align: left; cursor: pointer; }
  .video video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; background: #000; }

  /* ---------- Ответы на частые вопросы: вертикальные ролики главного врача, подписи под карточками ---------- */
  .faq-vids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .faq-item { margin: 0; }
  .faq-vid { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 20px; overflow: hidden; isolation: isolate; background: #12171B; color: #fff; cursor: pointer; }
  .faq-vid img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .8s var(--ease); }
  .faq-vid:hover img.poster { transform: scale(1.03); }
  .faq-vid .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); color: var(--forest); transition: transform .25s var(--ease); }
  .faq-vid:hover .play { transform: translate(-50%, -50%) scale(1.08); }
  .faq-vid video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; background: #000; }
  .faq-cap { margin: 12px 2px 0; }
  .faq-cap b { display: block; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.25; }
  .faq-cap small { display: block; margin-top: 4px; font-size: 14px; color: var(--slate); }
  .faq-soon { cursor: default; background: linear-gradient(160deg, var(--panel) 30%, var(--panel-2)); }
  .faq-soon .tooth { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42%; opacity: .6; }
  .faq-item.is-soon .faq-cap b { color: var(--slate); }

  /* ---------- Жизнь клиники: мозаика во всю ширину, как «Жизнь клиники в моментах» у recstom ---------- */
  .mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: 10px; padding: 0 10px; }
  .mosaic figure { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--mist); }
  .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
  .mosaic figure:hover img { transform: scale(1.04); }
  .mosaic figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 13px; font-weight: 500; }
  .m-a { grid-column: span 5; grid-row: span 2; } .m-b { grid-column: span 4; } .m-c { grid-column: span 3; grid-row: span 2; }
  .m-d { grid-column: span 4; } .m-e { grid-column: span 4; } .m-f { grid-column: span 4; } .m-g { grid-column: span 4; }
  .life-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 28px; }
  .social-big { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(24px, 3vw, 36px); isolation: isolate; }
  .social-big .plexus { position: absolute; z-index: -1; right: -10%; top: -20%; width: 70%; opacity: .7; pointer-events: none; }
  .social-big h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; }
  .social-big > p { margin: 0 0 22px; color: var(--panel-ink2); max-width: 30em; }
  .soc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .soc-grid a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; transition: background-color .2s, transform .2s var(--ease); }
  .soc-grid a:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
  .soc-grid i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 800; font-size: 12px; }
  .soc-grid b { display: block; font-size: 16px; }
  .soc-grid small { display: block; font-size: 13px; color: rgba(255,255,255,.7); }
  .ico-vk { background: #0077FF; } .ico-tg { background: #2AABEE; } .ico-wa { background: #25D366; } .ico-mx { background: linear-gradient(135deg, #4C3BFF, #9B3BFF); color: #fff; }
  .life-bottom .equip { grid-column: auto; }

  /* ---------- Шапка: круглые значки соцсетей ---------- */
  .head-soc { display: flex; gap: 6px; }
  .head-soc a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .2s var(--ease); }
  .head-soc a:hover { transform: translateY(-2px); }

  /* ---------- Контакты: карта на всю ширину и карточка, как у recstom ---------- */
  .contact-map { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; background: #E6E8E4 url("img/map-static.png") center / cover; }
  .contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .contact-card { position: relative; z-index: 2; margin: 28px; width: min(440px, calc(100% - 56px)); padding: 30px 30px 26px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(28,33,31,.18); }
  .contact-card h3 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: 34px; }
  .contact-card dl { margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .contact-card dl > div.full { grid-column: 1 / -1; }
  .contact-card dt { font-size: 13px; color: var(--slate); }
  .contact-card dd { margin: 3px 0 0; font-size: 17px; font-weight: 500; line-height: 1.35; }
  .contact-card dd a { color: inherit; text-decoration: none; }
  .contact-card .btns { display: grid; gap: 10px; }
  .contact-card .btn-ya { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 14px; border: 1.5px solid var(--stone); background: #fff; font: 600 15.5px/1 var(--sans); text-decoration: none; color: var(--graphite); transition: border-color .2s; }
  .contact-card .btn-ya:hover { border-color: var(--graphite); }
  .contact-card .btn-ya i { width: 20px; height: 20px; border-radius: 50%; background: #FC3F1D; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; }
  .contact-form { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: #fff; }
  .contact-form .lead-col h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.1; }
  .contact-form .lead-col p { margin: 0; color: var(--slate); }
  .contact-form .form-card { padding: 0; background: none; }

  /* ---------- Подвал как у recstom: тёмный, логотип и соцсети, колонки, контакты с кнопкой ---------- */
  .foot { position: relative; overflow: hidden; isolation: isolate; background: var(--panel); border-radius: 28px 28px 0 0; padding: 64px 0 28px; color: rgba(255,255,255,.72); font-size: 15px; }
  .foot::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -10%; width: 52%; height: 120%; background: url("img/plexus-dark.svg") no-repeat center / cover; opacity: .35; }
  .foot-grid.v5 { grid-template-columns: 1.3fr 1fr 1.1fr 1.2fr; gap: 36px; }
  .foot .head-soc { margin: 18px 0 22px; }
  .foot .docs { display: grid; gap: 8px; font-size: 14px; }
  .foot-contacts { display: grid; gap: 18px; }
  .foot-contacts .fc { display: flex; gap: 12px; align-items: flex-start; }
  .foot-contacts .fc i { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); color: #fff; }
  .foot-contacts b { display: block; color: #fff; font-size: 17px; font-weight: 600; }
  .foot-contacts small { display: block; font-size: 13.5px; }
  .foot-contacts .linkish { padding: 0; border: 0; background: none; color: rgba(255,255,255,.72); font: inherit; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .foot-contacts .btn { width: 100%; }
  .foot .legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.5); }
  .foot .legal p { margin: 0 0 6px; }

  /* ---------- Плавающая кнопка «Заказать звонок» с анимацией и окно, как у recstom ---------- */
  .callme { position: fixed; right: 24px; bottom: 96px; z-index: 55; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--panel); color: #fff; box-shadow: 0 12px 30px rgba(15,20,24,.35); }
  .callme::before, .callme::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: ring 2.6s var(--ease) infinite; pointer-events: none; }
  .callme::after { animation-delay: 1.3s; }
  .callme svg { animation: wiggle 2.6s ease-in-out infinite; }
  .callme .hint { position: absolute; right: 76px; top: 50%; white-space: nowrap; padding: 10px 14px; border-radius: 12px; background: #fff; color: #1C211F; font-size: 14px; font-weight: 600; box-shadow: 0 10px 26px rgba(28,33,31,.16); opacity: 0; transform: translate(10px, -50%); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
  .callme.is-hint .hint, .callme:hover .hint, .callme:focus-visible .hint { opacity: 1; transform: translate(0, -50%); }
  @keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
  @keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(5deg); } }
  @media (prefers-reduced-motion: reduce) { .callme::before, .callme::after, .callme svg { animation: none; } }

  .modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(15,20,24,.62); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .modal.is-open { opacity: 1; visibility: visible; }
  .modal-box { position: relative; width: min(820px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); border-radius: 26px; background: #fff; transform: translateY(14px); transition: transform .3s var(--ease); }
  .modal.is-open .modal-box { transform: none; }
  .modal-pic { position: relative; min-height: 420px; }
  .modal-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .modal-body { padding: 34px 32px 28px; }
  .modal-body h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; }
  .modal-body > form > p { margin: 0 0 20px; color: var(--slate); font-size: 16px; }
  .modal-close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--mist); cursor: pointer; display: grid; place-items: center; }
  .modal .btn-primary { width: 100%; }

  /* ---------- Переключатель вариантов для клиента: компактный, сворачивается ---------- */
  .variants { left: 16px; right: auto; bottom: 16px; flex-wrap: wrap; max-width: calc(100vw - 120px); border-radius: 18px; padding: 8px 10px; gap: 2px 4px; }
  .variants .grp { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
  .variants .grp + .grp { padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--stone); }
  .variants.is-closed .grp { display: none; }
  .variants .toggle { border: 0; background: var(--mist); border-radius: 999px; padding: 6px 12px; font: 600 13px var(--sans); cursor: pointer; }

  @media (max-width: 1180px) {
    .quote-banner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
    .chief2 { grid-template-columns: minmax(0, 1fr); }
    .chief2-photo { max-width: 520px; width: 100%; margin: 0 auto; }
    .team-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-mini .all { grid-column: 1 / -1; }
    .work { width: calc((100% - 16px) / 2); }
    .faq-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .life-bottom { grid-template-columns: minmax(0, 1fr); }
    .foot-grid.v5 { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px) {
    body { font-size: 16.5px; }
    .hero-card.hero-v { min-height: 640px; }
    .hero-v::before { background: linear-gradient(0deg, rgba(15,20,24,.92) 30%, rgba(15,20,24,.35) 70%, rgba(15,20,24,.2)); }
    .hero-v .hero-body { padding: 44px 20px 260px; }
    .quote-banner { grid-template-columns: minmax(0, 1fr); border-radius: 24px; margin: 0 calc(-1 * var(--gutter) + 8px); }
    .quote-body { padding: 36px 22px 0; }
    .quote-figure { height: 360px; }
    .quote-figure img { top: 6px; height: 470px; transform: translateX(-50%); }
    .quote-banner .plexus { width: 140%; right: -40%; top: 30%; height: 80%; }
    .quote-banner .tooth { right: 6%; bottom: 6%; width: 64px; }
    .team-mini { grid-template-columns: minmax(0, 1fr); }
    .work { width: 84%; }
    .works-head p { display: none; }
    .faq-vids { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
    .faq-item { flex: 0 0 60%; scroll-snap-align: start; }
    .rev-side .videos.vert { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; gap: 10px; }
    .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; padding: 0 8px; }
    .m-a { grid-column: span 2; grid-row: span 2; } .m-b, .m-d, .m-e, .m-f, .m-g { grid-column: span 1; } .m-c { grid-column: span 1; grid-row: span 2; }
    .soc-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-map { min-height: 0; display: flex; flex-direction: column; border-radius: 22px; }
    .contact-map iframe { position: relative; height: 300px; order: 2; }
    .contact-card { margin: 0; width: auto; border-radius: 0; box-shadow: none; padding: 24px 20px; }
    .contact-card dl { grid-template-columns: minmax(0, 1fr); }
    .contact-form { grid-template-columns: minmax(0, 1fr); }
    .foot-grid.v5 { grid-template-columns: minmax(0, 1fr); }
    .callme { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
    .callme .hint { display: none; }
    .modal-box { grid-template-columns: minmax(0, 1fr); }
    .modal-pic { display: none; }
    .variants { left: 8px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 90px); }
    .deco::after { width: 260px; height: 190px; top: -30px; }
  }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .head-soc .ico-mx { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
  @media (max-width: 760px) { .top .head-soc { display: none; } }
  /* исправления после проверки */
  .hero-v .hero-bar { color: var(--graphite); }
  .faq-vid > button { isolation: isolate; }
  .foot .btn-light { color: var(--forest); }
  .foot .btn-light:hover { color: var(--forest); }
  .quote-banner .tooth { right: auto; left: 47%; bottom: 9%; width: clamp(64px, 6vw, 96px); opacity: .75; }
  @media (max-width: 760px) { .quote-banner .tooth { display: none; } }
  @media (max-width: 760px) {
    .story { grid-template-columns: minmax(0, 1fr); }
    .story .compare, .story-text { grid-column: auto; }
    .story-video { aspect-ratio: 1 / 1; }
    .story-video img { object-position: 50% 50%; }
    .videos.vert .video b { font-size: 15px; }
    .m-g { grid-column: span 2; }
  }
  /* мозаика в общей колонке, а не во всю ширину окна: на широких экранах фото резались в полосы */
  .mosaic { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); grid-auto-rows: clamp(150px, 17vw, 250px); }
  .mosaic img { object-position: 50% 25%; }
  .life-bottom .equip { justify-content: flex-start; }
  @media (max-width: 760px) { .mosaic { padding: 0 var(--gutter); grid-auto-rows: 150px; } }
  /* ===================== v5.1 (16.10, правки клиента по макету) ===================== */

  /* 1. Первый экран: видео подложкой на весь экран, как на старом сайте */
  .hero { padding: 0; }
  .hero > .wrap { max-width: none; padding: 0; }
  .hero-card.hero-v { border-radius: 0; min-height: calc(100vh - 127px); min-height: calc(100svh - 127px); }
  .hero-v .hero-body { max-width: none; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: var(--gutter); }
  .hero-v .hero-body > * { max-width: 720px; }
  .hero-v .hero-bar { left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .hero > .wrap > .asof { padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }

  /* 2. Блок с фото главного врача: без сетки за фото, фото крупнее, по пояс */
  .quote-banner { min-height: clamp(460px, 40vw, 560px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .quote-banner .plexus { display: none; }
  .quote-banner .tooth { display: none; }
  .quote-figure img { top: auto; bottom: 0; height: 96%; transform: translateX(-50%); }
  .quote-figure img.q-dark { height: 98%; }

  /* 3. Аватар главного врача в историях крупнее */
  .story-text .who-did { font-size: 15px; gap: 14px; }
  .story-text .who-did .faces img { width: 64px; height: 64px; border-width: 2px; }

  /* 4. Миниатюры «до» в ленте работ крупнее */
  .work-before { width: 48%; border-width: 4px; }
  .work-before span { font-size: 12.5px; padding: 3px 9px; }

  /* 5. Оборудование: карточки с фото, как «Уникальное оборудование» у recstom */
  .eq-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: clamp(48px, 6vw, 72px) 0 18px; }
  .eq-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
  .eq-head p { margin: 6px 0 0; color: var(--slate); font-size: 15.5px; }
  .eq { width: calc((100% - 48px) / 4); display: flex; flex-direction: column; border-radius: 20px; background: var(--white); border: 1px solid var(--stone); overflow: hidden; }
  .eq-pic { position: relative; aspect-ratio: 4 / 3; background: var(--mist); overflow: hidden; }
  .eq-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .eq:hover .eq-pic img { transform: scale(1.04); }
  .eq-pic.soon { display: grid; place-items: center; background: linear-gradient(150deg, var(--panel) 30%, var(--panel-2)); }
  .eq-pic.soon img { width: 34%; height: auto; opacity: .6; }
  .eq-pic.soon small { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: rgba(255,255,255,.65); }
  .eq-body { padding: 16px 18px 20px; }
  .eq-body h4 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; }
  .eq-body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--slate); }
  .life-bottom.v51 { grid-template-columns: minmax(0, 1fr); }
  .life-bottom.v51 .soc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  @media (max-width: 1180px) {
    .eq { width: calc((100% - 16px) / 2.3); }
    .life-bottom.v51 .soc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .hero-card.hero-v { min-height: max(640px, calc(100svh - 64px)); }
    .hero-v .hero-body { padding: 44px var(--gutter) 260px; }
    .hero-v::before { background: linear-gradient(180deg, rgba(15,20,24,.78) 0%, rgba(15,20,24,.6) 45%, rgba(15,20,24,.92) 100%); }
    .hero-v .hero-bar { left: var(--gutter); right: var(--gutter); }
    .quote-figure { height: 380px; }
    .quote-figure img, .quote-figure img.q-dark { top: auto; bottom: 0; height: 100%; }
    .eq { width: 78%; }
    .life-bottom.v51 .soc-grid { grid-template-columns: minmax(0, 1fr); }
  }
  /* ===================== v5.2 (17.10, правки клиента по видео) ===================== */

  /* 1. Полоса акции над шапкой, как у recstom (текст меняется в админке) */
  .promo { position: relative; z-index: 41; background: #12171B; color: rgba(255,255,255,.88); font-size: 14px; }
  .promo .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding-right: 48px; }
  .promo b { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: #1C211F; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .promo a { color: #fff; text-underline-offset: 3px; }
  .promo-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; }
  .promo[hidden] { display: none; }

  /* 1. Шапка поверх видео первого экрана, как у recstom; при прокрутке снова белая */
  :root { --head-h: 127px; }
  .hero { margin-top: calc(-1 * var(--head-h)); }
  .hero-card.hero-v { min-height: 100vh; min-height: 100svh; }
  .hero-v .hero-body { padding-top: calc(var(--head-h) + clamp(40px, 6vw, 88px)); }
  .top { transition: background-color .3s, box-shadow .3s, color .3s; }
  .top:not(.is-scrolled):not(.is-open) { background: transparent; backdrop-filter: none; color: #fff; }
  .top:not(.is-scrolled):not(.is-open) .brand-mark { background: #fff; }
  .top:not(.is-scrolled):not(.is-open) .brand-text span,
  .top:not(.is-scrolled):not(.is-open) .info small { color: rgba(255,255,255,.72); }
  .top:not(.is-scrolled):not(.is-open) .info-ico,
  .top:not(.is-scrolled):not(.is-open) .icon-btn { background: rgba(255,255,255,.14); color: #fff; }
  .top:not(.is-scrolled):not(.is-open) .nav-row { border-top-color: rgba(255,255,255,.16); }
  .top:not(.is-scrolled):not(.is-open) .nav a { color: #fff; }
  .nav { gap: 30px; }
  .nav a { text-transform: uppercase; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; }
  .nav a.hot::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }

  /* 2. Обложки видео видны сразу; ролик стартует с той же обложки */
  .story-video video, .video video, .faq-vid video { object-fit: cover; }

  /* 3. Миниатюры «до» в ленте работ меньше (как было, чуть крупнее исходного) */
  .work-before { width: 36%; border-width: 3px; }

  /* 4. Фото в блоке цитаты: средний размер, регулируется ползунком в панели вариантов */
  :root { --q-size: 86%; }
  .quote-figure img { height: var(--q-size) !important; }
  .variants .rng { display: flex; align-items: center; gap: 6px; }
  .variants .rng input { position: static; opacity: 1; pointer-events: auto; width: 110px; accent-color: var(--forest); }

  /* 6. «Жизнь клиники» одной полосой (вариант) */
  html[data-life="strip"] .mosaic { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none; }
  html[data-life="strip"] .mosaic::-webkit-scrollbar { display: none; }
  html[data-life="strip"] .mosaic figure { flex: 0 0 clamp(240px, 26%, 360px); height: clamp(220px, 20vw, 300px); scroll-snap-align: start; }

  /* 7. Кнопка звонка: вариант с подписью, покачиванием и золотым свечением */
  html[data-call="label"] .callme { width: auto; height: 60px; padding: 0 22px 0 18px; border-radius: 999px; gap: 10px; display: inline-flex; align-items: center; font: 600 15.5px var(--sans); background: var(--gold); color: #1C211F; box-shadow: 0 0 0 0 rgba(176,141,74,.6); animation: glow 2.2s infinite; }
  html[data-call="label"] .callme::before, html[data-call="label"] .callme::after { border-radius: 999px; border-color: var(--gold); }
  html[data-call="label"] .callme .hint { position: static; opacity: 1; transform: none; padding: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; display: inline; }
  @keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(176,141,74,.55); } 70% { box-shadow: 0 0 0 16px rgba(176,141,74,0); } 100% { box-shadow: 0 0 0 0 rgba(176,141,74,0); } }

  /* 8. До/после в историях: открывается на «после», подсказка, что можно потянуть */
  .compare .drag-hint { position: absolute; z-index: 4; top: 50%; left: calc(var(--pos) + 34px); transform: translateY(-50%); padding: 7px 12px; border-radius: 999px; background: rgba(18,23,27,.78); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
  .compare.touched .drag-hint { opacity: 0; }

  @media (max-width: 760px) {
    :root { --head-h: 64px; }
    .promo { font-size: 12.5px; }
    .promo .wrap { justify-content: flex-start; padding-right: 44px; }
    .promo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .promo a { display: none; }
    .hero-v .hero-body { padding-top: calc(var(--head-h) + 40px); }
    html[data-call="label"] .callme { height: 52px; padding: 0 16px; font-size: 14px; }
    html[data-call="label"] .callme .hint { display: inline; }
    html[data-life="strip"] .mosaic figure { flex-basis: 72%; height: 220px; }
  }
  /* 5. Фото в блоке «Сильный главный врач»: варианты, все по высоте круга */
  .chief2-photo .main { width: auto; height: 100%; max-width: 118%; }
  /* ===================== v5.3 (20.10, правки Александра по видео 18–20.10) ===================== */

  /* 1. Основные кнопки графитовые; на тёмном фоне (видео, подложки, прозрачная шапка) белые */
  html[data-accent="green"] { --accent: #1F3E33; --accent-hover: #17322A; --on-accent: #FFFFFF; }
  html[data-accent="graphite"] { --accent: #1E252B; --accent-hover: #0F1418; --on-accent: #FFFFFF; }
  html[data-accent="graphite"] .hero-v .btn-primary,
  html[data-accent="graphite"] .consult .btn-primary,
  html[data-accent="graphite"] .dark-panel .btn-primary,
  html[data-accent="graphite"] .top:not(.is-scrolled):not(.is-open) .btn-primary { background: #fff; color: #1E252B; }
  html[data-accent="graphite"] .hero-v .btn-primary:hover,
  html[data-accent="graphite"] .consult .btn-primary:hover,
  html[data-accent="graphite"] .dark-panel .btn-primary:hover,
  html[data-accent="graphite"] .top:not(.is-scrolled):not(.is-open) .btn-primary:hover { background: #F2EBDD; }
  .chief2 .facts b { color: var(--graphite); }
  .btn-light, .foot .btn-light, .foot .btn-light:hover { color: #1E252B; }

  /* 2. Логотип крупнее; золото или золото с переливом (переключатель «Логотип») */
  :root { --logo-gold: linear-gradient(135deg, #EBD38E 0%, #C9A23A 50%, #A87B1E 100%); }
  .brand-mark { width: 72px; height: 54px; }
  .brand-text b { font-size: 21px; }
  .brand-text span { font-size: 13.5px; }
  html[data-logo="gold"] .brand-mark { background: var(--logo-gold) !important; }
  html[data-logo="shine"] .brand-mark {
    background: linear-gradient(110deg, #A87B1E 0%, #D4B055 28%, #FFF4C8 44%, #D4B055 60%, #A87B1E 100%) !important;
    background-size: 280% 100% !important; animation: logo-shine 4.2s ease-in-out infinite;
  }
  @keyframes logo-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
  @media (prefers-reduced-motion: reduce) { html[data-logo="shine"] .brand-mark { animation: none; background-position: 40% 0 !important; } }
  .foot .brand-mark { width: 84px; height: 62px; }
  .foot .brand-text b { font-size: 23px; }

  /* 3. Шапка: метка адреса красная, как на Яндексе; звезда рейтинга золотая */
  .info-addr .info-ico svg path, .fc-addr i svg path { fill: #FC3F1D; stroke: #FC3F1D; }
  .info-addr .info-ico svg circle, .fc-addr i svg circle { fill: #fff; stroke: #fff; }
  .info-rate .info-ico { color: #F5B800 !important; }
  .info .st { font-style: normal; color: #F5B800; }

  /* 4. Первый экран: подзаголовок крупнее и ярче, с золотой чертой */
  .hero-v .lead {
    max-width: 31em; padding-left: 20px; border-left: 3px solid var(--gold);
    color: #fff; font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 500; line-height: 1.42;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
  }

  /* 4. Первый экран целиком в окне и с полосой «Акция» сверху (иначе полоса с врачом уходила под край) */
  .promo:not([hidden]) ~ main .hero-card.hero-v { min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); }

  /* 4. Полоса первого экрана: фото главного врача крупнее (вариант «Портрет»: силуэт выходит над полосой) */
  .hero-bar .bar-team b { font-family: var(--serif); font-weight: 500; font-size: 20px; }
  .hero-bar .bar-team small { font-size: 14.5px; }
  html[data-bar="big"] .hero-bar .chief-face img { width: 84px; height: 84px; border: 3px solid var(--gold); box-shadow: 0 6px 18px rgba(28,33,31,.18); }
  .bar-portrait { display: none; }
  html[data-bar="portrait"] .hero-bar .bar-team { position: relative; padding-left: 168px; min-height: 104px; }
  html[data-bar="portrait"] .hero-bar .chief-face { display: none; }
  html[data-bar="portrait"] .bar-portrait { display: block; position: absolute; left: 16px; bottom: 0; height: 158px; width: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.22)); }

  /* 5. «С какой проблемой вы пришли?»: графитовая плашка, вопрос крупно, чипы крупнее и контрастнее */
  .ask {
    position: relative; overflow: hidden; isolation: isolate; gap: 16px 28px; margin-bottom: 32px;
    padding: 26px 30px; border-radius: 24px; background: linear-gradient(120deg, var(--panel) 35%, var(--panel-2)); color: #fff;
  }
  .ask::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -70px; width: 380px; height: 260px; background: url("img/plexus-dark.svg") no-repeat center / cover; opacity: .55; pointer-events: none; }
  .ask p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.15; color: #fff; }
  .chips { gap: 10px; }
  .chips button { min-height: 52px; padding: 0 22px; font-size: 16.5px; font-weight: 500; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.26); }
  .chips button:hover { background: rgba(255,255,255,.18); border-color: var(--panel-gold); }
  .chips button[aria-pressed="true"] { background: var(--panel-gold); border-color: var(--panel-gold); color: #1C211F; }

  /* 6. Цитата: фото в халате почти на весь баннер, плечо срезает правый край */
  :root { --q-size: 96%; }
  .quote-figure img { transform: translateX(-44%); }

  /* 7. Команда: большие карточки врачей с крупными фото, как у recstom */
  .team-row-head { align-items: flex-end; margin-bottom: 20px; }
  .team-row-head h3 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.08; }
  .team-row-head p { margin-top: 8px; font-size: 16px; }
  .team-big { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  .doc2 { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: 0 1px 0 rgba(28,33,31,.04); transition: box-shadow .3s, transform .3s var(--ease); }
  .doc2:hover { box-shadow: 0 18px 40px rgba(28,33,31,.12); transform: translateY(-3px); }
  .doc2-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #2E3338; }
  .doc2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; transition: transform .8s var(--ease); }
  .doc2:hover .doc2-photo img { transform: scale(1.04); }
  .doc2-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
  .doc2 h4 { margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; }
  .doc2 h4 a { text-decoration: none; }
  .doc2 .role { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #6A5326; }
  .doc2 .about { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--slate); }
  .doc2-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
  .doc2-actions .btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }

  /* 8. Ещё работы: миниатюра «до» в правом углу; вариант с ползунком, открыт на «после» */
  .work-before { left: auto; right: 14px; }
  .work-before span { right: auto; left: 6px; }
  .work-cmp { display: none; position: absolute; inset: 0; z-index: 1; aspect-ratio: auto; border-radius: 0; }
  .work-cmp .ba { top: auto; bottom: 14px; }
  .work-tag { z-index: 5; }
  html[data-works="slider"] .work-cmp { display: block; }
  html[data-works="slider"] .work-before { display: none; }

  /* 9. Отзывы: три видео одного размера, блок Яндекса уже */
  .rev-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .rev-side .videos.vert { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-soon { background: linear-gradient(160deg, var(--panel) 30%, var(--panel-2)); }
  .video-soon::before { display: none; }
  .video .tooth { position: absolute; inset: auto; left: 50%; top: 46%; z-index: 0; width: 38%; height: auto; transform: translate(-50%, -50%); opacity: .55; }
  .video-soon .v-body small { display: block; margin-top: 4px; }

  /* 10. Кнопка звонка появляется после первого экрана, чтобы не закрывать полосу с врачом и рейтингом */
  .callme { transition: opacity .35s, transform .35s var(--ease), visibility .35s; }
  html.on-hero .callme { opacity: 0; visibility: hidden; transform: translateY(16px); }

  @media (max-width: 1180px) {
    .rev-grid { grid-template-columns: minmax(0, 1fr); }
    .team-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rev-side .videos.vert { grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: start; }
  }
  @media (max-width: 760px) {
    /* цитата на телефоне в одну колонку: правило v5.1 для компьютера перебивало её, и текст наезжал на фото */
    .quote-banner { grid-template-columns: minmax(0, 1fr); }
    .quote-figure img { transform: translateX(-50%); }
    .brand-mark { width: 56px; height: 42px; }
    .brand-text b { font-size: 17px; }
    .brand-text span { font-size: 12px; }
    .hero-v .lead { font-size: 1.12rem; padding-left: 14px; }
    /* полоса с главным врачом видна на первом экране телефона, над нижними кнопками (раньше под ней было 260 px пустого видео) */
    .hero-card.hero-v { display: flex; flex-direction: column; }
    .hero-v .hero-body { flex: 1; padding-bottom: 24px; }
    .hero-v .hero-bar { margin: 0 var(--gutter) calc(84px + env(safe-area-inset-bottom)); }
    html[data-bar="big"] .hero-bar .chief-face img { width: 64px; height: 64px; }
    .hero-bar .bar-team b { font-size: 17px; }
    html[data-bar="portrait"] .hero-bar .bar-team { padding-left: 120px; min-height: 84px; }
    html[data-bar="portrait"] .bar-portrait { left: 8px; height: 118px; }
    .ask { padding: 20px 0 18px; border-radius: 20px; gap: 14px; }
    .ask::before { width: 260px; height: 180px; top: -50px; }
    .ask p { padding: 0 18px; font-size: 1.4rem; }
    .chips { width: 100%; margin: 0; padding: 0 18px 4px; }
    .chips button { min-height: 46px; padding: 0 16px; font-size: 15px; }
    .team-big { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scrollbar-width: none; }
    .team-big::-webkit-scrollbar { display: none; }
    .doc2 { flex: 0 0 76%; scroll-snap-align: start; }
    .rev-side .videos.vert { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scrollbar-width: none; }
    .rev-side .videos.vert::-webkit-scrollbar { display: none; }
    .rev-side .videos.vert .video { flex: 0 0 58%; scroll-snap-align: start; }
  }
  /* ===================== v5.4 (20.10, «Как добраться», новые работы, фото Air-Flow) ===================== */

  /* Контакты: справа на карте карточка «Как добраться» (текст клиники, сокращён), маршрут в Яндекс Картах */
  .contact-map { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
  .route-card { position: relative; z-index: 2; margin: 28px; width: min(400px, calc(100% - 56px)); padding: 26px 26px 22px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(28,33,31,.18); }
  .route-card h3 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
  .route-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--mist); }
  .route-row:first-of-type { padding-top: 0; border-top: 0; }
  .route-row > i { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--graphite); }
  .route-row b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
  .route-row span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--slate); }
  .bus { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
  .bus li { min-width: 44px; padding: 5px 10px; border-radius: 8px; background: #1E252B; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: center; }
  .route-card .btn-ya { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 6px; border-radius: 14px; border: 1.5px solid var(--graphite); background: #fff; color: var(--graphite); font: 600 15.5px/1 var(--sans); text-decoration: none; transition: background-color .2s, color .2s; }
  .route-card .btn-ya:hover { background: var(--graphite); color: #fff; }
  .route-card .btn-ya i { width: 22px; height: 22px; border-radius: 50%; background: #FC3F1D; color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12.5px; }
  /* «Не нашли клинику?» выделено мягкой золотой плашкой, рядом звонок */
  .lost { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 14px 14px 16px; border-radius: 16px; background: #F6EFE0; border-left: 3px solid var(--gold); }
  .lost p { margin: 0; font-size: 14px; line-height: 1.4; color: #5A5242; }
  .lost b { display: block; margin-bottom: 2px; font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--graphite); }
  .lost .btn { flex: none; min-height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }

  @media (max-width: 760px) {
    .contact-map { align-items: stretch; flex-wrap: nowrap; }
    .route-card { order: 3; margin: 0; width: auto; padding: 22px 20px 24px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--mist); }
    .route-card h3 { font-size: 26px; }
    .lost { flex-direction: column; align-items: stretch; }
    .lost .btn { width: 100%; }
  }
  /* ===================== v5.5 (20.10, карта по центру на клинике, иконка телефона в подвале) ===================== */
  /* ===================== v5.6 (21.10, видео Александра 00:54) ===================== */

  /* Шапка при прокрутке не белая: полупрозрачный графит с размытием, как поверх видео (золотой логотип не сливается).
     Переключатель «Шапка»: glass (по умолчанию), dark (плотнее), white (как раньше). */
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) { background: rgba(30,37,43,.62); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); color: #fff; box-shadow: 0 10px 28px rgba(15,20,24,.22); }
  html[data-head="dark"] .top.is-scrolled:not(.is-open) { background: rgba(20,25,29,.9); }
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) .brand-text span,
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) .info small { color: rgba(255,255,255,.72); }
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) .info-ico,
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) .icon-btn { background: rgba(255,255,255,.14); color: #fff; }
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) .nav-row { border-top-color: rgba(255,255,255,.14); }
  html:not([data-head="white"]) .top.is-scrolled:not(.is-open) .nav a { color: #fff; }
  html[data-logo="plain"]:not([data-head="white"]) .top.is-scrolled:not(.is-open) .brand-mark { background: #fff; }
  html[data-accent="graphite"]:not([data-head="white"]) .top.is-scrolled:not(.is-open) .btn-primary { background: #fff; color: #1E252B; }
  html[data-accent="graphite"]:not([data-head="white"]) .top.is-scrolled:not(.is-open) .btn-primary:hover { background: #F2EBDD; }
  /* ===================== v5.7 (21.10, видео и голосовые Александра 02:39–02:58) ===================== */

  /* Полоса первого экрана: прежний круг, но крупнее; вариант «навыпуск» выходит за верхний край полосы */
  html[data-bar="big"] .hero-bar .bar-team { padding-top: 10px; padding-bottom: 10px; }
  html[data-bar="big"] .hero-bar .chief-face img { width: 100px; height: 100px; border: 3px solid var(--gold); }
  html[data-bar="out"] .hero-bar .chief-face img { width: 132px; height: 132px; margin: -46px 0 0; border: 4px solid var(--gold); box-shadow: 0 12px 28px rgba(15,20,24,.28); background: #fff; }
  html[data-bar="out"] .hero-bar .bar-team { padding-top: 12px; padding-bottom: 12px; }

  /* Врачи: рейтинг в уголке фото, золотые звёзды с дробным заполнением и оценка (цифры шаблонные, меняются в админке) */
  .doc2-photo { position: relative; }
  .doc-rate { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 10px; border-radius: 999px; background: rgba(18,23,27,.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
  .doc-rate b { font: 700 15px/1 var(--sans); letter-spacing: .01em; }
  .stars { position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; color: rgba(255,255,255,.3); white-space: nowrap; }
  .stars::before { content: "★★★★★"; }
  .stars::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: calc(var(--r) / 5 * 100%); overflow: hidden; color: #F5B800; }

  /* Отзывы: фирменные значки площадок, как у мессенджеров */
  .pl-ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; font: 800 12.5px/1 var(--sans); font-style: normal; letter-spacing: .01em; box-shadow: 0 6px 14px rgba(28,33,31,.12); }
  .pl-2gis { background: #1DAD3A; }
  .pl-pd { background: #1E7FD8; font-size: 15px; }
  .pl-ya { background: #FC3F1D; border-radius: 50%; font-size: 21px; font-weight: 700; }
  .platform { justify-content: flex-start; gap: 14px; }
  .platform > span { flex: 1; }
  .platform small { font-weight: 600; color: var(--graphite); font-size: 14.5px; }
  .ya-top { align-items: center; }
  .ya-top .pl-ico { width: 52px; height: 52px; font-size: 24px; }

  @media (max-width: 760px) {
    /* пока открыта панель вариантов, кнопка звонка не накрывает её переключатели */
    html:has(.variants:not(.is-closed)) .callme { opacity: 0; visibility: hidden; pointer-events: none; }
    html[data-bar="big"] .hero-bar .chief-face img { width: 72px; height: 72px; }
    html[data-bar="out"] .hero-bar .chief-face img { width: 92px; height: 92px; margin-top: -32px; border-width: 3px; }
    .doc-rate { left: 10px; top: 10px; padding: 5px 9px; gap: 6px; }
    .doc-rate b { font-size: 14px; }
    .stars { font-size: 12.5px; }
    .ya-top .pl-ico { width: 44px; height: 44px; font-size: 20px; }
  }
  /* ===================== v5.8 (22.10, видео Александра 21.10 18:25) ===================== */

  /* Меню в шапке: крупнее и на всю ширину, это основные кнопки сайта */
  .nav { justify-content: space-between; gap: 18px; height: 60px; }
  .nav a { font-size: clamp(14px, 1.18vw, 17px); letter-spacing: .05em; padding: 10px 0; }
  .nav a.hot::before { width: 9px; height: 9px; margin-right: 9px; }

  /* Золотые линии из дизайна клиники: через блок (истории, отзывы, цены, контакты) */
  #otzyvy.deco::after { top: -10px; width: 470px; height: 330px; opacity: 1; }
  #vizit.deco::after, #kontakty.deco::after { top: -10px; width: 470px; height: 330px; opacity: .95; }
  #vizit.deco::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: max(0px, calc((100vw - var(--wrap)) / 2 - 170px)); bottom: -30px; width: 360px; height: 260px; background: url("img/plexus-corner.svg") no-repeat center / contain; opacity: .7; transform: scale(-1, -1); }

  @media (max-width: 760px) {
    #otzyvy.deco::after, #vizit.deco::after, #kontakty.deco::after { width: 260px; height: 190px; top: -16px; opacity: .8; }
    #vizit.deco::before { width: 200px; height: 150px; bottom: -20px; }
  }

  /* меню стало выше на 10 px: первый экран заходит под шапку на её новую высоту (иначе белый зазор под полосой «Акция») */
  @media (min-width: 761px) {
    :root { --head-h: 137px; }
    .hero-card.hero-v { min-height: calc(100vh - 137px); min-height: calc(100svh - 137px); }
  }
  /* ===================== v5.9 (22.10, видео Александра 04:16) ===================== */

  /* Меню: среднее между прежним и растянутым на всю ширину, промежутки меньше */
  .nav { justify-content: flex-start; gap: clamp(28px, 3.3vw, 56px); }

  /* Золотые линии только в пустой правой части блока, не за заголовком */
  #vizit.deco::before { content: none; }
  /* старое правило точечного узора (чётные секции: left 112px, bottom) тянуло линии влево: сбрасываем */
  #otzyvy.deco::after, #vizit.deco::after, #kontakty.deco::after { left: auto; bottom: auto; transform: none; }

  /* Карточки услуг: кружок главврача крупнее, чтобы было видно, кто это */
  .who { gap: 12px; }
  .who .faces img { width: 56px; height: 56px; border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,.25); }

  @media (max-width: 760px) {
    .who .faces img { width: 46px; height: 46px; }
  }
  /* ===================== v5.10 (22.10, видео Александра 21:01) ===================== */
  /* Истории пациентов: кадры 4:3 с головой целиком (prep_v5l.py), показываем по центру */
  .story .compare img[src*="-w.jpg"] { object-position: 50% 50%; }
  /* ===================== v5.11 (24.10, видео Александра 389202/389203) ===================== */
  /* Истории пациентов: все слайды в одной ячейке сетки, высота блока = самой высокой истории, при листании не прыгает */
  .stories { display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; }  /* clip: скрытые слайды шире окна, а hidden давал браузеру прокрутить блок вбок при листании */
  .stories > .story { display: grid; grid-row: 1; grid-column: 1; visibility: hidden; pointer-events: none; }
  .stories > .story.is-active { visibility: visible; pointer-events: auto; }
  .stories > .story-nav { grid-row: 2; }
  /* на телефоне окно сравнения 4:3: лишняя высота уходит вниз слайда, а не растягивает строки */
  @media (max-width: 760px) { .stories > .story { align-content: start; } }

/* ===================== Только в теме (в макете этого нет) ===================== */
.admin-bar .top { top: 32px; }
@media (max-width: 782px) { .admin-bar .top { top: 46px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-err { display: none; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #FBEDEA; color: #8A2A1B; font-size: 15px; line-height: 1.45; }
.form-err.is-on { display: block; }
.form-err a { font-weight: 600; }
.ya-widget { border-radius: var(--r-md); overflow: hidden; background: var(--white); }
.ya-widget iframe { display: block; width: 100%; height: 640px; border: 0; }
@media (max-width: 760px) { .ya-widget iframe { height: 520px; } }
.video iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 420px; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--white); box-shadow: 0 10px 34px rgba(28,33,31,.16); font-size: 13.5px; line-height: 1.45; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; }
@media (max-width: 760px) { .cookie { left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: none; } }
.agree input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.agree.err span { color: #8A2A1B; }
/* на телефоне плашка cookie стоит там же, где кнопка звонка: пока плашка видна, звонок есть в нижней панели */
@media (max-width: 760px) { html:has(#cookie:not([hidden])) .callme { opacity: 0; visibility: hidden; pointer-events: none; } }
/* Полоса «Акция» с второй строкой: компьютер в одну строку, телефон в две (цена, ниже мелко описание) */
.promo span.has-sub { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.promo span.has-sub strong { color: #fff; font-weight: 600; white-space: nowrap; }
.promo span.has-sub small { font-size: 12.5px; opacity: .82; }
@media (max-width: 760px) {
  .promo:has(.has-sub) .wrap { align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
  .promo:has(.has-sub) b { margin-top: 1px; }
  .promo span.has-sub { display: block; overflow: visible; white-space: normal; }
  .promo span.has-sub strong { display: block; font-size: 13.5px; }
  .promo span.has-sub small { display: block; font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
  .promo:not([hidden]):has(.has-sub) ~ main .hero-card.hero-v { min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); }
}

/* ===================== v5.12 (30.10, видео Александра с телефона) ===================== */
/* Лента работ: на телефоне ползунок «до/после» ловит палец только у своей ручки, а остальное поле листает ленту */
.work-cmp .grip { display: none; }
@media (hover: none), (pointer: coarse) {
  .work-cmp { touch-action: pan-x pan-y; }
  .work-cmp input[type=range] { pointer-events: none; touch-action: pan-x pan-y; }
  .work-cmp .grip { display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos, 22%); width: 76px; margin-left: -38px; touch-action: none; }
}
/* Стрелки под лентой работ: на телефоне видны, как у «Историй» */
.arrows.arrows-m { display: none; }
@media (max-width: 760px) {
  .arrows.arrows-m { display: flex; justify-content: center; gap: 16px; margin-top: 14px; }
  .arrows.arrows-m[hidden] { display: none; }
  .arrows.arrows-m button { width: 52px; height: 52px; background: var(--graphite); color: #fff; }
  .sec:not(.tint) .arrows.arrows-m button { background: var(--graphite); }
  .arrows.arrows-m button:hover { background: var(--panel); }
}

@media (max-width: 760px) {
  /* Первый экран на телефоне: ролик целиком в рамке сверху (без сильного увеличения), текст ниже на графите */
  main .hero .hero-card.hero-v { min-height: 0 !important; }
  .hero-v .hero-video, .hero-v .hero-poster { top: 0; right: 0; bottom: auto; left: 0; height: calc(var(--head-h) + 64vw); object-position: 50% 45%; }
  .hero-v::before { inset: 0 0 auto 0; height: calc(var(--head-h) + 64vw); background: linear-gradient(180deg, rgba(15,20,24,.62) 0, rgba(15,20,24,.08) 40%, rgba(15,20,24,0) 58%, #12171B 100%); }
  .hero-v .hero-body { padding-top: calc(var(--head-h) + 64vw - 30px); padding-bottom: 22px; }
  .hero-v .hero-bar { margin-bottom: 18px; }

  /* Нижняя панель: Врачи, Цены, Позвонить, Контакты, Записаться; на первом экране её нет, появляется при прокрутке */
  .dock { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); align-items: end; transition: transform .35s var(--ease); }
  html.on-hero .dock { transform: translateY(110%); }
  .dock .dk { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 56px; padding: 6px 2px 5px; border-radius: 14px; font: 600 11.5px/1.1 var(--sans); color: var(--graphite); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .dock .dk svg { width: 24px; height: 24px; flex: none; }
  .dock .dk:active { background: var(--mist); }
  .dock .dk-call .dk-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: var(--gold); color: #1C211F; box-shadow: 0 6px 16px rgba(176,141,74,.5); }
  .dock .dk-cta { background: var(--graphite); color: #fff; font-size: 11px; letter-spacing: -.01em; }
  .dock .dk-cta:active { background: var(--panel); }
}

/* v5.12b (30.10): на телефоне плавающая кнопка звонка не нужна, звонок и запись теперь в нижней панели (она закрывала текст у панели) */
@media (max-width: 760px) {
  .callme, html[data-call="label"] .callme { display: none !important; }
}