/* ===================================================================
   杏林集团 Xinglin Group — Imitation Site (TDesign-style)
   Primary brand: #0052d9 (TDesign primary blue)
   =================================================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* TDesign-inspired color tokens */
  --c-primary: #0052d9;
  --c-primary-hover: #366ef4;
  --c-primary-active: #003cab;
  --c-primary-light: #d9e1ff;
  --c-primary-lightest: #f2f3ff;

  /* Neutrals */
  --c-bg: #ffffff;
  --c-bg-gray: #f5f6f8;
  --c-bg-blue: #f0f4fc;
  --c-bg-dark: #1a1a1a;
  --c-ink: #181818;
  --c-ink-2: #4a4a4a;
  --c-ink-3: #8a8a8a;
  --c-line: #e6e8eb;
  --c-line-2: #f0f2f5;

  /* Typography */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Source Han Sans CN", system-ui, sans-serif;
  --font-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;

  /* Layout */
  --container: 1200px;
  --nav-h: 72px;

  /* TDesign-style radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--rd, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   NAVIGATION — top bar (centered yestar logo)
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 100;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-bottom-color: var(--c-line);
}

.nav__inner {
  height: 100%;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Left: 目录 trigger */
.nav__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--c-ink);
  font-size: 15px;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: background .25s var(--ease),
              color .25s var(--ease);
  justify-self: start;
}
.nav__menu-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.nav__menu-trigger:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Center: Logo */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9a559;
  justify-self: center;
  transition: opacity .25s var(--ease);
}
.nav__logo:hover { opacity: 0.85; }
.nav__logo-text {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #c9a559;
  background: linear-gradient(180deg, #e8c878 0%, #a87c33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Right: 联系我们 + 语言 */
.nav__right {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-self: end;
}

/* 联系我们 — hover popover */
.nav__contact {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav__contact-btn {
  font-size: 14px;
  color: var(--c-ink);
  padding: 6px 4px;
  letter-spacing: 0.05em;
  transition: color .25s var(--ease);
}
.nav__contact:hover .nav__contact-btn { color: var(--c-primary); }

.nav__contact-pop {
  position: absolute;
  top: calc(100% + 14px);
  right: -16px;
  width: 340px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18);
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  z-index: 110;
  pointer-events: none;
}
/* Arrow */
.nav__contact-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 32px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--c-line);
  border-top: 1px solid var(--c-line);
  transform: rotate(45deg);
}

.nav__contact:hover .nav__contact-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  /* Slight delay so brief mouse-pass doesn't trigger */
  transition-delay: .15s;
}

.nav__contact-pop-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  align-items: flex-start;
}
.nav__contact-pop-item:last-child { padding-bottom: 0; }
.nav__contact-pop-item:first-child { padding-top: 0; }

.nav__contact-pop-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.5;
}
.nav__contact-pop-item strong {
  display: block;
  font-size: 13px;
  color: var(--c-ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.nav__contact-pop-item p {
  font-size: 12.5px;
  color: var(--c-ink-2);
  line-height: 1.7;
}

/* Language switch */
.nav__lang { position: relative; }
.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--c-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: var(--r-pill);
  transition: background .25s var(--ease);
}
.nav__lang-btn svg { opacity: 0.85; }
.nav__lang-btn:hover { background: var(--c-primary-hover); }
.nav__lang-btn[aria-expanded="true"] { background: var(--c-primary-active); }

.nav__lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.18);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .25s var(--ease);
  z-index: 110;
}
.nav__lang-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__lang-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--c-ink);
  border-radius: var(--r-sm);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__lang-item:hover {
  background: var(--c-primary-lightest);
  color: var(--c-primary);
}
.nav__lang-item.is-active {
  background: var(--c-primary-lightest);
  color: var(--c-primary);
  font-weight: 500;
}

/* ============================================================
   HERO VIDEO — large full-width looping video
   ============================================================ */
.hero-video {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 560px;
  max-height: 920px;
  margin-top: var(--nav-h);
  background: #000;
  overflow: hidden;
}

.hero-video__media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   NANBO BAY BANNER — full-width image with scroll-rise text
   ============================================================ */
.banner {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  max-height: 820px;
  margin-top: 28px;
  overflow: hidden;
  background: #cfe1f0;
  isolation: isolate;
}

.banner__media {
  position: absolute;
  inset: 0;
  background-image: url("environment.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.banner.is-parallax .banner__media { transform: none; }

.banner__veil {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;          /* rest: text sits near the bottom of the image */
  padding: 0 24px 10%;                 /* 10% breathing room from the bottom */
  text-align: center;
  color: #ffffff;
}

.banner__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.6vw, 68px);
  font-weight: 500;
  letter-spacing: 0.10em;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  text-shadow:
    0 2px 12px rgba(0, 20, 40, 0.6),
    0 4px 28px rgba(0, 20, 40, 0.4),
    0 0 2px rgba(0, 20, 40, 0.8);
  margin: 0;
  /* Scroll-driven parallax: JS sets --my on scroll */
  transform: translate3d(0, var(--my, 0px), 0);
  transition: transform 0.05s linear;
  will-change: transform;
}
.banner__title .title-dot {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.7em;
}

@media (max-width: 768px) {
  .banner { height: 62vh; min-height: 380px; margin-top: 18px; }
  .banner__inner { padding: 0 16px 8%; }
  .banner__title { font-size: clamp(28px, 8vw, 44px); gap: 14px; letter-spacing: 0.06em; }
  .banner__media { background-size: cover; background-position: center; }
}

/* ============================================================
   DRAWER — side panel for 目录 + 联系我们
   ============================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.drawer.is-open { pointer-events: auto; }

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.drawer.is-open .drawer__overlay { opacity: 1; }

.drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  max-width: 86vw;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .4s var(--ease);
  box-shadow: 8px 0 32px -8px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--c-line);
}
.drawer__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9a559;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.drawer__close {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--ease);
}
.drawer__close:hover { background: var(--c-bg-gray); }

.drawer__nav {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.drawer__link {
  display: block;
  padding: 16px 18px;
  font-size: 16px;
  color: var(--c-ink);
  border-radius: var(--r-md);
  transition: all .2s var(--ease);
}
.drawer__link:hover {
  background: var(--c-primary-lightest);
  color: var(--c-primary);
}
.drawer__link.is-active {
  background: var(--c-primary-lightest);
  color: var(--c-primary);
  font-weight: 500;
}

.drawer__contact {
  margin-top: auto;
  padding: 24px;
  background: var(--c-bg-gray);
  border-top: 1px solid var(--c-line);
}
.drawer__contact h4 {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--c-primary);
  margin-bottom: 18px;
  font-weight: 600;
}
.drawer__contact-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.drawer__contact-item:last-child { margin-bottom: 0; }
.drawer__icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  line-height: 1.5;
}
.drawer__contact-item strong {
  display: block;
  font-size: 13px;
  color: var(--c-ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.drawer__contact-item p {
  font-size: 12.5px;
  color: var(--c-ink-2);
  line-height: 1.7;
}

/* ============================================================
   FLOATING PHONE BUTTON
   ============================================================ */
.phone-fab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(calc(100% - 44px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  background: var(--c-primary);
  color: #fff;
  padding: 12px 18px 12px 16px;
  border-radius: var(--r-md) 0 0 var(--r-md);
  box-shadow: -4px 4px 16px -4px rgba(0, 82, 217, 0.45);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all .35s var(--ease);
  white-space: nowrap;
}
.phone-fab__icon {
  font-size: 16px;
  margin-right: 0;
  display: inline-block;
  transition: margin-right .35s var(--ease);
}
.phone-fab__num {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .35s var(--ease), opacity .25s var(--ease), margin-left .35s var(--ease);
}
.phone-fab:hover {
  transform: translateY(-50%) translateX(0);
  background: var(--c-primary-hover);
}
.phone-fab:hover .phone-fab__icon { margin-right: 8px; }
.phone-fab:hover .phone-fab__num {
  max-width: 200px;
  opacity: 1;
  margin-left: 0;
}

/* ============================================================
   BUTTONS — TDesign-style rounded
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  font-size: 14px;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all .3s var(--ease);
  user-select: none;
  font-weight: 500;
}
.btn--primary {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.btn--primary:hover {
  background: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(0, 82, 217, 0.5);
}
.btn--outline-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

/* ============================================================
   SECTIONS — base
   ============================================================ */
.section {
  padding: 100px 0;
  position: relative;
}
.section--white { background: var(--c-bg); }
.section--gray  { background: var(--c-bg-gray); }
.section--blue {
  background: linear-gradient(180deg, #001a57 0%, #002a7c 100%);
  color: #fff;
}

.section__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--c-primary);
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 500;
}
.section--blue .section__eyebrow { color: rgba(255, 255, 255, 0.85); }
.section__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  line-height: 1.3;
  color: var(--c-ink);
}
.section--blue .section__title { color: #fff; }
.section__rule {
  width: 40px;
  height: 3px;
  background: var(--c-primary);
  margin: 0 auto 22px;
  border-radius: var(--r-pill);
}
.section__rule--white { background: rgba(255, 255, 255, 0.85); }
.section__sub {
  font-size: 15px;
  color: var(--c-ink-2);
  line-height: 1.9;
}
.section--blue .section__sub { color: rgba(255, 255, 255, 0.75); }
.section__lede {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 72px;
  font-size: 15.5px;
  line-height: 2;
  color: var(--c-ink-2);
}

/* ============================================================
   STATS — group intro key numbers
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat {
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  transition: all .3s var(--ease);
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(0, 82, 217, 0.2);
  border-color: var(--c-primary-light);
}
.stat__num {
  font-family: var(--font-serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1;
  margin-bottom: 12px;
}
.stat__num span {
  font-size: 20px;
  margin-left: 4px;
  color: var(--c-ink-2);
  font-weight: 400;
}
.stat__label {
  font-size: 13px;
  color: var(--c-ink-2);
  letter-spacing: 0.08em;
}

/* ============================================================
   TECH GRID
   ============================================================ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tech-card {
  background: #fff;
  padding: 36px 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.tech-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-hover));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.tech-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(0, 82, 217, 0.25);
  border-color: var(--c-primary-light);
}
.tech-card:hover::before { transform: scaleX(1); }
.tech-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--c-primary-lightest);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all .35s var(--ease);
}
.tech-card:hover .tech-card__icon {
  background: var(--c-primary);
  color: #fff;
  transform: rotate(-6deg);
}
.tech-card__icon svg { width: 32px; height: 32px; }
.tech-card__num {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}
.tech-card h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--c-ink);
}
.tech-card p {
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.85;
}

/* ============================================================
   DOCTOR GRID
   ============================================================ */
.doctor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.doctor-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 40px 32px;
  text-align: center;
  transition: all .35s var(--ease);
}
.doctor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(0, 82, 217, 0.25);
  border-color: var(--c-primary-light);
}
.doctor-card__avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary-lightest) 0%, var(--c-primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 700;
  color: var(--c-primary);
  position: relative;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--c-primary-light);
}
.doctor-card__avatar::before {
  content: attr(data-char);
}
.doctor-card__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.doctor-card__title {
  font-size: 12px;
  color: var(--c-primary);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  font-weight: 500;
}
.doctor-card__desc {
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.85;
}

/* ============================================================
   DEPARTMENT TABS + GRID
   ============================================================ */
.dept-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.dept-tab {
  padding: 10px 24px;
  font-size: 14px;
  color: var(--c-ink-2);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: all .25s var(--ease);
}
.dept-tab:hover {
  color: var(--c-primary);
  border-color: var(--c-primary-light);
}
.dept-tab.is-active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.dept-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.dept-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: all .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.dept-card.is-hidden { display: none; }
.dept-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 82, 217, 0.2);
  border-color: var(--c-primary-light);
}
.dept-card h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--c-ink);
}
.dept-card p {
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.8;
  flex: 1;
}
.dept-card__more {
  margin-top: 14px;
  font-size: 13px;
  color: var(--c-primary);
  transition: all .25s var(--ease);
}
.dept-card__more:hover {
  color: var(--c-primary-hover);
  letter-spacing: 0.05em;
}

/* ============================================================
   BUILDING / FLOORS
   ============================================================ */
.building {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
.building__visual {
  position: sticky;
  top: 100px;
  text-align: center;
}
.building__visual svg {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.building__floors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.floor-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: all .3s var(--ease);
}
.floor-item:hover {
  border-color: var(--c-primary-light);
  transform: translateX(4px);
  box-shadow: 0 8px 24px -12px rgba(0, 82, 217, 0.2);
}
.floor-item__num {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-lightest);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.floor-item h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--c-ink);
}
.floor-item p {
  font-size: 12px;
  color: var(--c-ink-3);
}

/* ============================================================
   FLOOR GUIDE — horizontal masonry-style floor cards
   ============================================================ */
.floor-guide {
  padding-top: 28px;
  padding-bottom: 24px;
  overflow: hidden;
}
/* In this section the eyebrow ("FLOOR GUIDE") sits BELOW the title
   ("楼层简介"). Tighten title→eyebrow and loosen eyebrow→rule so the
   stack reads as title + subtitle + decorative line. */
.floor-guide .section__title  { margin-bottom: 8px; }
.floor-guide .section__eyebrow { margin-bottom: 0; }
.floor-guide .section__head    { margin-bottom: 36px; }
.floor-guide__viewport {
  width: 100%;
  overflow: hidden;
  padding: 0;
}
.floor-guide__track {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  gap: 0;
  align-items: start;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.floor-card {
  --rest-y: 0px;
  --hover-idx: 0;
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f3f3;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
/* Cards are laid out side by side in a static two-column grid —
   no entrance/stagger animation. */

.floor-card--tall    { height: 340px; }
.floor-card--medium  { height: 340px; }
.floor-card--short   { height: 340px; }

.floor-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}
.floor-card:hover .floor-card__img { transform: scale(1.06); }

.floor-card__num {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 800;
  color: #000000;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.floor-card__caption {
  padding: 16px 16px 8px;
  text-align: center;
  color: var(--c-ink);
}
.floor-card__caption h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.floor-card__caption p {
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .floor-guide__track     { gap: 0; padding: 0; }
  .floor-card,
  .floor-card--tall,
  .floor-card--medium,
  .floor-card--short      { height: 260px; width: 100%; }
  .floor-card__num        { font-size: 22px; }
}

/* ============================================================
   DEPARTMENT SETTING —科室名链接列表（4 列网格）
   ============================================================ */
.dept-setting-section {
  padding-top: 28px;
  padding-bottom: 48px;
}
.dept-setting-section .section__title  { margin-bottom: 8px; }
.dept-setting-section .section__eyebrow { margin-bottom: 0; }
.dept-setting-section .section__head    { margin-bottom: 36px; }

.dept-setting {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  padding: 0;
}

.dept-setting__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 24px;
  min-height: 90px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-ink);
  cursor: pointer;
  box-shadow: 0 5px 8px -4px rgba(0, 0, 0, 0.18);
  transition: background .25s var(--ease),
              border-color .25s var(--ease),
              box-shadow .25s var(--ease),
              transform .25s var(--ease);
}

.dept-setting__card-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--c-ink);
  transition: color .25s var(--ease);
}

.dept-setting__card-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--c-ink-3);
  transition: color .25s var(--ease), transform .25s var(--ease);
}

.dept-setting__card:hover {
  background: linear-gradient(180deg, #dce6ff 0%, #5872d6 100%);
  box-shadow: 0 10px 14px -6px rgba(0, 82, 217, 0.55);
}

.dept-setting__card.is-active {
  background: var(--c-primary-lightest);
}

@media (max-width: 1024px) {
  .dept-setting { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .dept-setting { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0; }
  .dept-setting__card { padding: 20px 18px; min-height: 76px; }
  .dept-setting__card-name { font-size: 15px; }
}

@media (max-width: 480px) {
  .dept-setting { grid-template-columns: 1fr; }
}

/* ============================================================
   DEPARTMENT DETAIL —选中科室的详情展示（图片 + 信息面板）
   ============================================================ */
.dept-detail-section {
  padding-top: 0;
  padding-bottom: 96px;
}

.dept-detail {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 24px;
  width: 100%;
  padding: 0;
}

.dept-detail__media {
  position: relative;
  min-height: 460px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #1a2540;
}

.dept-detail__img {
  position: absolute;
  inset: 0;
  background-color: #2a4a5a;
  background-size: cover;
  background-position: center;
  transition: opacity .4s var(--ease), background-image .4s var(--ease);
}

/* 占位渐变（无真实图片时使用） */
.dept-detail__img[data-img="eye"]      { background-image: linear-gradient(135deg, #f4d8e0 0%, #c89cb8 60%, #8a6a8a 100%); }
.dept-detail__img[data-img="nose"]     { background-image: linear-gradient(135deg, #f6e0c8 0%, #c8a48a 60%, #8a6a5a 100%); }
.dept-detail__img[data-img="ear"]      { background-image: linear-gradient(135deg, #f0d4dc 0%, #d4a8b8 60%, #a87888 100%); }
.dept-detail__img[data-img="breast"]   { background-image: linear-gradient(135deg, #f4d8d8 0%, #d4a4a4 60%, #a47878 100%); }
.dept-detail__img[data-img="rejuvenate"]{ background-image: linear-gradient(135deg, #f6e8d4 0%, #d4b890 60%, #a08868 100%); }
.dept-detail__img[data-img="fat"]      { background-image: linear-gradient(135deg, #f0e4d4 0%, #d0b8a0 60%, #a08878 100%); }
.dept-detail__img[data-img="private"]  { background-image: linear-gradient(135deg, #ecdce4 0%, #c8a8b8 60%, #a07888 100%); }
.dept-detail__img[data-img="scar"]     { background-image: linear-gradient(135deg, #dce0e8 0%, #a8b0c0 60%, #7880a0 100%); }
.dept-detail__img[data-img="tumor"]    { background-image: linear-gradient(135deg, #d8d4ec 0%, #a89cb8 60%, #8878a0 100%); }
.dept-detail__img[data-img="lip"]      { background-image: linear-gradient(135deg, #f8c8d0 0%, #d08898 60%, #a05868 100%); }
.dept-detail__img[data-img="hair"]     { background-image: linear-gradient(135deg, #d8c4a4 0%, #a89070 60%, #806848 100%); }
.dept-detail__img[data-img="laser"]    { background-image: linear-gradient(135deg, #cce8f0 0%, #88b8d4 60%, #5888a8 100%); }
.dept-detail__img[data-img="dental"]   { background-image: linear-gradient(135deg, #d4ecf4 0%, #a0c4dc 60%, #6a8aa8 100%); }
.dept-detail__img[data-img="tcm"]      { background-image: linear-gradient(135deg, #d4a878 0%, #a07848 40%, #6a4828 100%); }
.dept-detail__img[data-img="stemcell"] { background-image: linear-gradient(135deg, #c4d8e0 0%, #88a8b8 60%, #5878a0 100%); }
.dept-detail__img[data-img="fertility"]{ background-image: linear-gradient(135deg, #e8d4d4 0%, #b89898 60%, #886868 100%); }

.dept-detail__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 60px 48px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #6cd5d4 0%, #2ba39e 100%);
  color: #fff;
  min-height: 460px;
}

.dept-detail__title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 36px;
  line-height: 1.3;
}

.dept-detail__desc {
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.92);
  flex: 1;
}

.dept-detail__more {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.05em;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.dept-detail__more:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

@media (max-width: 1024px) {
  .dept-detail { grid-template-columns: 1.4fr 1fr; gap: 16px; }
  .dept-detail__panel { padding: 48px 36px; }
  .dept-detail__title { font-size: 26px; margin-bottom: 28px; }
}

@media (max-width: 768px) {
  .dept-detail { grid-template-columns: 1fr; padding: 0; }
  .dept-detail__media { min-height: 280px; }
  .dept-detail__panel { padding: 40px 28px; min-height: auto; }
  .dept-detail__title { font-size: 24px; margin-bottom: 20px; }
  .dept-detail__desc { font-size: 14px; }
}

@media (max-width: 480px) {
  .dept-detail__panel { padding: 32px 22px; }
}

/* ============================================================
   INTERIOR SHOWCASE — image-switching carousel
   ============================================================ */
.interior {
  position: relative;
  width: 100%;
  height: 64vh;
  min-height: 500px;
  max-height: 720px;
  margin-top: 28px;            /* matches .banner { margin-top: 28px } for visual rhythm */
  overflow: hidden;
  isolation: isolate;
}

.interior__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #1a2540;
  background-size: cover;
  background-position: center;
  transition: background-image 0.6s var(--ease);
}
/* Per-item gradient placeholders. Real images replace the gradients
   below for cards that have photography supplied. */
.interior__bg[data-img="lobby"]     { background-image: url('reception.webp'); }
.interior__bg[data-img="dentistry"] { background-image: linear-gradient(135deg, #1e3a4a 0%, #2a5e6e 50%, #1e3a4a 100%); }
.interior__bg[data-img="lecture"]   { background-image: linear-gradient(135deg, #2a1e4a 0%, #4a3a6e 50%, #2a1e4a 100%); }
.interior__bg[data-img="surgery"]   { background-image: linear-gradient(135deg, #1e3a3a 0%, #3a5e5e 50%, #1e3a3a 100%); }
.interior__bg[data-img="vip"]       { background-image: linear-gradient(135deg, #3a2a2a 0%, #5a4a4a 50%, #3a2a2a 100%); }
.interior__bg[data-img="ai"]        { background-image: linear-gradient(135deg, #14143a 0%, #2a2a5e 50%, #14143a 100%); }
.interior__bg[data-img="men"]       { background-image: linear-gradient(135deg, #1e3a2a 0%, #3a5e4a 50%, #1e3a2a 100%); }

.interior__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 20, 40, 0.20) 0%,
    rgba(0, 20, 40, 0.08) 40%,
    rgba(0, 20, 40, 0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

.interior__head {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.interior__eyebrow {
  font-size: 12px;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  font-weight: 500;
}

.interior__heading {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #fff;
  margin: 0;
}

.interior__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.interior__track {
  display: flex;
  gap: 48px;
  width: calc(100% - 60px);
  max-width: 1600px;
  padding: 0 30px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.interior__card {
  /* flex: 1 1 0 — each card grows to fill its share of the track,
     so 3 (or any N) cards share the row evenly with the 48px gap
     fixed between them. min-width: 0 lets cards shrink below their
     natural content width instead of overflowing the track. */
  flex: 1 1 0;
  min-width: 0;
  height: 380px;
  padding: 36px 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: background 0.35s var(--ease),
              border-color 0.35s var(--ease),
              transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
  overflow: hidden;
}

.interior__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.interior__card:hover::before { opacity: 1; }

.interior__card.is-active {
  background: #0a4895cc;
  border-color: transparent;
  box-shadow: none;
}

.interior__card:hover,
.interior__card.is-active:hover {
  background: #0a4895cc;
  border-color: transparent;
  box-shadow: none;
}

.interior__card-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.interior__card-line {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.interior__card.is-active .interior__card-line {
  background: rgba(255, 255, 255, 0.5);
}

.interior__card-sub {
  font-size: 14px;
  letter-spacing: 0.03em;
  margin-bottom: 16px;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.interior__card-desc {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.78);
  flex: 1;
  position: relative;
  z-index: 1;
}
.interior__card.is-active .interior__card-desc {
  color: rgba(255, 255, 255, 0.95);
}

/* Arrows — on the sides */
.interior__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  z-index: 5;
  transition: transform 0.3s var(--ease),
              opacity 0.3s var(--ease);
  cursor: pointer;
}
.interior__arrow svg { width: 22px; height: 22px; }
.interior__arrow:hover {
  transform: translateY(-50%) scale(1.08);
}
.interior__arrow--prev { left: 24px; }
.interior__arrow--next { right: 24px; }
.interior__arrow.is-disabled { opacity: 0.3; pointer-events: none; }

/* When there's only 1 page, hide pagination UI entirely */
.interior.is-single-page .interior__arrow,
.interior.is-single-page .interior__bars { display: none; }

/* Bottom controls: bars + brand */
.interior__controls {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.interior__bars {
  display: flex;
  align-items: center;
  gap: 10px;
}

.interior__bar {
  /* Pure visual indicator — not clickable. The bars reflect the active
     card; switching happens via swipe or the prev/next arrows. */
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 2px;
  transition: background 0.3s var(--ease), width 0.35s var(--ease);
}
.interior__bar.is-active {
  background: var(--c-primary-hover);
  width: 56px;
}

.interior__brand {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.6);
}

/* Desktop/tablet only — signal that the track is draggable.
   Mobile keeps native scroll, so no grab cursor there. */
@media (min-width: 768px) {
  .interior__track {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .interior__track:active {
    cursor: grabbing;
  }
}

/* ============================================================
   INTERNATIONAL
   ============================================================ */
.country-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 56px;
}
.country-pill {
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.15em;
  border-radius: var(--r-pill);
  transition: all .3s var(--ease);
  background: rgba(255, 255, 255, 0.05);
}
.country-pill:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  transform: translateY(-2px);
}

.coop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.coop-card {
  display: flex;
  gap: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: 32px;
  transition: all .3s var(--ease);
  backdrop-filter: blur(8px);
}
.coop-card:hover {
  border-color: var(--c-primary-hover);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-4px);
}
.coop-card__flag {
  font-size: 48px;
  line-height: 1;
  flex-shrink: 0;
}
.coop-card__body { flex: 1; }
.coop-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
}
.coop-card p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  line-height: 1.9;
  margin-bottom: 12px;
}
.coop-card__quote {
  font-family: var(--font-serif);
  color: rgba(255, 255, 255, 0.85);
  border-left: 3px solid var(--c-primary-hover);
  padding-left: 14px;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ============================================================
   NEWS
   ============================================================ */
.news-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.news-tab {
  padding: 10px 26px;
  font-size: 14px;
  color: var(--c-ink-2);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: all .25s var(--ease);
}
.news-tab:hover {
  color: var(--c-primary);
  border-color: var(--c-primary-light);
}
.news-tab.is-active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  transition: all .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.news-card.is-hidden { display: none; }
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(0, 82, 217, 0.25);
  border-color: var(--c-primary-light);
}
.news-card__date {
  font-size: 12px;
  color: var(--c-primary);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  font-weight: 500;
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-primary-lightest);
  border-radius: var(--r-sm);
  align-self: flex-start;
}
.news-card h3 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.5;
  color: var(--c-ink);
}
.news-card p {
  font-size: 13px;
  color: var(--c-ink-2);
  line-height: 1.85;
  flex: 1;
}
.news-card__link {
  margin-top: 16px;
  font-size: 13px;
  color: var(--c-primary);
  font-weight: 500;
  transition: all .25s var(--ease);
}
.news-card__link:hover {
  color: var(--c-primary-hover);
  letter-spacing: 0.05em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #ffffff;
  color: #333;
  border-top: 1px solid #ececec;
}

.footer__body {
  background: #f7f8fa;
  width: 100%;
  padding: 48px 0;
}

.footer__columns {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
  padding: 0 40px;
  width: 100%;
}

.footer__col--info {
  justify-self: start;
  text-align: left;
  /* Grid default `auto` lets a long URL/intrinsic width push the column
     past its 1fr share, which is what produces the horizontal scrollbar
     on the map side. Force it to honour the assigned track. */
  min-width: 0;
}

.footer__col--info .footer__row-text,
.footer__col--info .footer__row {
  text-align: left;
}

.footer__map {
  justify-self: end;
  /* Same fix for the map column — without this AMap's tile layer's
     intrinsic width can overflow the 1.6fr track. */
  min-width: 0;
}

.footer__col--info { padding-top: 4px; }

/* Temporary: hide the 电话 / 邮箱 / 微信 rows in the footer, leaving
   only 地址 visible. Delete this rule to restore them. */
.footer__col--info .footer__row:nth-child(n+2) {
  display: none;
}

/* Temporary: hide the 电话 entry in the top-nav 联系我们 popup. */
.nav__contact-pop .nav__contact-pop-item:nth-child(2) {
  display: none;
}

.footer__row {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.footer__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-primary);
  background: #f3f6fb;
  border-radius: 50%;
  padding: 4px;
  margin-top: 2px;
}
.footer__icon svg { width: 100%; height: 100%; }

.footer__row-text { flex: 1; min-width: 0; }
.footer__row-text p {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 2px;
}
.footer__row-text .footer__label {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.footer__row-text .footer__label strong {
  font-weight: 600;
  color: #1a1a1a;
}

/* Address row: the long address wraps onto its own line so it starts at
   the same left edge as the icon above it, instead of being indented by
   the icon's width. Grid (rather than flex) lets the value span both
   columns while the label stays beside the icon. */
.footer__row--stack {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 6px;
  row-gap: 6px;
  align-items: start;
}
.footer__row--stack .footer__icon    { grid-column: 1; grid-row: 1; }
.footer__row--stack .footer__row-text { display: contents; }
.footer__row--stack .footer__label   { grid-column: 2; grid-row: 1; margin-bottom: 0; }
.footer__row--stack p:not(.footer__label) { grid-column: 1 / -1; grid-row: 2; }

.footer__row-text--qr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.footer__row-text--qr img {
  width: 96px;
  height: 96px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  display: block;
  margin-top: 6px;
}

.footer__map {
  width: 100%;
  max-width: 960px;
  height: 380px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  background: #f3f3f3;
  position: relative;
  min-width: 0;
}
.footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.footer__map-amap {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  display: block;
  background: #f3f3f3;
}

/* ============================================================
   CUSTOM MAP MARKER — teardrop pin + sonar ripple waves
   ============================================================
   The marker box is 28×40. The SVG pin (24×32) sits inside
   .map-marker__core anchored to the bottom — so its pointed tip
   is the marker's bottom-center, which AMap's offset aligns with the
   lat/lng. Waves emit from that same tip (top:100% + centered
   transform), so the sonar appears to ripple from where the pin
   physically touches the map. */
.map-marker {
  position: relative;
  width: 28px;
  height: 40px;
  cursor: pointer;
  /* pointer-events stays default (auto) so the click handler attached
     in script.js can fire. Earlier it was "none" because no click
     behaviour was wired up; now we want clicks to reach the pin. */
}

.map-marker__core {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
  animation: marker-bounce 1.4s ease-in-out infinite;
  will-change: transform;
}

.map-marker__pin {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.map-marker__wave {
  position: absolute;
  top: 100%;          /* align with pin tip (marker bottom edge) */
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(231, 76, 60, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: marker-wave 1.8s ease-out infinite;
  will-change: transform, opacity;
}

.map-marker__wave--2 { animation-delay: 0.6s; }
.map-marker__wave--3 { animation-delay: 1.2s; }

/* Pin bounces ~8px above its resting tip. Only the core (pin) bounces;
   the waves stay anchored at the tip on the map surface, so the sonar
   continues to ripple from the actual coordinate, not from the lifted pin. */
@keyframes marker-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Sonar ripple — each wave grows from 14px to ~56px (scale 1 → 4) while
   fading to fully transparent. Three waves staggered by 0.6s = a
   continuous radiating pulse, never with a gap. */
@keyframes marker-wave {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(4);   opacity: 0;   }
}

/* ============================================================
   DOCTOR TEAM HERO — full-bleed photo + right-side info card
   ============================================================ */
.doctor-hero {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  max-height: 820px;
  margin-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;
}
.doctor-hero__media {
  /* Placeholder for the OR/surgery photo. Replace with real image:
     .doctor-hero__media { background-image: url('doctor-hero.jpg'); } */
  position: absolute;
  inset: 0;
  background-color: #14304a;
  background-image:
    radial-gradient(ellipse at 30% 45%, rgba(190, 220, 235, 0.35), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(80, 110, 140, 0.5), transparent 55%),
    linear-gradient(135deg, #1a3a52 0%, #2c5a72 45%, #14304a 100%);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.doctor-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.20) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}
.doctor-hero__panel {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 20%;
  z-index: 2;
  width: 500px;
  height: 500px;
  padding: 36px 34px;
  background: rgba(0, 67, 152, 0.8);
  color: #fff;
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 60px 34px 36px;
}
.doctor-hero__number {
  font-family: var(--font-serif);
  font-size: clamp(54px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  color: #fff;
}
.doctor-hero__desc {
  font-size: 17px;
  line-height: 2.4;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 76px 0 0;
  text-indent: 2em;
}

@media (max-width: 768px) {
  .doctor-hero {
    height: auto;
    min-height: 420px;
    max-height: none;
    padding: 60px 0 40px;
  }
  .doctor-hero__panel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 0 16px;
    padding: 28px 22px;
    width: auto;
    height: auto;
    max-width: none;
  }
  .doctor-hero__number { font-size: 48px; margin-bottom: 16px; }
  .doctor-hero__desc { font-size: 13px; line-height: 1.85; }
}

/* ============================================================
   TEAM SHOWCASE — big brand wordmark over placeholder team photo
   ============================================================ */
.team-showcase {
  background: #fff;
  padding: 8px 0 72px;
  text-align: center;
}
.team-showcase__photo {
  position: relative;
  width: 100%;
  height: clamp(560px, 68vh, 720px);
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
  background-color: #f0f4fa;
  /* Placeholder for the actual team photo.
     Replace with: background-image: url('doctor-team.jpg'); */
  background-image:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.85), transparent 45%),
    radial-gradient(circle at 75% 65%, rgba(255, 220, 215, 0.55), transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(220, 232, 245, 0.7), transparent 55%),
    linear-gradient(180deg, #eef3fa 0%, #dbe4f0 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-showcase__brand {
  font-family: var(--font-serif);
  font-size: clamp(110px, 16vw, 220px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #d9786f 0%, #b8524a 60%, #8c3a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(140, 58, 53, 0.18));
  user-select: none;
}

@media (max-width: 768px) {
  .team-showcase { padding: 4px 0 40px; }
  .team-showcase__photo { height: 400px; }
}

/* ============================================================
   DOCTOR PROFILE — featured doctor carousel
   ============================================================ */
.doctor-profile {
  position: relative;
  background: #fff;
  padding: 80px 0;
  max-width: none;
  margin: 0;
}
.doctor-profile__viewport {
  overflow: hidden;
  position: relative;
}
.doctor-profile__track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.doctor-profile__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 20px;
  align-items: center;
  padding: 0;
}
.doctor-profile__media {
  position: relative;
  width: clamp(420px, 56vw, 880px);
  max-width: 100%;
  height: clamp(320px, 38vw, 420px);
}
.doctor-profile__info {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  padding: 0 48px 0 0;
  color: #1a3a78;
}
.doctor-profile__img-block {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68%;
  height: 100%;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    linear-gradient(135deg, #b4d6cc 0%, #82b5a4 50%, #5e9384 100%);
  box-shadow: 0 12px 32px -12px rgba(60, 100, 90, 0.25);
}
.doctor-profile__photo {
  position: absolute;
  left: 38%;
  top: 50%;
  transform: translateY(-50%);
  width: 45%;
  max-height: 70%;
  aspect-ratio: 4/3;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(135deg, #d8e6e2 0%, #a8c4bc 50%, #788c84 100%);
  box-shadow: 0 16px 40px -16px rgba(0, 50, 60, 0.25);
}
.doctor-profile__photo-caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.doctor-profile__name {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 18px;
  color: #0c2a6a;
}
.doctor-profile__name small {
  display: inline-block;
  margin-left: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #5a78b0;
  vertical-align: middle;
}
.doctor-profile__desc {
  font-size: 15px;
  line-height: 1.9;
  color: #1a3a78;
  margin: 0 0 24px;
}
.doctor-profile__more {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #1a3a78;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: #1a3a78;
  letter-spacing: 0.04em;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.doctor-profile__more:hover {
  background: #1a3a78;
  color: #fff;
}

/* vertical indicator strip — sits on the right edge of the section */
.doctor-profile__bars {
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
}
.doctor-profile__bar {
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: rgba(26, 58, 120, 0.25);
  transition: background .3s var(--ease), height .3s var(--ease);
}
.doctor-profile__bar.is-active {
  background: #1a3a78;
  height: 38px;
}

@media (max-width: 768px) {
  .doctor-profile { padding: 48px 0; }
  .doctor-profile__slide {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  .doctor-profile__media { width: 100%; height: 280px; }
  .doctor-profile__img-block { width: 70%; }
  .doctor-profile__photo { width: 52%; left: 38%; max-height: 66%; }
  .doctor-profile__info { padding: 0 24px 0 0; }
  .doctor-profile__bars { right: 0; gap: 8px; }
  .doctor-profile__bar { width: 2px; height: 18px; }
  .doctor-profile__bar.is-active { height: 28px; }
}

/* ============================================================
   PROJECT INTRODUCTION — text + photo side-by-side
   ============================================================ */
.project-intro {
  background: #fff;
  padding: 24px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.project-intro__text {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 36px;
  background: #f4f7fb;
  border-radius: 6px;
  color: #1a3a78;
}
.project-intro__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0c2a6a;
  margin: 0 0 8px;
}
.project-intro__eyebrow {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: #1a3a78;
  margin: 0 0 22px;
  text-transform: uppercase;
  font-weight: 500;
}
.project-intro__desc {
  font-size: 19px;
  line-height: 2;
  color: var(--c-ink-2);
  margin: 20px 0;
  max-width: 92%;
  text-indent: 2em;
}
.project-intro__more {
  display: block;
  width: calc(100% + 72px);
  margin-top: auto;
  margin-left: -36px;
  margin-bottom: -40px;
  padding: 24px 36px;
  background: #1a3a78;
  color: #fff;
  border-radius: 0 0 6px 6px;
  font-size: 18px;
  letter-spacing: 0.06em;
  transition: opacity .25s var(--ease);
}
.project-intro__more:hover { opacity: 0.85; }
.project-intro__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  vertical-align: middle;
}
.project-intro__arrow svg {
  width: 9px;
  height: 9px;
  display: block;
}
.project-intro__photo {
  position: relative;
  margin: 0;
  border-radius: 4px;
  aspect-ratio: 16/7;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(135deg, #d6dfe8 0%, #a8b8c8 50%, #7888a0 100%);
  box-shadow: 0 16px 40px -16px rgba(0, 50, 80, 0.25);
}

@media (max-width: 768px) {
  .project-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px 28px;
  }
}

/* ============================================================
   CHARITY CAMPAIGN — title + 1 large + 2 stacked + caption
   ============================================================ */
.charity {
  background: #f4f7fb;
  padding: 60px 0 56px;
  color: #1a3a78;
}
.charity .section__head {
  text-align: center;
  margin-bottom: 28px;
}
.charity .section__title { margin: 0 0 8px; }
.charity__gallery {
  max-width: 100%;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 14px;
}
.charity__photo {
  position: relative;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 30px -16px rgba(0, 50, 80, 0.22);
  background-color: #c9d2dc;
  background-size: cover;
  background-position: center;
}
.charity__photo--main {
  aspect-ratio: 4/3;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(135deg, #d6b8a8 0%, #c08070 50%, #88483c 100%);
}
.charity__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  width: 100%;
}
.charity__photo--sub {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(135deg, #c8d4e0 0%, #8898b0 50%, #4c5870 100%);
}
.charity__photo--sub:nth-of-type(2) {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(135deg, #e0c8b8 0%, #b08870 50%, #705040 100%);
}
.charity__caption {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--c-ink-2);
}
@media (max-width: 768px) {
  .charity { padding: 40px 0 36px; }
  .charity__gallery {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 16px;
  }
  .charity__stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .charity__photo--sub { aspect-ratio: 1/1; }
}

/* ============================================================
   DOCTOR TEAM — 1 large + 2 stacked photos, with caption
   ============================================================ */
.doctor-team .section__title  { margin-bottom: 8px; }
.doctor-team .section__eyebrow { margin-bottom: 22px; }

.doctor-team__gallery {
  max-width: 1100px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.doctor-team__photo {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: #d8e4f0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 32px -16px rgba(0, 50, 120, 0.18);
  min-height: 200px;
}
.doctor-team__photo--lg {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 420px;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(160deg, #e3ecf6 0%, #b8c8dc 55%, #8ea4c0 100%);
}
.doctor-team__photo--sm:nth-of-type(2) {
  background-image:
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.45), transparent 55%),
    linear-gradient(160deg, #f0e8e8 0%, #d8b8b8 55%, #b89090 100%);
}
.doctor-team__photo--sm:nth-of-type(3) {
  background-image:
    radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(160deg, #e8e0f0 0%, #b8a8c8 55%, #9078a8 100%);
}
.doctor-team__photo-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.06em;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.doctor-team__desc {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-size: 15.5px;
  line-height: 2;
  color: var(--c-ink-2);
}

@media (max-width: 768px) {
  .doctor-team__gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
  }
  .doctor-team__photo--lg {
    grid-row: 1;
    min-height: 240px;
  }
  .doctor-team__photo--sm:nth-of-type(2) { grid-row: 2; min-height: 180px; }
  .doctor-team__photo--sm:nth-of-type(3) { grid-row: 3; min-height: 180px; }

  .footer__columns   { grid-template-columns: 1fr; gap: 24px; }
  .footer__map       { height: 280px; }
  .footer__row       { margin-bottom: 14px; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 48px;
  height: 48px;
  background: var(--c-primary);
  color: #fff;
  font-size: 18px;
  border-radius: var(--r-md);
  opacity: 0;
  pointer-events: none;
  transition: all .3s var(--ease);
  z-index: 99;
  box-shadow: 0 8px 24px -8px rgba(0, 82, 217, 0.5);
}
.back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.back-top:hover {
  background: var(--c-primary-hover);
  transform: translateY(-3px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dept-grid  { grid-template-columns: repeat(3, 1fr); }
  .building   { grid-template-columns: 240px 1fr; gap: 32px; }
  .building__visual svg { max-width: 200px; }
  .coop-grid  { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-h: 56px; }
  .container { padding: 0 16px; }
  .section { padding: 60px 0; }

  /* Header — compact mobile layout */
  .nav__inner {
    padding: 0 12px;
    gap: 8px;
  }
  .nav__menu-trigger span { display: none; }
  .nav__menu-trigger {
    padding: 8px;
    gap: 0;
  }
  .nav__logo-text {
    font-size: 18px;
    letter-spacing: 0.14em;
  }
  .nav__right { gap: 8px; }
  .nav__contact-btn { font-size: 13px; padding: 6px 2px; }
  .nav__lang-btn {
    padding: 5px 10px;
    font-size: 12px;
  }
  .nav__lang-btn svg { width: 14px; height: 14px; }
  /* Move popover so it doesn't get clipped on small screens */
  .nav__contact-pop {
    right: -8px;
    width: 300px;
  }
  .nav__contact-pop::before { right: 24px; }

  /* Drawer — full width on small screens */
  .drawer__panel { width: 100%; max-width: 100vw; }

  /* Hero video — shorter on mobile */
  .hero-video {
    height: 56vh;
    min-height: 320px;
  }

  /* Phone FAB — shrink on mobile */
  .phone-fab {
    padding: 10px 14px 10px 12px;
    font-size: 13px;
  }
  .phone-fab__num { display: none; } /* don't expand on mobile */

  /* Section heads */
  .section__head { margin-bottom: 40px; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat { padding: 28px 16px; }
  .stat__num { font-size: 32px; }

  .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .doctor-grid { grid-template-columns: 1fr; gap: 16px; }
  .dept-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .building {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .building__visual { position: static; }
  .building__visual svg { max-width: 200px; }
  .building__floors { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }

  .coop-card { flex-direction: column; gap: 16px; padding: 24px; }
  .footer__columns { grid-template-columns: 1fr; gap: 28px; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }

  /* Interior carousel — mobile: vertical stack with horizontal-scrolling cards */
  .interior {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 0 20px;
    margin-top: 18px;
    overflow: hidden;
    isolation: isolate;
    display: block;
  }
  .interior__bg,
  .interior__veil { z-index: 1; }
  .interior__head {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 0 16px;
    text-align: center;
    color: #fff;
    pointer-events: none;
  }
  .interior__eyebrow {
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
    font-weight: 500;
  }
  .interior__heading {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    margin: 0;
  }
  .interior__viewport {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 400px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* No scroll padding: cards snap with scroll-snap-align: center, so
       the browser centres them in the viewport itself rather than us
       hand-computing an offset from a left padding value. */
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    /* Makes 100cqw below resolve to this element's content-box inline
       size — i.e. the viewport width WITHOUT the page's vertical
       scrollbar, which is what the card has to be sized against to get
       matching left/right margins. */
    container-type: inline-size;
  }
  .interior__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 17px;
    width: max-content;
    height: 100%;
    /* 20px above and below so the card no longer butts straight up
       against the banner image behind it. */
    padding: 20px 16px;
    margin: 0;
    transform: none !important;
    box-sizing: border-box;
  }
  .interior__card {
    position: relative;
    /* Card width = viewport content box minus 16px of breathing room on
       each edge, so the left and right margins come out equal.
       Each length is declared twice: 100vw as a fallback, then 100cqw,
       which is the value that actually applies in supporting browsers.
       100vw counts the page's vertical scrollbar, so a card sized with
       it overflows the content box and leaves the right margin visibly
       tighter than the left. A percentage can't be used here — the
       track is `width: max-content`, so % would resolve against an
       indefinite width and collapse to the card's content width. */
    flex: 0 0 calc(100vw - 32px);
    flex: 0 0 calc(100cqw - 32px);
    width: calc(100vw - 32px);
    width: calc(100cqw - 32px);
    max-width: calc(100vw - 32px);
    max-width: calc(100cqw - 32px);
    min-width: calc(100vw - 32px);
    min-width: calc(100cqw - 32px);
    height: 360px;
    padding: 24px 22px;
    margin: 0;
    box-sizing: border-box;
    /* Center-snap: each card comes to rest dead-centre in the viewport,
       so the same card always lands at the same x position. */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    overflow-wrap: break-word;
    word-break: break-word;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
  }
  .interior__card-title { font-size: 20px; margin-bottom: 10px; }
  .interior__card-line { margin-bottom: 12px; }
  .interior__card-sub { font-size: 13px; margin-bottom: 10px; }
  .interior__card-desc { font-size: 12.5px; line-height: 1.7; }
  .interior__arrow { display: none; }
  .interior__controls {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 28px 0 0;
    padding: 0 16px;
  }
  .interior__bars { gap: 6px; }
  .interior__bar { width: 20px; height: 2px; }
  .interior__bar.is-active { width: 28px; }
  .interior__brand { font-size: 13px; letter-spacing: 0.3em; }

  /* Per-section vertical rhythm.
     These MUST sit after `.section { padding: 60px 0 }` above: that rule
     and the per-section rules share the same specificity, so whichever
     comes later wins. Kept here so mobile gets the same tightened
     spacing as desktop instead of the generic 60px. */
  .floor-guide          { padding-top: 28px; padding-bottom: 24px; }
  .dept-setting-section { padding-top: 28px; padding-bottom: 50px; }
  .dept-detail-section  { padding-top: 0; }
}

@media (max-width: 480px) {
  .hero-video { height: 50vh; min-height: 280px; }
  .tech-grid { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr; }
  .stat__num { font-size: 26px; }
  /* Even more compact header on tiny screens */
  .nav__contact-btn { display: none; } /* save space — contact info still in drawer */
  .nav__lang-btn span { display: none; }
  .nav__lang-btn { padding: 6px; }
  .nav__lang-menu { min-width: 140px; }
  /* Interior — shrink fixed card width on smaller phones */
  .interior__card {
    flex: 0 0 calc(100vw - 56px);
    width: calc(100vw - 56px);
    max-width: calc(100vw - 56px);
    min-width: 0;
  }
}
/* ============================================================
   CORE TECH HERO — full-width patent backdrop + bottom-right stat panel
   ============================================================ */
.tech-hero {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 520px;
  max-height: 820px;
  margin-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;
}
.tech-hero__media {
  /* Placeholder for the patent collage photo. Replace with real image:
     .tech-hero__media { background-image: url('patents.jpg'); } */
  position: absolute;
  inset: 0;
  background-color: #e8eef5;
  background-image:
    repeating-linear-gradient(0deg, rgba(26, 58, 120, 0.05) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(90deg, rgba(26, 58, 120, 0.05) 0 2px, transparent 2px 32px),
    radial-gradient(ellipse at 30% 35%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(ellipse at 75% 70%, rgba(184, 152, 104, 0.18), transparent 55%),
    linear-gradient(135deg, #f4f0e8 0%, #e0d8c8 50%, #c8b898 100%);
  background-size: cover;
  background-position: center;
}
.tech-hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
  pointer-events: none;
}
.tech-hero__panel {
  position: absolute;
  bottom: 0;
  right: 20%;
  z-index: 2;
  width: 500px;
  height: 500px;
  padding: 36px 34px;
  background: linear-gradient(160deg, #1a3a78 0%, #0c2a6a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 20px 50px -10px rgba(12, 42, 106, 0.45);
}
.tech-hero__number {
  font-family: var(--font-serif);
  font-size: clamp(54px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  color: #fff;
}
.tech-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.75);
  margin: 14px 0 0;
  text-transform: uppercase;
}
.tech-hero__desc {
  font-size: 17px;
  line-height: 2.4;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 40px 0 0;
  text-indent: 2em;
}

@media (max-width: 960px) {
  .tech-hero { height: 70vh; min-height: 460px; }
  .tech-hero__panel {
    right: 8%;
    width: 420px;
    height: 420px;
    padding: 28px 26px;
  }
}
@media (max-width: 600px) {
  .tech-hero { height: auto; min-height: 0; padding: 80px 24px 60px; }
  .tech-hero__panel {
    position: static;
    width: 100%;
    height: auto;
    padding: 28px 24px;
  }
  .tech-hero__number { font-size: 48px; }
  .tech-hero__desc { font-size: 15px; margin-top: 24px; }
}