/* =========================================================================
   МЦ „Римската стена“ — CLINICAL INSTRUMENT
   Cool clinical paper + instrument type. Structure from hairlines and the
   brand mark (anatomy / Doppler), not cream-spa editorial defaults.
   Radius is one family: chips, frames, cards, pills.
   ========================================================================= */

:root {
  /* Surfaces — cool clinical paper (not warm cream) */
  --bg: #f3f6f5;
  --bg-alt: #e8eeec;
  --bg-cream: #e8eeec;
  --white: #fff;
  --ink: #0c1614;
  --ink-deep: #081210;

  /* Line + text — muted floors for WCAG body contrast */
  --line: #d2dad7;
  --line-strong: #b4c0bc;
  /* Edges that identify a control (form fields). WCAG 1.4.11 asks 3:1:
     3.5:1 on white, 3.2:1 on --bg. --line-strong is 1.9:1, fine for rules,
     too faint for the only edge of an underline field. */
  --line-field: #7d8c88;
  --text: #121c1a;
  --text-muted: #3f4f4b;
  --text-light: #5a6b67;

  /* Accent — from the clinic mark; CTA uses deep for white-on-teal contrast */
  --teal: #00a38a;
  --teal-deep: #066b5c;
  --teal-mid: #3dbdac;
  --teal-tint: #e3f5f1;
  --teal-cta: #066b5c;

  /* Accent split by job, because one green cannot do all three.
     --teal        fills, icons, rules, borders — no contrast floor applies.
     --teal-text   body-size text on --bg / --bg-alt. 6.0:1 on #f3f6f5;
                   plain --teal is 2.9:1 there and fails AA.
     --teal-display  large display type (24px+), where the floor is 3:1.
                   Keeps the hero's character; plain --teal sits at 2.98:1,
                   a hair under. */
  --teal-text: #066b5c;
  --teal-display: #009279;

  /* Errors only. A brick red, not alarm red: 6.4:1 on white, 5.8:1 on --bg. */
  --error: #a3352a;
  --error-tint: #fbefed;

  /* Secondary text on the teal band. teal-mid alone is 2.8:1 there; this
     is the lightest mix that stays quiet while clearing WCAG AA. */
  --on-teal: color-mix(in srgb, var(--teal-mid) 35%, white);

  /* Anatomical model: lit like a resin cast, in the site's own palette rather
     than in skin tones, which read as illustration rather than instrument. */
  /* Deepened: against --bg (#f3f6f5) the old --model-lo was barely a shade
     off the page, so the limb read as an unfinished render rather than a
     scanned cast. */
  --model-lo: #9db4ad;
  --model-hi: #fbfdfc;
  --model-rim: #aec0bb;
  --flow: #00c9a7;

  /* IBM Plex: classical “Roman” display + clinical instrument body (Cyrillic).
     Mono is reserved for instrument chrome — scan labels, nothing else. */
  --font-display: "IBM Plex Serif", "Source Serif 4", Georgia, serif;
  --font-body: "IBM Plex Sans", "Source Sans 3", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Editorial scale — real contrast between levels */
  --t-display: clamp(44px, 6.8vw, 88px);
  --t-h1: clamp(36px, 4.8vw, 60px);
  --t-h2: clamp(28px, 3.4vw, 44px);
  --t-h3: clamp(19px, 1.6vw, 23px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: 17px;
  /* Small-text floor. The patients are mostly 40+, and a lot of real
     information (prices' terms, roles, captions, dates) lived at 11–13.5px.
     Sentences never go below --t-meta; tracked caps never below --t-label. */
  --t-small: 15px;
  --t-meta: 14px;
  --t-label: 12.5px;

  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;
  --sp-20: 160px;

  /* Radius: one rounded family. Buttons are always pills. */
  --r-tag: 8px;
  --r-control: 14px;
  --r-frame: 20px;
  --r-card: 32px;
  --r-pill: 999px;

  --dur: 200ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --gutter: 16px;
  --measure: 1320px;
  --touch: 44px;

  /* Section rhythm — three levels, not one.
     Every section used to sit on --sp-12 (96px) top and bottom, so a page
     of 14 sections spent ~2 500px on gaps alone and nothing read as more
     important than anything else. Anchors get --rhythm-wide, ordinary
     sections --rhythm, and bands that belong with the section above them
     --rhythm-tight. */
  --rhythm: clamp(48px, 5.5vw, 76px);
  --rhythm-tight: clamp(32px, 3.5vw, 48px);
  --rhythm-wide: clamp(64px, 7.5vw, 104px);
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1100px) {
  :root {
    --gutter: 64px;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.68;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

img,
video {
  height: auto;
}

a {
  color: var(--teal-deep);
}

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.rw-lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 40ch;
}

.rw-muted {
  color: var(--text-muted);
  font-size: var(--t-small);
}

.rw-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin: 0 0 var(--sp-3);
}

.rw-eyebrow__crescent {
  width: 8px;
  height: 16px;
  flex: none;
}

.rw-eyebrow__crescent path {
  fill: var(--teal);
}

/* Label role. Tracked capitals belong to two things only: the crescent
   eyebrow (the brand mark) and the mono instrument chrome on scans. Every
   other label (field names, roles, table heads, fact names, footer heads) is
   sentence case at the meta size: in Cyrillic, spaced capitals at 12.5px were
   the hardest text on the site to read for a 40+ audience, and repeated on
   every component they read as template chrome rather than information. */
.rw-byline__label,
.rw-check__legend,
.rw-consult__label,
.rw-consult__meta dt,
.rw-credentials__group h3,
.rw-details dt,
.rw-footer__heading,
.rw-form label,
.rw-header__phone-label,
.rw-posts time,
.rw-posts__cat,
.rw-price-table th,
.rw-proc-facts dt,
.rw-proc-rail__price-label,
.rw-readout__label,
.rw-result__mark,
.rw-roster__role,
.rw-spec dt,
.rw-subnav__label,
.rw-tag,
.rw-team__role,
.rw-timeline__step,
.rw-toc__title,
.rw-trust__label {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

/* Short display lines that are not h1–h4 still get balanced wrapping, so
   a name or question never leaves one word alone on its last line at 360px. */
.rw-index__name,
.rw-roster__name,
.rw-team__name,
.rw-faq__item summary,
.rw-points__comfort,
.rw-story__name,
.rw-photo__title {
  text-wrap: balance;
}

.rw-figure {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}

.sr-only,
.screen-reader-text,
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  width: auto;
  height: auto;
  clip-path: none;
  left: 16px;
  top: 16px;
  z-index: 300;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 16px;
}

/* ---------- Layout ---------- */

.rw-container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rw-container--narrow {
  max-width: 820px;
}

.rw-container--wide {
  max-width: 1600px;
}

/* Inner pages wrap content in a container; blocks bring their own.
   Flatten the nested one so gutters are not doubled. */
.rw-container .rw-container {
  padding-inline: 0;
  max-width: none;
  width: 100%;
}

.rw-container .rw-container--narrow {
  max-width: 820px;
  margin-inline: 0;
  padding-inline: 0;
}

/* Gutenberg's default 24px block gap stacks on top of section padding and
   shows up as a blank strip between homepage bands. */
.rw-main--home > * {
  margin-block: 0;
}

.rw-entry > :is(.rw-faq, .rw-team, .rw-symptoms, .rw-process, .rw-diagnosis, .rw-stories, .rw-results, .rw-section, .rw-index, .rw-contact, .rw-cta) {
  margin-block: 0;
}

.rw-entry > .alignfull,
.rw-prose > .alignfull {
  margin-inline: 0;
}

.rw-main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-inline: 0;
  max-width: 68ch;
}

/* Page already has H1 + chrome; nested bands should not add another roof. */
.rw-entry > .rw-faq,
.rw-entry > .rw-team,
.rw-entry > .rw-symptoms,
.rw-entry > .rw-process,
.rw-entry > .rw-diagnosis,
.rw-entry > .rw-stories,
.rw-entry > .rw-results,
.rw-entry > .rw-section,
.rw-entry > .rw-index,
.rw-entry > .rw-contact {
  padding-top: 0;
}

.rw-entry > .rw-faq,
.rw-entry > .rw-team,
.rw-entry > .rw-symptoms,
.rw-entry > .rw-process,
.rw-entry > .rw-diagnosis,
.rw-entry > .rw-stories,
.rw-entry > .rw-results,
.rw-entry > .rw-section,
.rw-entry > .rw-index {
  padding-bottom: var(--sp-8);
}

.rw-entry > .rw-process--nested {
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  margin-top: 0;
  padding: 0 0 var(--sp-8);
}

.rw-main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-inline: 0;
  max-width: 68ch;
}

.rw-section {
  padding-block: var(--sp-12);
}

.rw-section--tight {
  padding-block: var(--sp-8);
}

.rw-section--tall {
  padding-block: var(--sp-20);
}

.rw-rule {
  width: 100%;
  height: 24px;
  display: block;
}

.rw-rule__line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---------- Brand mark ---------- */

.rw-mark {
  width: 26px;
  height: 42px;
  flex: none;
}

.rw-mark__crescent {
  fill: var(--teal-mid);
}

.rw-mark__line {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

/* ---------- Header ---------- */

.rw-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: background 480ms var(--ease), border-color 480ms var(--ease),
    backdrop-filter 480ms var(--ease), box-shadow 480ms var(--ease);
}

/* Logged in, the admin bar is pinned above 600px; the header stops under it.
   Below 600px WordPress lets the bar scroll away, so the header keeps top: 0. */
.admin-bar .rw-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
  .admin-bar .rw-header {
    top: 0;
  }
}

.rw-header--over-hero:not(.is-compact) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.rw-header.is-compact {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.35);
  border-bottom-color: var(--line);
}

.rw-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  transition: min-height 480ms var(--ease);
}

.rw-header.is-compact .rw-header__inner {
  min-height: 60px;
}

.rw-header.is-compact .rw-logo__img {
  height: 44px;
  max-height: 44px;
}

@media (min-width: 1000px) {
  .rw-header__inner {
    display: grid;
    grid-template-columns: minmax(168px, auto) minmax(0, 1fr) minmax(168px, auto);
    align-items: center;
    gap: 16px;
  }

  .rw-nav > ul {
    justify-content: center;
  }

  .rw-header__cta {
    justify-self: end;
  }
}

.rw-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
  flex: none;
}

.rw-logo__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}

.rw-logo__name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.rw-logo__kicker {
  font-size: var(--t-label);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.rw-logo__img {
  max-height: 52px;
  width: auto;
  height: 52px;
  transition: height 480ms var(--ease), max-height 480ms var(--ease);
}

.rw-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.rw-nav > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1000px) {
  .rw-header .rw-nav > ul {
    justify-content: center;
  }
}

.rw-nav > ul > li {
  position: relative;
  flex: none;
}

/* Only the mobile drawer collapses its groups; on desktop the submenus open
   on hover and the expander has no job. */
.rw-nav__expand {
  display: none;
}

.rw-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch);
  padding: 10px 12px;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}

.rw-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

/* The underline marks where the visitor is; hover only colours the text, so
   the current page and the pointer never look alike. */
.rw-nav > ul > li > a {
  transition: color var(--dur) var(--ease);
}

.rw-nav > ul > li > a:hover,
.rw-nav > ul > li:focus-within > a {
  color: var(--teal);
}

.rw-nav .current-menu-item > a::after,
.rw-nav .current-menu-parent > a::after,
.rw-nav .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.rw-nav__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg);
  margin: -4px 0 0 1px;
  opacity: 0.85;
  transition: transform var(--dur) var(--ease), margin var(--dur) var(--ease);
}

.rw-nav > ul > li:hover > a .rw-nav__chevron,
.rw-nav > ul > li:focus-within > a .rw-nav__chevron {
  transform: rotate(225deg);
  margin-top: 3px;
}

.rw-subnav {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 262px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  box-shadow: 0 18px 40px -22px rgba(22, 33, 31, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.rw-nav li:hover > .rw-subnav,
.rw-nav li:focus-within > .rw-subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rw-subnav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-control);
  font-size: var(--t-small);
  white-space: normal;
}

.rw-subnav a:hover {
  background: var(--teal-tint);
  color: var(--teal-deep);
}

.rw-nav a:active {
  color: var(--teal-deep);
}

.rw-subnav a:active {
  background: color-mix(in srgb, var(--teal) 18%, var(--white));
}

/* Where the visitor is: the top item keeps its underline and takes the
   colour, the page itself is marked inside its dropdown too. */
.rw-nav > ul > li.current-menu-item > a,
.rw-nav > ul > li.current-menu-ancestor > a {
  color: var(--teal-text);
}

.rw-subnav .current-menu-item > a {
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--teal);
}

/* The parent page opens its own dropdown, so the title over the chevron is
   plainly a page and not only a label. */
.rw-subnav__overview {
  margin: 0 0 6px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--line);
}

.rw-subnav__overview a {
  font-weight: 600;
  color: var(--teal-deep);
}

.rw-subnav__arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--dur) var(--ease);
}

.rw-subnav a:hover .rw-subnav__arrow {
  transform: translateX(3px);
}

.rw-header__cta {
  display: flex;
  align-items: center;
  flex: none;
  gap: 16px;
}

.rw-header .rw-btn {
  white-space: nowrap;
  padding: 11px 22px;
  line-height: 1.2;
}

.rw-header__phone {
  display: grid;
  text-align: right;
  text-decoration: none;
  color: inherit;
  line-height: 1.15;
  flex: none;
}

.rw-header__phone-label {
  color: var(--text-muted);
}

.rw-header__phone-num {
  font-family: var(--font-display);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rw-header__phone:hover .rw-header__phone-num {
  color: var(--teal-text);
}

/* Shown only in the band where the written-out number does not fit. */
.rw-header__phone-icon {
  display: none;
}

.rw-nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  position: relative;
  cursor: pointer;
}

.rw-nav-toggle__bar,
.rw-nav-toggle__bar::before,
.rw-nav-toggle__bar::after {
  display: block;
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.rw-nav-toggle__bar {
  top: 22px;
}

.rw-nav-toggle__bar::before {
  content: "";
  top: -6px;
}

.rw-nav-toggle__bar::after {
  content: "";
  top: 6px;
}

body.rw-nav-open .rw-nav-toggle__bar {
  background: transparent;
}

body.rw-nav-open .rw-nav-toggle__bar::before {
  transform: translateY(6px) rotate(45deg);
}

body.rw-nav-open .rw-nav-toggle__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Buttons ---------- */

.rw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--touch);
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.rw-btn--primary {
  background: var(--teal-cta);
  color: var(--white);
}

.rw-btn--primary:hover {
  background: var(--ink);
}

.rw-btn--secondary {
  background: transparent;
  color: var(--teal-deep);
  border-color: var(--teal-deep);
}

.rw-btn--secondary:hover {
  background: var(--teal-cta);
  color: var(--white);
}

.rw-btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}

.rw-btn--ghost:hover {
  border-color: var(--text);
}

.rw-btn--onteal {
  background: var(--white);
  color: var(--teal-cta);
}

.rw-btn--onteal-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.rw-btn--onteal-ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* Text link with a sliding arrow — affordance, not decoration */
.rw-link {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--teal-text);
  font-weight: 600;
  font-size: var(--t-small);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  padding-bottom: 2px;
}

.rw-link__arrow {
  transition: transform var(--dur) var(--ease);
}

.rw-link:hover {
  border-bottom-color: var(--teal);
}

.rw-link:hover .rw-link__arrow {
  transform: translateX(4px);
}

/* =========================================================================
   HERO — four layers: field, ghost limb, scanned model, diagnostic labels
   ========================================================================= */

.rw-hero {
  --rw-recede: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.rw-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 58% 72% at 78% 38%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 64%),
    radial-gradient(ellipse 46% 36% at 12% 88%, color-mix(in srgb, var(--bg-alt) 80%, transparent), transparent 70%),
    var(--bg);
  opacity: 0;
  animation: rw-fade-in 900ms var(--ease) forwards;
}

.rw-hero__ghost {
  position: absolute;
  inset: -12% -4% -18% 48%;
  width: auto;
  z-index: 1;
  pointer-events: none;
  color: var(--ink);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

.rw-hero__drift {
  width: 100%;
  height: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(calc(1 - var(--rw-recede) * 0.1));
}

.rw-hero .rw-hero__ghost {
  animation: rw-visual-in 1100ms var(--ease) 120ms forwards;
}

.rw-ghost {
  width: 100%;
  height: 100%;
}

.rw-ghost path {
  fill: color-mix(in srgb, var(--ink) 2.2%, transparent);
}

.rw-hero__grid {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-8);
  position: relative;
  z-index: 2;
}

@media (min-width: 1000px) {
  .rw-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: start;
    gap: var(--sp-4);
    padding-block: var(--sp-6) var(--sp-8);
  }
}

.rw-hero__copy {
  max-width: 38rem;
  position: relative;
  z-index: 3;
}

.rw-gbadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin: 18px 0 0;
  padding: 7px 14px 7px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.rw-gbadge:visited,
.rw-gbadge:hover,
.rw-gbadge:focus-visible {
  color: var(--ink);
}

.rw-gbadge:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 8%, transparent);
}

.rw-gbadge:active {
  transform: translateY(1px);
}

.rw-gbadge__logo {
  width: 18px;
  height: 18px;
  flex: none;
}

.rw-gbadge__score {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.rw-gbadge__stars {
  display: flex;
  align-items: center;
  gap: 1px;
  color: #f4b400;
  flex: none;
}

.rw-gbadge__star {
  width: 14px;
  height: 14px;
}

.rw-gbadge__label {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-light);
  white-space: nowrap;
}

.rw-hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.034em;
  margin: 0 0 var(--sp-4);
  /* The lines are authored with ;; — a width cap here re-broke them mid-phrase,
     so the headline stacked five ragged lines and pushed the CTA off the fold. */
  max-width: none;
  text-wrap: pretty;
}

/* Above the fold the display ceiling has to clear the longest authored line
   rather than the other way round; below 1000px the 6.8vw slope already does. */
@media (min-width: 1000px) {
  .rw-hero__title {
    font-size: clamp(56px, 5.3vw, 70px);
  }
}

.rw-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--teal-display);
}

.rw-hero__desc {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-muted);
  /* 40ch keeps the longer subtitle at three lines instead of four. */
  max-width: 40ch;
  margin: 0 0 var(--sp-6);
  text-wrap: pretty;
}

.rw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}

.rw-hero__phone {
  border-color: transparent;
  padding-inline: 4px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  min-height: 48px;
}

.rw-hero__phone:hover {
  border-color: transparent;
  color: var(--teal-text);
}

.rw-hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: var(--sp-3) 0 0;
  font-size: var(--t-meta);
  letter-spacing: 0.02em;
  color: var(--text-light);
}

.rw-hero__note span + span::before {
  content: "•";
  margin: 0 10px;
  color: var(--teal-mid);
}

/* Once the row wraps, the separator lands at the start of the second line and
   reads as a stray list bullet. Below that width the claims simply stack. */
@media (max-width: 560px) {
  .rw-hero__note {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .rw-hero__note span + span::before {
    content: none;
  }
}

.rw-hero__stage {
  position: relative;
  min-height: 320px;
  z-index: 2;
}

@media (min-width: 1000px) {
  .rw-hero__stage {
    min-height: min(68vh, 640px);
    align-self: stretch;
  }
}

.rw-hero__visual {
  position: absolute;
  inset: -6% 0 -12% -12%;
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  pointer-events: none;
}

.rw-hero .rw-hero__visual {
  animation: rw-visual-in 1100ms var(--ease) 220ms forwards;
}

.rw-scan {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rw-scan__aura {
  fill: color-mix(in srgb, var(--teal) 18%, transparent);
  filter: blur(12px);
}

.rw-scan__edge path {
  stroke: color-mix(in srgb, var(--ink) 28%, var(--model-rim));
  stroke-width: 1.6;
  fill: none;
}

.rw-scan__rim {
  fill: none;
  stroke-width: 2.2;
}

.rw-scan__landmarks path {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1;
}

.rw-scan__veins .rw-vein,
.rw-scan__flow .rw-flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: none;
}

.rw-scan__veins .rw-vein {
  stroke: var(--teal);
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
}

.rw-scan__veins .rw-vein--trunk {
  stroke-width: 5.5;
  opacity: 0.92;
}

.rw-scan__veins .rw-vein--branch {
  stroke-width: 2.6;
  opacity: 0.55;
}

.rw-scan__veins .rw-vein--varix {
  stroke-width: 3.6;
  opacity: 0.84;
}

.rw-hero .rw-scan__veins .rw-vein--trunk {
  animation: rw-draw-vein 1400ms var(--ease) 620ms forwards;
}

.rw-hero .rw-scan__veins .rw-vein--branch {
  animation: rw-draw-vein 1200ms var(--ease) 880ms forwards;
}

.rw-hero .rw-scan__veins .rw-vein--varix {
  animation: rw-draw-vein 1000ms var(--ease) 1120ms forwards;
}

.rw-scan__perforators path {
  stroke: color-mix(in srgb, var(--teal) 40%, transparent);
  stroke-width: 1;
  opacity: 0;
}

.rw-hero .rw-scan__perforators path {
  animation: rw-fade-in 800ms var(--ease) 1300ms forwards;
}

.rw-scan__flow .rw-flow {
  stroke: var(--flow);
  stroke-width: 3.4;
  stroke-dasharray: 14 34;
  opacity: 0;
}

.rw-scan__flow .rw-flow--trunk {
  stroke-width: 5;
}

.rw-scan__flow .rw-flow--varix {
  stroke: #2ad4b6;
}

.rw-hero .rw-scan__flow .rw-flow {
  animation: rw-flow-in 800ms var(--ease) 1600ms forwards,
    rw-circulate 18s ease-in-out 1600ms infinite;
}

.rw-scan__scale path {
  stroke: color-mix(in srgb, var(--ink) 16%, transparent);
  stroke-width: 1;
}

.rw-scan__scale--live path {
  stroke: var(--teal);
  opacity: 0.55;
}

.rw-scan__line {
  stroke: color-mix(in srgb, var(--teal) 70%, white);
  stroke-width: 1.15;
  opacity: 0.55;
}

.rw-scan__sweep {
  animation: rw-sweep 16s ease-in-out 1.8s infinite;
}

.rw-scan__nodes {
  opacity: 0;
}

.rw-hero .rw-scan__nodes {
  animation: rw-fade-in 700ms var(--ease) 1700ms forwards;
}

.rw-node {
  fill: var(--teal);
}

.rw-node__halo {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1;
  transform-origin: center;
  transform-box: fill-box;
  animation: rw-node-pulse 3.8s var(--ease) var(--rw-node-delay, 0s) infinite;
}

/* --- layout: bleed ------------------------------------------------------
   One photograph fills the first screen, edge to edge; the copy sits on its
   empty side. The photo is wide with the subject on the right, so on a wide
   screen it is anchored right and the left stays clear for the text. */
.rw-hero--bleed {
  min-height: calc(100svh - 76px);
  display: flex;
  align-items: center;
  background: #f9fafc;
}

.rw-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.04);
  animation: rw-backdrop-in 1600ms var(--ease) 80ms forwards;
}

.rw-hero__backdrop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchored to the floor: the feet stand near the photo's bottom edge, and a
     wide screen crops the knees rather than the toes. */
  object-position: 100% 100%;
  display: block;
}

/* A soft wash on the text side, so the copy holds on any width. */
.rw-hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 70% at 0% 100%, color-mix(in srgb, var(--teal-tint) 70%, transparent), transparent 72%),
    linear-gradient(90deg, #f9fafc 0%, color-mix(in srgb, #f9fafc 70%, transparent) 34%, transparent 56%);
}

/* The venous signature, held at the threshold of visibility on the text
   side: the clinic's own mark, not a pattern. Stretched to the band and
   faded before the photo's subject, so it never touches the skin. */
.rw-hero__texture {
  position: absolute;
  inset: 0 auto 0 0;
  width: 56%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: rw-texture-in 1800ms var(--ease) 600ms forwards;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}

.rw-hero__texture .rw-veins {
  display: block;
}

/* Stretched, the probe marks turn to ellipses and land on the lead. */
.rw-hero__texture .rw-veins__node {
  display: none;
}

.rw-hero__texture .rw-veins__line,
.rw-hero__texture .rw-veins__cross {
  vector-effect: non-scaling-stroke;
  stroke: var(--teal-display);
}

@keyframes rw-texture-in {
  to {
    opacity: 0.62;
  }
}

.rw-hero--bleed .rw-hero__grid {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.rw-hero--bleed .rw-hero__copy {
  max-width: 36rem;
}

/* Each headline line stays whole and ends before the photo's subject,
   which starts a little left of the middle. */
@media (min-width: 1000px) {
  .rw-hero--bleed .rw-hero__copy {
    max-width: min(40rem, 46vw);
  }

  .rw-hero--bleed .rw-hero__title {
    font-size: clamp(3.2rem, 4.5vw, 4.25rem);
  }

  .rw-hero--bleed .rw-reveal-line {
    white-space: nowrap;
  }
}

@keyframes rw-backdrop-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Narrower than the photo's empty side: the photo goes first, edge to edge,
   and the copy follows on the page background. */
@media (max-width: 999px) {
  .rw-hero--bleed {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .rw-hero--bleed .rw-hero__backdrop {
    position: relative;
    inset: auto;
    height: min(58svh, 520px);
  }

  /* The fade starts below the toes. */
  .rw-hero--bleed .rw-hero__backdrop::after {
    background: linear-gradient(180deg, transparent 93%, #f9fafc 100%);
  }

  /* A little air left of the toes; the frame is too narrow for the seat. */
  .rw-hero--bleed .rw-hero__backdrop-img {
    object-position: 88% 100%;
  }
}

.rw-hero__backdrop picture {
  display: contents;
}

/* On a phone 58svh of photo pushed the headline under the call bar: the
   first screen showed a leg and an eyebrow, nothing to read. The photo now
   leaves room for the headline and the lead. */
@media (max-width: 639px) {
  .rw-hero--bleed .rw-hero__backdrop {
    height: min(38svh, 340px);
  }
}

@media (max-width: 999px) {
  .rw-hero__texture {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-hero__backdrop {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .rw-hero__texture {
    animation: none;
    opacity: 0.62;
  }
}

/* The doctor: the face of the practice, standing in front of the scan on a
   teal arch. The scan keeps its place behind him, one step back. */
.rw-hero__figure {
  position: absolute;
  left: -10%;
  /* The waist crop is cut off by the section edge, so he stands on it:
     the stage ends one grid padding above that edge. */
  bottom: calc(var(--sp-8) * -1);
  width: 56%;
  z-index: 3;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.rw-hero .rw-hero__figure {
  animation: rw-visual-in 1100ms var(--ease) 320ms forwards;
}

.rw-hero__arch {
  position: absolute;
  left: 2%;
  bottom: 0;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--teal) 26%, transparent),
    color-mix(in srgb, var(--teal) 9%, transparent)
  );
}

.rw-hero__doctor {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 492 / 760;
  object-fit: cover;
  object-position: 50% 0;
}

/* The one credential worth carrying above the fold, tucked into the bottom
   corner of the figure so it reads as a caption on the photograph. */
.rw-hero__plate {
  position: absolute;
  left: 4%;
  bottom: 12%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter: blur(8px);
  text-decoration: none;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}

.rw-hero__plate:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.rw-hero__plate-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.rw-hero__plate-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
}

/* --- stage: doctor ------------------------------------------------------
   The venous signature runs the full stage, the arch and the doctor stand in
   the middle of it, and the markers keep to the outer edges. */
.rw-veins {
  width: 100%;
  height: 100%;
  /* The art is sliced to cover, so it has to stay inside the stage: on a
     phone the stage sits right under the copy. */
  overflow: hidden;
}

.rw-veins__line,
.rw-veins__cross {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
}

.rw-veins__cross {
  stroke-width: 1.2;
  opacity: 0.34;
}

.rw-veins__node .rw-node__halo {
  opacity: 0.5;
}

.rw-hero__stage--doctor .rw-hero__visual {
  inset: -4% 2% -12% 2%;
}

.rw-hero__stage--doctor .rw-hero__figure {
  left: 14%;
  width: 74%;
}

.rw-hero__stage--doctor .rw-hero__arch {
  left: 0;
  width: 100%;
}

.rw-hero__stage--doctor .rw-marker:nth-child(1) {
  top: 4%;
}

.rw-hero__stage--doctor .rw-marker:nth-child(3) {
  left: 0;
  bottom: 16%;
}

/* --- stage: both --------------------------------------------------------
   With the scan behind him the two figures split the stage: the scan slides
   right and steps back, so they read as background and foreground. */
.rw-hero__stage--both .rw-hero__visual {
  inset: -6% -8% -12% 38%;
}

.rw-hero__stage--both .rw-scan {
  opacity: 0.62;
}

.rw-hero__stage--both .rw-hero__markers {
  inset: 8% 4% 12% 38%;
}

.rw-hero__markers {
  position: absolute;
  inset: 8% 4% 12% 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.rw-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
}

.rw-hero .rw-marker {
  animation: rw-enter 900ms var(--ease) calc(var(--rw-step) * 90ms + 1500ms) forwards;
}

.rw-marker:nth-child(1) {
  top: 6%;
  left: 0;
}

.rw-marker:nth-child(2) {
  top: 44%;
  right: 0;
  left: auto;
  flex-direction: row-reverse;
}

.rw-marker:nth-child(3) {
  bottom: 10%;
  left: 10%;
}

.rw-marker__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent);
  flex: none;
}

.rw-marker__text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--text-light);
}

.rw-hero__step {
  opacity: 0;
  transform: translateY(14px);
}

.rw-hero .rw-hero__step {
  animation: rw-enter 800ms var(--ease) calc(var(--rw-step) * 110ms + 280ms) forwards;
}

/* Headline reveal — establishes reading order once, on load */
.rw-reveal-line {
  display: block;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(12px);
}

.rw-hero .rw-reveal-line {
  animation: rw-unmask 900ms var(--ease) calc(var(--rw-step) * 110ms + 360ms) forwards;
}

/* Facts as a hairline column, not badges */
.rw-hero__facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.rw-hero__side {
  position: relative;
  z-index: 2;
}

.rw-hero__facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--text-muted);
}

.rw-hero__facts b {
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Anatomy: bleeds off the right edge, cropped */
.rw-hero__anatomy {
  position: absolute;
  inset: 0 auto 0 auto;
  right: max(-60px, -4vw);
  top: 0;
  bottom: -8%;
  width: min(46vw, 620px);
  color: var(--line-strong);
  pointer-events: none;
  z-index: 1;
}

.rw-anatomy {
  width: 100%;
  height: 100%;
}

.rw-anatomy__contour path {
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.rw-anatomy__crescent path {
  fill: var(--teal);
  opacity: 0.05;
}

.rw-anatomy__perforators path {
  stroke: var(--teal-mid);
  stroke-width: 1;
  opacity: 0.4;
  vector-effect: non-scaling-stroke;
}

.rw-anatomy__nodes circle {
  fill: var(--teal);
  opacity: 0.5;
}

.rw-vein {
  fill: none;
  stroke: var(--teal);
  vector-effect: non-scaling-stroke;
}

.rw-vein--major {
  stroke-width: 2.4;
  opacity: 0.55;
}

.rw-vein--minor {
  stroke-width: 1.5;
  opacity: 0.34;
}

/* Circulation: subject metaphor — slow ease, not robotic linear loop */
.rw-anatomy--flow .rw-vein {
  stroke-dasharray: 26 190;
  animation: rw-circulate 16s ease-in-out infinite;
}

.rw-anatomy--flow .rw-vein--minor:nth-of-type(2) {
  animation-duration: 20s;
  animation-delay: -4s;
}

.rw-anatomy--flow .rw-vein--minor:nth-of-type(3) {
  animation-duration: 24s;
  animation-delay: -9s;
}

@keyframes rw-circulate {
  to {
    stroke-dashoffset: -864;
  }
}

@media (max-width: 999px) {
  .rw-hero__anatomy {
    right: -18%;
    width: 78%;
    opacity: 0.32;
  }

  .rw-hero__grid {
    padding-block: var(--sp-6) var(--sp-8);
  }

  .rw-hero__stage {
    min-height: 360px;
    order: 2;
  }

  .rw-hero__ghost {
    inset: auto -18% -6% 18%;
    width: min(88vw, 560px);
    opacity: 0.7;
  }

  .rw-hero__visual {
    inset: 0 0 -8% 12%;
  }

  .rw-hero__stage--both .rw-hero__visual {
    inset: 0 -4% -8% 46%;
  }

  .rw-hero__stage--both .rw-hero__markers {
    inset: 8% 4% 12% 46%;
  }

  /* Stacked layout: the stage runs the full width, so the doctor holds its
     left third and the scan — when it is on — the right half. */
  .rw-hero__figure {
    left: 2%;
    width: 36%;
  }

  .rw-hero__stage--doctor .rw-hero__figure {
    left: 28%;
    width: 44%;
  }

  /* Stacked, the figure runs deep past the fold, so the plate climbs. */
  .rw-hero__plate {
    left: 2%;
    bottom: 30%;
  }

  .rw-scan__sweep,
  .rw-scan__aura {
    display: none;
  }

  .rw-scan__scale {
    opacity: 0.35;
  }

  .rw-hero__phone {
    font-size: 18px;
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  .rw-hero__stage {
    min-height: 440px;
  }

  .rw-hero__figure {
    width: 34%;
  }
}

@keyframes rw-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes rw-visual-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rw-draw-vein {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes rw-flow-in {
  to {
    opacity: 0.85;
  }
}

@keyframes rw-enter {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rw-unmask {
  to {
    clip-path: inset(0 0 -0.2em 0);
    opacity: 1;
    transform: none;
  }
}

@keyframes rw-sweep {
  0%,
  100% {
    transform: translateY(36px);
  }
  50% {
    transform: translateY(560px);
  }
}

@keyframes rw-node-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.85);
  }
}

.no-js .rw-hero__field,
.no-js .rw-hero__ghost,
.no-js .rw-hero__visual,
.no-js .rw-hero__figure,
.no-js .rw-hero__step,
.no-js .rw-reveal-line,
.no-js .rw-marker,
.no-js .rw-scan__nodes,
.no-js .rw-scan__perforators path,
.no-js .rw-scan__flow .rw-flow {
  opacity: 1;
  transform: none;
  clip-path: none;
  animation: none;
}

.no-js .rw-scan__veins .rw-vein {
  stroke-dashoffset: 0;
}

.rw-hero.is-offstage .rw-scan__sweep,
.rw-hero.is-offstage .rw-scan__flow .rw-flow,
.rw-hero.is-offstage .rw-node__halo {
  animation-play-state: paused;
}

/* =========================================================================
   TRUST — proof bar, not cards. Continues the diagnostic story.
   ========================================================================= */

.rw-trust {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-block: var(--sp-8);
}

.rw-trust__lead {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.18;
  max-width: 18ch;
  margin: 0 0 var(--sp-6);
  color: var(--ink);
}

.rw-trust__row {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
  .rw-trust__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rw-trust__item {
  padding: var(--sp-8) var(--sp-6) var(--sp-8) 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  align-content: start;
}

@media (min-width: 860px) {
  .rw-trust__item {
    border-bottom: 0;
    border-left: 1px solid var(--line);
    padding: var(--sp-8) var(--sp-6);
  }

  .rw-trust__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

.rw-trust__figure {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 0.92;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
}

.rw-trust__label {
  font-weight: 600;
  color: var(--text-muted);
  max-width: 24ch;
}

.rw-trust__note {
  font-size: var(--t-meta);
  color: var(--text-light);
  max-width: 28ch;
}

/* =========================================================================
   SYMPTOMS — numbered editorial rows + anatomy zones. No cards.
   ========================================================================= */

.rw-symptoms {
  padding-block: var(--rhythm-tight) var(--rhythm);
}

.rw-points + .rw-symptoms {
  padding-top: var(--sp-4);
}

/* =========================================================================
   KEY POINTS — number, proof, then the surgeon. Hairlines, not cards.
   ========================================================================= */

.rw-points {
  position: relative;
  z-index: 2;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding-block: var(--rhythm-tight);
  scroll-margin-top: 80px;
}

@media (min-width: 900px) {
  .rw-points {
    padding-block: var(--sp-12);
  }
}

.rw-points__lead {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.18;
  max-width: 22ch;
  margin: 0 0 var(--sp-8);
  color: var(--ink);
}

.rw-points__layout {
  display: grid;
  gap: var(--sp-6);
  min-width: 0;
  align-items: start;
}

.rw-points__expertise { grid-area: expertise; min-width: 0; }
.rw-points__featured { grid-area: featured; min-width: 0; }
.rw-points__compact { grid-area: compact; min-width: 0; }
.rw-points__photo { grid-area: photo; }
.rw-points__care { grid-area: care; min-width: 0; }

.rw-points__layout {
  grid-template-areas:
    "expertise"
    "featured"
    "compact"
    "photo"
    "care";
}

@media (min-width: 900px) {
  .rw-points__layout {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    grid-template-areas:
      "expertise featured"
      "expertise compact"
      "care      care";
    column-gap: var(--sp-12);
    row-gap: 0;
  }

  .rw-points__layout--with-photo {
    grid-template-areas:
      "expertise featured"
      "photo     compact"
      "photo     care";
  }

  /* Without the portrait nothing holds the left column open under the number. */
  .rw-points__layout:not(.rw-points__layout--with-photo) .rw-points__expertise {
    padding-bottom: var(--sp-6);
  }
}

.rw-points__expertise-heading {
  display: grid;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.rw-points__figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 128px);
  font-weight: 500;
  line-height: 0.88;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.05em;
}

.rw-points__expertise-kicker {
  display: block;
  max-width: 11em;
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.18;
}

.rw-points__expertise-text {
  margin: var(--sp-3) 0 0;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text-muted);
}

.rw-points__featured,
.rw-points__compact {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rw-points__featured {
  gap: 0;
  border-top: 1px solid var(--line);
}

.rw-points__first {
  margin: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}

.rw-points__first:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rw-points__first-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.22;
  margin: 0;
  color: var(--ink);
}

.rw-points__first-text {
  margin: 8px 0 0;
  max-width: 36ch;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--text-muted);
}

.rw-points__compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.rw-points__note {
  margin: 0;
}

.rw-points__note-title {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0;
  color: var(--ink);
}

.rw-points__note-text {
  margin: 4px 0 0;
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--text-light);
}

.rw-points__photo {
  display: block;
  position: relative;
  isolation: isolate;
  width: min(280px, 72vw);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-frame);
  border: 1px solid var(--line);
  background: var(--white);
}

.rw-points__ghost {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 0;
  width: 92%;
  height: auto;
  transform: translateX(-54%);
  color: var(--teal-deep);
  opacity: 0.18;
  pointer-events: none;
}

.rw-points__ghost .rw-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 64 / 104;
}

.rw-points__photo img,
.rw-points__photo .rw-team__empty {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.rw-points__photo--figure,
.rw-points__photo:has(.rw-img--figure) {
  background: var(--bg);
}

/* A cut-out portrait on a plate. The paper tone rather than white, so the
   portrait lifts off the band without becoming the loudest thing in it. */
.rw-points__photo--plate {
  background: var(--bg);
}

.rw-points__photo--figure img,
.rw-points__photo:has(.rw-img--figure) img {
  object-fit: contain;
  object-position: center bottom;
}

.rw-points__photo:hover {
  border-color: var(--line-strong);
}

@media (prefers-reduced-transparency: reduce) {
  .rw-points__ghost {
    opacity: 0.22;
  }
}

.rw-points__care {
  display: grid;
  align-content: start;
  gap: 0;
}

.rw-points__care-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.rw-points__care-text {
  margin: 10px 0 0;
  max-width: 38ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--text-muted);
}

.rw-points__comfort {
  margin: var(--sp-3) 0 0;
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.018em;
  line-height: 1.32;
  color: var(--ink);
}

.rw-points__anesth {
  margin: 10px 0 0;
  max-width: 42ch;
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--text-muted);
}

@media (min-width: 900px) {
  /* One hairline down the whole right column: the three areas butt together
     (row-gap 0) and each stretches to its row, so the spine never breaks. */
  .rw-points__featured,
  .rw-points__compact,
  .rw-points__care {
    align-self: stretch;
    align-content: start;
  }

  .rw-points__featured {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-left: 0;
  }

  /* Indent on the item, not the list, so the rules between claims reach the spine. */
  .rw-points__first {
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-8);
  }

  .rw-points__first:first-child {
    padding-top: 0;
  }

  .rw-points__first:last-child {
    padding-bottom: var(--sp-6);
  }

  .rw-points__compact,
  .rw-points__care {
    border-left: 1px solid var(--line);
    padding-left: var(--sp-8);
  }

  .rw-points__compact {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-6);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-6);
  }

  /* Cap-height of the figure onto the first claim's, not its line box. */
  .rw-points__figure {
    margin-top: -0.1em;
  }

  /* The portrait takes its height from the text beside it, never the reverse —
     otherwise a 3:4 frame opens a hole between the notes and the follow-up. */
  .rw-points__photo {
    width: min(100%, 370px);
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    margin-top: var(--sp-8);
  }

  .rw-points__photo--figure img,
  .rw-points__photo:has(.rw-img--figure) img {
    object-fit: contain;
    object-position: center bottom;
  }

  .rw-points__photo img,
  .rw-points__photo .rw-team__empty {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
  }

  .rw-points__care {
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 899px) {
  .rw-points__layout {
    gap: var(--sp-4);
  }

  .rw-points__featured {
    padding-top: var(--sp-2);
  }

  .rw-points__first {
    padding: var(--sp-2) 0 var(--sp-3);
  }

  .rw-points__compact {
    margin-top: 0;
  }

  .rw-points__care {
    padding-top: 0;
  }
}

.rw-symptoms__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 1000px) {
  .rw-symptoms__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-12);
    align-items: start;
  }
}

.rw-symptoms__intro {
  position: sticky;
  top: 108px;
}

.rw-symptoms__check {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

/* The list is answerable, so the marker carries state instead of an index. */
.rw-check {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.rw-check__legend {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--text-light);
}

.rw-symptom-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.rw-symptom-list li {
  border-bottom: 1px solid var(--line);
}

.rw-check__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rw-check__label {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-2);
  align-items: baseline;
  min-height: 44px;
  padding: 18px 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.rw-check__box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-tag);
  background: var(--white);
  transform: translateY(4px);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.rw-check__box svg {
  width: 100%;
  height: 100%;
}

.rw-check__tick {
  stroke: var(--white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset var(--dur) var(--ease);
}

.rw-check__label:hover .rw-check__box {
  border-color: var(--teal);
}

.rw-check__input:focus-visible + .rw-check__label .rw-check__box {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.rw-check__input:checked + .rw-check__label .rw-check__box {
  background: var(--teal);
  border-color: var(--teal);
}

.rw-check__input:checked + .rw-check__label .rw-check__tick {
  stroke-dashoffset: 0;
}

.rw-check__text {
  display: block;
}

.rw-symptom-list__name {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 27px);
  letter-spacing: -0.02em;
}

.rw-check__detail {
  display: block;
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.6;
  margin-top: 2px;
}

/* Read-out: what the visitor ticked, compiled for the consultation. */
.rw-readout {
  padding: var(--sp-4);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--r-frame);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.rw-readout.is-active {
  background: var(--teal-tint);
  border-color: color-mix(in srgb, var(--teal) 30%, transparent);
  border-left-color: var(--teal);
}

.rw-readout__label {
  margin: 0 0 var(--sp-1);
  font-weight: 600;
  color: var(--text-light);
}

.rw-readout__body {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 54ch;
}

.rw-readout__body--fact {
  margin-top: var(--sp-1);
}

.rw-readout__list {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 34ch;
}

.rw-readout__list:empty {
  display: none;
}

.rw-readout__action {
  margin: var(--sp-3) 0 0;
}

/* =========================================================================
   DIAGNOSIS — Doppler specimen on clinical paper
   After a bleed photograph this stays on paper so the photo is the one
   dark beat. The panel itself is ink: the instrument on the table.
   ========================================================================= */

.rw-diagnosis {
  background: var(--bg);
  padding-block: var(--rhythm) var(--rhythm-tight);
  overflow: hidden;
}

.rw-diagnosis--page {
  padding-block: 0 var(--sp-8);
}

.rw-photo--overlay + .rw-diagnosis .rw-eyebrow {
  display: none;
}

.rw-diagnosis__copy {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

.rw-diagnosis__copy > * {
  margin: 0;
}

.rw-diagnosis .rw-lead {
  max-width: 38ch;
}

.rw-diagnosis__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 1000px) {
  .rw-diagnosis__grid {
    grid-template-columns: minmax(32rem, 0.9fr) minmax(0, 1.2fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .rw-doppler-panel {
    max-width: none;
    justify-self: stretch;
    width: 100%;
  }
}

/* Снимка на апарата на мястото на кривата — същата рамка, без тъмния фон. */
.rw-diagnosis__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-alt);
}

.rw-diagnosis__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Апарат на бял фон: целият, без рязане (като .rw-proc-hero__img--whole). */
.rw-diagnosis__photo--whole {
  background: #fff;
}

.rw-diagnosis__photo--whole img {
  box-sizing: border-box;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: var(--sp-4);
}

.rw-doppler-panel {
  border: 1px solid var(--ink);
  border-radius: var(--r-card);
  background: var(--ink);
  padding: var(--sp-3);
  margin: 0;
}

.rw-doppler-panel__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d8f8c;
  padding-bottom: var(--sp-2);
}

.rw-doppler {
  width: 100%;
  height: auto;
}

.rw-doppler__grid path {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.rw-doppler__baseline {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.rw-doppler__wave {
  stroke: var(--teal-mid);
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 4200;
  stroke-dashoffset: 4200;
}

/* Trace once when the diagnosis panel enters view — not an infinite loop */
.rw-doppler-panel.is-in .rw-doppler__wave,
.rw-observe.is-in .rw-doppler__wave {
  animation: rw-trace 2.4s var(--ease) forwards;
}

.no-js .rw-doppler__wave {
  stroke-dashoffset: 0;
}

@keyframes rw-trace {
  to {
    stroke-dashoffset: 0;
  }
}

.rw-doppler-panel__legend {
  display: none;
}

/* =========================================================================
   TREATMENTS — a numbered index, not a card grid
   ========================================================================= */

.rw-index {
  padding-block: var(--rhythm-tight) var(--rhythm);
}

/* Diagnosis and methods are one clinical argument. Do not leave a chapter gap. */
.rw-diagnosis + .rw-index {
  padding-top: var(--sp-3);
}

.rw-index__head {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

/* Thesis paragraph, not a caption: 40ch stacked it into a thin column.
   Full width would be worse — a 21px lead over 110ch is tiring to read. */
.rw-index__head .rw-lead {
  max-width: 68ch;
}

@media (min-width: 900px) {
  .rw-index__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

.rw-index__list {
  border-top: 1px solid var(--line-strong);
}

.rw-index__row {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}

@media (min-width: 900px) {
  .rw-index__row {
    grid-template-columns: 3.4rem minmax(0, 5fr) minmax(0, 5fr);
    align-items: baseline;
    gap: var(--sp-4);
  }
}

.rw-index__row:hover {
  border-bottom-color: var(--teal);
}

.rw-index__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.rw-index__num {
  font-family: var(--font-display);
  font-size: var(--t-meta);
  /* teal-mid was 2.1:1 at 14px. */
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}

.rw-index__name {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.rw-index__arrow {
  color: var(--teal-text);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  flex: none;
}

.rw-index__row:hover .rw-index__arrow,
.rw-index__row:focus-within .rw-index__arrow {
  opacity: 1;
  transform: translateX(0);
}

.rw-index__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 48ch;
}

.rw-index__foot {
  margin-top: var(--sp-6);
}

/* =========================================================================
   FEATURED — full-bleed teal, price as display type
   ========================================================================= */

.rw-featured {
  background: var(--teal-deep);
  color: #eaf8f5;
  padding-block: var(--rhythm-wide);
  position: relative;
  overflow: hidden;
}

.rw-featured h2 {
  color: var(--white);
  font-size: var(--t-h2);
}

.rw-featured .rw-eyebrow {
  color: var(--on-teal);
}

.rw-featured .rw-eyebrow__crescent path {
  fill: var(--on-teal);
}

.rw-featured__grid {
  display: grid;
  gap: var(--sp-8);
  position: relative;
  z-index: 2;
}

@media (min-width: 900px) {
  .rw-featured__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--sp-12);
    align-items: end;
  }
}

.rw-featured__desc {
  color: var(--on-teal);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 52ch;
}

.rw-featured__price {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
  font-family: var(--font-display);
  line-height: 0.95;
  color: var(--white);
  margin: 0;
}

.rw-featured__figure {
  font-size: clamp(48px, 6vw, 82px);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}

.rw-featured__currency {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--on-teal);
}

.rw-featured__note {
  color: var(--on-teal);
  font-size: var(--t-small);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--sp-2);
  margin-top: var(--sp-3);
  max-width: 40ch;
}

.rw-featured__anatomy {
  position: absolute;
  right: -6%;
  top: -14%;
  bottom: -14%;
  width: min(40vw, 460px);
  color: rgba(255, 255, 255, 0.14);
  z-index: 1;
  pointer-events: none;
}

.rw-featured__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(54%, 740px);
  z-index: 1;
  pointer-events: none;
}

/* The price and its fine print sit directly on top of this photo. At the old
   0.5 opacity the ground under them varied with the image, and the small print
   dropped below AA in the lighter patches. The photo stays, quieter, under a
   scrim that gives the text a predictable surface. */
.rw-featured__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--teal-deep) 0%,
    color-mix(in srgb, var(--teal-deep) 72%, transparent) 42%,
    color-mix(in srgb, var(--teal-deep) 58%, transparent) 100%
  );
}

.rw-featured__photo img,
.rw-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 38%;
  opacity: 0.34;
  mix-blend-mode: luminosity;
  filter: saturate(0.65) contrast(1.06);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 78%);
}

@media (max-width: 899px) {
  .rw-featured__photo {
    width: 100%;
  }

  .rw-featured__photo img,
  .rw-featured__img {
    opacity: 0.18;
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 88%);
  }
}

.rw-featured__anatomy .rw-vein {
  stroke: var(--teal-mid);
}

.rw-featured__anatomy .rw-anatomy__crescent path {
  fill: #fff;
  opacity: 0.04;
}

.rw-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--sp-6);
}

/* =========================================================================
   PHOTO BREAK — quiet editorial photographs, not stock cards
   ========================================================================= */

.rw-photo {
  margin: 0;
  padding-block: var(--sp-8);
}

.rw-photo--bleed {
  padding-block: 0;
}

.rw-container .rw-photo--bleed,
.rw-entry .rw-photo--bleed,
.rw-prose .rw-photo--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.rw-photo__frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-alt);
  border-radius: var(--r-card);
}

.rw-photo--bleed .rw-photo__frame {
  border-radius: 0;
}

.rw-photo--bleed .rw-photo__bleed .rw-photo__frame {
  min-height: min(68vh, 760px);
}

.rw-photo--overlay .rw-photo__bleed .rw-photo__frame {
  min-height: min(62dvh, 720px);
  height: min(62dvh, 720px);
}

.rw-photo__frame--plate {
  max-height: 640px;
}

.rw-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rw-object, 50% 50%);
  display: block;
}

.rw-photo--bleed .rw-photo__img {
  min-height: min(68vh, 760px);
  max-height: 820px;
}

.rw-photo--overlay .rw-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

.rw-photo--plate .rw-photo__img {
  aspect-ratio: 16 / 9;
  max-height: 640px;
}

.rw-photo--split .rw-photo__img {
  aspect-ratio: var(--rw-ratio, 4 / 5);
  min-height: 420px;
}

/* Собствената пропорция важи и на телефон: 420px долна граница там правеше
   хоризонталния кадър отново изправен и изрязваше краищата му. */
.rw-photo--ratio .rw-photo__img {
  min-height: 0;
}

.rw-photo--clinical .rw-photo__img {
  filter: saturate(0.78) contrast(1.04);
}

.rw-photo--stone .rw-photo__img {
  filter: saturate(0.88) contrast(1.05);
}

.rw-photo__link {
  display: block;
  color: inherit;
}

.rw-photo__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
}

@media (min-width: 900px) {
  .rw-photo__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-12);
    align-items: center;
  }

  .rw-photo--flip .rw-photo__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .rw-photo--flip .rw-photo__frame {
    order: 2;
  }

  /* Full-width split: a 4:5 portrait at 7/12 stood ~700px tall beside three
     lines of caption, leaving a well of empty page above and below them.
     The photos here are shot upright, so the frame keeps its shape and gets
     smaller instead. The caption sits level with the photo's middle: at
     its foot it left a well of empty page over it as tall as the photo.
     Not inside page content: there the split carries portraits at full size. */
  .rw-photo--split.alignfull:not(.rw-entry *) .rw-photo__grid {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    align-items: center;
  }

  .rw-photo--split.rw-photo--flip.alignfull:not(.rw-entry *) .rw-photo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }

  /* Inner pages: the same cure as the full-width split. At 1.15fr the 4:5
     portrait stood 926px tall beside a 265px caption pinned to its top, with
     a 660px well under the words and a third of the row empty to their right.
     The frame keeps its shape and gets smaller, the caption takes the width
     it needs and sits level with the photo's middle. */
  .rw-entry .rw-photo--split .rw-photo__grid {
    grid-template-columns: minmax(0, min(30rem, 50%)) minmax(16rem, 1fr);
    column-gap: var(--sp-12);
    align-items: center;
  }

  .rw-entry .rw-photo--split.rw-photo--flip .rw-photo__grid {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, min(30rem, 50%));
  }
}

.rw-sheet__entry > .rw-photo:first-child {
  padding-top: 0;
}

/* The index above already closes on its own rhythm; adding the photo's
   padding on top of it opened a ~160px gap under „Всички методи“. */
.rw-index + .rw-photo {
  padding-top: 0;
}

/* В текста на страница снимката принадлежи на абзаца над нея: близо до
   него, далеч от следващото заглавие. С padding отгоре и отдолу стоеше
   на 89px от текста и на 112px от следващата секция — по средата. */
.rw-entry > .rw-photo--plate,
.rw-entry > .rw-photo-row {
  padding-block: 0;
  margin-block: var(--sp-4) var(--sp-8);
}

.rw-entry > .rw-photo--plate:has(+ .rw-photo-row) {
  margin-bottom: var(--sp-4);
}

.rw-entry > .rw-photo--plate .rw-photo__caption--under {
  padding-bottom: 0;
}

.rw-photo__caption {
  margin: 0;
  max-width: 42ch;
}

/* :not() — the eyebrow and the onward link are <p> too; this rule used to
   outrank them and set the label and the link in the serif. It is also kept
   off the overlay caption: there the paragraph sits on the dark plate, and
   this rule's --ink outranked .rw-photo__caption--on p and made it 1.8:1. */
.rw-photo__caption:not(.rw-photo__caption--on) p:not(.rw-eyebrow, .rw-photo__more) {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}

.rw-photo__caption--under {
  padding-block: var(--sp-4) var(--sp-8);
}

.rw-photo--bleed .rw-photo__caption--under {
  padding-block: var(--sp-4) var(--sp-12);
}

.rw-photo__caption .rw-eyebrow {
  margin-bottom: var(--sp-2);
}

/* Bleed + copy: the photograph is the page. Четимостта я носи подложката под
   текста (.rw-photo__plate), не градиентът — затова тук той е само леко
   заземяване на долния ръб и не гаси светлите кадри. */
.rw-photo--overlay .rw-photo__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgb(8 18 16 / 0.42) 0%,
      rgb(8 18 16 / 0.18) 26%,
      transparent 52%
    ),
    linear-gradient(
      to right,
      rgb(8 18 16 / 0.16) 0%,
      transparent 44%
    );
}

.rw-photo__caption--on {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: none;
  margin: 0;
  padding: var(--sp-8) 0 var(--sp-8);
}

.rw-photo__copy {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Подложката се събира около текста, не се разпъва по цялата колона. */
.rw-photo__plate {
  display: inline-block;
  max-width: min(52ch, 100%);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-radius: var(--r-frame);
  /* Плътността не зависи от замъгляването. Част от браузърите докладват
     поддръжка на backdrop-filter, но не го рисуват (без GPU, при „намалена
     прозрачност“, при заснемане); ако плътността падаше заради @supports,
     точно там текстът ставаше нечетим. Блурът е добавка, не условие. */
  background: rgb(8 18 16 / 0.78);
  backdrop-filter: blur(16px) saturate(1.1);
}

.rw-photo__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #f4f7f6;
}

.rw-photo__crescent {
  width: 14px;
  height: 28px;
  flex-shrink: 0;
}

.rw-photo__crescent path {
  fill: var(--teal-mid);
}

.rw-photo__caption--on p {
  margin: 0;
  max-width: 32ch;
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: #c5d0cd;
}

.rw-photo__more {
  margin-top: var(--sp-3);
}

.rw-photo__caption--on .rw-link {
  /* Plain teal-mid sat at 4.4:1 on the plate; a touch of white clears AA. */
  color: color-mix(in srgb, var(--teal-mid) 78%, white);
  border-bottom-color: color-mix(in srgb, var(--teal-mid) 45%, transparent);
}

.rw-photo__caption--on .rw-link:hover {
  color: #e8f4f1;
  border-bottom-color: #e8f4f1;
}

@media (max-width: 767px) {
  .rw-photo--overlay .rw-photo__bleed .rw-photo__frame {
    min-height: min(72dvh, 640px);
    height: min(72dvh, 640px);
  }

  .rw-photo__caption--on {
    padding-block: var(--sp-6) var(--sp-4);
  }

  .rw-photo__title {
    font-size: clamp(36px, 11vw, 52px);
    gap: 10px;
  }

  .rw-photo__crescent {
    width: 11px;
    height: 22px;
  }

  .rw-photo__caption--on p {
    font-size: 18px;
    max-width: 28ch;
  }
}

.rw-featured .rw-hero__facts {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.rw-featured .rw-hero__facts li {
  border-bottom-color: rgba(255, 255, 255, 0.16);
  color: var(--on-teal);
}

.rw-featured .rw-hero__facts b {
  color: var(--on-teal);
}

/* =========================================================================
   PATIENT STORIES — videos first, then short rounded letters
   ========================================================================= */

.rw-stories {
  padding-block: var(--rhythm);
  background: var(--bg-cream);
}

.rw-stories__head {
  display: grid;
  gap: 12px;
  margin-bottom: var(--sp-6);
}

@media (min-width: 900px) {
  .rw-stories__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-3);
  }
}

.rw-stories__head .rw-lead {
  margin: 0;
  max-width: 46ch;
}

@media (min-width: 900px) {
  .rw-stories__head .rw-lead {
    justify-self: start;
    text-align: left;
  }
}

.rw-stories__feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.rw-stories__feature .rw-story--feature {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .rw-stories__feature {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--sp-4);
  }

  .rw-stories__feature .rw-story--feature {
    grid-column: auto;
  }

  .rw-stories__feature .rw-video {
    aspect-ratio: 4 / 5;
  }

  .rw-stories__feature--videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rw-tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 600;
}

.rw-video {
  position: relative;
  z-index: 0;
  isolation: isolate;
  margin: 0;
  background: var(--ink);
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.rw-video video,
.rw-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rw-video__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.rw-video__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 24, 23, 0.55), transparent 58%);
}

.rw-video__play {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease);
}

/* The button fills a rounded frame with overflow: hidden, so the global
   outline (drawn outside, offset 3px) was clipped away entirely. Ring the
   play disc instead: it is the thing the eye goes to. */
.rw-video__btn:focus-visible,
.rw-embed__btn:focus-visible {
  outline: none;
}

.rw-video__btn:focus-visible .rw-video__play,
.rw-embed__btn:focus-visible .rw-embed__play {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--teal);
}

.rw-video__btn:hover .rw-video__play {
  transform: scale(1.07);
}

.rw-video__play svg {
  width: 16px;
  height: 18px;
  fill: var(--teal-deep);
  margin-left: 3px;
}

/* The name sits on whatever the poster frame happens to be, and one of the
   real posters is a brightly lit waiting room. A shadow alone left the text
   barely readable, so the bottom edge gets a scrim to sit on. */
.rw-video::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12, 20, 18, 0.76), rgba(12, 20, 18, 0) 100%);
}

.rw-video__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  color: var(--white);
  font-size: var(--t-small);
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.rw-video.is-playing .rw-video__btn,
.rw-video.is-playing::after,
.rw-video.is-playing .rw-video__caption {
  display: none;
}

/* --- Акцент в страницата на процедура ---------------------------------
   Изнесен от текста, за да не потъва между абзаците: тинтът го отделя от
   бялото на прозата, а надзаглавието казва какво е, преди да е прочетено. */
.rw-proc-highlight {
  background: var(--teal-tint);
  border-radius: var(--r-frame);
  padding: var(--sp-6);
  /* Блокът носи котва, значи в него се пристига отвън: същият отстъп изпод
     лепкавата лента, какъвто имат заглавията на разделите. */
  scroll-margin-top: 6rem;
}

.rw-proc-highlight .rw-eyebrow {
  margin-top: 0;
}

.rw-proc-highlight__title {
  margin: 0 0 var(--sp-3);
  scroll-margin-top: 6rem;
}

.rw-proc-highlight .rw-proc-prose p:last-child {
  margin-bottom: 0;
}

/* Снимка в акцента (VARIXIO®: апаратът): на цялата ширина на блока, между
   заглавието и текста. Вдясно, обтечена от текста, беше двойно по-малка, а
   до нея оставаха по две-три думи на ред. */
.rw-proc-highlight__photo {
  margin: 0 0 var(--sp-3);
}

.rw-proc-highlight__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-control);
}

/* --- Вграден клип от YouTube -----------------------------------------
   Кадърът и бутонът са всичко, което се зарежда в покой; iframe-ът идва
   чак при натискане. Рамката спира близо до истинската широчина на клипа:
   разтегнат на цялата колона, един стар 480-пикселов кадър само показва
   по-едри пиксели. */
.rw-embed {
  margin: 0;
  max-width: 32rem;
}

.rw-embed__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--r-card);
  overflow: hidden;
}

.rw-embed__poster,
.rw-embed__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.rw-embed__poster {
  object-fit: cover;
}

.rw-embed__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.rw-embed__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 24, 23, 0.45), transparent 62%);
}

.rw-embed__play {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease);
}

.rw-embed__btn:hover .rw-embed__play {
  transform: scale(1.07);
}

.rw-embed__play svg {
  width: 16px;
  height: 18px;
  fill: var(--teal-deep);
  margin-left: 3px;
}

.rw-embed__caption {
  margin: var(--sp-3) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-muted);
}

.rw-embed__fallback {
  margin: var(--sp-3) 0 0;
}

/* Снимки от процедурата: редове с обща височина, нищо не се реже. Под 600px
   всеки кадър е на цял ред — два портретни един до друг стават твърде дребни. */
.rw-proc-photos__grid {
  --rw-row: 180px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* Таванът пази самотния кадър в реда да не се разпъне на цялата ширина. */
.rw-proc-photos__grid > li {
  flex: var(--rw-ar, 1.5) 1 calc(var(--rw-ar, 1.5) * var(--rw-row));
  min-width: 0;
  max-width: min(calc(var(--rw-ar, 1.5) * 380px), var(--rw-w, 100%));
}

@media (max-width: 599px) {
  .rw-proc-photos__grid > li {
    flex-basis: 100%;
  }
}

.rw-proc-photos__item {
  margin: 0;
}

/* Редът в текста на страница стои в широкия контейнер — там кадрите могат
   да са по-високи. */
.rw-photo-row {
  margin-block: var(--sp-6) var(--sp-8);
}

.rw-photo-row .rw-proc-photos__grid {
  --rw-row: 260px;
}

.rw-photo-row .rw-proc-photos__grid > li {
  max-width: min(calc(var(--rw-ar, 1.5) * 340px), var(--rw-w, 100%));
}

.rw-proc-photos__shot {
  display: block;
  aspect-ratio: var(--rw-ar, 1.5);
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-alt);
  cursor: zoom-in;
}

.rw-proc-photos__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur) var(--ease);
}

.rw-proc-photos__shot:hover .rw-proc-photos__img {
  opacity: 0.88;
}

.rw-proc-photos__caption {
  margin: var(--sp-3) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Клипът в обикновена страница: секцията няма фон и рамка, само въздух около
   плеъра, за да не залепне за абзаците отгоре и отдолу. */
.rw-video-section {
  margin-block: var(--sp-8);
}

.rw-story {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--teal) 6%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* One surface for every quote card. The old nth-child tinting gave the grid
   three different backgrounds in a pattern that carried no meaning — and once
   the cards stack into a single column on a phone, the alternation just reads
   as inconsistency. Difference between testimonials should come from what they
   say, not from the colour they landed on. */

.rw-story--feature {
  background: var(--ink-deep);
  border-color: transparent;
  color: #eef1ef;
  padding: 28px 26px 22px;
  box-shadow: none;
}

.rw-story__mark {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 13px;
  height: 26px;
  /* Decorative glyph, and it sits on both light and dark cards — no text
     contrast floor applies, so the brighter accent stays. */
  color: var(--teal);
  opacity: 0.72;
  pointer-events: none;
}

.rw-story__mark path {
  fill: currentColor;
}

.rw-story--feature .rw-story__mark {
  color: var(--teal-mid);
  opacity: 0.85;
}

.rw-story__text {
  position: relative;
  font-size: 16px;
  line-height: 1.58;
  color: var(--text);
  margin: 0;
  padding-right: 18px;
  text-wrap: pretty;
}

.rw-story--feature .rw-story__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.018em;
  color: var(--white);
}

.rw-story__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rw-story--feature .rw-story__text.is-clamped {
  -webkit-line-clamp: 5;
}

.rw-story.is-expanded {
  overflow: visible;
  height: auto;
}

.rw-stories__feature:has(.rw-story.is-expanded) {
  align-items: start;
}

.rw-story__more {
  position: relative;
  align-self: start;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--teal-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}

.rw-story__more::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

.rw-story__more:hover {
  color: var(--ink);
}

.rw-story__more:active {
  transform: translateY(1px);
}

.rw-story--feature .rw-story__more {
  color: var(--teal-mid);
}

.rw-story--feature .rw-story__more:hover {
  color: #d7f4ee;
}

.rw-story__by {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 3px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  font-size: var(--t-meta);
  color: var(--text-muted);
}

.rw-story__name {
  flex: 1 1 auto;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.rw-story__place {
  flex: 1 0 100%;
  order: 3;
  width: 100%;
  font-size: var(--t-meta);
  color: var(--text-light);
}

.rw-story__by .rw-tag {
  order: 4;
  margin-top: 6px;
}

.rw-story__by time {
  order: 2;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
}

.rw-story--feature .rw-story__by {
  border-top-color: color-mix(in srgb, var(--white) 12%, transparent);
  color: #7f8d8a;
}

.rw-story--feature .rw-story__name {
  color: var(--white);
}

.rw-story--feature .rw-story__place,
.rw-story--feature .rw-story__by time {
  color: #8a9a96;
}

.rw-story--feature .rw-tag {
  background: color-mix(in srgb, var(--teal) 22%, transparent);
  color: #d7f4ee;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rw-story:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--teal) 32%, var(--line));
    box-shadow: 0 16px 36px color-mix(in srgb, var(--teal) 14%, transparent);
  }

  .rw-story--feature:hover {
    border-color: transparent;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ink-deep) 45%, transparent);
  }
}

/* Cards in a row share a height, so the author lines (pinned with
   margin-top: auto) sit on one line instead of stepping by up to 50px. */
.rw-rail,
.rw-archive {
  display: grid;
  gap: var(--sp-3);
  align-items: stretch;
}

/* On a phone every quote card is full width, so six of them are six screens.
   Show four and let "Всички разкази" carry the rest — the archive page
   (.rw-archive) is unaffected and still lists everything. */
@media (max-width: 699px) {
  .rw-rail .rw-story:nth-child(n + 5) {
    display: none;
  }
}

@media (min-width: 700px) {
  .rw-rail,
  .rw-archive {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Same gutter as the video row above it. */
    gap: var(--sp-4);
  }
}

@media (min-width: 1000px) {
  .rw-rail,
  .rw-archive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* "See all" links use .rw-link, like every other section's onward link. */
.rw-stories__related,
.rw-results__related {
  margin: var(--sp-6) 0 0;
}

.rw-stories--archive {
  background: transparent;
  padding-block: 0 var(--sp-8);
}

.rw-stories--archive .rw-stories__feature {
  margin-bottom: var(--sp-6);
}

/* =========================================================================
   RESULTS — duplex scan-line comparison of clinical photographs
   ========================================================================= */

.rw-results {
  padding-block: 0 var(--rhythm);
}

.rw-results__head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

@media (min-width: 900px) {
  .rw-results__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-3);
  }
}

.rw-results__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 800px) {
  .rw-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8) var(--sp-6);
  }
}

.rw-result {
  margin: 0;
}

.rw-result__stage {
  position: relative;
  background: var(--bg-alt);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-card);
  touch-action: none;
  --split: 50%;
}

.rw-result__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.rw-result__before-pane {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--split);
  overflow: hidden;
}

.rw-result__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 2;
  width: 0;
  pointer-events: none;
}

.rw-result__scan::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--teal);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 30%, transparent);
}

.rw-result__handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--teal);
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 18px rgba(12, 22, 20, 0.18);
}

.rw-result__handle::before,
.rw-result__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--teal-deep);
  border-right: 1.5px solid var(--teal-deep);
}

.rw-result__handle::before {
  left: 12px;
  transform: translateY(-50%) rotate(-135deg);
}

.rw-result__handle::after {
  right: 12px;
  transform: translateY(-50%) rotate(45deg);
}

.rw-result__mark {
  position: absolute;
  z-index: 3;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: var(--white);
  padding: 5px 10px;
  /* Tag radius, not a pill: long captions wrap to two lines on phones, and
     a two-line pill turns into a lozenge. */
  border-radius: var(--r-tag);
  max-width: 46%;
  line-height: 1.3;
  pointer-events: none;
}

.rw-result__mark--before {
  top: 12px;
  left: 12px;
}

.rw-result__mark--after {
  top: 12px;
  right: 12px;
  text-align: right;
}

.rw-result__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0.001;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}

.rw-result__range:focus-visible {
  opacity: 1;
  outline: none;
  box-shadow: inset 0 0 0 3px var(--teal);
}

.rw-result__cap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: var(--t-meta);
}

.rw-result__open {
  font-weight: 600;
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rw-clinic {
  margin-top: var(--sp-16);
}

.rw-clinic__head {
  margin-bottom: var(--sp-6);
}

/* Justified rows: every photo in a row shares one height and the row fills
   the width exactly. Width grows with the aspect ratio, so no photo is
   cropped and no column runs short. */
.rw-clinic__grid {
  --rw-row: 150px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.rw-clinic__grid > li {
  flex: var(--rw-ar, 1.333) 1 calc(var(--rw-ar, 1.333) * var(--rw-row));
  aspect-ratio: var(--rw-ar, 1.333);
  min-width: 0;
}

@media (min-width: 900px) {
  .rw-clinic__grid {
    --rw-row: 260px;
    gap: var(--sp-4);
  }
}

.rw-clinic__shot {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-alt);
  cursor: zoom-in;
}

.rw-clinic__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur) var(--ease);
}

.rw-clinic__shot:hover .rw-clinic__img {
  opacity: 0.88;
}

.rw-lightbox {
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  color: var(--white);
  max-width: none;
  width: 100vw;
  height: 100vh;
}

.rw-lightbox::backdrop {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
}

.rw-lightbox__pair {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  min-height: 100vh;
  padding: var(--sp-12) var(--gutter) var(--sp-16);
}

@media (min-width: 900px) {
  .rw-lightbox[data-pair] .rw-lightbox__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.rw-lightbox__shot {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.rw-lightbox__img {
  max-width: min(100%, 720px);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--ink-deep);
  border-radius: var(--r-frame);
}

.rw-lightbox__shot figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 80%, transparent);
}

.rw-lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  min-height: var(--touch);
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--white) 35%, transparent);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-pill);
}

.rw-lightbox__close:hover {
  background: var(--ink);
}

/* =========================================================================
   TEAM — lead portrait as a scan-window, roster as photo tiles.
   ========================================================================= */

.rw-team {
  padding-block: var(--rhythm-tight) var(--rhythm);
}

.rw-team__lead {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 900px) {
  .rw-team__lead {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-12);
  }
}

.rw-team__frame {
  position: relative;
  display: block;
  background: var(--white);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  isolation: isolate;
}

.rw-team__frame img,
.rw-team__frame .rw-team__empty {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.rw-team__frame img {
  height: 100%;
}

.rw-team__frame img.rw-img--figure {
  object-position: center top;
}

.rw-team__frame:has(.rw-img--figure) {
  background: var(--bg);
}

.rw-team__frame--lead {
  aspect-ratio: 3 / 4;
  max-width: 420px;
}

.rw-team__frame--lead:has(.rw-img--figure) {
  padding: 20% 10% 0;
  box-sizing: border-box;
}

.rw-team__frame--sq {
  aspect-ratio: 4 / 5;
  padding: 0;
  box-sizing: border-box;
}

.rw-roster .rw-team__frame--sq {
  background: var(--white);
}

.rw-team__frame--sq img,
.rw-roster .rw-team__frame--sq img {
  object-fit: cover;
  object-position: center 8%;
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--white);
  transform: none;
}

/* Снимките на екипа, както са пратени. Рамката е с пропорцията на
   най-високата (1335×1600) и всички я пълнят еднакво: трите портретни
   почти не губят нищо (до 2,5% отстрани), по-широката на Давидкова
   (1341×1396) губи по ~6% от всяка страна — иначе стоеше по-ниска от
   другите. Самите файлове не се режат. */
.rw-team__frame.rw-team__frame--whole {
  aspect-ratio: 1335 / 1600;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
}

.rw-team__frame.rw-team__frame--whole:has(.rw-img--figure) {
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.rw-team__frame.rw-team__frame--whole img:not(.rw-img--figure),
.rw-roster .rw-team__frame.rw-team__frame--whole img:not(.rw-img--figure) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: none;
}

.rw-roster__card:hover .rw-team__frame--whole img {
  border-color: var(--teal-mid);
}

.rw-team__empty {
  display: grid;
  place-items: center;
  min-height: 100%;
  color: var(--teal-mid);
  background: var(--teal-tint);
}

.rw-team__empty .rw-mark {
  width: 48px;
  height: 78px;
}

.rw-team__name {
  font-size: var(--t-h2);
  margin: 0 0 8px;
}

.rw-team__name a {
  color: inherit;
  text-decoration: none;
}

.rw-team__name a:hover {
  color: var(--teal-deep);
}

.rw-team__role {
  font-size: var(--t-small);
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}

.rw-team__facts {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 46ch;
}

.rw-team__facts li {
  padding-left: 14px;
  border-left: 2px solid var(--teal);
  font-size: var(--t-small);
  color: var(--text);
  line-height: 1.45;
}

.rw-team__identity .rw-lead {
  max-width: 46ch;
}

.rw-credentials {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 720px) {
  .rw-credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rw-credentials__group--span {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .rw-profile__body .rw-credentials {
    grid-template-columns: 1fr;
  }
}

.rw-credentials__group h2,
.rw-credentials__group h3 {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}

.rw-credentials__list,
.rw-credentials__plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.rw-credentials__list li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 12px;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text);
}

.rw-credentials__list li.rw-credentials__item--bare {
  grid-template-columns: 1fr;
}

.rw-credentials__year {
  font-family: var(--font-display);
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}

.rw-credentials__plain li {
  font-size: var(--t-small);
  color: var(--text);
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.rw-credentials__plain a {
  color: inherit;
  text-decoration: none;
}

.rw-credentials__plain a:hover {
  color: var(--teal-deep);
}

.rw-credentials__pub {
  display: grid;
  gap: 4px;
}

.rw-credentials__pub-title {
  display: block;
}

.rw-credentials__pub-meta {
  display: block;
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--text-muted);
}

.rw-credentials__source {
  justify-self: start;
  font-size: var(--t-meta);
  color: var(--teal-deep);
  text-decoration: none;
  cursor: pointer;
}

.rw-credentials__source:hover {
  text-decoration: underline;
}

.rw-credentials__source:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

@media (min-width: 720px) {
  .rw-credentials__list--split {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-8);
    row-gap: 12px;
  }
}

.rw-credentials__pubs {
  gap: var(--sp-4);
}

.rw-credentials__pubs li {
  align-items: start;
}

.rw-credentials__pubs .rw-credentials__source {
  grid-column: 2;
}

.rw-credentials__pubs li.rw-credentials__item--bare .rw-credentials__source {
  grid-column: 1;
}

@media (min-width: 720px) {
  .rw-credentials__pubs li {
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    column-gap: var(--sp-4);
  }

  .rw-credentials__pubs .rw-credentials__source {
    grid-column: auto;
    justify-self: end;
    white-space: nowrap;
    padding-top: 2px;
  }

  .rw-credentials__pubs li.rw-credentials__item--bare {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rw-credentials__pubs li.rw-credentials__item--bare .rw-credentials__source {
    grid-column: auto;
  }
}

.rw-roster {
  list-style: none;
  margin: var(--rhythm) 0 0;
  padding: var(--rhythm-tight) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  /* Two up on phones. Stacked, four portraits cost ~1 400px of scroll for
     four names. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-3);
}

/* Екипът на един ред: четирима до водещия. Направо от две на четири —
   междинните три колони оставяха четвъртия човек сам на втори ред. */
@media (min-width: 720px) {
  .rw-roster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-3);
  }
}

@media (min-width: 900px) {
  .rw-roster {
    gap: var(--sp-6) var(--sp-4);
  }
}

.rw-roster__card {
  display: grid;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.rw-roster__card:hover .rw-team__frame {
  border-color: var(--teal-mid);
}

.rw-roster__card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.rw-roster__name {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
}

.rw-roster__role {
  color: var(--text-muted);
}

/* Doctor biography */
.rw-profile__header {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

@media (min-width: 900px) {
  .rw-profile__header {
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.rw-profile__identity {
  display: flex;
  flex-direction: column;
}

.rw-profile__identity h1 {
  margin: 0 0 var(--sp-3);
}

.rw-profile__identity .rw-sticky-cta {
  margin-top: var(--sp-4);
}

@media (min-width: 900px) {
  .rw-profile__identity .rw-sticky-cta {
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }

  .rw-profile__identity .rw-sticky-cta .rw-btn {
    flex: 1 1 12rem;
  }
}

.rw-profile__header .rw-team__frame--lead {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
}

.rw-profile__header .rw-team__frame img {
  object-position: center 16%;
}

.rw-profile--figure .rw-profile__header {
  padding-bottom: 0;
  overflow: visible;
}

.rw-profile__figure {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  isolation: isolate;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
}

.rw-profile__ghost {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 0;
  width: 92%;
  height: auto;
  transform: translateX(-54%);
  color: var(--teal-deep);
  opacity: 0.18;
  pointer-events: none;
}

.rw-profile__ghost .rw-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 64 / 104;
}

.rw-profile__figure::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: 78%;
  height: 24%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.rw-profile__figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Собственият портрет за страницата е изрязан до мястото, където трябва да
   свършва (при д-р Анастасов — под джобчето), затова е по-широк от 3:4.
   Рамката взима неговата пропорция, иначе 3:4 изрязва ръцете отстрани. */
.rw-profile__figure--own {
  aspect-ratio: auto;
}

.rw-profile__figure--own img {
  height: auto;
}

@media (prefers-reduced-transparency: reduce) {
  .rw-profile__ghost {
    opacity: 0.22;
  }

  .rw-profile__figure::after {
    background: var(--teal-tint);
    height: 12%;
    opacity: 0.7;
  }
}

.rw-profile__body {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 1000px) {
  .rw-profile__body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-12);
    align-items: start;
  }
}

.rw-profile__body .rw-prose {
  max-width: none;
}

.rw-profile__body--solo {
  grid-template-columns: 1fr;
}

.rw-profile__body--solo .rw-prose {
  max-width: 68ch;
}

.rw-profile__record {
  margin-top: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-8);
}

.rw-profile__record .rw-credentials__group h2 {
  margin-bottom: var(--sp-3);
}

/* =========================================================================
   PROCESS — vertical timeline threaded on the vein line
   ========================================================================= */

.rw-process {
  padding-block: var(--rhythm);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rw-process__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 1000px) {
  .rw-process__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-12);
  }

  /* Inner pages: keep the timeline under the heading, in the article measure. */
  .rw-process--nested .rw-process__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.rw-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.rw-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom, var(--teal), color-mix(in srgb, var(--teal) 12%, transparent));
}

.rw-timeline li {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-6);
}

.rw-timeline li:last-child {
  padding-bottom: 0;
}

.rw-timeline li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 10px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1.5px solid var(--teal);
}

.rw-timeline__step {
  color: var(--text-light);
  display: block;
  margin-bottom: 4px;
}

.rw-timeline__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.02em;
  margin: 0;
}

.rw-timeline__body {
  margin: 6px 0 0;
  max-width: 54ch;
}

.rw-process--nested {
  padding: var(--sp-8) 0 0;
  margin-top: var(--sp-6);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
}

.rw-process--nested .rw-process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  max-width: 68ch;
}

.rw-process--nested h2 {
  margin-bottom: 0;
}

/* =========================================================================
   FAQ — hairline accordion, no boxes
   ========================================================================= */

.rw-faq {
  padding-block: var(--rhythm-tight) var(--rhythm);
}

.rw-faq__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1000px) {
  .rw-faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-12);
    align-items: start;
  }

  .rw-faq--solo .rw-faq__grid {
    grid-template-columns: 1fr;
    max-width: 780px;
  }

  .rw-main--hub .rw-faq--solo .rw-faq__grid {
    max-width: var(--measure);
  }
}

.rw-faq__list {
  border-top: 1px solid var(--line);
}

.rw-faq__item {
  border-bottom: 1px solid var(--line);
}

.rw-faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1.34;
}

.rw-faq__item summary::-webkit-details-marker {
  display: none;
}

.rw-faq__item summary:hover {
  color: var(--teal-text);
}

.rw-faq__sign {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 6px;
}

.rw-faq__sign::before,
.rw-faq__sign::after {
  content: "";
  position: absolute;
  background: var(--teal);
  transition: transform var(--dur) var(--ease);
}

.rw-faq__sign::before {
  top: 6px;
  left: 0;
  width: 13px;
  height: 1.5px;
}

.rw-faq__sign::after {
  left: 6px;
  top: 0;
  width: 1.5px;
  height: 13px;
}

.rw-faq__item[open] .rw-faq__sign::after {
  transform: rotate(90deg);
}

.rw-faq__answer {
  padding: 0 var(--sp-6) 24px 0;
  color: var(--text-muted);
  max-width: 62ch;
}

.rw-faq__answer p {
  margin: 0 0 0.8em;
}

/* Answers are prose as a rule; the travel question is the one that needs a
   list, so it borrows the indent used in articles instead of the browser's. */
.rw-faq__answer ul,
.rw-faq__answer ol {
  margin: 0 0 0.8em;
  padding-left: 1.2em;
}

.rw-faq__answer li {
  margin-bottom: 0.35em;
}

/* =========================================================================
   CONTACT — asymmetric: definition list + form on cream
   ========================================================================= */

.rw-contact {
  padding-block: var(--rhythm-wide);
  background: var(--bg-alt);
}

.rw-contact--page {
  padding-top: var(--sp-6);
}

.rw-contact__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 1000px) {
  .rw-contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--sp-12);
    align-items: start;
  }
}

.rw-details {
  margin: 0 0 var(--sp-6);
  display: grid;
  border-top: 1px solid var(--line-strong);
}

.rw-details__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--sp-3);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.rw-details dt {
  color: var(--text-muted);
}

.rw-details dd {
  margin: 0;
}

.rw-details dd a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.rw-details dd a:hover {
  color: var(--teal-text);
  border-bottom-color: var(--teal);
}

.rw-details__phone {
  font-family: var(--font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.rw-form {
  display: grid;
  gap: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}

.rw-form__title {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0;
}

.rw-form label {
  display: grid;
  gap: 7px;
  font-weight: 600;
  color: var(--text-muted);
}

.rw-form input,
.rw-form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--text);
  min-height: var(--touch);
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-field);
  border-radius: 0;
  background: transparent;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.rw-form input:focus,
.rw-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--teal-deep);
  box-shadow: 0 2px 0 0 var(--teal);
}

.rw-form input:focus-visible,
.rw-form textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
  border-radius: var(--r-tag);
}

.rw-form textarea {
  resize: vertical;
}

.rw-form__notice {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-frame);
  background: var(--bg-cream);
  font-size: var(--t-small);
  border-left: 2px solid var(--line-strong);
}

.rw-form__notice--ok {
  background: var(--teal-tint);
  border-left-color: var(--teal);
}

.rw-form__notice--error {
  background: var(--error-tint);
  border-left-color: var(--error);
  color: var(--error);
}

/* A field shows as wrong only after the person has touched it or tried to
   send, never on an untouched form. */
.rw-form input:user-invalid,
.rw-form textarea:user-invalid {
  border-bottom-color: var(--error);
  box-shadow: 0 1px 0 0 var(--error);
}

.rw-form__consent {
  font-size: var(--t-meta);
  color: var(--text-muted);
  margin: 0;
}

.rw-form button[aria-busy="true"],
.rw-form button:disabled {
  opacity: 0.65;
  cursor: progress;
}

.rw-map {
  margin: var(--sp-6) 0 0;
}

@media (min-width: 1000px) {
  .rw-map {
    margin-top: var(--sp-8);
  }
}

.rw-map__frame {
  position: relative;
  overflow: hidden;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
}

@media (min-width: 768px) {
  .rw-map__frame {
    height: 380px;
  }
}

.rw-map--page .rw-map__frame {
  height: 320px;
}

@media (min-width: 768px) {
  .rw-map--page .rw-map__frame {
    height: 460px;
  }
}

.rw-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.rw-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
  padding: 14px 2px 0;
}

.rw-map__bar .rw-link {
  min-height: var(--touch);
  align-items: center;
}

/* =========================================================================
   CTA — hairline closer in the paper theme. Phone is still the loudest line.
   Not an inverted island: contact + footer already own that conversion.
   ========================================================================= */

.rw-cta {
  padding-inline: 0;
  padding-block: var(--sp-8) var(--sp-4);
}

.rw-container .rw-cta,
.rw-prose .rw-cta,
.rw-entry .rw-cta {
  padding-inline: 0;
  padding-block: var(--sp-8) 0;
}

.rw-cta__inner {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 900px) {
  .rw-cta__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    gap: var(--sp-8);
    align-items: end;
  }

  .rw-prose .rw-cta__inner,
  .rw-entry .rw-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    align-items: start;
  }
}

.rw-cta h2 {
  margin: 0 0 10px;
}

.rw-cta__desc {
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
}

.rw-cta__action {
  display: grid;
  gap: 14px;
  justify-items: start;
}

@media (min-width: 900px) {
  .rw-cta__action {
    justify-items: end;
    text-align: right;
  }

  .rw-prose .rw-cta__action,
  .rw-entry .rw-cta__action {
    justify-items: start;
    text-align: left;
  }
}

.rw-cta__phone {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.rw-cta__phone:hover {
  color: var(--teal-deep);
  border-bottom-color: var(--teal);
}

.rw-cta__action .rw-btn {
  min-width: 11.5rem;
}

/* =========================================================================
   Inner pages
   ========================================================================= */

.rw-main {
  padding-block: var(--sp-4) var(--sp-12);
}

.rw-main--home {
  padding: 0;
}

.rw-main--contact {
  padding-bottom: 0;
}

.rw-main--contact .rw-page__header {
  margin-bottom: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 0;
}

.rw-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-3);
  font-size: var(--t-meta);
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.rw-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  /* A 24px touch target without moving the line. */
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}

.rw-breadcrumbs a:hover {
  color: var(--teal-text);
}

.rw-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--line-strong);
}

.rw-page__header {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.rw-page__header h1:last-child {
  margin-bottom: 0;
}

.rw-page__date {
  display: block;
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}

/* Inner pages: reading column left, consult panel occupies the empty right. */
.rw-sheet {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.rw-sheet .rw-page__header {
  margin-bottom: 0;
}

.rw-sheet .rw-lead {
  max-width: 46ch;
}

.rw-consult {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}

.rw-consult .rw-eyebrow {
  margin: 0;
}

.rw-consult__lede {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 28ch;
}

.rw-consult__actions {
  display: grid;
  gap: 10px;
}

.rw-consult__actions .rw-btn {
  justify-content: center;
}

.rw-consult__meta {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.rw-consult__meta > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.rw-consult__meta dt {
  margin: 0;
  color: var(--text-light);
  padding-top: 3px;
}

.rw-consult__meta dd {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.45;
}

.rw-consult__also {
  display: grid;
  gap: 8px;
}

.rw-consult__label {
  margin: 0;
  color: var(--text-light);
}

.rw-consult__also ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.rw-consult__also a {
  color: inherit;
  text-decoration: none;
  font-size: var(--t-small);
}

.rw-consult__also a:hover {
  color: var(--teal-text);
}

@media (min-width: 1040px) {
  .rw-sheet:has(.rw-consult) {
    grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 19.5rem);
    column-gap: var(--sp-12);
    row-gap: var(--sp-6);
    grid-template-areas:
      "head consult"
      "entry consult";
  }

  .rw-sheet:has(.rw-consult):has(.rw-sheet__media) {
    grid-template-areas:
      "head consult"
      "media consult"
      "entry consult";
  }

  .rw-sheet:has(.rw-consult) .rw-sheet__head {
    grid-area: head;
  }

  .rw-sheet:has(.rw-consult) .rw-sheet__media {
    grid-area: media;
  }

  .rw-sheet:has(.rw-consult) .rw-sheet__entry {
    grid-area: entry;
  }

  .rw-consult {
    grid-area: consult;
    position: sticky;
    top: 84px;
    align-self: start;
  }

  .rw-sheet:has(.rw-consult) .rw-prose,
  .rw-sheet:has(.rw-consult) .rw-entry > :where(p, h2, h3, h4, ul, ol, blockquote),
  .rw-sheet:has(.rw-consult) .rw-entry > :where(.wp-block-paragraph, .wp-block-heading, .wp-block-list),
  .rw-sheet:has(.rw-consult) .rw-entry .rw-price-table-wrap,
  .rw-sheet:has(.rw-consult) .rw-faq--solo .rw-faq__grid,
  .rw-sheet:has(.rw-consult) .rw-process--nested .rw-process__grid {
    max-width: none;
  }
}

@media (max-width: 699px) {
  .rw-consult {
    position: static;
  }
}

/* Without the side column the panel came straight after the title, so a
   reader from search met a booking card before the answer. Below the
   two-column layout it closes the page instead; the call bar covers the
   first screen. */
@media (max-width: 1039px) {
  .rw-consult {
    order: 1;
  }
}

.rw-prose,
.rw-entry {
  line-height: 1.75;
}

.rw-prose {
  max-width: 68ch;
}

.rw-entry > :where(p, h2, h3, h4, ul, ol, blockquote),
.rw-entry > :where(.wp-block-paragraph, .wp-block-heading, .wp-block-list) {
  max-width: 68ch;
}

.rw-entry > :where(p, .wp-block-paragraph),
.rw-prose p {
  margin: 0 0 1.45em;
}

.rw-entry > :where(h2, .wp-block-heading),
.rw-prose h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.22;
  margin: var(--sp-6) 0 0.7em;
}

.rw-entry > * + :where(h2, h3, .wp-block-heading) {
  margin-block-start: var(--sp-6);
}

.rw-entry > :where(h3),
.rw-prose h3 {
  margin: var(--sp-4) 0 0.5em;
}

.rw-entry > :where(ul, ol, .wp-block-list),
.rw-prose ul,
.rw-prose ol {
  margin: 0 0 1.25em;
  padding-left: 1.2em;
}

.rw-prose li,
.rw-entry li {
  margin-bottom: 0.45em;
}

.rw-media,
.rw-prose img,
.rw-prose .wp-block-image img,
.rw-entry img,
.rw-entry .wp-block-image img {
  border-radius: var(--r-card);
}

.rw-media {
  margin: 0 0 var(--sp-6);
}

.rw-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

.single-post .rw-media:not(.rw-media--contain) img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.rw-media__caption {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--text-muted);
}

.rw-media--contain {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-2);
}

.rw-media--contain img {
  max-height: 28rem;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
  background: transparent;
}

/* Treatment single */

.rw-spec {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.rw-spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.rw-spec dt {
  color: var(--text-light);
}

.rw-spec dd {
  margin: 0;
  font-size: var(--t-small);
  text-align: right;
}

.rw-spec dd.rw-spec__price {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
}

.rw-sticky-cta {
  position: sticky;
  top: 100px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  padding: var(--sp-4);
  display: grid;
  gap: 10px;
}

/* Цени — заглавието встрани, таблицата като лист
   Същият грид като при въпросите: на началната страница двете секции стоят
   една под друга и общият ляв ръб ги държи като двойка, вместо всяка да
   започва от различно място. */
.rw-pricing__grid {
  display: grid;
  gap: var(--sp-6);
}

/* Клетка на грид се разтяга по най-широкото си съдържание; при таблицата това
   е сборът от двете колони и тя избутва листа извън екрана на телефон, вместо
   да превърти вътре в него. */
.rw-pricing__grid > * {
  min-width: 0;
}

@media (min-width: 1000px) {
  .rw-pricing__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--sp-12);
    align-items: start;
  }

  .rw-pricing__intro {
    position: sticky;
    top: 108px;
  }
}

.rw-pricing__intro h2 {
  margin-bottom: var(--sp-2);
}

.rw-pricing__more,
.rw-faq__more {
  margin-top: var(--sp-3);
}

/* Редовете без рамка се губят върху хартията, щом над тях няма заглавие през
   цялата ширина. Листът им връща ръба — както картончетата на мненията. */
.rw-pricing__panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-3) var(--sp-4);
}

.rw-pricing__panel .rw-price-table-wrap {
  margin-top: 0;
}

.rw-pricing__vat {
  margin: 0;
}

/* На началната страница цените и въпросите са една лента: по-малко въздух
   помежду им, отколкото до съседите отгоре и отдолу. */
.rw-main--home > .rw-pricing {
  padding-block: var(--rhythm) var(--rhythm-tight);
}

@media (max-width: 599px) {
  .rw-pricing__panel {
    padding: var(--sp-2) var(--sp-3);
  }
}

/* Prices table */
.rw-price-table-wrap {
  margin: var(--sp-4) 0 var(--sp-3);
  overflow-x: auto;
}

.rw-entry .rw-price-table-wrap {
  max-width: 68ch;
}

.rw-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}

.rw-price-table th {
  color: var(--text-light);
  font-weight: 600;
  text-align: left;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-strong);
}

.rw-price-table td {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
}

.rw-price-table th:last-child,
.rw-price-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.rw-price-table td:last-child {
  font-family: var(--font-display);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--teal-text);
}

.rw-price-table td:last-child small {
  font-family: var(--font-body);
  font-size: var(--t-label);
  color: var(--text-light);
  letter-spacing: 0.08em;
}

/* Blog list */
/* No top rule: the page header above already closes with one, and the two
   stacked 48px apart read as a doubled line. */
.rw-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rw-posts li,
.rw-posts__item {
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) 0;
}

.rw-posts__item--photo {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 720px) {
  .rw-posts__item--photo {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
}

.rw-posts__thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--r-frame);
  background: var(--bg-alt);
  aspect-ratio: 4 / 3;
}

.rw-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82);
}

.rw-posts__thumb--contain {
  background: #fff;
}

.rw-posts__thumb--contain img {
  object-fit: contain;
  filter: none;
}

.rw-media--page {
  margin-top: calc(-1 * var(--sp-4));
}

.rw-media--page img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.rw-media--square {
  max-width: 34rem;
}

/* Upright photos, on pages and posts: as specific as the posts' 16:9 rule
   and later, so it wins there too. */
.rw-media.rw-media--square:not(.rw-media--contain) img {
  aspect-ratio: 1 / 1;
}

/* A full-length photo: whole, as tall as a square one is wide. */
.rw-media.rw-media--long img {
  aspect-ratio: auto;
  width: auto;
  max-width: 100%;
  max-height: 34rem;
}

.rw-posts h2 {
  font-size: clamp(21px, 2vw, 28px);
  margin: 0 0 8px;
}

.rw-posts h2 a {
  color: inherit;
  text-decoration: none;
}

.rw-posts h2 a:hover {
  color: var(--teal-text);
}

.rw-posts time {
  color: var(--text-muted);
}

.navigation.pagination {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.nav-links a,
.nav-links span {
  min-height: var(--touch);
  min-width: var(--touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: inherit;
  font-size: var(--t-small);
  font-weight: 500;
}

.nav-links a:hover {
  background: var(--teal-tint);
  color: var(--teal-deep);
}

.nav-links .current {
  background: var(--teal-cta);
  color: var(--white);
}

/* =========================================================================
   Footer
   ========================================================================= */

.rw-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: var(--sp-8) var(--sp-4);
}

.rw-footer__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .rw-footer__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--sp-8);
  }
}

/* Buttons keep their own colours: `.rw-footer a` would otherwise outrank
   `.rw-btn--primary` and leave the footer CTA with dark text on teal. */
.rw-footer a:not(.rw-btn) {
  color: inherit;
  text-decoration: none;
}

.rw-footer a:not(.rw-btn):hover {
  color: var(--teal-text);
}

.rw-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: var(--t-small);
}

.rw-footer__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 var(--sp-3);
}

.rw-footer__brand .rw-logo__img {
  height: 56px;
  max-height: 56px;
}

.rw-footer__brand-name {
  font-family: var(--font-display);
  font-size: 20px;
}

.rw-footer__muted {
  color: var(--text-muted);
  font-size: var(--t-small);
  margin: 0 0 6px;
  max-width: 30ch;
}

.rw-footer__heading {
  color: var(--text-light);
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}

.rw-footer__cta-col {
  display: grid;
  gap: 10px;
  align-content: start;
}

/* Social — hairline glyphs sized to the footer's body text, not badges. */
.rw-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-3);
}

.rw-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-tag);
  color: var(--text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.rw-social__link:hover,
.rw-social__link:focus-visible {
  color: var(--teal-text);
  border-color: var(--teal);
  background: var(--teal-tint);
}

.rw-social__icon {
  width: 19px;
  height: 19px;
}

.rw-details .rw-social {
  margin-top: 0;
}

/* `.rw-details dd a` underlines every link in the list; the glyph box already
   carries a full border and would otherwise get a heavier second one. */
.rw-details dd a.rw-social__link {
  border: 1px solid var(--line);
}

.rw-details dd a.rw-social__link:hover,
.rw-details dd a.rw-social__link:focus-visible {
  border-color: var(--teal);
}

/* `.rw-footer a:not(.rw-btn)` forces `color: inherit`, so the muted glyph
   colour needs an equal-weight selector that comes after it. */
.rw-footer a.rw-social__link {
  color: var(--text-muted);
}

.rw-footer a.rw-social__link:hover,
.rw-footer a.rw-social__link:focus-visible {
  color: var(--teal-text);
}

@media (max-width: 899px) {
  .rw-social__link {
    width: var(--touch);
    height: var(--touch);
  }

  /* The box is already a full touch target; the inflated ::after that every
     other `.rw-details` link gets would only overlap its neighbour. */
  .rw-details dd .rw-social__link::after {
    content: none;
  }
}

.rw-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
  margin-top: var(--sp-8);
  padding-top: var(--sp-3);
}

.rw-footer__copy,
.rw-footer__credit {
  margin: 0;
  color: var(--text-light);
  font-size: var(--t-meta);
}

.rw-mobile-cta {
  display: none;
}

/* =========================================================================
   Scroll reveal — one motion, once, on every section
   Fade + 16px rise. Sticky surfaces fade only (transform breaks sticky).
   Stagger groups keep the parent visible and cue children in sequence.
   Keyframes are used so hover transitions on children stay intact.
   ========================================================================= */

.rw-observe {
  opacity: 0;
  transform: translateY(16px);
}

.rw-observe.is-in {
  animation: rw-reveal-in 640ms var(--ease) forwards;
}

.rw-observe--fade {
  transform: none;
}

.rw-observe--fade.is-in {
  animation-name: rw-reveal-fade;
}

.rw-observe--stagger,
.rw-observe--stagger.is-in {
  opacity: 1;
  transform: none;
  animation: none;
}

.rw-observe--stagger > * {
  opacity: 0;
  transform: translateY(16px);
}

.rw-observe--stagger.is-in > * {
  animation: rw-reveal-in 640ms var(--ease) var(--rw-d, 0ms) forwards;
}

.rw-observe--stagger > *:nth-child(1) { --rw-d: 0ms; }
.rw-observe--stagger > *:nth-child(2) { --rw-d: 70ms; }
.rw-observe--stagger > *:nth-child(3) { --rw-d: 140ms; }
.rw-observe--stagger > *:nth-child(4) { --rw-d: 210ms; }
.rw-observe--stagger > *:nth-child(5) { --rw-d: 280ms; }
.rw-observe--stagger > *:nth-child(6) { --rw-d: 350ms; }
.rw-observe--stagger > *:nth-child(7) { --rw-d: 420ms; }
.rw-observe--stagger > *:nth-child(n + 8) { --rw-d: 480ms; }

@keyframes rw-reveal-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rw-reveal-fade {
  to {
    opacity: 1;
  }
}

.no-js .rw-observe,
.no-js .rw-observe--stagger > * {
  opacity: 1;
  transform: none;
  animation: none;
}

/* =========================================================================
   TREATMENT HUB — landing for /lechenie/
   Numbered index stays the signature. Hero is a quieter scan of the same limb.
   ========================================================================= */

.rw-main--hub {
  padding-top: var(--sp-2);
  padding-bottom: 0;
}

.rw-main--treatment {
  padding-bottom: var(--sp-8);
}

.rw-hub-hero {
  padding-bottom: var(--sp-8);
}

.rw-hub-hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .rw-hub-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
    gap: var(--sp-8);
    padding-top: var(--sp-4);
  }
}

.rw-hub-hero__copy h1 {
  max-width: 12em;
  margin-bottom: var(--sp-3);
}

/* A whole sentence as the title: a size down, so it takes four lines, not seven. */
.rw-hub-hero__copy h1.rw-hub-hero__title--long {
  max-width: 18em;
  font-size: var(--t-h2);
}

.rw-hub-hero__desc {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 36ch;
  margin: 0 0 var(--sp-4);
}

.rw-hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.rw-hub-hero__actions .rw-btn {
  white-space: nowrap;
}

.rw-hub-hero__stage {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
  pointer-events: none;
}

.rw-hub-hero__visual {
  position: relative;
  height: min(26rem, 52dvh);
}

.rw-hub-hero__visual .rw-scan {
  width: 100%;
  height: 100%;
  max-height: 26rem;
  margin-inline: auto;
}

/* Снимка вместо илюстрацията („Лечение“: краката и ехографът). Фонът ѝ е
   бял; „multiply“ го слива с тона на страницата, така че няма бял
   правоъгълник, а цялата снимка се вижда, без да се реже. */
.rw-hub-hero__visual--photo {
  display: flex;
  justify-content: center;
  /* „multiply“ смесва с фона на най-близкия слой; без собствен фон тук
     смесваше с прозрачно и бялото си оставаше бяло. */
  background: var(--bg);
}

.rw-hub-hero__photo {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* Ореолът около лентата не е съвсем бял и очертаваше правоъгълника на
     кадъра; ръбовете се стопяват в страницата. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

.rw-hub-intro {
  padding-block: 0 var(--sp-8);
}

.rw-hub-intro h2 {
  margin: 0 0 var(--sp-4);
  max-width: none;
}

.rw-hub-intro__copy {
  display: grid;
  gap: var(--sp-4);
}

.rw-hub-intro__copy p {
  margin: 0;
  max-width: none;
}

.rw-hub-intro__copy p:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .rw-hub-intro__copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    max-width: 52rem;
  }

  .rw-hub-intro__copy p + p {
    border-left: 1px solid var(--line-strong);
    padding-left: var(--sp-6);
    margin-left: var(--sp-6);
  }
}

.rw-index--hub {
  padding-block: var(--sp-4) var(--sp-12);
}

.rw-index--hub .rw-index__head {
  margin-bottom: var(--sp-6);
}

.rw-index--hub .rw-index__row {
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: start;
  gap: 10px var(--sp-3);
  padding-block: var(--sp-6);
}

.rw-index--hub .rw-index__name {
  line-height: 1.22;
}

.rw-index--hub .rw-index__desc {
  font-size: var(--t-body);
  line-height: 1.7;
  max-width: 46ch;
  color: var(--text-muted);
}

.rw-index--hub .rw-index__more {
  padding-top: 0.35em;
}

.rw-index--hub .rw-index__row--media {
  grid-template-columns: 2.6rem 4.5rem minmax(0, 1fr);
}

@media (min-width: 900px) {
  .rw-index--hub .rw-index__row {
    grid-template-columns: 3.4rem minmax(13rem, 0.95fr) minmax(0, 1.35fr) auto;
    align-items: start;
    gap: var(--sp-4) var(--sp-6);
    padding-block: 2.25rem;
  }

  .rw-index--hub .rw-index__row--media {
    grid-template-columns: 3.4rem 4.75rem minmax(11rem, 0.9fr) minmax(0, 1.3fr) auto;
  }

  .rw-index--hub .rw-index__media {
    grid-column: 2;
    grid-row: 1;
  }

  .rw-index--hub .rw-index__row--media .rw-index__name {
    grid-column: 3;
  }

  .rw-index--hub .rw-index__row--media .rw-index__desc {
    grid-column: 4;
  }

  .rw-index--hub .rw-index__row--media .rw-index__more {
    grid-column: 5;
  }
}

.rw-index__media {
  margin: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--bg-alt);
  align-self: center;
}

.rw-index__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rw-index__more {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--teal-deep);
  white-space: nowrap;
  pointer-events: none;
}

.rw-index--hub .rw-index__row:hover .rw-index__more,
.rw-index--hub .rw-index__row:focus-within .rw-index__more {
  color: var(--ink);
}

.rw-hub-factors {
  padding-block: 0 var(--sp-12);
}

.rw-hub-factors__intro {
  margin-bottom: var(--sp-6);
}

.rw-hub-factors__intro .rw-lead {
  max-width: 62ch;
}

.rw-hub-factors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 800px) {
  .rw-hub-factors__list {
    grid-template-columns: 1fr 1fr;
  }

  .rw-hub-factors__list li:nth-child(odd) {
    border-right: 1px solid var(--line);
  }
}

.rw-hub-factors__list li {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  padding-right: var(--sp-4);
}

@media (min-width: 800px) {
  .rw-hub-factors__list li:nth-child(even) {
    padding-left: var(--sp-4);
    padding-right: 0;
  }
}

.rw-hub-factors__list h3 {
  margin: 0 0 8px;
}

.rw-hub-factors__list p {
  margin: 0;
  color: var(--text-muted);
  max-width: 42ch;
  font-size: var(--t-small);
  line-height: 1.55;
}

.rw-hub-factors__foot {
  margin-top: var(--sp-6);
}

.rw-hub-factors--nested {
  padding: var(--sp-6) 0;
}

.rw-hub-expect {
  padding-bottom: var(--sp-8);
}

.rw-main--hub .rw-process--nested .rw-process__grid {
  max-width: var(--measure);
}

.rw-sources {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  max-width: 62ch;
}

.rw-sources__title {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0 0 12px;
}

.rw-sources__lede,
.rw-sources__note {
  display: block;
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.7;
  margin: 0 0 var(--sp-4);
}

.rw-sources__note {
  margin: 6px 0 0;
}

/* Same marker as the credentials list (a short teal rule), not the
   browser's default disc, which appeared nowhere else on the site. */
.rw-sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rw-sources__list li {
  margin-bottom: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--teal);
  line-height: 1.65;
}

.rw-disclaimer {
  max-width: 62ch;
  margin: 0 0 var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.7;
}

.rw-review-copy {
  color: var(--text-muted);
  font-size: var(--t-small);
  max-width: 54ch;
}

.rw-review-panel {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-frame);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-6);
  background: var(--teal-tint);
}

.rw-review-panel__status {
  margin: 0 0 8px;
  font-weight: 600;
}

.rw-review-panel__lede {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: var(--t-small);
}

.rw-review-panel ul {
  margin: 0 0 12px;
  padding-left: 1.1em;
}

.rw-sticky-cta .rw-spec {
  border-top: 0;
  margin-bottom: 4px;
}

.rw-sticky-cta .rw-spec__row:first-child {
  padding-top: 0;
}

.rw-sticky-cta .rw-btn {
  justify-content: center;
}

/* =========================================================================
   Procedure landing — conversion funnel, same IA for every treatment
   ========================================================================= */

.rw-proc {
  display: grid;
  /* An auto track is min-content wide, so one stubborn child used to stretch
     every section in the article past the viewport. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.rw-proc-icon {
  width: 22px;
  height: 22px;
  stroke: var(--teal-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rw-proc-hero {
  padding: var(--sp-4) 0 var(--sp-6);
}

.rw-proc-hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 900px) {
  .rw-proc-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: var(--sp-8) var(--sp-12);
    align-items: start;
  }

  .rw-proc-hero__grid--solo {
    grid-template-columns: minmax(0, 46rem);
  }
}

.rw-proc-hero__copy {
  min-width: 0;
}

.rw-proc-hero .rw-breadcrumbs ol {
  margin-bottom: var(--sp-3);
}

.rw-proc-hero h1 {
  margin: 0 0 var(--sp-3);
  /* The site's H1 scale, with a lower floor: procedure names carry long
     words („микрофлебектомия“) that must stay whole at 360px. */
  font-size: clamp(2.05rem, 4.8vw, 3.75rem);
  max-width: 18ch;
}

.rw-proc-hero__lead {
  margin: 0 0 var(--sp-4);
  max-width: 42ch;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-muted);
}

.rw-proc-hero__bullets {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: 10px;
}

.rw-proc-hero__bullets li {
  position: relative;
  padding-left: 1.15em;
  color: var(--text);
  font-size: var(--t-body);
  line-height: 1.45;
}

.rw-proc-hero__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--teal-deep);
}

.rw-proc-hero__note {
  margin: var(--sp-3) 0 0;
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--t-small);
}

.rw-proc-hero__figure {
  margin: 0;
  position: relative;
}

.rw-proc-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32rem;
  object-fit: cover;
  border-radius: var(--r-frame);
  aspect-ratio: 4 / 5;
}

/* A landscape photo in a portrait frame loses half its width. */
.rw-proc-hero__img--wide {
  aspect-ratio: 3 / 2;
}

/* A device shot on white: the whole machine, never cropped. */
.rw-proc-hero__img--whole {
  box-sizing: border-box;
  object-fit: contain;
  padding: var(--sp-4);
  background: #fff;
}

/* A standing phone clip: the frame keeps the middle, where the work is. */
.rw-proc-hero__img--video {
  background: var(--bg-alt);
}

@media (max-width: 899px) {
  .rw-proc-hero__grid {
    display: flex;
    flex-direction: column;
  }

  .rw-proc-hero__media {
    order: 2;
    width: 100%;
  }

  /* Height comes from the ratio alone. A max-height here transferred
     through aspect-ratio into a max-width, so on tablets the photo stopped
     at ~80% of the column and left a dead strip beside it. */
  .rw-proc-hero__img {
    aspect-ratio: 16 / 9;
    min-height: 0;
    max-height: none;
  }

  /* A 16:9 strip of a standing clip would show only a band across the leg. */
  .rw-proc-hero__img--video {
    aspect-ratio: 4 / 5;
    max-height: 70svh;
  }

  /* A 16:9 strip would show only the middle of a standing machine. */
  .rw-proc-hero__img--whole {
    aspect-ratio: auto;
    height: 24rem;
    padding: var(--sp-3);
  }
}

.rw-proc-hero__trust {
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--white);
}

.rw-proc-hero__trust li {
  position: relative;
  padding-left: 14px;
  font-size: var(--t-meta);
  line-height: 1.4;
  color: var(--text-muted);
}

.rw-proc-hero__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--teal);
}

.rw-proc-hero__trust--solo {
  margin: 0;
  height: 100%;
  align-content: start;
  padding: var(--sp-4);
}

.rw-proc-facts {
  padding: 0 0 var(--sp-8);
}

.rw-proc-facts__grid {
  display: grid;
  /* Matches the four-column rule below: 1fr alone floors at min-content, and
     "Продължителност" is wider than half of a 360px screen. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line-strong);
}

.rw-proc-facts__item {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.rw-proc-facts__item:nth-child(even) {
  padding-right: 0;
  padding-left: var(--sp-4);
}

@media (min-width: 800px) {
  .rw-proc-facts__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rw-proc-facts__item,
  .rw-proc-facts__item:nth-child(even) {
    padding: var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-4);
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }

  .rw-proc-facts__item:first-child {
    padding-left: 0;
  }

  .rw-proc-facts__item:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

.rw-proc-facts dt {
  color: var(--text-light);
  margin: 0 0 6px;
}

.rw-proc-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.rw-proc-facts__note {
  margin: var(--sp-3) 0 0;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--t-small);
}

.rw-proc-benefits {
  padding: 0 0 var(--sp-12);
}

.rw-proc-benefits h2 {
  margin: 0 0 var(--sp-6);
}

.rw-proc-benefits__grid {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-6) var(--sp-8);
}

@media (min-width: 720px) {
  .rw-proc-benefits__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rw-proc-benefits__item {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.rw-proc-benefits__item h3 {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.rw-proc-benefits__item p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-small);
  max-width: 36ch;
}

.rw-proc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}

.rw-proc-actions .rw-btn {
  justify-content: center;
}

.rw-proc-actions--stack {
  display: grid;
  gap: 10px;
}

/* The booking label is the longest on the site; in the 21rem rail it has
   to fit one line (a wrapped primary CTA reads as broken). */
.rw-proc-actions--stack .rw-btn {
  width: 100%;
  padding-inline: 16px;
  white-space: nowrap;
}

.rw-proc-actions--mid {
  margin-top: var(--sp-2);
}

.rw-proc-layout {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
  align-items: start;
}

@media (min-width: 1040px) {
  .rw-proc-layout {
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 21rem);
    column-gap: var(--sp-12);
  }
}

.rw-proc-main {
  display: grid;
  gap: var(--sp-12);
  min-width: 0;
  max-width: 100%;
}

/* Снимки без собствено заглавие продължават предишния раздел. */
.rw-proc-photos--untitled {
  margin-top: calc(var(--sp-6) - var(--sp-12));
}

.rw-proc-section h2 {
  margin: 0 0 var(--sp-4);
  scroll-margin-top: 6rem;
}

.rw-proc-section h3 {
  margin: 0 0 12px;
}

.rw-proc-prose {
  max-width: 68ch;
}

.rw-proc-prose p {
  max-width: 68ch;
}

.rw-proc-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.rw-proc-points,
.rw-proc-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.rw-proc-points li,
.rw-proc-checks li {
  position: relative;
  padding-left: 1.5em;
  max-width: 68ch;
  line-height: 1.55;
}

.rw-proc-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--teal-deep);
}

.rw-proc-checks li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.45em;
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--teal-deep);
  border-bottom: 1.5px solid var(--teal-deep);
  background: none;
  transform: rotate(-45deg);
}

.rw-proc-audience--split,
.rw-proc-recovery__grid--split {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 800px) {
  .rw-proc-audience--split,
  .rw-proc-recovery__grid--split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6) var(--sp-8);
  }
}

.rw-proc-journey {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.rw-proc-journey li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.rw-proc-journey__n,
.rw-proc-detail__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--teal-deep);
  padding-top: 5px;
}

.rw-proc-journey h3,
.rw-proc-detail h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
}

.rw-proc-journey p,
.rw-proc-detail p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.5;
}

.rw-proc-steps__how {
  margin-bottom: var(--sp-6);
}

.rw-proc-steps__how h3 {
  margin-top: 0;
}

/* Names the second sequence, so restarting at 01 reads as a change of
   scale rather than a numbering bug. */
.rw-proc-detail__title {
  margin: var(--sp-6) 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--text);
}

.rw-proc-detail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.rw-proc-detail li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 8px 12px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}

.rw-proc-risks {
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line);
}

.rw-proc-risks__more {
  margin-top: var(--sp-3);
}

.rw-proc-risks__more summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--t-small);
  min-height: var(--touch);
  display: flex;
  align-items: center;
  color: var(--teal-deep);
}

.rw-proc-risks__more summary::-webkit-details-marker {
  display: none;
}

.rw-proc-risks__body {
  padding-top: var(--sp-2);
}

.rw-proc-rail {
  display: none;
}

@media (min-width: 1040px) {
  .rw-proc-rail {
    display: block;
    position: sticky;
    top: 108px;
    min-width: 0;
    align-self: start;
    z-index: 1;
  }
}

.rw-proc-rail__card {
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: var(--white);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Price is the one fact the booking card needs; the rest live in the facts
   strip above. */
.rw-proc-rail__price {
  margin: 0;
  display: grid;
  gap: 2px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.rw-proc-rail__price-label {
  color: var(--text-light);
}

.rw-proc-rail__price-value {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.rw-proc-rail__note {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--t-meta);
  line-height: 1.45;
}

.rw-proc-faq {
  padding: 0 0 var(--sp-12);
}

.rw-proc-faq h2 {
  margin: 0 0 var(--sp-4);
}

.rw-proc-faq__list {
  border-top: 1px solid var(--line-strong);
}

.rw-proc-faq .rw-faq__item summary {
  min-height: 56px;
  align-items: center;
  padding: 18px 0;
  font-size: clamp(18px, 1.6vw, 24px);
}

.rw-proc-faq .rw-faq__answer {
  max-width: 68ch;
}

.rw-proc-faq .rw-faq__item[open] .rw-faq__answer {
  animation: rw-reveal-fade 280ms var(--ease);
}

/* Дългите списъци се сгъват след деветия въпрос. Редът на бутона продължава
   линията на акордеона, за да не изглежда като откъснат елемент под него. */
.rw-proc-faq__more > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  color: var(--teal-deep);
}

.rw-proc-faq__more > summary::-webkit-details-marker {
  display: none;
}

.rw-proc-faq__more > summary:hover {
  color: var(--teal-text);
}

/* Стрелка надолу, която се обръща при отваряне. */
.rw-proc-faq__more-sign {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease);
}

.rw-proc-faq__more[open] .rw-proc-faq__more-sign {
  transform: translateY(1px) rotate(-135deg);
}

/* Скритите въпроси продължават списъка, затова без втора горна линия. */
.rw-proc-faq__list--more {
  border-top: 0;
}

.rw-proc-faq__more[open] > summary {
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .rw-proc-faq__more-sign {
    transition: none;
  }
}

.rw-proc-related {
  padding: 0 0 var(--sp-12);
}

.rw-proc-related h2 {
  margin: 0 0 var(--sp-6);
}

.rw-proc-related__grid {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 720px) {
  .rw-proc-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* auto-fill, не auto-fit: празните колони остават, иначе единствена
   свързана процедура се разпъва през цялата страница. */
@media (min-width: 1100px) {
  .rw-proc-related__grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

.rw-proc-related__card {
  display: grid;
  gap: 12px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  overflow: hidden;
  background: var(--white);
}

.rw-proc-related__card:hover {
  border-color: var(--line-strong);
}

.rw-proc-related__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
}

.rw-proc-related__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.rw-proc-related__body {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
  align-content: start;
}

.rw-proc-related__card--text .rw-proc-related__body {
  padding: 18px 18px 16px;
}

.rw-proc-related__name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.rw-proc-related__desc {
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rw-proc-related__more {
  font-size: var(--t-meta);
  color: var(--teal-deep);
  margin-top: 4px;
}

.rw-proc-related__also {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0;
}

.rw-proc-sources.rw-sources {
  max-width: none;
  margin: 0 0 var(--sp-8);
}

.rw-proc-cta {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: var(--sp-12) 0;
  margin: 0 0 var(--sp-6);
}

.rw-proc-cta__inner {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .rw-proc-cta__inner {
    grid-template-columns: minmax(0, 1.2fr) auto;
    align-items: end;
    gap: var(--sp-8);
  }
}

.rw-proc-cta h2 {
  margin: 0 0 12px;
  max-width: 18ch;
}

.rw-proc-cta p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
}

.rw-proc .rw-disclaimer {
  max-width: none;
}

/* Treatment mega-menu */
@media (min-width: 1000px) {
  .rw-subnav--methods {
    left: -7.5rem;
    width: min(40rem, calc(100vw - 48px));
    padding: 18px 20px 14px;
    display: grid;
    gap: 14px;
  }

  .rw-nav li:hover > .rw-subnav--methods,
  .rw-nav li:focus-within > .rw-subnav--methods {
    transform: translateY(0);
  }

  .rw-subnav__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
  }

  .rw-subnav__label {
    margin: 0 0 8px;
    padding: 0 12px;
    font-weight: 600;
    color: var(--text-light);
  }

  .rw-subnav__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .rw-subnav__foot {
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }

  .rw-subnav__foot a {
    display: inline-flex;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--teal-deep);
  }
}

/* Between 1000 and 1200 the nav is squeezed between the logo and the CTA, so
   the menu item sits far enough right that a wide panel hung 7.5rem to its
   left ran off the screen — on every page of the site. Narrower panel, deeper
   offset: both edges keep clearance instead of one of them just barely fitting. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .rw-subnav--methods {
    left: -10rem;
    width: min(34rem, calc(100vw - 48px));
  }

  .rw-subnav__cols {
    gap: 8px 16px;
  }
}

/* =========================================================================
   Mobile — designed, not squeezed
   ========================================================================= */

@media (max-width: 999px) {
  /* The panel covers the whole screen from the very top, under the header,
     so nothing of the page can show if the header changes height while the
     menu is open; its content starts where the header ends. Scrolling stays
     in the panel instead of passing on to the page (iOS did). */
  .rw-nav {
    position: fixed;
    inset: 0;
    background: var(--bg);
    padding: calc(var(--rw-nav-top, 78px) + var(--sp-6)) var(--gutter) var(--sp-20);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    z-index: 55;
  }

  /* The logo and the close button sit above the full-screen panel, and the
     panel redraws the header's bottom rule it now covers. */
  .rw-logo,
  .rw-nav-toggle {
    position: relative;
    z-index: 56;
  }

  .rw-nav::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--rw-nav-top, 78px) - 1px);
    height: 1px;
    background: var(--line);
  }

  body.rw-nav-open {
    overflow: hidden;
  }

  body.rw-nav-open .rw-header {
    background: var(--bg);
    backdrop-filter: none;
    border-bottom-color: var(--line);
  }

  body.rw-nav-open .rw-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .rw-nav > ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--line);
  }

  .rw-nav > ul > li {
    border-bottom: 1px solid var(--line);
    /* The row carries the title link and its expander side by side. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .rw-nav > ul > li > a {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.02em;
    padding: 17px 0;
    justify-content: space-between;
    white-space: normal;
  }

  .rw-nav > ul > li > a::after {
    display: none;
  }

  .rw-nav__chevron {
    display: none;
  }

  /* A down arrow in a round button: it reads as something to press, and the
     whole touch-sized square answers, not only the ring. */
  .rw-nav__expand {
    appearance: none;
    background: none;
    border: 0;
    width: var(--touch);
    height: var(--touch);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .rw-nav__expand::before {
    content: "";
    grid-area: 1 / 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .rw-nav__expand:active::before,
  .rw-nav > ul > li.is-open .rw-nav__expand::before {
    background: var(--teal-tint);
    border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  }

  .rw-nav__expand-icon {
    grid-area: 1 / 1;
    position: relative;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--dur) var(--ease);
  }

  .rw-nav > ul > li.is-open .rw-nav__expand-icon {
    transform: translateY(2px) rotate(225deg);
  }

  .rw-subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 14px 2px;
    min-width: 0;
    display: none;
    gap: 2px;
    grid-column: 1 / -1;
  }

  .rw-nav > ul > li.is-open > .rw-subnav {
    display: grid;
  }

  /* Without JS there is no expander, so the tree stays fully open. */
  .no-js .rw-subnav {
    display: grid;
  }

  .rw-subnav a {
    padding: 6px 0;
    color: var(--text-muted);
  }

  .rw-subnav a:hover {
    background: transparent;
  }

  /* The drawer has no underline; the current row takes the colour and a
     short bar at its edge. */
  .rw-nav > ul > li.current-menu-item > a,
  .rw-nav > ul > li.current-menu-ancestor > a {
    color: var(--teal-text);
  }

  .rw-subnav .current-menu-item > a {
    background: transparent;
    box-shadow: none;
    padding-left: 12px;
    position: relative;
  }

  .rw-subnav .current-menu-item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--teal);
  }

  /* The title row above is the link to the parent page already. */
  .rw-subnav__overview {
    display: none;
  }

  .rw-subnav--methods {
    width: auto;
    left: auto;
    padding: 0 0 16px;
    /* Collapsed like every other group; the expander opens it. */
    display: none;
    box-shadow: none;
    border: 0;
    background: transparent;
  }

  /* The methods panel lays its own columns out, so it opens as a block
     rather than inheriting the plain groups' grid. */
  .rw-nav > ul > li.is-open > .rw-subnav--methods,
  .no-js .rw-subnav--methods {
    display: block;
  }

  .rw-subnav__cols {
    display: grid;
    gap: 14px;
  }

  .rw-subnav__label {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--text-light);
  }

  .rw-subnav__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }

  .rw-subnav__foot {
    margin: 10px 0 0;
  }

  .rw-subnav__foot a {
    padding: 6px 0;
    font-weight: 600;
    color: var(--teal-deep);
  }

  .rw-hub-hero__grid {
    min-height: 0;
  }

  .rw-hub-hero__visual {
    height: 16rem;
  }

  .rw-index--hub .rw-index__row,
  .rw-index--hub .rw-index__row--media {
    grid-template-columns: 2.6rem minmax(0, 1fr);
  }

  .rw-index--hub .rw-index__media {
    display: none;
  }

  .rw-index--hub .rw-index__num {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .rw-index--hub .rw-index__name,
  .rw-index--hub .rw-index__desc,
  .rw-index--hub .rw-index__more {
    grid-column: 2;
  }

  .rw-proc-related__also {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .rw-header__inner {
    display: flex;
  }

  .rw-header__cta {
    display: none;
  }

  .rw-nav-toggle {
    display: block;
    flex: none;
  }

  .rw-logo {
    margin-right: auto;
  }

  .rw-logo__img {
    height: 44px;
    max-height: 44px;
  }

  .rw-mobile-cta {
    display: grid;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--white) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }

  /* Keep overlay copy above the fixed phone/booking bar. */
  .rw-photo__caption--on {
    padding-bottom: calc(var(--sp-4) + 82px);
  }

  /* Both labels stay on one line so the two controls match in height. */
  .rw-mobile-cta .rw-btn {
    padding-inline: 12px;
    font-size: 13.5px;
    white-space: nowrap;
  }

  body {
    padding-bottom: 82px;
  }

  .rw-symptoms__intro {
    position: static;
  }

  .rw-sticky-cta {
    position: static;
  }

  .rw-proc-rail {
    display: none;
  }
}

/* Phone + 7 nav labels do not fit until ~1360px; they overlap “Контакти”. */
@media (max-width: 1359px) and (min-width: 1000px) {
  .rw-header__phone {
    display: none;
  }

  .rw-nav a {
    padding-inline: 8px;
    font-size: 13.5px;
  }

  /* Column labels start where the links' text does. */
  .rw-subnav__label {
    padding-inline: 8px;
  }

  .rw-header__cta {
    gap: 12px;
  }
}

/* The written-out number does not fit here, but the handset alone does, so the
   link stays and the phone is one tap away instead of only on the contact page.
   Below 1080 even the circle lands on “Контакти”, which is where it drops out.
   Label and number are clipped rather than removed, so the link keeps its
   accessible name without needing an aria-label. */
@media (max-width: 1359px) and (min-width: 1080px) {
  .rw-header__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--teal-text);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .rw-header__phone:hover,
  .rw-header__phone:focus-visible {
    background: var(--teal-tint);
    border-color: var(--teal);
  }

  .rw-header__phone-icon {
    display: inline-flex;
  }

  .rw-header__phone-label,
  .rw-header__phone-num {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  :root {
    --sp-12: 68px;
    --sp-16: 84px;
    --sp-20: 96px;
  }

  .rw-hero {
    display: flex;
    flex-direction: column;
  }

  .rw-hero__grid {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-block: var(--sp-4) var(--sp-3);
  }

  .rw-gbadge {
    padding: 6px 12px 6px 9px;
    gap: 6px;
    margin-top: 16px;
  }

  .rw-gbadge__logo {
    width: 16px;
    height: 16px;
  }

  .rw-gbadge__star {
    width: 13px;
    height: 13px;
  }

  .rw-gbadge__label {
    font-size: 13px;
  }

  .rw-hero__title {
    max-width: none;
    font-size: clamp(34px, 10.5vw, 48px);
    margin-bottom: var(--sp-3);
  }

  .rw-hero__desc {
    margin-bottom: var(--sp-4);
  }

  .rw-hero__ghost {
    inset: auto -20% 0 auto;
    width: 78%;
    top: auto;
    height: 42%;
  }

  .rw-hero__stage {
    flex: 1 1 auto;
    min-height: 220px;
    margin-inline: -8px;
  }

  .rw-hero__visual {
    inset: 0 -8% -2% 0;
  }

  .rw-hero__stage--both .rw-hero__visual {
    inset: 0 -10% -2% 50%;
  }

  .rw-hero__stage--both .rw-hero__markers {
    inset: 4% 0 4% 50%;
  }

  .rw-hero__figure {
    left: 0;
    bottom: calc(var(--sp-3) * -1);
    width: 46%;
  }

  /* A phone stacks copy over stage, so the stage buys the height the figure
     needs instead of letting him climb over the note. */
  .rw-hero__stage--doctor {
    min-height: 346px;
    padding-top: 46px;
  }

  /* The caption takes the top-left corner, so the one marker a phone shows
     starts below it. */
  .rw-hero__stage--doctor .rw-hero__markers {
    inset: 58px 0 4% 0;
  }

  .rw-hero__stage--doctor .rw-hero__figure {
    left: 28%;
    width: 56%;
  }

  .rw-hero__stage--doctor .rw-hero__doctor {
    aspect-ratio: 492 / 700;
  }

  /* Above the fold a phone shows the copy and the top of the stage, so the
     caption goes first and the photograph stands under it. */
  .rw-hero__plate {
    /* The stage is pulled 8px wider than the container, so this puts the
       plate back on the text's left margin. */
    left: 8px;
    top: 0;
    bottom: auto;
    padding: 7px 13px;
  }

  .rw-hero__plate-name {
    font-size: 13px;
  }

  .rw-marker:nth-child(n + 2) {
    display: none;
  }

  .rw-hero__markers {
    inset: 4% 0 4% 0;
  }

  .rw-marker:nth-child(2) {
    right: 2%;
  }

  .rw-marker:nth-child(3) {
    left: 2%;
    bottom: 4%;
  }

  /* Anatomy becomes a watermark behind the headline instead of a side panel */
  .rw-hero__anatomy {
    right: -34%;
    top: 4%;
    width: 118%;
    opacity: 0.16;
  }

  .rw-index__row {
    grid-template-columns: 2.2rem 1fr;
    padding: 20px 0;
  }

  .rw-index__desc {
    grid-column: 2;
  }

  .rw-stories__feature {
    grid-template-columns: 1fr;
  }

  .rw-stories__feature .rw-video {
    aspect-ratio: 16 / 10;
  }

  .rw-details__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .rw-form {
    padding: var(--sp-4);
  }

  .rw-hero__actions .rw-btn,
  .rw-featured__actions .rw-btn {
    flex: 1 1 100%;
  }
}

/* =========================================================================
   Touch targets — phone and small tablet
   The --touch token existed but never reached inline links. Links inside a
   stacked list grow their box, which improves the rhythm anyway. Links that
   sit in a line of type grow only their hit area, via a transparent overlay,
   so the type and its underline stay exactly where they were.
   ========================================================================= */

@media (max-width: 899px) {
  .rw-footer ul li a,
  .rw-footer p > a:not(.rw-btn) {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
  }

  /* The links now carry their own height, so the list gap that used to
     separate them would just be added on top. */
  .rw-footer ul {
    gap: 0;
  }

  .rw-link,
  .rw-breadcrumbs a,
  .rw-details dd a,
  .rw-consult__also a {
    position: relative;
  }

  .rw-link::after,
  .rw-breadcrumbs a::after,
  .rw-details dd a::after,
  .rw-consult__also a::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rw-reveal-line {
    clip-path: none;
  }

  .rw-observe,
  .rw-observe--stagger > * {
    opacity: 1;
    transform: none;
  }

  .rw-doppler__wave,
  .rw-doppler-panel.is-in .rw-doppler__wave,
  .rw-observe.is-in .rw-doppler__wave {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  .rw-anatomy--flow .rw-vein {
    animation: none !important;
    stroke-dasharray: none;
  }

  .rw-hero__field,
  .rw-hero__ghost,
  .rw-hero__visual,
  .rw-hero__step,
  .rw-reveal-line,
  .rw-marker,
  .rw-scan__nodes,
  .rw-scan__perforators path,
  .rw-scan__flow .rw-flow,
  .rw-scan__veins .rw-vein {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none !important;
  }

  .rw-scan__veins .rw-vein {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .rw-scan__sweep,
  .rw-node__halo {
    animation: none !important;
  }

  .rw-header,
  .rw-header__inner,
  .rw-logo__img {
    transition: none !important;
  }
}

/* Article scaffolding — byline, contents, FAQ, further reading.
   All four sit inside the 68ch reading column of .rw-prose so the eye never
   has to change line length between the text and the furniture around it. */
.rw-byline {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px;
  /* Full header width: at 62ch the rule stopped short of the header's own
     bottom rule just below it. */
  max-width: none;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-muted);
}

.rw-byline p {
  margin: 0;
}

.rw-byline__label {
  display: inline-block;
  min-width: 10.5em;
  color: var(--text-light);
}

.rw-byline__author a,
.rw-byline__review a {
  color: var(--text);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.rw-byline__author a:hover,
.rw-byline__review a:hover {
  color: var(--teal-deep);
}

.rw-byline__role {
  color: var(--text-light);
}

.rw-byline__role::before {
  content: " · ";
}

.rw-byline__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--text-light);
}

.rw-toc {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
  background: var(--white);
  max-width: 62ch;
}

.rw-toc__title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 10px;
}

.rw-toc__list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
  font-size: var(--t-small);
  line-height: 1.5;
}

.rw-toc__list a {
  color: var(--text);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.rw-toc__list a:hover {
  color: var(--teal-deep);
}

.rw-article-faq {
  margin: var(--sp-6) 0;
  max-width: 68ch;
}

.rw-article-faq__title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.22;
  margin: 0 0 var(--sp-2);
}

.rw-article-faq__list {
  border-top: 1px solid var(--line-strong);
}

.rw-related {
  margin: var(--sp-6) 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  max-width: 62ch;
}

.rw-related__title {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0 0 12px;
}

.rw-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.rw-related__list a {
  color: var(--text);
  font-weight: 500;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.rw-related__list a:hover {
  color: var(--teal-deep);
}

.rw-related__note {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: 1.55;
}

/* A heading jumped to from the contents list should not hide under the
   sticky header. */
.rw-prose :where(h2, h3)[id] {
  scroll-margin-top: 96px;
}

.rw-archive__back {
  margin: var(--sp-4) 0 0;
  font-size: var(--t-small);
}

.rw-eyebrow-link {
  text-decoration: none;
  display: inline-block;
}

.rw-eyebrow-link:hover .rw-eyebrow {
  color: var(--teal-deep);
}

.rw-posts__cat {
  display: inline-block;
  margin-left: 12px;
  color: var(--text-light);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.rw-posts__cat:hover {
  color: var(--teal-deep);
}

.rw-pricing__note {
  margin-top: 4px;
}

/* Safety net for the homepage. Every theme block brings its own .rw-container;
   a plain paragraph or list added in the editor brings none, and without one it
   runs edge to edge with no gutter. This gives those the same measure, so an
   editor cannot break the band rhythm by typing a sentence between two
   sections. */
.rw-main--home > :where(p, ul, ol, dl, blockquote, h2, h3, h4, .wp-block-paragraph, .wp-block-list, .wp-block-heading, .wp-block-quote) {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}