/* ============================================================
   SPECIALIST DETAIL — specialists/*.html (individual specialist
   pages). Matches Figma node 2273:4081 "специалисты" (desktop).
   Reuses header.css/footer.css/buttons.css/forms.css(.sec-booking)/
   booking-popup.css verbatim; the "other specialists" card here is
   a page-local twin of specialists-listing.css's .spec-card kept
   separate on purpose (each page file stays self-contained).
   No dedicated mobile Figma frame was supplied for this node, so
   below 767px everything reflows fluidly instead of switching to a
   duplicated mh- markup block.
   ============================================================ */
body.page--specialist-detail { background: #fff; color: var(--c-text); }
.spec-detail { width: 100%; margin-top: var(--header-h); display: flex; flex-direction: column; }

/* ── BREADCRUMB ── */
/* padding-top lives on the shared ".wrap:first-of-type" rule below, not
   here: a plain ".spec-bc { padding-top }" is only specificity (0,1,0),
   so it always loses to ".spec-detail > .wrap" (0,2,0) regardless of
   source order — setting it on this rule is a no-op in practice. */
/* margin:0 overrides .wrap's "margin: 0 auto": .spec-detail is a column
   flex container, and a flex item with auto left/right margins skips
   align-items:stretch entirely — the nav shrank to its text width and
   centered itself instead of sitting flush left like every other .wrap
   section (those are plain <section> blocks, where CSS2.1's block-box
   auto-margin rule zeroes the margins instead; only this flex nav hit
   the flexbox auto-margin-centering rule). */
.spec-bc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.spec-bc a, .spec-bc span { font-size: clamp(14px, 0.9vw, 16px); font-weight: 300; color: var(--c-muted); letter-spacing: -0.03em; line-height: 1.4; text-decoration: none; }
.spec-bc a:hover { opacity: 0.7; }
/* ".spec-bc span" above is (0,1,1); a bare ".spec-bc__current" class is only
   (0,1,0), so it would lose the cascade to that rule despite coming later —
   qualifying it as "span.spec-bc__current" (0,2,1) is what actually wins. */
.spec-bc span.spec-bc__current { font-weight: 600; color: var(--c-text); font-size: clamp(14px, 0.9vw, 16px); }

/* ── HERO ── */
/* photo height is capped to the viewport (not just a vw-based width) so the
   whole hero — header + breadcrumb + photo — reliably fits one screen on
   load instead of the tall 768:1060 portrait pushing the fold past 100vh.
   Top spacing comes from the shared ".wrap:first-of-type" rule below, same
   reason a plain ".spec-hero { padding-top }" would be a no-op — see the
   breadcrumb comment above. padding-right uses the same var(--gutter) as
   the left side (180px at its clamp cap) so the photo keeps the standard
   site-wide gutter instead of a bespoke inset. */
.spec-hero { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 3.75vw, 72px); width: 100%; padding-right: var(--gutter); }
.spec-hero__info { flex: 1 1 0; min-width: 0; max-width: 746px; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(32px, 4.2vw, 80px); }
.spec-hero__head { display: flex; flex-direction: column; gap: clamp(18px, 1.9vw, 36px); align-items: flex-start; width: 100%; }
.spec-hero__name { font-size: clamp(32px, 3.33vw, 64px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.05; font-style: normal; margin: 0; }
.spec-hero__bio { font-size: clamp(16px, 1.25vw, 24px); font-weight: 300; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.3; margin: 0; }
.spec-hero__stats { display: flex; gap: clamp(40px, 5.7vw, 109px); align-items: flex-start; }
.spec-stat { display: flex; flex-direction: column; gap: clamp(8px, 0.83vw, 16px); }
.spec-stat__num { font-size: clamp(28px, 2.5vw, 48px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; }
.spec-stat__label { font-size: clamp(14px, 1.25vw, 24px); font-weight: 300; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.2; }
.spec-hero__cta.pill-btn { padding: clamp(14px, 0.94vw, 18px) clamp(28px, 2.6vw, 50px); font-size: clamp(17px, 1.25vw, 24px); letter-spacing: -0.04em; gap: clamp(14px, 1.2vw, 23px); background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.spec-hero__cta.pill-btn:hover { background: #6A7C64; border-color: #6A7C64; }
.spec-hero__cta.pill-btn svg { width: clamp(22px, 1.93vw, 37px); height: clamp(22px, 1.93vw, 37px); }
.spec-hero__photo { flex: 0 0 clamp(240px, 40%, 536px); height: auto; max-height: calc(100vh - 160px); aspect-ratio: 768 / 1060; border-radius: 20px; overflow: hidden; position: relative; background: #ccc4b3; }
.spec-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── shared section header (h2 + optional lede) ── */
.spec-sec-head { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.spec-sec-head h2 { font-size: clamp(28px, 2.5vw, 48px); font-weight: 400; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.2; margin: 0; font-style: normal; }
.spec-sec-head p { font-size: clamp(14px, 0.94vw, 18px); font-weight: 300; color: #5B6159; line-height: 1.6; margin: 0; }

/* ── VIDEO-VIZITKA ── */
.spec-video { display: flex; flex-direction: column; gap: clamp(20px, 1.67vw, 32px); width: 100%; }
.spec-video__frame { position: relative; width: 100%; aspect-ratio: 1560 / 553; border-radius: 20px; overflow: hidden; background: #ccc4b3; cursor: pointer; }
.spec-video__frame video, .spec-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.spec-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(56px, 4.6vw, 88px); height: clamp(56px, 4.6vw, 88px); border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s; }
.spec-video__play:hover { background: #6A7C64; transform: translate(-50%, -50%) scale(1.06); }
.spec-video__play svg { width: 32%; height: 32%; margin-left: 3px; }
.spec-video__frame.is-playing .spec-video__play, .spec-video__frame.is-playing::after { opacity: 0; pointer-events: none; }

/* ── EDUCATION + CERTIFICATES ── */
.spec-edu { display: flex; flex-direction: column; gap: clamp(32px, 3.33vw, 64px); width: 100%; }
.spec-edu__grid { display: flex; gap: clamp(32px, 3.33vw, 64px); align-items: flex-start; width: 100%; }
.spec-edu__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px); }
.spec-edu__col h3 { font-size: clamp(17px, 1.15vw, 22px); font-weight: 600; color: var(--c-text); letter-spacing: -0.04em; margin: 0; }
.spec-edu__list { display: flex; flex-direction: column; gap: clamp(14px, 1.04vw, 20px); }
.spec-edu-item { display: flex; flex-direction: column; gap: 10px; }
.spec-edu-item__title { font-size: clamp(15px, 0.94vw, 18px); font-weight: 500; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.2; margin: 0; }
.spec-edu-item__meta { font-size: clamp(13px, 0.78vw, 15px); font-weight: 400; color: #5B6159; letter-spacing: -0.04em; line-height: 1.4; margin: 0; }
.spec-cert-grid { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; }
.spec-cert-card { position: relative; width: clamp(140px, 16.8vw, 220px); height: clamp(100px, 12vw, 156px); border-radius: 16px; overflow: hidden; flex-shrink: 0; background: #ccc4b3; cursor: pointer; border: none; padding: 0; display: block; }
.spec-cert-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); }
.spec-cert-card:hover img { transform: scale(1.05); }
.spec-cert-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.7) 75%); pointer-events: none; }
.spec-cert-card__badge { position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--c-accent); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; padding: 5px 10px; border-radius: 999px; }

/* ── PROCEDURES ──
   Ported 1:1 from the homepage "Направления услуг" tiles (.dir-tile in
   home.css): same aspect-ratio, same hover choreography (circular photo
   expands to fill the card, scrim darkens, default badge/title/desc fade
   out, an accent-colored badge + white title + arrow fade+scale in on a
   delay). Kept under the spec-proc-card__ namespace instead of reusing
   .dir-tile directly since this page doesn't load home.css. */
.spec-procs { display: flex; flex-direction: column; gap: clamp(32px, 3.33vw, 64px); width: 100%; }
.spec-proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; }
.spec-proc-card { position: relative; overflow: hidden; background: #fff; border: 1px solid #d9d9d9; border-radius: 20px; text-decoration: none; aspect-ratio: 380 / 520; display: block; }
.spec-proc-card__scrim { position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.3s ease; }
.spec-proc-card:hover .spec-proc-card__scrim { opacity: 1; transition: opacity 0.35s ease 0.1s; }
.spec-proc-card__photo {
  position: absolute; z-index: 1; overflow: hidden;
  top: 116px; left: calc(50% - clamp(60px, 5.2vw, 80px));
  width: clamp(120px, 10.4vw, 160px); height: clamp(120px, 10.4vw, 160px);
  border-radius: 50%;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spec-proc-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.spec-proc-card:hover .spec-proc-card__photo { top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; }
.spec-proc-card__body { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 48px 28px 32px; text-align: center; transition: opacity 0.2s ease; }
.spec-proc-card:hover .spec-proc-card__body { opacity: 0; }
.spec-proc-card__num { flex-shrink: 0; width: 48px; height: 48px; border-radius: 24px; background: #ededed; color: #40404d; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.spec-proc-card__photo-spacer { width: clamp(120px, 10.4vw, 160px); height: clamp(120px, 10.4vw, 160px); flex-shrink: 0; }
.spec-proc-card__title { font-size: 20px; font-weight: 600; color: #1a1a1f; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.spec-proc-card__desc { font-size: 14px; font-weight: 300; color: #5B6159; line-height: 1.4; letter-spacing: -0.01em; margin: 0; }
.spec-proc-card__num-hover,
.spec-proc-card__arrow {
  position: absolute; z-index: 4; opacity: 0; transform: scale(0.6);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.spec-proc-card__title-hover {
  position: absolute; z-index: 4; opacity: 0;
  transform: translate(-50%, -42%) scale(0.85);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.spec-proc-card:hover .spec-proc-card__num-hover,
.spec-proc-card:hover .spec-proc-card__arrow {
  opacity: 1; transform: scale(1);
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s;
}
.spec-proc-card:hover .spec-proc-card__title-hover {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s;
}
.spec-proc-card__num-hover {
  left: 24px; top: 24px; width: 48px; height: 48px; border-radius: 24px;
  background: var(--c-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
}
.spec-proc-card__title-hover {
  left: 50%; top: 46.15%;
  width: 87%; margin: 0; text-align: center; color: #fff;
  font-size: clamp(17px, 1.9vw, 26px); font-weight: 600; letter-spacing: -0.04em;
  line-height: 1.2;
}
.spec-proc-card__arrow {
  right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 22px;
  background: var(--c-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.spec-proc-card__arrow svg { width: 18px; height: 18px; }

/* ── REVIEWS ── */
.spec-reviews { display: flex; flex-direction: column; gap: clamp(32px, 3.33vw, 64px); width: 100%; }
.spec-review-list { display: flex; flex-direction: column; gap: clamp(14px, 1.25vw, 24px); width: 100%; }
.spec-review-card { display: flex; flex-direction: column; gap: clamp(10px, 0.83vw, 16px); width: 100%; background: #fff; border: 1px solid #d9d9d9; border-radius: 20px; padding: clamp(16px, 1.25vw, 24px); }
.spec-review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.spec-review-card__meta { display: flex; flex-direction: column; gap: 4px; }
.spec-review-card__name { font-size: clamp(15px, 0.94vw, 18px); font-weight: 500; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.1; margin: 0; }
.spec-review-card__date { font-size: clamp(13px, 0.78vw, 15px); font-weight: 400; color: #5B6159; letter-spacing: -0.04em; line-height: 1.4; margin: 0; }
.spec-review-card__rating { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.spec-review-card__stars { font-size: 16px; font-weight: 500; letter-spacing: -0.04em; color: #ffcd77; }
.spec-review-card__score { font-size: clamp(13px, 0.78vw, 15px); font-weight: 400; color: #5B6159; letter-spacing: -0.04em; }
.spec-review-card__text { font-size: clamp(15px, 0.94vw, 18px); font-weight: 300; color: #5B6159; line-height: 1.6; margin: 0; }

/* ── OTHER SPECIALISTS (page-local twin of specialists-listing.css's .spec-card) ── */
.spec-others { display: flex; flex-direction: column; gap: clamp(32px, 3.33vw, 64px); width: 100%; }
.spec-others__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; }
.spec-other-card {
  position: relative; aspect-ratio: 372 / 532; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(16px, 1.25vw, 24px) clamp(16px, 1.25vw, 24px) clamp(20px, 1.9vw, 36px);
  gap: 12px; text-decoration: none; background: #ccc4b3;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.spec-other-card:focus-visible { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(48,54,46,0.22); outline: 2px solid #fff; outline-offset: 3px; }
/* только для мыши: на телефоне «другие специалисты» — лента с
   overflow-x, и подъём карточки там обрезается */
@media (hover: hover) and (pointer: fine) {
  .spec-other-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(48,54,46,0.22); }
}
.spec-other-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); }
@media (hover: hover) and (pointer: fine) { .spec-other-card:hover img { transform: scale(1.05); } }
.spec-other-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(102,102,102,0) 0%, rgba(0,0,0,0.5) 94%); pointer-events: none; }
.spec-other-card__name { position: relative; z-index: 2; margin: 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 500; color: #fff; letter-spacing: -0.04em; line-height: 1; }
.spec-other-card__role { position: relative; z-index: 2; margin: 0; font-size: clamp(13px, 0.94vw, 18px); font-weight: 300; color: #fff; line-height: 1.5; }

/* ── section rhythm ── */
.spec-detail > .wrap { padding-top: clamp(56px, 8vw, 120px); }
/* на узком десктопе двум колонкам шапки уже тесно — раскладываем так же,
   как на телефоне: фото сверху, текст под ним */
@media (min-width: 768px) and (max-width: 980px) {
  .spec-hero { flex-direction: column-reverse; align-items: stretch; gap: 32px; }
  .spec-hero__photo { flex: 0 0 auto; width: 100%; max-width: 460px; margin: 0 auto; max-height: none; }
  .spec-hero__info { max-width: none; }
}

/* :first-of-type is per-tag-name, and both nav.spec-bc and section.spec-hero
   are the only element of their tag directly under .spec-detail, so this
   selector matches BOTH of them (not just "the first section" as the name
   suggests) — each gets this same top spacing applied independently. It
   used to zero both out, which — combined with --header-h under-measuring
   the real fixed header by ~13px at common widths — left the breadcrumb
   rendered partly underneath the header. */
.spec-detail > .wrap:first-of-type { padding-top: clamp(20px, 2.2vw, 32px); }

/* ── RESPONSIVE ── */
@media (max-width: 1419px) {
  .spec-proc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1199px) {
  .spec-others__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 979px) {
  .spec-proc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .spec-hero__stats { gap: 40px; }
  .spec-proc-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .spec-review-card__top { align-items: flex-start; }
}
@media (max-width: 480px) {
  .spec-proc-grid { grid-template-columns: 1fr; }
}

/* ── MOBILE (≤767px) — Figma node 2347:1313, pixel-matched at the 390px
   frame width. This is the single, consolidated mobile ruleset for the
   page: every property below is set exactly once, with a literal figma
   px value (not a desktop-inherited vw/clamp formula) — no duplicate or
   !important overrides exist elsewhere for these selectors (the old
   duplicated/conflicting rules previously scattered across responsive.css
   have been removed, see the notes in that file). ── */
@media (max-width: 767px) {
  /* Figma uses a flat 20px side gutter on every section in this frame
     (not the site's desktop-derived vw-based --gutter clamp), so it's
     set once here for every direct section instead of per-section. */
  .spec-detail > .wrap { padding-left: 20px; padding-right: 20px; }

  /* ── section rhythm — replaces the desktop clamp(56,8vw,120) with the
     literal per-section gap read off the Figma frame (parent gap-64
     plus that section's own top padding, where it has one). Each
     selector repeats ".wrap" alongside the section's own class so its
     specificity (0,3,0) matches/beats ".spec-detail > .wrap:first-of-type"
     and ".spec-detail > .wrap" (0,3,0 / 0,2,0) instead of silently
     losing to them. ── */
  .spec-detail > .spec-bc.wrap { padding-top: 16px; }
  .spec-detail > .spec-hero.wrap { padding-top: 24px; }
  .spec-detail > .spec-video.wrap { padding-top: 96px; }
  .spec-detail > .spec-edu.wrap { padding-top: 96px; padding-bottom: 32px; }
  /* pages with no video-visitka section (edu follows hero directly, e.g.
     natalya-vladimirovna.html) need hero's own trailing 32px folded back
     in — the 96px above already assumes a video section absorbed it. */
  .spec-hero.wrap + .spec-edu.wrap { padding-top: 128px; }
  .spec-detail > .spec-procs.wrap { padding-top: 64px; }
  .spec-detail > .spec-reviews.wrap { padding-top: 64px; }
  .spec-detail > .spec-others.wrap { padding-top: 64px; }
  /* !important needed: .sec-booking is shared with other pages and still
     carries its own !important padding rules in responsive.css (56px/48px)
     for those pages — this page's higher-specificity selector alone isn't
     enough to beat an !important declaration, regardless of order. Those
     rules use the "Npx 0" shorthand, which also zeroes left/right — so
     left/right need the same !important treatment as top/bottom, not just
     inherit the 20px from ".spec-detail > .wrap" above. */
  .spec-detail > .sec-booking.wrap {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* mh-footer's own top padding is 0 site-wide (mobile-booking.css) — it
     always relied on the previous section supplying the gap. On this page
     that previous section is .sec-booking's padding-bottom above, but
     giving the footer its own explicit top gap too makes the separation
     robust regardless of what precedes it. */
  /* отступ перед подвалом теперь общий — mobile-booking.css */

  /* visually reorders "Другие специалисты" ahead of "Форма записи",
     matching the Figma flow, without touching DOM order (the booking
     component is shared with other pages, so it stays put in markup). */
  .spec-detail > .sec-booking { order: 1; }

  /* ── HERO ── */
  .spec-hero { flex-direction: column-reverse; align-items: stretch; gap: 24px; }
  .spec-hero__photo { flex: none; width: 100%; height: auto; aspect-ratio: 7 / 8; border-radius: 16px; }
  .spec-hero__info { max-width: none; gap: 24px; }
  .spec-hero__head { gap: 16px; }
  .spec-hero__name { font-size: 28px; letter-spacing: -0.04em; }
  .spec-hero__bio { font-size: 15px; font-weight: 400; letter-spacing: -0.04em; }
  .spec-hero__bio-extra { display: none; }
  .spec-hero__stats { gap: 24px; }
  .spec-stat { gap: 4px; }
  .spec-stat__num { font-size: 22px; font-weight: 500; }
  .spec-stat__label { font-size: 15px; font-weight: 400; }
  .spec-hero__cta.pill-btn { padding: 17px 50px; font-size: 18px; border-radius: 10px; }
  .spec-hero__cta.pill-btn svg { display: none; }

  /* ── VIDEO ── */
  .spec-sec-head { gap: 16px; }
  .spec-video { gap: 16px; }
  .spec-video__frame { aspect-ratio: 350 / 200; border-radius: 12px; }

  /* ── EDUCATION + CERTIFICATES ── */
  .spec-edu { gap: 36px; }
  .spec-edu__grid { flex-direction: column; gap: 36px; }
  .spec-edu__col { gap: 24px; }
  /* Figma has no combined "Образование и сертификаты" heading — the two
     subsection headings below stand alone as top-level h2s instead, so
     the shared one is hidden here (desktop keeps it, unchanged). */
  .spec-edu > .spec-sec-head { display: none; }
  .spec-edu__col h3 { font-size: 28px; letter-spacing: -0.04em; line-height: 1; margin: 0; }
  .spec-edu__col:first-child h3 { font-weight: 400; }
  .spec-edu__col:last-child h3 { font-weight: 300; }
  .spec-edu__list { gap: 16px; }
  .spec-edu-item { padding-bottom: 16px; border-bottom: 1px solid rgba(48,54,46,0.1); }
  .spec-edu-item:last-child { padding-bottom: 0; border-bottom: none; }

  .spec-cert-grid { gap: 12px; flex-wrap: nowrap; align-items: flex-start; overflow-x: auto; overflow-y: clip; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .spec-cert-grid::-webkit-scrollbar { display: none; }
  .spec-cert-card { width: 160px; height: 209px; border-radius: 8px; flex: 0 0 160px; scroll-snap-align: start; }

  /* ── PROCEDURES ── */
  .spec-procs { gap: 24px; }
  .spec-proc-grid { gap: 16px; }

  /* ── REVIEWS ── */
  .spec-reviews { gap: 20px; }
  .spec-review-list { gap: 16px; }
  .spec-review-card { border-radius: 12px; padding: 16px; gap: 12px; }
  .spec-review-card__stars { color: #b8860b; font-size: 14px; }

  /* ── OTHER SPECIALISTS ── */
  .spec-others { gap: 20px; }
  .spec-other-card { aspect-ratio: 350 / 450; border-radius: 16px; padding: 36px 24px; }
  .spec-other-card__name { font-size: 24px; }
  .spec-other-card__role { font-size: 18px; }
  .spec-others__grid { display: flex; flex-wrap: nowrap; align-items: flex-start; overflow-x: auto; overflow-y: clip; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 16px; }
  .spec-others__grid::-webkit-scrollbar { display: none; }
  .spec-other-card { flex: 0 0 100%; scroll-snap-align: start; }
  .spec-others__dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; padding-bottom: 6px; }

  /* ── BOOKING — Figma has no card around the form: flatten the shared
     .booking-form "premium mobile" treatment for this page only. ── */
  .booking-heading { font-size: 28px; letter-spacing: -0.04em; }
  .booking-desc { font-size: 16px; letter-spacing: -0.04em; max-width: none; }
  .spec-detail .booking-form { padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  .spec-detail .booking-submit { border-radius: 12px; padding: 18px 50px; font-size: 24px; }
  .spec-detail .booking-submit svg { display: none; }
  .spec-detail .booking-submit + p { display: none; }

  /* contacts: stacked lines with a rule above and below, per Figma's
     "info-lines" block (address / phone / hours each on their own
     line), replacing the shared desktop row layout for this page. */
  .spec-detail .contacts-bar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(51,36,29,0.1); border-bottom: 1px solid rgba(51,36,29,0.1); }
  .spec-detail .contacts-bar p, .spec-detail .contacts-bar a { font-size: 14px; }
  .spec-detail .booking-map { height: 220px; border-radius: 12px; }

  footer.site-footer { display: none !important; }
}
@media (min-width: 768px) {
  .spec-others__dots { display: none; }
}

/* ── Масштабируемая плитка ─────────────────────────────────────────
   Все размеры внутри карточки — доля её собственной ширины (cqw), а не
   ширины экрана. Поэтому на 254px и на 372px карточка выглядит
   одинаково, просто меньше, и её пропорция 380×520 не плывёт под
   длинным заголовком. База пересчёта: 1cqw = 3.8px при эталонных 380px.
   clamp() снизу не даёт тексту стать нечитаемым, сверху — перерасти
   эталон. Браузеры без container queries отбросят cqw-строки и
   останутся на значениях выше по файлу. */
.spec-proc-card {
  container-type: inline-size;
  --tile-pad-x: clamp(18px, 7.37cqw, 28px);
  --tile-pad-t: clamp(30px, 12.63cqw, 48px);
  --tile-pad-b: clamp(20px, 8.42cqw, 32px);
  --tile-gap:   clamp(12px, 5.26cqw, 20px);
  --tile-num:   clamp(38px, 12.63cqw, 48px);
  --tile-photo: clamp(112px, 42.11cqw, 160px);
  --tile-inset: clamp(14px, 6.32cqw, 24px);
}
.spec-proc-card__photo {
  top: calc(var(--tile-pad-t) + var(--tile-num) + var(--tile-gap));
  left: calc(50% - var(--tile-photo) / 2);
  width: var(--tile-photo); height: var(--tile-photo);
}
.spec-proc-card__photo-spacer { width: var(--tile-photo); height: var(--tile-photo); }
.spec-proc-card__body { gap: var(--tile-gap); padding: var(--tile-pad-t) var(--tile-pad-x) var(--tile-pad-b); }
.spec-proc-card__num { width: var(--tile-num); height: var(--tile-num); border-radius: 50%; font-size: clamp(13px, 4.21cqw, 16px); }
.spec-proc-card__title { font-size: clamp(15px, 5.26cqw, 20px); overflow-wrap: break-word; }
.spec-proc-card__desc { font-size: clamp(11.5px, 3.68cqw, 14px); overflow-wrap: break-word; }
/* страховка: сколько бы ни было текста, карточка не растёт — лишние
   строки описания отсекаются, пропорция остаётся прежней */
.spec-proc-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.spec-proc-card__num-hover { left: var(--tile-inset); top: var(--tile-inset); width: var(--tile-num); height: var(--tile-num); border-radius: 50%; font-size: clamp(13px, 4.21cqw, 16px); }
.spec-proc-card__arrow { right: var(--tile-inset); bottom: var(--tile-inset); width: clamp(34px, 11.58cqw, 44px); height: clamp(34px, 11.58cqw, 44px); border-radius: 50%; }
.spec-proc-card__arrow svg { width: clamp(14px, 4.74cqw, 18px); height: clamp(14px, 4.74cqw, 18px); }
.spec-proc-card__title-hover { font-size: clamp(16px, 6.84cqw, 26px); overflow-wrap: break-word; }