:root {
  --brand: #007e70;
  --brand-dark: #00675c;
  --brand-deep: #00584f;
  --cyan: #a5d1ca;
  --lime: #c8a15e;
  --surface: #f2f7f6;
  --paper: #ffffff;
  --ink: #102d29;
  --ink-soft: #4d6662;
  --line: rgba(16, 45, 41, 0.13);
  --danger: #c84a4a;
  --warning: #9a6715;
  --shadow: 0 24px 70px rgba(5, 71, 52, 0.12);
  --shadow-small: 0 12px 34px rgba(5, 71, 52, 0.09);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --max: 1220px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--brand), var(--cyan) 58%, var(--lime));
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.muted { color: var(--ink-soft); }
.eyebrow {
  margin: 0 0 14px;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border-bottom: 1px solid rgba(16, 45, 41, .08);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
}

.nav-wrap {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 26px;
}

.brand {
  display: inline-flex;
  min-width: 196px;
  align-items: center;
  gap: 11px;
  font-weight: 800;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  background: var(--brand);
  box-shadow: 0 10px 24px rgba(15, 92, 85, .25);
}

.brand-mark::before,
.brand-mark::after {
  position: absolute;
  content: "";
  border-radius: 999px;
  background: #fff;
}
.brand-mark::before { width: 21px; height: 6px; }
.brand-mark::after { width: 6px; height: 21px; }
.brand-copy { line-height: 1.04; }
.brand-copy small {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.main-nav { display: flex; margin-left: auto; align-items: center; gap: 5px; }
.nav-link {
  padding: 10px 12px;
  border-radius: 11px;
  color: #385752;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active { color: var(--brand-dark); background: var(--surface); }
.nav-link.active { box-shadow: inset 0 0 0 1px rgba(15, 92, 85, .12); }

.nav-dropdown { position: relative; }
.nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after {
  content: "⌄";
  font-size: 12px;
  transition: transform .2s ease;
}
.nav-dropdown[open] > summary::after { transform: rotate(180deg); }
.nav-dropdown.has-active > summary { color: var(--brand-dark); background: var(--surface); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  width: 238px;
  padding: 10px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 54px rgba(5,55,48,.18);
}
.nav-dropdown-menu::before {
  position: absolute;
  top: -14px;
  right: 0;
  left: 0;
  height: 14px;
  content: "";
}
.nav-sub-link {
  display: grid;
  padding: 12px 13px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}
.nav-sub-link small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; font-weight: 550; }
.nav-sub-link:hover,
.nav-sub-link.active { color: var(--brand-deep); background: var(--surface); }

.nav-actions { display: flex; align-items: center; gap: 9px; }
.lang-toggle {
  min-width: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 11px;
  color: var(--ink-soft);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}
.lang-toggle:hover { background: var(--surface); }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
}

.button {
  display: inline-flex;
  min-height: 46px;
  padding: 0 19px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 12px 28px rgba(15, 92, 85, .2);
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); background: #0b4e48; box-shadow: 0 17px 34px rgba(15, 92, 85, .28); }
.button.secondary { color: var(--ink); border-color: var(--line); background: #fff; box-shadow: none; }
.button.secondary:hover { border-color: rgba(15, 92, 85, .45); color: var(--brand-dark); }
.button.ghost { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.09); box-shadow: none; backdrop-filter: blur(10px); }
.button.small { min-height: 40px; padding-inline: 15px; border-radius: 11px; font-size: 13px; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 82px 0 72px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 18%, rgba(165, 209, 202, .28), transparent 28%),
    linear-gradient(135deg, #e8f3f0 0%, #f7faf9 58%, #eaf3f0 100%);
}
.page-hero::after {
  position: absolute;
  right: -100px;
  bottom: -210px;
  width: 420px;
  height: 420px;
  content: "";
  border: 1px solid rgba(15, 92, 85, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(165, 209, 202, .06), 0 0 0 120px rgba(197, 155, 85, .035);
}
.page-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); align-items: center; gap: 70px; }
.page-hero h1 { max-width: 790px; margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: .99; letter-spacing: -.052em; }
.page-hero p.lead { max-width: 700px; margin: 24px 0 0; color: var(--ink-soft); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.hero-panel { padding: 27px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--radius-xl); background: rgba(255,255,255,.75); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.hero-panel h2 { margin: 0 0 17px; font-size: 20px; }
.mini-flow { display: grid; gap: 9px; }
.mini-flow div { display: flex; padding: 12px 13px; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; font-size: 14px; font-weight: 700; }
.mini-flow b { display: inline-flex; width: 28px; height: 28px; flex: 0 0 28px; align-items: center; justify-content: center; border-radius: 9px; color: var(--brand-deep); background: rgba(197,155,85,.46); font-size: 12px; }

.section { padding: 86px 0; }
.section.soft { background: var(--surface); }
.section.dark { color: #fff; background: var(--brand-deep); }
.section-head { display: flex; margin-bottom: 32px; align-items: end; justify-content: space-between; gap: 28px; }
.section-head h2 { max-width: 760px; margin: 0; font-size: clamp(31px, 4vw, 50px); line-height: 1.08; letter-spacing: -.04em; }
.section-head p { max-width: 520px; margin: 0; color: var(--ink-soft); line-height: 1.7; }
.dark .section-head p { color: rgba(255,255,255,.7); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; }
.card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-small); }
.card h3 { margin: 0 0 9px; font-size: 20px; line-height: 1.25; }
.card p { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.card-link { display: inline-flex; margin-top: 18px; align-items: center; gap: 7px; color: var(--brand-dark); font-size: 14px; font-weight: 850; }
.card-link::after { content: "→"; transition: transform .2s ease; }
.card:hover .card-link::after { transform: translateX(4px); }
.card-icon { display: grid; width: 48px; height: 48px; margin-bottom: 22px; place-items: center; border-radius: 15px; color: var(--brand-deep); background: linear-gradient(135deg, rgba(165,209,202,.42), rgba(197,155,85,.35)); font-size: 18px; font-weight: 900; }

.notice { padding: 14px 16px; border: 1px solid rgba(15,92,85,.22); border-radius: 13px; color: #315c54; background: rgba(240,246,247,.72); font-size: 13px; line-height: 1.6; }
.notice.warning { border-color: rgba(154,103,21,.24); color: #76521c; background: #fff9ed; }
.notice.danger { border-color: rgba(200,74,74,.24); color: #873a3a; background: #fff3f3; }

.tool-shell { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 22px; align-items: start; }
.tool-panel { position: sticky; top: 96px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-small); }
.tool-panel h2 { margin: 0 0 18px; font-size: 22px; }
.field { display: grid; gap: 8px; margin-bottom: 15px; }
.field label { color: #3c5753; font-size: 13px; font-weight: 800; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 47px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  outline: none;
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(15,92,85,.11); }
.field small { color: var(--ink-soft); line-height: 1.45; }
.search-row { display: grid; grid-template-columns: minmax(220px,1fr) 180px 180px; gap: 10px; margin-bottom: 22px; }
.search-row .field { margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #3f5e58;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
button.chip:hover,
button.chip.active { border-color: var(--brand); color: var(--brand-deep); background: rgba(197,155,85,.25); }

.hospital-list { display: grid; gap: 14px; }
.hospital-card { display: grid; grid-template-columns: 1fr auto; padding: 24px; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 10px 30px rgba(5,71,52,.07); }
.hospital-card h3 { margin: 0; font-size: 21px; }
.hospital-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hospital-meta span { padding: 6px 9px; border-radius: 8px; color: #3e615a; background: var(--surface); font-size: 12px; font-weight: 750; }
.hospital-card p { margin: 13px 0 0; color: var(--ink-soft); line-height: 1.6; }
.empty-state { display: none; padding: 40px; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-soft); text-align: center; }

.result-panel { min-height: 300px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-small); }
.result-panel h2 { margin: 0 0 10px; font-size: 28px; }
.result-panel > p { color: var(--ink-soft); line-height: 1.65; }
.result-placeholder { display: grid; min-height: 330px; place-items: center; color: var(--ink-soft); text-align: center; }
.result-placeholder .orb { display: grid; width: 72px; height: 72px; margin: 0 auto 18px; place-items: center; border-radius: 50%; color: var(--brand-deep); background: linear-gradient(135deg, rgba(165,209,202,.45), rgba(197,155,85,.4)); font-size: 24px; font-weight: 900; }
.plan-steps { display: grid; gap: 11px; margin-top: 24px; }
.plan-step { display: grid; grid-template-columns: 42px 1fr; padding: 16px; gap: 13px; border-radius: 15px; background: var(--surface); }
.plan-step b { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; color: var(--brand-deep); background: rgba(197,155,85,.42); }
.plan-step h3 { margin: 1px 0 5px; font-size: 16px; }
.plan-step p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }

.range-block { padding: 17px 0; border-bottom: 1px solid var(--line); }
.range-head { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; font-weight: 800; }
input[type="range"] { width: 100%; margin: 15px 0 3px; accent-color: var(--brand); }
.estimate-total { padding: 26px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--brand-deep), #167a70); }
.estimate-total small { color: rgba(255,255,255,.72); font-weight: 700; }
.estimate-total strong { display: block; margin-top: 7px; font-size: clamp(32px,4vw,48px); letter-spacing: -.04em; }
.estimate-lines { display: grid; gap: 10px; margin-top: 18px; }
.estimate-line { display: flex; padding-bottom: 10px; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; }
.estimate-line b { color: var(--ink); }

.tcm-result { display: grid; gap: 14px; }
.safe-box { padding: 20px; border-radius: 17px; background: var(--surface); }
.safe-box h3 { margin: 0 0 8px; font-size: 17px; }
.safe-box p, .safe-box ul { margin: 0; color: var(--ink-soft); line-height: 1.65; }
.safe-box ul { padding-left: 19px; }
.red-flag { border: 1px solid rgba(200,74,74,.24); background: #fff4f4; }

.tabs { display: inline-flex; padding: 5px; gap: 5px; border-radius: 14px; background: var(--surface); }
.tab { padding: 10px 15px; border: 0; border-radius: 10px; color: var(--ink-soft); background: transparent; font-size: 13px; font-weight: 800; }
.tab.active { color: var(--brand-deep); background: #fff; box-shadow: 0 5px 16px rgba(5,71,52,.1); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.success-state { display: none; padding: 28px; border: 1px solid rgba(15,92,85,.22); border-radius: var(--radius-lg); background: #edfbf5; }
.success-state.show { display: block; }

.cta-band { position: relative; overflow: hidden; padding: 48px; border-radius: var(--radius-xl); color: #fff; background: linear-gradient(120deg, var(--brand-deep), #0f5c55 62%, #167a70); }
.cta-band::after { position: absolute; right: -70px; top: -120px; width: 300px; height: 300px; content: ""; border: 56px solid rgba(165,209,202,.15); border-radius: 50%; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { max-width: 760px; margin: 0; font-size: clamp(30px,4vw,48px); line-height: 1.08; letter-spacing: -.04em; }
.cta-band p { max-width: 660px; margin: 17px 0 25px; color: rgba(255,255,255,.74); line-height: 1.65; }

.site-footer { padding: 52px 0 28px; border-top: 1px solid var(--line); background: #f9fbfb; }
.footer-grid { display: grid; grid-template-columns: 1.15fr .7fr .7fr; gap: 60px; }
.footer-grid h3 { margin: 0 0 14px; font-size: 14px; }
.footer-grid p, .footer-grid a { color: var(--ink-soft); font-size: 13px; line-height: 1.75; }
.footer-links { display: grid; gap: 5px; }
.footer-bottom { display: flex; margin-top: 35px; padding-top: 22px; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #6b817d; font-size: 11px; line-height: 1.65; }

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].visible { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .nav-wrap { min-height: 68px; }
  .main-nav { display: none; position: absolute; top: 68px; right: 20px; left: 20px; padding: 12px; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .nav-link { padding: 13px 14px; }
  .nav-dropdown > summary { display: none; }
  .nav-dropdown:not([open]) > .nav-dropdown-menu,
  .nav-dropdown-menu { position: static; display: grid; width: auto; padding: 4px 0 0 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .nav-sub-link { padding: 11px 14px; border-left: 2px solid rgba(0,126,112,.16); border-radius: 0 11px 11px 0; }
  .nav-sub-link small { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .nav-actions { margin-left: auto; }
  .nav-actions .button { display: none; }
  .page-hero-grid { gap: 35px; }
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-shell { grid-template-columns: 290px minmax(0,1fr); }
}

@media (max-width: 780px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .brand { min-width: auto; }
  .brand-copy small { display: none; }
  .page-hero { padding: 58px 0 52px; }
  .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero h1 { font-size: clamp(39px,12vw,58px); }
  .page-hero p.lead { font-size: 17px; }
  .section { padding: 62px 0; }
  .section-head { align-items: start; flex-direction: column; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .tool-shell { grid-template-columns: 1fr; }
  .tool-panel { position: static; }
  .search-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .cta-band { padding: 32px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 520px) {
  .nav-wrap { gap: 10px; }
  .brand-copy { font-size: 14px; }
  .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .lang-toggle { min-width: 38px; }
  .menu-toggle { width: 40px; height: 40px; }
  .hero-actions .button { width: 100%; }
  .grid-4 { grid-template-columns: 1fr; }
  .hospital-card { grid-template-columns: 1fr; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}


/* Unified index visual system and Chinese-first typography */
html[lang="zh-CN"] body {
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
}
html[lang="zh-CN"] .page-hero h1,
html[lang="zh-CN"] .section-head h2,
html[lang="zh-CN"] .cta-band h2,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3 {
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.28;
}
html[lang="zh-CN"] .page-hero h1 { max-width: 720px; font-size: clamp(38px, 4.5vw, 60px); }
html[lang="zh-CN"] .page-hero p.lead { max-width: 650px; font-size: 17px; line-height: 1.8; }
html[lang="zh-CN"] .section-head h2 { font-size: clamp(30px, 3.55vw, 46px); }
html[lang="zh-CN"] .eyebrow { letter-spacing: .075em; font-weight: 700; }
html[lang="zh-CN"] .nav-link,
html[lang="zh-CN"] .button,
html[lang="zh-CN"] label { font-weight: 650; }
html[lang="zh-CN"] .card p,
html[lang="zh-CN"] .hospital-card p,
html[lang="zh-CN"] .notice { line-height: 1.75; }


/* City-first hospital discovery */
.city-discovery{background:#f1f6f6}.city-discovery .section-head{margin-bottom:30px}.city-discovery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.city-discovery-card{position:relative;min-height:390px;padding:0;overflow:hidden;border:0;border-radius:24px;color:#fff;background:#073f3b;text-align:left;cursor:pointer;box-shadow:0 16px 42px rgba(5,55,48,.13);transition:transform .3s ease,box-shadow .3s ease}
.city-discovery-card:before{position:absolute;z-index:1;inset:30% 0 0;content:"";background:linear-gradient(transparent,rgba(4,34,31,.96))}.city-discovery-card img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}.city-discovery-card>span{position:absolute;z-index:2;right:0;bottom:0;left:0;padding:25px}
.city-discovery-card small,.city-discovery-card strong,.city-discovery-card em,.city-discovery-card b{display:block}.city-discovery-card small{color:#d7b66f;font-size:11px;font-weight:850;letter-spacing:.12em}.city-discovery-card strong{margin:5px 0 7px;font-size:30px}.city-discovery-card em{min-height:42px;color:rgba(255,255,255,.74);font-size:13px;font-style:normal;line-height:1.55}.city-discovery-card b{margin-top:14px;font-size:13px}
.city-discovery-card:hover,.city-discovery-card.active{transform:translateY(-8px) scale(1.014);box-shadow:0 28px 65px rgba(5,55,48,.22)}.city-discovery-card:hover img,.city-discovery-card.active img{transform:scale(1.055)}.city-source{margin:16px 0 0;color:var(--ink-soft);font-size:11px}.city-source a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.hospital-card{transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease}.hospital-card:hover{transform:translateY(-6px) scale(1.008);border-color:rgba(15,92,85,.28);box-shadow:0 23px 52px rgba(5,55,48,.14)}.hospital-arrow{display:grid;width:48px;height:48px;align-self:center;place-items:center;border-radius:50%;color:var(--brand-deep);background:#dbeae7;font-size:20px;font-weight:900;transition:transform .24s ease}.hospital-card:hover .hospital-arrow{transform:translateX(5px);background:#c8dfda}
@media(max-width:780px){.city-discovery-grid{grid-template-columns:1fr}.city-discovery-card{min-height:330px}.hospital-arrow{width:42px;height:42px}}


/* Replaceable patient palette shared from the homepage */
body[data-theme="clinic"]{--brand:#007e70;--brand-dark:#00675c;--brand-deep:#00584f;--cyan:#a6d7d1;--lime:#c8a15e;--surface:#f3f9f8;--ink:#174a45;--ink-soft:#4b6a66}
body[data-theme="calm"]{--brand:#2a7b80;--brand-dark:#226a6f;--brand-deep:#1c575b;--cyan:#b7dddd;--lime:#8bbeb8;--surface:#f4fafa;--ink:#28575a;--ink-soft:#546c6d}
body[data-theme="warm"]{--brand:#697354;--brand-dark:#596248;--brand-deep:#4b533d;--cyan:#d4dac5;--lime:#b99357;--surface:#f7f8f3;--ink:#4d553f;--ink-soft:#656b5b}


/* V03 secondary pages: homepage photography, colour and spatial language */
body[data-page="hospitals"]{--page-hero-image:url("hospital-zhongnan-exterior.jpg")}
body[data-page="plan"]{--page-hero-image:url("clinical-patient-care-whsyy.jpg")}
body[data-page="cost"]{--page-hero-image:url("hospital-tongji-international.jpg")}
body[data-page="tcm"]{--page-hero-image:url("case-rehab-care.jpg")}
body[data-page="consultation"]{--page-hero-image:url("hospital-zhongnan-interior.jpg")}

body[data-page] .page-hero {
  display: grid;
  min-height: 610px;
  padding: 88px 0 82px;
  place-items: center;
  color: #fff;
  border-bottom: 0;
  background:
    linear-gradient(90deg,rgba(7,46,43,.96) 0%,rgba(10,63,58,.86) 42%,rgba(10,54,50,.48) 72%,rgba(10,54,50,.26) 100%),
    linear-gradient(0deg,rgba(7,46,43,.68),transparent 56%),
    var(--page-hero-image) center 44% / cover no-repeat;
}
body[data-page] .page-hero::after {
  right: -190px;
  bottom: -360px;
  width: 620px;
  height: 620px;
  border-color: rgba(200,161,94,.3);
  box-shadow: 0 0 0 86px rgba(200,161,94,.07),0 0 0 172px rgba(255,255,255,.035);
}
body[data-page] .page-hero .eyebrow { color: #e2c58c; }
body[data-page] .page-hero h1 { max-width: 720px; color: #fff; }
body[data-page] .page-hero p.lead { max-width: 640px; color: rgba(255,255,255,.76); }
body[data-page] .hero-panel {
  padding: 30px;
  color: var(--ink);
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 80px rgba(0,39,35,.24);
}
body[data-page] .hero-panel .mini-flow div { border-color: rgba(16,45,41,.1); background: rgba(255,255,255,.9); }
body[data-page] .section.soft { background: linear-gradient(180deg,#f3f9f8 0%,#fff 100%); }
body[data-page] .tool-shell { grid-template-columns: 360px minmax(0,1fr); gap: 30px; }
body[data-page] .tool-panel { top: 104px; padding: 30px; border-top: 4px solid var(--lime); border-radius: 26px; box-shadow: 0 18px 52px rgba(5,71,52,.11); }
body[data-page] .result-panel { min-height: 440px; padding: 34px; border-radius: 28px; box-shadow: 0 18px 52px rgba(5,71,52,.1); }
body[data-page] .grid-3,
body[data-page] .grid-4 { gap: 20px; }
body[data-page] .grid-3 .card,
body[data-page] .grid-4 .card {
  position: relative;
  display: flex;
  min-height: 270px;
  padding: 30px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 14px 38px rgba(5,71,52,.08);
  transition: transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
body[data-page] .grid-3 .card:hover,
body[data-page] .grid-4 .card:hover { transform: translateY(-7px); border-color: rgba(0,126,112,.28); box-shadow: 0 25px 60px rgba(5,71,52,.15); }
body[data-page="plan"] .grid-3 .card:first-child,
body[data-page="cost"] .grid-3 .card:first-child,
body[data-page="tcm"] .grid-4 .card:first-child {
  color: #fff;
  border: 0;
  background:
    linear-gradient(180deg,rgba(0,55,50,.18),rgba(0,55,50,.96)),
    var(--page-hero-image) center / cover no-repeat;
}
body[data-page="plan"] .grid-3 .card:first-child p,
body[data-page="cost"] .grid-3 .card:first-child p,
body[data-page="tcm"] .grid-4 .card:first-child p { color: rgba(255,255,255,.76); }
body[data-page="plan"] .grid-3 .card:first-child .card-icon,
body[data-page="cost"] .grid-3 .card:first-child .card-icon,
body[data-page="tcm"] .grid-4 .card:first-child .card-icon { color: var(--brand-deep); background: #e2c58c; }
body[data-page="consultation"] .consult-aside {
  min-height: 650px;
  background:
    linear-gradient(180deg,rgba(0,70,64,.58),rgba(0,70,64,.98)),
    var(--page-hero-image) center / cover no-repeat !important;
  box-shadow: 0 22px 60px rgba(5,71,52,.16);
}

@media (max-width: 1040px) {
  body[data-page] .page-hero { min-height: 560px; }
  body[data-page] .tool-shell { grid-template-columns: 310px minmax(0,1fr); }
}
@media (max-width: 780px) {
  body[data-page] .page-hero { min-height: 0; padding: 68px 0 58px; background-position: 62% center; }
  body[data-page] .page-hero-grid { gap: 42px; }
  body[data-page] .tool-shell { grid-template-columns: 1fr; }
  body[data-page] .tool-panel { padding: 24px; }
  body[data-page] .result-panel { min-height: 360px; padding: 24px; }
  body[data-page] .grid-3 .card,
  body[data-page] .grid-4 .card { min-height: 230px; padding: 25px; }
  body[data-page="consultation"] .consult-aside { min-height: 560px; }
}