/* ==========================================================================
   COMPONENTS.CSS — 组件层
   所有组件均从 tokens.css 取值，禁止硬编码数值。
   依赖：tokens.css, base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 按钮 Button
   原则：方角（2px 圆角）、大字距、细描边。主按钮实心，次按钮描边。
        按钮内不放大字重，靠字距与内边距体现精致。
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 3rem;
  padding-inline: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-xs);
  border: var(--stroke-hairline) solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

/* 主按钮：黄铜底 + 深色字（点缀性使用，每屏不超过一个） */
.btn--primary {
  background: var(--color-accent-500);
  color: var(--color-neutral-950);
  border-color: var(--color-accent-500);
}
.btn--primary:hover {
  background: var(--color-accent-300);
  border-color: var(--color-accent-300);
}

/* 次按钮：描边，透明底 */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--text-primary);
  background: rgba(242, 239, 234, 0.05);
}

/* 反色按钮：用于深色沉浸区内的主操作 */
.btn--invert {
  background: var(--bg-inverse);
  color: var(--text-on-light);
  border-color: var(--bg-inverse);
}
.btn--invert:hover { background: var(--color-accent-500); border-color: var(--color-accent-500); }

/* 文字按钮：带下划线动效，用于「查看全部」这类次级入口 */
.btn--text {
  height: auto;
  padding: 0;
  gap: var(--space-2);
  color: var(--text-primary);
  border: 0;
  border-radius: 0;
  position: relative;
}
.btn--text::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--border-strong);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn--text:hover::after {
  background: var(--color-accent-500);
  transform-origin: left;
}

/* 箭头图标：悬停右移，克制的一步 */
.btn__arrow {
  width: 1rem; height: 1rem;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--block { width: 100%; }

@media (min-width: 768px) {
  .btn { height: 3.25rem; padding-inline: var(--space-7); }
}

/* --------------------------------------------------------------------------
   2. 顶部导航 Header
   原则：透明起始，滚动后加毛玻璃底与发丝线；导航项大字距小字号。
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
  border-bottom: var(--stroke-hairline) solid transparent;
}
@media (min-width: 768px) { .header { height: var(--header-h-md); } }

/* 滚动后状态由 JS 添加 .is-scrolled */
.header.is-scrolled {
  background: rgba(20, 19, 17, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--border-hairline);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

/* Logo：文字标 + 可选字标。字距拉开显高端 */
.header__logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.header__logo-cn {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.1;
  letter-spacing: 0.14em;
  color: var(--text-primary);
}
.header__logo-en {
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* 主导航 */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--space-8); }
}

.nav__link {
  position: relative;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-block: var(--space-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--color-accent-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text-primary); }
.nav__link.is-active::after { transform: scaleX(1); }

/* 右侧操作区 */
.header__actions { display: flex; align-items: center; gap: var(--space-4); }

/* 移动端菜单按钮（汉堡）：两线渐变，克制 */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.menu-toggle__bar {
  display: block;
  width: 100%; height: 1px;
  background: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* 移动端抽屉菜单：全屏，深色，大字号排版 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg-immersive);
  padding: calc(var(--header-h) + var(--space-8)) var(--gutter) var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-5);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.drawer__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}
.drawer__contact { display: flex; flex-direction: column; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   3. 首屏 Hero
   原则：全屏沉浸。文字压在渐变遮罩上；底部一条发丝线 + 元信息行。
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88vh;
  min-height: 88dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-immersive);
}
@media (min-width: 1024px) { .hero { min-height: 92vh; min-height: 92dvh; } }

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.82);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 11, 10, 0.92) 0%,
    rgba(12, 11, 10, 0.55) 38%,
    rgba(12, 11, 10, 0.25) 68%,
    rgba(12, 11, 10, 0.45) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  padding-bottom: var(--space-9);
}
@media (min-width: 1024px) { .hero__inner { padding-bottom: var(--space-11); } }

.hero__eyebrow { margin-bottom: var(--space-6); }

.hero__title {
  max-width: 20ch;
  margin-bottom: var(--space-6);
  color: #F5F2ED;
}
.hero__title em {
  font-style: normal;
  color: var(--color-accent-300);
}

.hero__desc {
  max-width: 34rem;
  margin-bottom: var(--space-8);
  color: rgba(242, 239, 234, 0.72);
}

/* 首屏能力数据条：等宽数字 + 发丝线分隔 */
.hero__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid rgba(242, 239, 234, 0.16);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .hero__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}

.hero__metric-value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #F5F2ED;
  font-variant-numeric: tabular-nums;
}
.hero__metric-value sup {
  font-size: 0.5em;
  color: var(--color-accent-300);
  vertical-align: super;
  margin-left: 2px;
}
.hero__metric-label {
  margin-top: var(--space-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(242, 239, 234, 0.5);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* 首屏底部滚动提示 */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-9);
  z-index: var(--z-base);
  display: none;
}
@media (min-width: 1024px) { .hero__scroll { display: block; } }
.hero__scroll span {
  writing-mode: vertical-rl;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(242, 239, 234, 0.45);
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 3rem;
  margin: var(--space-4) auto 0;
  background: linear-gradient(to bottom, rgba(242,239,234,0.4), transparent);
}

/* --------------------------------------------------------------------------
   4. 品牌 Logo 墙
   原则：灰度 → 悬停恢复；发丝线网格分隔；不加边框卡片。
   -------------------------------------------------------------------------- */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  border-left: var(--stroke-hairline) solid var(--border-hairline);
}
@media (min-width: 640px)  { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6rem;
  padding: var(--space-5);
  border-right: var(--stroke-hairline) solid var(--border-hairline);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  transition: background-color var(--dur-base) var(--ease-out);
}

/* ---- 品牌 Logo（有图）与品牌名（回退）共用同一套尺寸约束 ----
   两者都占满同一个盒子：同样的 max-height、同样的滤色与透明度、
   同样的过渡曲线。因此两种形态的布局、间距与响应式表现完全一致。 */
.logo-wall__item img,
.logo-wall__item .logo-wall__text {
  max-height: 2rem;
  max-width: 80%;
  filter: grayscale(1) brightness(1.6);
  opacity: 0.42;
  transition: filter var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

/* Logo 图片：按原始宽高比等比缩放，不裁切、不拉伸 */
.logo-wall__img {
  width: auto;
  height: auto;
  object-fit: contain;
}

.logo-wall__text {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

.logo-wall__item:hover { background: rgba(242, 239, 234, 0.03); }
.logo-wall__item:hover img,
.logo-wall__item:hover .logo-wall__text {
  filter: none;
  opacity: 0.95;
}

/* --------------------------------------------------------------------------
   5. 项目卡片 Project Card
   原则：图为主、信息为辅；信息区用发丝线与间距分隔，不用边框盒子。
        悬停：图片极轻推近 + 标题下划线。
   -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.card__media { position: relative; }
.card__media .media { background: var(--bg-surface-alt); }

/* 卡片角标：项目类型，压在图上 */
.card__badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  height: 1.625rem;
  padding-inline: var(--space-3);
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F5F2ED;
  background: rgba(12, 11, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: var(--stroke-hairline) solid rgba(242, 239, 234, 0.18);
  border-radius: var(--radius-xs);
}

/* 卡片信息区 */
.card__body {
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card__meta-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.card__brand { color: var(--text-accent); }
.card__meta-sep {
  width: 1rem; height: 1px;
  background: var(--border-hairline);
  flex-shrink: 0;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-heading-cn);
  color: var(--text-primary);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out);
  display: inline;
}
.card:hover .card__title { background-size: 100% 1px; }

/* 卡片底部规格行：等宽数字，发丝线分隔 */
.card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.card__spec { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.card__spec-unit { font-size: 0.75em; color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   6. 能力卡片 Capability（图标 + 标题 + 描述）
   原则：上方一条发丝线，序号用等宽字体，无边框无底色。
   -------------------------------------------------------------------------- */

.cap {
  padding-top: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--dur-base) var(--ease-out);
}
.cap:hover { border-top-color: var(--border-accent); }

.cap__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--text-accent);
}
.cap__icon {
  width: 1.75rem; height: 1.75rem;
  stroke: var(--text-primary);
  stroke-width: 1;
  fill: none;
  opacity: 0.85;
}
.cap__title { color: var(--text-primary); }
.cap__desc { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   7. 服务流程 Process（横向编号步骤）
   原则：编号 + 标题 + 说明；横向发丝线贯穿，节点用黄铜圆点。
   -------------------------------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
@media (min-width: 768px)  { .process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); } }

.process__step {
  position: relative;
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}
/* 节点圆点：黄铜，压在顶部线上 */
.process__step::before {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent-500);
}
.process__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.process__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-subhead);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.process__desc { font-size: var(--fs-caption); line-height: var(--lh-label); color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   8. 规格数据卡 Spec Grid（案例详情页「项目概况卡」）
   原则：2×4 网格；每格上方发丝线；字段名小字距上，值用等宽字。
   -------------------------------------------------------------------------- */

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}
@media (min-width: 768px)  { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.spec {
  padding: var(--space-5) 0;
  padding-right: var(--space-5);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .spec { padding-left: var(--space-5); }
  .spec:not(:nth-child(3n + 1)) { border-left: var(--stroke-hairline) solid var(--border-hairline); }
}
@media (min-width: 1024px) {
  .spec { padding-left: 0; border-left: 0 !important; }
  .spec:not(:nth-child(4n + 1)) {
    padding-left: var(--space-5);
    border-left: var(--stroke-hairline) solid var(--border-hairline);
  }
}

.spec__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.spec__value {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.spec__value--sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); letter-spacing: var(--ls-body); }

/* --------------------------------------------------------------------------
   9. 筛选栏 Filter Bar（案例列表页）
   原则：横向一排，细描边标签；选中态为实心浅底 + 黄铜描边。
   -------------------------------------------------------------------------- */

.filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}

.filter__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.filter__group-label {
  min-width: 4.5rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding-inline: var(--space-4);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  background: transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip.is-active {
  color: var(--text-accent);
  border-color: var(--border-accent);
  background: rgba(180, 155, 107, 0.08);
}

/* 筛选结果统计行 */
.filter__stat {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10. 表单 Form
   原则：无边框输入框——仅底部一条发丝线，聚焦时转为黄铜线。
        标签小字上置，字距拉开。整体极简，接近印刷表格。
   -------------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--space-6); }

.field { display: flex; flex-direction: column; gap: var(--space-2); position: relative; }

.field__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.field__label .is-optional {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  opacity: 0.65;
  font-weight: var(--fw-regular);
}

/* 输入控件：仅下划线 */
.input,
.textarea,
.select {
  width: 100%;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-dense);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: var(--stroke-hairline) solid var(--border-strong);
  border-radius: 0;
  transition: border-color var(--dur-base) var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder,
.textarea::placeholder { color: var(--text-tertiary); opacity: 0.55; }

.input:hover,
.textarea:hover,
.select:hover { border-bottom-color: var(--text-secondary); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-bottom-color: var(--color-accent-500);
}

/* 聚焦时标签转为强调色，形成联动反馈 */
.field:focus-within .field__label { color: var(--text-accent); }

.textarea { resize: vertical; min-height: 6rem; }

.select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2375706A' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: var(--space-6);
}
.select option { background: var(--color-neutral-800); color: var(--text-primary); }

/* 校验状态 */
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select { border-bottom-color: var(--color-danger); }
.field__error {
  font-size: var(--fs-caption);
  color: var(--color-danger);
  display: none;
}
.field.is-invalid .field__error { display: block; }

/* 选择卡（单选项目类型）：比原生 radio 更适合本视觉系统 */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
@media (min-width: 768px) { .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--border-strong); background: rgba(242, 239, 234, 0.03); }
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice__text {
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
}
/* 自绘选中标记：细描边圆 + 内部实心点 */
.choice__mark {
  width: 0.875rem; height: 0.875rem;
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.choice__mark::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--color-accent-500);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.choice:has(input:checked) {
  border-color: var(--border-accent);
  background: rgba(180, 155, 107, 0.07);
}
.choice:has(input:checked) .choice__text { color: var(--text-primary); }
.choice:has(input:checked) .choice__mark { border-color: var(--color-accent-500); }
.choice:has(input:checked) .choice__mark::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* 表单步骤指示器 */
.steps {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--dur-base) var(--ease-out);
}
.steps__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  width: 1.75rem; height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.steps__item.is-active { color: var(--text-primary); }
.steps__item.is-active .steps__num {
  border-color: var(--color-accent-500);
  color: var(--text-accent);
}
.steps__item.is-done .steps__num {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: var(--color-neutral-950);
}
.steps__line { flex: 1; height: 1px; background: var(--border-hairline); }

/* 隐私声明勾选 */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-label);
  color: var(--text-tertiary);
  cursor: pointer;
}
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent__box {
  width: 0.875rem; height: 0.875rem;
  margin-top: 0.2em;
  border: var(--stroke-hairline) solid var(--border-strong);
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.consent__box::after {
  content: "";
  position: absolute;
  left: 3px; top: 1px;
  width: 4px; height: 7px;
  border-right: 1px solid var(--color-neutral-950);
  border-bottom: 1px solid var(--color-neutral-950);
  transform: rotate(40deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.consent:has(input:checked) .consent__box {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
}
.consent:has(input:checked) .consent__box::after { transform: rotate(40deg) scale(1); }
.consent a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   11. 悬浮咨询栏 Float Contact
   原则：右侧固定竖排；桌面端为文字按钮，移动端为底部横条。
   -------------------------------------------------------------------------- */

.float-contact {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-float);
  display: none;
}
@media (min-width: 1024px) { .float-contact { display: flex; flex-direction: column; } }

.float-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  padding: var(--space-4) var(--space-3);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(20, 19, 17, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-right: 0;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.float-contact__btn + .float-contact__btn { border-top: 0; }
.float-contact__btn:hover {
  color: var(--text-accent);
  background: rgba(30, 28, 25, 0.94);
  border-color: var(--border-accent);
}

/* 移动端底部条 */
.float-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-float);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(20, 19, 17, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1024px) { .float-bar { display: none; } }

.float-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  border-right: var(--stroke-hairline) solid var(--border-hairline);
}
.float-bar__item:last-child { border-right: 0; }
.float-bar__item svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; stroke-width: 1.2; fill: none; }
.float-bar__item--accent { color: var(--text-accent); }
.float-bar__item:active { background: rgba(242, 239, 234, 0.05); }

/* --------------------------------------------------------------------------
   12. 页脚 Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bg-immersive);
  padding-top: var(--space-11);
  padding-bottom: calc(var(--space-7) + 4rem);  /* 避让移动端底部条 */
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}
@media (min-width: 1024px) { .footer { padding-bottom: var(--space-9); } }

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-9);
}
@media (min-width: 768px)  { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); } }

.footer__brand { display: flex; flex-direction: column; gap: var(--space-5); }
.footer__logo-cn {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.14em;
  color: var(--text-primary);
}
.footer__logo-en {
  font-size: 0.6875rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.footer__desc { font-size: var(--fs-caption); line-height: var(--lh-label); color: var(--text-tertiary); max-width: 26rem; }

.footer__col-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__link {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__link:hover { color: var(--text-primary); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}
@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   13. 面包屑 Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb a { transition: color var(--dur-fast) var(--ease-out); }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb__current { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   14. 灯箱 Lightbox
   原则：全屏深色，图片居中，细线控件，键盘可达。
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 7, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__stage {
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  filter: none;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(242, 239, 234, 0.7);
  border: var(--stroke-hairline) solid var(--border-hairline);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lightbox__close { top: var(--space-6); right: var(--space-6); width: 2.75rem; height: 2.75rem; }
.lightbox__close:hover,
.lightbox__nav:hover { color: var(--text-primary); border-color: var(--border-strong); }

.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lightbox__nav--prev { left: var(--space-6); }
.lightbox__nav--next { right: var(--space-6); }
.lightbox__close svg,
.lightbox__nav svg { width: 1.125rem; height: 1.125rem; stroke: currentColor; stroke-width: 1.2; fill: none; }

.lightbox__caption {
  position: absolute;
  bottom: var(--space-6);
  left: 0; right: 0;
  text-align: center;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: rgba(242, 239, 234, 0.5);
}

/* --------------------------------------------------------------------------
   15. 分页 / 加载更多
   -------------------------------------------------------------------------- */

.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-9);
}
.load-more__count {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   16. 页面头 Page Header（内页顶部）
   -------------------------------------------------------------------------- */

.page-head {
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .page-head { padding-top: calc(var(--header-h-md) + var(--space-11)); padding-bottom: var(--space-9); }
}
.page-head__breadcrumb { margin-bottom: var(--space-6); }
.page-head__title { max-width: 24ch; margin-bottom: var(--space-5); }
.page-head__desc { max-width: 38rem; }
.page-head--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .page-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .page-head--split .page-head__desc { text-align: right; max-width: 28rem; }
}

/* --------------------------------------------------------------------------
   17. 案例详情页 Hero（沉浸式，带项目标题压图）
   -------------------------------------------------------------------------- */

.project-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-immersive);
}
@media (min-width: 1024px) { .project-hero { min-height: 80vh; } }

.project-hero__media { position: absolute; inset: 0; }
.project-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.8);
}
.project-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 11, 10, 0.95) 0%,
    rgba(12, 11, 10, 0.5) 42%,
    rgba(12, 11, 10, 0.2) 75%
  );
}
.project-hero__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  padding-bottom: var(--space-9);
}
.project-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(242, 239, 234, 0.62);
}
.project-hero__title { max-width: 22ch; color: #F5F2ED; }

/* --------------------------------------------------------------------------
   18. 空间分区图集 Gallery
   原则：按空间分区；分区标题 + 网格；点击进灯箱。
   -------------------------------------------------------------------------- */

.gallery-group { margin-bottom: var(--space-9); }
.gallery-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}
.gallery-group__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-heading-cn);
  color: var(--text-primary);
}
.gallery-group__count {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 首个图块跨列，形成视觉动线的起点 */
.gallery-grid--feature > :first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface-alt);
  cursor: zoom-in;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: var(--ratio-landscape);
  filter: var(--img-filter);
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.gallery-item:hover img { transform: scale(var(--img-zoom)); filter: saturate(1); }
.gallery-item__num {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: rgba(242, 239, 234, 0.8);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.gallery-item:hover .gallery-item__num { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   19. 施工记录时间线 Timeline
   -------------------------------------------------------------------------- */

.timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: var(--space-6);
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: var(--border-hairline);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--space-8);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1);
  top: 0.45rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent-500);
  transform: translateX(-2px);
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.timeline__title { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: 0.02em; color: var(--text-primary); margin-bottom: var(--space-4); }
.timeline__text { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--text-tertiary); margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   20. 团队卡片 Member
   -------------------------------------------------------------------------- */

.member { display: flex; flex-direction: column; gap: var(--space-4); }
.member__photo {
  aspect-ratio: var(--ratio-portrait);
  overflow: hidden;
  background: var(--bg-surface-alt);
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.member:hover .member__photo img { filter: grayscale(0.2) contrast(1.02); transform: scale(1.03); }
.member__name { font-family: var(--font-display); font-size: var(--fs-h4); letter-spacing: 0.06em; color: var(--text-primary); }
.member__role { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-accent); }
.member__bio { font-size: var(--fs-caption); line-height: var(--lh-label); color: var(--text-tertiary); }
.member__projects {
  padding-top: var(--space-3);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   21. 文章卡片 Article Card
   -------------------------------------------------------------------------- */

.article-card { display: flex; flex-direction: column; gap: var(--space-4); }
.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.article-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-heading-cn);
  color: var(--text-primary);
}
.article-card__excerpt { font-size: var(--fs-body-sm); line-height: var(--lh-dense); color: var(--text-tertiary); }

/* --------------------------------------------------------------------------
   22. CTA 区块
   -------------------------------------------------------------------------- */

.cta-block {
  position: relative;
  padding-block: var(--space-11);
  background: var(--bg-surface);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
  overflow: hidden;
}
.cta-block__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .cta-block__inner { grid-template-columns: 1fr 1fr; gap: var(--space-11); align-items: start; }
}
.cta-block__title { max-width: 18ch; margin-bottom: var(--space-5); }
.cta-block__form { display: flex; flex-direction: column; gap: var(--space-5); }
.cta-block__row { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 640px) { .cta-block__row { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   23. 空状态 / 加载
   -------------------------------------------------------------------------- */

.empty-state {
  padding-block: var(--space-11);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.empty-state__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); }
.empty-state__desc { font-size: var(--fs-body-sm); color: var(--text-tertiary); max-width: 28rem; }

/* ==========================================================================
   24. 页面区块补全（数据驱动渲染所需）
   --------------------------------------------------------------------------
   说明：本段全部使用 var(--token)，不引入任何新色值/字号/间距常量。
        目的是让 site.js 渲染出的 DOM 与既有组件语言完全一致。
   ========================================================================== */

/* ---------- 24.1 页头 Logo（支持图片 Logo） ---------- */

.header__logo-img {
  height: 2rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}
@media (min-width: 768px) { .header__logo-img { height: 2.25rem; max-width: 11rem; } }

.header__logo-text { display: flex; flex-direction: column; gap: 2px; }

/* 有图片 Logo 时，文字标退为副标 */
[data-brand] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__logo-img {
  height: 1.75rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  margin-bottom: var(--space-3);
  opacity: 0.9;
}

/* ---------- 24.2 首屏补充 ---------- */

.hero__title > br + * { display: block; }

/* ---------- 24.3 项目卡片：摘要行 ---------- */

.card__excerpt {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-label);
  color: var(--text-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 24.4 案例筛选栏（数据驱动版） ---------- */

.filter__label {
  min-width: 4.5rem;
  color: var(--text-tertiary);
}
@media (min-width: 768px) { .filter__label { min-width: 5.5rem; } }

.filter__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.filter__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}
.filter__count { color: var(--text-tertiary); }
.filter__count span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ---------- 24.5 服务模块（服务流程页） ---------- */

.service-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-9);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}
@media (min-width: 1024px) {
  .service-block {
    grid-template-columns: 22% minmax(0, 1fr);
    gap: var(--space-8);
    padding-block: var(--space-10);
  }
}
.service-block:last-child { border-bottom: var(--stroke-hairline) solid var(--border-hairline); }

.service-block__head { display: flex; gap: var(--space-4); align-items: flex-start; }
@media (min-width: 1024px) { .service-block__head { flex-direction: column; gap: var(--space-4); } }

.service-block__no {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  color: var(--text-accent);
  font-variant-numeric: tabular-nums;
}

.service-block__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-cn);
  font-weight: 400;
  color: var(--text-primary);
}
.service-block__subtitle {
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0.01em;
}

.service-block__body { display: flex; flex-direction: column; gap: var(--space-6); }

.service-block__summary {
  max-width: 52ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.service-block__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 768px) { .service-block__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

.service-block__col-title { color: var(--text-tertiary); margin-bottom: var(--space-4); }
.service-block__value {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-dense);
  color: var(--text-secondary);
}

/* 勾选式清单（细线分隔，不用图标盒子） */
.list-check { display: flex; flex-direction: column; }
.list-check li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-dense);
  color: var(--text-secondary);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}
.list-check li:last-child { border-bottom: 0; }
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-3) + 0.55em);
  width: 0.75rem;
  height: var(--stroke-hairline);
  background: var(--color-accent-500);
}

/* ---------- 24.6 团队成员 ---------- */

.member {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  transition: border-top-color var(--dur-base) var(--ease-out);
}
.member:hover { border-top-color: var(--border-accent); }

.member__head { display: flex; flex-direction: column; gap: var(--space-2); }
.member__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  border-bottom: var(--stroke-hairline) solid var(--border-hairline);
}
.member__meta > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.member__meta dt {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.member__meta dd { font-size: var(--fs-caption); color: var(--text-secondary); text-align: right; }

.member__text {
  font-size: var(--fs-caption);
  line-height: var(--lh-label);
  color: var(--text-tertiary);
}

/* ---------- 24.7 资讯卡片补充 ---------- */

.article-card__date { color: var(--text-tertiary); }

.article-card__title {
  transition: color var(--dur-base) var(--ease-out);
}
.article-card:hover .article-card__title { color: var(--text-accent); }

.article-card__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--text-tertiary);
  border-top: var(--stroke-hairline) solid var(--border-hairline);
}

/* ---------- 24.8 文章详情元信息 ---------- */

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
}

/* ---------- 24.9 联系卡片 ---------- */

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: var(--stroke-hairline) solid var(--border-hairline);
  transition: border-top-color var(--dur-base) var(--ease-out);
}
.contact-card:hover { border-top-color: var(--border-accent); }

.contact-card__label { color: var(--text-tertiary); }
.contact-card__value {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.contact-card__note { color: var(--text-tertiary); }

.address-item { display: flex; flex-direction: column; gap: var(--space-2); }
.address-item__value {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-dense);
  color: var(--text-secondary);
}

/* ---------- 24.10 常见问题（原生 details） ---------- */

.faq { border-top: var(--stroke-hairline) solid var(--border-hairline); }

.faq__item { border-bottom: var(--stroke-hairline) solid var(--border-hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  line-height: var(--lh-dense);
  color: var(--text-primary);
  transition: color var(--dur-base) var(--ease-out);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 0.75px solid var(--text-tertiary);
  border-bottom: 0.75px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq__q:hover { color: var(--text-accent); }

.faq__a {
  padding-bottom: var(--space-6);
  max-width: 68ch;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-tertiary);
}

/* ---------- 24.11 关于我们：正文区 ---------- */

.about-intro__lead {
  max-width: 46ch;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--text-secondary);
}

/* ---------- 24.12 空状态补充 ---------- */
.empty-state--grid { grid-column: 1 / -1; }

/* ---------- 24.13 后台入口提示（前台右下角小链接，低调） ---------- */
.admin-hint {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-float);
  display: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.admin-hint:hover { color: var(--text-secondary); border-color: var(--border-strong); }
@media (min-width: 1024px) { .admin-hint { display: inline-block; } }