@charset "utf-8";
/* ==========================================================================
   杭州永耀环境工程有限公司 官网设计系统  york.css
   制定依据：《杭州永耀官网改版规划书 V2.0》附录 G 视觉设计系统
   --------------------------------------------------------------------------
   设计原则（附录 G1，优先级由高到低）
     1. 专业克制优于热闹 —— 传递"稳定、可靠、可追溯"，不堆砌动效与高饱和色块
     2. 信息优先于装饰 —— 每个元素都要回答"它帮用户做了哪个决策"
     3. 证据可视化      —— 资质证书、授权牌、实拍以一致规格形成"证据墙"观感
     4. 移动优先        —— 先按 375px 出稿，再向上适配
   红线遵守清单（附录 G2 / G4 / G5 / §11.5）
     · 全站主色不超过 2 个（深蓝 + 单一暖色），强调色只用于 CTA 与关键数字
     · 禁止"红配蓝""紫配黄"等高冲突搭配
     · 禁止在资质/证书图片上叠加深色遮罩
     · 避免大面积高饱和色块、避免闪烁动效
     · 正文与背景对比度 >= 4.5:1（全站色值均已核算）
     · 正文 >= 16px，行高 1.7–1.8，正文容器 <= 760px
     · 字号层级恰好 4 级，不自创第 5 级
     · 点击区域 >= 44x44px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计 token
   -------------------------------------------------------------------------- */
:root {
  /* --- 色彩 --- */
  --c-brand:       #0B3B6F;   /* 主色 · 约克深蓝：页头、主按钮、栏目标题 */
  --c-brand-deep:  #072A50;   /* 主色深阶：页脚、深色区块 */
  --c-brand-mid:   #14548F;   /* 主色中阶：链接 hover、次级强调 */
  --c-brand-soft:  #EAF1F8;   /* 主色极浅：选区底、标签底 */
  --c-accent:      #C8452F;   /* 强调色 · 单一暖色：仅 CTA 与关键数字 */
  --c-accent-deep: #A83521;   /* 强调色按下态 */
  --c-accent-soft: #FBEDEA;   /* 强调色极浅底：仅用于关键数字标签底 */

  /* --- 文字（对比度已核算，均 >= 4.5:1）--- */
  --c-ink:   #333333;         /* 主文字（规划书指定 #333 级别）12.6:1 */
  --c-ink-2: #5A6270;         /* 次文字 6.4:1 */
  --c-ink-3: #767E8A;         /* 弱文字（标签、版权、面包屑）4.6:1 */
  --c-ink-inv: #FFFFFF;       /* 深色底上文字 12.1:1 */

  /* --- 背景与线条 --- */
  --c-bg:      #FFFFFF;       /* 主背景 */
  --c-bg-alt:  #F5F7FA;       /* 极浅灰：与白交替形成区块节奏 */
  --c-bg-soft: #FAFBFC;       /* 更浅的卡片底 */
  --c-line:    #E2E7ED;       /* 分隔线、卡片边框 */
  --c-line-2:  #CFD8E3;       /* 较重边框、输入框 */

  /* --- 字体 --- */
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
             "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif;
  --ff-num:  "Inter", "Helvetica Neue", Arial, var(--ff-sans);

  /* --- 字号：恰好 4 级内容层级（辅助字号属组件级，不计入内容层级）--- */
  --fs-l1: clamp(26px, 4.6vw, 42px);   /* L1 页面主标题（H1，每页仅一个） */
  --fs-l2: clamp(21px, 2.8vw, 28px);   /* L2 栏目标题（H2） */
  --fs-l3: 18px;                        /* L3 小标题（H3） */
  --fs-l4: 16px;                        /* L4 正文（下限 16px，不下探） */

  /* --- 组件级辅助字号（非内容层级）--- */
  --fs-ui:  14px;
  --fs-tag: 13px;

  /* --- 行高 --- */
  --lh-tight: 1.3;   /* 标题 */
  --lh-mid:   1.6;   /* 小标题、列表 */
  --lh-body:  1.75;  /* 中文正文（规划书要求 1.7–1.8） */

  /* --- 字重 --- */
  --fw-reg: 400;
  --fw-med: 500;
  --fw-bold: 700;

  /* --- 间距：8pt 栅格 --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* --- 版心与容器 --- */
  --w-page:  1200px;   /* 页面内容区 */
  --w-prose: 760px;    /* 正文容器上限（规划书 <5.1> 要求 <= 760px） */
  --w-wide:  1400px;   /* 首屏等满幅区块 */

  /* --- 圆角 / 阴影（克制，不用大圆角）--- */
  --r-1: 4px;
  --r-2: 6px;
  --sh-1: 0 1px 2px rgba(11, 59, 111, .06);
  --sh-2: 0 4px 16px rgba(11, 59, 111, .07);
  --sh-3: 0 8px 28px rgba(11, 59, 111, .10);

  /* --- 过渡（只做轻微反馈，不做入场动画）--- */
  --t: .2s ease;

  /* --- 页头高度 --- */
  --h-head: 72px;

  /* --- 层叠 --- */
  --z-head: 100;
  --z-drawer: 200;
  --z-top: 300;
}

/* --------------------------------------------------------------------------
   2. 重置与基础
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-l4);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; border: 0; display: block; }
/* 占位底色只加在照片类容器上；切勿全局给 img 加背景，否则透明 PNG（LOGO/图标/证书）会露出底色 */
.card-thumb, .entry-card .e-thumb, .hero-slide, .prose img, .case-card .card-thumb { background: var(--c-bg-alt); }

a { color: var(--c-brand); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--c-brand-mid); }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* 键盘焦点可见（§11.3 无障碍要求） */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-brand-mid);
  outline-offset: 2px;
}

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 跳转到主内容（无障碍） */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: var(--sp-3) var(--sp-5); background: var(--c-brand);
  color: #fff; border-radius: 0 0 var(--r-1) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. 排版：4 级内容层级
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); color: var(--c-brand); }
h1 { font-size: var(--fs-l1); line-height: var(--lh-tight); letter-spacing: -.01em; }
h2 { font-size: var(--fs-l2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-l3); line-height: var(--lh-mid); }
h4 { font-size: var(--fs-l4); line-height: var(--lh-mid); font-weight: var(--fw-med); }

strong, b { font-weight: var(--fw-bold); color: var(--c-ink); }

/* 关键数字：全站唯一允许使用强调色的文字场景 */
.num-key { color: var(--c-accent); font-weight: var(--fw-bold); font-family: var(--ff-num); }

/* 正文内容区（富文本正文：文章、产品说明、案例） */
.prose { max-width: var(--w-prose); font-size: var(--fs-l4); line-height: var(--lh-body); color: var(--c-ink); }
.prose.narrow-off { max-width: none; }
.prose h2 { margin: var(--sp-8) 0 var(--sp-4); padding-left: var(--sp-4); border-left: 4px solid var(--c-brand); }
.prose h3 { margin: var(--sp-6) 0 var(--sp-3); color: var(--c-brand); }
.prose h4 { margin: var(--sp-5) 0 var(--sp-2); }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.prose ul li { list-style: none; position: relative; padding-left: var(--sp-4); margin-bottom: var(--sp-2); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand-mid);
}
.prose ol { counter-reset: n; }
.prose ol li { list-style: none; position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3); counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; left: 0; top: .15em;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  font-size: var(--fs-tag); font-weight: var(--fw-bold);
  color: #fff; background: var(--c-brand); border-radius: 50%;
  font-family: var(--ff-num);
}
.prose img { margin: var(--sp-5) auto; border-radius: var(--r-1); }
.prose blockquote {
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt); border-left: 4px solid var(--c-brand-mid);
  color: var(--c-ink-2); border-radius: 0 var(--r-1) var(--r-1) 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-ui); }
.prose table th, .prose table td { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-line); text-align: left; }
.prose table th { background: var(--c-brand-soft); color: var(--c-brand); font-weight: var(--fw-bold); }
.prose table tr:nth-child(even) td { background: var(--c-bg-soft); }

/* 富文本表格在移动端可横向滚动，不撑破布局 */
.prose { overflow-wrap: break-word; }
.prose > div { max-width: 100%; }

/* --------------------------------------------------------------------------
   4. 布局容器与区块
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-wide { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--sp-5); }

/* 区块：白与极浅灰交替，形成节奏（附录 G2） */
.sec { padding: var(--sp-8) 0; }
.sec-alt { background: var(--c-bg-alt); }
.sec-deep { background: var(--c-brand-deep); color: var(--c-ink-inv); }
.sec-deep h1, .sec-deep h2, .sec-deep h3 { color: var(--c-ink-inv); }
.sec-tight { padding: var(--sp-7) 0; }

/* 区块标题组 */
.sec-head { margin-bottom: var(--sp-6); }
.sec-head.center { text-align: center; }
.sec-head h2 { margin-bottom: var(--sp-2); }
.sec-head .sub {
  font-size: var(--fs-l4); color: var(--c-ink-2); max-width: var(--w-prose);
}
.sec-head.center .sub { margin-left: auto; margin-right: auto; }

/* 区块尾部的"了解更多" */
.sec-more { margin-top: var(--sp-6); text-align: center; }

/* --------------------------------------------------------------------------
   5. 页头与导航
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: var(--z-head);
  background: #fff; border-bottom: 1px solid var(--c-line);
}
.head-bar {
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--h-head);
}
.head-logo { flex: 0 0 auto; display: flex; align-items: center; height: 100%; }
.head-logo img { height: 44px; width: auto; }

.head-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.head-nav > ul { display: flex; align-items: center; gap: var(--sp-1); }
.head-nav > ul > li { position: relative; }
.head-nav > ul > li > a {
  display: flex; align-items: center; height: var(--h-head);
  padding: 0 var(--sp-4); font-size: var(--fs-l4); color: var(--c-ink);
  font-weight: var(--fw-med); white-space: nowrap;
}
.head-nav > ul > li > a:hover { color: var(--c-brand); }
.head-nav > ul > li.cur > a { color: var(--c-brand); font-weight: var(--fw-bold); box-shadow: inset 0 -3px 0 var(--c-brand); }

/* 二级下拉式导航（桌面端） */
.head-nav .sub {
  position: absolute; left: 0; top: 100%; min-width: 200px;
  padding: var(--sp-2) 0; background: #fff;
  border: 1px solid var(--c-line); border-radius: 0 0 var(--r-2) var(--r-2);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.head-nav > ul > li:hover .sub,
.head-nav > ul > li:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.head-nav .sub a {
  display: block; padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-ui); color: var(--c-ink-2); white-space: nowrap;
}
.head-nav .sub a:hover { background: var(--c-brand-soft); color: var(--c-brand); }

/* 页头右侧动作区 */
.head-acts { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.head-search-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--c-ink);
  border-radius: var(--r-1);
}
.head-search-btn:hover { background: var(--c-bg-alt); color: var(--c-brand); }

/* 页头电话（桌面端显示，是重要转化入口） */
.head-tel { display: flex; align-items: center; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 1px solid var(--c-line); }
.head-tel .lb { font-size: var(--fs-tag); color: var(--c-ink-3); line-height: 1.2; }
.head-tel .no { font-family: var(--ff-num); font-size: var(--fs-l3); font-weight: var(--fw-bold); color: var(--c-brand); line-height: 1.2; }

/* 汉堡按钮（移动） */
.head-burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; padding: 0; position: relative;
}
.head-burger span {
  position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--c-brand); border-radius: 2px; transition: transform var(--t), opacity var(--t);
}
.head-burger span:nth-child(1) { top: 15px; }
.head-burger span:nth-child(2) { top: 21px; }
.head-burger span:nth-child(3) { top: 27px; }
body.nav-open .head-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .head-burger span:nth-child(2) { opacity: 0; }
body.nav-open .head-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 移动端抽屉导航 */
.nav-drawer {
  position: fixed; inset: var(--h-head) 0 0 0; z-index: var(--z-drawer);
  background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-5) var(--sp-9);
  transform: translateX(100%); transition: transform .25s ease;
  visibility: hidden;
}
body.nav-open .nav-drawer { transform: translateX(0); visibility: visible; }
body.nav-open { overflow: hidden; }

.nav-drawer .d-item { border-bottom: 1px solid var(--c-line); }
.nav-drawer .d-row { display: flex; align-items: center; }
.nav-drawer .d-link {
  flex: 1 1 auto; display: block; padding: var(--sp-4) 0;
  font-size: var(--fs-l4); font-weight: var(--fw-med); color: var(--c-ink);
}
.nav-drawer .d-toggle {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; position: relative;
}
.nav-drawer .d-toggle::before,
.nav-drawer .d-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--c-ink-3); transition: transform var(--t);
}
.nav-drawer .d-toggle::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.nav-drawer .d-toggle::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.nav-drawer .d-item.open .d-toggle::after { transform: translate(-50%, -50%) scaleY(0); }
.nav-drawer .d-sub { display: none; padding: 0 0 var(--sp-3); }
.nav-drawer .d-item.open .d-sub { display: block; }
.nav-drawer .d-sub a {
  display: block; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-ui); color: var(--c-ink-2); background: var(--c-bg-alt);
  border-radius: var(--r-1); margin-bottom: var(--sp-2);
}
.nav-drawer .d-cta { margin-top: var(--sp-6); }
.nav-drawer .d-tel {
  margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-line);
  font-size: var(--fs-ui); color: var(--c-ink-2);
}
.nav-drawer .d-tel a { font-family: var(--ff-num); font-size: var(--fs-l3); font-weight: var(--fw-bold); }

/* 搜索浮层 */
.search-pop {
  position: fixed; inset: var(--h-head) 0 auto 0; z-index: var(--z-drawer);
  background: #fff; border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-2); padding: var(--sp-5);
  transform: translateY(-110%); transition: transform .25s ease; visibility: hidden;
}
body.search-open .search-pop { transform: translateY(0); visibility: visible; }
.search-pop form { display: flex; gap: var(--sp-3); max-width: var(--w-page); margin: 0 auto; }
.search-pop input[type="text"] {
  flex: 1 1 auto; height: 48px; padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-2); border-radius: var(--r-1);
  font-size: var(--fs-l4); font-family: var(--ff-sans);
}
.search-pop button {
  flex: 0 0 auto; height: 48px; min-width: 88px; padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-1); background: var(--c-brand);
  color: #fff; font-size: var(--fs-l4); cursor: pointer; font-family: var(--ff-sans);
}

/* --------------------------------------------------------------------------
   6. 按钮与 CTA（§5.1 分级：主 CTA 实心，全页 <= 1 个）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 44px; padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-1); font-size: var(--fs-l4); font-weight: var(--fw-med);
  font-family: var(--ff-sans); cursor: pointer; border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
  text-align: center; line-height: 1.3;
}
/* 主 CTA：实心，使用强调色（全站唯一使用强调色底的地方） */
.btn-primary { background: var(--c-accent); color: #fff; font-weight: var(--fw-bold); }
.btn-primary:hover { background: var(--c-accent-deep); color: #fff; }
/* 次 CTA：描边，视觉弱化 */
.btn-ghost { background: transparent; color: var(--c-brand); border-color: var(--c-line-2); }
.btn-ghost:hover { border-color: var(--c-brand); background: var(--c-brand-soft); color: var(--c-brand); }
/* 深底上的次 CTA */
.btn-ghost-inv { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-inv:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
/* 深蓝底实心（用于深色区块内的次主 CTA） */
.btn-solid { background: var(--c-brand); color: #fff; }
.btn-solid:hover { background: var(--c-brand-deep); color: #fff; }
.btn-lg { min-height: 52px; padding: var(--sp-4) var(--sp-7); font-size: var(--fs-l3); }
.btn-block { width: 100%; }

/* CTA 组：主次并置 */
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   7. 页脚
   -------------------------------------------------------------------------- */
.site-foot { background: var(--c-brand-deep); color: rgba(255,255,255,.78); padding: var(--sp-8) 0 0; font-size: var(--fs-ui); }
.site-foot a { color: rgba(255,255,255,.78); }
.site-foot a:hover { color: #fff; }
.site-foot h3 { color: #fff; font-size: var(--fs-l3); margin-bottom: var(--sp-4); }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-7); padding-bottom: var(--sp-7); }
.foot-brand .f-logo { height: 40px; width: auto; margin-bottom: var(--sp-4); }
.foot-brand .f-desc { line-height: var(--lh-body); margin-bottom: var(--sp-4); max-width: 340px; }
.foot-brand .f-tel { font-family: var(--ff-num); font-size: 22px; font-weight: var(--fw-bold); color: #fff; }
.foot-brand .f-tel-lb { font-size: var(--fs-tag); color: rgba(255,255,255,.6); }
.foot-col li { margin-bottom: var(--sp-3); }
.foot-col a { font-size: var(--fs-ui); }

/* 页脚 NAP 与备案区 */
.foot-nap {
  border-top: 1px solid rgba(255,255,255,.12); padding: var(--sp-5) 0;
  font-size: var(--fs-tag); color: rgba(255,255,255,.6); line-height: 1.9;
}
.foot-nap .nap-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.foot-nap .beian { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-2); }
.foot-nap .beian a { color: rgba(255,255,255,.6); }
.foot-nap .beian a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   8. 卡片
   -------------------------------------------------------------------------- */
/* 通用卡片 */
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-1);
  transition: border-color var(--t), box-shadow var(--t);
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { border-color: var(--c-line-2); box-shadow: var(--sh-2); }
.card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1 1 auto; display: flex; flex-direction: column; }
.card-title { font-size: var(--fs-l3); font-weight: var(--fw-bold); color: var(--c-ink); margin-bottom: var(--sp-3); line-height: var(--lh-mid); }
.card:hover .card-title { color: var(--c-brand); }
.card-desc { font-size: var(--fs-ui); color: var(--c-ink-2); line-height: var(--lh-body); flex: 1 1 auto; }

/* 卡片缩略图：统一比例，防布局跳动（CLS < 0.1） */
.card-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-alt); border-radius: var(--r-1) var(--r-1) 0 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-thumb img { transform: scale(1.03); }
.card-thumb.wide { aspect-ratio: 16 / 9; }

/* 事实标签（城市 / 面积 / 型号 / 日期） */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.tag {
  display: inline-block; padding: 2px var(--sp-3); border-radius: var(--r-1);
  font-size: var(--fs-tag); line-height: 1.8; color: var(--c-ink-2);
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
}
.tag-brand { background: var(--c-brand-soft); border-color: transparent; color: var(--c-brand); }

/* 资质证书卡：统一 4:3、白底描边、下方一行 <= 20 字说明（附录 G4） */
.cred-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.cred-card { text-align: center; }
.cred-card .cred-img {
  position: relative; aspect-ratio: 4 / 3; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-1);
  overflow: hidden; padding: var(--sp-2);
}
.cred-card .cred-img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cred-card figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-tag); color: var(--c-ink-2);
  line-height: 1.6;
}

/* 授权牌 / 奖杯：统一深色背景、居中、同屏不超过 4 个（附录 G4） */
.award-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.award-card {
  background: var(--c-brand-deep); border-radius: var(--r-2);
  padding: var(--sp-5); text-align: center; color: #fff;
}
.award-card img { width: 84px; height: 84px; object-fit: contain; margin: 0 auto var(--sp-4); background: transparent; }
.award-card .aw-name { font-size: var(--fs-l4); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.award-card .aw-note { font-size: var(--fs-tag); color: rgba(255,255,255,.72); line-height: 1.6; }

/* 案例卡片：固定结构（城市+户型+面积+产品系列+一句话效果+实拍图） */
.case-card .case-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.case-card .case-sum { font-size: var(--fs-ui); color: var(--c-ink-2); margin-top: var(--sp-3); line-height: var(--lh-body); }
.case-card .case-city {
  position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: 2;
  padding: 2px var(--sp-3); background: rgba(11,59,111,.9); color: #fff;
  font-size: var(--fs-tag); border-radius: var(--r-1);
}

/* 服务网点卡 */
.site-card { background: #fff; border: 1px solid var(--c-line); border-left: 3px solid var(--c-brand); border-radius: var(--r-1); padding: var(--sp-5); }
.site-card .sc-city { font-size: var(--fs-l3); font-weight: var(--fw-bold); color: var(--c-brand); margin-bottom: var(--sp-3); }
.site-card .sc-row { display: flex; gap: var(--sp-3); font-size: var(--fs-ui); color: var(--c-ink-2); margin-bottom: var(--sp-2); line-height: 1.7; }
.site-card .sc-row .k { flex: 0 0 auto; color: var(--c-ink-3); min-width: 68px; }

/* 产品卡 */
.prod-card .prod-model { font-family: var(--ff-num); font-size: var(--fs-tag); color: var(--c-accent); font-weight: var(--fw-bold); letter-spacing: .02em; }
.prod-card .prod-def { font-size: var(--fs-ui); color: var(--c-ink-2); margin-top: var(--sp-2); line-height: var(--lh-body); }

/* 入口卡（方案 / 系统类四宫格） */
.entry-card {
  position: relative; display: block; border: 1px solid var(--c-line); border-radius: var(--r-2);
  overflow: hidden; background: #fff; transition: border-color var(--t), box-shadow var(--t);
}
.entry-card:hover { border-color: var(--c-brand); box-shadow: var(--sh-2); }
.entry-card .e-thumb { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-bg-alt); }
.entry-card .e-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.entry-card:hover .e-thumb img { transform: scale(1.04); }
.entry-card .e-body { padding: var(--sp-5); }
.entry-card .e-name { font-size: var(--fs-l3); font-weight: var(--fw-bold); color: var(--c-brand); margin-bottom: var(--sp-2); }
.entry-card .e-desc { font-size: var(--fs-ui); color: var(--c-ink-2); line-height: var(--lh-body); }
.entry-card .e-arrow { margin-top: var(--sp-4); font-size: var(--fs-ui); color: var(--c-brand); font-weight: var(--fw-med); }

/* --------------------------------------------------------------------------
   9. 数据条（数字统一最大字号，说明统一最小字号 · 附录 G4）
   -------------------------------------------------------------------------- */
.stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-1); overflow: hidden; }
.stat-item { background: #fff; padding: var(--sp-6) var(--sp-5); text-align: center; }
.stat-item .s-num {
  font-family: var(--ff-num); font-size: clamp(26px, 3.4vw, 38px); font-weight: var(--fw-bold);
  color: var(--c-brand); line-height: 1.1; letter-spacing: -.02em;
}
.stat-item .s-unit { font-size: var(--fs-l3); font-weight: var(--fw-bold); color: var(--c-brand); margin-left: 2px; }
.stat-item .s-lb { margin-top: var(--sp-3); font-size: var(--fs-tag); color: var(--c-ink-2); line-height: 1.6; }

/* 权威条带：图标 + 短句 + 数字三段式（§7.3） */
.auth-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.auth-item {
  display: flex; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-1);
}
.auth-item .a-ico { flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--c-brand-soft); border-radius: var(--r-1); color: var(--c-brand); font-size: var(--fs-l3); font-weight: var(--fw-bold); }
.auth-item .a-txt { flex: 1 1 auto; }
.auth-item .a-key { font-size: var(--fs-tag); color: var(--c-ink-3); margin-bottom: 2px; }
.auth-item .a-val { font-size: var(--fs-l4); color: var(--c-ink); font-weight: var(--fw-med); line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. 首屏（§5.1 模块 1：只做三件事 —— 定位句 / 主视觉 / 一条主 CTA）
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--c-brand-deep); overflow: hidden; }
.hero-slides { position: relative; }
.hero-slide { position: relative; display: none; }
.hero-slide.on { display: block; }
.hero-slide img { width: 100%; height: clamp(360px, 52vw, 620px); object-fit: cover; opacity: .55; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,42,80,.92) 0%, rgba(7,42,80,.72) 46%, rgba(7,42,80,.30) 100%);
}
.hero-inner {
  position: absolute; inset: 0; display: flex; align-items: center;
}
.hero-box { max-width: 700px; }
.hero-eyebrow {
  display: inline-block; margin-bottom: var(--sp-4); padding: 4px var(--sp-4);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: var(--r-1); color: #fff; font-size: var(--fs-tag); letter-spacing: .04em;
}
.hero h1 { color: #fff; margin-bottom: var(--sp-5); }
.hero h1 .hl { color: #fff; box-shadow: inset 0 -10px 0 rgba(200,69,47,.55); }
.hero-lead {
  color: rgba(255,255,255,.9); font-size: var(--fs-l4); line-height: var(--lh-body);
  max-width: 620px; margin-bottom: var(--sp-6);
}
.hero-acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.hero-note { color: rgba(255,255,255,.7); font-size: var(--fs-tag); margin-top: var(--sp-4); }

/* 首屏下方：权威数据条（V2.0 下移至首屏之下 · 决议 D-01） */
.hero-stats { position: relative; z-index: 2; margin-top: -46px; }
.hero-stats .stat-bar { box-shadow: var(--sh-3); border-color: transparent; }

/* 首屏分页点 */
.hero-dots { position: absolute; bottom: var(--sp-5); right: var(--sp-5); z-index: 3; display: flex; gap: var(--sp-2); }
.hero-dots button {
  width: 28px; height: 4px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.42); border-radius: 2px; transition: background var(--t);
}
.hero-dots button.on { background: #fff; }

/* --------------------------------------------------------------------------
   11. 栅格工具
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-side { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-7); align-items: start; }
.grid-5-7 { grid-template-columns: 5fr 7fr; gap: var(--sp-7); align-items: center; }

/* --------------------------------------------------------------------------
   12. 列表 / 分页 / 面包屑
   -------------------------------------------------------------------------- */
/* 面包屑（配 BreadcrumbList Schema；{pboot:position} 输出为扁平 a + 分隔符） */
.crumb {
  padding: 0 0 var(--sp-4); font-size: var(--fs-tag); color: var(--c-ink-3);
  line-height: 1.9; overflow-wrap: break-word;
}
.crumb a { color: var(--c-ink-3); }
.crumb a:hover { color: var(--c-brand); }
.crumb a:first-child { color: var(--c-ink-2); }

/* 栏目头（页面 H1 + 导语 150-250 字） */
.page-head { background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line); padding: var(--sp-7) 0; }
.page-head h1 { margin-bottom: var(--sp-4); }
.page-head .lead {
  font-size: var(--fs-l4); color: var(--c-ink-2); line-height: var(--lh-body);
  max-width: 820px;
}

/* 筛选条（案例按城市/户型/面积，产品按系统类型） */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center;
  padding: var(--sp-4) var(--sp-5); background: var(--c-bg-alt);
  border-radius: var(--r-1); margin-bottom: var(--sp-6);
}
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.filter-group .fg-lb { font-size: var(--fs-tag); color: var(--c-ink-3); margin-right: var(--sp-1); }
.filter-group a {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-1); font-size: var(--fs-ui);
  color: var(--c-ink-2); background: #fff; border: 1px solid var(--c-line);
}
.filter-group a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.filter-group a.on { background: var(--c-brand); color: #fff; border-color: var(--c-brand); font-weight: var(--fw-med); }
.filter-note { font-size: var(--fs-tag); color: var(--c-ink-3); margin-bottom: var(--sp-5); }

/* 分页：采用可抓取链接，不用纯 JS 加载（§5.2） */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-1);
  font-size: var(--fs-ui); color: var(--c-ink-2); font-family: var(--ff-num);
}
.pager a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pager .on, .pager .page-num-current {
  background: var(--c-brand); color: #fff; border-color: var(--c-brand); font-weight: var(--fw-bold);
}
.pager .disabled { color: var(--c-line-2); }

/* --------------------------------------------------------------------------
   13. 详情页
   -------------------------------------------------------------------------- */
/* 产品页 / 文章页头 */
.detail-head { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--c-line); }
.detail-head h1 { margin-bottom: var(--sp-4); }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-tag); color: var(--c-ink-3); }
.detail-meta .m-item { display: flex; align-items: center; gap: var(--sp-2); }

/* 一句话定义（产品页模块 2，<= 40 字） */
.one-line-def {
  padding: var(--sp-5); background: var(--c-brand-soft);
  border-left: 4px solid var(--c-brand); border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: var(--fs-l3); color: var(--c-brand); font-weight: var(--fw-med); line-height: var(--lh-mid);
}

/* 参数表（模块 3：可比对表格） */
.spec-table { width: 100%; border-collapse: collapse; border: 1px solid var(--c-line); border-radius: var(--r-1); overflow: hidden; font-size: var(--fs-ui); }
.spec-table caption { text-align: left; font-size: var(--fs-l3); font-weight: var(--fw-bold); color: var(--c-brand); padding-bottom: var(--sp-3); }
.spec-table th, .spec-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.spec-table th { width: 34%; background: var(--c-bg-alt); color: var(--c-ink-2); font-weight: var(--fw-med); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* 与同类对比（水系统 vs 氟系统） */
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); border: 1px solid var(--c-line); border-radius: var(--r-1); overflow: hidden; }
.cmp-table th, .cmp-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); text-align: left; }
.cmp-table thead th { background: var(--c-brand); color: #fff; font-weight: var(--fw-bold); }
.cmp-table tbody th { background: var(--c-bg-alt); color: var(--c-ink-2); font-weight: var(--fw-med); width: 22%; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }

/* FAQ（配 FAQPage Schema；每问独立成段，答案首句即结论） */
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-l4); font-weight: var(--fw-med); color: var(--c-ink);
  line-height: var(--lh-mid);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-qtext { flex: 1 1 auto; }
.faq summary .faq-ico {
  flex: 0 0 auto; position: relative; width: 20px; height: 20px; margin-top: 3px;
}
.faq summary .faq-ico::before, .faq summary .faq-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--c-ink-3);
  transition: transform var(--t), background var(--t);
}
.faq summary .faq-ico::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq summary .faq-ico::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq details[open] summary .faq-ico::after { transform: translate(-50%, -50%) scaleY(0); }
.faq details[open] summary .faq-ico::before { background: var(--c-brand); }
.faq summary:hover { color: var(--c-brand); }
.faq details[open] summary { color: var(--c-brand); font-weight: var(--fw-bold); }
.faq .faq-a { padding: 0 0 var(--sp-5) var(--sp-7); font-size: var(--fs-l4); color: var(--c-ink-2); line-height: var(--lh-body); }
.faq .faq-a p { margin-bottom: var(--sp-3); }
.faq .faq-qmark {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--c-brand-soft); color: var(--c-brand); font-size: var(--fs-tag);
  display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold);
}

/* 步骤列表（替代 HowTo 标记的普通有序列表 · 决议 D-06） */
.steps { counter-reset: st; display: grid; gap: var(--sp-4); }
.steps li {
  counter-increment: st; position: relative; padding-left: var(--sp-8);
  font-size: var(--fs-l4); line-height: var(--lh-body); color: var(--c-ink-2);
}
.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  background: var(--c-brand-soft); color: var(--c-brand);
  border-radius: 50%; font-weight: var(--fw-bold); font-family: var(--ff-num);
}
.steps li strong { display: block; color: var(--c-ink); margin-bottom: 2px; }

/* 侧栏 */
.side-box { border: 1px solid var(--c-line); border-radius: var(--r-1); padding: var(--sp-5); background: #fff; }
.side-box + .side-box { margin-top: var(--sp-5); }
.side-box h3 { font-size: var(--fs-l3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.side-links li { border-bottom: 1px dashed var(--c-line); }
.side-links li:last-child { border-bottom: 0; }
.side-links a { display: block; padding: var(--sp-3) 0; font-size: var(--fs-ui); color: var(--c-ink-2); }
.side-links a:hover { color: var(--c-brand); padding-left: var(--sp-2); }

/* 侧栏 CTA（深色，转化入口） */
.side-cta { background: var(--c-brand-deep); color: rgba(255,255,255,.82); border: 0; }
.side-cta h3 { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.side-cta .sc-tel { font-family: var(--ff-num); font-size: var(--fs-l2); font-weight: var(--fw-bold); color: #fff; display: block; margin-bottom: var(--sp-2); }
.side-cta .sc-note { font-size: var(--fs-tag); color: rgba(255,255,255,.7); margin-bottom: var(--sp-4); }

/* 文章页：作者署名（§5.7 必须有署名与身份） */
.article-sign {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-7); padding: var(--sp-5);
  background: var(--c-bg-alt); border-radius: var(--r-1);
  font-size: var(--fs-ui); color: var(--c-ink-2);
}
.article-sign .as-name { color: var(--c-ink); font-weight: var(--fw-med); }

/* 上一篇 / 下一篇（内链闭环） */
.prev-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.prev-next > div {
  display: block; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-line);
  border-radius: var(--r-1);
}
.prev-next > div:hover { border-color: var(--c-brand); }
.prev-next .pn-lb { display: block; font-size: var(--fs-tag); color: var(--c-ink-3); margin-bottom: var(--sp-2); }
.prev-next .pn-txt { display: block; font-size: var(--fs-ui); color: var(--c-ink-3); line-height: var(--lh-body); }
.prev-next .pn-txt a { color: var(--c-ink-2); }
.prev-next .pn-txt a:hover { color: var(--c-brand); }

/* --------------------------------------------------------------------------
   14. 表单（移动端字段精简，每个输入框有 label · §11.3）
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-ui); color: var(--c-ink-2); font-weight: var(--fw-med); }
.field label .req { color: var(--c-accent); margin-left: 2px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field select, .field textarea {
  min-height: 46px; padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-line-2); border-radius: var(--r-1);
  font-size: var(--fs-l4); font-family: var(--ff-sans); color: var(--c-ink);
  background: #fff; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-brand); outline: 0; box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.field .hint { font-size: var(--fs-tag); color: var(--c-ink-3); }
.form-note { font-size: var(--fs-tag); color: var(--c-ink-3); line-height: 1.7; margin-top: var(--sp-4); }

/* 表单提交结果提示 */
.msg-tip { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-1); font-size: var(--fs-ui); margin-bottom: var(--sp-5); }
.msg-tip.ok { background: #EAF6EE; color: #1E6B3A; border: 1px solid #C4E3CE; }
.msg-tip.err { background: var(--c-accent-soft); color: var(--c-accent-deep); border: 1px solid #F3D2CA; }

/* --------------------------------------------------------------------------
   15. 空态
   -------------------------------------------------------------------------- */
.empty { padding: var(--sp-9) var(--sp-5); text-align: center; color: var(--c-ink-3); font-size: var(--fs-l4); border: 1px dashed var(--c-line-2); border-radius: var(--r-1); }

/* --------------------------------------------------------------------------
   16. 返回顶部
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-6); z-index: var(--z-top);
  width: 46px; height: 46px; border: 1px solid var(--c-line); border-radius: var(--r-1);
  background: #fff; color: var(--c-brand); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--sh-2); font-size: 18px;
}
.to-top.on { display: flex; }
.to-top:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }

/* --------------------------------------------------------------------------
   17. 响应式（移动优先反向覆盖；375px 起无横向滚动）
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .cred-grid { grid-template-columns: repeat(3, 1fr); }
  .auth-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --h-head: 60px; }
  .wrap, .wrap-wide { padding: 0 var(--sp-4); }
  .sec { padding: var(--sp-7) 0; }

  /* 桌面导航收起，启用抽屉 */
  .head-nav { display: none; }
  .head-burger { display: block; }
  .head-tel { display: none; }
  .head-logo img { height: 36px; }

  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-side, .grid-5-7 { grid-template-columns: 1fr; gap: var(--sp-6); }
  .stat-bar { grid-template-columns: repeat(2, 1fr); }
  .cred-grid { grid-template-columns: repeat(2, 1fr); }
  .award-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-strip { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .prev-next { grid-template-columns: 1fr; }

  .hero-stats { margin-top: -28px; }
  .hero-slide img { height: clamp(320px, 78vw, 460px); }
  .hero-veil { background: linear-gradient(180deg, rgba(7,42,80,.72) 0%, rgba(7,42,80,.90) 100%); }
  .hero h1 { font-size: clamp(24px, 6.4vw, 34px); }
}

@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .stat-bar { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr; }
  .hero-acts .btn { width: 100%; }
  .sec-head h2 { font-size: 24px; }
  .page-head { padding: var(--sp-6) 0; }
  /* 移动端正文恢复全宽，避免窄屏两侧空太多 */
  .prose { max-width: none; }
}

/* --------------------------------------------------------------------------
   18. 打印（会员/客户常需打印服务价目与案例）
   -------------------------------------------------------------------------- */
@media print {
  .site-head, .site-foot, .to-top, .hero-dots, .side-cta, .filter-bar { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .card, .side-box { border-color: #999; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   19. 减少动效偏好（无障碍）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   20. 栏目子导航条（top.html）
   -------------------------------------------------------------------------- */
.subnav-bar { background: #fff; border-bottom: 1px solid var(--c-line); }
.subnav-bar ul {
  display: flex; flex-wrap: nowrap; gap: var(--sp-1);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.subnav-bar ul::-webkit-scrollbar { display: none; }
.subnav-bar li { flex: 0 0 auto; }
.subnav-bar a {
  display: block; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-l4);
  color: var(--c-ink-2); border-bottom: 3px solid transparent; white-space: nowrap;
}
.subnav-bar a:hover { color: var(--c-brand); }
.subnav-bar li.on a { color: var(--c-brand); font-weight: var(--fw-bold); border-bottom-color: var(--c-brand); }

/* --------------------------------------------------------------------------
   21. 首页与栅格的细节校准
   -------------------------------------------------------------------------- */
/* 六宫格入口卡紧凑化，避免窄列里文字过大 */
.grid-6 .entry-card .e-body { padding: var(--sp-4); }
.grid-6 .entry-card .e-name { font-size: var(--fs-l4); }
.grid-6 .entry-card .e-arrow { margin-top: var(--sp-3); font-size: var(--fs-tag); }

/* 无描述内容时不占位 */
.entry-card .e-desc:empty { display: none; }

/* 深色区块内的辅助文字反色 */
.sec-deep .sub { color: rgba(255, 255, 255, .78); }
.sec-deep .sec-head h2 { color: #fff; }

/* 深色区块内的数据条：必须清掉浅灰底（否则白字落浅灰底等于看不见），改用细分割线 */
.sec-deep .stat-bar { background: transparent; border-color: transparent; gap: 0; }
.sec-deep .stat-item { background: transparent; }
.sec-deep .stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .16); }

/* 页脚微信公众号二维码（原站页脚元素，改版时补回） */
.foot-brand .f-qr { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.foot-brand .f-qr img {
  width: 92px; height: 92px; flex: 0 0 auto;
  background: #fff; border-radius: var(--r-1); padding: 5px;
}
.foot-brand .f-qr span { font-size: var(--fs-tag); color: rgba(255, 255, 255, .72); line-height: 1.7; }

/* 案例卡缩略图作为定位父级（城市标签定位用） */
.case-card .card-thumb { position: relative; }

/* 无缩略图的列表卡内边距加大，保持呼吸感 */
.grid-2 .card > .card-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }

/* 文档页头内的正文限制宽度 */
.page-head .lead { max-width: 820px; }

/* 详情页正文区与侧栏的间距节奏 */
.detail-body { padding: var(--sp-7) 0 var(--sp-9); }

/* 表格在窄屏可横向滚动，不撑破页面 */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 560px; }

/* --------------------------------------------------------------------------
   12. 「关于我们 / 公司简介」内容型页面专用版式
       依据：《唯一事实基线表 V1.0》口径 + 站内既有设计系统组件复用
       新增仅为站内尚未提供的三件：内容区块标题、场地数据卡、发展历程时间线
   -------------------------------------------------------------------------- */
.about-blk { margin-top: var(--sp-8); }
.about-blk > h2 {
  font-size: var(--fs-l2); line-height: var(--lh-tight);
  margin: 0 0 var(--sp-5); padding-left: var(--sp-4);
  border-left: 4px solid var(--c-brand);
}
.about-blk > .blk-note { font-size: var(--fs-ui); color: var(--c-ink-2); margin: calc(-1 * var(--sp-3)) 0 var(--sp-5); }
.about-blk .blk-more { margin-top: var(--sp-5); font-size: var(--fs-ui); font-weight: var(--fw-med); }

/* 场地数据卡（办公室与展厅 / 仓储物流中心 / 实训中心） */
.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.fac-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-1); padding: var(--sp-5); }
.fac-card .f-num {
  font-family: var(--ff-num); font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--fw-bold); color: var(--c-brand); line-height: 1.1; letter-spacing: -.01em;
}
.fac-card .f-num .u { font-size: var(--fs-l4); font-weight: var(--fw-bold); margin-left: 2px; }
.fac-card .f-lb { margin-top: var(--sp-2); font-size: var(--fs-l4); font-weight: var(--fw-bold); color: var(--c-ink); line-height: var(--lh-mid); }
.fac-card .f-desc { margin-top: var(--sp-2); font-size: var(--fs-ui); color: var(--c-ink-2); line-height: var(--lh-body); }

/* 发展历程时间线 */
.tl-list { position: relative; margin: 0; padding-left: var(--sp-6); }
.tl-list::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--c-line); }
.tl-list > li { position: relative; padding-bottom: var(--sp-5); }
.tl-list > li:last-child { padding-bottom: 0; }
.tl-list > li::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-6) + 1px); top: 7px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand);
  box-shadow: 0 0 0 3px #fff;
}
.tl-list .tl-y {
  display: inline-block; min-width: 104px; margin-right: var(--sp-2);
  font-family: var(--ff-num); font-size: var(--fs-l4); font-weight: var(--fw-bold);
  color: var(--c-brand); line-height: var(--lh-mid);
}
.tl-list .tl-t { font-size: var(--fs-l4); font-weight: var(--fw-bold); color: var(--c-ink); }
.tl-list .tl-d { display: block; margin-top: var(--sp-1); font-size: var(--fs-ui); color: var(--c-ink-2); line-height: var(--lh-body); }

/* 信念引言块（与 one-line-def 同族，但语气更收尾，故加宽内边距） */
.belief-box {
  padding: var(--sp-6); background: var(--c-brand-soft);
  border-left: 4px solid var(--c-brand); border-radius: 0 var(--r-1) var(--r-1) 0;
}
.belief-box p { margin: 0; font-size: var(--fs-l3); color: var(--c-brand); font-weight: var(--fw-med); line-height: var(--lh-mid); }

@media (max-width: 991px) {
  .fac-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .fac-grid { grid-template-columns: 1fr; }
  .tl-list .tl-y { display: block; min-width: 0; margin-right: 0; }
  .about-blk { margin-top: var(--sp-7); }
}

/* --------------------------------------------------------------------------
   13. 客户口碑块（首页）
   -------------------------------------------------------------------------- */
.voice-box {
  margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6);
  background: #fff; border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-brand); border-radius: 0 var(--r-1) var(--r-1) 0;
}
.voice-box .voice-t {
  font-size: var(--fs-l3); font-weight: var(--fw-bold);
  color: var(--c-ink); margin-bottom: var(--sp-3);
}
.voice-box .prose { margin: 0; }
.voice-box .prose p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .voice-box { padding: var(--sp-5); }
}