/* ---------------------------------------------------------------- hero
   Two zones instead of three vertical stripes: the portrait fills the left
   side and reaches the bottom line of the orange panel, the right side
   carries the name, the lede, the practical lines, the actions and the
   panel. The panel sits inside the hero flow, so nothing is positioned
   absolutely and nothing reserves height for it any more. */
.hero-section {
  background: #f6efe8;
}

.hero-shell {
  padding-top: clamp(0.5rem, 1.6vw, 1.75rem);
  padding-bottom: var(--section-gap-edit);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  /* Explicit rows: the photo spans them with grid-row 1 / -1, which only
     resolves against the explicit grid. */
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(1.5rem, 0.5rem + 2.4vw, 3.5rem);
  align-items: start;
}

/* Spanning every row is what puts the bottom of the photo on the same
   horizontal as the bottom of the panel, without padding the panel out. */
.hero-media {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: stretch;
  overflow: hidden;
  border-radius: var(--wp--preset--radius--md);
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 38% 62%;
}

.hero-intro {
  grid-column: 2;
  grid-row: 1;
}

.hero-title {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 800;
}

.hero-title__lead {
  display: block;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.hero-title__name {
  display: block;
  margin-top: clamp(0.25rem, 0.5vw, 0.625rem);
  font-size: var(--hero-name);
  line-height: 0.98;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.hero-lede {
  max-width: 46ch;
  margin: clamp(1.25rem, 1.5vw, 1.5rem) 0 0;
  color: var(--color-text);
  font-size: var(--edit-body);
  line-height: 1.55;
}

.hero-meta {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: 0.625rem;
  margin: clamp(1.25rem, 1.6vw, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.hero-meta li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--color-ink);
  font-size: var(--edit-note);
  font-weight: 600;
  line-height: 1.45;
}

.hero-meta svg {
  margin-top: 0.15rem;
  color: var(--color-primary);
}

.hero-actions {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: clamp(1.25rem, 1.6vw, 1.5rem);
}

/* Hero buttons are local: the shared .button variants still serve the CTA,
   the form and the footer unchanged. */
.hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  border-radius: var(--wp--preset--radius--pill);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  transition:
    background-color var(--wp--preset--motion--fast) var(--wp--preset--easing--out),
    color var(--wp--preset--motion--fast) var(--wp--preset--easing--out),
    text-decoration-color var(--wp--preset--motion--fast) var(--wp--preset--easing--out);
}

.hero-action--primary {
  padding-inline: 1.75rem;
  color: var(--color-surface);
  background: var(--color-ink);
}

.hero-action--primary:hover {
  background: var(--color-ink-soft);
}

.hero-action--secondary {
  padding-inline: 0.25rem;
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(22, 19, 17, 0.45);
  text-underline-offset: 0.35em;
}

.hero-action--secondary:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-ink);
}

/* The direction picker: a wide, compact block in the hero flow. Solid fill,
   dark type — white text on this orange only reaches 3.4:1. */
/* White type on the brand orange is 3.4:1: fine for the large, bold lines,
   short of AA for body copy. The small lines are therefore solid white
   rather than the translucent white the panel used before, and the actions
   invert to a white fill with dark type. */
.hero-rail {
  grid-column: 2;
  grid-row: 4;
  margin-top: clamp(1.5rem, 0.5rem + 1.6vw, 2rem);
  padding: clamp(1.5rem, 0.5rem + 1.4vw, 1.875rem);
  border-radius: var(--wp--preset--radius--md);
  color: #fff;
  background: var(--color-primary);
}

.hero-rail__intro h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, 1.05rem + 0.5vw, 1.625rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.hero-rail__intro p {
  margin: 0.5rem 0 0;
  font-size: var(--edit-note);
  line-height: 1.45;
}

.hero-rail__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1rem, 1.4vw, 1.25rem);
}

.hero-rail__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--edit-tap);
  padding-block: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.hero-rail__links svg {
  transition: transform var(--wp--preset--motion--fast) var(--wp--preset--easing--out);
}

.hero-rail__links a:hover {
  border-bottom-color: #fff;
}

.hero-rail__links a:hover svg {
  transform: translateX(0.25rem);
}

.hero-rail__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-top: clamp(1rem, 1.4vw, 1.25rem);
  padding-top: clamp(0.875rem, 1.2vw, 1.125rem);
  border-top: 1px solid rgba(255, 255, 255, 0.42);
}

.hero-rail__contact p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.625rem;
  margin: 0;
}

.hero-rail__contact span {
  font-size: var(--edit-note);
}

.hero-rail__contact a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--edit-tap);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hero-rail__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--edit-tap);
  padding-inline: 1.25rem;
  border-radius: var(--wp--preset--radius--pill);
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: var(--edit-note);
  font-weight: 700;
  transition:
    background-color var(--wp--preset--motion--fast) var(--wp--preset--easing--out),
    color var(--wp--preset--motion--fast) var(--wp--preset--easing--out);
}

.hero-rail__cta:hover {
  color: #fff;
  background: var(--color-ink);
}

/* On orange a plain focus ring disappears, so controls inside the panel get
   a dark gap and a light contour around it. */
.hero-rail__cta:focus-visible,
.promo-cta:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--color-surface);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--lg);
}

.fact-card {
  padding: 0;
}

.fact-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: var(--wp--preset--spacing--lg);
}

.fact-card__media span {
  font-size: var(--type-body);
  white-space: nowrap;
}

.fact-card h3 {
  margin: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--xs);
  color: var(--color-heading);
  font-size: var(--type-card);
  line-height: 1.18;
}

.fact-card p {
  margin: 0;
  font-size: var(--type-label);
}

.facts-nav {
  display: none;
}

.facts-nav__arrow {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.96);
  color: var(--color-heading);
}

.facts-nav__arrow--prev svg {
  transform: rotate(180deg);
}

/* Shared heading for the redesigned sections. The preserved sections keep
   using .section-heading h2. */
.section-title {
  margin: 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--edit-title);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.cta-card p {
  max-width: 32rem;
  margin: var(--wp--preset--spacing--lg) 0 0;
  font-size: var(--type-body-lg);
}

/* -------------------------------------------- «Подробнее о компании»
   A typographic spread: the approach itself is the visual content, so the
   grid of six identical checkmarks becomes one large phrase plus four rows
   that still carry all six original meanings. */
.programs-section {
  padding-block: var(--section-gap-edit);
  background: var(--color-surface-alt);
}

.programs-spread {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2.5rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2rem, 2.6vw, 2.5rem);
}

.programs-accent {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--accent-phrase);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.programs-accent span {
  display: block;
}

.programs-accent__mark {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding-bottom: 0.16em;
}

.programs-accent__mark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 0.1875rem;
  background: var(--color-primary);
}

.programs-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.programs-lede {
  max-width: 56ch;
  margin: 0;
  color: var(--color-text);
  font-size: var(--edit-body);
  line-height: 1.55;
}

.programs-facts {
  width: 100%;
  margin: clamp(1.5rem, 2vw, 2rem) 0 0;
}

.programs-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.375rem 1.5rem;
  padding-block: clamp(1rem, 1.2vw, 1.25rem);
  border-top: var(--edit-rule);
}

.programs-facts__row:last-child {
  border-bottom: var(--edit-rule);
}

.programs-facts dt {
  color: var(--color-text);
  font-size: 0.875rem;
  line-height: 1.45;
}

.programs-facts dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--edit-body);
  font-weight: 700;
  line-height: 1.35;
}

.programs-cta,
.doctor-cta,
.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--edit-tap);
  padding-inline: 1.5rem;
  border-radius: var(--wp--preset--radius--pill);
  font-size: var(--edit-note);
  font-weight: 700;
  line-height: 1.2;
  transition:
    background-color var(--wp--preset--motion--fast) var(--wp--preset--easing--out),
    color var(--wp--preset--motion--fast) var(--wp--preset--easing--out);
}

.programs-cta {
  margin-top: 1.5rem;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
}

.programs-cta:hover {
  color: var(--color-surface);
  background: var(--color-ink);
}

.cta-card {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: var(--content-gap);
  align-items: stretch;
  padding: 0.18rem;
  border: 1px solid var(--color-line);
  border-radius: var(--wp--preset--radius--md);
  background: rgba(255, 253, 250, 0.82);
}

.cta-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl) 0;
}

.cta-card__copy .button {
  margin-top: var(--wp--preset--spacing--lg);
  align-self: flex-start;
}

/* ------------------------------------------------ Фотогалерея центра
   The room first, the details after: one wide main frame across the whole
   container, then four equal details. No card shells, no overlaid labels. */
.spaces-section {
  padding-block: var(--section-gap-edit);
  background: var(--color-surface);
}

.spaces-intro p {
  max-width: 62ch;
  margin: clamp(1rem, 1.4vw, 1.25rem) 0 0;
  color: var(--color-text);
  font-size: var(--edit-body);
  line-height: 1.55;
}

.spaces-hero,
.spaces-details figure {
  margin: 0;
}

.spaces-hero {
  margin-top: clamp(1.75rem, 2.3vw, 2.25rem);
}

.spaces-hero img,
.spaces-details img {
  display: block;
  width: 100%;
  max-width: none;
  border-radius: var(--wp--preset--radius--md);
  object-fit: cover;
}

.spaces-hero img {
  aspect-ratio: 9 / 4;
  object-position: 50% 58%;
}

.spaces-hero figcaption,
.spaces-details figcaption {
  margin-top: 0.6875rem;
  color: var(--color-text);
  font-size: var(--edit-note);
  line-height: 1.4;
}

.spaces-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.3vw, 1.25rem);
  margin-top: clamp(1.5rem, 2vw, 2rem);
}

.spaces-details img {
  aspect-ratio: 4 / 3;
  object-position: 50% 50%;
}

/* ------------------------------------------------ Акции: афиша и три строки
   One offer carries the section (the 12% that already exists in the copy);
   the other three drop to quiet rows so they stop competing with it. */
.pricing-section {
  padding-block: var(--section-gap-edit);
  background: var(--color-surface);
}

.pricing-section .section-title {
  max-width: 22ch;
}

.promo-layout {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  column-gap: clamp(1.5rem, 0.5rem + 2.4vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2rem, 2.6vw, 2.5rem);
}

.promo-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 0.5rem + 2.4vw, 2.75rem);
  border-radius: var(--wp--preset--radius--md);
  color: #fff;
  background: var(--color-primary);
}

.promo-lead__kicker {
  font-size: var(--edit-note);
  font-weight: 700;
  line-height: 1.4;
}

.promo-lead__figure {
  margin: clamp(0.75rem, 1.2vw, 1rem) 0 0;
  font-family: var(--font-display);
  font-size: var(--promo-figure);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.05em;
}

.promo-lead__figure span {
  font-size: 0.5em;
  letter-spacing: -0.02em;
}

.promo-lead__title {
  margin: clamp(0.75rem, 1.2vw, 1rem) 0 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.1vw, 2.125rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.promo-lead__note {
  margin: 0.875rem 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  line-height: 1.45;
}

.doctor-cta {
  color: var(--color-surface);
  background: var(--color-ink);
}

.doctor-cta:hover {
  background: var(--color-ink-soft);
}

/* Inside the orange poster the action inverts, so it stays readable and
   still reads as the strongest control in the section. */
.promo-cta {
  margin-top: clamp(1.5rem, 1.9vw, 1.75rem);
  color: var(--color-ink);
  background: var(--color-surface);
}

.promo-cta:hover {
  color: #fff;
  background: var(--color-ink);
}

.promo-cta:active {
  color: #fff;
  background: var(--color-ink-soft);
}

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

.promo-list li {
  padding-block: clamp(1.5rem, 1.8vw, 1.75rem);
  border-top: var(--edit-rule);
}

.promo-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.promo-list li:last-child {
  border-bottom: var(--edit-rule);
}

.promo-list__kicker {
  display: block;
  color: var(--color-text);
  font-size: var(--edit-note);
  line-height: 1.4;
}

.promo-list h3 {
  margin: 0.5rem 0 0;
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.95rem + 0.7vw, 1.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.promo-list__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.625rem;
  margin: 0.625rem 0 0;
  font-size: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  line-height: 1.5;
}

.promo-list__meta strong {
  color: var(--color-ink);
  font-weight: 700;
}

.promo-list__meta span {
  color: var(--color-text);
}

.promo-list__meta span::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--color-text-soft);
}

.pricing-section .section-note {
  margin-top: clamp(1.25rem, 1.6vw, 1.5rem);
  color: var(--color-text);
  font-size: var(--edit-note);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
  min-height: 12rem;
  padding: var(--wp--preset--spacing--lg);
  border: 1px solid var(--color-line);
  border-radius: var(--wp--preset--radius--md);
  background: rgba(255, 253, 250, 0.86);
}

.reviews-shell {
  position: relative;
  isolation: isolate;
}

.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2rem) / 3);
  gap: var(--wp--preset--spacing--lg);
  overflow-x: auto;
  padding-inline: 2.4rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  scroll-snap-align: start;
}

.review-card p {
  margin: var(--wp--preset--spacing--xs) 0 0;
  color: var(--color-heading);
}

.review-card strong {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  color: var(--color-text);
}

.review-card strong::before {
  content: "";
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, var(--color-primary-soft) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 112%, var(--color-primary-soft) 0 48%, transparent 49%),
    var(--color-surface-alt);
}

.review-stars {
  color: var(--color-primary);
  letter-spacing: 0.18em;
}

/* Review arrows sit in the heading row, off the white cards, as solid ink targets. */
.reviews-nav {
  display: flex;
  flex: none;
  gap: var(--wp--preset--spacing--sm);
}

.carousel-arrow {
  display: inline-grid;
  place-items: center;
  width: var(--cd-carousel-arrow);
  height: var(--cd-carousel-arrow);
  border: 0;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-surface);
  transition: background-color var(--wp--preset--motion--fast), color var(--wp--preset--motion--fast);
}

.carousel-arrow svg {
  width: var(--cd-carousel-glyph);
  height: var(--cd-carousel-glyph);
}

.carousel-arrow:hover {
  background: var(--color-primary);
  color: var(--color-ink);
}

.carousel-arrow:active {
  opacity: var(--cd-pressed-opacity);
}

.carousel-arrow--prev svg {
  transform: rotate(180deg);
}

.cta-card {
  grid-template-columns: minmax(16rem, 1.05fr) minmax(0, 1.6fr);
}

.cta-card__media {
  min-height: 15rem;
}

.site-footer {
  margin-top: var(--section-gap-lg);
  padding-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.8fr 0.9fr 1fr 1.05fr;
  gap: var(--wp--preset--spacing--lg);
  align-items: start;
}

.footer-brand img {
  width: 9rem;
  height: 3.7rem;
  object-fit: cover;
  object-position: center 37%;
  border-radius: 0.5rem;
}

.footer-brand p,
.footer-column p,
.footer-column a {
  color: var(--color-text);
}

.footer-brand p {
  margin: var(--wp--preset--spacing--lg) 0 0;
  font-size: var(--cd-text-micro);
}

.footer-column {
  display: grid;
  gap: var(--wp--preset--spacing--xs);
}

.footer-column h2 {
  margin: 0 0 0.35rem;
  color: var(--color-heading);
  font-size: var(--cd-text-small);
}

.footer-column p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.footer-column a:hover {
  color: var(--color-primary);
}

.footer-column--cta {
  justify-items: start;
}

.footer-column--cta .button,
.footer-column--cta .button:hover {
  color: #fff;
}

.socials {
  display: flex;
  gap: 1rem;
  margin-top: 0.3rem;
  color: var(--color-primary);
}

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

/* Reference-led lower sections */
.section-kicker {
  display: block;
  margin-bottom: var(--wp--preset--spacing--sm);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.section-heading--centered {
  display: grid;
  justify-items: center;
  max-width: none;
  margin-bottom: var(--wp--preset--spacing--3xl);
  text-align: center;
}

.facts-section {
  padding-block: var(--section-gap-md);
}

.facts-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--md);
}

.fact-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 32rem;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--wp--preset--radius--sm);
  background: rgba(255, 253, 250, 0.9);
  will-change: transform;
}

.fact-card__media {
  flex: none;
  aspect-ratio: 1 / 1.04;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  will-change: transform;
}

.fact-card__body {
  position: relative;
  display: flex;
  min-height: 17rem;
  flex: 1;
  flex-direction: column;
  padding: 2.25rem var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

/* The marker used to be near-white on white with a pale outline. A solid
   orange disc with a dark glyph separates from both the white card and the
   light photo it straddles (3.4:1 against white). It is decorative only —
   no hover, no cursor, not focusable. */
.fact-card__icon {
  position: absolute;
  top: -1.7rem;
  left: var(--wp--preset--spacing--md);
  display: inline-flex;
  width: 3.4rem;
  height: 3.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-ink);
}

.fact-card h3 {
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-size: clamp(1rem, 0.88rem + 0.22vw, 1.16rem);
}

.fact-card p {
  font-size: var(--type-label);
  line-height: 1.55;
}

.fact-card__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--lg);
  color: var(--color-heading);
}

.fact-card__price strong {
  font-size: var(--type-body-lg);
}

.fact-card__price svg {
  color: var(--color-primary);
  will-change: transform;
}

.facts-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--wp--preset--spacing--3xl);
}

.facts-cta .button {
  min-width: 16rem;
}

/* Scoped to the services CTA so the shared ghost/outline buttons used by the
   other sections are not changed. */
.facts-cta .button--outline {
  min-height: 3.125rem;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
  background: transparent;
  font-size: var(--edit-note);
}

.facts-cta .button--outline:hover {
  border-color: var(--color-ink);
  color: var(--color-surface);
  background: var(--color-ink);
}

.facts-cta .button--outline:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* --------------------------------------------------- Специалисты
   Mirrored against the hero: text left, photo right, no card shell and no
   orange. The two decorative arrows are gone — they switched nothing. */
.doctor-section {
  padding-block: var(--section-gap-edit);
  background: var(--color-surface);
}

.doctor-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2.5rem, 1rem + 3.4vw, 5rem);
  align-items: start;
}

.doctor-head {
  grid-column: 1;
  grid-row: 1;
}

.doctor-head .section-title {
  max-width: 16ch;
}

/* Offset by the kicker's own height so the top of the photo lands on the
   same horizontal as the top of the heading. */
.doctor-photo {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  aspect-ratio: 8 / 7;
  margin-top: 1.75rem;
  overflow: hidden;
  border-radius: var(--wp--preset--radius--md);
}

.doctor-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}

.doctor-body {
  grid-column: 1;
  grid-row: 2;
}

.doctor-lede {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  color: var(--color-text);
  font-size: var(--edit-body);
  line-height: 1.55;
}

.doctor-points {
  margin: clamp(1.5rem, 1.9vw, 1.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.doctor-points li {
  padding-block: clamp(0.75rem, 1vw, 0.875rem);
  border-top: var(--edit-rule);
  color: var(--color-ink);
  font-size: var(--edit-body);
  font-weight: 700;
  line-height: 1.35;
}

.doctor-points li:last-child {
  border-bottom: var(--edit-rule);
}

.doctor-cta {
  margin-top: 1.5rem;
}

.reviews-section {
  padding-top: var(--section-gap-md);
  padding-bottom: 0;
}

.reviews-section .section-heading {
  margin-bottom: var(--wp--preset--spacing--2xl);
}

.reviews-track {
  grid-auto-columns: calc((100% - 2rem) / 3);
  margin-block: -2rem;
  /* Bound to the gutter: a wider negative margin pushed the track past the
     left edge of the page. */
  margin-inline: calc(var(--site-gutter) * -1);
  padding-inline: var(--site-gutter);
  padding-block: 2rem;
  scroll-padding-inline: var(--site-gutter);
}

.review-card {
  position: relative;
  z-index: 0;
  min-height: 14rem;
  gap: var(--wp--preset--spacing--lg);
  padding: var(--wp--preset--spacing--xl);
  background: rgba(255, 253, 250, 0.92);
  will-change: transform;
}

.review-card__head,
.review-author {
  display: flex;
  align-items: center;
}

.review-card__head {
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
}

.review-author {
  min-width: 0;
  gap: var(--wp--preset--spacing--sm);
}

.review-author strong {
  color: var(--color-heading);
  font-size: var(--type-label);
  line-height: 1.35;
}

.review-card strong::before {
  display: none;
}

.review-avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
}

.review-avatar span {
  padding: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.58rem;
}

.review-card p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.7;
}

.review-stars {
  flex: none;
  font-size: var(--type-label);
  letter-spacing: 0.12em;
}


.cta-section {
  padding-block: 0;
}

.section + .cta-section {
  margin-top: var(--section-gap);
}

.cta-section > .container {
  width: 100%;
  max-width: none;
}

.cta-card {
  position: relative;
  grid-template-columns: minmax(18rem, 0.9fr) minmax(22rem, 1fr) minmax(25rem, 1.12fr);
  gap: 0;
  min-height: 34rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #3a3937;
  box-shadow: none;
}

.cta-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 34rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #777572;
}

.cta-card__media > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 22% 28%;
}

.cta-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(24, 21, 18, 0.1) 0%,
    rgba(24, 21, 18, 0.26) 30%,
    rgba(24, 21, 18, 0.44) 55%,
    rgba(24, 21, 18, 0.68) 100%
  );
}

.cta-card__media span {
  inset: auto auto var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
  z-index: 3;
  transform: none;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(34, 31, 29, 0.58);
}

.cta-card__copy {
  z-index: 1;
  grid-column: 2;
  padding: var(--wp--preset--spacing--4xl) var(--wp--preset--spacing--2xl);
}

.cta-card__copy h2,
.cta-card__copy p,
.cta-card__copy a {
  color: #fff;
}

.cta-card__copy p {
  margin-top: var(--wp--preset--spacing--lg);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--type-body);
}

.cta-contacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--lg);
  margin: var(--wp--preset--spacing--2xl) 0 0;
  padding: 0;
  list-style: none;
}

.cta-contacts li {
  display: flex;
  gap: var(--wp--preset--spacing--sm);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--type-label);
  line-height: 1.5;
}

.cta-contacts svg {
  color: var(--color-primary);
}

.lead-form {
  z-index: 1;
  grid-column: 3;
  align-self: center;
  margin: var(--wp--preset--spacing--xl);
  padding: var(--wp--preset--spacing--xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--wp--preset--radius--md);
  background: rgba(255, 255, 255, 0.085);
  backdrop-filter: blur(10px);
}

.lead-form h3 {
  margin: 0 0 var(--wp--preset--spacing--lg);
  color: #fff;
  font-size: var(--type-card);
  line-height: var(--cd-title-leading);
}

.lead-form label {
  display: block;
}

.lead-form label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lead-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--xs);
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  margin-bottom: var(--wp--preset--spacing--xs);
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.65rem;
  outline: none;
  color: #fff;
  background: rgba(22, 19, 17, 0.38);
}

.lead-form textarea {
  display: block;
  min-height: var(--cd-form-message-height);
  resize: vertical;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.lead-form select {
  color: rgba(255, 255, 255, 0.72);
}

.lead-form option {
  color: var(--color-heading);
  background: var(--color-surface);
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(253, 73, 1, 0.16);
}

.lead-form .button {
  width: 100%;
  margin-top: var(--wp--preset--spacing--2xs);
  border: 0;
}

/* An empty status takes no room, so the panel padding is equal above and below. */
.lead-form .lead-form__status {
  margin: 0;
  color: #b7f2d3;
  font-size: var(--type-label);
}

.lead-form .lead-form__status:not(:empty) {
  margin-top: var(--wp--preset--spacing--xs);
}

.cta-section + .site-footer,
.site-footer {
  margin-top: var(--section-gap);
}

@media (max-width: 80rem) {
  .facts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Hero: 48/52 and the panel drops to a full-width row of its own. */
  .hero-grid {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
  }

  .hero-title__name {
    font-size: clamp(4.5rem, 0.5rem + 7vw, 6.5rem);
  }

  .hero-media {
    grid-row: 1 / 4;
  }

  .hero-rail {
    grid-column: 1 / -1;
  }

  .doctor-layout {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  }

  .cta-card {
    grid-template-columns: minmax(13rem, 0.65fr) minmax(20rem, 1fr) minmax(24rem, 1.1fr);
  }

  .cta-card__copy {
    padding-right: var(--wp--preset--spacing--3xl);
  }

  .lead-form {
    grid-column: 3;
    width: auto;
    margin-inline: var(--wp--preset--spacing--xl);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 70rem) {
  .facts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Below 1024 px the specialists and the promo composition go vertical. */
@media (max-width: 64rem) {
  .doctor-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 3vw, 2rem);
  }

  .doctor-head,
  .doctor-photo,
  .doctor-body {
    grid-column: 1;
    grid-row: auto;
  }

  .doctor-photo {
    aspect-ratio: 1 / 1;
    margin-top: 0;
  }

  .doctor-body {
    margin-top: 0.5rem;
  }

  .promo-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.75rem, 3vw, 2.5rem);
  }

  /* Full width for the accent phrase, so it can go back up in scale. */
  .programs-spread {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(1.5rem, 3vw, 2rem);
  }

  .programs-accent {
    font-size: clamp(2.5rem, 0.5rem + 4.6vw, 3.75rem);
  }

  .spaces-hero img {
    aspect-ratio: 16 / 10;
  }

  .spaces-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 62rem) {
  .doctor-lede,
  .hero-lede {
    max-width: 58ch;
  }

  .cta-card {
    grid-template-columns: 1fr;
  }

  .cta-card__copy {
    grid-column: 1;
    padding: var(--wp--preset--spacing--3xl);
  }

  .cta-card__media {
    min-height: 24rem;
  }

  .lead-form {
    grid-column: 1;
    width: auto;
    margin: 0 var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);
  }

  .reviews-track {
    grid-auto-columns: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 48rem) {
  .programs-accent {
    font-size: clamp(2.125rem, 1rem + 6vw, 2.5rem);
  }

  .programs-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .spaces-hero img {
    aspect-ratio: 4 / 3;
  }

  .spaces-details {
    gap: clamp(0.75rem, 3vw, 1rem);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .facts-grid {
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-columns: none;
    gap: var(--wp--preset--spacing--lg);
    overflow-x: auto;
    margin-inline: 0;
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .fact-card {
    min-height: 0;
    scroll-snap-align: start;
  }

  .facts-nav {
    display: flex;
    justify-content: center;
    gap: var(--wp--preset--spacing--sm);
    margin-top: var(--wp--preset--spacing--lg);
  }

  .fact-card__media {
    aspect-ratio: 16 / 10;
  }

  .cta-card__copy {
    padding: var(--wp--preset--spacing--xl);
  }

  .cta-contacts,
  .lead-form__row {
    grid-template-columns: 1fr;
  }

  .review-card__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lead-form {
    margin: 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--lg);
  }

  .reviews-track {
    grid-auto-columns: 100%;
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

}

/* Phone: the name, the lede and the main action come before the portrait,
   then the practical lines and the direction picker. The DOM is already in
   that order, so auto placement is all that is needed. 767 px, not 768 —
   768 still belongs to the two-column tablet band. */
@media (max-width: 47.9375rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-intro,
  .hero-actions,
  .hero-media,
  .hero-meta,
  .hero-rail {
    grid-column: 1;
    grid-row: auto;
  }

  .hero-title__name {
    font-size: clamp(4rem, 2rem + 8vw, 4.75rem);
  }

  .hero-media {
    height: clamp(18.75rem, 78vw, 22.5rem);
    margin-top: clamp(1.5rem, 4vw, 2rem);
  }

  .hero-media img {
    object-position: 42% 58%;
  }

  .hero-action--primary {
    flex: 1 1 auto;
  }

  .hero-rail__contact {
    justify-content: flex-start;
    gap: 0.75rem 1rem;
  }
}

/* Very narrow phones: two detail captions per row stop being readable. */
@media (max-width: 22.5rem) {
  .spaces-details {
    grid-template-columns: minmax(0, 1fr);
  }
}