:root {
  --container-max: 1416px;
  --container-pad: 15px;

  --c-bg-gray: #f7f7f7;
  --c-white: #ffffff;
  --c-main: #113f36;
  --c-main-middle: #54988b;
  --c-accent: #78c9b9;
  --c-main-15: rgba(17, 63, 54, 0.15);
  --c-white-20: rgba(255, 255, 255, 0.2);
  --c-header-overlay: rgba(17, 63, 54, 0.6);
  --c-main-text: #2E3836;
  --c-text-gray: #808085;

  --ff-base: "Ubuntu", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-navigation: 14px;
  --fs-main-text: 18px;
  --fs-main-text-emph: 18px;
  --fs-button: 16px;
  --fs-label-mobile: 14px;
  --fs-h1: 28px;
  --fs-hero: 40px;
  --fs-logo: 23.29px;
  --fs-base: var(--fs-main-text);

  --lh-tight: 1.149em;
  --lh-normal: 1.2em;
  --lh-relaxed: 1.5em;
  --lh-base: var(--lh-relaxed);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-xxl: 48px;
  --r-button: 48px;
  --r-card: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-main);
  background-color: var(--c-bg-gray);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-gutter: stable;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

a:hover {
  color: var(--c-main-middle);
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

#doctor,
#services,
#about,
#why,
#contacts {
  scroll-margin-top: 110px;
}

:focus-visible {
  outline: none;
  outline-offset: 0;
}

.container {
  max-width: 1416px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.topbar {
  height: 85px;
  padding: 16px 48px;
  background-color: var(--c-header-overlay);
  color: var(--c-white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px); /* Safari */
  backdrop-filter: blur(10px);
}

.topbar .container {
  height: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.topbar__left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-white);
  text-decoration: none;
}

.topbar__logo-icon {
  width: 171px;
  height: 52px;
  flex: 0 0 auto;
}

.topbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-width: 0;
}

.topbar__right a:hover {
  color: var(--c-white);
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--c-white);
  text-decoration: none;
  white-space: nowrap;
}

.topbar__item .topbar__icon {
  width: 22px;
  height: 22px;
}

.topbar__item:hover {
  opacity: 0.8;
}

/* На средних экранах прячем адрес, чтобы навигация помещалась в строку */
@media (min-width: 1200px) and (max-width: 1439px) {
  .topbar__contact-address {
    display: none;
  }
}

.topbar__contact-phone span,
.topbar__contact-address span {
  font-weight: var(--fw-medium);
  font-size: 14px;
}

.topbar__item--icon {
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

.topbar__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.topbar__icon--instagram {
  width: 24px;
  height: 24px;
}

/* ===== Language dropdown ===== */
.topbar__lang-dropdown {
  position: relative;
  z-index: 30;
  width: 53px;
  flex: 0 0 53px;
}

.topbar__lang {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  width: 53px;
  height: 32px;
  padding: 0 8px;

  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-white);
  cursor: pointer;

  font-family: var(--ff-base);
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);

  transition:
    background-color 0.25s ease,
    border-radius 0.25s ease,
    color 0.2s ease;
}

.topbar__lang-current {
  display: inline-block;
  min-width: 18px;
  text-align: left;
}

.topbar__lang-dropdown.is-open .topbar__lang {
  width: 53px;
  height: 32px;
  padding: 10px 8px;
  justify-content: space-between;
  background: #0E332C;
  border-radius: 8px 8px 0 0;
}

.topbar__lang-dropdown.is-open .topbar__lang {
  background: #0E332C;
  border-radius: 8px 8px 0 0;
}

.topbar__lang-chevron {
  display: block;
  width: 9px;
  height: 6px;
  flex: 0 0 auto;

  transform: translateY(2px) rotate(0deg);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.topbar__lang-dropdown.is-open .topbar__lang-chevron {
  transform: translateY(0) rotate(180deg);
}

.topbar__lang-menu {
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 1100;
  width: 53px;
  padding: 0 0 8px;
  margin: 0;

  background: var(--c-main);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.topbar__lang-menu.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.topbar__lang-dropdown.is-open .topbar__lang-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0s linear 0s;
}

.topbar__lang-option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 8px;

  border: 0;
  background: var(--c-main);
  color: var(--c-white);
  cursor: pointer;
  text-align: left;

  font-family: var(--ff-base);
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);

  transition: background-color 0.16s ease;
  text-decoration: none;
}

.topbar__lang-option:hover,
.topbar__lang-option:focus-visible {
  background: #0E332C;
  outline: none;
}

:root {
  --header-reveal-shift: 0px;
}

.topbar__contact-trigger--mobile {
  display: none;
}

.topbar__contact-trigger {
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--c-white);
  flex: 0 0 auto;
}

.topbar__reveal {
  display: none;
}

.section-title {
  font-family: var(--ff-base);
  font-size: 32px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--c-main);
}

.topbar__menu-btn,
.hero__mobile-logo,
.mobile-menu {
  display: none;
}


body.menu-open {
  overflow: hidden;
}

.topbar__menu-btn {
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--c-white);
}

.topbar__menu-btn img {
  width: 24px;
  height: 24px;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(17, 63, 54, 0.45);
  opacity: 0;
  transition: opacity 0.34s ease;
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  height: 100dvh;
  width: min(380px, 80vw);
  background: #f7f7f7;
  color: var(--c-main);
  transform: translateX(-102%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 28px;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge legacy */
}

.mobile-menu__panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mobile-menu.is-open,
.mobile-menu.is-closing {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu.is-open .mobile-menu__overlay {
  opacity: 1;
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}

.mobile-menu__logo {
  width: 142px;
  height: auto;
}

.mobile-menu__close {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;

  color: #B7B7B7;
}

.mobile-menu__close:hover {
  color: var(--c-main-middle);
}

.mobile-menu__close-icon {
  display: block;
}

.mobile-menu__nav {
  margin-bottom: 40px;
}

.mobile-menu__nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-menu__nav-link {
  display: inline-flex;
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  text-decoration: none;
  color: var(--c-text-gray);
}

.mobile-menu__contacts {
  padding-top: 20px;
  border-top: 3px solid var(--c-white);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-menu__contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.line-bottom {
  padding-bottom: 20px;
  border-bottom: 3px solid var(--c-white);
}

.mobile-menu__contact-label {
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-main-text);
}

.mobile-menu__contact-value,
.mobile-menu__address {
  font-size: 18px;
  line-height: 1.45;
  color: var(--c-text-gray);
  text-decoration: none;
  font-style: normal;
}

.mobile-menu__schedule {
  margin: 0;
  display: grid;
  gap: 4px;
}

.mobile-menu__schedule-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}

.mobile-menu__schedule dt,
.mobile-menu__schedule dd {
  margin: 0;
  line-height: var(--lh-relaxed);
  font-size: 16px;
  color: var(--c-text-gray);
}

.mobile-menu__schedule dt {
  font-weight: var(--fw-regular);
  justify-self: start;
}

.mobile-menu__schedule dd {
  font-weight: var(--fw-medium);
  justify-self: end;
}

.mobile-menu__map-wrap {
  width: 100%;
  height: 118px;
  border-radius: 16px;
  overflow: hidden;
  background: #e9e9e9;
}

.mobile-menu__map-wrap iframe {
  width: 100%;
  height: 118px;
  border: 0;
  display: block;
}

.mobile-menu__social {
  padding-top: 18px;
  display: flex;
  justify-content: center;
}

.mobile-menu__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-wrap {
  position: relative;
  background-image:
    linear-gradient(
      100deg,
      rgba(17, 63, 54, 0.94) 0%,
      rgba(17, 63, 54, 0.88) 34%,
      rgba(17, 63, 54, 0.55) 62%,
      rgba(17, 63, 54, 0.34) 100%
    ),
    url("../assets/img/hero-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right center;
}
.hero {
  position: relative;
  min-height: 250px;
  padding-top: 150px;
  padding-bottom: 64px;

  overflow: visible;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  --hero-gap: 64px;
  gap: var(--hero-gap);
}

.hero__decoration {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
  z-index: 3;

  width: 906px;
  height: 40px;
  max-width: 100%;

  pointer-events: none;
  display: block;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

/* Навигация внутри топбара — одна строка с контактами и языком */
.hero-nav {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.hero-nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
  margin: 0;
  padding: 0;
}

.hero-nav__link {
  font-size: 14px;
  font-weight: 600;
  line-height: var(--lh-tight);
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease;
  padding: 4px 0;
  white-space: nowrap;
}

.hero-nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #78c9b9;
  transition: width 0.25s ease;
}

.hero-nav__link:hover {
  color: #ffffff;
}

.hero-nav__link:hover::after {
  width: 100%;
}

.hero-nav__link--active {
  color: #ffffff;
}

.hero-nav__link--active::after {
  width: 100%;
}

@media (max-width: 1500px) {
  .hero-nav__list {
    gap: 16px;
  }

  .hero-nav__link {
    font-size: 13px;
  }
}

.hero__title {
  max-width: 820px;
  margin: 0 auto;
  font-size: 52px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-align: center;
  color: var(--c-white);
}

.hero__subtitle {
  /* держим 20px до заголовка независимо от текущего gap */
  margin-top: calc(20px - var(--hero-gap, 64px));
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: rgba(255,255,255,0.75);
  text-align: center;
  letter-spacing: 0.5px;
}

.hero__decoration {
  width: min(100%, 906px);
  margin: 0 auto;
}

.doctor {
  padding-top: 88px;
  padding-bottom: 88px;
}

.doctor__title {
  text-align: center;
}

.doctor__mobile-actions,
.doctor-card__more-icon {
  display: none;
}

.doctor-card {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1194px;
  margin: 48px auto 0;
  padding-bottom: 48px;
  border-radius: var(--r-xxl);
  background-color: var(--c-white);
  border-bottom: 1px solid #e0e0e0;
}

.doctor-card__media {
  flex: 0 0 458px;
  position: relative;
  width: 458px;
  height: 458px;
  border-radius: 20px;
  overflow: hidden;
}

.doctor-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

#doctor-jiri .doctor-card__media img {
  object-fit: cover;
  object-position: center center;
}

#doctor-kiryl .doctor-card__media img {
  object-position: center center;
}

.doctor-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-repeat: no-repeat;
}

.edge-decor--all::after {
  background-image:
    url("../assets/icons/benefits-edge-top.svg"),
    url("../assets/icons/benefits-edge-bot.svg"),
    url("../assets/icons/benefits-edge-left.svg"),
    url("../assets/icons/benefits-edge-right-white.svg");

  /* можно отдельно двигать по X и по Y */
  background-position:
    var(--edge-x, 50%) 0,
    var(--edge-x, 50%) 100%,
    0 var(--edge-y, 50%),
    100% var(--edge-y, 50%);
}

.doctor-card__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  width: 100%;
  padding-right: 32px;
}

.doctor-card__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doctor-card__header-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doctor-card__name {
  margin: 0;
  font-size: 26px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--c-main);
}

.doctor-card__degree,
.doctor-card__specialty {
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-main-text);
}

.doctor-card__contact,
.doctor-card__city {
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
}

.doctor-card__details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doctor-card__row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.doctor-card__row-icon {
  flex: 0 0 auto;
  opacity: 0.9;
}

.doctor-card__contact {
  text-decoration: none;
}

.doctor-card__contact:hover {
  color: var(--c-main-middle);
}

.doctor-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 75px;
}

.doctor-card__actions .btn {
  width: 100%;
  gap: 15px;
}

.doctor-card__more {
  position: relative;
  justify-content: center;
}

.doctor-card__arrow {
  width: 24px;
  height: 24px;
}

.doctor-page {
  padding-top: 133px;
  padding-bottom: 88px;
}

.breadcrumbs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-navigation);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--c-text-gray);
}

.breadcrumbs__item:not(:last-child)::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("../assets/icons/icon-arrow-gray.svg") no-repeat center / 24px 24px;
}

.breadcrumbs__link {
  color: inherit;
  text-decoration: none;
}

.doctor-page__profile {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 88px;
}

.doctor-card--profile {
  margin-top: 0;
}

.doctor-page__profile .doctor-card {
  align-items: normal;
  width: 100%;
}

.doctor-card--profile .doctor-card__content {
  padding-top: 24px;
  padding-bottom: 24px;
}

.doctor-card--profile .doctor-card__actions {
  margin-top: auto;
}

.doctor-card--profile .doctor-card__actions .btn {
  max-width: 100%;
}

.doctor-page__profile .doctor-page__cta {
  display: none;
  width: 100%;
}

.service-page {
  padding-top: 133px;
  padding-bottom: 88px;
}

.service-page__breadcrumbs {
  margin-bottom: 48px;
}

.breadcrumbs__back {
  display: none;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-size: var(--fs-navigation);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--c-main);
  text-decoration: none;
}

.breadcrumbs__back img {
  width: 24px;
  height: 24px;
  transform: rotate(180deg);
}

.service-page__hero {
  display: grid;
  grid-template-columns: minmax(458px, 459px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 88px;
}

.service-page__media {
  max-width: 458px;
  max-height: 459px;
  border-radius: var(--r-card);
  overflow: hidden;
}

.service-page__media img {
  width: 100%;
  min-height: 100%;
  aspect-ratio: 458 / 459;
  object-fit: cover;
}

.service-page__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-page__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-page__title {
  font-size: 40px;
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: var(--c-main);
}

.service-page__price {
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--c-main);
}

.service-page__details {
  display: flex;
  flex-direction: column;
}

.service-page__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 3px solid var(--c-main-15);
}

.service-page__block + .service-page__block {
  padding-top: 24px;
}

.service-page__subtitle {
  font-size: var(--fs-main-text-emph);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--c-main);
}

.service-page__block p,
.service-page__list {
  font-size: var(--fs-main-text);
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
}

.service-page__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 22px;
}

.service-page__actions {
  display: flex;
  justify-content: center;
  margin-bottom: 88px;
}

.service-page__cta {
  min-width: 224px;
}

.service-page .services {
  padding-bottom: 0;
}

.service-page .services__title {
  padding-bottom: 24px;
}

.cv {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1194px;
  margin: 0 auto;
}

.cv__section {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--c-main-15);
}

.cv__title {
  font-size: var(--fs-main-text-emph);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--c-main);
}

.cv__content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cv__item {
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
}

.cv__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
}

.cv__toggle::after {
  content: "";
  width: 24px;
  height: 24px;
  background: url("../assets/icons/icon-arrow-down-gray.svg") no-repeat center / 24px 24px;
}

.services {
  padding-bottom: 88px;
}

.services__title {
  text-align: center;
  padding-bottom: 20px;
}

.services__grid {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: 0;

  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.services__item {
  border-bottom: 2px solid var(--c-main-15);
}

.services__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  color: var(--c-main);
  font-size: var(--fs-main-text-emph);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  text-decoration: none;
}

.services__link img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.services__link:hover {
  color: var(--c-main-middle);
}

.about {
  padding-bottom: 88px;
}

.about__title {
  text-align: center;
}

.about__layout {
  display: grid;
  grid-template-columns: 827px minmax(0, 1fr);
  gap: 32px;
  max-width: 100%;
  margin: 40px auto 0;
}

.about__media {
  position: relative;
}

.about .splide__slide img {
  width: 827px;
  height: 500px;
  border-radius: var(--r-md);
  object-fit: cover;
}

.about .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-main-15);
  border-radius: 50%;
  background-color: var(--c-white-20);
}

.about .splide__arrow--next {
  right: 16px;
}

.about .splide__arrow--prev {
  display: none;
}

.about .splide__arrow svg {
  display: none;
}

.about .splide__arrow--next::before {
  content: "";
  width: 12px;
  height: 10px;
  background: url("../assets/icons/slider-arrow-right.svg") no-repeat center;
  opacity: 1;
}

.about .splide__pagination {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.about .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--c-white-20);
  opacity: 1;
}

.about .splide__pagination__page.is-active {
  background-color: var(--c-white);
  transform: none;
}

.about__content {
  display: flex;
  align-items: center;
}

.about__content p {
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-main-text);
}

.why {
  padding-bottom: 88px;
}

.why__title {
  text-align: center;
}

.why__panel {
  position: relative;
  max-width: 1416px;
  margin: 40px auto 0;
  padding: 48px;
  border-radius: var(--r-xl);
  background-color: var(--c-main);
}

.why__panel::before,
.why__panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.why__panel::before {
  top: 81px;
  left: 0;
  background-image: url("../assets/icons/benefits-edge-left.svg");
}

.why__panel::after {
  top: 81px;
  right: 0;
  background-image: url("../assets/icons/benefits-edge-right.svg");
}

.why__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.why__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 0 20px;
}

.why__item + .why__item {
  border-left: 2px solid var(--c-white-20);
}

.why__icon {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
}

.why__text {
  font-size: var(--fs-main-text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-white);
}

.health {
  padding-bottom: 88px;
}

.health__card {
  width: 100%;
  max-width: 1416px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 569px minmax(0, 1fr);
  gap: 32px;
  border-radius: var(--r-xl);
  background-color: var(--c-white);
}

.health__photo {
  overflow: hidden;
  border-radius: 24px 0 0 24px;
}

.health__photo img {
  width: 569px;
  height: 524px;
  object-fit: cover;
}

.health__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.health__title {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  text-align: center;
  color: var(--c-main);
}

.health__preview {
  width: 100%;
  max-width: 783px;
  height: auto;
  object-fit: contain;
}

.health__btn {
  width: 304px;
  min-height: 44px;
  border-radius: var(--r-button);
  background-color: var(--c-main);
  color: var(--c-white);
  gap: 16px;
}

.health__btn:hover {
  background-color: var(--c-main-middle);
  color: var(--c-white);
}

.health__btn img {
  width: 24px;
  height: 24px;
}

.site-footer {
  padding-bottom: 40px;
  background-color: var(--c-bg-gray);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  grid-template-areas: "contacts links blog"
}

.footer__column--contacts { grid-area: contacts; }
.footer__column--links    { grid-area: links; }
.footer__column--blog     { grid-area: blog; }

.footer__column {
  min-width: 0;
}

.footer__column--contacts {
  min-width: 0;
  max-width: 406px;
}

.footer__title {
  margin: 0 0 28px;
  font-size: 24px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--c-main);
}

.footer__contacts-group {
  margin-bottom: 18px;
}

.footer__label {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--c-main);
}

.footer__contacts-group--line {
  padding-bottom: 14px;
  border-bottom: 3px solid var(--c-main-15);
}

.footer__value {
  margin: 0;
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-main);
}

.footer__value a {
  color: var(--c-main);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.footer__value a:hover {
  color: var(--c-main-middle);
}

.footer__schedule {
  margin: 0;
  display: grid;
  gap: 6px;
}

.footer__schedule-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
}

.footer__schedule dt,
.footer__schedule dd {
  margin: 0;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
}

.footer__schedule dt {
  font-size: var(--fs-main-text);
}

.footer__schedule dd {
  font-size: 20px;
}

.footer__address {
  margin: 0 0 12px;
  font-style: normal;
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-main);
}

.footer__map-wrap {
  width: 250px;
  height: 118px;
  overflow: hidden;
  border-radius: 24px;
  background: #e9e9e9;
}

.footer__map-wrap iframe {
  width: 250px;
  height: 118px;
  border: 0;
  display: block;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links a {
  font-size: var(--fs-main-text);
  line-height: var(--lh-relaxed);
  text-decoration: none;
}

.footer__instagram-icon {
  margin-top: 8px;
  width: 32px;
  height: 32px;
}

.footer__articles {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

.footer__article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

.footer__article img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  object-fit: cover;
}

.footer__article-title {
  font-size: var(--fs-main-text);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--c-main);
}

.footer__article-text {
  font-size: 16px;
  line-height: var(--lh-relaxed);
  color: var(--c-main-text);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 40px;
  text-align: center;
}

.footer__to-top {
  min-width: 168px;
  margin-bottom: 32px;
}

.footer__to-top img {
  width: 24px;
  height: 24px;
}

.footer__logo {
  width: 122px;
  height: 38px;
  margin-bottom: 32px;
}

.footer__legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 12px;
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.footer__legal:hover {
  color: var(--c-main);
}

.footer__legal img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.footer__copyright {
  margin: 0;
  font-size: 12px;
  line-height: var(--lh-relaxed);
  color: var(--c-text-gray);
}

.footer__copyright-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.floating-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 16px;
  bottom: 100px;
  z-index: 120;

  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.2s ease, filter 0.2s ease;
}

/* A static PNG parked in the corner reads as page furniture — the eye files it
   next to the cookie banner and stops seeing it. A slow halo pushing outward
   every few seconds restores the one thing it needs: looking live. Slow and
   sparse on purpose; a fast pulse reads as an ad and gets ignored twice as
   hard. */
.floating-cta::before,
.floating-cta::after {
  content: '';
  position: absolute;
  /* Starts outside the disc, not inside it: the halo has to be the bigger
     shape or it is hidden behind the thing it is announcing. */
  inset: -10px;
  border-radius: 50%;
  background: rgba(120, 201, 185, 0.42);
  animation: floating-cta-halo 3.4s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Second ring, half a cycle behind, so the pulse never fully stops. */
.floating-cta::after {
  animation-delay: 1.7s;
  background: rgba(120, 201, 185, 0.30);
}

@keyframes floating-cta-halo {
  0%   { transform: scale(0.82); opacity: 0.7; }
  70%  { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(1.85); opacity: 0; }
}

.floating-cta:hover {
  transform: scale(1.07);
  filter: drop-shadow(0 8px 22px rgba(17, 63, 54, 0.34));
}

.floating-cta:active { transform: scale(1.01); }

.floating-cta:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Anyone who has asked their system to stop moving things gets a still button
   that still looks pressable. */
@media (prefers-reduced-motion: reduce) {
  .floating-cta::before,
  .floating-cta::after { animation: none; opacity: 0; }
  .floating-cta:hover { transform: none; }
}

.floating-cta__bg {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.floating-cta__label {
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);

  max-width: 66px;
  text-align: center;
  pointer-events: none;
  user-select: none;

  color: #fff;
  font-family: var(--ff-base);
  font-size: 11px;
  line-height: 1.15;
  font-weight: var(--fw-light);
  line-height: 1.1;
  letter-spacing: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 10px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-button);
  font-family: var(--ff-base);
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background-color: var(--c-main);
  border-color: var(--c-main);
  color: var(--c-white);
}

.btn--primary:hover {
  background-color: var(--c-main-middle);
  border-color: var(--c-main-middle);
  color: var(--c-white);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--c-main);
  color: var(--c-main);
}

.btn--outline:hover {
  background-color: var(--c-main-15);
  border-color: var(--c-main-middle);
  color: var(--c-main);
}

.btn:focus-visible {
  outline-color: var(--c-accent);
}

.link-reset {
  color: inherit;
  text-decoration: none;
}

.link-reset:hover {
  color: var(--c-main-middle);
  text-decoration: underline;
}

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Doctor bio block ===== */
.doctor-card__bio {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-main-text);
}

.doctor-card__bio strong {
  color: var(--c-main);
  font-weight: var(--fw-bold);
}

.doctor-card__facts {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.doctor-card__facts li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-main-text);
  padding-left: 4px;
}

.doctor-card__exp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 40px;
  background: var(--c-main);
  color: var(--c-white);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}

/* ===== Services prices ===== */
.services__note,
.services__surgery-note {
  margin-bottom: 24px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  background-color: rgba(17, 63, 54, 0.06);
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-main-text);
}

.services__surgery-note {
  margin-top: 24px;
  margin-bottom: 0;
}

.services__surgery-note a {
  color: var(--c-main);
  font-weight: var(--fw-semibold);
}

.services__item--featured .services__link {
  font-weight: var(--fw-bold);
  border-bottom: 3px solid var(--c-main);
}

.services__main-label {
  display: block;
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--c-main);
}

.services__main-sub {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-regular);
  color: var(--c-text-gray);
  margin-top: 2px;
}

.services__price {
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-main);
  white-space: nowrap;
}

.services__price-from {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: var(--fw-semibold);
  color: var(--c-main-middle);
  white-space: nowrap;
}

.services__item-sub {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-regular);
  color: var(--c-text-gray);
  margin-top: 2px;
}

/* ===== FAQ section ===== */
.faq {
  padding-bottom: 88px;
}

.faq__title {
  text-align: center;
  margin-bottom: 40px;
}

.faq__list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 2px solid var(--c-main-15);
  overflow: hidden;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--ff-base);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--c-main);
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq__question:hover {
  color: var(--c-main-middle);
}

.faq__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.faq__item.is-open .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s ease;
}

.faq__item.is-open .faq__answer {
  max-height: 600px;
}

.faq__answer-inner {
  padding-bottom: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-main-text);
}

.faq__answer-inner a {
  color: var(--c-main);
  font-weight: var(--fw-semibold);
}

.faq__answer-inner strong {
  font-weight: var(--fw-bold);
  color: var(--c-main);
}

/* ===== Appointment note ===== */
.appointment-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  margin: 0 auto 0;
  max-width: 600px;
  border-radius: 40px;
  background: var(--c-main);
  color: var(--c-white);
  font-size: 16px;
  font-weight: var(--fw-medium);
  text-align: center;
}

.doctor-card__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

/* ===== Appointment Modal ===== */
.appointment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: none;
  border-radius: 0;
  background: transparent;
  z-index: 1000;
}

.appointment-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-out;
}

.appointment-modal__content {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: auto;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease-out;
  z-index: 1001;
}

.appointment-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e8e8e8;
}

.appointment-modal__header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--c-main);
}

.appointment-modal__close {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.appointment-modal__close:hover {
  color: var(--c-main);
}

/* ===== Appointment Form ===== */
.appointment-form {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--c-main);
}

.form-group input,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(120, 201, 185, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.appointment-form__messages {
  min-height: 24px;
  margin: 8px 0;
}

.appointment-form__error {
  padding: 12px;
  background-color: #fee;
  border-left: 4px solid #f44;
  color: #c33;
  font-size: 13px;
  border-radius: 4px;
  animation: slideDown 0.3s ease-out;
}

.appointment-form__success {
  padding: 12px;
  background-color: #efe;
  border-left: 4px solid #4a4;
  color: #3a3;
  font-size: 13px;
  border-radius: 4px;
  animation: slideDown 0.3s ease-out;
}

.appointment-form__submit {
  padding: 12px 24px;
  margin-top: 8px;
  background-color: var(--c-main);
  color: var(--c-white);
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all 0.3s;
}

.appointment-form__submit:hover:not(:disabled) {
  background-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(17, 63, 54, 0.2);
}

.appointment-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Topbar Appointment Button ===== */
.topbar__appointment-btn {
  display: none !important;
}

/* ===== CTA-кнопка в информационном блоке ===== */
.info-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 14px 34px;
  border-radius: 48px;
  background: linear-gradient(135deg, #78c9b9 0%, #54988b 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(17, 63, 54, 0.22);
}

.info-cta__btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(17, 63, 54, 0.3);
}

.info-cta__phone {
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .info-cta__btn {
    width: 100%;
    padding: 13px 18px;
    font-size: 15px;
    gap: 6px;
  }
}

/* ===== Footer Appointment Button ===== */
.footer__appointment-btn {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  width: 100%;
  text-align: center;
  display: inline-block;
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== Mobile Responsive ===== */
@media (max-width: 767px) {
  .appointment-modal__content {
    max-width: calc(100% - 40px);
  }

  .appointment-modal__header h2 {
    font-size: 18px;
  }

  .appointment-form {
    padding: 16px;
    gap: 12px;
  }

  .form-group input,
  .form-group textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ===== Clinic Rules Modal ===== */
.clinic-rules-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.clinic-rules-modal[aria-hidden="true"] {
  display: none;
}

.clinic-rules-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.clinic-rules-content {
  position: relative;
  background: white;
  border-radius: 24px;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 40px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.clinic-rules-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-main);
  transition: color 0.2s, transform 0.2s;
  padding: 0;
  z-index: 10;
}

.clinic-rules-close:hover {
  color: var(--c-accent);
  transform: scale(1.1);
}

.clinic-rules-close svg {
  width: 24px;
  height: 24px;
}

.clinic-rules-title {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--c-main);
  margin: 0 0 32px 0;
  line-height: 1.3;
}

.clinic-rules-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.clinic-rules-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clinic-rules-section h2 {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--c-main);
  margin: 0;
}

.clinic-rules-section p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-main-text);
  margin: 0;
}

.clinic-rules-list {
  margin: 0;
  padding-left: 20px;
  list-style: none;
}

.clinic-rules-list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-main-text);
  margin-bottom: 8px;
}

.clinic-rules-footer-text p {
  text-align: center;
  color: var(--c-text-gray);
  font-size: 12px;
}

.footer__legal {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer__legal:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .clinic-rules-content {
    padding: 32px 24px;
  }

  .clinic-rules-title {
    font-size: 22px;
  }

  .clinic-rules-section h2 {
    font-size: 16px;
  }

  .clinic-rules-section p {
    font-size: 13px;
  }

}

/* Appointment Modal */
.appointment-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  /* flex-start + margin:auto on the content keeps it centred when it fits but
     lets it scroll when the booking widget is taller than the viewport.
     With align-items:center the overflowing top was unreachable. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
}

.appointment-modal[aria-hidden="true"] {
  display: none;
}

.appointment-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.appointment-modal__content {
  position: relative;
  background: transparent;
  width: min(100%, 500px);
  height: auto;
}

.appointment-modal__close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-main);
  transition: color 0.2s, transform 0.2s;
  padding: 0;
  z-index: 10000;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.appointment-modal__close:hover {
  transform: scale(1.1);
}

.appointment-modal__content iframe {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  min-height: 700px;
  border: none;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .appointment-modal {
    padding: 16px;
  }

  .appointment-modal__content {
    width: 100%;
    /* The mobile rule further up still caps this at calc(100% - 40px), left
       over from when the modal had its own white card and padding around the
       form. The content is the booking widget itself now, so those 40px came
       straight out of the form: on a 375px phone it was rendering at 271px and
       the service name and doctors' names were clipped mid-word. */
    max-width: 100%;
    max-height: calc(100vh - 32px);
  }

  .appointment-modal__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
}

/* ===== Cookie Consent Banner ===== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-white);
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 1.5;
  animation: slideUp 0.3s ease-out;
}

.cookie-banner[aria-hidden="true"] {
  display: none;
}

.cookie-banner__content {
  flex: 1;
}

.cookie-banner__text {
  margin: 0;
  color: var(--c-main-text);
}

.cookie-banner__link {
  color: var(--c-main);
  text-decoration: underline;
  cursor: pointer;
}

.cookie-banner__link:hover {
  text-decoration: none;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.cookie-banner__btn--accept {
  background: var(--c-main);
  color: var(--c-white);
}

.cookie-banner__btn--accept:hover {
  background: var(--c-main-middle);
  transform: scale(1.05);
}

.cookie-banner__btn--decline {
  background: var(--c-bg-gray);
  color: var(--c-main-text);
  border: 1px solid #ddd;
}

.cookie-banner__btn--decline:hover {
  background: #f0f0f0;
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__btn {
    flex: 1;
  }
}

/* ===== Заметка под CTA в информационном блоке ===== */
.info-cta__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5b57;
}

/* ===== Направления лечения (SEO-блок) ===== */
.services__areas {
  max-width: 700px;
  margin: 40px auto 0;
  padding: 28px;
  background: #f7faf9;
  border: 1px solid #e3efeb;
  border-radius: 12px;
}

.services__areas-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #113f36;
  text-align: center;
}

.services__areas-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.services__areas-list li {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #d8e8e3;
  border-radius: 24px;
  font-size: 14px;
  line-height: 1.4;
  color: #2E3836;
}

/* Ключевые направления — визуальный акцент */
.services__areas-list li.is-key {
  background: linear-gradient(135deg, #78c9b9 0%, #54988b 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
}

/* Подпись в карточке основателя */
.doctor-card__signature {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(17, 63, 54, 0.12);
}

.doctor-card__signature-brand {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-main);
  letter-spacing: 0.2px;
}

.doctor-card__signature-exp {
  margin: 6px 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text-gray);
}

.doctor-card__signature-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-main);
  text-decoration: none;
  transition: color 0.2s ease;
}

.doctor-card__signature-phone::before {
  content: '📞';
  font-size: 16px;
}

.doctor-card__signature-phone:hover {
  color: var(--c-main-middle);
}

/* Строка «координирует лечение + языки» под должностью основателя */
.doctor-card__langs {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-gray);
}

/* ===== Телефонная консультация ===== */
.phone-consult {
  max-width: 700px;
  margin: 28px auto 0;
  padding: 26px 28px;
  background: linear-gradient(135deg, #f0f9f7 0%, #e8f5f2 100%);
  border-left: 4px solid #78c9b9;
  border-radius: 8px;
}

.phone-consult__title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-main);
}

.phone-consult__lead {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-main-text);
}

.phone-consult__list {
  margin: 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-main-text);
}

.phone-consult__list li { margin-bottom: 9px; }
.phone-consult__list li:last-child { margin-bottom: 0; }
.phone-consult__list strong { color: var(--c-main); }

.phone-consult__list a {
  color: var(--c-main);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .phone-consult { padding: 20px 18px; }
  .phone-consult__title { font-size: 17px; }
}

/* «Ближайшая запись» — кликабельная кнопка, открывает виджет с предвыбором */
/* The four claims that decide whether a visitor stays, on the one screen
   everybody sees. Chips rather than a paragraph: at a glance they read as four
   facts, where a paragraph here would be read by nobody. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.25;
}

.hero__facts span { font-size: 14px; line-height: 1; }

@media (max-width: 670px) {
  .hero__facts { gap: 6px; margin-top: 14px; }
  .hero__facts li { padding: 6px 11px; font-size: 12px; }
}

/* The single highest-intent thing on the page: it does not ask the visitor to
   want an appointment, it tells them one is free tomorrow at 16:20. It was
   styled as a white info chip with a hairline border — the visual language of
   a caption, something to read past. Anyone who wanted that slot had to guess
   it was clickable.

   So it is dressed as what it is: a filled button in the brand green, with the
   time in white and an arrow that leans forward on hover. It outranks the
   outline buttons around it deliberately. */
.next-slot {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #135045 0%, #113f36 100%);
  border: 0;
  font-family: inherit;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 63, 54, 0.24);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.next-slot:not([hidden]) { display: inline-flex; }

.next-slot:hover {
  box-shadow: 0 10px 26px rgba(17, 63, 54, 0.32);
  transform: translateY(-2px);
}

.next-slot:active { transform: translateY(0); }

.next-slot:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}

/* Hero variant. The base .next-slot is drawn for a light panel; on the hero's
   dark ground it needs its own fill and a light label, and it should read as
   the most important control on the screen, not as a chip among the facts. */
.next-slot--hero {
  margin: 22px auto 0;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.next-slot--hero:hover {
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.next-slot--hero .next-slot__label {
  color: #4a6a62;
}

.next-slot--hero .next-slot__value,
.next-slot--hero .next-slot__cta {
  color: #113f36;
}

/* The base dot is a pale mint that carries on the dark green fill and vanishes
   on this white one. Same signal, enough weight to survive the light card. */
.next-slot--hero .next-slot__value::before {
  background: #0ca678;
  box-shadow: 0 0 0 3px rgba(12, 166, 120, 0.18);
}

@media (max-width: 670px) {
  .next-slot--hero {
    margin-top: 16px;
    padding: 11px 18px;
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
}

.next-slot__label {
  color: rgba(255, 255, 255, 0.78);
}

.next-slot__value {
  font-weight: 700;
  color: #ffffff;
}

/* The dot says "free right now" — it belongs to the time, not to the label. */
.next-slot__value::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #6ee7b7;
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.25);
  vertical-align: middle;
}

.next-slot__cta {
  font-weight: 700;
  color: var(--c-accent);
  white-space: nowrap;
  transition: transform 0.2s ease;
}

.next-slot:hover .next-slot__cta { transform: translateX(3px); }

/* In-card variant. The header block above it is left-aligned, so the pill is
   too — centring it under a left-aligned name reads as a stray element. It also
   sits full width on a phone, where a shrink-to-fit pill next to a long doctor
   name wrapped onto three lines. */
.next-slot--doctor {
  margin: 16px 0 0;
  align-self: flex-start;
  font-size: 14px;
  padding: 11px 20px;
  justify-content: flex-start;
}

@media (max-width: 670px) {
  .next-slot--doctor {
    width: 100%;
    justify-content: center;
  }
}

/* ── Hero copy to the left, doctor to the right ─────────────────────────────
   The banner puts him in the right half with the instrument table empty on the
   left. Centred text landed across his chest and face; moved left it sits in
   the part of the frame that has nothing in it, and the gradient above is
   densest exactly there. */
@media (min-width: 768px) {
  .hero .container.hero__content {
    align-items: flex-start;
    text-align: left;
    max-width: 640px;
    /* .container sets `margin: 0 auto`, which re-centred the narrowed column. */
    margin-left: max(24px, calc((100vw - 1416px) / 2 + 15px));
    margin-right: auto;
  }

  .hero__title,
  .hero__subtitle {
    text-align: left;
  }

  .hero__title {
    font-size: clamp(30px, 3.35vw, 50px);
  }

  .hero__facts {
    justify-content: flex-start;
  }

  .next-slot--hero {
    margin-left: 0;
    margin-right: auto;
  }
}

/* The hard break in the Czech headline is for the wide layout. On a phone the
   column is narrow enough that the line breaks there anyway, and keeping the
   <br> would only add an empty line under a one-word tail. */
@media (max-width: 400px) {
  .hero__title br { display: none; }
}

/* ── Brand above the headline ───────────────────────────────────────────────
   The name of the clinic, in the accent colour, ahead of the doctor's name.
   Hidden below 768px: the phone hero already shows the full logo, and two
   brand marks stacked would just push the copy further down. */
.hero__brand {
  display: none;
}

@media (min-width: 768px) {
  .hero__brand {
    display: block;
    /* Cancel the column gap: the brand belongs to the headline, not beside it. */
    margin: 0 0 calc(12px - var(--hero-gap, 64px));
    font-size: 17px;
    font-weight: var(--fw-semibold, 600);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-accent);
  }

  .hero__brand span {
    font-weight: var(--fw-regular, 400);
    letter-spacing: 0.16em;
    opacity: 0.85;
  }
}

/* ── Preparation note on the price row ──────────────────────────────────────
   Patients were arriving without a full bladder, which means the ultrasound
   cannot be done and the visit has to be repeated. The instruction existed —
   nine screens down, in the "how the visit goes" section. Here it sits on the
   line people read before booking: the examination that includes the scan. */
.services__prep-note {
  flex-basis: 100%;
  margin: 10px 0 0;
  padding: 9px 13px;
  border-radius: 10px;
  border-left: 3px solid #d98324;
  background: rgba(217, 131, 36, 0.10);
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--fw-medium, 500);
  color: var(--c-main, #113f36);
}

@media (max-width: 670px) {
  .services__prep-note {
    font-size: 13px;
    padding: 8px 11px;
  }
}