/* ==========================================================================
   China Medical Guides — components.css
   Header, footer, navigation, cards, tables, accordion, steps, pricing,
   directory, editorial prose, pagination, tabs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 247, 244, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 8px 24px -22px rgba(34, 34, 34, 0.55);
}

.header-inner {
  display: flex;
  align-items: center;
  /* the nav grew to five links plus two menus; 1.5rem of gap pushed the header
     past a 1440px viewport and forced a horizontal scrollbar */
  gap: 1rem;
  min-width: 0;
  height: var(--header-h);
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  flex-shrink: 0;
}
/* No badge: the mark is a blue silhouette on the header's own background,
   which gives the gateway opening room to read at 20–34px. */
/* The mark is a detailed illustration, so it needs more room than a glyph
   mark did. Sized to the largest the 74px header allows. */
.brand-mark {
  /* The mark is now the square gate emblem, so the box is square. 34px puts its
     optical mass just under the 24px wordmark without competing with it. */
  height: 36px;
  width: 36px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
/* The CMG line under this was removed, so the wordmark carries the brand alone
   and can afford to be larger. 1.3125rem keeps it inside the 72px header at
   every breakpoint. */
.brand-name {
  font-family: var(--font-display);
  /* "MediTour Care" is three characters shorter than the old name, so the header
     has room to let it read as a wordmark rather than a label */
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
@media (max-width: 900px) {
  .brand-name {
    font-size: 1.5rem;
  }
}
.brand-sub {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Primary nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: auto;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  white-space: nowrap;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-xs);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lead);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover {
  color: var(--ink);
  background: var(--warm);
}
.nav-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
.nav-link .icon {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--muted);
  transition: transform var(--dur) var(--ease);
}
.nav-item {
  position: relative;
}
.nav-item.is-open > .nav-link .icon {
  transform: rotate(180deg);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 17rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-surface);
  padding: 0.5rem;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
  z-index: 50;
}
.nav-item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6875rem 0.75rem;
  border-radius: var(--radius-xs);
  transition: background var(--dur) var(--ease);
}
.dropdown-item:hover {
  background: var(--warm);
}
.dropdown-item .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--brand);
  margin-top: 0.1875rem;
  flex-shrink: 0;
}
.dropdown-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.dropdown-item-desc {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 0.125rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Language switcher */
.lang-switch {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lead);
  background: var(--white);
  transition: border-color var(--dur) var(--ease);
}
.lang-btn:hover {
  border-color: var(--ink);
}
.lang-btn .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--muted);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  /* Size to the longest language name instead of a fixed 15rem: the labels
     range from "EN" to "Bahasa Indonesia", and a fixed width left about a
     hundred pixels of empty panel next to the short ones. */
  width: max-content;
  min-width: 10.5rem;
  max-width: 17rem;
  max-height: min(70vh, 30rem);
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-surface);
  padding: 0.375rem;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
  z-index: 60;
}
.lang-switch.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-xs);
  font-size: 0.875rem;
  color: var(--lead);
  text-align: left;
}
.lang-item:hover {
  background: var(--warm);
  color: var(--ink);
}
.lang-item[aria-current="true"] {
  color: var(--brand);
  font-weight: 600;
}

/* Mobile nav toggle + drawer */
.nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.nav-toggle .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* Closed = display:none, so a transformed off-screen panel can never add
   horizontal scroll to the document. The slide-in is an entry animation. */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--white);
  z-index: 90;
  overflow-y: auto;
  padding: 1.25rem var(--gutter) 3rem;
  display: none;
}
.drawer.is-open {
  display: block;
  animation: drawer-in 240ms var(--ease);
}
@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer.is-open {
    animation: none;
  }
}
@media (min-width: 1400px) {
  .drawer {
    display: none !important;
  }
}
.drawer-section + .drawer-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.drawer-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.drawer-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.drawer-link:last-child {
  border-bottom: 0;
}
.drawer-sub {
  display: block;
  padding: 0.625rem 0 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: var(--lead);
  border-left: 2px solid var(--rule);
  margin-bottom: 0.25rem;
}

@media (max-width: 1399px) {
  .main-nav,
  .header-actions .btn-label-desktop {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .header-inner {
    justify-content: space-between;
  }
}

/* Small screens: the header keeps only the brand, the language switcher and
   the menu button. The consultation CTA lives in the drawer and the hero. */
@media (max-width: 700px) {
  .header-actions > .btn-primary {
    display: none;
  }
  .header-inner {
    gap: 0.75rem;
  }
  .header-inner > * {
    min-width: 0;
  }
  .brand {
    min-width: 0;
  }
  .brand-text {
    min-width: 0;
  }
  .brand-name,
  .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   2. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-top: 4rem;
  font-size: 0.9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer-brand .brand-name {
  color: #fff;
}
.footer-brand .brand-sub {
  color: rgba(255, 255, 255, 0.5);
}
.footer-brand .brand-mark {
  /* no tile — the mark carries its own contrast on dark */
}
.footer-tagline {
  margin-top: 1rem;
  max-width: 22rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.footer-heading {
  color: var(--highlight);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.125rem;
}
.footer-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
}
.footer-list a {
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur) var(--ease);
}
.footer-list a:hover {
  color: #fff;
}
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
.footer-contact-item .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.footer-contact-item a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}
.footer-legal a:hover {
  color: #fff;
}
.footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.25rem 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   3. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: 3.5rem 2.5rem;
  background: var(--warm);
  border-bottom: 1px solid var(--rule);
}
.page-hero-white {
  background: var(--white);
}
.page-hero-inner {
  /* the hero copy was capped for a 1240px grid; the grid is 1440px now */
  max-width: 60rem;
}
.page-hero .t-h1 {
  margin-bottom: 1rem;
}
.page-hero .t-lead {
  max-width: 52rem;
}
.page-hero .honesty-strip {
  margin-top: 1.5rem;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 1.125rem;
}
.breadcrumbs a:hover {
  color: var(--brand);
}
.breadcrumbs .icon {
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.55;
}
@media (max-width: 860px) {
  .page-hero {
    padding-block: 2.25rem 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   4. Accordion (native details/summary) — discrete warm cards
   -------------------------------------------------------------------------- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.acc-item {
  background: var(--warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius-surface);
  transition: border-color var(--dur) var(--ease);
}
.acc-item[open] {
  border-color: var(--rule-strong);
}
.acc-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}
.acc-item summary::-webkit-details-marker {
  display: none;
}
.acc-item summary:hover {
  color: var(--brand);
}
.acc-item summary .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 200ms var(--ease);
}
.acc-item[open] summary .icon {
  transform: rotate(90deg);
  color: var(--brand);
}
.acc-body {
  padding: 0 1.5rem 1.5rem;
  max-width: 52rem;
  color: var(--lead);
  line-height: 1.68;
  font-size: 0.9375rem;
}
.acc-body > * + * {
  margin-top: 0.875rem;
}
.acc-body ul,
.acc-body ol {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.acc-body ul {
  list-style: disc;
}
.acc-body ol {
  list-style: decimal;
}
.acc-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   5. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  font-size: 0.9375rem;
  min-width: 34rem;
}
.table caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.25rem 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.table th,
.table td {
  padding: 0.875rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--warm);
  white-space: nowrap;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover {
  background: rgba(247, 247, 244, 0.6);
}
.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table .cell-strong {
  font-weight: 600;
  color: var(--ink);
}
.table-compare td:nth-child(2) {
  background: rgba(1, 74, 117, 0.045);
}
.table-compare th:nth-child(2) {
  color: var(--brand-ink);
}
.table-footnote {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 1rem;
}

/* Definition rows (label/value pairs) */
.deflist {
  display: grid;
  gap: 0.875rem;
}
.deflist-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.deflist-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.deflist-row dt {
  color: var(--muted);
  font-weight: 500;
}
.deflist-row dd {
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 640px) {
  .deflist-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. Stat blocks
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}
.stat-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(34, 34, 34, 0.55);
  line-height: 1.4;
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.stat-source {
  font-size: 0.75rem;
  color: var(--faint);
  line-height: 1.45;
  margin-top: 0.25rem;
}
.stat-value.is-small {
  font-size: 1.75rem;
}
/* Stats inside cards need to be a little smaller so long values stay on one line. */
.card .stat-value,
.card-flat .stat-value {
  font-size: 2.25rem;
}
@media (max-width: 900px) {
  .stat-row,
  .stat-row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 480px) {
  .stat-row,
  .stat-row-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Fact strip inside cards */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 1.25rem;
}
.fact-strip .fact-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.fact-strip .fact-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
@media (max-width: 560px) {
  .fact-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   7. Process steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* eight steps in two rows of four */
  gap: 2.25rem 1.5rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 1.875rem;
  border-top: 2px solid var(--rule);
}
/* a dot marks where each step begins, and the rule it sits on reads as one
   continuous track across the four columns */
.step::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand);
}
/* bridges the grid gap so the track is unbroken between steps */
.step::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 100%;
  width: 1.5rem;
  height: 2px;
  background: var(--rule);
}
.step:nth-child(4n)::after,
.step:last-child::after {
  display: none;
}
@media (max-width: 560px) {
  /* single column: the track becomes a left rail instead of a top one */
  .step::after {
    display: none;
  }
}
.step-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brand);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.75rem;
  display: block;
}
.step-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.step-text {
  font-size: 0.9375rem;
  color: var(--lead);
  line-height: 1.62;
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Vertical numbered timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-bottom: 2rem;
  position: relative;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-marker {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft-strong);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9375rem;
  z-index: 1;
}
.timeline-item:not(:last-child) .timeline-marker::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 2.75rem;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.timeline-day {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.timeline-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.375rem;
}
.timeline-text {
  font-size: 0.9375rem;
  color: var(--lead);
  line-height: 1.62;
}

/* --------------------------------------------------------------------------
   8. Pricing
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.price-card {
  background: var(--white);
  border: 2px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}
.price-card.is-featured {
  border-color: rgba(1, 74, 117, 0.45);
  background: rgba(1, 74, 117, 0.045);
}
.price-card-flag {
  position: absolute;
  top: -0.75rem;
  left: 2rem;
  background: var(--brand);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
}
.price-amount {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.price-amount .currency {
  font-size: 1.5rem;
  vertical-align: super;
  margin-right: 0.125rem;
}
.price-period {
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.375rem;
}
.price-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--lead);
  line-height: 1.55;
}
.price-list li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.price-list .icon {
  width: 1.0625rem;
  height: 1.0625rem;
  color: var(--success);
  flex-shrink: 0;
  margin-top: 0.1875rem;
}
.price-list .icon.is-muted {
  color: var(--faint);
}
.price-card .btn {
  margin-top: auto;
}
@media (max-width: 800px) {
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Included / not included two-column list */
.scope-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.scope-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--lead);
}
.scope-list li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.scope-list .icon {
  width: 1.0625rem;
  height: 1.0625rem;
  flex-shrink: 0;
  margin-top: 0.1875rem;
}
.scope-list.is-included .icon {
  color: var(--success);
}
.scope-list.is-excluded .icon {
  color: var(--faint);
}
@media (max-width: 700px) {
  .scope-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   9. Hospital / result cards
   -------------------------------------------------------------------------- */
.result-card {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 0;
  /* the photo runs flush to the card edge and stretches the full row height,
     so the image column reads as a panel rather than a thumbnail */
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color var(--dur) var(--ease);
}
.result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--rule-strong);
}
.result-media {
  border-radius: 0;
  overflow: hidden;
  background: var(--warm-deep);
  height: 100%;
  min-height: 12rem;
}
.result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Real photographs: bias the crop upward so facades and signage survive
     the 4:3 crop on portrait source images. */
  object-position: 50% 38%;
}
.result-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.375rem;
}
.result-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.result-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.24;
  margin-top: 0.375rem;
}
.result-title a:hover {
  color: var(--brand);
}
.result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--lead);
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-weight: 600;
  color: var(--ink);
}
.rating .icon {
  width: 1rem;
  height: 1rem;
  color: var(--warning);
  fill: var(--warning);
  stroke: var(--warning);
}
.result-ranking {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--lead);
  line-height: 1.5;
}
.result-ranking .icon {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 0.1875rem;
}
.result-desc {
  font-size: 0.9375rem;
  color: var(--lead);
  line-height: 1.62;
  margin-top: 0.875rem;
}
.result-desc.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.read-toggle {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: 0.375rem;
  align-self: flex-start;
}
.result-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.flight-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--lead);
  border-bottom: 1px dotted var(--rule-strong);
  padding-bottom: 1px;
}
.flight-toggle:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.flight-toggle .icon {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--muted);
}
.flight-panel {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--warm);
  padding: 1rem 1.125rem;
}
.flight-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 3.25rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  padding: 0.3125rem 0;
}
.flight-city {
  color: var(--lead);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flight-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--rule);
  overflow: hidden;
}
.flight-bar span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: var(--radius-pill);
}
.flight-time {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .result-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .result-media {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* Specialty tile */
.specialty-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 10rem;
  padding: 1.25rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--warm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.specialty-tile:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.specialty-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  z-index: 0;
  transition: transform 500ms var(--ease);
}
.specialty-tile:hover img {
  transform: scale(1.03);
}
.specialty-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 34, 34, 0.05) 0%,
    rgba(34, 34, 34, 0.28) 45%,
    rgba(34, 34, 34, 0.74) 100%
  );
  z-index: 1;
}
.specialty-tile-text {
  position: relative;
  z-index: 2;
  color: #fff;
}
.specialty-tile-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
.specialty-tile-count {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 0.3125rem;
}

/* --------------------------------------------------------------------------
   10. Directory: filter bar + pagination
   -------------------------------------------------------------------------- */
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  padding-block: 0.875rem;
}
.filter-inner {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.filter-inner .input-group {
  flex: 1 1 16rem;
  min-width: 12rem;
}
.filter-inner .select {
  width: auto;
  min-width: 10.5rem;
  flex: 0 1 auto;
}
.filter-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.25rem 0.5rem;
  font-size: 0.9375rem;
  color: var(--lead);
}
.filter-count strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 700px) {
  .filter-inner .input-group,
  .filter-inner .select {
    flex: 1 1 100%;
    width: 100%;
  }
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 2.375rem;
  height: 2.375rem;
  padding-inline: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lead);
  background: var(--white);
  transition: all var(--dur) var(--ease);
}
.page-btn:hover:not([disabled]) {
  border-color: var(--brand);
  color: var(--brand);
}
.page-btn[aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
}
.page-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-ellipsis {
  color: var(--faint);
  padding-inline: 0.25rem;
}

.empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-card);
  background: var(--warm);
}
.empty-state .icon {
  width: 2rem;
  height: 2rem;
  color: var(--faint);
  margin: 0 auto 1rem;
}

/* --------------------------------------------------------------------------
   11. Tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover {
  color: var(--ink);
}
.tab[aria-selected="true"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.tab-panel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   12. Editorial prose (article body)
   -------------------------------------------------------------------------- */
.prose-medical {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.78;
  color: var(--ink);
  /* 72ch is about 72 characters on a Latin line — inside the 60–75 range that
     keeps the eye from losing its place on the return sweep */
  max-width: 72ch;
}
.prose-medical p + p {
  margin-top: 1.15rem;
}
.prose-medical > * + * {
  margin-top: 1.25rem;
}
.prose-medical h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 3.25rem;
  margin-bottom: 1rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6rem;
}
/* the first heading sits right under the intro, so it needs no rule above it */
.prose-medical > h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.prose-medical h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 6rem;
}
.prose-medical h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  scroll-margin-top: 6rem;
}
.prose-medical a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-medical a:hover {
  color: var(--brand-dark);
}
.prose-medical strong {
  font-weight: 600;
}
.prose-medical ul,
.prose-medical ol {
  margin-left: 1.5rem;
  margin-block: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.prose-medical ul {
  list-style: none;
  margin-left: 0;
}
.prose-medical ul li {
  position: relative;
  padding-left: 1.25rem;
}
.prose-medical ul li::before {
  content: "";
  position: absolute;
  left: 0;
  /* aligned to the first line's optical centre at 1.78 line-height, not its top */
  top: 0.82rem;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}
.prose-medical ol {
  list-style: decimal;
  padding-left: 0.25rem;
}
.prose-medical ol li {
  padding-left: 0.375rem;
}
.prose-medical ol li::marker {
  color: var(--brand);
  font-weight: 600;
}
.prose-medical blockquote {
  border-left: 3px solid var(--brand);
  padding: 1rem 1.25rem;
  margin-block: 1.75rem;
  background: var(--warm);
  border-radius: 0 8px 8px 0;
  color: var(--lead);
}
.prose-medical blockquote p:last-child {
  margin-bottom: 0;
}
.prose-medical table {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  width: 100%;
  margin-block: 2rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.prose-medical th,
.prose-medical td {
  border-bottom: 1px solid var(--rule);
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: top;
}
.prose-medical th {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--warm);
}
.prose-medical tr:last-child td {
  border-bottom: 0;
}
.prose-medical tbody tr:hover td {
  background: #fbfbf9;
}
.prose-medical img,
.prose-medical figure img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--rule);
  margin-block: 1.5rem;
}
.prose-medical figcaption {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 0.5rem;
  text-align: center;
}
.prose-medical code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--warm);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}
.prose-medical hr {
  margin-block: 2rem;
}

/* Article layout with sticky sidebar */
/* Matches the article grid below it (700px measure + gap + 18rem sidebar), so the
   summary box and the prose share one left and right edge. */
.container-narrow {
  /* Matches article-layout exactly: 760 + 4rem + 18rem, plus the gutter the
     container already carries. */
  max-width: calc(760px + 4rem + 18rem + 2 * var(--gutter));
  margin-inline: auto;
}

.article-layout {
  /* Fixed, tight pairing: 760 + 64 gap + 288 = 1112px, centred. Pushing the two
     columns to the container edges moved all the slack into the gap between the
     text and its own table of contents — 248px of nothing in the middle of the
     page, which reads as a mistake rather than as margin. */
  display: grid;
  grid-template-columns: minmax(0, 760px) 18rem;
  gap: 4rem;
  align-items: start;
  justify-content: center;
}
/* inside this layout the column already enforces the measure */
.article-layout .prose-medical {
  max-width: none;
}
.article-aside {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.toc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.875rem;
}
.toc a {
  display: block;
  padding: 0.375rem 0 0.375rem 0.875rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  line-height: 1.4;
  transition: all var(--dur) var(--ease);
}
.toc a:hover {
  color: var(--ink);
  border-color: var(--rule-strong);
}
.toc a.is-active {
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}
@media (max-width: 1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .article-aside {
    position: static;
  }
}

/* Article meta line */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.byline .avatar {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--brand-soft-strong);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.75rem;
}
.byline-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rule-strong);
}

/* References list */
.references {
  list-style: decimal;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
}
.references a {
  color: var(--brand);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-card);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.cta-band .t-h2 {
  color: #fff;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.75rem;
  max-width: 34rem;
  line-height: 1.6;
}
.cta-band-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .cta-band {
    padding: 2rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   14. Misc
   -------------------------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin-block: 2.5rem;
}

.pill-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--brand);
  z-index: 200;
  width: 0;
  transition: width 120ms linear;
}

.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--dur) var(--ease);
  z-index: 80;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ---------------------------------------------------- WhatsApp float ----
   The primary conversion channel for overseas patients: someone who will not
   fill in a form will still open WhatsApp. It sits in the prime bottom-right
   corner and the back-to-top button moves above it, because scrolling is a
   utility and talking to a coordinator is the point.

   Sizes are set for thumbs, not cursors, and the safe-area insets keep it
   clear of the iPhone home indicator. */
.wa-float {
  position: fixed;
  right: calc(1.5rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 84;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6875rem 1.125rem 0.6875rem 0.9375rem;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(18, 140, 74, 0.28), 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.wa-float:hover {
  background: #1fb457;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(18, 140, 74, 0.34), 0 2px 4px rgba(0, 0, 0, 0.16);
}
.wa-float:active {
  transform: translateY(0);
}
.wa-float:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.wa-float-icon {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}
.wa-float-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.wa-float-label {
  white-space: nowrap;
}

/* Back-to-top moves to the left corner: the right corner belongs to the two
   conversion actions, and stacking three floating controls in one place left
   them overlapping each other on the cost guide. */
.to-top {
  right: auto;
  left: calc(1.5rem + env(safe-area-inset-left, 0px));
}

/* On the cost guide the estimate cart keeps the bottom-right while a patient is
   building a quote, so the capsule sits directly above it. */
body.has-estimate .wa-float {
  bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
  .wa-float {
    right: calc(0.875rem + env(safe-area-inset-right, 0px));
    bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
    gap: 0.375rem;
    padding: 0.5625rem 0.875rem 0.5625rem 0.75rem;
    font-size: 0.8125rem;
    box-shadow: 0 4px 14px rgba(18, 140, 74, 0.3), 0 1px 2px rgba(0, 0, 0, 0.14);
  }
  .wa-float-icon {
    width: 1.125rem;
    height: 1.125rem;
  }
  .to-top {
    right: auto;
    left: calc(0.875rem + env(safe-area-inset-left, 0px));
    width: 2.5rem;
    height: 2.5rem;
  }
  body.has-estimate .wa-float {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Very narrow phones: drop to the icon alone rather than let the capsule
   crowd the corner. The label is a single short word now, so this only fires
   below a 375px iPhone SE. The accessible name stays on the anchor, so a
   screen reader still reads the full action. */
@media (max-width: 340px) {
  .wa-float {
    padding: 0.6875rem;
    gap: 0;
  }
  .wa-float-label {
    display: none;
  }
  .wa-float-icon {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* Skeleton for async lists */
.skeleton {
  background: linear-gradient(90deg, var(--warm) 25%, var(--warm-deep) 37%, var(--warm) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Newsletter band */
.newsletter {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--warm);
}
.newsletter-form {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.newsletter-form .input {
  min-width: 16rem;
  flex: 1 1 16rem;
}

/* Print: never hide revealed content. */
@media print {
  html.js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Never let a long token force a page wider than the viewport. */
.hero-title,
.t-display,
.t-h1,
.t-h2,
.t-h3,
.card-title,
.result-title,
.treatment-name,
.fee-name,
.arch-name {
  overflow-wrap: break-word;
}

/* Definition rows inside a narrow sidebar stack instead of squeezing the value. */
.sticky-card .deflist-row,
.article-aside .deflist-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
}

/* Patient-facing label plus a one-line explanation. The old hospital-count
   badge is gone: at 25 hospitals a count of 3 or 6 signals nothing, and for
   orthopaedics it advertised the thinnest coverage on the site. */
.specialty-tile-desc {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

/* The drawer sits outside .site-header on purpose: the header's backdrop-filter
   creates a containing block for position:fixed children, which previously
   clipped the drawer to the header's own height. */
.drawer { z-index: 95; }

/* The header bar carried three type sizes (nav 15, language 13, CTA 14).
   One scale now: everything that sits in the bar is 0.9375rem. */
.header-actions .btn-sm { font-size: 0.9375rem; }

/* ------------------------------------------------------- legal index ---- */
.legal-group + .legal-group {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.legal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.legal-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.legal-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-pop);
}
.legal-card-title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.legal-card-blurb {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--lead);
}
.legal-card-go {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
}

/* ------------------------------------------------- condition selector ---- */
.cond-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.875rem;
}
.cond-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.125rem 1.25rem;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cond-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-pop);
  transform: translateY(-1px);
}
.cond-card.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.cond-label {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}
.cond-lead {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--lead);
}
.cond-meta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
}
.cond-panel {
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
.cond-body-head {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.cond-body-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding-top: 1.5rem;
}
@media (max-width: 720px) {
  .cond-body-cols {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .cond-panel {
    padding: 1.25rem;
  }
}

/* ------------------------------------------------------- mobile CTA bar ----
   On a phone the request card sits below several screens of copy, so the one
   action that matters is pinned to the bottom. It leaves room for the WhatsApp
   capsule on the right and clears the iOS home indicator. */
.sticky-cta {
  display: none;
}
@media (max-width: 720px) {
  .sticky-cta {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 83;
    padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    padding-right: 8.5rem;      /* clear of the WhatsApp capsule */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--rule);
  }
  .sticky-cta .btn {
    min-height: 2.75rem;
    font-size: 0.875rem;
  }
  .sticky-cta .btn-block {
    flex: 1;
  }
  /* keep the last section clear of the bar */
  main:has(.sticky-cta) {
    padding-bottom: 4.5rem;
  }
}

/* The note sits on its own line under the title, smaller and lighter — it is a
   hint, not a second headline. */
.dropdown-item-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.dropdown-item-desc {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ------------------------------------------------------------- reviews ---- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.review-card {
  margin: 0;
  padding: 1.25rem 1.375rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.review-stars {
  color: #c8912a;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
}
.review-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--ink);
}
.review-meta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.review-meta strong {
  color: var(--ink);
}
.review-date {
  display: block;
  margin-top: 0.125rem;
}

/* Between the drawer breakpoint and a wide desktop the five nav links have to
   share the row with the brand and the actions, so they tighten up. */
@media (min-width: 1400px) and (max-width: 1680px) {
  .main-nav .nav-link {
    font-size: 0.875rem;
    padding-inline: 0.4375rem;
  }
  .header-inner {
    gap: 0.75rem;
  }
}
/* Russian and Vietnamese run longer than English for the same label, and no
   amount of shrinking fits seven of them beside the brand and the CTA. Those
   Shortened labels let all eight locales keep the full bar down to the standard
   drawer breakpoint again. */
@media (max-width: 1399px) {
  [lang="ru"] .main-nav,
  [lang="vi"] .main-nav,
  [lang="id"] .main-nav,
  [lang="ru"] .header-actions .btn-label-desktop,
  [lang="vi"] .header-actions .btn-label-desktop,
  [lang="id"] .header-actions .btn-label-desktop {
    display: none;
  }
  [lang="ru"] .nav-toggle,
  [lang="vi"] .nav-toggle,
  [lang="id"] .nav-toggle {
    display: inline-flex;
  }
  [lang="ru"] .header-inner,
  [lang="vi"] .header-inner,
  [lang="id"] .header-inner {
    justify-content: space-between;
  }
}
@media (min-width: 1400px) and (max-width: 1520px) {
  .main-nav .nav-link {
    font-size: 0.8438rem;
    padding-inline: 0.375rem;
  }
  .brand-name {
    font-size: 1.25rem;
  }
}

/* An email address is one unbreakable token; at 1024px it pushed the footer past
   the viewport and produced a horizontal scrollbar. */
.footer-contact-item a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------- country index ---- */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.country-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.country-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-pop);
}
.country-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}
.country-route {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--lead);
}
.country-stay {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
}

/* ----------------------------------------------------- hospital index ---- */
.hospital-index {
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.hospital-index-list {
  columns: 2;
  column-gap: 2.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.hospital-index-list li {
  break-inside: avoid;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.hospital-index-list a {
  color: var(--brand);
  text-decoration: none;
}
.hospital-index-list a:hover {
  text-decoration: underline;
}
.hospital-index-list .muted {
  margin-left: 0.375rem;
  font-size: 0.8125rem;
}
@media (max-width: 700px) {
  .hospital-index-list { columns: 1; }
}

/* The header shares .container with the body, so on a 1920 screen the nav was
   confined to 1440px with 240px of empty margin beside it — which is why the
   longer locales could not fit. The header is allowed a wider measure; the
   content column stays where it is. */
@media (min-width: 1600px) {
  .site-header .container {
    max-width: 1760px;
  }
}

/* ------------------------------------------------------- article cover ----
   The cover used to span the whole container at 16:9, which made a decorative
   drawing the biggest element on an article page. It now matches the prose.
*/
.article-cover {
  width: 100%;
  /* full container width again; the height is what was cut, from 352px to about
     260px, so the band is thinner without losing the wide, banner-like shape */
  max-width: none;
  margin: 2rem 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--warm-deep);
}
.article-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 1;
  object-fit: cover;
  background: #f2f5f8;
}