:root {
--primary-color: #A89A86;
--secondary-color: #8C7E6A;
--accent-color: #EFEAE2;
--background-color: #F5F2ED;
--text-color: #3A352F;
--surface-color: #FBFAF7;
--surface-alt: #FFFFFF;
--muted-text: #7A736B;
--line-color: #E4DED4;
--on-primary: #FFFFFF;
--icon-color: #8C7E6A;
--on-accent: #3A352F;
--inverse-bg: #3A352F;
--on-inverse: #F5F2ED;
--inverse-muted: #D9D3C9;
--nav-bg: #F5F2ED;
--slogan-font: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
--body-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* Reputation website UI, v3.
   Colors and fonts are injected by generate_css; this file owns layout and states.
   Content is visible without JavaScript. Only .js enhances tabs and mobile nav. */
:root {
  --content-width: 1200px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --section-space: clamp(64px, 8vw, 112px);
  --radius: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
  margin: 0;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color);
  background: var(--background-color);
  -webkit-font-smoothing: antialiased;
}
body, button, input, textarea, select { font-synthesis: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .58; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
img[hidden] { display: none; }
figure, blockquote { margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 {
  overflow-wrap: anywhere;
  text-wrap: balance;
  letter-spacing: normal;
}
h1, h2 { font-family: var(--slogan-font); }
h3, h4 { font-weight: 600; line-height: 1.45; }
p, li { overflow-wrap: anywhere; }
p { max-width: 72ch; }
a { color: inherit; text-underline-offset: .24em; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 4px;
}
::selection { background: var(--accent-color); color: var(--text-color); }
.container { width: min(100% - var(--gutter) * 2, var(--content-width)); margin-inline: auto; }
.container > *, .nav-content > *, .hero-layout > *, .section-layout > *,
.service-detail > *, .contact-grid > *, .footer-grid > * { min-width: 0; }
.skip-link {
  position: fixed; inset: 12px auto auto 12px; z-index: 2000;
  padding: 12px 18px; border-radius: 8px;
  background: var(--secondary-color); color: var(--on-primary);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* Navigation: a quiet, persistent orientation point. */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg); border-bottom: 1px solid var(--line-color);
}
.nav-content { min-height: 80px; display: flex; align-items: center; gap: 28px; }
.logo {
  display: inline-flex; align-items: center; gap: 12px; margin-right: auto;
  min-height: 44px; max-width: 330px; color: var(--text-color);
  text-decoration: none; font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.4; font-weight: 700;
}
.logo span { color: inherit; }
.logo > svg { flex: 0 0 26px; width: 26px; height: 26px; }
.logo-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: var(--primary-color); }
.logo-text { display: grid; gap: 3px; }
.logo-text .en { font-size: 10px; font-weight: 400; color: var(--muted-text); }
.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--text-color); text-decoration: none; font-size: 14px;
  transition: color 160ms ease;
}
.nav-links a[aria-current="location"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav-links a.nav-cta { min-height: 44px; padding: 9px 19px; border-radius: 6px; color: var(--on-primary); background: var(--secondary-color); }
.menu-toggle, .nav-toggle {
  display: none; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 10px; gap: 8px; flex: 0 0 auto;
  border: 1px solid var(--line-color); border-radius: 6px;
  color: var(--text-color); background: var(--surface-color);
}
.menu-toggle svg, .nav-toggle svg { width: 21px; height: 21px; }

/* Hero: readable copy and an actual image or useful service index. */
.hero { padding-block: clamp(52px, 7vw, 92px) 0; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.hero-content { padding-block: 8px 20px; }
.hero-eyebrow { display: block; margin-bottom: 23px; color: var(--muted-text); font-size: 14px; font-weight: 500; }
.hero h1 { max-width: 13em; font-size: clamp(34px, 4.7vw, 64px); line-height: 1.2; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--primary-color); }
.hero h1 .line2, .hero h1 .line { display: block; }
.hero h1 .slogan-line { display: block; }
.slogan-subtitle { margin-top: 20px; color: var(--text-color); font-size: clamp(18px, 1.9vw, 24px); line-height: 1.6; }
.hero .description, .hero-desc { max-width: 41em; margin-top: 26px; color: var(--muted-text); font-size: 16px; line-height: 1.9; }
.hero-actions, .hero-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; }
.hero-cta, .contact-btn, .package-btn, .btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; max-width: 100%; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 6px;
  color: var(--on-primary); background: var(--secondary-color);
  text-align: center; text-decoration: none; line-height: 1.5; font-size: 16px; font-weight: 500;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}
.hero-cta > svg, .contact-btn > svg, .package-btn > svg, .btn-primary > svg { width: 18px; height: 18px; flex: 0 0 18px; }
.hero-link, .btn-secondary { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-color); text-decoration: underline; font-weight: 500; }
.btn-secondary { background: transparent; border-color: var(--line-color); text-decoration: none; }
.hero-aside { align-self: stretch; display: flex; align-items: stretch; padding-block: 8px 20px; }
.hero-figure { width: 100%; align-self: center; }
.hero-media { width: 100%; height: auto; aspect-ratio: 4 / 4.3; max-height: 500px; object-fit: cover; border-radius: var(--radius); background: var(--surface-alt); }
.hero-figure figcaption { margin-top: 12px; color: var(--muted-text); font-size: 13px; line-height: 1.6; }
.hero-summary {
  width: 100%; align-self: center; padding: clamp(26px, 3.5vw, 44px);
  background: var(--surface-color); border: 1px solid var(--line-color); border-radius: var(--radius);
}
.hero-summary h2 { font-size: 24px; line-height: 1.45; font-weight: 500; }
.hero-summary > p { color: var(--muted-text); margin-top: 10px; font-size: 14px; }
.hero-summary .summary-label, .service-summary .summary-label { margin-top: 0; margin-bottom: 22px; color: var(--muted-text); font-size: 13px; }
.hero-service-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding-block: 14px; border-top: 1px solid var(--line-color); text-decoration: none; font-size: 18px; line-height: 1.6; }
.hero-service-link > span:last-child { flex: 0 0 auto; color: var(--muted-text); }
.hero-summary > .hero-link { margin-top: 20px; gap: 16px; font-size: 14px; }
.hero-summary ul, .hero-summary ol { padding: 0; margin: 23px 0 0; list-style: none; }
.hero-summary li { border-top: 1px solid var(--line-color); }
.hero-summary li > a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding-block: 12px; text-decoration: none; line-height: 1.6; }
.hero-summary li > a::after { content: '↗'; flex: 0 0 auto; color: var(--muted-text); }
.hero-stats { display: flex; flex-wrap: wrap; margin-top: clamp(36px, 5vw, 64px); padding-block: 24px; border-top: 1px solid var(--line-color); gap: 20px 0; }
.stat-item { min-width: 130px; flex: 1 1 0; padding-inline: 28px; border-left: 1px solid var(--line-color); }
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-number { display: block; color: var(--text-color); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 8px; color: var(--muted-text); font-size: 13px; line-height: 1.6; }
.scroll-hint { display: none; }

/* Sections use different compositions according to their content. */
.section, main > section:not(.hero), body > section:not(.hero) { padding-block: var(--section-space); }
.section-alt, .bg-soft, .bg-cream { background: var(--surface-alt); }
.section-title, .section-header { margin-bottom: 40px; }
.section-title h2, h2.section-title, .section-header h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 500; line-height: 1.3; }
.section-title > p, .section-desc { margin-top: 16px; color: var(--muted-text); font-size: 16px; line-height: 1.9; }
.section-title .en { display: block; margin-top: 12px; font-family: var(--body-font); font-size: 14px; font-weight: 400; color: var(--muted-text); }
.section-eyebrow { display: block; margin-bottom: 16px; color: var(--muted-text); font-size: 13px; }
.section-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.65fr); gap: clamp(36px, 6vw, 84px); }
.section-layout > .section-title { margin-bottom: 0; }
.section-layout > .section-title h2 { max-width: 8em; }
.pain-grid, .advantage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.pain-card, .advantage-item { padding: 26px 0 30px; border-top: 1px solid var(--line-color); }
.pain-card h3, .advantage-item h3 { font-size: 20px; }
.pain-card p, .advantage-item p { margin-top: 12px; color: var(--muted-text); font-size: 16px; }
.pain-icon, .advantage-icon { width: 24px; margin-bottom: 18px; color: var(--primary-color); font-size: 20px; line-height: 1; }
.pain-icon:empty, .advantage-icon:empty { display: none; }
.pain-icon svg, .advantage-icon svg { width: 24px; height: 24px; }

/* Service tabs are progressive enhancement, with real anchor destinations. */
.service-tabs, .faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line-color); }
.tab-btn, .faq-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-color); border-radius: 6px;
  color: var(--text-color); background: transparent; text-decoration: none; line-height: 1.5; font-size: 15px;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.tab-btn.active, .tab-btn[aria-selected="true"], .faq-tab.active, .faq-tab[aria-selected="true"] { color: var(--on-primary); border-color: var(--secondary-color); background: var(--secondary-color); }
.service-content { display: block; scroll-margin-top: 110px; }
.service-content + .service-content { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line-color); }
.js .service-content[hidden], .js .faq-category[hidden] { display: none; }
.js .service-content:not([hidden]) { margin-top: 0; padding-top: 0; border-top: 0; }
.service-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 64px); align-items: center; }
.service-info h3 { font-family: var(--slogan-font); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.4; }
.service-info > .hero-link { margin-top: 18px; gap: 12px; }
.service-info > p { margin-top: 18px; color: var(--muted-text); }
.service-list { list-style: none; padding: 0; margin: 24px 0 0; }
.service-list li { display: flex; align-items: baseline; gap: 12px; padding-block: 11px; border-top: 1px solid var(--line-color); }
.service-list li::before { content: '✓'; color: var(--primary-color); flex: 0 0 auto; }
.service-list li > i { display: none; }
.service-visual { min-width: 0; }
.service-visual > i { display: none; }
.service-visual:not(:has(img)) { padding: 28px; border-radius: var(--radius); background: var(--surface-alt); }
.service-visual h4 { font-size: 21px; }
.service-summary ul:empty { display: none; }
.media-unavailable { display: flex; flex-direction: column; justify-content: center; min-height: 220px; padding: 28px; border: 1px solid var(--line-color); background: var(--surface-alt); border-radius: var(--radius); }
.media-unavailable figcaption { margin: 0 0 12px; }
.media-error { color: var(--muted-text); font-size: 14px; line-height: 1.8; }
.service-visual p { margin-top: 10px; color: var(--muted-text); font-size: 15px; }
.service-visual ul, .service-visual ol { margin: 18px 0 0; padding-left: 1.3em; color: var(--muted-text); }
.service-visual li + li { margin-top: 10px; }
.service-media-wrap { overflow: hidden; border-radius: var(--radius); background: var(--surface-alt); }
.service-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-visual:has(img) > h4 { margin-top: 16px; }

/* Process: one continuous line, not four more cards. */
.solution-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 30px; }
.step-card { padding-top: 24px; border-top: 1px solid var(--line-color); }
.step-number { display: inline-block; margin-bottom: 24px; font-size: 15px; color: var(--muted-text); font-variant-numeric: tabular-nums; }
.step-card h3, .step-card h4 { font-size: 21px; }
.step-card p { margin-top: 12px; color: var(--muted-text); }

/* Departments: six specialty divisions, drawn as one fine-ruled register. */
.dept-head { max-width: 880px; }
.section-title > p.eyebrow {
  margin: 0 0 20px; max-width: none;
  font-size: 12px; font-weight: 500;
  letter-spacing: .44em; text-transform: uppercase;
  color: var(--icon-color);
}
.dept-head .dept-lead { margin-top: 18px; max-width: 720px; }
.dept-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; margin-top: 56px;
  background: var(--line-color);
  border: 1px solid var(--line-color);
}
.dept-card {
  position: relative; display: flex; flex-direction: column;
  padding: 38px 34px 36px;
  background: var(--surface-alt);
}
.dept-num {
  position: absolute; top: 24px; right: 26px;
  font-size: 12px; letter-spacing: .18em;
  color: var(--line-color);
  font-variant-numeric: tabular-nums;
}
.dept-icon { color: var(--icon-color); margin-bottom: 28px; }
.dept-icon svg { width: 34px; height: 34px; }
.dept-card h3 { font-size: 20px; letter-spacing: .01em; }
.dept-en {
  margin-top: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 13px; letter-spacing: .04em;
  color: var(--muted-text);
}
.dept-card .dept-desc { margin-top: 18px; color: var(--muted-text); font-size: 15px; line-height: 1.85; }
.dept-note {
  margin-top: 32px; padding-top: 24px; max-width: 880px;
  border-top: 1px solid var(--line-color);
  color: var(--muted-text); font-size: 15px; line-height: 1.9;
}

/* Culture: brand belief, one clean column of statements. */
.culture-title { margin-bottom: 34px; }
.culture-list { margin: 0; }
.culture-item { padding-top: 24px; border-top: 1px solid var(--line-color); }
.culture-item + .culture-item { margin-top: 32px; }
.culture-item dt { font-size: 12px; font-weight: 500; letter-spacing: .3em; color: var(--icon-color); }
.culture-item dd { margin: 12px 0 0; max-width: 40em; color: var(--text-color); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.85; }

/* Cases: a horizontal gallery of real before/after records. */
.case-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.case-filter button {
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line-color); background: var(--surface-alt);
  color: var(--muted-text); font-size: 13px; letter-spacing: .04em;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.case-filter button:hover { border-color: var(--primary-color); color: var(--text-color); }
.case-filter button[aria-pressed="true"] { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--on-primary); }
.case-shell { position: relative; }
.case-track {
  display: flex; gap: 20px; list-style: none; margin: 0; padding: 26px 2px 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--line-color);
}
.case-track { align-items: flex-start; }
.case-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.case-track::-webkit-scrollbar { height: 8px; }
.case-track::-webkit-scrollbar-track { background: var(--line-color); border-radius: 999px; }
.case-track::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 999px; }
.case-track:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 4px; border-radius: 6px; }
.case-shot {
  flex: 0 0 clamp(288px, 29vw, 380px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--surface-color);
  border: 1px solid var(--line-color);
  border-radius: var(--radius);
  overflow: hidden;
}
.case-shot-media { background: var(--accent-color); aspect-ratio: 4 / 3; overflow: hidden; }
.case-shot-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-shot-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.case-shot-tag { font-size: 11.5px; letter-spacing: .2em; color: var(--icon-color); }
.case-shot h3 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; }
.case-shot-legend { font-size: 12px; letter-spacing: .16em; color: var(--primary-color); }
.case-shot-note { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--muted-text); }
.case-shot-body { flex: 1; }
.case-more-toggle {
  margin-top: auto; padding: 12px 0 0; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; border-top: 1px solid var(--line-color);
  background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 12.5px; letter-spacing: .1em; color: var(--primary-color);
  transition: color .2s ease;
}
.case-more-toggle:hover { color: var(--text-color); }
.case-more-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 3px; }
.case-more-mark { position: relative; width: 11px; height: 11px; flex: none; }
.case-more-mark::before, .case-more-mark::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.case-more-mark::before { width: 11px; height: 1px; }
.case-more-mark::after { width: 1px; height: 11px; }
.case-more-toggle[aria-expanded="true"] .case-more-mark::after { transform: rotate(90deg); opacity: 0; }
.case-more-panel {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-color);
  display: grid; gap: 13px;
}
.case-more-panel[hidden] { display: none; }
.case-more-panel:not([hidden]) { animation: caseMoreIn .26s ease both; }
@keyframes caseMoreIn { from { transform: translateY(-5px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .case-more-panel:not([hidden]) { animation: none; } }
.case-more-section h4 { margin: 0 0 5px; font-size: 12px; letter-spacing: .12em; color: var(--primary-color); font-weight: 600; }
.case-more-section p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--muted-text); }
.case-more-section:last-child p { color: var(--text-color); }
.case-shot { min-height: var(--case-min-h, 0px); }
.case-prev { left: -14px; }
.case-next { right: -14px; }
@media (max-width: 860px) {
  .case-shot { flex-basis: min(84vw, 340px); }
}

/* Packages: a contained comparison belongs in a card. */
.packages { background: var(--surface-alt); }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; align-items: stretch; }
.package-card { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: clamp(24px, 3vw, 36px); background: var(--surface-color); border: 1px solid var(--line-color); border-radius: var(--radius); }
.package-card.featured { border-color: var(--primary-color); }
.package-badge { display: inline-block; margin-bottom: 22px; padding: 3px 10px; border-radius: 4px; color: var(--on-accent); background: var(--accent-color); font-size: 12px; font-weight: 500; }
.package-card h3 { font-size: 25px; }
.package-card > p, .package-card .sub { margin-top: 12px; color: var(--muted-text); }
.package-features { list-style: none; width: 100%; margin: 24px 0 30px; padding: 0; }
.package-features li { display: flex; gap: 10px; padding-block: 10px; font-size: 15px; border-top: 1px solid var(--line-color); }
.package-features li::before { content: '✓'; flex: 0 0 auto; color: var(--primary-color); }
.package-features li > i { display: none; }
.package-btn { width: 100%; margin-top: auto; }
.package-card:not(.featured) .package-btn { color: var(--text-color); background: transparent; border-color: var(--line-color); }
.price-from { color: var(--muted-text); margin-top: 24px; font-size: 13px; }
.price { font-size: 36px; font-weight: 600; line-height: 1.4; }
.price small { font-size: 14px; font-weight: 400; color: var(--muted-text); }

/* Evidence is presented as records with room for longer text. */
.case-card { padding-block: 36px; border-top: 1px solid var(--line-color); }
.case-card + .case-card { margin-top: 12px; }
.case-visual > .tag {  display: inline-flex; padding: 4px 10px; color: var(--muted-text); border: 1px solid var(--line-color); border-radius: 4px; font-size: 13px; line-height: 1.5; }
.section-h
 {  margin-bottom: 10px; font-size: 14px; font-weight: 600;  }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery-item { overflow: hidden; border-radius: var(--radius); }
.gallery-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-color); }
.gallery-item figcaption { padding-block: 12px; color: var(--muted-text); font-size: 14px; }

/* Contact: deliberately one stronger surface at the decision point. */
.contact { background: var(--inverse-bg); color: var(--on-inverse); }
.contact .section-title > p, .contact .section-desc, .contact-item p { color: var(--inverse-muted); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 7vw, 100px); }
.contact-info, .contact-info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.contact-item { padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--on-inverse) 25%, transparent); }
.contact-item > i, .contact-item > .ic { display: none; }
.contact-item h4 { margin-bottom: 8px; font-size: 14px; font-weight: 400; color: var(--inverse-muted); }
.contact-item p, .contact-item a { font-size: 16px; line-height: 1.8; }
.contact-item a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-inverse); }
.contact-cta, .contact-cta-box { align-self: start; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--on-inverse) 25%, transparent); }
.contact-cta h3, .contact-cta-box h3 { font-family: var(--slogan-font); font-size: clamp(26px, 3vw, 36px); line-height: 1.4; }
.contact-cta p, .contact-cta-box > p { margin-top: 16px; color: var(--inverse-muted); }
.contact-btn, .contact-cta-box .btn-primary { margin-top: 26px; background: var(--accent-color); color: var(--on-accent); }
.contact a:focus-visible, .contact button:focus-visible { outline-color: var(--on-inverse); }
.contact-cta-box .wechat { margin-top: 25px; color: var(--inverse-muted); font-size: 14px; }

.footer { padding-block: 56px 24px; background: var(--background-color); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
.footer-brand h3 { font-family: var(--slogan-font); font-size: 23px; font-weight: 500; }
.footer-brand p { margin-top: 16px; max-width: 34em; color: var(--muted-text); font-size: 14px; line-height: 1.9; }
.footer-title { margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.footer-links { list-style: none; margin: 0; padding: 0; color: var(--muted-text); font-size: 14px; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.footer-links li:not(:has(a)) { padding-block: 10px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-color); color: var(--muted-text); font-size: 12px; }
.footer-icp{color:var(--muted-text);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line-color);transition:color .2s ease}.footer-icp:hover{color:var(--primary-color)}

.mobile-contact { display: none; }

/* Optional modules used by the hand-authored v2 example. */
.doctors-grid, .doctor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 28px; }
.doctor-card { min-width: 0; overflow: hidden; border: 1px solid var(--line-color); border-radius: var(--radius); background: var(--surface-color); }
.doctor-photo { position: relative; aspect-ratio: 4 / 5; background-color: var(--surface-alt); background-size: cover; background-position: center top; }
.doctor-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doctor-photo .badge, .doctor-photo .name-overlay { position: absolute; inset: auto 16px 16px; width: fit-content; max-width: calc(100% - 32px); padding: 6px 12px; color: var(--text-color); background: var(--surface-color); border-radius: 4px; font-size: 13px; }
.doctor-photo .badge { inset: 16px auto auto 16px; }
.doctor-photo .cn-name { font-size: 19px; }
.doctor-photo .en-name { font-size: 12px; color: var(--muted-text); }
.doctor-info { padding: 24px; }
.doctor-info h3 { font-size: 23px; }
.doctor-info .role, .doctor-info .title { margin-block: 8px 14px; font-size: 14px; color: var(--muted-text); }
.doctor-info .creds { display: flex; flex-wrap: wrap; gap: 7px; }
.doctor-info .creds span { padding: 3px 8px; border: 1px solid var(--line-color); border-radius: 4px; font-size: 12px; }
.doctor-info .exp { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-color); color: var(--muted-text); font-size: 14px; }
.table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line-color); border-radius: var(--radius); }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; }
.comparison-table th, .comparison-table td { padding: 18px 20px; border-bottom: 1px solid var(--line-color); vertical-align: top; }
.comparison-table th { font-weight: 600; background: var(--surface-alt); }
.comparison-table td { color: var(--muted-text); }
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table .highlight { color: var(--text-color); background: var(--surface-alt); }
.credentials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 24px; }
.credential-card, .credential-item { padding-block: 24px; border-top: 1px solid var(--line-color); }
.credential-card h3, .credential-item h3 { font-size: 19px; }
.credential-card p, .credential-item p { margin-top: 12px; color: var(--muted-text); font-size: 15px; }
.credential-card img, .credential-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: 20px; background: var(--surface-color); }
.faq-list { max-width: 880px; margin-inline: auto; }
.faq-category { display: block; }
.faq-item { padding-block: 0; border-top: 1px solid var(--line-color); }
.faq-item:last-child { border-bottom: 1px solid var(--line-color); }
.faq-question, .faq-q, .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 64px; padding: 20px 0; border: 0; color: var(--text-color); background: transparent; text-align: left; font-weight: 500; font-size: 17px; line-height: 1.7; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-question::after, .faq-item > summary::after { content: '+'; flex: 0 0 20px; font-size: 24px; text-align: center; font-weight: 400; }
.faq-question[aria-expanded="true"]::after, .faq-item[open] > summary::after { content: '−'; }
.faq-q .q-num { display: none; }
.faq-q .q-text { flex: 1; }
.faq-q .q-icon { flex: 0 0 20px; color: var(--muted-text); }
.faq-answer, .faq-a, .faq-item > p { padding: 0 0 24px; color: var(--muted-text); font-size: 16px; line-height: 1.9; }
.js .faq-answer[hidden] { display: none; }
.faq-a-inner .a-label { margin-bottom: 10px; font-weight: 500; color: var(--text-color); }
.case-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.case-visual h3 { margin-top: 18px; font-size: 25px; }
.case-visual .meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 15px; color: var(--muted-text); font-size: 13px; }
.case-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.compare-cell { position: relative; min-height: 180px; background-color: var(--surface-alt); background-size: cover; background-position: center; border-radius: 8px; }
.compare-cell .label { position: absolute; inset: auto auto 10px 10px; padding: 3px 8px; background: var(--surface-color); color: var(--text-color); border-radius: 3px; font-size: 12px; }
.case-visual .quote { margin-top: 22px; color: var(--muted-text); font-size: 15px; }
.case-body { padding: 28px; background: var(--surface-alt); border-radius: var(--radius); }
.case-body p + .section-h { margin-top: 24px; }
.case-body p { color: var(--muted-text); }
.result-box { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-color); }

/* Presets retain their own tone without changing readability or interaction. */
body[data-template="editorial"] { --radius: 12px; }
body[data-template="editorial"] .hero h1 { font-weight: 500; }
body[data-template="quiet_luxury"] { --radius: 4px; --section-space: clamp(76px, 9vw, 128px); }
body[data-template="quiet_luxury"] .hero h1, body[data-template="quiet_luxury"] .section-title h2 { font-weight: 400; }
body[data-template="quiet_luxury"] .hero-summary { background: transparent; }
body[data-template="quiet_luxury"] .hero-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 100px); }
body[data-template="quiet_luxury"] .hero h1 { max-width: 10em; font-size: clamp(38px, 4.7vw, 64px); }
body[data-template="quiet_luxury"] .hero-media { aspect-ratio: 4 / 5; }
body[data-template="institutional"] { --radius: 6px; }
body[data-template="institutional"] .hero h1 { font-weight: 600; }
body[data-template="institutional"] .hero-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
body[data-template="institutional"] .hero-media { aspect-ratio: 1; }
body[data-template="institutional"] .pain-grid { grid-template-columns: 1fr; }
body[data-template="institutional"] .section-title h2 { font-weight: 600; }
body[data-template="clinical"] { --radius: 16px; }
body[data-template="clinical"] .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-template="clinical"] .hero-media { aspect-ratio: 1 / 1; object-position: center; }
body[data-template="clinical"] .hero-summary { border: 0; background: var(--surface-alt); }
body[data-template="signal"] { --radius: 6px; }
body[data-template="signal"] .hero h1 { font-weight: 700; }
body[data-template="signal"] .hero-summary { background: transparent; }
body[data-template="signal"] .section-title h2 { font-weight: 600; }
body[data-template="signal"] .hero-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
body[data-template="signal"] .hero-media { aspect-ratio: 1; }
body[data-template="signal"] .hero-summary { align-self: start; }
body[data-template="signal"] .section-layout { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
body[data-template="cultural"] { --radius: 4px; }
body[data-template="cultural"] .hero h1, body[data-template="cultural"] .section-title h2 { font-weight: 500; }
body[data-template="cultural"] .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 96px); }
body[data-template="cultural"] .hero h1 { max-width: 10em; }
body[data-template="cultural"] .hero-figure { padding: 10px; border: 1px solid var(--line-color); }
body[data-template="material"] { --radius: 16px; }
body[data-template="material"] .hero-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); }
body[data-template="material"] .hero-media { aspect-ratio: 4 / 5; }
body[data-template="material"] .hero-summary { border: 0; background: var(--surface-alt); }
body[data-template="spatial"] { --radius: 16px; --section-space: clamp(76px, 9vw, 128px); }
body[data-template="spatial"] .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-template="spatial"] .hero h1 { font-weight: 600; }
body[data-template="spatial"] .hero-media { aspect-ratio: 1; }
body[data-template="spatial"] .section-layout { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
body[data-template="architectural"] { --radius: 0px; }
body[data-template="architectural"] .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
body[data-template="architectural"] .hero-summary { align-self: start; padding: 32px 0; background: transparent; border-inline: 0; }
body[data-template="architectural"] .section-title { padding-top: 20px; border-top: 1px solid var(--line-color); }
body[data-template="architectural"] .hero-media { aspect-ratio: 4 / 5; }
body[data-template="organic"] { --radius: 16px; }
body[data-template="organic"] .hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
body[data-template="organic"] .hero-media { border-radius: 72px 16px 16px 16px; }
body[data-template="organic"] .hero-summary { border: 0; background: var(--surface-alt); }

@media (hover: hover) {
  .nav-links a:not(.nav-cta):hover, .hero-link:hover, .footer-links a:hover { color: var(--text-color); text-decoration: underline; }
  .hero-summary a:hover { color: var(--text-color); text-decoration: underline; }
  .hero-cta:hover, .btn-primary:hover, .nav-links a.nav-cta:hover, .package-card.featured .package-btn:hover { transform: translateY(-1px); text-decoration: underline; }
  .contact-btn:hover, .contact-cta-box .btn-primary:hover { text-decoration: underline; }
  .tab-btn:not(.active):not([aria-selected="true"]):hover, .faq-tab:not(.active):hover, .btn-secondary:hover, .package-card:not(.featured) .package-btn:hover { background: var(--surface-alt); border-color: var(--muted-text); }
  .menu-toggle:hover { border-color: var(--muted-text); }
  .faq-question:hover, .faq-q:hover, .faq-item > summary:hover { color: var(--text-color); text-decoration: underline; }
}

@media (max-width: 1100px) {
  .nav-content { gap: 20px; }
  .nav-links { gap: 4px 14px; }
  .nav-links a { font-size: 13px; }
  .logo { max-width: 260px; }
  .section-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 44px; }
}
@media (max-width: 800px) {
  :root { --gutter: 20px; --section-space: 60px; }
  body:has(.mobile-contact) { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: 92px; }
  .nav-content { min-height: 68px; flex-wrap: wrap; gap: 0; }
  .logo { flex: 1 1 auto; max-width: calc(100% - 96px); padding-block: 12px; font-size: 18px; }
  .js .menu-toggle { display: inline-flex; }
  .js .nav-links { display: none; }
  .js body.menu-open .nav-links, .js body .nav-links.is-open, .js body .nav-links.open { display: flex; }
  .nav-links { width: 100%; padding: 8px 0 16px; flex-direction: column; align-items: stretch; gap: 0; max-height: min(65vh, 440px); overflow-y: auto; }
  .nav-links li { width: 100%; }
  .nav-links a { display: flex; width: 100%; padding-block: 12px; font-size: 15px; }
  .nav-links a.nav-cta { margin-top: 8px; justify-content: center; }
  .hero { padding-top: 38px; }
  body[data-template] .hero-layout { grid-template-columns: 1fr; gap: 28px; }
  body[data-template] .section-layout { grid-template-columns: 1fr; gap: 26px; }
  body[data-template] .hero h1 { font-size: clamp(32px, 7.5vw, 44px); max-width: 14em; }
  .hero-content { padding-block: 0; }
  .hero-eyebrow { margin-bottom: 18px; font-size: 13px; }
  .slogan-subtitle { margin-top: 16px; font-size: 19px; }
  .hero .description, .hero-desc { margin-top: 20px; line-height: 1.85; }
  .hero-actions, .hero-btns { margin-top: 24px; gap: 10px 20px; }
  .hero-cta, .contact-btn, .btn-primary, .btn-secondary { padding-inline: 20px; }
  .hero-aside { padding-block: 0; }
  body[data-template] .hero-figure .hero-media { height: auto; aspect-ratio: 4 / 3; max-height: 380px; }
  .hero-figure figcaption { font-size: 12px; }
  .hero-summary { padding: 22px; }
  .hero-service-link { min-height: 52px; padding-block: 12px; font-size: 16px; }
  .hero-summary ul, .hero-summary ol { margin-top: 16px; }
  .hero-summary li > a { min-height: 48px; padding-block: 10px; font-size: 15px; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; padding-block: 22px; gap: 24px; }
  .stat-item { min-width: 0; padding-inline: 0; border-left: 0; }
  .stat-number { font-size: 26px; }
  .stat-label { margin-top: 5px; font-size: 13px; }
  .section-title, .section-header { margin-bottom: 28px; }
  .section-title h2, h2.section-title, .section-header h2 { font-size: 29px; }
  .section-title > p, .section-desc { margin-top: 12px; }
  .section-layout { gap: 26px; }
  .pain-grid, .advantage-grid { grid-template-columns: 1fr; }
  .pain-card, .advantage-item { padding-block: 22px; }
  .pain-card h3, .advantage-item h3 { font-size: 20px; }
  .pain-icon, .advantage-icon { margin-bottom: 14px; }
  .service-tabs, .faq-tabs { gap: 8px; margin-bottom: 28px; padding-bottom: 22px; }
  .tab-btn, .faq-tab { flex: 1 1 auto; padding-inline: 12px; font-size: 14px; }
  .service-detail { grid-template-columns: 1fr; gap: 26px; }
  .service-info h3 { font-size: 26px; }
  .service-visual:not(:has(img)) { padding: 22px; }
  .service-content { scroll-margin-top: 92px; }
  .solution-steps { grid-template-columns: 1fr; gap: 0; }
  .step-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px 14px; padding-block: 24px; }
  .step-number { grid-row: 1 / 3; margin: 3px 0 0; }
  .step-card h3, .step-card h4 { font-size: 21px; }
  .step-card p { grid-column: 2; margin: 0; }
  .package-grid { grid-template-columns: 1fr; gap: 18px; }
  .package-card { padding: 26px; }
  .case-card { padding-block: 28px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gallery-grid .gallery-item:only-child { grid-column: 1 / -1; }
  .gallery-media { aspect-ratio: 1; }
  .contact-grid { grid-template-columns: 1fr; gap: 38px; }
  .contact-info, .contact-info-list { grid-template-columns: 1fr; gap: 22px; }
  .contact-cta h3, .contact-cta-box h3 { font-size: 28px; }
  .contact-btn, .contact-cta-box .btn-primary { width: 100%; }
  .footer { padding-top: 40px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .section-layout { grid-template-columns: 1fr; }
  .section-layout > .section-title h2 { max-width: none; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { margin-top: 30px; padding-top: 20px; }
  .mobile-contact {
    position: fixed; z-index: 90; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface-color); border-top: 1px solid var(--line-color);
  }
  .mobile-contact a { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 9px 10px; color: var(--text-color); border: 1px solid var(--line-color); border-radius: 6px; text-decoration: none; text-align: center; font-size: 14px; line-height: 1.5; }
  .mobile-contact a.mobile-call { background: var(--secondary-color); border-color: var(--secondary-color); color: var(--on-primary); }
  .doctors-grid, .doctor-grid { grid-template-columns: 1fr; gap: 22px; }
  .doctor-photo { aspect-ratio: 4 / 4.3; }
  .doctor-info { padding: 22px; }
  .comparison-table { font-size: 14px; min-width: 540px; }
  .comparison-table th, .comparison-table td { padding: 14px 16px; }
  .credentials-grid { grid-template-columns: 1fr; gap: 8px; }
  .faq-question, .faq-q, .faq-item > summary { font-size: 16px; gap: 14px; }
  .case-inner { grid-template-columns: 1fr; gap: 26px; }
  .case-body { padding: 22px; }
  .compare-cell { min-height: 140px; }
  body[data-template="quiet_luxury"], body[data-template="spatial"] { --section-space: 68px; }
  body[data-template="organic"] .hero-media { border-top-left-radius: 42px; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  body[data-template] .hero h1 { font-size: 31px; }
  .hero-actions > .hero-cta { width: 100%; }
  .hero-summary, .package-card { padding: 20px; }
  .footer-grid { gap: 20px; }
  .tab-btn { font-size: 13px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-cta:hover, .btn-primary:hover, .nav-links a.nav-cta:hover, .package-btn:hover { transform: none; }
}
@media print {
  .navbar, .mobile-contact, .hero-actions, .package-btn, .contact-btn, .skip-link { display: none; }
  body { padding-bottom: 0; }
  .section { padding-block: 32px; }
  .service-content, .js .service-content[hidden], .faq-answer, .js .faq-answer[hidden] { display: block; }
  .case-card, .package-card, .doctor-card { break-inside: avoid; }
}

/* Three deliberately different art directions. Load after ui.css.
   Colors continue to come from the generator's contrast-checked semantic tokens.
   These compositions work with real imagery and with the useful service fallback. */

/* Editorial — clear blue, institutional confidence, precise service directory. */
body[data-template="editorial"] {
  --radius: 3px;
  --section-space: clamp(76px, 8vw, 116px);
  --slogan-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body[data-template="editorial"] .navbar { border-bottom: 0; }
body[data-template="editorial"] .nav-content { min-height: 84px; }
body[data-template="editorial"] .logo { color: var(--primary-color); letter-spacing: -.025em; }
body[data-template="editorial"] .nav-links a.nav-cta { border-radius: 2px; }
body[data-template="editorial"] .hero {
  padding-block: clamp(64px, 7.5vw, 112px) 0;
  color: var(--on-inverse); background: var(--inverse-bg);
}
body[data-template="editorial"] .hero-layout {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: clamp(40px, 6.5vw, 96px); align-items: center;
}
body[data-template="editorial"] .hero-content { padding-block: 0 28px; }
body[data-template="editorial"] .hero-eyebrow {
  display: flex; align-items: center; gap: 13px; color: var(--on-inverse);
  font-size: 13px; letter-spacing: .08em;
}
body[data-template="editorial"] .hero-eyebrow::before {
  content: ""; width: 24px; height: 2px; background: currentColor; flex: 0 0 24px;
}
body[data-template="editorial"] .hero h1 {
  max-width: 12em; color: var(--on-inverse); font-size: clamp(40px, 5.1vw, 72px);
  font-weight: 650; line-height: 1.22; letter-spacing: -.035em;
}
body[data-template="editorial"] .hero h1 em,
body[data-template="editorial"] .hero .slogan-subtitle,
body[data-template="editorial"] .hero .description,
body[data-template="editorial"] .hero .hero-desc { color: var(--on-inverse); }
body[data-template="editorial"] .hero .description,
body[data-template="editorial"] .hero .hero-desc { max-width: 34em; margin-top: 24px; }
body[data-template="editorial"] .hero-content .hero-cta {
  color: var(--inverse-bg); background: var(--on-inverse); border-radius: 2px;
  min-height: 52px; padding-inline: 28px;
}
body[data-template="editorial"] .hero-content .hero-link { color: var(--on-inverse); text-decoration-thickness: 1px; }
body[data-template="editorial"] .hero-content a:focus-visible { outline-color: var(--on-inverse); }
body[data-template="editorial"] .hero-aside { padding-block: 10px 28px; }
body[data-template="editorial"] .hero-summary {
  padding: clamp(28px, 3vw, 40px); border: 0; border-radius: 2px;
  color: var(--text-color); background: var(--background-color);
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--primary-color) 34%, transparent);
}
body[data-template="editorial"] .hero-summary .summary-label {
  padding-bottom: 20px; margin-bottom: 0; color: var(--muted-text);
  font-size: 12px; letter-spacing: .08em;
}
body[data-template="editorial"] .hero-service-link { min-height: 72px; padding-block: 18px; font-size: 18px; }
body[data-template="editorial"] .hero-summary > .hero-link { margin-top: 22px; color: var(--primary-color); }
body[data-template="editorial"] .hero-media { border-radius: 2px; aspect-ratio: 4 / 4.5; }
body[data-template="editorial"] .hero-figure figcaption { color: var(--on-inverse); }
body[data-template="editorial"] .hero-figure.media-unavailable { background: var(--background-color); color: var(--text-color); }
body[data-template="editorial"] .hero-figure.media-unavailable figcaption { color: var(--muted-text); }
body[data-template="editorial"] .hero-stats {
  margin-top: 56px; padding-block: 28px 32px;
  border-color: color-mix(in srgb, var(--on-inverse) 32%, transparent);
}
body[data-template="editorial"] .hero .stat-item { border-color: color-mix(in srgb, var(--on-inverse) 32%, transparent); }
body[data-template="editorial"] .hero .stat-number,
body[data-template="editorial"] .hero .stat-label { color: var(--on-inverse); }
body[data-template="editorial"] .hero .stat-number { font-weight: 600; }
body[data-template="editorial"] .section-title h2 { font-weight: 650; letter-spacing: -.035em; }
body[data-template="editorial"] .section-title::before {
  content: ""; display: block; width: 36px; height: 3px;
  margin-bottom: 22px; background: var(--primary-color);
}
body[data-template="editorial"] .contact .section-title::before { background: var(--accent-color); }
body[data-template="editorial"] .section-alt { background: var(--surface-color); }
body[data-template="editorial"] .pain-grid { gap: 0 40px; }
body[data-template="editorial"] .pain-card { padding-block: 28px 32px; }
body[data-template="editorial"] .pain-card h3,
body[data-template="editorial"] .advantage-item h3 { font-weight: 600; }
body[data-template="editorial"] .service-tabs { gap: 0 28px; padding-bottom: 0; }
body[data-template="editorial"] .service-tabs .tab-btn {
  padding: 14px 0 18px; min-height: 56px; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: transparent; color: var(--text-color);
}
body[data-template="editorial"] .service-tabs .tab-btn[aria-selected="true"],
body[data-template="editorial"] .service-tabs .tab-btn.active {
  color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: 650;
}
body[data-template="editorial"] .service-detail { gap: 72px; }
body[data-template="editorial"] .service-visual:not(:has(img)) {
  padding: 38px; background: var(--surface-color); border-left: 1px solid var(--line-color); border-radius: 0;
}
body[data-template="editorial"] .service-info h3 { font-weight: 650; }
body[data-template="editorial"] .solution-steps { gap: 0; }
body[data-template="editorial"] .step-card { padding: 28px 30px 12px 0; border-top: 2px solid var(--primary-color); }
body[data-template="editorial"] .step-card + .step-card { padding-left: 30px; border-left: 1px solid var(--line-color); }
body[data-template="editorial"] .step-number { color: var(--primary-color); font-size: 32px; font-weight: 500; line-height: 1; }
body[data-template="editorial"] .package-grid { gap: 0; }
body[data-template="editorial"] .package-card { border-radius: 0; border: 0; border-left: 1px solid var(--line-color); background: transparent; }
body[data-template="editorial"] .package-card:first-child { border-left: 0; }
body[data-template="editorial"] .package-card.featured { border-top: 3px solid var(--primary-color); background: var(--background-color); }
body[data-template="editorial"] .package-card:not(.featured) .package-btn { border-radius: 2px; }
body[data-template="editorial"] .case-card { border-top: 2px solid var(--primary-color); }

/* Signal — black canvas, coral signal, oversize typography, a working index. */
body[data-template="signal"] {
  --radius: 0px;
  --section-space: clamp(76px, 9vw, 132px);
  --slogan-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
body[data-template="signal"] .navbar { border-bottom-color: var(--primary-color); }
body[data-template="signal"] .nav-content { min-height: 84px; }
body[data-template="signal"] .logo { letter-spacing: -.04em; font-weight: 750; }
body[data-template="signal"] .nav-links a.nav-cta { border-radius: 0; }
body[data-template="signal"] .hero { padding-block: clamp(60px, 7vw, 108px) 0; }
body[data-template="signal"] .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 52px; }
body[data-template="signal"] .hero-content { padding: 0; }
body[data-template="signal"] .hero-eyebrow {
  display: flex; gap: 12px; align-items: center; color: var(--text-color); font-size: 13px; letter-spacing: .1em;
}
body[data-template="signal"] .hero-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); flex: 0 0 8px;
}
body[data-template="signal"] .hero h1 {
  max-width: 13em; font-size: clamp(44px, 6.5vw, 88px); line-height: 1.13;
  font-weight: 740; letter-spacing: -.025em;
}
body[data-template="signal"] .hero .description { max-width: 48em; margin-top: 30px; }
body[data-template="signal"] .hero-actions { gap: 18px 28px; }
body[data-template="signal"] .hero-cta { min-height: 54px; padding-inline: 28px; border-radius: 0; }
body[data-template="signal"] .hero-aside { padding: 0; }
body[data-template="signal"] .hero-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  counter-reset: signal-service;
}
body[data-template="signal"] .hero-summary .summary-label {
  grid-column: 1 / -1; margin-bottom: 18px; color: var(--muted-text); font-size: 12px; letter-spacing: .1em;
}
body[data-template="signal"] .hero-summary .hero-service-link {
  display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 20px 16px;
  min-height: 126px; margin-right: 22px; padding-block: 18px 22px; border-top-color: var(--primary-color);
  font-size: 17px; counter-increment: signal-service;
}
body[data-template="signal"] .hero-summary .hero-service-link::before {
  content: counter(signal-service, decimal-leading-zero); grid-column: 1 / -1;
  color: var(--primary-color); font-size: 12px; line-height: 1.5;
  font-family: var(--body-font); font-variant-numeric: tabular-nums;
}
body[data-template="signal"] .hero-summary > .hero-link { grid-column: 1 / -1; width: fit-content; margin-top: 0; }
body[data-template="signal"] .hero-figure { max-width: none; }
body[data-template="signal"] .hero-media { aspect-ratio: 16 / 6; max-height: 410px; border-radius: 0; }
body[data-template="signal"] .hero-stats { margin-top: 34px; padding-block: 32px; }
body[data-template="signal"] .stat-number { font-size: 35px; letter-spacing: -.025em; }
body[data-template="signal"] .section-title h2 { font-weight: 700; letter-spacing: -.025em; }
body[data-template="signal"] .section-alt { background: var(--surface-color); }
body[data-template="signal"] .section-layout { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
body[data-template="signal"] .pain-grid { grid-template-columns: 1fr; }
body[data-template="signal"] .pain-card { padding-block: 28px 32px; }
body[data-template="signal"] .pain-card h3 { font-size: 23px; }
body[data-template="signal"] #services .container { display: grid; grid-template-columns: minmax(0, .28fr) minmax(0, .72fr); gap: 0 64px; }
body[data-template="signal"] #services .section-title { grid-column: 1 / -1; }
body[data-template="signal"] .service-tabs {
  display: flex; flex-direction: column; align-self: start; gap: 0;
  margin: 0; padding: 0; border: 0;
}
body[data-template="signal"] .service-tabs .tab-btn {
  justify-content: space-between; min-height: 62px; padding: 16px 0; border: 0; border-top: 1px solid var(--line-color);
  border-radius: 0; text-align: left; background: transparent; color: var(--text-color);
}
body[data-template="signal"] .service-tabs .tab-btn::after { content: "↗"; margin-left: 16px; font-weight: 400; }
body[data-template="signal"] .service-tabs .tab-btn.active,
body[data-template="signal"] .service-tabs .tab-btn[aria-selected="true"] {
  color: var(--primary-color); border-top-color: var(--primary-color); background: transparent; font-weight: 650;
}
body[data-template="signal"] .service-content { grid-column: 2; }
body[data-template="signal"] .service-detail { grid-template-columns: 1fr; gap: 28px; align-items: start; }
body[data-template="signal"] .service-info h3 { font-size: 34px; font-weight: 650; }
body[data-template="signal"] .service-info > p { max-width: 43em; }
body[data-template="signal"] .service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }
body[data-template="signal"] .service-visual:not(:has(img)) { padding: 24px 28px; border-left: 1px solid var(--line-color); border-radius: 0; background: var(--surface-color); }
body[data-template="signal"] .service-visual .service-summary ul { margin-bottom: 0; }
body[data-template="signal"] .service-media-wrap { border-radius: 0; }
body[data-template="signal"] #solution .container { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 64px; }
body[data-template="signal"] .solution-steps { grid-template-columns: 1fr; gap: 0; }
body[data-template="signal"] .step-card {
  display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px 28px;
  padding-block: 28px; border-top-color: var(--line-color);
}
body[data-template="signal"] .step-number { grid-row: 1 / 3; margin: 0; color: var(--primary-color); font-size: 14px; font-family: var(--body-font); font-variant-numeric: tabular-nums; }
body[data-template="signal"] .step-card h3 { font-size: 24px; }
body[data-template="signal"] .step-card p { grid-column: 2; margin: 0; }
body[data-template="signal"] .advantage-grid { gap: 0 40px; }
body[data-template="signal"] .advantage-item { border-top: 2px solid var(--primary-color); }
body[data-template="signal"] .package-grid { gap: 24px; }
body[data-template="signal"] .package-card { border: 1px solid var(--line-color); border-radius: 0; background: var(--background-color); }
body[data-template="signal"] .package-card.featured { border-color: var(--primary-color); }
body[data-template="signal"] .package-badge { border-radius: 0; background: var(--secondary-color); color: var(--on-primary); }
body[data-template="signal"] .package-btn { border-radius: 0; }
body[data-template="signal"] .case-card { padding-block: 38px; }
body[data-template="signal"] .contact { border-top: 2px solid var(--primary-color); }
body[data-template="signal"] .footer-brand h3 { font-weight: 650; }

/* Material — forest green, paper cream, serif type, product photography. */
body[data-template="material"] {
  --radius: 2px;
  --section-space: clamp(84px, 9vw, 128px);
  --slogan-font: "Songti SC", "STSong", "SimSun", serif;
}
body[data-template="material"] .navbar { border-bottom: 0; background: var(--background-color); }
body[data-template="material"] .nav-content { min-height: 88px; }
body[data-template="material"] .logo { color: var(--primary-color); font-family: var(--slogan-font); font-size: 26px; font-weight: 600; letter-spacing: .03em; }
body[data-template="material"] .nav-links a.nav-cta { border-radius: 2px; padding-inline: 22px; }
body[data-template="material"] .hero {
  padding-block: clamp(64px, 6vw, 92px) 0; color: var(--on-inverse); background: var(--inverse-bg);
}
body[data-template="material"] .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 104px); }
body[data-template="material"] .hero-content { padding-block: 12px 40px; }
body[data-template="material"] .hero-eyebrow { margin-bottom: 28px; color: var(--on-inverse); font-size: 13px; letter-spacing: .15em; }
body[data-template="material"] .hero h1 { max-width: 10em; color: var(--on-inverse); font-size: clamp(44px, 5.4vw, 72px); line-height: 1.3; font-weight: 400; letter-spacing: .025em; }
body[data-template="material"] .hero h1 em { color: var(--on-inverse); }
body[data-template="material"] .hero .slogan-subtitle { color: var(--on-inverse); }
body[data-template="material"] .hero .description,
body[data-template="material"] .hero .hero-desc { max-width: 31em; color: var(--inverse-muted); font-size: 15px; line-height: 2; }
body[data-template="material"] .hero-content .hero-cta {
  min-height: 52px; padding-inline: 28px; color: var(--inverse-bg); background: var(--on-inverse); border-radius: 2px;
}
body[data-template="material"] .hero-content .hero-link { color: var(--on-inverse); font-size: 15px; }
body[data-template="material"] .hero-content a:focus-visible { outline-color: var(--on-inverse); }
body[data-template="material"] .hero-aside { padding-block: 0 28px; }
body[data-template="material"] .hero-media {
  border-radius: 120px 2px 2px 2px; aspect-ratio: 4 / 4.6; max-height: 560px;
  background: var(--inverse-bg); object-position: center;
}
body[data-template="material"] .hero-figure figcaption { color: var(--inverse-muted); font-size: 12px; }
body[data-template="material"] .hero-figure.media-unavailable {
  background: var(--inverse-bg); color: var(--on-inverse);
  border-color: color-mix(in srgb, var(--on-inverse) 35%, transparent);
}
body[data-template="material"] .hero-figure.media-unavailable .media-error { color: var(--inverse-muted); }
body[data-template="material"] .hero-summary {
  padding: 36px 0 36px 40px; border: 0; border-left: 1px solid color-mix(in srgb, var(--on-inverse) 35%, transparent);
  border-radius: 0; color: var(--on-inverse); background: transparent;
}
body[data-template="material"] .hero-summary .summary-label { color: var(--inverse-muted); letter-spacing: .12em; font-size: 12px; }
body[data-template="material"] .hero-service-link {
  min-height: 74px; padding-block: 18px; border-top-color: color-mix(in srgb, var(--on-inverse) 35%, transparent);
  color: var(--on-inverse); font-family: var(--slogan-font); font-size: 24px;
}
body[data-template="material"] .hero-service-link > span:last-child,
body[data-template="material"] .hero-summary > .hero-link { color: var(--on-inverse); }
body[data-template="material"] .hero-summary a:focus-visible { outline-color: var(--on-inverse); }
body[data-template="material"] .hero-summary .media-error { color: var(--inverse-muted); }
body[data-template="material"] .hero-stats {
  margin-top: 36px; padding-block: 26px 32px;
  border-top-color: color-mix(in srgb, var(--on-inverse) 35%, transparent);
}
body[data-template="material"] .hero .stat-item { border-color: color-mix(in srgb, var(--on-inverse) 35%, transparent); }
body[data-template="material"] .hero .stat-number { color: var(--on-inverse); font-family: var(--slogan-font); font-weight: 400; font-size: 30px; }
body[data-template="material"] .hero .stat-label { color: var(--inverse-muted); }
body[data-template="material"] .section-title h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 400; letter-spacing: .025em; }
body[data-template="material"] .section-title > p { max-width: 32em; font-size: 15px; }
body[data-template="material"] .section-alt { background: var(--surface-color); }
body[data-template="material"] .section-layout { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 88px; }
body[data-template="material"] .pain-grid { grid-template-columns: 1fr; }
body[data-template="material"] .pain-card { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 22px; padding-block: 26px; }
body[data-template="material"] .pain-card h3 { font-family: var(--slogan-font); font-size: 23px; font-weight: 500; }
body[data-template="material"] .pain-card p { margin: 0; font-size: 15px; }
body[data-template="material"] #services .section-title { text-align: center; }
body[data-template="material"] #services .section-title > p { margin-inline: auto; }
body[data-template="material"] .service-tabs { justify-content: center; gap: 0 30px; margin-bottom: 44px; padding: 0; border: 0; }
body[data-template="material"] .service-tabs .tab-btn { min-height: 56px; padding: 12px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; font-size: 16px; }
body[data-template="material"] .service-tabs .tab-btn.active,
body[data-template="material"] .service-tabs .tab-btn[aria-selected="true"] { color: var(--primary-color); border-bottom-color: var(--primary-color); background: transparent; }
body[data-template="material"] .service-detail { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 100px); }
body[data-template="material"] .service-info h3 { font-weight: 400; font-size: 34px; }
body[data-template="material"] .service-info > p { font-size: 15px; line-height: 2; }
body[data-template="material"] .service-list li { padding-block: 14px; font-size: 15px; }
body[data-template="material"] .service-visual:not(:has(img)) {
  min-height: 300px; display: flex; align-items: center; padding: 42px;
  border: 1px solid var(--line-color); border-radius: 56px 2px 2px 2px; background: var(--surface-alt);
}
body[data-template="material"] .service-visual h4 { font-family: var(--slogan-font); font-size: 28px; font-weight: 400; }
body[data-template="material"] .service-media-wrap { border-radius: 56px 2px 2px 2px; }
body[data-template="material"] #solution { background: var(--secondary-color); color: var(--on-primary); }
body[data-template="material"] #solution .section-title > p,
body[data-template="material"] #solution .step-card p { color: var(--on-primary); }
body[data-template="material"] #solution .section-title { margin-bottom: 52px; }
body[data-template="material"] .solution-steps { gap: 36px; }
body[data-template="material"] .step-card { padding-top: 28px; border-color: color-mix(in srgb, var(--on-primary) 35%, transparent); }
body[data-template="material"] .step-number { display: block; color: var(--on-primary); font-family: var(--slogan-font); font-size: 50px; line-height: 1; font-weight: 400; }
body[data-template="material"] .step-card h3 { font-family: var(--slogan-font); font-size: 24px; font-weight: 400; }
body[data-template="material"] .step-card p { font-size: 15px; }
body[data-template="material"] .advantage-grid { gap: 0 40px; }
body[data-template="material"] .advantage-item h3 { font-family: var(--slogan-font); font-size: 23px; font-weight: 400; }
body[data-template="material"] .advantage-item p { font-size: 15px; }
body[data-template="material"] .packages { background: var(--surface-color); }
body[data-template="material"] .package-grid { gap: 26px; }
body[data-template="material"] .package-card { padding: 36px 30px; border-radius: 2px; background: var(--background-color); }
body[data-template="material"] .package-card h3 { font-family: var(--slogan-font); font-weight: 400; font-size: 29px; }
body[data-template="material"] .package-card.featured { border-color: var(--primary-color); border-top-width: 4px; }
body[data-template="material"] .package-badge { border-radius: 0; }
body[data-template="material"] .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; }
body[data-template="material"] .gallery-item { border-radius: 2px; }
body[data-template="material"] .gallery-item:nth-child(2) { padding-top: 56px; }
body[data-template="material"] .gallery-media { aspect-ratio: 4 / 5; }
body[data-template="material"] .contact { background: var(--inverse-bg); color: var(--on-inverse); }
body[data-template="material"] .contact-btn { background: var(--accent-color); color: var(--on-accent); border-radius: 2px; }
body[data-template="material"] .contact-cta h3 { font-weight: 400; }
body[data-template="material"] .footer-brand h3 { font-size: 27px; font-weight: 400; }

@media (hover: hover) {
  body[data-template="editorial"] .hero-summary .hero-service-link:hover { color: var(--primary-color); }
  body[data-template="signal"] .hero-summary .hero-service-link:hover { color: var(--text-color); background: var(--surface-color); }
  body[data-template="material"] .hero-summary a:hover { color: var(--on-inverse); }
  body[data-template="material"] .service-tabs .tab-btn:hover { color: var(--primary-color); background: transparent; border-bottom-color: var(--primary-color); }
}

/* Every variant collapses at the same breakpoint as the shared navigation.
   Fixed mobile controls, safe-area padding, no-JS visibility and reduced motion
   continue to be owned by ui.css; no generated text or imagery is required. */
@media (max-width: 800px) {
  body[data-template="editorial"],
  body[data-template="signal"],
  body[data-template="material"] { --section-space: 64px; }
  body[data-template="editorial"] .nav-content,
  body[data-template="signal"] .nav-content,
  body[data-template="material"] .nav-content { min-height: 68px; }
  body[data-template="editorial"] .hero,
  body[data-template="signal"] .hero,
  body[data-template="material"] .hero { padding-top: 42px; }
  body[data-template="editorial"] .hero-layout,
  body[data-template="signal"] .hero-layout,
  body[data-template="material"] .hero-layout,
  body[data-template="editorial"] .section-layout,
  body[data-template="signal"] .section-layout,
  body[data-template="material"] .section-layout,
  body[data-template="editorial"] .service-detail,
  body[data-template="signal"] .service-detail,
  body[data-template="material"] .service-detail { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  body[data-template="editorial"] .hero h1 { font-size: clamp(35px, 8vw, 46px); max-width: 12em; }
  body[data-template="signal"] .hero h1 { font-size: clamp(38px, 9vw, 52px); max-width: 13em; }
  body[data-template="material"] .hero h1 { font-size: clamp(36px, 8.3vw, 48px); max-width: 11em; }
  body[data-template="editorial"] .hero-content,
  body[data-template="signal"] .hero-content,
  body[data-template="material"] .hero-content { padding: 0; }
  body[data-template="editorial"] .hero-aside { padding-block: 0 16px; }
  body[data-template="editorial"] .hero-summary { padding: 24px; box-shadow: 8px 8px 0 color-mix(in srgb, var(--primary-color) 34%, transparent); }
  body[data-template="editorial"] .hero-service-link { min-height: 60px; padding-block: 14px; font-size: 17px; }
  body[data-template="editorial"] .hero-stats,
  body[data-template="signal"] .hero-stats,
  body[data-template="material"] .hero-stats { margin-top: 30px; padding-block: 24px 30px; }
  body[data-template="editorial"] .section-title h2,
  body[data-template="signal"] .section-title h2,
  body[data-template="material"] .section-title h2 { font-size: 30px; }
  body[data-template="editorial"] .service-tabs { gap: 0 22px; }
  body[data-template="editorial"] .service-tabs .tab-btn { flex: 0 1 auto; padding-block: 12px 14px; }
  body[data-template="editorial"] .service-visual:not(:has(img)) { padding: 26px; }
  body[data-template="editorial"] .solution-steps { grid-template-columns: 1fr; }
  body[data-template="editorial"] .step-card,
  body[data-template="editorial"] .step-card + .step-card { padding: 24px 0; border-left: 0; border-top-width: 1px; }
  body[data-template="editorial"] .step-number { font-size: 24px; }
  body[data-template="editorial"] .package-grid { grid-template-columns: 1fr; gap: 20px; }
  body[data-template="editorial"] .package-card { border-left: 0; border-top: 1px solid var(--line-color); padding: 28px 0; }
  body[data-template="editorial"] .package-card.featured { padding: 28px; }
  body[data-template="signal"] .hero-layout { gap: 34px; }
  body[data-template="signal"] .hero-summary { grid-template-columns: minmax(0, 1fr); }
  body[data-template="signal"] .hero-summary .hero-service-link {
    grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    min-height: 64px; margin-right: 0; padding-block: 15px; font-size: 17px;
  }
  body[data-template="signal"] .hero-summary .hero-service-link::before { grid-column: 1; }
  body[data-template="signal"] .hero-summary > .hero-link { margin-top: 12px; }
  body[data-template="signal"] #services .container,
  body[data-template="signal"] #solution .container { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body[data-template="signal"] .service-tabs { flex-direction: row; flex-wrap: wrap; gap: 0 22px; margin-bottom: 28px; }
  body[data-template="signal"] .service-tabs .tab-btn { flex: 0 1 auto; min-height: 52px; padding-block: 12px; border-top: 0; border-bottom: 1px solid var(--line-color); font-size: 14px; }
  body[data-template="signal"] .service-tabs .tab-btn::after { display: none; }
  body[data-template="signal"] .service-tabs .tab-btn.active,
  body[data-template="signal"] .service-tabs .tab-btn[aria-selected="true"] { border-bottom-color: var(--primary-color); }
  body[data-template="signal"] .service-content { grid-column: 1; }
  body[data-template="signal"] .service-info h3 { font-size: 28px; }
  body[data-template="signal"] .service-list { grid-template-columns: minmax(0, 1fr); }
  body[data-template="signal"] .solution-steps { grid-template-columns: minmax(0, 1fr); }
  body[data-template="signal"] .step-card { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 16px; padding-block: 24px; }
  body[data-template="signal"] .step-card h3 { font-size: 21px; }
  body[data-template="material"] .logo { font-size: 21px; }
  body[data-template="material"] .hero-aside { padding-block: 0 10px; }
  body[data-template="material"] .hero-figure .hero-media { aspect-ratio: 4 / 3; max-height: 380px; border-top-left-radius: 60px; }
  body[data-template="material"] .hero-summary { padding: 26px 0 26px 22px; }
  body[data-template="material"] .hero-service-link { min-height: 66px; font-size: 22px; padding-block: 15px; }
  body[data-template="material"] .pain-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body[data-template="material"] .service-tabs { gap: 0 24px; margin-bottom: 28px; }
  body[data-template="material"] .service-tabs .tab-btn { flex: 0 1 auto; min-height: 52px; font-size: 14px; }
  body[data-template="material"] .service-info h3 { font-size: 28px; }
  body[data-template="material"] .service-visual:not(:has(img)) { min-height: 240px; padding: 30px; border-top-left-radius: 40px; }
  body[data-template="material"] .service-media-wrap { border-top-left-radius: 40px; }
  body[data-template="material"] .solution-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body[data-template="material"] #solution .section-title { margin-bottom: 30px; }
  body[data-template="material"] .step-number { display: inline-block; font-size: 30px; }
  body[data-template="material"] .step-card h3 { font-size: 22px; }
  body[data-template="material"] .package-card { padding: 30px 26px; }
  body[data-template="material"] .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  body[data-template="material"] .gallery-item:nth-child(2) { padding-top: 0; }
  body[data-template="material"] .gallery-media { aspect-ratio: 4 / 3; }
}

@media (max-width: 360px) {
  body[data-template="editorial"] .hero h1 { font-size: 33px; }
  body[data-template="signal"] .hero h1 { font-size: 35px; }
  body[data-template="material"] .hero h1 { font-size: 34px; }
  body[data-template="editorial"] .hero-summary { padding: 21px; }
}

@media print {
  body[data-template="editorial"] .hero,
  body[data-template="material"] .hero,
  body[data-template="material"] #solution { color: #000; background: #fff; }
  body[data-template="editorial"] .hero h1,
  body[data-template="editorial"] .hero h1 em,
  body[data-template="editorial"] .hero .description,
  body[data-template="editorial"] .hero .hero-desc,
  body[data-template="editorial"] .hero-eyebrow,
  body[data-template="editorial"] .hero .stat-number,
  body[data-template="editorial"] .hero .stat-label,
  body[data-template="material"] .hero h1,
  body[data-template="material"] .hero h1 em,
  body[data-template="material"] .hero .description,
  body[data-template="material"] .hero .hero-desc,
  body[data-template="material"] .hero-eyebrow,
  body[data-template="material"] .hero .stat-number,
  body[data-template="material"] .hero .stat-label,
  body[data-template="material"] #solution .section-title > p,
  body[data-template="material"] #solution .step-number,
  body[data-template="material"] #solution .step-card p { color: #000; }
  body[data-template="signal"] #services .container,
  body[data-template="signal"] #solution .container { display: block; }
  body[data-template="signal"] .service-content { margin-top: 28px; }
}

/* ===== 扩展模块：团队 / 资质 / FAQ / 合规说明 ===== */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo img{height:50px;width:auto;display:block}
.logo span{font-size:17px;font-weight:700;letter-spacing:.01em}
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.team-card{padding:clamp(24px,3vw,34px);border:1px solid var(--line-color);border-radius:var(--radius);background:var(--surface-color)}
.team-initial{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--secondary-color);color:var(--on-primary);font-size:21px;font-weight:700;margin-bottom:16px}
.team-card h3{margin:0;font-size:22px;line-height:1.3}
.team-role{margin:4px 0 0;color:var(--primary-color);font-size:13px;font-weight:700;letter-spacing:.06em}
.team-title{margin:8px 0 14px;color:var(--muted-text);font-size:13.5px}
.team-credentials{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 16px}
.team-credentials li{font-size:12px;line-height:1.5;padding:5px 10px;border:1px solid var(--line-color);border-radius:999px;background:var(--background-color)}
.team-exp{margin:0;color:var(--muted-text);font-size:14px}
.credential-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.credential-item{padding:20px;border:1px solid var(--line-color);border-radius:var(--radius);background:var(--background-color)}
.credential-item h3{margin:0 0 8px;font-size:15px;line-height:1.55}
.credential-item p{margin:0;color:var(--muted-text);font-size:12.5px;line-height:1.7}
.credential-code{display:block;margin-top:10px;font-size:11.5px;color:var(--muted-text);word-break:break-word;font-variant-numeric:tabular-nums}
.credential-note{margin:18px 0 0;color:var(--muted-text);font-size:12.5px;line-height:1.75}
.faq-groups{display:grid;gap:clamp(26px,3vw,38px)}
.faq-group h3{margin:0 0 10px;font-size:14px;letter-spacing:.1em;color:var(--primary-color)}
.faq-item{border-bottom:1px solid var(--line-color)}
.faq-item summary{position:relative;cursor:pointer;padding:16px 36px 16px 0;font-weight:600;font-size:15.5px;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:20px;line-height:1;color:var(--primary-color)}
.faq-item[open] summary::after{content:"‘2"}
.faq-item summary:focus-visible{outline:3px solid var(--primary-color);outline-offset:4px;border-radius:4px}
.faq-item p{margin:0 0 18px;color:var(--muted-text);font-size:14px;max-width:74ch}
.compliance-note{margin:26px 0 0;padding:16px 18px;border-left:3px solid var(--primary-color);background:var(--surface-color);color:var(--muted-text);font-size:12.5px;line-height:1.8;border-radius:0 var(--radius) var(--radius) 0}
.footer-compliance{margin:10px 0 0;max-width:82ch;color:var(--muted-text);font-size:12px;line-height:1.8}
@media(max-width:980px){.team-grid{grid-template-columns:1fr}.credential-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.credential-grid{grid-template-columns:1fr}.team-card{padding:22px 18px}}


/* ===== 品牌大事记：横向滚屏时间轴（配原页图） ===== */
.ms-shell{position:relative;margin-top:8px}
.ms-track{display:flex;gap:18px;list-style:none;margin:0;padding:30px 2px 18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--line-color);-webkit-overflow-scrolling:touch;cursor:grab}
.ms-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.ms-track::-webkit-scrollbar{height:8px}
.ms-track::-webkit-scrollbar-track{background:var(--line-color);border-radius:999px}
.ms-track::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:999px}
.ms-track:focus-visible{outline:3px solid var(--primary-color);outline-offset:4px;border-radius:6px}
.ms-item{position:relative;flex:0 0 clamp(288px,26vw,344px);scroll-snap-align:start;background:var(--surface-color);border:1px solid var(--line-color);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.ms-item::before{content:"";position:absolute;top:15px;left:-19px;right:0;height:2px;background:var(--line-color);z-index:2}
.ms-item:first-child::before{left:0}
.ms-dot{position:absolute;top:10px;left:20px;width:12px;height:12px;border-radius:50%;background:var(--primary-color);box-shadow:0 0 0 4px var(--background-color);z-index:3}
.ms-media{position:relative;display:block;padding:0;border:0;background:var(--surface-alt);cursor:zoom-in;overflow:hidden}
.ms-media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .45s var(--ease, ease)}
.ms-item:hover .ms-media img{transform:scale(1.04)}
.ms-zoom{position:absolute;right:10px;bottom:10px;padding:5px 10px;border-radius:999px;background:rgba(58,53,47,.72);color:#F5F2ED;font-size:12px;letter-spacing:.04em;opacity:0;transition:opacity .2s}
.ms-item:hover .ms-zoom,.ms-media:focus-visible .ms-zoom{opacity:1}
.ms-media:focus-visible{outline:3px solid var(--primary-color);outline-offset:-3px}
.ms-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.ms-year{font-size:clamp(24px,2.2vw,29px);font-weight:800;line-height:1;color:var(--primary-color);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ms-item h3{margin:0;font-size:16px;line-height:1.5;font-weight:700}
.ms-item p{margin:0;font-size:13px;line-height:1.8;color:var(--muted-text);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ms-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--surface-color);border:1px solid var(--line-color);color:var(--primary-color);font-size:22px;line-height:1;cursor:pointer;z-index:4;box-shadow:0 6px 18px rgba(58,53,47,.12);transition:opacity .2s,border-color .2s}
.ms-nav:hover{border-color:var(--primary-color)}
.ms-nav:disabled{opacity:.35;cursor:default}
.ms-prev{left:-14px}
.ms-next{right:-14px}
.ms-lightbox{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(31,28,25,.88)}
.ms-lightbox[hidden]{display:none}
.ms-lightbox figure{margin:0;max-width:min(1100px,92vw);text-align:center}
.ms-lightbox img{max-width:100%;max-height:76vh;width:auto;height:auto;border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.45);background:#fff}
.ms-lightbox figcaption{margin-top:14px;color:#F5F2ED;font-size:14px;line-height:1.7}
.ms-lb-close,.ms-lb-prev,.ms-lb-next{position:absolute;background:rgba(245,242,237,.12);border:1px solid rgba(245,242,237,.35);color:#F5F2ED;border-radius:50%;width:46px;height:46px;font-size:24px;line-height:1;cursor:pointer}
.ms-lb-close{top:20px;right:20px}
.ms-lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.ms-lb-next{right:20px;top:50%;transform:translateY(-50%)}
@media(max-width:900px){.ms-nav{display:none}.ms-item{flex-basis:80%}.ms-lb-prev,.ms-lb-next{display:none}}


/* ===== 我们的环境：横向滚动图廊 ===== */
.env{padding-top:0;overflow-x:clip}
.env-hero{position:relative;width:auto;margin-inline:calc(50% - 50vw);margin-bottom:clamp(34px,3.6vw,56px);background:var(--surface-alt);overflow:hidden}
.env-hero-img{display:block;width:100%;height:clamp(230px,34vw,480px);object-fit:cover;object-position:center 50%}
.env-hero-tag{position:absolute;right:clamp(12px,3vw,32px);bottom:14px;padding:6px 14px;border-radius:999px;background:rgba(58,53,47,.62);color:#F5F2ED;font-size:12.5px;letter-spacing:.06em;backdrop-filter:blur(2px)}
.env-head{display:flex;align-items:center;justify-content:center;gap:16px}
.env-mark{width:46px;height:46px;border-radius:8px;display:block}
.env-en{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(19px,2.1vw,26px);letter-spacing:.26em;color:var(--text-color)}
.env-title{margin:12px 0 0;text-align:center;font-family:"Songti SC","Noto Serif SC",Georgia,serif;font-weight:600;font-size:clamp(30px,4.2vw,52px);letter-spacing:.14em;color:var(--text-color)}
.env-desc{max-width:52em;margin:16px auto 0;text-align:center;color:var(--muted-text);font-size:14.5px;line-height:1.95}
.env-rail-wrap{position:relative;margin-top:clamp(26px,3.2vw,44px)}
.env-rail{display:flex;gap:clamp(12px,1.4vw,18px);list-style:none;margin:0;padding:0 2px 14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--line-color);cursor:grab;-webkit-overflow-scrolling:touch}
.env-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.env-rail::-webkit-scrollbar{height:6px}
.env-rail::-webkit-scrollbar-track{background:var(--line-color);border-radius:999px}
.env-rail::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:999px}
.env-rail:focus-visible{outline:3px solid var(--primary-color);outline-offset:4px;border-radius:6px}
.env-card{flex:0 0 clamp(276px,30vw,404px);scroll-snap-align:start;background:var(--surface-color);border:1px solid var(--line-color);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.env-media{display:block;width:100%;padding:0;border:0;background:var(--surface-alt);cursor:zoom-in;overflow:hidden}
.env-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.env-card:hover .env-media img{transform:scale(1.03)}
.env-media:focus-visible{outline:3px solid var(--primary-color);outline-offset:-3px}
.env-card-body{padding:15px 16px 17px}
.env-card h3{margin:0;font-size:15.5px;font-weight:700;color:var(--text-color)}
.env-card p{margin:6px 0 0;font-size:13px;line-height:1.75;color:var(--muted-text)}
.env-nav{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--surface-color);border:1px solid var(--line-color);color:var(--primary-color);font-size:21px;line-height:1;cursor:pointer;z-index:3;box-shadow:0 6px 18px rgba(58,53,47,.12);transition:opacity .2s,border-color .2s}
.env-nav:hover{border-color:var(--primary-color)}
.env-nav:disabled{opacity:.35;cursor:default}
.env-prev{left:-14px}
.env-next{right:-14px}
.env-hint{margin:12px 0 0;text-align:center;color:var(--muted-text);font-size:12.5px;letter-spacing:.04em}
@media(max-width:900px){
  .env-nav{display:none}
  .env-hero-img{height:clamp(200px,52vw,320px)}
  .env-card{flex-basis:80%}
  .env-mark{width:38px;height:38px}
  .env-title{letter-spacing:.1em}
}

/* Team life: a horizontal wall of real team photographs. */
.tl-head { max-width: 760px; }
.tl-shell { position: relative; margin-top: clamp(24px, 3vw, 40px); }
.tl-track {
  display: flex; gap: clamp(12px, 1.4vw, 18px);
  list-style: none; margin: 0; padding: 6px 2px 18px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--line-color);
  cursor: grab; -webkit-overflow-scrolling: touch;
}
.tl-track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.tl-track::-webkit-scrollbar { height: 6px; }
.tl-track::-webkit-scrollbar-track { background: var(--line-color); border-radius: 999px; }
.tl-track::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 999px; }
.tl-track:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 4px; border-radius: 6px; }
.tl-card {
  flex: 0 0 clamp(268px, 29vw, 396px); margin: 0;
  scroll-snap-align: start;
  background: var(--surface-color); border: 1px solid var(--line-color);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.tl-media {
  display: block; width: 100%; padding: 0; border: 0;
  background: var(--surface-alt); cursor: zoom-in; overflow: hidden;
}
.tl-media img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .5s ease;
}
.tl-card:hover .tl-media img { transform: scale(1.03); }
.tl-media:focus-visible { outline: 3px solid var(--primary-color); outline-offset: -3px; }
.tl-body { padding: 15px 16px 18px; }
.tl-body h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text-color); }
.tl-body p { margin: 6px 0 0; font-size: 13px; line-height: 1.75; color: var(--muted-text); }
.tl-nav {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-color); border: 1px solid var(--line-color);
  color: var(--primary-color); font-size: 21px; line-height: 1;
  cursor: pointer; z-index: 3;
  box-shadow: 0 6px 18px rgba(58,53,47,.12);
  transition: opacity .2s, border-color .2s;
}
.tl-nav:hover { border-color: var(--primary-color); }
.tl-nav:disabled { opacity: .35; cursor: default; }
.tl-prev { left: -14px; }
.tl-next { right: -14px; }
.tl-hint { margin: 10px 0 0; text-align: center; color: var(--muted-text); font-size: 12.5px; letter-spacing: .04em; }
.tl-lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: clamp(16px, 4vw, 56px);
  background: rgba(31,28,25,.9);
}
.tl-lightbox[hidden] { display: none; }
.tl-lightbox figure { margin: 0; max-width: min(1200px, 94vw); text-align: center; }
.tl-lightbox img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.45); background: #fff;
}
.tl-lightbox figcaption { margin-top: 14px; color: #F5F2ED; font-size: 14px; line-height: 1.75; }
.tl-lb-close, .tl-lb-prev, .tl-lb-next {
  position: absolute; background: rgba(245,242,237,.12);
  border: 1px solid rgba(245,242,237,.35); color: #F5F2ED;
  border-radius: 50%; width: 46px; height: 46px; font-size: 24px;
  line-height: 1; cursor: pointer;
}
.tl-lb-close { top: 20px; right: 20px; }
.tl-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.tl-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) {
  .tl-nav { display: none; }
  .tl-card { flex-basis: 80%; }
}

/* ===== 林醫生门店地址 ===== */
.stores{background:var(--surface-alt);border-top:1px solid var(--line-color)}
.stores-network{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin:0 0 26px;padding:16px 22px;border:1px solid var(--line-color);border-radius:var(--radius);background:var(--surface-color)}
.stores-net-item{color:var(--muted-text);font-size:13px;line-height:1.5}
.stores-net-item strong{margin-right:5px;color:var(--text-color);font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.stores-net-call{margin-left:auto}
.stores-net-call a{color:var(--primary-color);font-size:13px;text-decoration:none;border-bottom:1px solid var(--line-color);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.stores-net-call a:hover{color:var(--secondary-color);border-color:var(--primary-color)}
.stores-tabs{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.stores-tabs::-webkit-scrollbar{height:4px}
.stores-tabs::-webkit-scrollbar-thumb{background:var(--line-color);border-radius:2px}
.stores-tab{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:6px;padding:9px 16px;border:1px solid var(--line-color);border-radius:999px;background:var(--surface-color);color:var(--muted-text);font-family:inherit;font-size:13.5px;line-height:1.4;cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.stores-tab:hover{color:var(--text-color);border-color:var(--primary-color)}
.stores-tab.is-active{background:var(--text-color);border-color:var(--text-color);color:var(--on-inverse)}
.stores-tab-count{font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.72}
.stores-tab.is-active .stores-tab-count{opacity:.85}
.store-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.store-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid var(--line-color);border-radius:var(--radius);background:var(--surface-color);transition:border-color .2s ease,background-color .2s ease}
.store-item-main{flex:1 1 auto;min-width:0}
.store-item:hover{border-color:var(--primary-color);background:var(--surface-alt)}
.store-item-main{min-width:0}
.store-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:15.5px;font-weight:500;line-height:1.5;color:var(--text-color)}
.store-type{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:400;letter-spacing:.02em;line-height:1.6}
.store-addr{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;color:var(--muted-text);font-size:12.5px;line-height:1.7}
.store-ico{flex:0 0 auto;color:var(--icon-color);font-size:12px;line-height:1.9}
.store-addr-text{min-width:0}
.store-item-side{flex:0 0 auto}
.store-call{display:inline-block;padding:8px 16px;border:1px solid var(--primary-color);border-radius:999px;color:var(--primary-color);font-size:12.5px;line-height:1.4;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.stores-planning{margin-top:28px;padding-top:24px;border-top:1px dashed rgba(154,67,38,.30)}
.stores-planning .store-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.stores-planning-title{margin:0;font-size:16px;font-weight:500;letter-spacing:.02em;color:var(--text-color)}
.stores-planning-desc{margin:7px 0 16px;color:var(--muted-text);font-size:13px;line-height:1.75}
.store-type-planning{background:rgba(154,67,38,.09);color:#9A4326}
.store-item-planning{border-style:dashed;background:var(--surface-alt)}
.store-call:hover{background:var(--primary-color);color:var(--on-primary)}
.stores-note{margin:20px 0 0;color:var(--muted-text);font-size:12.5px;line-height:1.8}
.stores-panel-title{display:none}
@media (max-width:1100px){
.stores-planning .store-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
.store-list{grid-template-columns:1fr}
.stores-planning .store-list{grid-template-columns:1fr}
.stores-net-call{margin-left:0;width:100%}
/* 手机端（含平板窄屏）：取消城市标签切换，所有城市门店一次性纵向平铺 */
.stores-tabs{display:none}
.stores-panel,.stores-panel[hidden]{display:block}
.stores-panel-title{display:flex;align-items:baseline;gap:8px;margin:26px 0 12px;font-size:15.5px;font-weight:500;line-height:1.4;letter-spacing:.02em;color:var(--text-color)}
.stores-panel-title span{font-size:11.5px;font-weight:400;color:var(--muted-text);font-variant-numeric:tabular-nums}
.stores-panel:first-of-type .stores-panel-title{margin-top:2px}
.stores-panel-title::before{content:"";width:2px;height:13px;background:var(--primary-color);border-radius:1px;align-self:center;flex:0 0 auto}
}
@media (max-width:600px){
.store-item{flex-direction:column;align-items:flex-start;gap:12px}
.store-item-side{width:100%}
.store-call{display:block;text-align:center}
}

/* ===== 拆分页共用：面包屑 / 二级标题 / 链接列表 / CTA / 更新时间 ===== */
.crumbs{margin:0 0 18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;font-size:12.5px;color:var(--muted-text)}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"›";color:var(--line-color);font-size:13px}
.crumbs a{color:var(--muted-text);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease}
.crumbs a:hover{color:var(--primary-color);border-color:var(--primary-color)}
.crumbs li[aria-current="page"]{color:var(--text-color)}
.page-h2{margin:34px 0 14px;font-size:17px;font-weight:500;letter-spacing:.02em;color:var(--text-color)}
.page-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.page-links li{margin:0}
.page-links a{display:block;padding:13px 16px;border:1px solid var(--line-color);border-radius:var(--radius);background:var(--surface-color);color:var(--text-color);font-size:13.5px;line-height:1.5;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
.page-links a:hover{border-color:var(--primary-color);background:var(--surface-alt)}
.page-answer{margin:0;padding:20px 22px;border:1px solid var(--line-color);border-radius:var(--radius);background:var(--surface-color)}
.page-answer p{margin:0;color:var(--text-color);font-size:14.5px;line-height:1.9}
.page-note{margin:16px 0 0;color:var(--muted-text);font-size:12.5px;line-height:1.8}
.page-cta{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 18px}
.page-updated{margin:10px 0 0;color:var(--muted-text);font-size:12px;letter-spacing:.02em}
@media (max-width:900px){
.page-links{grid-template-columns:1fr}
.crumbs{font-size:12px}
}