:root {
  --cycle: 29s;
  --navy: #173653;
  --blue: #4f83b7;
  --orange: #f36b3b;
  --ink: #182432;
  --paper: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; }
body { font-family: "Segoe UI", Arial, sans-serif; color: var(--ink); }
button { font: inherit; }

.demo-shell { min-height: 100vh; overflow-x: hidden; }


/* ==========================================================
   STICKY CONTACT HEADER
   Quiet on the opening frame, clearer as soon as the visitor scrolls.
   ========================================================== */
.contact-header {
  position: fixed;
  z-index: 90;
  top: 14px;
  left: 50%;
  width: min(1540px, calc(100% - 34px));
  transform: translateX(-50%);
  color: rgba(23,54,83,.64);
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(23,54,83,.035);
  backdrop-filter: blur(9px) saturate(1.02);
  -webkit-backdrop-filter: blur(9px) saturate(1.02);
  transition:
    color .38s ease,
    background .38s ease,
    border-color .38s ease,
    box-shadow .38s ease,
    transform .38s cubic-bezier(.2,.7,.2,1);
}

.contact-header__inner {
  min-height: 58px;
  padding: 8px 10px 8px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.contact-header__brand,
.contact-header__info a {
  color: inherit;
  text-decoration: none;
}

.contact-header__brand {
  flex: 0 0 auto;
  color: rgba(243,107,59,.78);
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.018em;
  transition: color .38s ease, transform .38s ease;
}

.contact-header__info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.2vw, 38px);
  min-width: 0;
  font-size: 14px;
  font-weight: 520;
  letter-spacing: .002em;
}

.contact-header__hours { white-space: nowrap; }

.contact-header__contacts,
.contact-header__phone {
  position: relative;
  white-space: nowrap;
  transition: color .25s ease, opacity .25s ease;
}

.contact-header__contacts::after,
.contact-header__phone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--orange);
  transition: right .28s ease;
}

.contact-header__contacts:hover::after,
.contact-header__contacts:focus-visible::after,
.contact-header__phone:hover::after,
.contact-header__phone:focus-visible::after { right: 0; }

.contact-header__phone { font-weight: 650; }

.contact-header__cta {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff !important;
  background: rgba(243,107,59,.82);
  box-shadow: 0 6px 18px rgba(243,107,59,.10);
  font-weight: 690;
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.contact-header__cta:hover,
.contact-header__cta:focus-visible {
  background: var(--orange);
  box-shadow: 0 10px 24px rgba(243,107,59,.18);
  transform: translateY(-1px);
  outline: none;
}

/* Scroll state: the line becomes deliberately more noticeable without flashing. */
.contact-header.is-scrolled {
  color: rgba(23,54,83,.96);
  background: rgba(255,255,255,.94);
  border-color: rgba(23,54,83,.085);
  box-shadow: 0 14px 38px rgba(23,54,83,.12);
  transform: translateX(-50%) translateY(2px);
}

.contact-header.is-scrolled .contact-header__brand { color: var(--orange); }
.contact-header.is-scrolled .contact-header__phone { color: var(--navy); }
.contact-header.is-scrolled .contact-header__cta { background: var(--orange); }

@media (max-width: 900px) {
  .contact-header { top: 10px; width: calc(100% - 20px); border-radius: 24px; }
  .contact-header__inner { min-height: 54px; padding-left: 16px; gap: 12px; }
  .contact-header__info { gap: 14px; font-size: 13px; }
  .contact-header__hours { display: none; }
  .contact-header__cta { padding: 9px 13px; }
}

@media (max-width: 590px) {
  .contact-header__brand { font-size: 16px; }
  .contact-header__contacts { display: none; }
  .contact-header__phone { font-size: 0; }
  .contact-header__phone::before {
    content: "Позвонить";
    font-size: 13px;
  }
  .contact-header__phone::after { display: none; }
  .contact-header__cta { font-size: 13px; }
}

.hero {
  position: relative;
  width: 100%;
  /* Taller cinematic frame: extends roughly halfway into the old white gap below. */
  height: clamp(720px, 86svh, 960px);
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.hero__scene,
.hero__image,
.hero__focus,
.hero__transition,
.hero__flare,
.hero__film-grain,
.hero__copy {
  position: absolute;
  inset: 0;
}

.hero__scene { will-change: opacity; }
.hero__scene--one { animation: sceneOneOpacity var(--cycle) linear infinite; }
.hero__scene--two { opacity: 0; animation: sceneTwoOpacity var(--cycle) linear infinite; }
.hero__scene--three { opacity: 0; animation: sceneThreeOpacity var(--cycle) linear infinite; }
.hero__scene--four { opacity: 0; animation: sceneFourOpacity var(--cycle) linear infinite; }
.hero__scene--five { opacity: 0; animation: sceneFiveOpacity var(--cycle) linear infinite; }
.hero__scene--six { opacity: 0; animation: sceneSixOpacity var(--cycle) linear infinite; }

.hero__image {
  background-repeat: no-repeat;
  background-size: cover;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, filter;
}

/* Scene 1: reception. Keep the people in the right half while the wall remains a clean title field. */
.hero__scene--one .hero__image {
  background-image: url("/template/home2026/assets/scene-1.webp");
  background-position: 54% 50%;
}
.hero__scene--one .hero__image--base {
  transform-origin: 70% 53%;
  animation: sceneOneBase var(--cycle) linear infinite;
}
.hero__scene--one .hero__focus {
  background:
    radial-gradient(ellipse 42% 68% at 74% 55%, transparent 0 48%, rgba(255,255,255,.03) 64%, rgba(18,33,48,.11) 100%),
    linear-gradient(90deg, rgba(255,255,255,.11), transparent 35%, transparent 80%, rgba(255,255,255,.05));
  animation: focusOne var(--cycle) ease-in-out infinite;
}

/* Scene 2: consultation. */
.hero__scene--two .hero__image {
  background-image: url("/template/home2026/assets/scene-2.webp");
  background-position: 51% 50%;
}
.hero__scene--two .hero__image--base {
  transform-origin: 62% 53%;
  animation: sceneTwoBase var(--cycle) linear infinite;
}
.hero__scene--two .hero__focus {
  background:
    radial-gradient(ellipse 43% 70% at 62% 56%, transparent 0 48%, rgba(255,255,255,.035) 65%, rgba(18,33,48,.10) 100%),
    linear-gradient(90deg, rgba(255,255,255,.11), transparent 36%, transparent 80%, rgba(255,255,255,.06));
  animation: focusTwo var(--cycle) ease-in-out infinite;
}

/* Scene 3: children's playroom. Same cinematic language, with the child as the focal area. */
.hero__scene--three .hero__image {
  background-image: url("/template/home2026/assets/scene-3.webp");
  background-position: 52% 50%;
}
.hero__scene--three .hero__image--base {
  transform-origin: 52% 57%;
  animation: sceneThreeBase var(--cycle) linear infinite;
}
.hero__scene--three .hero__focus {
  background:
    radial-gradient(ellipse 43% 70% at 51% 57%, transparent 0 48%, rgba(255,255,255,.035) 65%, rgba(18,33,48,.10) 100%),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 36%, transparent 80%, rgba(255,255,255,.055));
  animation: focusThree var(--cycle) ease-in-out infinite;
}


/* Scene 4: ultrasound — one continuous shot carries both diagnosis and explanation. */
.hero__scene--four .hero__image {
  background-image: url("/template/home2026/assets/scene-4.webp");
  background-position: 50% 50%;
}
.hero__scene--four .hero__image--base {
  transform-origin: 49% 53%;
  animation: sceneFourBase var(--cycle) linear infinite;
}
.hero__scene--four .hero__focus {
  background:
    radial-gradient(ellipse 43% 70% at 48% 53%, transparent 0 48%, rgba(255,255,255,.03) 65%, rgba(18,33,48,.095) 100%),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 37%, transparent 82%, rgba(255,255,255,.05));
  animation: focusFour var(--cycle) ease-in-out infinite;
}

/* Scene 5: collegial discussion. */
.hero__scene--five .hero__image {
  background-image: url("/template/home2026/assets/scene-5.webp");
  background-position: 52% 50%;
}
.hero__scene--five .hero__image--base {
  transform-origin: 57% 53%;
  animation: sceneFiveBase var(--cycle) linear infinite;
}
.hero__scene--five .hero__focus {
  background:
    radial-gradient(ellipse 48% 72% at 58% 56%, transparent 0 49%, rgba(255,255,255,.03) 66%, rgba(18,33,48,.09) 100%),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 38%, transparent 84%, rgba(255,255,255,.045));
  animation: focusFive var(--cycle) ease-in-out infinite;
}

/* Scene 6: a satisfied family leaves the clinic; everyday clinic life remains in the background. */
.hero__scene--six .hero__image {
  background-image: url("/template/home2026/assets/scene-6.webp");
  background-position: 52% 50%;
}
.hero__scene--six .hero__image--base {
  transform-origin: 55% 53%;
  animation: sceneSixBase var(--cycle) linear infinite;
}
.hero__scene--six .hero__focus {
  background:
    radial-gradient(ellipse 47% 72% at 54% 55%, transparent 0 48%, rgba(255,255,255,.035) 65%, rgba(18,33,48,.085) 100%),
    linear-gradient(90deg, rgba(255,255,255,.105), transparent 37%, transparent 83%, rgba(255,255,255,.045));
  animation: focusSix var(--cycle) ease-in-out infinite;
}

/* Final white frame: the film resolves into the brand and the site's next question. */
.hero__final {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(244,249,253,.92), rgba(255,255,255,1) 58%),
    #fff;
  animation: finalSceneOpacity var(--cycle) linear infinite;
}
.hero__final-inner {
  width: min(760px, 82vw);
  display: grid;
  justify-items: center;
  text-align: center;
  transform: translateY(-2vh);
}
.hero__final-logo {
  width: clamp(240px, 20vw, 380px);
  height: auto;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(5px);
  animation: finalLogo var(--cycle) ease-in-out infinite;
}
.hero__final-tagline,
.hero__final-question {
  margin: 0;
  color: var(--navy);
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  will-change: opacity, transform, filter;
}
.hero__final-tagline {
  margin-top: 4px;
  font-size: clamp(15px, 1.28vw, 22px);
  line-height: 1.4;
  font-weight: 430;
  letter-spacing: .01em;
  animation: finalTagline var(--cycle) ease-in-out infinite;
}
.hero__final-question {
  margin-top: 22px;
  font-size: clamp(24px, 2.15vw, 42px);
  line-height: 1.12;
  font-weight: 520;
  letter-spacing: -.025em;
  animation: finalQuestion var(--cycle) ease-in-out infinite;
}
.hero__final-question span { color: var(--orange); }

/*
  Text-safe field. On wide screens it is almost invisible because both source
  images are already pale on the left; on narrower screens it guarantees that
  titles remain in clean white space rather than crossing faces or bodies.
*/
.hero::before {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0 auto 0 0;
  width: min(47vw, 980px);
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.985) 58%,
    rgba(255,255,255,.78) 74%,
    rgba(255,255,255,.22) 91%,
    rgba(255,255,255,0) 100%);
}

/* Soft optical dissolve between shots: white exposure bloom + horizontal lens flare. */
.hero__transition {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 67% 48%, rgba(255,255,255,.96), rgba(255,255,255,.55) 32%, rgba(255,255,255,0) 72%);
  mix-blend-mode: screen;
  animation: exposureBloom var(--cycle) ease-in-out infinite;
}

.hero__flare {
  z-index: 5;
  pointer-events: none;
  width: 40vw;
  left: -52vw;
  right: auto;
  opacity: 0;
  background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.15) 22%,
      rgba(255,255,255,.95) 50%,
      rgba(255,246,230,.38) 63%,
      rgba(255,255,255,0) 100%);
  filter: blur(10px);
  transform: skewX(-13deg);
  animation: lensSweep var(--cycle) ease-in-out infinite;
}

.hero__film-grain {
  z-index: 6;
  pointer-events: none;
  opacity: .035;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(0,0,0,.32) 0 .6px, transparent .8px 3px),
    repeating-radial-gradient(circle at 83% 71%, rgba(255,255,255,.7) 0 .5px, transparent .7px 3.2px);
  background-size: 8px 9px, 11px 10px;
  mix-blend-mode: soft-light;
  animation: grainJitter .42s steps(2,end) infinite;
}

.hero__copy { z-index: 10; pointer-events: none; }
.title {
  position: absolute;
  margin: 0;
  /* Keep every desktop title inside the left safe zone. */
  max-width: min(520px, 26vw);
  color: var(--navy);
  font-size: clamp(28px, 2.55vw, 54px);
  line-height: 1.08;
  font-weight: 330;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(255,255,255,.85);
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform, filter;
}
.title span { color: var(--orange); font-weight: 640; }
.title::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--orange);
  transform-origin: left center;
}

.title--1 { left: 5.5vw; top: 29%; animation: titleOne var(--cycle) ease-in-out infinite; }
.title--2 { left: 8.5vw; top: 53%; max-width: min(540px, 27vw); font-size: clamp(25px, 2.15vw, 46px); animation: titleTwo var(--cycle) ease-in-out infinite; }
.title--3 { left: 5.5vw; top: 33%; animation: titleThree var(--cycle) ease-in-out infinite; }
.title--4 { left: 8.5vw; top: 52%; max-width: min(560px, 28vw); font-size: clamp(25px, 2.1vw, 45px); animation: titleFour var(--cycle) ease-in-out infinite; }
.title--5 { left: 5.5vw; top: 33%; animation: titleFive var(--cycle) ease-in-out infinite; }
.title--6 { left: 8.5vw; top: 52%; max-width: min(560px, 28vw); font-size: clamp(25px, 2.1vw, 45px); animation: titleSix var(--cycle) ease-in-out infinite; }
.title--7, .title--9, .title--11, .title--13 { left: 5.5vw; top: 33%; }
.title--8, .title--10, .title--12, .title--14 { left: 8.5vw; top: 52%; max-width: min(590px, 29vw); font-size: clamp(25px, 2.1vw, 45px); }
.title--7 { animation: titleSeven var(--cycle) ease-in-out infinite; }
.title--8 { animation: titleEight var(--cycle) ease-in-out infinite; }
.title--9 { animation: titleNine var(--cycle) ease-in-out infinite; }
.title--10 { animation: titleTen var(--cycle) ease-in-out infinite; }
.title--11 { animation: titleEleven var(--cycle) ease-in-out infinite; }
.title--12 { animation: titleTwelve var(--cycle) ease-in-out infinite; }
.title--13 { animation: titleThirteen var(--cycle) ease-in-out infinite; }
.title--14 { animation: titleFourteen var(--cycle) ease-in-out infinite; }

.hero__scroll {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(23,54,83,.7);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  animation: scrollHint var(--cycle) ease-in-out infinite;
}
.hero__scroll i {
  display: block;
  width: 1px;
  height: 30px;
  background: linear-gradient(var(--orange), transparent);
  animation: scrollLine 1.7s ease-in-out infinite;
}

.demo-controls {
  position: absolute;
  z-index: 20;
  right: 18px;
  bottom: 17px;
  display: flex;
  gap: 7px;
  opacity: .18;
  transition: opacity .2s ease;
}
.hero:hover .demo-controls { opacity: .82; }
.demo-controls button {
  border: 1px solid rgba(23,54,83,.18);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255,255,255,.74);
  color: var(--navy);
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.after-hero {
  min-height: 340px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #8a99a8;
  font-size: 15px;
}

/* Whole-scene visibility: a 29-second patient-journey film. */

@keyframes sceneOneOpacity {
  0%, 18.793% { opacity: 1; }
  20.000% { opacity: 0; }
  98.793% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sceneTwoOpacity {
  0%, 18.793% { opacity: 0; }
  20.000% { opacity: 1; }
  38.793% { opacity: 1; }
  40.000%,100% { opacity: 0; }
}

@keyframes sceneThreeOpacity {
  0%, 38.793% { opacity: 0; }
  40.000% { opacity: 1; }
  49.138% { opacity: 1; }
  50.345%,100% { opacity: 0; }
}

@keyframes sceneFourOpacity {
  0%, 49.138% { opacity: 0; }
  50.345% { opacity: 1; }
  67.759% { opacity: 1; }
  68.966%,100% { opacity: 0; }
}

@keyframes sceneFiveOpacity {
  0%, 67.759% { opacity: 0; }
  68.966% { opacity: 1; }
  78.103% { opacity: 1; }
  79.310%,100% { opacity: 0; }
}

@keyframes sceneSixOpacity {
  0%, 78.103% { opacity: 0; }
  79.310% { opacity: 1; }
  88.448% { opacity: 1; }
  89.655%,100% { opacity: 0; }
}

@keyframes finalSceneOpacity {
  0%, 88.448% { opacity:0; }
  89.655% { opacity:1; }
  98.448% { opacity:1; }
  100% { opacity:0; }
}

/* Ken Burns motion. Motion never resets while a shot is visible. */

@keyframes sceneOneBase {
  0% { transform: scale(1.008) translate3d(.08%,0,0); filter: saturate(.985) contrast(1); }
  19.483% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); filter: saturate(1.018) contrast(1.012); }
  20.000%, 97.241% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); }
  98.793%,100% { transform: scale(1.008) translate3d(.08%,0,0); filter: saturate(.985) contrast(1); }
}


@keyframes focusOne {
  0% { opacity:.32; }
  10.400% { opacity:.16; }
  19.483% { opacity:.27; }
  20.000%, 98.276% { opacity:.27; }
  100% { opacity:.32; }
}

@keyframes sceneTwoBase {
  0%, 19.310% { transform: scale(1.008) translate3d(.08%,0,0); filter: saturate(.985) contrast(1); }
  20.000% { transform: scale(1.008) translate3d(.08%,0,0); }
  39.483% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); filter: saturate(1.018) contrast(1.012); }
  40.000%,100% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); }
}


@keyframes focusTwo {
  0%, 20.000% { opacity:.30; }
  30.400% { opacity:.16; }
  39.483% { opacity:.27; }
  40.000%,100% { opacity:.27; }
}

@keyframes sceneThreeBase {
  0%, 39.310% { transform: scale(1.008) translate3d(.08%,0,0); filter: saturate(.985) contrast(1); }
  40.000% { transform: scale(1.008) translate3d(.08%,0,0); }
  49.828% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); filter: saturate(1.018) contrast(1.012); }
  50.345%,100% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); }
}


@keyframes focusThree {
  0%, 40.000% { opacity:.30; }
  45.379% { opacity:.16; }
  49.828% { opacity:.27; }
  50.345%,100% { opacity:.27; }
}

@keyframes sceneFourBase {
  0%, 49.655% { transform: scale(1.006) translate3d(.10%,0,0); filter: saturate(.985) contrast(1); }
  50.345% { transform: scale(1.006) translate3d(.10%,0,0); }
  68.448% { transform: scale(1.092) translate3d(-1.20%,-.42%,0); filter: saturate(1.018) contrast(1.012); }
  68.966%,100% { transform: scale(1.092) translate3d(-1.20%,-.42%,0); }
}


@keyframes focusFour {
  0%, 50.345% { opacity:.30; }
  60.028% { opacity:.16; }
  68.448% { opacity:.27; }
  68.966%,100% { opacity:.27; }
}

@keyframes sceneFiveBase {
  0%, 68.276% { transform: scale(1.008) translate3d(.08%,0,0); filter: saturate(.985) contrast(1); }
  68.966% { transform: scale(1.008) translate3d(.08%,0,0); }
  78.793% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); filter: saturate(1.018) contrast(1.012); }
  79.310%,100% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); }
}


@keyframes focusFive {
  0%, 68.966% { opacity:.30; }
  74.345% { opacity:.16; }
  78.793% { opacity:.27; }
  79.310%,100% { opacity:.27; }
}

@keyframes sceneSixBase {
  0%, 78.621% { transform: scale(1.008) translate3d(.08%,0,0); filter: saturate(.985) contrast(1); }
  79.310% { transform: scale(1.008) translate3d(.08%,0,0); }
  89.138% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); filter: saturate(1.018) contrast(1.012); }
  89.655%,100% { transform: scale(1.086) translate3d(-1.15%,-.42%,0); }
}


@keyframes focusSix {
  0%, 79.310% { opacity:.30; }
  84.690% { opacity:.16; }
  89.138% { opacity:.27; }
  89.655%,100% { opacity:.27; }
}

@keyframes exposureBloom {
  18.552% { opacity:0; transform:scale(0.94); }
  19.379% { opacity:0.18; transform:scale(0.98); }
  20.000% { opacity:0.56; transform:scale(1.08); }
  20.621% { opacity:0.18; transform:scale(1.02); }
  21.448% { opacity:0; transform:scale(0.94); }
  38.552% { opacity:0; transform:scale(0.94); }
  39.379% { opacity:0.18; transform:scale(0.98); }
  40.000% { opacity:0.56; transform:scale(1.08); }
  40.621% { opacity:0.18; transform:scale(1.02); }
  41.448% { opacity:0; transform:scale(0.94); }
  48.897% { opacity:0; transform:scale(0.94); }
  49.724% { opacity:0.18; transform:scale(0.98); }
  50.345% { opacity:0.56; transform:scale(1.08); }
  50.966% { opacity:0.18; transform:scale(1.02); }
  51.793% { opacity:0; transform:scale(0.94); }
  67.517% { opacity:0; transform:scale(0.94); }
  68.345% { opacity:0.18; transform:scale(0.98); }
  68.966% { opacity:0.56; transform:scale(1.08); }
  69.586% { opacity:0.18; transform:scale(1.02); }
  70.414% { opacity:0; transform:scale(0.94); }
  77.862% { opacity:0; transform:scale(0.94); }
  78.690% { opacity:0.18; transform:scale(0.98); }
  79.310% { opacity:0.56; transform:scale(1.08); }
  79.931% { opacity:0.18; transform:scale(1.02); }
  80.759% { opacity:0; transform:scale(0.94); }
  88.207% { opacity:0; transform:scale(0.94); }
  89.034% { opacity:0.18; transform:scale(0.98); }
  89.655% { opacity:0.56; transform:scale(1.08); }
  90.276% { opacity:0.18; transform:scale(1.02); }
  91.103% { opacity:0; transform:scale(0.94); }
}

@keyframes lensSweep {
  18.690% { left:-52vw; opacity:0; }
  19.448% { left:-52vw; opacity:0.18; }
  20.552% { left:112vw; opacity:0.62; }
  21.310% { left:112vw; opacity:0; }
  38.690% { left:-52vw; opacity:0; }
  39.448% { left:-52vw; opacity:0.18; }
  40.552% { left:112vw; opacity:0.62; }
  41.310% { left:112vw; opacity:0; }
  49.034% { left:-52vw; opacity:0; }
  49.793% { left:-52vw; opacity:0.18; }
  50.897% { left:112vw; opacity:0.62; }
  51.655% { left:112vw; opacity:0; }
  67.655% { left:-52vw; opacity:0; }
  68.414% { left:-52vw; opacity:0.18; }
  69.517% { left:112vw; opacity:0.62; }
  70.276% { left:112vw; opacity:0; }
  78.000% { left:-52vw; opacity:0; }
  78.759% { left:-52vw; opacity:0.18; }
  79.862% { left:112vw; opacity:0.62; }
  80.621% { left:112vw; opacity:0; }
  88.345% { left:-52vw; opacity:0; }
  89.103% { left:-52vw; opacity:0.18; }
  90.207% { left:112vw; opacity:0.62; }
  90.966% { left:112vw; opacity:0; }
}

@keyframes grainJitter {
  0% { transform: translate(0,0); }
  50% { transform: translate(-1px,1px); }
  100% { transform: translate(1px,-1px); }
}

/* Titles: first two scenes keep their calm cadence; later short scenes stack their two parts. */

@keyframes titleOne {
  0%, 1.552% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  3.103% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  10.862% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  12.586%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleTwo {
  0%, 8.793% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  10.172% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  17.759% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  19.483%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleThree {
  0%, 21.207% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  22.586% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  30.345% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  32.069%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleFour {
  0%, 29.138% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  30.517% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  37.931% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  39.655%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleFive {
  0%, 40.414% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  41.207% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  47.414% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  48.621%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleSix {
  0%, 42.069% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  42.862% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  49.138% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  50.345%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleSeven {
  0%, 50.621% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  51.379% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  60.517% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  61.379%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleEight {
  0%, 56.483% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  57.241% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  60.517% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  61.379%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleNine {
  0%, 61.379% { opacity:0; transform:translate3d(0,18px,0); filter:blur(8px); }
  62.069% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  67.931% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  68.966%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleTen {
  0%, 61.379% { opacity:0; transform:translate3d(0,18px,0); filter:blur(8px); }
  62.069% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  67.931% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  68.966%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleEleven {
  0%, 69.379% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  70.138% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  76.207% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  77.414%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleTwelve {
  0%, 71.034% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  71.793% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  77.931% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  79.138%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleThirteen {
  0%, 79.724% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  80.483% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  86.552% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  87.759%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes titleFourteen {
  0%, 81.379% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  82.138% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  88.276% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  89.483%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes finalLogo {
  0%, 89.828% { opacity:0; transform:translateY(14px) scale(.985); filter:blur(9px); }
  90.966% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  97.069% { opacity:1; transform:translateY(-1px) scale(1); filter:blur(0); }
  98.448%,100% { opacity:0; transform:translateY(-8px) scale(.995); filter:blur(4px); }
}

@keyframes finalTagline {
  0%, 90.966% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  92.000% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  97.241% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  98.621%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes finalQuestion {
  0%, 92.828% { opacity:0; transform:translate3d(0,22px,0); filter:blur(9px); }
  93.793% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  98.276% { opacity:1; transform:translate3d(0,-2px,0); filter:blur(0); }
  99.655%,100% { opacity:0; transform:translate3d(0,-14px,0); filter:blur(4px); }
}

@keyframes scrollHint {
  0%, 2.759% { opacity:0; }
  5.172%, 87.931% { opacity:.9; }
  89.655%,100% { opacity:0; }
}

@keyframes scrollLine {
  0% { transform: scaleY(.25); transform-origin: top; opacity:.25; }
  45% { transform: scaleY(1); opacity:.9; }
  100% { transform: scaleY(.25); transform-origin: bottom; opacity:.15; }
}



/* Pausing affects every animated descendant. */
.hero.is-paused,
.hero.is-paused * { animation-play-state: paused !important; }

/* Responsive art direction for the same desktop assets. */
@media (max-width: 980px) {
  .hero { height: clamp(690px, 88svh, 900px); min-height: 690px; }
  .hero::before {
    width: 58vw;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0 62%, rgba(255,255,255,.92) 77%, rgba(255,255,255,.24) 94%, transparent 100%);
  }
  .hero__scene--one .hero__image { background-position: 55% 50%; }
  .hero__scene--two .hero__image { background-position: 53% 50%; }
  .hero__scene--three .hero__image { background-position: 52% 50%; }
  .hero__scene--four .hero__image { background-position: 50% 50%; }
  .hero__scene--five .hero__image { background-position: 54% 50%; }
  .hero__scene--six .hero__image { background-position: 54% 50%; }
  .title { max-width: 43vw; font-size: clamp(26px, 4.2vw, 43px); }
  .title--1, .title--3, .title--5, .title--7, .title--9, .title--11, .title--13 { left: 6vw; top: 15%; }
  .title--2, .title--4, .title--6, .title--8, .title--10, .title--12, .title--14 { left: 8vw; top: 34%; max-width: 44vw; font-size: clamp(23px, 3.6vw, 36px); }
}

@media (max-width: 680px) {
  .hero { height: 88svh; min-height: 650px; }
  .hero__scene--one .hero__image { background-position: 72% center; }
  .hero__scene--two .hero__image { background-position: 62% center; }
  .hero__scene--three .hero__image { background-position: 56% center; }
  .hero__scene--four .hero__image { background-position: 53% center; }
  .hero__scene--five .hero__image { background-position: 60% center; }
  .hero__scene--six .hero__image { background-position: 58% center; }
  .hero::after {
    content:"";
    position:absolute;
    z-index:8;
    inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0 34%, rgba(255,255,255,.96) 45%, rgba(255,255,255,.40) 58%, transparent 72%);
    pointer-events:none;
  }
  .title { z-index: 11; max-width: 82vw; font-size: clamp(27px, 8vw, 42px); text-shadow: 0 2px 20px rgba(255,255,255,1); }
  .title--1, .title--3, .title--5, .title--7, .title--9, .title--11, .title--13 { left: 7vw; top: 8%; }
  .title--2, .title--4, .title--6, .title--8, .title--10, .title--12, .title--14 { left: 10vw; top: 25%; max-width: 82vw; font-size: clamp(23px, 6.5vw, 35px); }
  .demo-controls { display:none; }
  .hero__scroll { bottom: 14px; }
}


@media (max-width: 1050px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .services-panel.is-open { max-height: 1050px; }
}

@media (max-width: 760px) {
  .services-panel__clip { padding-top: 14px; }
  .services-panel__surface { padding: 24px 18px 22px; border-radius: 22px; }
  .services-panel__heading { margin-bottom: 18px; }
  .services-panel__close { width: 34px; height: 34px; flex-basis: 34px; }
  .service-card { min-height: 132px; border-radius: 18px; }
  /* Touch screens have no real hover: show the helpful second line by default. */
  .service-card__description {
    opacity: .78;
    visibility: visible;
    transform: none;
  }
  .services-panel.is-open { max-height: 1350px; }
}

@media (max-width: 500px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 116px; }
  .services-panel.is-open { max-height: 1900px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero *, .hero { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .hero__scene--one { opacity: 1 !important; }
  .hero__scene--two, .hero__scene--three, .hero__scene--four, .hero__scene--five, .hero__scene--six, .hero__final, .hero__transition, .hero__flare, .hero__film-grain { display: none !important; }
  .title--1 { opacity: 1 !important; filter:none !important; transform:none !important; }
  .title--2, .title--3, .title--4, .title--5, .title--6, .title--7, .title--8, .title--9, .title--10, .title--11, .title--12, .title--13, .title--14 { display:none !important; }
}

/* ==========================================================
   TRUST + QUICK ACTIONS BRIDGE
   Emotional hero -> proof -> clear patient routes.
   Inspired by modern metric strips and navigation-card patterns,
   but kept deliberately calm and lightweight for a medical site.
   ========================================================== */
.trust-actions {
  position: relative;
  z-index: 30;
  margin-top: -34px;
  padding: 0 clamp(18px, 3.4vw, 64px) 70px;
  background:
    radial-gradient(circle at 12% 10%, rgba(79,131,183,.075), transparent 31%),
    radial-gradient(circle at 88% 16%, rgba(243,107,59,.065), transparent 27%),
    #fff;
}

.trust-actions__inner {
  width: min(1540px, 100%);
  margin: 0 auto;
}

.proof-strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.65fr 1.1fr 1.1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(23,54,83,.09);
  border-radius: 28px;
  background: rgba(255,255,255,.94);
  box-shadow:
    0 22px 58px rgba(23,54,83,.09),
    0 2px 8px rgba(23,54,83,.04);
  backdrop-filter: blur(18px);
}

.proof-strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--orange), #ff9a72 58%, rgba(79,131,183,.58));
}

.proof-item {
  position: relative;
  min-height: 148px;
  padding: 28px clamp(22px, 2.1vw, 38px) 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.proof-item + .proof-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  bottom: 25px;
  width: 1px;
  background: linear-gradient(transparent, rgba(23,54,83,.12) 18%, rgba(23,54,83,.12) 82%, transparent);
}

.proof-item__value,
.proof-item__text { margin: 0; }

.proof-item__value {
  color: var(--navy);
  font-size: clamp(20px, 1.45vw, 28px);
  line-height: 1.18;
  letter-spacing: -.02em;
}

.proof-item__value strong {
  color: var(--orange);
  font-size: 1.26em;
  font-weight: 720;
}

.proof-item__value--compact {
  font-size: clamp(17px, 1.15vw, 23px);
  line-height: 1.42;
}

.proof-item__value--compact strong {
  display: inline-block;
  min-width: .8em;
}

.proof-item__text {
  margin-top: 7px;
  max-width: 26ch;
  color: rgba(24,36,50,.68);
  font-size: clamp(13px, .9vw, 16px);
  line-height: 1.42;
}

.help-block {
  padding: 72px 0 0;
}

.help-block__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 40px;
  margin-bottom: 30px;
}

.help-block__eyebrow {
  grid-column: 1 / -1;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.help-block h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(31px, 3.1vw, 54px);
  line-height: 1.03;
  font-weight: 520;
  letter-spacing: -.035em;
}

.help-block__heading p {
  margin: 0 0 6px;
  color: rgba(24,36,50,.56);
  font-size: 15px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.action-card {
  --card-bg: rgba(247,250,253,.88);
  position: relative;
  min-height: 178px;
  padding: 22px 20px 20px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  grid-template-rows: auto 1fr;
  gap: 22px 12px;
  align-items: start;
  border: 1px solid rgba(23,54,83,.085);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), var(--card-bg));
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(23,54,83,.04);
  transition:
    transform .38s cubic-bezier(.2,.7,.2,1),
    box-shadow .38s ease,
    border-color .38s ease;
}

.action-card::before {
  content: "";
  position: absolute;
  inset: auto -35% -70% 30%;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,131,183,.12), transparent 68%);
  transition: transform .45s ease, opacity .45s ease;
  opacity: .65;
}

.action-card:hover,
.action-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(79,131,183,.24);
  box-shadow: 0 18px 46px rgba(23,54,83,.10);
  outline: none;
}

.action-card:hover::before,
.action-card:focus-visible::before { transform: scale(1.18) translate(-4%, -3%); opacity: 1; }

.action-card__icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: rgba(79,131,183,.095);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.action-card__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.action-card__label {
  position: relative;
  z-index: 1;
  grid-column: 1 / 3;
  align-self: end;
  max-width: 15ch;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.17;
  font-weight: 590;
  letter-spacing: -.018em;
}

.action-card__arrow {
  position: relative;
  z-index: 1;
  justify-self: end;
  color: rgba(23,54,83,.36);
  font-size: 19px;
  transition: color .3s ease, transform .3s ease;
}

.action-card:hover .action-card__icon,
.action-card:focus-visible .action-card__icon {
  color: #fff;
  background: var(--blue);
  transform: rotate(-3deg) scale(1.04);
}

.action-card:hover .action-card__arrow,
.action-card:focus-visible .action-card__arrow {
  color: var(--orange);
  transform: translate(2px,-2px);
}

.action-card--accent {
  --card-bg: rgba(255,241,235,.92);
  border-color: rgba(243,107,59,.19);
}

.action-card--accent .action-card__icon {
  color: var(--orange);
  background: rgba(243,107,59,.105);
}

.action-card--accent:hover,
.action-card--accent:focus-visible {
  border-color: rgba(243,107,59,.32);
  box-shadow: 0 18px 46px rgba(243,107,59,.11);
}

.action-card--accent:hover .action-card__icon,
.action-card--accent:focus-visible .action-card__icon { background: var(--orange); }


/* --------------------------------------------------------------------------
   Expandable "Popular directions" panel
   -------------------------------------------------------------------------- */

/* The route card is a button in this prototype. Keep it visually identical to links. */
button.action-card {
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.action-card--toggle.is-active {
  --card-bg: rgba(239,247,253,.98);
  border-color: rgba(79,131,183,.28);
  box-shadow: 0 16px 42px rgba(23,54,83,.09);
  transform: translateY(-3px);
}

.action-card--toggle.is-active .action-card__icon {
  color: #fff;
  background: var(--blue);
}

.action-card--toggle.is-active .action-card__arrow {
  color: var(--orange);
  transform: rotate(135deg);
}

/* The outer panel creates the 0–300 ms vertical reveal without JS measuring heights. */
.services-panel {
  max-height: 0;
  opacity: 0;
  transform: translate3d(0,-8px,0);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 300ms cubic-bezier(.2,.72,.2,1),
    opacity 220ms ease,
    transform 300ms cubic-bezier(.2,.72,.2,1),
    visibility 0s linear 300ms;
}

.services-panel.is-open {
  max-height: 760px;
  opacity: 1;
  transform: translate3d(0,0,0);
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 300ms cubic-bezier(.2,.72,.2,1),
    opacity 240ms ease 35ms,
    transform 300ms cubic-bezier(.2,.72,.2,1),
    visibility 0s linear 0s;
}

.services-panel__clip {
  padding-top: 20px;
}

.services-panel__surface {
  position: relative;
  padding: clamp(26px, 2.3vw, 38px);
  border: 1px solid rgba(23,54,83,.075);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,250,253,.96));
  box-shadow:
    0 18px 52px rgba(23,54,83,.065),
    0 2px 7px rgba(23,54,83,.025);
  overflow: hidden;
}

.services-panel__surface::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--orange), rgba(79,131,183,.60));
}

.services-panel__heading {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.services-panel__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.services-panel h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(25px, 2.05vw, 36px);
  line-height: 1.06;
  font-weight: 520;
  letter-spacing: -.028em;
}

.services-panel__close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(23,54,83,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: rgba(23,54,83,.54);
  font: inherit;
  font-size: 22px;
  font-weight: 320;
  line-height: 1;
  cursor: pointer;
  transition: color .24s ease, border-color .24s ease, background .24s ease, transform .24s ease;
}

.services-panel__close:hover,
.services-panel__close:focus-visible {
  color: var(--orange);
  border-color: rgba(243,107,59,.24);
  background: #fff;
  transform: rotate(8deg);
  outline: none;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 11px;
}

.service-card {
  position: relative;
  min-height: 142px;
  padding: 18px 18px 16px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  grid-template-rows: 34px auto 1fr;
  column-gap: 11px;
  align-items: start;
  border: 1px solid rgba(23,54,83,.075);
  border-radius: 20px;
  background: rgba(250,252,254,.88);
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(23,54,83,.025);
  opacity: 0;
  transform: translate3d(0,-8px,0);
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.2,.72,.2,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
  transition-delay: 0ms;
}

.services-panel.is-open .service-card {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: calc(85ms + (var(--i) * 35ms));
}

/* The orange underline draws itself from left to right on hover. */
.service-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transition: right .34s cubic-bezier(.2,.72,.2,1);
}

.service-card__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: rgba(79,131,183,.82);
  transition: color .28s ease, transform .28s ease;
}

.service-card__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card__arrow {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  color: rgba(23,54,83,.30);
  font-size: 18px;
  line-height: 1;
  transition: color .28s ease, opacity .28s ease, transform .28s ease;
}

.service-card__title {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  margin-top: 11px;
  color: var(--navy);
  font-size: clamp(17px, 1.08vw, 20px);
  line-height: 1.16;
  font-weight: 610;
  letter-spacing: -.018em;
  transition: transform .28s cubic-bezier(.2,.72,.2,1);
}

.service-card__description {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  min-height: 20px; /* reserve space so hover never changes card height */
  padding-top: 6px;
  color: rgba(23,54,83,.60);
  font-size: 13px;
  line-height: 1.3;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0,4px,0);
  transition: opacity .24s ease, transform .28s ease, visibility 0s linear .28s;
}

.service-card:hover,
.service-card:focus-visible {
  background: rgba(240,247,253,.96);
  border-color: rgba(79,131,183,.20);
  box-shadow: 0 10px 28px rgba(23,54,83,.07);
  transform: translate3d(0,-3px,0);
  outline: none;
  transition-delay: 0ms;
}

.service-card:hover::after,
.service-card:focus-visible::after { right: 18px; }

.service-card:hover .service-card__icon,
.service-card:focus-visible .service-card__icon {
  color: var(--blue);
  transform: translate3d(2px,0,0);
}

.service-card:hover .service-card__title,
.service-card:focus-visible .service-card__title {
  transform: translate3d(4px,0,0);
}

.service-card:hover .service-card__arrow,
.service-card:focus-visible .service-card__arrow {
  color: var(--orange);
  opacity: 1;
  transform: translate3d(2px,-2px,0);
}

.service-card:hover .service-card__description,
.service-card:focus-visible .service-card__description {
  opacity: 1;
  visibility: visible;
  transform: translate3d(4px,0,0);
  transition-delay: 45ms;
}

.services-panel__all {
  width: max-content;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgba(23,54,83,.18);
  padding-bottom: 4px;
  transition: color .26s ease, border-color .26s ease, gap .26s ease;
}

.services-panel__all span:last-child {
  color: var(--orange);
  transition: transform .26s ease;
}

.services-panel__all:hover,
.services-panel__all:focus-visible {
  color: var(--orange);
  border-color: rgba(243,107,59,.42);
  gap: 15px;
  outline: none;
}

.services-panel__all:hover span:last-child,
.services-panel__all:focus-visible span:last-child {
  transform: translateX(2px);
}


/* Scroll reveal: the section is fully usable without JS; JS only adds entrance choreography. */
.reveal-item {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1) var(--delay, 0ms),
    transform .75s cubic-bezier(.2,.7,.2,1) var(--delay, 0ms);
}

.js-reveal.is-visible .reveal-item {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.after-hero {
  min-height: 220px;
  display: grid;
  place-items: center;
  background: linear-gradient(#fff, #fbfcfd);
  color: #a1acb7;
  font-size: 14px;
}

@media (max-width: 1180px) {
  .proof-strip { grid-template-columns: 1fr 1fr; }
  .proof-item + .proof-item::before { display: none; }
  .proof-item:nth-child(odd)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: rgba(23,54,83,.09);
  }
  .proof-item:nth-child(n+3) { border-top: 1px solid rgba(23,54,83,.08); }
  .action-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .action-card:nth-child(4), .action-card:nth-child(5) { min-height: 156px; }
}

@media (max-width: 760px) {
  .trust-actions { margin-top: -18px; padding-inline: 14px; padding-bottom: 52px; }
  .proof-strip { grid-template-columns: 1fr; border-radius: 22px; }
  .proof-item { min-height: 112px; padding: 22px 24px; }
  .proof-item:nth-child(odd)::after { display:none; }
  .proof-item:nth-child(n+2) { border-top: 1px solid rgba(23,54,83,.08); }
  .help-block { padding-top: 52px; }
  .help-block__heading { grid-template-columns: 1fr; gap: 9px; }
  .help-block__heading p { margin: 0; }
  .action-grid { grid-template-columns: 1fr; gap: 10px; }
  .action-card {
    min-height: 108px !important;
    grid-template-columns: 42px 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0 14px;
    padding: 18px;
    border-radius: 20px;
  }
  .action-card__label { grid-column: 2; align-self: center; max-width: none; }
  .action-card__arrow { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal-item,
  .js-reveal.is-visible .reveal-item,
  .action-card,
  .action-card::before,
  .action-card__icon,
  .action-card__arrow,
  .services-panel,
  .service-card,
  .service-card::after,
  .service-card__icon,
  .service-card__arrow,
  .service-card__title,
  .service-card__description {
    transition: none !important;
  }

  .action-card__arrow {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   Doctors section — Airy Clinical Profile
   Demo content only; presentation is designed to map onto MODX doctor resources.
   ========================================================= */
html { scroll-behavior: smooth; }
.doctors-section {
  position: relative;
  padding: clamp(70px, 7vw, 118px) 24px clamp(78px, 8vw, 132px);
  background:
    radial-gradient(circle at 7% 18%, rgba(226,241,252,.72), transparent 24%),
    radial-gradient(circle at 94% 82%, rgba(255,235,225,.56), transparent 21%),
    #fff;
  overflow: hidden;
}
.doctors-section__inner { width: min(1500px, 100%); margin: 0 auto; }
.doctors-section__heading {
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px;
  margin-bottom:34px;
}
.doctors-section__eyebrow {
  display:block; margin-bottom:10px; color:var(--orange); font-size:11px; font-weight:750;
  letter-spacing:.16em; text-transform:uppercase;
}
.doctors-section h2 { margin:0; color:var(--navy); font-size:clamp(36px,4vw,62px); line-height:1; letter-spacing:-.035em; font-weight:570; }
.doctors-section__heading p { margin:14px 0 0; color:#6f8293; font-size:clamp(15px,1.25vw,19px); }
.doctors-section__finder,
.doctors-section__footer a {
  display:inline-flex; align-items:center; gap:12px; color:var(--navy); text-decoration:none; font-weight:650;
  transition:color .22s ease, transform .22s ease;
}
.doctors-section__finder { padding:13px 18px; border:1px solid rgba(31,70,105,.13); border-radius:999px; background:rgba(255,255,255,.72); }
.doctors-section__finder:hover { color:var(--orange); transform:translateX(2px); }

.doctors-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch; }
.doctor-card {
  --card-radius:24px;
  min-width:0; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(31,70,105,.085); border-radius:var(--card-radius);
  background:rgba(251,253,255,.96); box-shadow:0 12px 36px rgba(25,57,84,.055);
  transform:translateY(0); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.doctor-card:hover { transform:translateY(-3px); border-color:rgba(45,113,164,.16); box-shadow:0 22px 50px rgba(25,57,84,.11); }
.doctor-card__photo { position:relative; display:block; overflow:hidden; aspect-ratio: 1 / .88; background:#edf5fa; }
.doctor-card__photo::after { content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(transparent,rgba(21,48,71,.12)); pointer-events:none; }
.doctor-card__photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 28%; transform:scale(1.002); transition:transform .55s cubic-bezier(.2,.75,.2,1), filter .3s ease; }
.doctor-card:hover .doctor-card__photo img { transform:scale(1.025); filter:saturate(1.02) contrast(1.01); }
.doctor-card__badge { position:absolute; z-index:2; top:14px; right:14px; padding:7px 10px; border-radius:999px; border:1px solid rgba(45,82,112,.1); background:rgba(255,255,255,.88); color:#526b80; font-size:11px; font-weight:650; backdrop-filter:blur(10px); }
.doctor-card__body { flex:1; display:flex; flex-direction:column; padding:21px 20px 19px; }
.doctor-card h3 { margin:0; min-height:2.45em; color:var(--navy); font-size:clamp(19px,1.45vw,24px); line-height:1.16; letter-spacing:-.025em; font-weight:650; }
.doctor-card__specialties { margin:9px 0 0; min-height:2.6em; color:#47759c; font-size:14px; line-height:1.45; font-weight:620; }
.doctor-card__credentials { display:flex; flex-direction:column; gap:4px; min-height:48px; margin-top:14px; color:#6e7f8d; font-size:12.5px; line-height:1.35; }
.doctor-card__credentials span { position:relative; padding-left:13px; }
.doctor-card__credentials span::before { content:""; position:absolute; left:0; top:.54em; width:4px; height:4px; border-radius:50%; background:var(--orange); opacity:.7; }
.doctor-card__experience { margin:13px 0 0; color:#5f7282; font-size:13px; line-height:1.4; }
.doctor-card__experience > span { margin-right:6px; color:#7da2bf; }
.doctor-card__experience strong { color:var(--navy); font-weight:720; }
.doctor-card__availability { margin-top:17px; padding:12px 13px; border-radius:15px; background:#f1f7fb; border:1px solid rgba(52,103,142,.065); }
.doctor-card__availability span { display:block; margin-bottom:3px; color:#7b8e9e; font-size:10.5px; line-height:1.2; letter-spacing:.09em; text-transform:uppercase; font-weight:700; }
.doctor-card__availability strong { color:#264f70; font-size:15px; line-height:1.25; font-weight:720; }
.doctor-card__actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto; padding-top:18px; }
.doctor-card__actions a { min-height:42px; display:flex; align-items:center; justify-content:center; border-radius:13px; text-decoration:none; font-size:13px; font-weight:720; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.doctor-card__more { color:#315b7d; background:#fff; border:1px solid rgba(48,91,125,.15); }
.doctor-card__more:hover { background:#edf6fb; border-color:rgba(48,91,125,.24); transform:translateY(-1px); }
.doctor-card__book { color:#fff; background:var(--orange); border:1px solid var(--orange); box-shadow:0 8px 18px rgba(239,111,57,.15); }
.doctor-card__book:hover { background:#e86431; border-color:#e86431; transform:translateY(-1px); box-shadow:0 10px 24px rgba(239,111,57,.23); }
.doctors-section__footer { display:flex; justify-content:center; margin-top:34px; }
.doctors-section__footer a { padding:11px 2px; border-bottom:1px solid rgba(239,111,57,.35); }
.doctors-section__footer a:hover { color:var(--orange); }

@media (max-width: 1180px) {
  .doctors-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .doctor-card__photo { aspect-ratio:1/.72; }
}
@media (max-width: 720px) {
  .doctors-section { padding-inline:14px; }
  .doctors-section__heading { align-items:flex-start; flex-direction:column; }
  .doctors-grid { grid-template-columns:1fr; gap:14px; }
  .doctor-card { display:grid; grid-template-columns:minmax(124px,38%) 1fr; }
  .doctor-card__photo { aspect-ratio:auto; min-height:100%; }
  .doctor-card__body { padding:17px 15px; }
  .doctor-card h3 { min-height:0; font-size:19px; }
  .doctor-card__specialties { min-height:0; }
  .doctor-card__credentials { min-height:0; }
  .doctor-card__actions { grid-template-columns:1fr; }
  .doctor-card__badge { display:none; }
}
@media (max-width: 470px) {
  .doctor-card { display:flex; }
  .doctor-card__photo { aspect-ratio:1/.74; }
}

/* Doctor photo zone: almost-white field + subtle CityClinic blue radial glow behind cutout */
.doctor-card__photo {
  background:
    radial-gradient(circle at 50% 54%, rgba(86, 176, 225, .18) 0%, rgba(113, 190, 229, .10) 30%, rgba(168, 218, 241, .045) 52%, rgba(248, 252, 254, 0) 72%),
    linear-gradient(180deg, #fbfdfe 0%, #f7fbfd 100%);
}
.doctor-card__photo img {
  object-fit: contain;
  object-position: center bottom;
  padding: 7% 4% 0;
  box-sizing: border-box;
}
.doctor-card:hover .doctor-card__photo img { transform: scale(1.018); }

/* =========================================================
   Doctor finder — compact shortcut mode opened from the hero
   ========================================================= */
.doctors-section__finder {
  cursor:pointer;
  font:inherit;
}
.doctor-finder {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  margin:0 0 0;
  transform:translateY(-8px);
  transition:grid-template-rows .34s cubic-bezier(.2,.8,.2,1), opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1), margin .34s ease;
}
.doctor-finder.is-open {
  grid-template-rows:1fr;
  opacity:1;
  margin:0 0 28px;
  transform:translateY(0);
}
.doctor-finder__clip { min-height:0; overflow:hidden; }
.doctor-finder__surface {
  padding:22px 24px 20px;
  border:1px solid rgba(39,88,125,.09);
  border-radius:22px;
  background:rgba(255,255,255,.84);
  box-shadow:0 14px 38px rgba(28,64,92,.065);
  backdrop-filter:blur(14px);
}
.doctor-finder__heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:17px; }
.doctor-finder__eyebrow { display:block; margin-bottom:6px; color:var(--orange); font-size:10px; font-weight:760; letter-spacing:.15em; text-transform:uppercase; }
.doctor-finder h3 { margin:0; color:var(--navy); font-size:clamp(24px,2.1vw,34px); line-height:1.08; letter-spacing:-.025em; font-weight:590; }
.doctor-finder__close { width:34px; height:34px; flex:0 0 auto; border:0; border-radius:50%; background:#f4f8fb; color:#6b8092; font-size:24px; line-height:1; cursor:pointer; transition:background .2s ease,color .2s ease,transform .2s ease; }
.doctor-finder__close:hover { background:#e9f3f9; color:var(--orange); transform:rotate(4deg); }
.doctor-finder__controls { display:grid; grid-template-columns:minmax(190px,.75fr) minmax(260px,1.35fr) auto; gap:12px; align-items:end; }
.doctor-finder__field { position:relative; display:flex; flex-direction:column; gap:7px; }
.doctor-finder__field > span:first-child { color:#718596; font-size:11px; font-weight:690; letter-spacing:.035em; }
.doctor-finder select,
.doctor-finder input {
  width:100%; min-height:48px; border:1px solid rgba(44,91,125,.12); border-radius:14px; outline:none;
  background:#f9fcfe; color:#264b69; padding:0 15px; font:inherit; font-size:14px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.doctor-finder select:focus,
.doctor-finder input:focus { border-color:rgba(56,126,176,.32); box-shadow:0 0 0 4px rgba(93,166,214,.09); background:#fff; }
.doctor-finder__field--search input { padding-right:42px; }
.doctor-finder__search-icon { position:absolute; right:14px; bottom:12px; color:#7d9aae; font-size:21px; pointer-events:none; }
.doctor-finder__reset { min-height:48px; padding:0 17px; border:1px solid rgba(239,111,57,.18); border-radius:14px; background:#fff8f4; color:#d95f2c; font:inherit; font-size:13px; font-weight:720; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.doctor-finder__reset:hover { background:#fff0e7; transform:translateY(-1px); }
.doctor-finder__status { margin:13px 0 0; color:#7b8d9c; font-size:12px; }
.doctor-card.is-filtered-out { display:none; }
.doctor-card.is-filter-match { animation:doctorMatchIn .28s ease both; }
@keyframes doctorMatchIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 820px) {
  .doctor-finder__controls { grid-template-columns:1fr 1fr; }
  .doctor-finder__reset { grid-column:1/-1; justify-self:start; min-height:42px; }
}
@media (max-width: 560px) {
  .doctor-finder__surface { padding:18px 15px 16px; }
  .doctor-finder__controls { grid-template-columns:1fr; }
  .doctor-finder__reset { grid-column:auto; }
}

/* ==========================================================
   REVIEWS — independent reputation proof
   ========================================================== */
.reviews-section {
  padding: clamp(72px, 8vw, 124px) 24px clamp(76px, 8vw, 126px);
  background:
    radial-gradient(circle at 14% 20%, rgba(119,177,218,.10), transparent 32%),
    radial-gradient(circle at 86% 84%, rgba(243,107,59,.065), transparent 28%),
    #fbfdff;
}
.reviews-section__inner { width:min(1460px,100%); margin:0 auto; }
.reviews-section__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:30px; }
.reviews-section__eyebrow { display:block; margin-bottom:10px; color:var(--orange); font-size:11px; font-weight:760; letter-spacing:.16em; text-transform:uppercase; }
.reviews-section h2 { margin:0; color:var(--navy); font-size:clamp(34px,4vw,58px); line-height:1.02; letter-spacing:-.035em; font-weight:590; }
.reviews-section__heading p { max-width:720px; margin:14px 0 0; color:#748797; font-size:15px; line-height:1.65; }
.reviews-section__nav { display:flex; gap:10px; flex:0 0 auto; }
.reviews-nav { width:46px; height:46px; border:1px solid rgba(37,83,117,.10); border-radius:50%; background:rgba(255,255,255,.92); color:var(--navy); cursor:pointer; box-shadow:0 8px 24px rgba(26,62,89,.06); transition:transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease; }
.reviews-nav:hover { transform:translateY(-2px); background:#fff; color:var(--orange); border-color:rgba(243,107,59,.18); }

.reviews-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(330px, 1fr); grid-template-rows:1fr; gap:18px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:inline mandatory; scroll-behavior:smooth; padding:8px 2px 22px; scrollbar-width:none; }
.reviews-track::-webkit-scrollbar { display:none; }
.review-card { scroll-snap-align:start; min-height:355px; display:flex; flex-direction:column; padding:26px 26px 24px; border:1px solid rgba(40,86,120,.08); border-radius:24px; background:rgba(255,255,255,.92); box-shadow:0 16px 48px rgba(26,62,89,.07); transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease; }
.review-card:hover { transform:translateY(-4px); box-shadow:0 22px 58px rgba(26,62,89,.105); border-color:rgba(79,131,183,.15); }
.review-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review-card__source { display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:999px; font-size:11px; font-weight:760; letter-spacing:.025em; }
.review-card__source--pro { color:#2c6d9b; background:#edf7fd; }
.review-card__source--yandex { color:#b44a2a; background:#fff3ed; }
.review-card__date { color:#91a0ac; font-size:11px; white-space:nowrap; }
.review-card__stars { margin:24px 0 16px; color:#f2aa2f; letter-spacing:.14em; font-size:14px; }
.review-card__text { margin:0; color:#294b67; font-size:15px; line-height:1.68; }
.review-card__accent { margin:17px 0 0; padding-left:14px; border-left:2px solid rgba(243,107,59,.55); color:var(--navy); font-size:16px; line-height:1.48; font-weight:620; }
.review-card__footer { margin-top:auto; padding-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid rgba(42,86,118,.07); color:#8b9aa6; font-size:11px; }
.review-card__footer a { color:#4b7697; text-decoration:none; font-weight:700; white-space:nowrap; transition:color .2s ease; }
.review-card__footer a:hover { color:var(--orange); }
.reviews-section__bottom { margin-top:14px; padding-top:28px; border-top:1px solid rgba(39,84,116,.07); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.reviews-section__bottom p { margin:0; color:#7b8d9b; font-size:13px; }
.reviews-section__cta { display:inline-flex; align-items:center; gap:14px; min-height:48px; padding:0 20px; border-radius:999px; color:#fff; background:var(--orange); text-decoration:none; font-size:13px; font-weight:730; box-shadow:0 10px 25px rgba(243,107,59,.16); transition:transform .22s ease, box-shadow .22s ease; }
.reviews-section__cta:hover { transform:translateY(-2px); box-shadow:0 15px 32px rgba(243,107,59,.22); }

@media (min-width: 1180px) {
  .reviews-track { grid-auto-columns:calc((100% - 36px)/3); }
}
@media (max-width: 760px) {
  .reviews-section { padding-left:16px; padding-right:16px; }
  .reviews-section__heading { align-items:flex-start; }
  .reviews-section__nav { display:none; }
  .reviews-track { grid-auto-columns:min(86vw, 360px); }
  .review-card { min-height:365px; padding:22px 20px; }
  .reviews-section__bottom { align-items:flex-start; flex-direction:column; }
}

/* ==========================================================
   CONTENT ENGINE / EDITORIAL HUB
   Prototype block. In MODX this section can be disabled by a single flag
   until the first real Content Engine materials are published.
   ========================================================== */
.content-engine-section {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 7vw, 118px) 24px clamp(82px, 8vw, 132px);
  background:
    radial-gradient(circle at 11% 12%, rgba(79,131,183,.105), transparent 31%),
    radial-gradient(circle at 88% 86%, rgba(243,107,59,.065), transparent 29%),
    #f9fbfd;
}
.content-engine-section::before,
.content-engine-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}
.content-engine-section::before {
  width: 340px; height: 340px; left: -185px; top: 34%;
  border: 1px solid rgba(79,131,183,.12);
}
.content-engine-section::after {
  width: 210px; height: 210px; right: -100px; bottom: 9%;
  border: 1px solid rgba(243,107,59,.11);
}
.content-engine-section__inner { width: min(1480px, 100%); margin: 0 auto; position: relative; z-index: 1; }
.content-engine-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.content-engine-heading > div { max-width: 950px; }
.content-engine-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px;
  color: var(--orange); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; font-weight: 800;
}
.content-engine-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 99px; }
.content-engine-heading h2 { margin: 0; max-width: 920px; color: var(--navy); font-size: clamp(34px, 3.1vw, 58px); line-height: .99; letter-spacing: -.045em; font-weight: 710; }
.content-engine-heading p { margin: 19px 0 0; max-width: 760px; color: #647484; font-size: clamp(16px, 1.1vw, 19px); line-height: 1.55; }
.content-engine-all,
.content-engine-footer__archive { color: var(--navy); text-decoration: none; font-weight: 720; white-space: nowrap; display: inline-flex; align-items: center; gap: 11px; transition: color .25s ease, gap .25s ease; }
.content-engine-all:hover,
.content-engine-footer__archive:hover { color: var(--orange); gap: 16px; }

.content-engine-filters { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 24px; }
.content-filter { border: 1px solid rgba(23,54,83,.11); color: #516579; background: rgba(255,255,255,.72); border-radius: 999px; padding: 10px 16px; cursor: pointer; transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; }
.content-filter:hover { transform: translateY(-1px); border-color: rgba(79,131,183,.25); background: #fff; }
.content-filter.is-active { color: #fff; background: var(--navy); border-color: var(--navy); box-shadow: 0 10px 24px rgba(23,54,83,.13); }

/* Multi-format editorial grid: native portrait video + landscape/editorial cards. */
.content-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, .64fr) minmax(250px, .86fr);
  grid-template-areas:
    "feature reel article"
    "feature reel answer";
  gap: 18px;
  align-items: stretch;
}
.content-card { min-width: 0; background: rgba(255,255,255,.9); border: 1px solid rgba(23,54,83,.08); border-radius: 27px; overflow: hidden; box-shadow: 0 16px 46px rgba(38,65,91,.065); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.content-card:hover { box-shadow: 0 24px 60px rgba(38,65,91,.11); border-color: rgba(79,131,183,.15); }
.content-card.is-content-hidden { display: none; }
.content-card.is-content-entering { animation: contentCardIn .42s both cubic-bezier(.2,.7,.2,1); }
@keyframes contentCardIn { from { opacity: 0; transform: translateY(10px) scale(.992); } to { opacity: 1; transform: none; } }
.content-card--featured-video { grid-area: feature; }
.content-card--reel { grid-area: reel; display:flex; flex-direction:column; }
.content-card--article { grid-area: article; display:flex; flex-direction:column; }
.content-card--doctor-answer { grid-area: answer; }
.content-card__body { padding: 22px 24px 24px; }
.content-card__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 11px; color: #74879a; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; font-weight: 750; }
.content-card__meta span + span::before { content: "·"; margin-right: 8px; color: rgba(243,107,59,.85); }
.content-card h3 { margin: 0; color: var(--navy); font-size: clamp(21px, 1.65vw, 31px); line-height: 1.13; letter-spacing: -.025em; font-weight: 720; }
.content-card--reel h3, .content-card--article h3 { font-size: clamp(19px, 1.3vw, 24px); }
.content-card p { margin: 12px 0 0; color: #667688; font-size: 14px; line-height: 1.56; }
.content-card__author { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(23,54,83,.07); color: #738293; font-size: 13px; }

/* Featured video remains a wide editorial card, while the video itself keeps its native portrait shape. */
.content-featured-video { min-height: 100%; display:grid; grid-template-columns: minmax(245px, .82fr) minmax(300px, 1.18fr); gap:0; }
.content-featured-video__copy { display:flex; flex-direction:column; justify-content:center; padding: clamp(28px, 3.1vw, 48px); }
.content-inline-cta { align-self:flex-start; margin-top:24px; border:0; border-radius:999px; padding:12px 18px; color:#fff; background:var(--orange); font:inherit; font-weight:760; cursor:pointer; box-shadow:0 11px 28px rgba(243,107,59,.18); transition:transform .24s ease, box-shadow .24s ease; }
.content-inline-cta:hover { transform:translateY(-2px); box-shadow:0 15px 34px rgba(243,107,59,.24); }

.content-media { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; background: #eaf1f6; cursor: pointer; text-decoration: none; text-align: left; }
.content-media--portrait { aspect-ratio: var(--media-ratio, 9 / 16); background:#edf4f8; }
.content-card--featured-video .content-media--portrait { width:min(92%, 390px); align-self:center; justify-self:center; margin:24px 0; aspect-ratio:var(--media-ratio, 9 / 16); border-radius:22px; }
.content-media--landscape { aspect-ratio: 16 / 9.6; }
.content-media video,
.content-media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.001); transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .45s ease, opacity .18s ease; }
.content-media--portrait video { object-fit:cover; background:#edf4f8; }
.content-media:hover video,
.content-media:hover img { transform: scale(1.025); }
.content-media__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,40,60,.01) 44%, rgba(17,40,60,.34) 100%); transition: opacity .3s ease; }
.content-media:hover .content-media__veil { opacity: .72; }
.content-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%,-50%); display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(9px); box-shadow: 0 10px 32px rgba(23,54,83,.13); font-size: 19px; padding-left: 3px; transition: transform .32s cubic-bezier(.2,.7,.2,1), background .3s ease, opacity .22s ease; }
.content-media:hover .content-play { transform: translate(-50%,-50%) scale(1.09); background: rgba(243,107,59,.86); }
.content-media.is-previewing .content-play { opacity:0; transform:translate(-50%,-50%) scale(.9); }
.content-preview-badge { position:absolute; top:14px; right:14px; padding:6px 9px; border-radius:999px; color:#fff; background:rgba(18,41,61,.42); border:1px solid rgba(255,255,255,.38); backdrop-filter:blur(8px); font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; opacity:0; transform:translateY(-3px); transition:opacity .2s ease, transform .2s ease; }
.content-media.is-previewing .content-preview-badge { opacity:1; transform:none; }
.content-media__hint { position: absolute; left: 20px; bottom: 17px; color: #fff; font-size: 12px; font-weight: 720; letter-spacing: .03em; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; }
.content-media:hover .content-media__hint { opacity: 1; transform: none; }

.content-answer { display: grid; grid-template-columns: minmax(135px, 30%) 1fr; min-height: 100%; color: inherit; text-decoration: none; }
.content-answer__portrait { position: relative; overflow: hidden; background: radial-gradient(circle at 53% 39%, rgba(79,131,183,.19), rgba(79,131,183,.035) 53%, rgba(255,255,255,.88) 80%); }
.content-answer__portrait img { position: absolute; inset: 10px 0 0; width: 100%; height: calc(100% - 10px); object-fit: contain; object-position: center bottom; transition: transform .48s cubic-bezier(.2,.7,.2,1); }
.content-answer:hover .content-answer__portrait img { transform: scale(1.035) translateY(-2px); }
.content-answer__copy { padding: 25px 28px; display: flex; flex-direction: column; justify-content: center; }
.content-answer__copy h3 { font-size: clamp(20px, 1.35vw, 27px); }
.content-answer__link { display: inline-block; margin-top: 18px; color: var(--orange); font-weight: 760; font-size: 13px; transition: transform .25s ease; }
.content-answer:hover .content-answer__link { transform: translateX(5px); }

.content-engine-footer { margin-top: 25px; padding: 22px 4px 0; border-top: 1px solid rgba(23,54,83,.08); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.content-engine-footer__label { display: block; color: #728397; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; margin-bottom: 11px; }
.content-socials { display: flex; gap: 9px; flex-wrap: wrap; }
.content-socials a { color: #53677b; text-decoration: none; background: rgba(255,255,255,.72); border: 1px solid rgba(23,54,83,.09); border-radius: 999px; padding: 9px 13px; font-size: 13px; transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease; }
.content-socials a:hover { transform: translateY(-2px); color: var(--navy); background: #eef6fb; border-color: rgba(79,131,183,.22); }

.content-reveal { opacity: 0; transform: translateY(12px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.content-reveal.is-visible { opacity: 1; transform: none; }
.content-card.content-reveal:nth-child(2) { transition-delay: .08s; }
.content-card.content-reveal:nth-child(3) { transition-delay: .14s; }
.content-card.content-reveal:nth-child(4) { transition-delay: .2s; }

.content-modal { position: fixed; z-index: 130; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.content-modal.is-open { opacity: 1; pointer-events: auto; }
.content-modal__backdrop { position: absolute; inset: 0; background: rgba(12,25,38,.76); backdrop-filter: blur(12px); }
.content-modal__dialog { position: relative; width: min(1080px, 94vw); max-height: 88vh; border-radius: 25px; overflow: hidden; background: #0d1720; box-shadow: 0 35px 90px rgba(5,14,22,.42); transform: translateY(12px) scale(.985); transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.content-modal.is-open .content-modal__dialog { transform: none; }
.content-modal__dialog video { display: block; width: 100%; max-height: 82vh; background: #000; }
.content-modal__close { position: absolute; z-index: 3; right: 13px; top: 13px; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: rgba(10,20,28,.52); backdrop-filter: blur(8px); cursor: pointer; font-size: 26px; line-height: 1; transition: background .2s ease, transform .2s ease; }
.content-modal__close:hover { background: rgba(243,107,59,.9); transform: rotate(5deg); }
body.content-modal-open { overflow: hidden; }

@media (max-width: 1080px) {
  .content-engine-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .content-editorial-grid {
    grid-template-columns: minmax(0,1.25fr) minmax(230px,.75fr);
    grid-template-areas:
      "feature reel"
      "article answer";
  }
  .content-featured-video { grid-template-columns: minmax(220px,.78fr) minmax(270px,1.22fr); }
  .content-card--featured-video .content-media--portrait { width:min(90%, 360px); }
}
@media (max-width: 760px) {
  .content-engine-section { padding: 70px 15px 82px; }
  .content-engine-heading h2 { font-size: 38px; }
  .content-editorial-grid { grid-template-columns: 1fr; grid-template-areas:"feature" "reel" "article" "answer"; gap: 14px; }
  .content-featured-video { grid-template-columns: minmax(145px,42%) 1fr; min-height:390px; }
  .content-card--featured-video .content-media--portrait { width:min(92%, 330px); }
  .content-card--reel { display:grid; grid-template-columns:minmax(135px,38%) 1fr; }
  .content-card--reel .content-media--portrait { width:100%; height:auto; aspect-ratio:var(--media-ratio, 9 / 16); align-self:center; }
  .content-card--reel .content-card__body { display:flex; flex-direction:column; justify-content:center; }
  .content-answer { grid-template-columns: 120px 1fr; min-height: 210px; }
  .content-answer__copy { padding: 22px 18px; }
  .content-answer__copy p { display: none; }
  .content-engine-footer { align-items: flex-start; flex-direction: column; }
  .content-engine-all { display: none; }
  .content-filter { padding: 9px 13px; font-size: 13px; }
}
@media (max-width: 520px) {
  .content-featured-video { grid-template-columns:1fr; }
  .content-card--featured-video .content-media--portrait { width:min(78%, 310px); aspect-ratio:var(--media-ratio, 9 / 16); margin:18px auto 0; border-radius:22px; }
  .content-featured-video__copy { padding:24px 22px 27px; }
  .content-card--reel { display:block; }
  .content-card--reel .content-media--portrait { width:min(78%, 300px); height:auto; aspect-ratio:var(--media-ratio, 9 / 16); margin:18px auto 0; border-radius:22px; }
}
@media (prefers-reduced-motion: reduce) {
  .content-reveal { opacity: 1; transform: none; transition: none; }
  .content-media video, .content-media img, .content-play, .content-answer__portrait img { transition: none; }
}


/* ==========================================================
   CONTACT / YANDEX MAPS JS API v3
   ========================================================== */
.location-section {
  position: relative; padding: clamp(76px, 7vw, 118px) 24px;
  background: linear-gradient(180deg, #fff 0%, #f6fafe 100%);
  border-top: 1px solid rgba(37,83,117,.07);
}
.location-section__inner { width:min(1480px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(350px,.72fr) minmax(560px,1.28fr); gap:clamp(36px,5vw,78px); align-items:center; }
.location-copy { max-width:570px; }
.location-eyebrow { display:inline-flex; align-items:center; gap:10px; color:var(--orange); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:800; margin-bottom:14px; }
.location-eyebrow::before { content:""; width:26px; height:2px; border-radius:99px; background:var(--orange); }
.location-copy h2 { margin:0; color:var(--navy); font-size:clamp(36px,3.3vw,58px); line-height:1.01; letter-spacing:-.045em; font-weight:700; }
.location-lead { margin:20px 0 0; color:#65798b; font-size:16px; line-height:1.65; }
.location-facts { display:grid; grid-template-columns:1fr; gap:10px; margin:28px 0; }
.location-fact { display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:13px 0; border-bottom:1px solid rgba(37,83,117,.08); color:inherit; text-decoration:none; }
.location-fact span { color:#8293a1; font-size:12px; }
.location-fact strong { color:var(--navy); text-align:right; font-size:14px; font-weight:700; }
.location-actions { display:flex; flex-wrap:wrap; gap:9px; }
.location-action { border:1px solid rgba(37,83,117,.12); border-radius:999px; background:#fff; color:#506679; min-height:42px; padding:0 15px; font:inherit; font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 5px 18px rgba(37,83,117,.04); transition:transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease; }
.location-action:hover { transform:translateY(-1px); border-color:rgba(79,131,183,.28); color:var(--navy); }
.location-action.is-active { color:#fff; background:var(--navy); border-color:var(--navy); }
.location-action--accent { color:var(--orange); border-color:rgba(243,107,59,.24); }
.location-action--accent.is-active { background:var(--orange); border-color:var(--orange); color:#fff; }
.location-help { margin-top:18px; min-height:56px; padding:14px 16px; border-radius:16px; background:rgba(226,239,249,.55); color:#607487; font-size:12px; line-height:1.55; }
.location-help strong { color:var(--navy); }
.location-links { display:flex; flex-wrap:wrap; gap:18px 24px; margin-top:22px; }
.location-links a { color:var(--navy); text-decoration:none; font-size:12px; font-weight:750; border-bottom:1px solid rgba(37,83,117,.16); padding-bottom:3px; }
.location-links a:hover { color:var(--orange); border-color:rgba(243,107,59,.3); }
.clinic-map-shell { position:relative; min-height:590px; border-radius:30px; overflow:hidden; background:#eef4f8; box-shadow:0 24px 70px rgba(28,65,91,.12); border:1px solid rgba(37,83,117,.08); }
.clinic-map { position:absolute; inset:0; }
.clinic-map-status { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; padding:34px; color:#667b8d; background:radial-gradient(circle at 50% 45%, rgba(207,229,246,.72), transparent 38%), #f8fbfd; }
.clinic-map-status strong { color:var(--navy); font-size:16px; }
.clinic-map-status span { max-width:560px; font-size:13px; line-height:1.6; }
.clinic-map-status code { padding:2px 5px; border-radius:5px; background:#eaf2f8; }
.clinic-map-status.is-hidden { display:none; }
.clinic-map-toolbar { position:absolute; z-index:12; right:14px; top:14px; display:flex; flex-direction:column; gap:6px; }
.clinic-map-toolbar button { width:38px; height:38px; border:1px solid rgba(37,83,117,.1); border-radius:12px; background:rgba(255,255,255,.94); color:var(--navy); font-size:18px; font-weight:700; cursor:pointer; box-shadow:0 8px 22px rgba(31,65,89,.10); }
.clinic-map-toolbar button:hover { color:var(--orange); }
.clinic-map-legend { position:absolute; z-index:11; left:14px; bottom:14px; display:flex; flex-wrap:wrap; gap:8px; padding:9px 11px; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(31,65,89,.10); color:#536a7c; font-size:10px; }
.clinic-map-legend span { display:inline-flex; align-items:center; gap:6px; }
.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.legend-dot--clinic { background:#f36b3b; }
.legend-line { display:inline-block; width:18px; height:3px; border-radius:99px; }
.legend-line--walk { background:#2e6da6; }
.legend-line--parking { background:#4e9a7a; }
.city-map-marker { position:relative; width:0; height:0; pointer-events:auto; overflow:visible; }
.city-map-marker__pin { position:absolute; left:0; bottom:0; width:40px; height:40px; display:grid; place-items:center; border-radius:50% 50% 50% 12px; transform:translateX(-50%) rotate(-45deg); transform-origin:center; background:var(--orange); color:#fff; box-shadow:0 8px 20px rgba(243,107,59,.27); border:3px solid #fff; }
.city-map-marker__pin span { transform:rotate(45deg); font-size:18px; font-weight:900; }
.city-map-marker__label { position:absolute; left:24px; bottom:8px; white-space:nowrap; padding:8px 11px; border-radius:11px; background:rgba(255,255,255,.96); box-shadow:0 7px 22px rgba(32,70,97,.13); color:var(--navy); font-size:11px; font-weight:800; }
.city-map-marker--exit .city-map-marker__pin { width:30px; height:30px; bottom:-15px; border-radius:50%; transform:translateX(-50%); background:#2d69a0; }
.city-map-marker--exit .city-map-marker__pin span { transform:none; font-size:11px; }
.city-map-marker--exit .city-map-marker__label { left:20px; bottom:-13px; }
.city-map-marker--parking .city-map-marker__pin { width:30px; height:30px; bottom:-15px; border-radius:50%; transform:translateX(-50%); background:#4e9a7a; }
.city-map-marker--parking .city-map-marker__pin span { transform:none; font-size:13px; }
.city-map-marker--parking .city-map-marker__label { left:20px; bottom:-13px; }
@media (max-width:980px) { .location-section__inner { grid-template-columns:1fr; } .location-copy { max-width:none; } .clinic-map-shell { min-height:520px; } }
@media (max-width:620px) { .location-section { padding-left:16px; padding-right:16px; } .location-copy h2 { font-size:34px; } .location-fact { align-items:flex-start; flex-direction:column; gap:5px; } .location-fact strong { text-align:left; } .clinic-map-shell { min-height:500px; border-radius:22px; } .clinic-map-legend { right:14px; } }


/* ==========================================================
   MAP CALIBRATION TOOL — development only
   ========================================================== */
.map-calibrator[hidden] { display:none !important; }
.map-calibrator {
  position:absolute; z-index:30; left:14px; top:14px; width:min(370px, calc(100% - 78px));
  max-height:calc(100% - 28px); overflow:auto; padding:16px; border-radius:20px;
  background:rgba(255,255,255,.97); border:1px solid rgba(37,83,117,.12);
  box-shadow:0 18px 52px rgba(27,62,88,.20); backdrop-filter:blur(16px); color:#536a7c;
}
.map-calibrator__head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.map-calibrator__head div { display:grid; gap:2px; }
.map-calibrator__head span { color:var(--orange); font-size:9px; font-weight:900; letter-spacing:.18em; }
.map-calibrator__head strong { color:var(--navy); font-size:18px; }
.map-calibrator__head button { width:30px; height:30px; border:0; border-radius:10px; background:#eef4f8; color:var(--navy); font-size:20px; cursor:pointer; }
.map-calibrator__field { display:grid; gap:7px; margin-bottom:10px; }
.map-calibrator__field > span { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#7c8f9e; }
.map-calibrator__field select { width:100%; min-height:40px; padding:0 10px; border:1px solid rgba(37,83,117,.12); border-radius:11px; background:#fff; color:var(--navy); font:inherit; font-size:12px; font-weight:700; }
.map-calibrator__instruction { padding:11px 12px; border-radius:12px; background:#eef6fb; font-size:11px; line-height:1.5; }
.map-calibrator__instruction strong { color:var(--navy); }
.map-calibrator__last { display:grid; gap:3px; min-height:40px; margin:9px 0; padding:9px 11px; border-radius:11px; background:#fff8f3; color:#6c7d89; font-size:10px; line-height:1.4; }
.map-calibrator__last strong { color:var(--orange); font-size:12px; }
.map-calibrator__last span { display:block; }
.map-calibrator__actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.map-calibrator__actions button { min-height:36px; border:1px solid rgba(37,83,117,.11); border-radius:10px; background:#fff; color:#536a7c; font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.map-calibrator__actions button:hover { color:var(--navy); background:#f3f8fc; }
.map-calibrator__actions button:nth-last-child(1) { color:#a35e4b; }
.map-calibrator__data { margin-top:10px; border-top:1px solid rgba(37,83,117,.08); padding-top:8px; }
.map-calibrator__data summary { cursor:pointer; color:var(--navy); font-size:10px; font-weight:800; }
.map-calibrator__data textarea { width:100%; height:190px; margin-top:8px; resize:vertical; border:1px solid rgba(37,83,117,.1); border-radius:10px; padding:9px; background:#f8fbfd; color:#435b6e; font:10px/1.45 Consolas,monospace; }
.map-calibrator__note { margin:10px 0 0; color:#8393a0; font-size:9px; line-height:1.5; }
.map-calibrator__note code { color:#5d7181; }
@media (max-width:620px) {
  .map-calibrator { left:8px; top:8px; width:calc(100% - 62px); max-height:calc(100% - 16px); border-radius:16px; }
}

.clinic-photo-modal{position:fixed;inset:0;display:none;z-index:9999}
.clinic-photo-modal.is-open{display:block}
.clinic-photo-modal__backdrop{position:absolute;inset:0;border:0;background:rgba(13,27,40,.62)}
.clinic-photo-modal__dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,1200px);background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.clinic-photo-modal__dialog img{display:block;width:100%;height:auto;max-height:90vh;object-fit:contain}
.clinic-photo-modal__close{position:absolute;z-index:2;right:14px;top:14px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.92);font-size:26px;cursor:pointer}
.site-footer{background:#20384f;color:#fff;padding:48px 0 22px}
.site-footer__inner{width:min(1240px,calc(100% - 48px));margin:0 auto}
.site-footer__brand{font-weight:800;letter-spacing:.08em;margin-bottom:28px}
.site-footer__grid{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:36px}
.site-footer h3{font-size:13px;letter-spacing:.06em;margin:0 0 14px;color:#fff}
.site-footer a{display:block;color:#d5dde5;text-decoration:none;margin:8px 0;transition:color .2s ease}
.site-footer a:hover{color:#f46b35}
.site-footer__two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.site-footer__socials{display:flex;gap:28px;border-top:1px solid rgba(255,255,255,.14);padding-top:28px;margin-top:32px}
.site-footer__socials a{margin:0;color:#fff}
.site-footer__legal{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:18px;color:#aebbc6;font-size:13px}
@media(max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}.site-footer__directions{grid-column:1/-1}}
@media(max-width:560px){.site-footer__grid{grid-template-columns:1fr}.site-footer__directions{grid-column:auto}.site-footer__two-col{grid-template-columns:1fr}}

/* v21 — contacts layout and unified "Перед визитом" */
.location-section__inner{
  display:grid;
  grid-template-columns:minmax(350px,.72fr) minmax(560px,1.28fr);
  gap:clamp(36px,5vw,78px);
  align-items:center;
}
.location-copy{grid-column:1;min-width:0}
.clinic-map-shell{grid-column:2;grid-row:1;align-self:center;width:100%}

.visit-tools{
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid rgba(32,56,79,.12);
}
.visit-tools__title{
  margin-bottom:9px;
  color:#20384f;
  font-size:14px;
  font-weight:800;
}
.visit-tools__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
  color:#91a0ad;
  line-height:1.5;
}
.visit-tools__action,
.visit-tools__links a{
  appearance:none;
  border:0;
  background:none;
  padding:0;
  color:#20384f;
  font:inherit;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  transition:color .18s ease;
}
.visit-tools__action:hover,
.visit-tools__links a:hover,
.visit-tools__action.is-active{
  color:#f36b3b;
}
.visit-tools__action--accent::after{content:" ↗";}

@media(max-width:980px){
  .location-section__inner{grid-template-columns:1fr}
  .location-copy{grid-column:1;grid-row:auto}
  .clinic-map-shell{grid-column:1;grid-row:auto}
}

/* Footer starts directly with navigation columns, no standalone brand heading. */
.site-footer__grid{margin-top:0}


/* v22 — visual polish: contacts, visit actions, footer */
.location-heading{
  margin-bottom:6px;
  max-width:500px;
}
.location-heading .location-eyebrow{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 12px;
  color:var(--orange);
  font-size:clamp(17px,1.25vw,21px);
  line-height:1;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:none;
}
.location-heading .location-eyebrow::before{
  width:34px;
  height:3px;
  background:var(--orange);
  box-shadow:0 4px 14px rgba(243,107,59,.18);
}
.location-heading h2{
  max-width:470px;
  font-size:clamp(38px,3.45vw,60px);
  line-height:.99;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.location-heading h2::after{
  content:"";
  display:block;
  width:76px;
  height:4px;
  margin-top:20px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--orange),rgba(243,107,59,.14));
}

/* "Перед визитом" becomes a compact interactive navigation card. */
.visit-tools{
  margin-top:22px;
  padding:18px 18px 19px;
  border:1px solid rgba(37,83,117,.10);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,249,252,.88));
  box-shadow:0 12px 34px rgba(32,56,79,.055);
}
.visit-tools__title{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 13px;
  color:var(--navy);
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
}
.visit-tools__title::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 5px rgba(243,107,59,.10);
}
.visit-tools__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  color:transparent;
}
.visit-tools__links > span{
  display:none;
}
.visit-tools__action,
.visit-tools__links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(37,83,117,.11);
  border-radius:999px;
  background:#fff;
  color:#39556d;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 5px 16px rgba(32,56,79,.035);
  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}
.visit-tools__action:hover,
.visit-tools__links a:hover{
  transform:translateY(-2px);
  color:var(--navy);
  border-color:rgba(79,131,183,.30);
  background:#f8fbfd;
  box-shadow:0 9px 22px rgba(32,56,79,.08);
}
.visit-tools__action.is-active{
  color:#fff;
  background:var(--navy);
  border-color:var(--navy);
  box-shadow:0 9px 24px rgba(32,56,79,.16);
}
.visit-tools__action--accent{
  color:var(--orange);
  border-color:rgba(243,107,59,.26);
  background:rgba(255,249,246,.96);
}
.visit-tools__action--accent:hover{
  color:#fff;
  border-color:var(--orange);
  background:var(--orange);
  box-shadow:0 9px 24px rgba(243,107,59,.18);
}
.visit-tools__links a::after{
  content:"";
  position:absolute;
  left:13px;
  right:13px;
  bottom:7px;
  height:1px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.visit-tools__links a:hover::after{
  transform:scaleX(1);
}

/* Footer directions heading spans its full two-column area visually. */
.site-footer__directions > h3{
  width:100%;
  max-width:none;
  margin-bottom:16px;
  font-size:13px;
  letter-spacing:.045em;
  white-space:nowrap;
}
@media(max-width:1080px){
  .site-footer__directions > h3{white-space:normal}
}

/* v23 — reliable clinic entrance photo trigger */
.city-map-marker--clinic{
  cursor:pointer;
  pointer-events:auto;
  z-index:20;
}
.city-map-marker--clinic .city-map-marker__pin,
.city-map-marker--clinic .city-map-marker__label{
  pointer-events:none;
}
.city-map-marker--clinic:hover .city-map-marker__label{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(32,56,79,.14);
}
.city-map-marker--clinic:focus-visible{
  outline:3px solid rgba(243,107,59,.38);
  outline-offset:4px;
  border-radius:16px;
}
html.clinic-photo-open,
html.clinic-photo-open body{
  overflow:hidden;
}

/* v24 — marker hit area fix: visual children themselves are clickable */
.city-map-marker--clinic{
  cursor:pointer;
  pointer-events:auto;
}
.city-map-marker--clinic .city-map-marker__pin,
.city-map-marker--clinic .city-map-marker__label{
  pointer-events:auto !important;
  cursor:pointer;
}

/* MODX Home 2026 integration */
.contact-header__cta,
.action-card.action-card--accent,
.doctor-card__book,
.doctor-card__availability {
  font: inherit;
}
button.contact-header__cta,
button.action-card.action-card--accent,
button.doctor-card__book,
button.doctor-card__availability {
  cursor: pointer;
}
button.contact-header__cta { border: 0; }
button.action-card.action-card--accent { width: auto; text-align: left; }
button.doctor-card__availability {
  width: 100%; border: 0; text-align: left; cursor: pointer;
}
.home26-pending-link { opacity:.58; cursor:default; }
.home26-map-key-missing {
  display:flex; align-items:center; justify-content:center; min-height:360px;
  padding:30px; text-align:center; color:#65798b; background:#f7fafc;
}


/* ==========================================================
   MOBILE UX v2.0 / M1
   Header + Hero + Proof + Quick Routes
   Desktop remains unchanged above 767px.
   ========================================================== */

.contact-header__phone-icon,
.contact-header__menu-toggle,
.mobile-menu { display: none; }

.proof-doctors-group { display: contents; }

@media (max-width: 767px) {
  :root { --mobile-gutter: clamp(16px, 5vw, 22px); }

  /* ---------- fixed header ---------- */
  .contact-header {
    top: 8px;
    width: calc(100% - 20px);
    color: var(--navy);
    background: rgba(255,255,255,.94);
    border-color: rgba(23,54,83,.07);
    border-radius: 28px;
    box-shadow: 0 10px 30px rgba(23,54,83,.08);
    backdrop-filter: blur(13px) saturate(1.05);
    -webkit-backdrop-filter: blur(13px) saturate(1.05);
  }
  .contact-header__inner {
    min-height: 58px;
    padding: 7px 10px 7px 16px;
    gap: 8px;
  }
  .contact-header__brand {
    color: var(--orange);
    font-size: clamp(15px, 4.2vw, 18px);
    font-weight: 760;
    white-space: nowrap;
  }
  .contact-header__info { gap: 5px; }
  .contact-header__hours,
  .contact-header__contacts { display: none; }

  .contact-header__phone {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--navy);
  }
  .contact-header__phone-text { display: none; }
  .contact-header__phone::before,
  .contact-header__phone::after { display: none !important; }
  .contact-header__phone-icon {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .contact-header__cta {
    min-height: 42px;
    padding: 8px 15px;
    color: #fff !important;
    background: var(--orange);
    font-size: 13px;
    font-weight: 720;
    box-shadow: 0 7px 18px rgba(243,107,59,.17);
  }

  .contact-header__menu-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
  }
  .contact-header__menu-toggle span {
    width: 17px;
    height: 1.7px;
    border-radius: 4px;
    background: currentColor;
    transition: transform .22s ease, opacity .2s ease;
  }
  .contact-header__menu-toggle.is-open span:nth-child(1) { transform: translateY(5.7px) rotate(45deg); }
  .contact-header__menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .contact-header__menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: block;
    padding: 84px 10px 12px;
    background: rgba(236,244,250,.72);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, visibility 0s linear .24s;
  }
  .mobile-menu.is-open {
    z-index: 89;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .mobile-menu__surface {
    max-height: calc(100svh - 96px);
    padding: 24px 22px 20px;
    overflow-y: auto;
    border: 1px solid rgba(23,54,83,.07);
    border-radius: 28px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 60px rgba(23,54,83,.13);
    transform: translateY(-8px);
    transition: transform .28s cubic-bezier(.2,.72,.2,1);
  }
  .mobile-menu.is-open .mobile-menu__surface { transform: none; }
  .mobile-menu__nav { display: grid; }
  .mobile-menu__nav a {
    padding: 15px 2px;
    border-bottom: 1px solid rgba(23,54,83,.08);
    color: var(--navy);
    text-decoration: none;
    font-size: 20px;
    font-weight: 620;
  }
  .mobile-menu__meta {
    display: grid;
    gap: 5px;
    margin: 22px 0 16px;
    color: rgba(23,54,83,.68);
    font-size: 14px;
  }
  .mobile-menu__meta a { color: var(--navy); text-decoration: none; font-size: 17px; font-weight: 700; }
  .mobile-menu__cta {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--orange);
    font-weight: 720;
  }
  html.mobile-menu-open { overflow: hidden; }

  /* ---------- cinematic hero: text above / image below ---------- */
  .hero {
    height: clamp(535px, 139vw, 620px);
    min-height: 535px;
    max-height: 620px;
    background: #fff;
  }

  /* The film occupies the lower, almost-square stage. */
  .hero__scene {
    inset: auto 0 0;
    height: clamp(330px, 92vw, 410px);
    overflow: hidden;
  }
  .hero__image {
    inset: 0;
    background-size: cover;
  }
  .hero::before { display: none; }

  /* Only a top fade, no side/bottom white masking. */
  .hero::after {
    content: "";
    position: absolute;
    z-index: 8;
    left: 0;
    right: 0;
    top: clamp(185px, 49vw, 225px);
    height: 92px;
    background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.97) 22%,rgba(255,255,255,.70) 55%,rgba(255,255,255,0) 100%);
    pointer-events: none;
  }

  .hero__transition {
    background: linear-gradient(180deg,rgba(255,255,255,.30),transparent 42%);
  }

  /* Mobile art direction: keep people in the square crop. */
  .hero__scene--one .hero__image { background-position: 66% 50%; }
  .hero__scene--two .hero__image { background-position: 61% 50%; }
  .hero__scene--three .hero__image { background-position: 55% 50%; }
  .hero__scene--four .hero__image { background-position: 53% 50%; }
  .hero__scene--five .hero__image { background-position: 59% 50%; }
  .hero__scene--six .hero__image { background-position: 58% 50%; }

  .hero__copy {
    inset: 0;
    z-index: 11;
    height: 225px;
    text-shadow: none;
  }
  .title {
    max-width: calc(100% - (var(--mobile-gutter) * 2));
    color: var(--navy);
    text-shadow: none;
  }

  /* Preserve the film timing, but use one common editorial layout. */
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 {
    left: var(--mobile-gutter);
    top: 82px;
    max-width: 86vw;
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.02;
    font-weight: 420;
    letter-spacing: -.038em;
  }
  .title--2,.title--4,.title--6,.title--8,.title--10,.title--12,.title--14 {
    left: calc(var(--mobile-gutter) + 12px);
    top: 148px;
    max-width: 86vw;
    font-size: clamp(23px, 6.4vw, 30px);
    line-height: 1.08;
    font-weight: 420;
    letter-spacing: -.03em;
  }
  .title--2::before,.title--4::before,.title--6::before,.title--8::before,.title--10::before,.title--12::before,.title--14::before {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin: -18px 0 20px;
    border-radius: 3px;
    background: var(--orange);
  }

  .hero__final,
  .hero__flare,
  .hero__film-grain,
  .hero__scroll { display: none !important; }

  /* ---------- proof: first two facts + one doctor group ---------- */
  .trust-actions {
    padding-top: 0;
    background: #fff;
  }
  .trust-actions__inner {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .proof-strip {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: #fff;
  }
  .proof-strip::before { display: none; }

  .proof-item {
    min-height: 102px;
    padding: 19px var(--mobile-gutter) 17px;
  }
  .proof-item + .proof-item::before { display: none; }

  .proof-item--recommend { grid-column: 1; grid-row: 1; border-bottom: 1px solid rgba(23,54,83,.09); }
  .proof-item--distance { grid-column: 2; grid-row: 1; border-bottom: 1px solid rgba(23,54,83,.09); }
  .proof-item--distance::after {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    bottom: 19px;
    width: 1px;
    background: rgba(23,54,83,.09);
  }

  .proof-doctors-group {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(108px,.72fr) minmax(0,1.55fr);
    align-items: stretch;
    border-bottom: 1px solid rgba(23,54,83,.08);
  }
  .proof-doctors-group .proof-item {
    min-height: 116px;
    padding-top: 20px;
    padding-bottom: 19px;
  }
  .proof-doctors-group .proof-item + .proof-item {
    border-left: 1px solid rgba(23,54,83,.09);
  }

  .proof-item__value { font-size: clamp(17px, 5vw, 22px); }
  .proof-item__value strong { font-size: 1.22em; }
  .proof-item__text {
    margin-top: 6px;
    max-width: 22ch;
    font-size: 12px;
    line-height: 1.42;
  }
  .proof-item__value--compact {
    font-size: clamp(13px, 3.65vw, 16px);
    line-height: 1.5;
  }

  /* ---------- quick routes: same logic, much tighter ---------- */
  .help-block {
    padding: clamp(62px, 16vw, 78px) var(--mobile-gutter) 4px;
  }
  .help-block__heading {
    display: block;
    margin-bottom: 27px;
  }
  .help-block__eyebrow {
    display: block;
    margin-bottom: 11px;
    font-size: 11px;
    letter-spacing: .16em;
  }
  .help-block h2 {
    max-width: 10ch;
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.03;
    font-weight: 650;
  }
  .help-block__heading p {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.4;
  }

  .action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .action-card {
    min-height: 88px;
    padding: 14px 16px;
    grid-template-columns: 46px minmax(0,1fr) 24px;
    grid-template-rows: 1fr;
    gap: 12px;
    align-items: center;
    border-radius: 22px;
    box-shadow: 0 6px 22px rgba(23,54,83,.035);
  }
  .action-card::before {
    inset: -55% -18% -75% 42%;
    height: 160px;
    opacity: .52;
  }
  .action-card__icon {
    grid-column: 1;
    grid-row: 1;
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  .action-card__icon svg { width: 23px; height: 23px; }
  .action-card__label {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    max-width: none;
    font-size: clamp(16px, 4.3vw, 19px);
    line-height: 1.18;
    font-weight: 650;
  }
  .action-card__arrow {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    font-size: 20px;
  }
  .action-card:active {
    transform: scale(.985);
    border-color: rgba(79,131,183,.22);
    background: linear-gradient(145deg,#fff,rgba(239,247,253,.98));
  }
  .action-card--accent:active {
    border-color: rgba(243,107,59,.28);
    background: linear-gradient(145deg,#fff,rgba(255,239,232,.98));
  }

  /* Keep expanded service directions usable without bloating the closed block. */
  .services-panel__clip { padding-top: 10px; }
  .services-panel__surface { padding: 20px 15px 18px; border-radius: 22px; }
  .services-grid { grid-template-columns: 1fr; gap: 8px; }
  .service-card { min-height: 94px; padding: 15px; border-radius: 17px; }
  .services-panel.is-open { max-height: 1800px; }
}

@media (max-width: 374px) {
  .contact-header { width: calc(100% - 12px); }
  .contact-header__inner { padding-left: 12px; gap: 3px; }
  .contact-header__brand { font-size: 14px; }
  .contact-header__phone,
  .contact-header__menu-toggle { width: 38px; height: 38px; flex-basis: 38px; }
  .contact-header__cta { min-height: 39px; padding-inline: 11px; font-size: 12px; }

  .hero {
    height: 520px;
    min-height: 520px;
  }
  .hero__scene { height: 320px; }
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 { top: 78px; }
  .title--2,.title--4,.title--6,.title--8,.title--10,.title--12,.title--14 { top: 142px; }

  .proof-item { padding-left: 16px; padding-right: 16px; }
  .proof-doctors-group { grid-template-columns: .78fr 1.45fr; }
  .proof-item__value--compact { font-size: 12.5px; }

  .help-block { padding-left: 16px; padding-right: 16px; }
  .action-card { min-height: 84px; }
}

@media (hover: hover) and (pointer: fine) and (max-width: 767px) {
  .action-card:hover { transform: translateY(-2px); }
}


/* ==========================================================
   MOBILE M1.1 VISUAL FIX
   2026-08-22
   Fixes:
   - scene 1 face ghosting / blur on desktop + mobile
   - mobile title collision
   - hard horizontal fade seam
   - proof hidden until scroll
   - quick-route cards remaining too tall because older !important rule won
   ========================================================== */


/* Gentler zoom on the reception scene also improves face sharpness
   on large desktop screens without making the film static. */
@keyframes sceneOneBase {
  0% {
    transform: scale(1.004) translate3d(.04%,0,0);
    filter: saturate(.99) contrast(1);
  }
  19.483% {
    transform: scale(1.045) translate3d(-.55%,-.18%,0);
    filter: saturate(1.01) contrast(1.008);
  }
  20.000%, 97.241% {
    transform: scale(1.045) translate3d(-.55%,-.18%,0);
    filter: saturate(1.01) contrast(1.008);
  }
  98.793%,100% {
    transform: scale(1.004) translate3d(.04%,0,0);
    filter: saturate(.99) contrast(1);
  }
}

@media (max-width: 767px) {
  /* Separate editorial text zone from the image zone.
     Height is content/width-driven rather than tied to 100vh. */
  .hero {
    height: clamp(570px, 145vw, 640px) !important;
    min-height: 570px !important;
    max-height: 640px !important;
  }

  .hero__scene {
    inset: auto 0 0 !important;
    height: clamp(320px, 82vw, 360px) !important;
  }

  /* The image begins below the text. The fade starts exactly at the
     top edge of the image, so there is no opaque horizontal strip. */
  .hero::after {
    top: auto !important;
    bottom: calc(clamp(320px, 82vw, 360px) - 86px) !important;
    height: 86px !important;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.96) 18%,
        rgba(255,255,255,.70) 46%,
        rgba(255,255,255,.25) 72%,
        rgba(255,255,255,0) 100%
      ) !important;
  }

  /* Do not add another transition layer on top of the fade. */
  .hero__transition {
    display: none !important;
  }

  .hero__copy {
    height: 250px !important;
  }

  /* First phrase stays high; second phrase always starts below it,
     even when the first phrase wraps to two lines. */
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 {
    top: 82px !important;
    line-height: 1.02 !important;
  }

  .title--2,.title--4,.title--6,.title--8,.title--10,.title--12,.title--14 {
    top: 178px !important;
    line-height: 1.08 !important;
  }

  .title--2::before,.title--4::before,.title--6::before,.title--8::before,
  .title--10::before,.title--12::before,.title--14::before {
    margin: -20px 0 16px !important;
  }

  /* Proof must be visible immediately below the image. On mobile it is
     part of the hero composition, not a scroll-triggered reveal. */
  .trust-actions {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .trust-actions .reveal-item,
  .trust-actions.js-reveal .reveal-item,
  .trust-actions .js-reveal .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Older responsive CSS contains min-height:108px !important.
     This selector intentionally wins over it. */
  .trust-actions .action-grid .action-card,
  .trust-actions .action-grid .action-card:nth-child(4),
  .trust-actions .action-grid .action-card:nth-child(5) {
    min-height: 84px !important;
    height: auto !important;
    padding: 12px 15px !important;
    grid-template-columns: 44px minmax(0,1fr) 22px !important;
    grid-template-rows: 1fr !important;
    gap: 11px !important;
    align-items: center !important;
    border-radius: 20px !important;
  }

  .trust-actions .action-card__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .trust-actions .action-card__label {
    font-size: clamp(15px, 4.15vw, 18px) !important;
    line-height: 1.16 !important;
  }

  .trust-actions .action-card__arrow {
    font-size: 19px !important;
  }

  .help-block {
    padding-top: clamp(54px, 13vw, 66px) !important;
  }

  .help-block__heading {
    margin-bottom: 22px !important;
  }
}

@media (max-width: 374px) {
  .hero {
    height: 560px !important;
    min-height: 560px !important;
  }
  .hero__scene {
    height: 312px !important;
  }
  .hero::after {
    bottom: 226px !important;
  }
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 {
    top: 78px !important;
  }
  .title--2,.title--4,.title--6,.title--8,.title--10,.title--12,.title--14 {
    top: 170px !important;
  }
}


/* ==========================================================
   MOBILE M1.2 TYPOGRAPHY + SCENE 1 ZOOM
   2026-08-22
   Two changes only:
   1) smaller upper-level mobile hero text
   2) restore original scene 1 base zoom while keeping depth disabled
   ========================================================== */

/* Restore original cinematic zoom for scene 1 base layer.
   Depth copy remains disabled by M1.1 to avoid face ghosting. */
@keyframes sceneOneBase {
  0% {
    transform: scale(1.008) translate3d(.08%,0,0);
    filter: saturate(.985) contrast(1);
  }
  19.483% {
    transform: scale(1.086) translate3d(-1.15%,-.42%,0);
    filter: saturate(1.018) contrast(1.012);
  }
  20.000%, 97.241% {
    transform: scale(1.086) translate3d(-1.15%,-.42%,0);
    filter: saturate(1.018) contrast(1.012);
  }
  98.793%,100% {
    transform: scale(1.008) translate3d(.08%,0,0);
    filter: saturate(.985) contrast(1);
  }
}

@media (max-width: 767px) {
  /* Upper hero phrases: reduce size enough for long phrases
     to fit in ~2 lines on 360–430px screens. */
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 {
    font-size: clamp(27px, 7.2vw, 32px) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.025em !important;
  }
}


/* ==========================================================
   MOBILE UX v2.1 / M2 — Doctors
   2026-08-23
   - horizontal native scroll-snap
   - compact portrait stage, full card content visible
   - mobile doctor finder
   - qualifications as pills
   - primary booking CTA
   - final "Все врачи" swipe card + permanent link below
   Desktop remains unchanged.
   ========================================================== */

.doctors-all-card { display: none; }

@media (max-width: 767px) {
  .doctors-section {
    padding: clamp(62px, 15vw, 80px) 0 clamp(70px, 16vw, 88px) !important;
    overflow: hidden !important;
  }

  .doctors-section__inner {
    width: 100% !important;
    max-width: none !important;
  }

  .doctors-section__heading {
    display: block !important;
    margin: 0 var(--mobile-gutter) 23px !important;
  }

  .doctors-section__eyebrow {
    margin-bottom: 10px !important;
    font-size: 10px !important;
  }

  .doctors-section h2 {
    font-size: clamp(34px, 9vw, 42px) !important;
    line-height: 1.02 !important;
  }

  .doctors-section__heading p {
    max-width: 29ch !important;
    margin: 13px 0 18px !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
  }

  .doctors-section__finder {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    padding: 11px 17px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 6px 20px rgba(23,54,83,.04) !important;
  }

  /* Finder: vertical and compact on phones. */
  .doctor-finder {
    margin-inline: var(--mobile-gutter) !important;
  }

  .doctor-finder.is-open {
    margin-bottom: 22px !important;
  }

  .doctor-finder__surface {
    padding: 18px 16px 16px !important;
    border-radius: 20px !important;
  }

  .doctor-finder__heading {
    margin-bottom: 15px !important;
  }

  .doctor-finder h3 {
    max-width: 13ch !important;
    font-size: 24px !important;
  }

  .doctor-finder__controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .doctor-finder select,
  .doctor-finder input,
  .doctor-finder__reset {
    min-height: 49px !important;
  }

  .doctor-finder__reset {
    width: 100% !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  /* Horizontal swipe: one focused card + visible edge of the next one. */
  .doctors-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(86vw, 356px) !important;
    gap: 13px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 2px var(--mobile-gutter) 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--mobile-gutter) !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .doctors-grid::-webkit-scrollbar {
    display: none;
  }

  .doctor-card,
  .doctors-all-card {
    scroll-snap-align: start;
  }

  .doctor-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 24px !important;
    background: rgba(251,253,255,.98) !important;
    box-shadow: 0 11px 32px rgba(25,57,84,.07) !important;
    transform: none !important;
  }

  /* Critical fix for the current defect:
     portrait no longer consumes nearly the whole mobile viewport. */
  .doctor-card__photo {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(242px, 67vw, 292px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background:
      radial-gradient(circle at 50% 34%, rgba(86,176,225,.17), transparent 46%),
      linear-gradient(180deg,#fbfdfe,#f3f9fc) !important;
  }

  .doctor-card__photo::after {
    height: 15% !important;
    background: linear-gradient(transparent,rgba(21,48,71,.055)) !important;
  }

  .doctor-card__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    padding: 9px 6px 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .doctor-card__badge {
    display: inline-flex !important;
    top: 12px !important;
    right: 12px !important;
    padding: 6px 9px !important;
    font-size: 10.5px !important;
  }

  .doctor-card__body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 17px 17px !important;
  }

  .doctor-card h3 {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: clamp(21px, 5.7vw, 24px) !important;
    line-height: 1.12 !important;
  }

  .doctor-card__specialties {
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.38 !important;
  }

  /* Qualifications become compact pills. */
  .doctor-card__credentials {
    min-height: 0 !important;
    margin-top: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .doctor-card__credentials span {
    padding: 6px 9px !important;
    border: 1px solid rgba(50,104,145,.09) !important;
    border-radius: 999px !important;
    background: rgba(237,246,252,.82) !important;
    color: #5f778b !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .doctor-card__credentials span::before {
    display: none !important;
  }

  .doctor-card__experience {
    margin: 11px 0 0 !important;
    font-size: 12.5px !important;
  }

  .doctor-card__availability {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .doctor-card__availability span {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    letter-spacing: .07em !important;
  }

  .doctor-card__availability strong {
    font-size: 13px !important;
  }

  /* Booking is primary; details is secondary text action. */
  .doctor-card__actions {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 7px !important;
    margin-top: 13px !important;
    padding-top: 0 !important;
  }

  .doctor-card__book {
    width: 100% !important;
    min-height: 49px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border: 1px solid var(--orange) !important;
    border-radius: 15px !important;
    color: #fff !important;
    background: var(--orange) !important;
    font-size: 14px !important;
    font-weight: 720 !important;
  }

  .doctor-card__more {
    width: 100% !important;
    min-height: 39px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--navy) !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
  }

  .doctor-card__more::after {
    content: "→";
    margin-left: 6px;
    color: var(--orange);
  }

  .doctor-card.is-filtered-out {
    display: none !important;
  }

  /* Final swipe card: catalogue continuation after doctor #8. */
  .doctors-all-card {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 24px 22px;
    border: 1px solid rgba(39,88,125,.09);
    border-radius: 24px;
    text-decoration: none;
    color: var(--navy);
    background:
      radial-gradient(circle at 86% 13%, rgba(244,116,69,.15), transparent 25%),
      radial-gradient(circle at 10% 86%, rgba(91,161,208,.18), transparent 32%),
      linear-gradient(145deg,#fbfdff,#f1f8fc);
    box-shadow: 0 11px 32px rgba(25,57,84,.06);
  }

  .doctors-all-card__eyebrow {
    margin-bottom: auto;
    color: var(--orange);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .doctors-all-card strong {
    max-width: 7ch;
    font-size: clamp(31px, 8vw, 38px);
    line-height: 1;
    letter-spacing: -.035em;
  }

  .doctors-all-card__arrow {
    margin-top: 18px;
    color: var(--orange);
    font-size: 31px;
  }

  /* Permanent catalogue link remains below the carousel too. */
  .doctors-section__footer {
    margin: 3px var(--mobile-gutter) 0 !important;
  }

  .doctors-section__footer a {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(23,54,83,.08) !important;
    border-bottom: 0 !important;
    font-size: 14px !important;
  }
}

@media (max-width: 374px) {
  .doctors-grid {
    grid-auto-columns: 88vw !important;
    gap: 11px !important;
  }

  .doctor-card__photo {
    height: 238px !important;
  }

  .doctor-card__body {
    padding: 16px 15px 15px !important;
  }

  .doctor-card h3 {
    font-size: 20px !important;
  }
}


/* ==========================================================
   MOBILE M2.1 — explicit swipe affordance for doctors
   One floating next arrow, no dots/counter.
   ========================================================== */

.doctors-swipe-next { display: none; }

@media (max-width: 767px) {
  .doctors-section__inner {
    position: relative;
  }

  .doctors-swipe-next {
    position: absolute;
    z-index: 8;
    right: 9px;
    /* Vertically aligned roughly with the middle of the portrait stage. */
    top: clamp(410px, 102vw, 472px);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(31,70,105,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    color: var(--navy);
    box-shadow: 0 10px 26px rgba(25,57,84,.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease;
  }

  .doctors-swipe-next span {
    display: block;
    font-size: 27px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .doctors-swipe-next:active {
    transform: scale(.94);
  }

  .doctors-swipe-next.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
  }
}

@media (max-width: 374px) {
  .doctors-swipe-next {
    right: 5px;
    top: 394px;
    width: 44px;
    height: 44px;
  }
}


/* v2.3 — Media runtime fixes + Media resource page */
.media-resource{min-height:70vh;padding:118px 0 72px;color:var(--navy);background:radial-gradient(circle at 8% 6%,rgba(224,241,252,.55),transparent 25%),#fff}
.media-resource__inner{width:min(980px,calc(100% - 40px));margin:0 auto}
.media-resource__hero{padding:34px 0 28px}
.media-resource__back{display:inline-flex;margin-bottom:28px;color:#668096;text-decoration:none;font-size:14px;font-weight:600}
.media-resource__meta{margin-bottom:12px;color:var(--orange);font-size:12px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}
.media-resource h1{max-width:16ch;margin:0;font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-.045em}
.media-resource__lead{max-width:720px;margin:22px 0 0;color:#6d8294;font-size:19px;line-height:1.55}
.media-resource__media{padding:12px 0 36px}
.media-resource__video,.media-resource__cover{display:block;width:100%;max-height:76vh;margin:0 auto;border-radius:28px;object-fit:contain;background:#0d1720;box-shadow:0 24px 70px rgba(18,45,67,.13)}
.media-resource__content{padding:26px 0 60px;color:#344f65;font-size:17px;line-height:1.72}
.content-modal__close,.content-modal__backdrop{touch-action:manipulation}
@media(max-width:767px){
.media-resource{padding:88px 0 48px}.media-resource__inner{width:calc(100% - 32px)}.media-resource__hero{padding:24px 0 20px}
.media-resource__back{margin-bottom:22px}.media-resource h1{font-size:clamp(36px,10vw,48px);line-height:1.01}
.media-resource__lead{margin-top:16px;font-size:16px}.media-resource__video,.media-resource__cover{max-height:72svh;border-radius:22px}
.content-modal{padding:10px!important}.content-modal__dialog{width:100%!important;max-height:92svh!important;border-radius:20px!important}
.content-modal__dialog video{max-height:88svh!important}.content-modal__close{right:10px!important;top:10px!important;width:48px!important;height:48px!important;font-size:30px!important;background:rgba(9,20,30,.74)!important}
}


/* ==========================================================
   MOBILE/DESKTOP M3 — Media responsive architecture v3.0
   Type-driven cards; geometry no longer depends on slot names.
   ========================================================== */

.content-editorial-grid {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  grid-template-areas: none !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.content-editorial-grid > .content-card {
  grid-area: auto !important;
}

.content-card--standard {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100%;
}

.content-media--card {
  aspect-ratio: 16 / 10 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.content-media--card img,
.content-media--card video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.content-card--standard .content-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 21px 22px 22px;
}

.content-card--standard h3 {
  min-height: 2.28em;
  font-size: clamp(20px,1.55vw,27px) !important;
  line-height: 1.14;
}

.content-card--standard p {
  display: -webkit-box;
  min-height: 4.65em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.content-card__action {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 18px;
  border: 0;
  color: var(--navy);
  background: transparent;
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  cursor: pointer;
}

.content-card__action span {
  margin-left: 5px;
  color: var(--orange);
}

.content-card--archive {
  display: flex !important;
  min-height: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 25px 24px;
  color: var(--navy);
  text-decoration: none;
  background:
    radial-gradient(circle at 88% 12%,rgba(243,107,59,.15),transparent 27%),
    radial-gradient(circle at 12% 88%,rgba(91,161,208,.17),transparent 34%),
    linear-gradient(145deg,#fbfdff,#eff7fc);
}

.content-card--archive__eyebrow {
  margin-bottom: auto;
  color: var(--orange);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.content-card--archive strong {
  max-width: 7ch;
  margin-top: 100px;
  font-size: clamp(30px,2.7vw,43px);
  line-height: .98;
  letter-spacing: -.04em;
}

.content-card--archive__arrow {
  margin-top: 18px;
  color: var(--orange);
  font-size: 31px;
}

@media (min-width: 768px) and (max-width: 1100px) {
  .content-editorial-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 767px) {
  .content-engine-section {
    overflow: hidden;
  }

  .content-engine-heading {
    display: block !important;
    margin-bottom: 21px !important;
  }

  .content-engine-heading h2 {
    font-size: clamp(34px,9vw,42px) !important;
  }

  .content-engine-heading p {
    margin-top: 14px !important;
    font-size: 15px !important;
  }

  .content-engine-heading .content-engine-all {
    display: none !important;
  }

  .content-engine-filters {
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin: 0 calc(var(--mobile-gutter) * -1) 20px !important;
    padding: 0 var(--mobile-gutter) 5px !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .content-engine-filters::-webkit-scrollbar { display:none; }

  .content-filter {
    flex: 0 0 auto;
    padding: 9px 14px !important;
    font-size: 13px;
  }

  .content-editorial-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(82vw,344px) !important;
    gap: 13px !important;
    width: auto !important;
    margin: 0 calc(var(--mobile-gutter) * -1) !important;
    padding: 2px var(--mobile-gutter) 18px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--mobile-gutter) !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .content-editorial-grid::-webkit-scrollbar { display:none; }

  .content-editorial-grid > .content-card {
    scroll-snap-align: start;
  }

  .content-card--standard {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 23px !important;
  }

  .content-media--card {
    aspect-ratio: 4 / 3 !important;
  }

  .content-card--standard .content-card__body {
    padding: 17px 17px 18px !important;
  }

  .content-card--standard h3 {
    min-height: 0 !important;
    font-size: 21px !important;
  }

  .content-card--standard p {
    min-height: 0 !important;
    margin-top: 9px !important;
    font-size: 13.5px !important;
    -webkit-line-clamp: 3;
  }

  .content-card__action {
    padding-top: 14px;
  }

  .content-card--archive {
    min-height: 420px !important;
    border-radius: 23px !important;
  }

  .content-card--archive strong {
    margin-top: auto;
    font-size: 34px;
  }

  .content-engine-footer {
    margin-top: 6px !important;
  }

  .content-engine-footer__archive {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid rgba(23,54,83,.08);
  }
}


/* ==========================================================
   M3.1 — Media polish
   ========================================================== */

.content-swipe-next { display:none; }

@media (max-width:767px) {
  .content-engine-section__inner { position:relative; }

  .content-swipe-next {
    position:absolute;
    z-index:9;
    right:7px;
    top:clamp(430px,112vw,515px);
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(31,70,105,.10);
    border-radius:50%;
    background:rgba(255,255,255,.97);
    color:var(--navy);
    box-shadow:0 10px 26px rgba(25,57,84,.15);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
    transition:opacity .22s ease,transform .22s ease;
  }

  .content-swipe-next span {
    display:block;
    font-size:27px;
    line-height:1;
    transform:translateY(-1px);
  }

  .content-swipe-next:active { transform:scale(.94); }

  .content-swipe-next.is-hidden {
    opacity:0;
    pointer-events:none;
    transform:translateX(8px);
  }

  .content-engine-footer {
    min-height:0 !important;
    margin:2px 0 0 !important;
    padding:0 !important;
    border-top:1px solid rgba(23,54,83,.08) !important;
  }

  .content-engine-footer__social { display:none !important; }

  .content-engine-footer__archive {
    width:100% !important;
    min-height:52px !important;
    justify-content:center !important;
    padding:0 !important;
    border:0 !important;
    font-size:14px !important;
  }
}

@media (max-width:374px) {
  .content-swipe-next {
    right:4px;
    top:420px;
    width:44px;
    height:44px;
  }
}


/* ==========================================================
   M4 — Location responsive v4.0
   Mobile merges route controls into the contact block.
   Desktop is intentionally unchanged.
   ========================================================== */

.location-route__mobile { display:none; }

@media (max-width:767px) {
  .location-section {
    padding: 64px 0 66px !important;
    overflow: visible !important;
  }

  .location-section__inner {
    width: 100% !important;
    max-width: none !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  .location-layout,
  .location-grid,
  .location-section__grid {
    display:block !important;
  }

  .location-copy,
  .location-section__copy {
    width:100% !important;
    max-width:none !important;
  }

  .location-section h2,
  .location-copy h2 {
    max-width: 10ch;
    margin-bottom: 20px !important;
    font-size: clamp(38px,10vw,50px) !important;
    line-height: .98 !important;
  }

  .location-details,
  .location-contact-list,
  .location-info {
    margin-top: 24px !important;
  }

  .location-details > *,
  .location-contact-list > *,
  .location-info > * {
    padding-block: 14px !important;
  }

  .location-details dt,
  .location-contact-list dt,
  .location-info dt,
  .location-detail__label {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .location-details dd,
  .location-contact-list dd,
  .location-info dd,
  .location-detail__value {
    margin-top: 4px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* Merge "Перед визитом" into the information block. */
  .location-previsit,
  .location-before-visit,
  .visit-planner {
    margin-top: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .location-previsit__title,
  .location-before-visit__title,
  .visit-planner__title,
  .location-previsit > h3,
  .location-before-visit > h3,
  .visit-planner > h3 {
    display:none !important;
  }

  .location-route__desktop { display:none !important; }
  .location-route__mobile { display:inline !important; }

  /* Keep only the four map controls agreed for mobile. */
  [data-route="prep"],
  [data-map-action="prep"],
  .location-route--prep,
  .location-preparation,
  .location-previsit__prep {
    display:none !important;
  }

  .location-routes,
  .location-route-controls,
  .visit-planner__controls,
  .location-previsit__controls {
    display:grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    margin-top:14px !important;
  }

  .location-routes button,
  .location-route-controls button,
  .visit-planner__controls button,
  .location-previsit__controls button,
  .location-routes a,
  .location-route-controls a {
    min-height:44px !important;
    width:100% !important;
    justify-content:center !important;
    padding:9px 11px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }

  /* Map gets a deliberate scroll-safe frame around it. */
  .location-map-wrap,
  .location-map-shell,
  .location-map-container {
    width:auto !important;
    margin:18px 0 18px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  #locationMap,
  .location-map,
  .clinic-map {
    width:calc(100% - 8px) !important;
    height:clamp(300px,62vw,390px) !important;
    max-height:390px !important;
    margin:0 auto !important;
    border-radius:24px !important;
    touch-action:pan-x pan-y pinch-zoom;
  }

  /* Preserve a physical scroll corridor around the interactive map. */
  .location-map-wrap::before,
  .location-map-wrap::after,
  .location-map-shell::before,
  .location-map-shell::after {
    content:"";
    display:block;
    height:14px;
  }

  .location-section .ymaps3x0--map,
  .location-section [class*="ymaps"] {
    border-radius:24px !important;
  }
}

@media (max-width:374px) {
  .location-routes,
  .location-route-controls,
  .visit-planner__controls,
  .location-previsit__controls {
    gap:8px !important;
  }

  .location-routes button,
  .location-route-controls button,
  .visit-planner__controls button,
  .location-previsit__controls button,
  .location-routes a,
  .location-route-controls a {
    min-height:42px !important;
    padding-inline:8px !important;
    font-size:12.5px !important;
  }

  #locationMap,
  .location-map,
  .clinic-map {
    height:300px !important;
  }
}


/* ==========================================================
   M4.1 — Location responsive correction v4.1
   Exact selectors for the real home26_location markup.
   ========================================================== */

@media (max-width:767px) {
  /* Overall vertical rhythm: more compact than M4. */
  .location-section {
    padding-top:54px !important;
    padding-bottom:42px !important;
  }

  .location-heading {
    margin-bottom:0 !important;
  }

  .location-heading .location-eyebrow {
    margin-bottom:10px !important;
  }

  .location-heading h2 {
    margin-bottom:0 !important;
  }

  .location-heading h2::after {
    margin-top:15px !important;
  }

  .location-lead {
    display:none !important;
  }

  /* Phone / address / hours: compact stack. */
  .location-facts {
    gap:0 !important;
    margin:18px 0 8px !important;
  }

  .location-fact {
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:3px !important;
    padding:9px 0 !important;
  }

  .location-fact span {
    font-size:12px !important;
    line-height:1.2 !important;
  }

  .location-fact strong {
    text-align:left !important;
    font-size:17px !important;
    line-height:1.25 !important;
  }

  /* "Перед визитом" is not a separate card on mobile. */
  .visit-tools {
    margin:5px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .visit-tools__title {
    display:none !important;
  }

  .visit-tools__links {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 !important;
    color:transparent !important;
  }

  .visit-tools__links > span[aria-hidden="true"] {
    display:none !important;
  }

  .visit-tools__mobile-hidden {
    display:none !important;
  }

  .visit-tools__action,
  .visit-tools__links a {
    width:100% !important;
    min-height:43px !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 10px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  .location-route__desktop {
    display:none !important;
  }

  .location-route__mobile {
    display:inline !important;
  }

  /* Map: preserve the good narrow scroll corridors, but remove the
     oversized grey shell below the actual map. */
  .clinic-map-shell {
    position:relative !important;
    min-height:0 !important;
    height:auto !important;
    margin:14px 0 0 !important;
    padding:10px 8px !important;
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .clinic-map {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:clamp(300px,62vw,390px) !important;
    min-height:0 !important;
    max-height:390px !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:24px !important;
    background:#eef4f8 !important;
  }

  /* Controls stay over the map, taking shell padding into account. */
  .clinic-map-toolbar {
    right:20px !important;
    top:20px !important;
  }

  /* Remove the long legend row under the map on mobile. */
  .clinic-map-legend {
    display:none !important;
  }

  /* The previous M4 pseudo-spacers are no longer needed. */
  .clinic-map-shell::before,
  .clinic-map-shell::after {
    display:none !important;
    content:none !important;
  }
}

@media (max-width:374px) {
  .location-fact {
    padding:8px 0 !important;
  }

  .visit-tools__links {
    gap:7px !important;
  }

  .visit-tools__action,
  .visit-tools__links a {
    min-height:41px !important;
    padding-inline:7px !important;
    font-size:12.5px !important;
  }

  .clinic-map-shell {
    padding-inline:7px !important;
  }

  .clinic-map {
    height:300px !important;
  }
}


/* ==========================================================
   M5 — Footer responsive v5.0
   Desktop stays as the established multi-column footer.
   Mobile becomes a compact one-open-at-a-time accordion.
   ========================================================== */

.site-footer__mobile-brand,
.site-footer__heading-mobile,
.site-footer__accordion-icon {
  display:none;
}

.site-footer__accordion-toggle {
  display:block;
  width:100%;
  margin:0 0 14px;
  padding:0;
  border:0;
  color:#fff;
  background:transparent;
  text-align:left;
  font:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:default;
}

.site-footer__panel {
  display:block;
}

.site-footer__requisites-link {
  display:block;
  margin:8px 0;
  padding:0;
  border:0;
  color:#d5dde5;
  background:transparent;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.site-footer__legal-primary,
.site-footer__legal-actions {
  display:none;
}

.site-footer__legal-details {
  display:block;
}

@media (max-width:560px) {
  .site-footer {
    padding:28px 0 20px !important;
  }

  .site-footer__inner {
    width:calc(100% - 36px) !important;
  }

  .site-footer__mobile-brand {
    display:block;
    margin:0 0 22px;
    color:#fff;
    font-size:22px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.025em;
  }

  .site-footer__grid {
    display:block !important;
    margin:0 !important;
  }

  .site-footer__section {
    border-top:1px solid rgba(255,255,255,.13);
  }

  .site-footer__section:last-child {
    border-bottom:1px solid rgba(255,255,255,.13);
  }

  .site-footer__accordion-toggle {
    display:flex;
    min-height:52px;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 !important;
    padding:0 2px;
    cursor:pointer;
    font-size:12px !important;
    font-weight:800;
    letter-spacing:.065em;
    line-height:1.2;
  }

  .site-footer__accordion-toggle:focus-visible {
    outline:2px solid rgba(244,107,53,.75);
    outline-offset:-2px;
  }

  .site-footer__accordion-icon {
    display:inline-flex;
    width:26px;
    height:26px;
    flex:0 0 26px;
    align-items:center;
    justify-content:center;
    color:#d5dde5;
    font-size:22px;
    font-weight:400;
    line-height:1;
    transition:transform .22s ease,color .22s ease;
  }

  .site-footer__section.is-open .site-footer__accordion-icon {
    color:var(--orange);
    transform:rotate(45deg);
  }

  .site-footer__heading-desktop {
    display:none;
  }

  .site-footer__heading-mobile {
    display:inline;
  }

  .site-footer__panel {
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    opacity:0;
    transition:grid-template-rows .25s ease,opacity .2s ease,padding .25s ease;
  }

  .site-footer__panel > * {
    min-height:0;
  }

  .site-footer__section.is-open .site-footer__panel {
    grid-template-rows:1fr;
    opacity:1;
    padding:0 0 14px;
  }

  .site-footer__panel > a,
  .site-footer__requisites-link {
    margin:0 !important;
    padding:7px 2px !important;
    color:#cbd6df !important;
    font-size:15px !important;
    line-height:1.25;
  }

  .site-footer__two-col {
    display:block !important;
    min-height:0;
  }

  .site-footer__two-col > div {
    display:block;
  }

  .site-footer__socials {
    display:flex !important;
    flex-wrap:wrap;
    gap:10px 18px !important;
    margin-top:22px !important;
    padding-top:18px !important;
    border-top:0 !important;
  }

  .site-footer__socials a {
    margin:0 !important;
    font-size:14px;
  }

  .site-footer__legal {
    margin-top:18px !important;
    padding-top:17px !important;
    color:#aebbc6;
    font-size:12px !important;
    line-height:1.55;
  }

  .site-footer__legal-primary {
    display:block;
    margin-bottom:7px;
    color:#cbd6df;
    font-size:13px;
    font-weight:650;
  }

  .site-footer__legal-actions {
    display:flex;
    flex-wrap:wrap;
    gap:7px 14px;
    align-items:center;
  }

  .site-footer__legal-actions a,
  .site-footer__legal-actions button {
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    border:0;
    color:#aebbc6 !important;
    background:transparent;
    font:inherit;
    font-size:12px !important;
    text-decoration:none;
    cursor:pointer;
  }

  .site-footer__legal-actions button::before {
    content:"·";
    margin-right:14px;
    color:#71879a;
  }

  .site-footer__legal-details {
    display:none;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.10);
    color:#93a5b4;
    font-size:11.5px;
    line-height:1.55;
  }

  .site-footer__legal-details.is-open {
    display:block;
  }
}

@media (prefers-reduced-motion:reduce) {
  .site-footer__panel,
  .site-footer__accordion-icon {
    transition:none !important;
  }
}


/* ==========================================================
   M5.1 — Footer spacing + mobile Hero line cleanup
   ========================================================== */

@media (max-width:560px) {
  /* Footer: remove excessive empty vertical space between accordion rows. */
  .site-footer__grid {
    display:block !important;
  }

  .site-footer__section {
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .site-footer__accordion-toggle {
    min-height:48px !important;
    height:48px !important;
    margin:0 !important;
    padding:0 2px !important;
  }

  .site-footer__panel {
    margin:0 !important;
    padding:0 !important;
  }

  .site-footer__section.is-open .site-footer__panel {
    padding:0 0 10px !important;
  }

  .site-footer__section + .site-footer__section {
    margin-top:0 !important;
  }

  .site-footer__section::before,
  .site-footer__section::after {
    margin:0 !important;
  }

  .site-footer__socials {
    margin-top:16px !important;
  }

  .site-footer__legal {
    margin-top:14px !important;
  }
}

@media (max-width:767px) {
  /* Hero: decorative orange separator lines work on desktop,
     but create visual noise on narrow screens. */
  .hero-copy::before,
  .hero-copy::after,
  .hero-slide__copy::before,
  .hero-slide__copy::after,
  .hero-text::before,
  .hero-text::after,
  .hero-title::before,
  .hero-title::after,
  .hero-stage__copy::before,
  .hero-stage__copy::after,
  .hero-content::before,
  .hero-content::after,
  .hero-accent-line,
  .hero-line,
  .hero-copy__line,
  .hero-slide__line {
    display:none !important;
    content:none !important;
  }
}


/* ==========================================================
   M5.2 — exact footer collapse + exact Hero separator fix
   ========================================================== */

@media (max-width:560px) {
  /*
   * IMPORTANT:
   * The previous grid-template-rows:0fr approach could not collapse
   * .site-footer__panel because the panel contains several direct children,
   * creating implicit grid rows. They stayed in layout while invisible.
   * Use max-height instead so the whole panel is physically collapsed.
   */
  .site-footer__panel {
    display:block !important;
    max-height:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:max-height .28s ease, opacity .18s ease, padding .28s ease !important;
  }

  .site-footer__section.is-open .site-footer__panel {
    height:auto !important;
    max-height:700px !important;
    padding:0 0 10px !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .site-footer__section {
    display:block !important;
    min-height:0 !important;
    height:auto !important;
  }

  .site-footer__accordion-toggle {
    min-height:48px !important;
    height:48px !important;
  }

  /* No inherited spacing from desktop headings/panels. */
  .site-footer__section h3,
  .site-footer__directions > h3 {
    margin:0 !important;
  }
}

@media (max-width:767px) {
  /*
   * Actual Hero markup uses .title::before for the orange separator.
   * Hide that exact pseudo-element on mobile.
   */
  .hero .title::before,
  .hero__copy .title::before {
    display:none !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    background:none !important;
    content:none !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .site-footer__panel {
    transition:none !important;
  }
}


/* ==========================================================
   M5.3 — Mobile Hero separators aligned between text groups
   Restore orange separators without letting them affect layout.
   ========================================================== */

@media (max-width:767px) {
  /*
   * Mobile composition:
   * - no separator above the first phrase;
   * - one separator belongs to the second phrase, but is absolutely
   *   positioned in the fixed gap between the two text blocks;
   * - because it is absolute it never pushes either text block.
   */

  .hero .title::before,
  .hero__copy .title::before {
    display:none !important;
    content:"" !important;
  }

  .hero .title--2::before,
  .hero .title--4::before,
  .hero .title--6::before,
  .hero .title--8::before,
  .hero .title--10::before,
  .hero .title--12::before,
  .hero .title--14::before {
    position:absolute !important;
    display:block !important;
    content:"" !important;
    left:0 !important;
    top:-28px !important;
    width:48px !important;
    height:2px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:var(--orange) !important;
    opacity:.92 !important;
    transform:none !important;
    box-shadow:0 4px 12px rgba(243,107,59,.10) !important;
    pointer-events:none !important;
  }

  /* Explicit positions keep the two phrases stable regardless of line width. */
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 {
    top:82px !important;
  }

  .title--2,.title--4,.title--6,.title--8,.title--10,.title--12,.title--14 {
    top:178px !important;
  }
}

@media (max-width:374px) {
  .title--1,.title--3,.title--5,.title--7,.title--9,.title--11,.title--13 {
    top:78px !important;
  }

  .title--2,.title--4,.title--6,.title--8,.title--10,.title--12,.title--14 {
    top:170px !important;
  }

  .hero .title--2::before,
  .hero .title--4::before,
  .hero .title--6::before,
  .hero .title--8::before,
  .hero .title--10::before,
  .hero .title--12::before,
  .hero .title--14::before {
    top:-26px !important;
    width:44px !important;
  }
}