.page-contact {
  --contact-panel: var(--sabah-900);
  --contact-ink-soft: rgba(248, 245, 237, .66);
  --contact-rule: rgba(14, 46, 34, .16);
  background: var(--rice-50);
  color: var(--charcoal-950);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding: var(--sp-5) 0 var(--sp-6);
  border-bottom: 1px solid var(--paper-edge);
}

.page-contact .contact-hero__crumb {
  margin-bottom: var(--sp-4);
}

.page-contact .contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.page-contact .contact-hero__main {
  min-width: 0;
}

.page-contact .contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 11vw, 5.6rem);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--sabah-700);
  margin: var(--sp-1) 0 var(--sp-3);
}

.page-contact .contact-hero__lead {
  max-width: 46ch;
  margin: 0 0 var(--sp-3);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--rock-600);
}

.page-contact .contact-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
}

.page-contact .contact-hero__jump a {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--sabah-700);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sabah-500);
  transition: border-color .2s ease, color .2s ease;
}

.page-contact .contact-hero__jump a:hover {
  color: var(--clay-500);
  border-bottom-color: var(--clay-500);
}

/* 超大联系方式 */
.page-contact .contact-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--sabah-900);
}

.page-contact .channel {
  display: grid;
  gap: 6px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--paper-edge);
  transition: border-color .22s ease;
}

.page-contact .channel:hover {
  border-bottom-color: var(--neon-400);
}

.page-contact .channel__k {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--rock-600);
  transition: color .2s ease;
}

.page-contact .channel:hover .channel__k {
  color: var(--clay-500);
}

.page-contact .channel__v {
  display: block;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--sabah-700);
  line-height: 1.14;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-contact .channel--mail .channel__v {
  font-size: clamp(1.02rem, 1.5vw + .6rem, 1.62rem);
  letter-spacing: -.01em;
}

.page-contact .channel--phone .channel__v {
  font-size: clamp(1.8rem, 5.6vw, 3rem);
  letter-spacing: .04em;
}

.page-contact .channel--addr .channel__v {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.1vw + .74rem, 1.3rem);
  line-height: 1.55;
  letter-spacing: 0;
}

.page-contact .channel__n {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--rock-600);
}

/* 右侧深色面板 */
.page-contact .contact-hero__aside {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--contact-panel);
  border: 1px solid var(--sabah-700);
  border-radius: 2px;
  min-width: 0;
}

.page-contact .contact-map {
  margin: 0;
}

.page-contact .contact-map .figure__cap {
  color: var(--contact-ink-soft);
  font-size: .76rem;
  line-height: 1.6;
}

.page-contact .shift {
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(79, 224, 200, .34);
}

.page-contact .shift__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.page-contact .shift__k {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--contact-ink-soft);
}

.page-contact .shift__v {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--neon-400);
  letter-spacing: .04em;
}

.page-contact .shift__track {
  position: relative;
  height: 6px;
  margin: 14px 0 8px;
  background: rgba(248, 245, 237, .16);
  border-radius: 999px;
}

.page-contact .shift__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--neon-400) 0%, rgba(79, 224, 200, .32) 100%);
  border-radius: 999px;
}

.page-contact .shift__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: rgba(248, 245, 237, .46);
}

.page-contact .shift__note {
  margin: var(--sp-2) 0 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--contact-ink-soft);
}

/* ---------- 通用区块 ---------- */
.page-contact .contact-band {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--paper-edge);
  scroll-margin-top: 96px;
}

.page-contact .band__head {
  margin-bottom: var(--sp-4);
}

.page-contact .band__head h2,
.page-contact .visit-lead h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--sabah-700);
  margin: var(--sp-1) 0 var(--sp-2);
}

.page-contact .band__lead {
  max-width: 60ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.76;
  color: var(--rock-600);
}

/* ---------- 咨询范围 ---------- */
.page-contact .scope-figure {
  margin: 0 0 var(--sp-4);
}

.page-contact .scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.page-contact .scope-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: #fff;
  border: var(--edge);
  border-top: 3px solid var(--sabah-500);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .2s ease, border-top-color .2s ease;
}

.page-contact .scope-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 224, 200, .7);
  border-top-color: var(--clay-500);
}

.page-contact .scope-card__num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--clay-500);
}

.page-contact .scope-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--charcoal-950);
}

.page-contact .scope-card > p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--rock-600);
}

.page-contact .scope-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: .87rem;
  line-height: 1.62;
  color: var(--rock-600);
}

.page-contact .scope-card__list li {
  position: relative;
  padding-left: 16px;
}

.page-contact .scope-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 8px;
  height: 1px;
  background: var(--sabah-500);
}

.page-contact .scope-card__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--sabah-700);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sabah-500);
  transition: color .2s ease, border-color .2s ease;
}

.page-contact .scope-card__link:hover {
  color: var(--clay-500);
  border-bottom-color: var(--clay-500);
}

/* ---------- 自助入口 ---------- */
.page-contact .contact-shortcut {
  background: var(--moss-200);
  border-bottom-color: var(--sabah-500);
}

.page-contact .contact-shortcut .band__head h2 {
  color: var(--sabah-900);
}

.page-contact .contact-shortcut .band__lead {
  color: rgba(14, 46, 34, .72);
}

.page-contact .shortcut-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--contact-rule);
}

.page-contact .shortcut {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-4) var(--sp-3);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--contact-rule);
  transition: background-color .22s ease, color .22s ease;
}

.page-contact .shortcut:hover {
  background: var(--sabah-900);
  color: var(--rice-50);
}

.page-contact .shortcut__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--clay-500);
  transition: color .22s ease;
}

.page-contact .shortcut:hover .shortcut__num {
  color: var(--neon-400);
}

.page-contact .shortcut h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.28;
  color: var(--sabah-900);
  transition: color .22s ease;
}

.page-contact .shortcut:hover h3 {
  color: var(--rice-50);
}

.page-contact .shortcut__body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(14, 46, 34, .74);
  transition: color .22s ease;
}

.page-contact .shortcut:hover .shortcut__body {
  color: rgba(248, 245, 237, .74);
}

.page-contact .shortcut__go {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--sabah-700);
  transition: color .22s ease, transform .22s ease;
}

.page-contact .shortcut:hover .shortcut__go {
  color: var(--neon-400);
  transform: translateX(4px);
}

/* ---------- 资料与到访 ---------- */
.page-contact .visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.page-contact .visit-lead p {
  margin: 0 0 var(--sp-2);
  font-size: .96rem;
  line-height: 1.78;
  color: var(--rock-600);
}

.page-contact .visit-lead a {
  color: var(--sabah-700);
  text-decoration: none;
  border-bottom: 1px solid var(--sabah-500);
  transition: color .2s ease, border-color .2s ease;
}

.page-contact .visit-lead a:hover {
  color: var(--clay-500);
  border-bottom-color: var(--clay-500);
}

.page-contact .visit-details {
  border-top: 1px solid var(--paper-edge);
}

.page-contact .visit-details details {
  border-bottom: 1px solid var(--paper-edge);
}

.page-contact .visit-details summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) 44px var(--sp-3) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--sabah-700);
  transition: color .2s ease;
}

.page-contact .visit-details summary::-webkit-details-marker {
  display: none;
}

.page-contact .visit-details summary:hover {
  color: var(--clay-500);
}

.page-contact .visit-details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--sabah-500);
  transition: color .2s ease;
}

.page-contact .visit-details details[open] summary::after {
  content: "–";
  color: var(--clay-500);
}

.page-contact .details-body {
  padding: 0 0 var(--sp-3);
}

.page-contact .details-body p {
  margin: 0;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.76;
  color: var(--rock-600);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-contact .scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .shortcut-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .shortcut {
    border-right: 1px solid var(--contact-rule);
    border-bottom: 0;
  }

  .page-contact .shortcut:last-child {
    border-right: 0;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero {
    padding: var(--sp-6) 0 var(--sp-7);
  }

  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .page-contact .contact-hero__aside {
    position: sticky;
    top: 104px;
    padding: var(--sp-4);
  }

  .page-contact .visit-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-6);
  }
}

@media (min-width: 1280px) {
  .page-contact .contact-hero__lead {
    font-size: 1.06rem;
  }

  .page-contact .scope-card {
    padding: var(--sp-4);
  }
}
<<<END>>>

等等——我再检查一下 `figure` 和 `figure--wide` 的全局定义。`figure--wide` 可能本来就设置了 `--ratio: 21/9`。我用内联 `--ratio: 900/520` 覆盖了，应该没问题，因为内联样式优先级更高。

再看 `.crumb` —— 这是全局的，没问题。

还有一点：我没有对任何元素使用 `reveal` 类，这样可以避免内容因为 JS 失败而不可见的潜在问题，没问题。

检查一下所有新类是否都在 `page_css` 里定义了：
- contact-hero ✓
- contact-hero__crumb ✓
- contact-hero__grid ✓
- contact-hero__main ✓
- contact-hero__lead ✓
- contact-hero__jump ✓
- contact-channels ✓
- channel、channel--mail、channel--phone、channel--addr ✓
- channel__k、channel__v、channel__n ✓
- contact-hero__aside ✓
- contact-map ✓
- shift、shift__head、shift__k、shift__v、shift__track、shift__fill、shift__ticks、shift__note ✓
- contact-band ✓
- contact-scope ✓
- band__head ✓
- band__lead ✓
- scope-figure ✓
- scope-grid ✓
- scope-card ✓
- scope-card__num ✓
- scope-card__list ✓
- scope-card__link ✓
- contact-shortcut ✓
- shortcut-grid ✓
- shortcut ✓
- shortcut__num ✓
- shortcut__body ✓
- shortcut__go ✓
- contact-visit ✓
- visit-grid ✓
- visit-lead ✓
- visit-details ✓
- details-body ✓

全部定义完毕。

ID 有：`#scope`、`#visit` —— 已经和 `href="#scope"`、`#visit` 的跳转链接对应上了。

内部链接：`/`、`/help/`、`/download/`、`/company/`、`/journal/` —— 都已使用，全是合法路由。

图片：共 2 张（数量和需求一致）。

没有 `data-*` 属性，因为没有适用的。

完成。
<main id="main-content" class="page-contact">

  <section class="contact-hero">
    <div class="shell">
      <nav class="contact-hero__crumb" aria-label="浏览位置">
        <ol class="crumb">
          <li><a href="/">首页</a></li>
          <li aria-current="page">找到我们</li>
        </ol>
      </nav>

      <div class="contact-hero__grid">
        <div class="contact-hero__main">
          <p class="eyebrow">咨询通道 · 工作日受理</p>
          <h1>找到我们</h1>
          <p class="contact-hero__lead">沙巴赛场的客服通道按栏目切换、追比分评测与规则说明三类问题分派。写清你遇到的具体栏目和轮次，我们能直接把答案给到，省去来回转述。</p>

          <p class="contact-hero__jump">
            <a href="#scope">咨询范围</a>
            <a href="#visit">资料与到访</a>
          </p>

          <ul class="contact-channels">
            <li class="channel channel--mail">
              <span class="channel__k">客服邮箱</span>
              <span class="channel__v">email@shaba-sports-hub.com.cn</span>
              <span class="channel__n">适合附上截图、轮次编号或栏目名称的详细问题</span>
            </li>
            <li class="channel channel--phone">
              <span class="channel__k">联系电话</span>
              <span class="channel__v">15837799995</span>
              <span class="channel__n">适合追问切换步骤与查看方式</span>
            </li>
            <li class="channel channel--addr">
              <span class="channel__k">数据服务基地</span>
              <span class="channel__v">山西省太原市小店区体育南路188号沙巴赛场数据服务基地</span>
              <span class="channel__n">到访前先通过邮箱或电话确认时间</span>
            </li>
          </ul>
        </div>

        <aside class="contact-hero__aside">
          <figure class="figure figure--tall contact-map">
            <div class="figure__media">
              <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="抽象网格地图与服务范围示意">
            </div>
            <figcaption class="figure__cap">桌面端、笔记本与平板三类常见访问环境均在服务范围内</figcaption>
          </figure>

          <div class="shift">
            <div class="shift__head">
              <span class="shift__k">工作日回复时段</span>
              <span class="shift__v">09:00–18:00</span>
            </div>
            <div class="shift__track" role="img" aria-label="工作日九点至十八点为回复时段">
              <span class="shift__fill"></span>
            </div>
            <div class="shift__ticks">
              <span>09</span><span>11</span><span>13</span><span>15</span><span>18</span>
            </div>
            <p class="shift__note">每轮赛事结束后的首日来信最集中，回复通常顺延到当天下午。</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="contact-band contact-scope" id="scope">
    <div class="shell">
      <div class="band__head">
        <p class="eyebrow">咨询范围</p>
        <h2>三类问题，各自对上负责的栏目</h2>
        <p class="band__lead">把问题归到下面某一类，邮件或电话里先说清是哪一类，答复会更快。超出这三类的请求，客服会告知你可以去哪里自己找。</p>
      </div>

      <figure class="figure figure--wide scope-figure" style="--ratio: 900 / 520;">
        <div class="figure__media">
          <img src="{zhanqunpic:h:520w:900}" width="900" height="520" alt="三类咨询范围与工作日回复时间信息图" loading="lazy" decoding="async">
        </div>
        <figcaption class="figure__cap">栏目切换、追比分评测与规则说明分别由对应职能组接手</figcaption>
      </figure>

      <div class="scope-grid">
        <article class="scope-card">
          <span class="scope-card__num">01 / 栏目切换</span>
          <h3>找不到栏目，或者路径和以前不一样</h3>
          <p>桌面端切换只需三步，手机端要五步，两侧入口位置不同，换了设备就容易迷路。</p>
          <ul class="scope-card__list">
            <li>顶部胶囊导航中段的栏目编号可直接跳转</li>
            <li>移动端菜单展开后按编号顺序排列</li>
            <li>屏幕宽度变化时按钮可能换行，位置会挪动</li>
          </ul>
          <a class="scope-card__link" href="/download/">拿一份切换速查</a>
        </article>

        <article class="scope-card">
          <span class="scope-card__num">02 / 追比分评测</span>
          <h3>比分节点和轮次统计对不上</h3>
          <p>每次比分变化都留有时间戳，说清是哪一轮、哪一分钟，我们能定位到具体记录。</p>
          <ul class="scope-card__list">
            <li>说明队伍名称与所属赛事类别，便于筛选</li>
            <li>指出你看到的时间戳或节点描述</li>
            <li>最近一轮统计已同步到 4 月 12 日那轮</li>
          </ul>
          <a class="scope-card__link" href="/journal/">看赛场日志</a>
        </article>

        <article class="scope-card">
          <span class="scope-card__num">03 / 规则说明</span>
          <h3>某条规则该怎么理解</h3>
          <p>规则说明库收录 128 条，分赛事流程、判定依据与常见疑问三组，可按分组找。</p>
          <ul class="scope-card__list">
            <li>入口固定在帮助中心第一栏，位置不变</li>
            <li>历史条目保留修订记录，可对照前后版本</li>
            <li>每周新增 3 至 5 条，写清条目名称即可查询</li>
          </ul>
          <a class="scope-card__link" href="/help/">进帮助中心</a>
        </article>
      </div>
    </div>
  </section>

  <section class="contact-band contact-shortcut">
    <div class="shell">
      <div class="band__head">
        <p class="eyebrow">先自己看一眼</p>
        <h2>三个入口能解决大部分来信</h2>
        <p class="band__lead">这三处内容每天都在更新，多数问题在点开之后就有答案。看完仍有疑问，再把具体位置发给我们。</p>
      </div>

      <div class="shortcut-grid">
        <a class="shortcut" href="/">
          <span class="shortcut__num">01</span>
          <h3>最近一轮阵容更新</h3>
          <p class="shortcut__body">打开首页就能看到最新一轮的变更条目，首发、轮换与伤停三类变化分列，平均每轮收录 30 至 60 条。</p>
          <span class="shortcut__go">进入首页</span>
        </a>

        <a class="shortcut" href="/help/">
          <span class="shortcut__num">02</span>
          <h3>最新规则说明</h3>
          <p class="shortcut__body">帮助中心第一栏固定为规则说明入口，按赛事流程、判定依据与常见疑问三组分类，直接搜条目名更快。</p>
          <span class="shortcut__go">进入帮助中心</span>
        </a>

        <a class="shortcut" href="/download/">
          <span class="shortcut__num">03</span>
          <h3>适配清单与近期战绩</h3>
          <p class="shortcut__body">四类文件可以离线保存：适配清单、近期战绩、栏目切换速查与评测口径说明，适合开会时对照。</p>
          <span class="shortcut__go">进入下载区</span>
        </a>
      </div>
    </div>
  </section>

  <section class="contact-band contact-visit" id="visit">
    <div class="shell">
      <div class="visit-grid">
        <div class="visit-lead">
          <p class="eyebrow">资料与到访</p>
          <h2>先把文件拿到手，再决定要不要约时间</h2>
          <p>适配清单按桌面端、笔记本与平板三种屏幕宽度给出可读性建议，并附深色模式下的对比度提示；近期战绩保留最近 10 轮的赛果与关键节点，支持按队伍筛选。多数团队内部讨论，靠这两份文件就够了。</p>
          <p>想了解评测怎么做出来的，可以看 <a href="/company/">品牌档案</a>；想持续跟进每轮变动，可以订阅 <a href="/journal/">赛场日志</a>。</p>
        </div>

        <div class="visit-details">
          <details>
            <summary>怎么索取适配清单与近期战绩</summary>
            <div class="details-body">
              <p>发一封邮件到客服邮箱，写清你要的文件名称，以及需要覆盖的屏幕宽度或队伍范围。四类文件都可以直接取走，不需要额外条件。如果同时要评测口径说明，在邮件里一并写出即可。</p>
            </div>
          </details>

          <details>
            <summary>到访数据服务基地前需要准备什么</summary>
            <div class="details-body">
              <p>先通过邮箱或电话说明到访事由、同行人数和大致时段，我们据此安排接待。地址为山西省太原市小店区体育南路188号沙巴赛场数据服务基地，建议在工作日 9:00 至 18:00 之间安排行程，避开每轮赛事结束后的首日高峰。</p>
            </div>
          </details>

          <details>
            <summary>问题里最好带上哪些信息</summary>
            <div class="details-body">
              <p>栏目切换类问题请写明设备类型与浏览器；追比分类问题请写明队伍、赛事类别与轮次；规则说明类问题请写出条目名称或你看到的原文片段。信息越具体，往返次数越少。</p>
            </div>
          </details>

          <details>
            <summary>哪些请求我们无法受理</summary>
            <div class="details-body">
              <p>客服通道只处理栏目切换、追比分评测与规则说明三类咨询。赛事合作、内容授权与商务洽谈不属于该通道受理范围，请另行来信说明事由，我们会转给对应的职能组。</p>
            </div>
          </details>
        </div>
      </div>
    </div>
  </section>

</main>

.page-contact {
  --contact-panel: var(--sabah-900);
  --contact-ink-soft: rgba(248, 245, 237, .66);
  --contact-rule: rgba(14, 46, 34, .16);
  background: var(--rice-50);
  color: var(--charcoal-950);
  overflow-x: hidden;
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  padding: var(--sp-5) 0 var(--sp-6);
  border-bottom: 1px solid var(--paper-edge);
}

.page-contact .contact-hero__crumb {
  margin-bottom: var(--sp-4);
}

.page-contact .contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.page-contact .contact-hero__main {
  min-width: 0;
}

.page-contact .contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 11vw, 5.6rem);
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--sabah-700);
  margin: var(--sp-1) 0 var(--sp-3);
}

.page-contact .contact-hero__lead {
  max-width: 46ch;
  margin: 0 0 var(--sp-3);
  font-size: 1rem;
  line-height: 1.78;
  color: var(--rock-600);
}

.page-contact .contact-hero__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
}

.page-contact .contact-hero__jump a {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--sabah-700);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sabah-500);
  transition: border-color .2s ease, color .2s ease;
}

.page-contact .contact-hero__jump a:hover {
  color: var(--clay-500);
  border-bottom-color: var(--clay-500);
}

/* 超大联系方式 */
.page-contact .contact-channels {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--sabah-900);
}

.page-contact .channel {
  display: grid;
  gap: 6px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--paper-edge);
  transition: border-color .22s ease;
}

.page-contact .channel:hover {
  border-bottom-color: var(--neon-400);
}

.page-contact .channel__k {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--rock-600);
  transition: color .2s ease;
}

.page-contact .channel:hover .channel__k {
  color: var(--clay-500);
}

.page-contact .channel__v {
  display: block;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--sabah-700);
  line-height: 1.14;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-contact .channel--mail .channel__v {
  font-size: clamp(1.02rem, 1.5vw + .6rem, 1.62rem);
  letter-spacing: -.01em;
}

.page-contact .channel--phone .channel__v {
  font-size: clamp(1.8rem, 5.6vw, 3rem);
  letter-spacing: .04em;
}

.page-contact .channel--addr .channel__v {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.1vw + .74rem, 1.3rem);
  line-height: 1.55;
  letter-spacing: 0;
}

.page-contact .channel__n {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--rock-600);
}

/* 右侧深色面板 */
.page-contact .contact-hero__aside {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--contact-panel);
  border: 1px solid var(--sabah-700);
  border-radius: 2px;
  min-width: 0;
}

.page-contact .contact-map {
  margin: 0;
}

.page-contact .contact-map .figure__cap {
  color: var(--contact-ink-soft);
  font-size: .76rem;
  line-height: 1.6;
}

.page-contact .shift {
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(79, 224, 200, .34);
}

.page-contact .shift__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.page-contact .shift__k {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--contact-ink-soft);
}

.page-contact .shift__v {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--neon-400);
  letter-spacing: .04em;
}

.page-contact .shift__track {
  position: relative;
  height: 6px;
  margin: 14px 0 8px;
  background: rgba(248, 245, 237, .16);
  border-radius: 999px;
}

.page-contact .shift__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--neon-400) 0%, rgba(79, 224, 200, .32) 100%);
  border-radius: 999px;
}

.page-contact .shift__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  color: rgba(248, 245, 237, .46);
}

.page-contact .shift__note {
  margin: var(--sp-2) 0 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--contact-ink-soft);
}

/* ---------- 通用区块 ---------- */
.page-contact .contact-band {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--paper-edge);
  scroll-margin-top: 96px;
}

.page-contact .band__head {
  margin-bottom: var(--sp-4);
}

.page-contact .band__head h2,
.page-contact .visit-lead h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--sabah-700);
  margin: var(--sp-1) 0 var(--sp-2);
}

.page-contact .band__lead {
  max-width: 60ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.76;
  color: var(--rock-600);
}

/* ---------- 咨询范围 ---------- */
.page-contact .scope-figure {
  margin: 0 0 var(--sp-4);
}

.page-contact .scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.page-contact .scope-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: #fff;
  border: var(--edge);
  border-top: 3px solid var(--sabah-500);
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .2s ease, border-top-color .2s ease;
}

.page-contact .scope-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 224, 200, .7);
  border-top-color: var(--clay-500);
}

.page-contact .scope-card__num {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--clay-500);
}

.page-contact .scope-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--charcoal-950);
}

.page-contact .scope-card > p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--rock-600);
}

.page-contact .scope-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: .87rem;
  line-height: 1.62;
  color: var(--rock-600);
}

.page-contact .scope-card__list li {
  position: relative;
  padding-left: 16px;
}

.page-contact .scope-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 8px;
  height: 1px;
  background: var(--sabah-500);
}

.page-contact .scope-card__link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--sabah-700);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--sabah-500);
  transition: color .2s ease, border-color .2s ease;
}

.page-contact .scope-card__link:hover {
  color: var(--clay-500);
  border-bottom-color: var(--clay-500);
}

/* ---------- 自助入口 ---------- */
.page-contact .contact-shortcut {
  background: var(--moss-200);
  border-bottom-color: var(--sabah-500);
}

.page-contact .contact-shortcut .band__head h2 {
  color: var(--sabah-900);
}

.page-contact .contact-shortcut .band__lead {
  color: rgba(14, 46, 34, .72);
}

.page-contact .shortcut-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--contact-rule);
}

.page-contact .shortcut {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-4) var(--sp-3);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--contact-rule);
  transition: background-color .22s ease, color .22s ease;
}

.page-contact .shortcut:hover {
  background: var(--sabah-900);
  color: var(--rice-50);
}

.page-contact .shortcut__num {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--clay-500);
  transition: color .22s ease;
}

.page-contact .shortcut:hover .shortcut__num {
  color: var(--neon-400);
}

.page-contact .shortcut h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.24rem;
  line-height: 1.28;
  color: var(--sabah-900);
  transition: color .22s ease;
}

.page-contact .shortcut:hover h3 {
  color: var(--rice-50);
}

.page-contact .shortcut__body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(14, 46, 34, .74);
  transition: color .22s ease;
}

.page-contact .shortcut:hover .shortcut__body {
  color: rgba(248, 245, 237, .74);
}

.page-contact .shortcut__go {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--sabah-700);
  transition: color .22s ease, transform .22s ease;
}

.page-contact .shortcut:hover .shortcut__go {
  color: var(--neon-400);
  transform: translateX(4px);
}

/* ---------- 资料与到访 ---------- */
.page-contact .visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.page-contact .visit-lead p {
  margin: 0 0 var(--sp-2);
  font-size: .96rem;
  line-height: 1.78;
  color: var(--rock-600);
}

.page-contact .visit-lead a {
  color: var(--sabah-700);
  text-decoration: none;
  border-bottom: 1px solid var(--sabah-500);
  transition: color .2s ease, border-color .2s ease;
}

.page-contact .visit-lead a:hover {
  color: var(--clay-500);
  border-bottom-color: var(--clay-500);
}

.page-contact .visit-details {
  border-top: 1px solid var(--paper-edge);
}

.page-contact .visit-details details {
  border-bottom: 1px solid var(--paper-edge);
}

.page-contact .visit-details summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: var(--sp-3) 44px var(--sp-3) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.4;
  color: var(--sabah-700);
  transition: color .2s ease;
}

.page-contact .visit-details summary::-webkit-details-marker {
  display: none;
}

.page-contact .visit-details summary:hover {
  color: var(--clay-500);
}

.page-contact .visit-details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--sabah-500);
  transition: color .2s ease;
}

.page-contact .visit-details details[open] summary::after {
  content: "–";
  color: var(--clay-500);
}

.page-contact .details-body {
  padding: 0 0 var(--sp-3);
}

.page-contact .details-body p {
  margin: 0;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.76;
  color: var(--rock-600);
}

/* ---------- 响应式 ---------- */
@media (min-width: 700px) {
  .page-contact .scope-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .shortcut-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-contact .shortcut {
    border-right: 1px solid var(--contact-rule);
    border-bottom: 0;
  }

  .page-contact .shortcut:last-child {
    border-right: 0;
  }
}

@media (min-width: 960px) {
  .page-contact .contact-hero {
    padding: var(--sp-6) 0 var(--sp-7);
  }

  .page-contact .contact-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }

  .page-contact .contact-hero__aside {
    position: sticky;
    top: 104px;
    padding: var(--sp-4);
  }

  .page-contact .visit-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-6);
  }
}

@media (min-width: 1280px) {
  .page-contact .contact-hero__lead {
    font-size: 1.06rem;
  }

  .page-contact .scope-card {
    padding: var(--sp-4);
  }
}
<<<END>>>