@charset "UTF-8";
/* ==========================================================================
   广州亿昊再生资源回收有限公司 · www.yihaozaisheng.com
   设计系统：再生料场风（深绿 + 铜色 + 混凝土灰底 + 料色块签名元素）
   与 dehui-site / lunsu-site / enterprise-template-* 均不同源。
   ========================================================================== */
@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. 令牌
   -------------------------------------------------------------------------- */
:root {
  /* 品牌 · 深绿取「再生」，铜色取主营的紫铜 */
  --green: #1f5d45;
  --green-deep: #14412f;
  --green-soft: #e4ede9;
  --copper: #b8733a;
  --copper-deep: #935a2b;

  /* 中性 · 冷调混凝土 */
  --ground: #eef1ef;
  --ground-2: #e4e8e5;
  --card: #ffffff;
  --ink: #12211b;
  --ink-2: #3b4a43;
  --mute: #78877f;
  --line: #d4dbd7;
  --line-soft: #e3e8e5;

  /* 深色区 */
  --deep: #12211b;
  --deep-2: #1a2e25;
  --on-deep: #e7ece9;
  --on-deep-mute: #94a69c;
  --on-deep-line: #2a3c33;

  /* 字体 */
  --grot: "Space Grotesk", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  /* 字号 */
  --fs-mega: clamp(2.3rem, 1.3rem + 3.9vw, 4.3rem);
  --fs-h1: clamp(1.95rem, 1.35rem + 2.3vw, 3.1rem);
  --fs-h2: clamp(1.55rem, 1.2rem + 1.5vw, 2.4rem);
  --fs-h3: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --fs-lede: clamp(1rem, 0.95rem + 0.3vw, 1.14rem);
  --fs-sm: 0.885rem;
  --fs-xs: 0.78rem;

  /* 间距 */
  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem;  --s6: 3rem;   --s7: 4.5rem;
  --sec: clamp(3.6rem, 2rem + 5.2vw, 7rem);

  --r: 6px;            /* 介于德惠的 0 与伦苏的 16 之间 */
  --r-lg: 10px;
  --wrap: 1320px;
  --gut: clamp(1.15rem, 0.4rem + 3vw, 3.4rem);

  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.78;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.24; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 860px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: .7rem 1.1rem; }
.skip:focus { left: 0; }

.grot { font-family: var(--grot); }
.num { font-family: var(--grot); font-variant-numeric: tabular-nums; }

/* 区块 */
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(2.4rem, 1.5rem + 3vw, 4.2rem); }
.sec--alt { background: var(--ground-2); }
.sec--card { background: var(--card); }
.sec--deep { background: var(--deep); color: var(--on-deep); }
.sec--deep h2, .sec--deep h3 { color: #fff; }

/* --------------------------------------------------------------------------
   3. 料色块（本站签名元素：紫铜/黄铜/铝/不锈钢/废铁 的材质色条）
   -------------------------------------------------------------------------- */
.swatch { display: flex; height: 5px; border-radius: 2px; overflow: hidden; }
.swatch i { flex: 1; }
.swatch i:nth-child(1) { background: #b8733a; }  /* 紫铜 */
.swatch i:nth-child(2) { background: #c9a227; }  /* 黄铜 */
.swatch i:nth-child(3) { background: #aab4b8; }  /* 铝 */
.swatch i:nth-child(4) { background: #8d9599; }  /* 不锈钢 */
.swatch i:nth-child(5) { background: #5d6360; }  /* 废铁 */
.swatch--wide { height: 8px; }

/* --------------------------------------------------------------------------
   4. 标题
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--grot); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--copper);
  margin-bottom: var(--s3);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--copper); }
.sec--deep .eyebrow { color: #d69b63; }
.sec--deep .eyebrow::before { background: #d69b63; }

.h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
.lede { max-width: 60ch; color: var(--ink-2); font-size: var(--fs-lede); }
.sec--deep .lede { color: var(--on-deep-mute); }
.sechead { margin-bottom: var(--s6); }
.sechead--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   5. 页眉
   -------------------------------------------------------------------------- */
.topline { background: var(--green-deep); color: #b9cec4; font-size: var(--fs-xs); }
.topline__in { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 38px; }
.topline b { color: #fff; font-family: var(--grot); }
@media (max-width: 760px) { .topline__in > :first-child { display: none; } }

.mast { position: sticky; top: 0; z-index: 90; background: var(--card); border-bottom: 1px solid var(--line); }
.mast__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 76px; }
.brand img { height: 42px; width: auto; object-fit: contain; }
@media (max-width: 420px) { .brand img { height: 34px; } }

.nav { display: flex; gap: clamp(.5rem,.2rem + 1vw,1.6rem); }
.nav a { display: block; padding: .55rem .25rem; font-size: .95rem; color: var(--ink-2); position: relative; }
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 3px;
  background: var(--copper); transition: left .28s var(--ease), right .28s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { left: 0; right: 0; }
@media (max-width: 1060px) { .nav { display: none; } }

.mast__cta { display: flex; align-items: center; gap: var(--s3); }
.telbox { display: flex; flex-direction: column; line-height: 1.16; text-align: right; }
.telbox span { font-size: .66rem; color: var(--mute); letter-spacing: .08em; }
.telbox strong { font-family: var(--grot); font-size: 1.16rem; color: var(--green); }
@media (max-width: 1060px) { .telbox { display: none; } }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger i { width: 18px; height: 2px; background: var(--ink); transition: .3s var(--ease); }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1060px) { .burger { display: flex; } }

.drawer { position: fixed; inset: 0; z-index: 120; background: var(--ground);
  transform: translateX(100%); transition: transform .4s var(--ease), visibility 0s linear .4s var(--ease);
  /* 关闭态必须 visibility:hidden。只靠 transform 移出屏幕的话，抽屉仍在 DOM 里可聚焦——
     桌面宽度下汉堡按钮是 display:none，键盘用户 Tab 到页眉会掉进这些看不见的链接里。
     visibility 参与过渡，所以延迟到位移结束再隐藏，开合动画不受影响。 */
  visibility: hidden;
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(env(safe-area-inset-top,0px) + 1.1rem) var(--gut) calc(env(safe-area-inset-bottom,0px) + 2rem); }
.drawer[data-open] { transform: translateX(0); visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.drawer__top img { height: 38px; width: auto; object-fit: contain; }
.drawer__close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.drawer nav a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); font-size: 1.1rem; }
.drawer__foot { margin-top: var(--s5); display: grid; gap: .3rem; font-size: var(--fs-sm); color: var(--mute); }
.drawer__foot b { font-family: var(--grot); font-size: 1.5rem; color: var(--green); }

/* --------------------------------------------------------------------------
   6. 首屏
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--deep); color: var(--on-deep); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18,33,27,.96) 0 42%, rgba(18,33,27,.58) 100%); }
.hero__in { position: relative; z-index: 1; padding-block: clamp(3rem,1.8rem + 5vw,6.4rem); }
.hero h1 { font-size: var(--fs-mega); line-height: 1.08; color: #fff; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: #d69b63; }
.hero__sub { margin: var(--s4) 0 0; max-width: 50ch; color: var(--on-deep-mute); font-size: var(--fs-lede); }
.hero__acts { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); align-items: center; }
.hero__tel { font-family: var(--grot); font-size: clamp(1.5rem,1.1rem + 1.6vw,2.2rem); color: #fff; }
.hero__swatch { max-width: 420px; margin-top: var(--s5); }

/* 首屏下方的品类快捷条 */
.quickbar { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--on-deep-line);
  border-top: 1px solid var(--on-deep-line); position: relative; z-index: 1; }
@media (max-width: 820px) { .quickbar { grid-template-columns: repeat(2,1fr); } }
.quickbar a { background: var(--deep); padding: var(--s4) var(--s3); display: grid; gap: .3rem; transition: background .25s; }
.quickbar a:hover { background: var(--deep-2); }
.quickbar b { font-family: var(--grot); font-size: .78rem; color: #d69b63; letter-spacing: .1em; }
.quickbar span { color: #fff; font-weight: 600; }
.quickbar small { color: var(--on-deep-mute); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   7. 按钮
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.6rem;
  border-radius: var(--r); border: 1px solid transparent; font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: background .22s, color .22s, border-color .22s, transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--copper { background: var(--copper); color: #fff; }
.btn--copper:hover { background: var(--copper-deep); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-deep); }
.btn--line { border-color: var(--line); background: var(--card); color: var(--ink); }
.btn--line:hover { border-color: var(--green); color: var(--green); }
.btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.more { display: inline-flex; align-items: center; gap: .45rem; color: var(--green);
  font-weight: 600; font-size: .94rem; }
.more svg { width: 14px; height: 14px; flex: none; }
.more:hover { color: var(--copper); }
.sec--deep .more { color: #d69b63; }

/* --------------------------------------------------------------------------
   8. 品类卡
   -------------------------------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s4); }
@media (max-width: 860px) { .cats { grid-template-columns: 1fr; } }
.cat { background: var(--card); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 200px 1fr; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cat:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(18,33,27,.1); }
@media (max-width: 560px) { .cat { grid-template-columns: 1fr; } }
.cat__img { overflow: hidden; background: var(--ground-2); }
.cat__img img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; transition: transform .6s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.05); }
.cat__body { padding: var(--s4); display: grid; gap: .5rem; align-content: start; }
.cat__no { font-family: var(--grot); font-size: .78rem; letter-spacing: .12em; color: var(--copper); }
.cat__body h3 { font-size: var(--fs-h3); }
.cat__body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.72; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.chips span { font-size: .72rem; color: var(--green); background: var(--green-soft);
  border-radius: 3px; padding: .16rem .5rem; }

/* --------------------------------------------------------------------------
   9. 实拍网格
   -------------------------------------------------------------------------- */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: var(--s3); }
.shots--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .shots--3 { grid-template-columns: repeat(2, 1fr); } }
.shots figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--card); position: relative; }
.shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--ease); }
.shots figure:hover img { transform: scale(1.05); }
.shots figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .75rem;
  font-size: var(--fs-xs); color: #fff; background: linear-gradient(to top, rgba(0,0,0,.66), transparent);
  opacity: 0; transition: opacity .3s; }
.shots figure:hover figcaption { opacity: 1; }

/* --------------------------------------------------------------------------
   10. 图文 / 流程 / 要点
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,.8rem + 3vw,4rem); align-items: center; }
.split--wide { grid-template-columns: 1.12fr .88fr; }
@media (max-width: 900px) { .split, .split--wide { grid-template-columns: 1fr; } }
.split--flip > :first-child { order: 2; }
@media (max-width: 900px) { .split--flip > :first-child { order: 0; } }
.split__img img { width: 100%; border-radius: var(--r-lg); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.step { background: var(--card); padding: var(--s4); display: grid; gap: .5rem; align-content: start; }
.sec--deep .steps { background: var(--on-deep-line); border-color: var(--on-deep-line); }
.sec--deep .step { background: var(--deep-2); }
.step b { font-family: var(--grot); font-size: 1.8rem; color: var(--copper); line-height: 1; }
.step h3 { font-size: 1.02rem; }
.step p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }
.sec--deep .step p { color: var(--on-deep-mute); }

.points { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s5) var(--s6); }
@media (max-width: 760px) { .points { grid-template-columns: 1fr; } }
.point { display: grid; gap: .35rem; padding-top: var(--s3); border-top: 2px solid var(--green); }
.point b { font-family: var(--grot); font-size: .8rem; letter-spacing: .12em; color: var(--copper); }
.point h3 { font-size: var(--fs-h3); }
.point p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.72; }

/* 数据带 */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--on-deep-line);
  border: 1px solid var(--on-deep-line); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2,1fr); } }
.stat { background: var(--deep); padding: var(--s5) var(--s4); }
.stat b { display: block; font-family: var(--grot); font-size: clamp(1.5rem,1.1rem + 1.4vw,2.2rem); color: #fff; line-height: 1.1; }
.stat span { display: block; margin-top: .4rem; font-size: var(--fs-sm); color: var(--on-deep-mute); }

/* 清单 */
.checks { display: grid; gap: .05rem; }
.checks li { display: flex; gap: .65rem; align-items: baseline; padding: .58rem 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.checks li::before { content: ""; width: 7px; height: 7px; background: var(--copper); flex: none; transform: translateY(-1px); }
.sec--deep .checks li { border-color: var(--on-deep-line); color: var(--on-deep-mute); }

/* 表格 */
.spec { font-size: var(--fs-sm); background: var(--card); border-radius: var(--r-lg); overflow: hidden; }
.spec th, .spec td { text-align: left; padding: .85rem var(--s4); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec th { font-weight: 600; white-space: nowrap; width: 9rem; }
.spec td { color: var(--ink-2); }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAQ */
.faq details { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); margin-bottom: .7rem; }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem var(--s4); padding-right: 3rem; position: relative; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.5rem; top: 1.5rem; width: 10px; height: 10px;
  border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.65rem; }
.faq .a { padding: 0 var(--s4) 1.15rem; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.8; }
.faq .a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. 内页页头
   -------------------------------------------------------------------------- */
.phead { background: var(--deep); color: var(--on-deep); padding-block: clamp(2.2rem,1.4rem + 3vw,4rem); }
.phead h1 { font-size: var(--fs-h1); color: #fff; }
.phead .lede { margin-top: var(--s3); color: var(--on-deep-mute); }
.crumb { display: flex; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--on-deep-mute); margin-bottom: var(--s3); }
.crumb li { display: flex; }
.crumb li:not(:last-child)::after { content: "/"; margin-left: .5rem; opacity: .5; }
.crumb a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   12. 表单 / 联系
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s4); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }
.fld { display: grid; gap: .4rem; }
.fld > span { font-size: var(--fs-sm); font-weight: 600; }
.fld > span em { font-style: normal; color: var(--copper); }
.fld input, .fld select, .fld textarea { font: inherit; font-size: .95rem; padding: .78rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); width: 100%; }
.fld textarea { min-height: 124px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--green); outline: none; }
.note { font-size: var(--fs-xs); color: var(--mute); }
.status { font-size: var(--fs-sm); padding: .8rem 1rem; border-radius: var(--r); background: var(--green-soft); color: var(--green-deep); }
.status[data-err] { background: #fbe9e4; color: #93341a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* 联系方式卡组。不要用内联 grid-template-columns 覆盖 .cats——
   内联样式会盖掉媒体查询，手机端仍按 3 列排，电话号码撑出横向滚动条。 */
.cboxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 860px) { .cboxes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cboxes { grid-template-columns: 1fr; } }

.cbox { display: grid; gap: .4rem; padding: var(--s4); background: var(--card);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg); min-width: 0; }
.cbox .tel { overflow-wrap: anywhere; }
.cbox b { font-size: var(--fs-xs); color: var(--mute); font-weight: 500; letter-spacing: .06em; }
.cbox .tel { font-family: var(--grot); font-size: 1.5rem; color: var(--green); }
.cbox p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   13. CTA / 页脚 / 浮动
   -------------------------------------------------------------------------- */
.cta { background: var(--green); color: #fff; }
.cta__in { display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
  padding-block: clamp(2.2rem,1.4rem + 2.4vw,3.6rem); flex-wrap: wrap; }
.cta h2 { font-size: clamp(1.5rem,1.15rem + 1.3vw,2.2rem); }
.cta p { margin: .55rem 0 0; color: #c2d8ce; font-size: var(--fs-sm); }
.cta__acts { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.cta__tel { font-family: var(--grot); font-size: clamp(1.5rem,1.1rem + 1.4vw,2.1rem); }

.foot { background: var(--deep); color: var(--on-deep-mute); font-size: var(--fs-sm); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--s5); padding-block: var(--s7) var(--s6); }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
/* width:auto 必须显式写：HTML 的 width 属性是 presentational hint(等同 width:520px)，
   CSS 只覆盖 height 的话宽度会留在属性值上，再被 max-width:100% 夹到容器宽，
   结果高被钉死、宽被拉伸。object-fit:contain 再兜一层：容器比图还窄时只缩不变形。 */
.foot__brand img { height: 46px; width: auto; object-fit: contain; margin-bottom: var(--s3); }
.foot__brand p { max-width: 34ch; line-height: 1.76; }
.foot h4 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--s3); }
.foot li { padding: .28rem 0; }
.foot a:hover { color: #fff; }
.foot__contact b { display: block; color: #fff; font-family: var(--grot); font-size: 1.22rem; }
.foot__bar { border-top: 1px solid var(--on-deep-line); padding-block: var(--s4);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-xs); }
.foot__bar a { text-decoration: underline; text-underline-offset: 3px; }
.foot__kw { color: #4b5c53; }

.fab { position: fixed; right: 0; bottom: 16%; z-index: 80; display: grid; gap: 1px; }
.fab a, .fab button { width: 56px; height: 56px; background: var(--green); color: #fff; border: none;
  cursor: pointer; display: grid; place-items: center; gap: 2px; transition: background .2s; }
.fab a:first-child { border-radius: var(--r) 0 0 0; }
.fab > :last-child { border-radius: 0 0 0 var(--r); }
.fab a:hover, .fab button:hover { background: var(--copper); }
.fab svg { width: 18px; height: 18px; }
.fab em { font-style: normal; font-size: .56rem; }
.fab__top[hidden] { display: none !important; }
@media (max-width: 720px) {
  /* 底部固定条：列数写死 3，否则「回到顶部」按钮 hidden 切换时列宽会变，
     手指底下的电话/留言按钮会横向跳动。安全区内边距给刘海屏让位，
     再给 body 垫出等高的 padding，免得盖住页脚版权行。 */
  .fab { bottom: 0; right: 0; left: 0; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column;
         padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fab a, .fab button { width: auto; height: 52px; border-radius: 0 !important; }
  .fab__top[hidden] { display: grid !important; visibility: hidden; }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

/* --------------------------------------------------------------------------
   14. 正文
   -------------------------------------------------------------------------- */
.prose { font-size: 1.02rem; line-height: 1.9; color: var(--ink-2); }
.prose h2 { font-size: 1.45rem; margin: 2.2rem 0 .8rem; color: var(--ink); }
.prose h3 { font-size: 1.12rem; margin: 1.8rem 0 .6rem; color: var(--ink); }
.prose ul { margin: 0 0 1.2em; display: grid; gap: .4rem; }
.prose ul li { padding-left: 1.15rem; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 7px; height: 7px; background: var(--copper); }
.prose ol { margin: 0 0 1.2em; display: grid; gap: .45rem; counter-reset: n; }
.prose ol li { padding-left: 1.9rem; position: relative; counter-increment: n; }
.prose ol li::before { content: counter(n,decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--grot); font-weight: 700; color: var(--copper); font-size: .9rem; }
.prose strong { color: var(--ink); font-weight: 600; }
.callout { border-left: 3px solid var(--copper); background: var(--card);
  border-radius: 0 var(--r) var(--r) 0; padding: var(--s3) var(--s4); margin: 0 0 1.3em; font-size: var(--fs-sm); }

/* 动效 */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

.stack { display: grid; gap: var(--s4); }
.mt5 { margin-top: var(--s5); } .mt6 { margin-top: var(--s6); }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }