.page-contact .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.page-contact .contact-hero {
  padding-block: var(--space-6) var(--space-4);
}

.page-contact .contact-hero__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  max-width: 22ch;
}

.page-contact .contact-hero__lede {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .contact-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .contact-figure {
  margin-top: var(--space-2);
}

.page-contact .contact-figure .media-frame {
  margin: 0;
}

.page-contact .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.page-contact .contact-section {
  padding-block: var(--section-y);
}

.page-contact .contact-section--tint {
  background: var(--color-surface-alt);
}

.page-contact .chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-contact .chapter-head .chapter-num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-primary);
}

.page-contact .chapter-head__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .section-lede {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* 01 渠道清单 */
.page-contact .channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-contact .channel-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.page-contact .contact-section--tint .channel-item {
  background: var(--color-surface);
}

.page-contact .channel-item__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-primary);
}

.page-contact .channel-item__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .channel-item__value {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-contact .channel-item__note {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* 02 邮箱与电话边界 */
.page-contact .desk-grid {
  display: grid;
  gap: var(--space-4);
}

.page-contact .desk-block__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .desk-block__value {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-contact .desk-block__text {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .desk-note {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-contact .conclusion {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

/* 03 来信信息清单 */
.page-contact .intake-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-contact .intake-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.page-contact .intake-row:nth-child(odd) {
  background: var(--color-surface-alt);
}

.page-contact .intake-row__idx {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.page-contact .intake-row__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .intake-row__lead {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .intake-fields__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .intake-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.page-contact .intake-fields li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-contact .intake-fields li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: var(--space-1);
  height: var(--border-thin);
  background: var(--color-primary);
}

/* 04 到访 */
.page-contact .visit-grid {
  display: grid;
  gap: var(--space-4);
}

.page-contact .visit-figure .media-frame {
  margin: 0;
}

.page-contact .visit-detail__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .visit-address {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-contact .visit-detail__text {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .visit-detail__text a {
  color: var(--color-ink);
  text-decoration-color: var(--color-primary);
  text-underline-offset: 3px;
}

/* 05 下一步 */
.page-contact .next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-contact .next-item__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease, transform 200ms ease;
}

.page-contact .next-item__link:hover,
.page-contact .next-item__link:focus-visible {
  background: var(--color-surface-deep);
  transform: translateY(-2px);
}

.page-contact .next-item__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .next-item__title {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .next-item__desc {
  display: block;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .closing-line {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-contact .closing-line a {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .page-contact .channel-item__value {
    font-size: var(--text-lg);
  }
}

@media (min-width: 760px) {
  .page-contact .desk-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .page-contact .next-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .page-contact .intake-row {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-6);
  }
}

@media (min-width: 860px) {
  .page-contact .channel-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .page-contact .visit-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
    align-items: start;
  }

  .page-contact .intake-row {
    padding: var(--space-4);
  }
}
</style>
<<<END>>>
等一下，我注意到我刚才在 PAGE_CSS 末尾多写了一个 `</style>` 和 `<<<END>>>`——这些不属于输出格式。

让我重新输出正确的部分，只包含 `` 和 `` 以及各自的内容，不加 `</style>` 或 `<<<END>>>`。
<main id="main-content" class="page-contact">

  <div class="container">
    <nav class="breadcrumb" aria-label="页面位置">
      <ol>
        <li><a href="/">首页</a></li>
        <li><span aria-current="page">联系入口</span></li>
      </ol>
    </nav>
  </div>

  <section class="contact-hero">
    <div class="container">
      <p class="eyebrow">联系入口</p>
      <h1 class="contact-hero__title">把来意写清楚，回复就不会绕弯路</h1>
      <p class="contact-hero__lede">不同来意走不同通道。百博体育把客服邮箱、服务电话和到访安排的适用范围一次讲完，你看完就知道该写什么、往哪发、大概多久能等到回音。</p>
      <p class="contact-hero__meta">
        <span class="mono">工作日 9:00–18:00</span>
        <span class="mono">通常 1 个工作日内答复</span>
        <span class="mono">当前覆盖至 2026 赛季</span>
      </p>
    </div>
  </section>

  <div class="container contact-figure">
    <figure class="media-frame media-frame--wide">
      <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="深色桌面上摊开的笔记本与刻度尺俯拍，画面叠加半透明数据线条">
      <figcaption class="media-frame__caption">赛季进行期间，邮件与电话的来意按校订、协作、引用三类分开处理。</figcaption>
    </figure>
  </div>

  <section class="contact-section">
    <div class="container">
      <div class="chapter-head">
        <span class="chapter-num">01</span>
        <h2 class="chapter-head__title">四条通道，先对号入座</h2>
      </div>
      <p class="section-lede">下面四条通道覆盖了绝大多数联系场景。看完这一段，你基本可以跳过后面几节，直接动笔或拨号。</p>

      <ol class="channel-list">
        <li class="channel-item" data-reveal>
          <span class="channel-item__num" aria-hidden="true">01</span>
          <div class="channel-item__body">
            <h3 class="channel-item__title">客服邮箱</h3>
            <p class="channel-item__value">info@osis-baibo.com.cn</p>
            <p class="channel-item__note">口径确认、资料索取、校订反馈、内容引用授权都走这里。需要留痕、需要附截图的事，写邮件比打电话省事。</p>
          </div>
        </li>
        <li class="channel-item" data-reveal>
          <span class="channel-item__num" aria-hidden="true">02</span>
          <div class="channel-item__body">
            <h3 class="channel-item__title">服务电话</h3>
            <p class="channel-item__value">17960424027</p>
            <p class="channel-item__note">问题等不起、或者只是想确认当天有没有人处理时使用。涉及具体数字的争议，接听同事仍会请你补一封邮件。</p>
          </div>
        </li>
        <li class="channel-item" data-reveal>
          <span class="channel-item__num" aria-hidden="true">03</span>
          <div class="channel-item__body">
            <h3 class="channel-item__title">办公地址</h3>
            <p class="channel-item__value">天津市河西区黑牛城道与友谊路交口新业广场A座18层</p>
            <p class="channel-item__note">用于日常收信与已预约的会面。第一次来之前先发一封邮件，说清事由与时段，我们会回一个能对接的时间。</p>
          </div>
        </li>
        <li class="channel-item" data-reveal>
          <span class="channel-item__num" aria-hidden="true">04</span>
          <div class="channel-item__body">
            <h3 class="channel-item__title">合作来信</h3>
            <p class="channel-item__value">info@osis-baibo.com.cn</p>
            <p class="channel-item__note">场馆方、数据供应方的协作意向走同一个邮箱，请在标题里带上「合作」二字和机构全称，便于分派给对接同事。</p>
          </div>
        </li>
      </ol>
    </div>
  </section>

  <section class="contact-section contact-section--tint">
    <div class="container">
      <div class="chapter-head">
        <span class="chapter-num">02</span>
        <h2 class="chapter-head__title">邮箱处理要留痕的事，电话处理等不起的事</h2>
      </div>

      <div class="desk-grid">
        <article class="desk-block">
          <p class="desk-block__label">客服邮箱</p>
          <p class="desk-block__value">info@osis-baibo.com.cn</p>
          <p class="desk-block__text">适合口径确认、资料索取、校订反馈和引用授权。这类问题往往要对着附件和版本说话，写下来比讲一遍更清楚，你也能在往来记录里随时翻回我们的答复。</p>
        </article>
        <article class="desk-block">
          <p class="desk-block__label">服务电话</p>
          <p class="desk-block__value">17960424027</p>
          <p class="desk-block__text">适合追问正在进行的比赛指标、确认当天是否会给出答复、约到访时间。电话里说不清数字细节时，我们会请你改走邮件，把口径和出处一并写进去。</p>
        </article>
      </div>

      <p class="desk-note">两个通道共用同一套时段：工作日的 9:00–18:00 收信与接听，周末和法定节假日收到的来信顺延到下一个工作日。需要向场馆方或数据供应方核实的来意，我们会先回一封「已收到，正在核对」，再补最终结论。</p>

      <p class="conclusion">不需要核实外部信息的问题，通常 1 个工作日内给出答复；涉及场馆与供应方的，答复时间以核对完成为准，期间会持续同步进度。</p>
    </div>
  </section>

  <section class="contact-section">
    <div class="container">
      <div class="chapter-head">
        <span class="chapter-num">03</span>
        <h2 class="chapter-head__title">来信写清这几项，往返能少一轮</h2>
      </div>
      <p class="section-lede">下面按四类来意拆开。对照你手上那件事，把右侧字段补齐，我们第一封回信就能给出结论而不是追问。</p>

      <ul class="intake-list">
        <li class="intake-row" data-reveal>
          <div class="intake-row__purpose">
            <span class="intake-row__idx mono" aria-hidden="true">A</span>
            <h3 class="intake-row__title">赛事数据校订</h3>
            <p class="intake-row__lead">你看到的数字与别处对不上，或者想确认某个指标按什么口径统计。</p>
          </div>
          <div class="intake-row__fields">
            <p class="intake-fields__label">邮件里请写清</p>
            <ul class="intake-fields">
              <li>联赛名称与赛季</li>
              <li>具体比赛：主客队加轮次</li>
              <li>指标名称与你手上的数值</li>
              <li>你是在哪个页面看到的，能附截图更好</li>
              <li>希望我们按什么口径给出结论</li>
            </ul>
          </div>
        </li>
        <li class="intake-row" data-reveal>
          <div class="intake-row__purpose">
            <span class="intake-row__idx mono" aria-hidden="true">B</span>
            <h3 class="intake-row__title">场馆与赛队协作</h3>
            <p class="intake-row__lead">你代表场馆或赛队，想聊内容协作，比如出场馆档案、轮次预告或现场口径。</p>
          </div>
          <div class="intake-row__fields">
            <p class="intake-fields__label">邮件里请写清</p>
            <ul class="intake-fields">
              <li>机构全称与所在城市</li>
              <li>场馆或球队名称</li>
              <li>想推进的合作方向</li>
              <li>可以对接的时段</li>
              <li>对接人怎么称呼</li>
            </ul>
          </div>
        </li>
        <li class="intake-row" data-reveal>
          <div class="intake-row__purpose">
            <span class="intake-row__idx mono" aria-hidden="true">C</span>
            <h3 class="intake-row__title">内容引用与授权</h3>
            <p class="intake-row__lead">你要把站内的赔率或控球率数字用进自己的稿子、视频或分析报告。</p>
          </div>
          <div class="intake-row__fields">
            <p class="intake-fields__label">邮件里请写清</p>
            <ul class="intake-fields">
              <li>用途与发布平台</li>
              <li>打算引用的指标与场次范围</li>
              <li>预计上线时间</li>
              <li>是否会改动原文表述</li>
              <li>需要我们提供的署名写法</li>
            </ul>
          </div>
        </li>
        <li class="intake-row" data-reveal>
          <div class="intake-row__purpose">
            <span class="intake-row__idx mono" aria-hidden="true">D</span>
            <h3 class="intake-row__title">其他咨询</h3>
            <p class="intake-row__lead">栏目找不到、渠道不确定、不知道自己的问题该归到哪一类。</p>
          </div>
          <div class="intake-row__fields">
            <p class="intake-fields__label">邮件里请写清</p>
            <ul class="intake-fields">
              <li>你遇到的问题</li>
              <li>你已经试过的操作</li>
              <li>你希望得到口头答复还是书面答复</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </section>

  <section class="contact-section contact-section--tint">
    <div class="container">
      <div class="chapter-head">
        <span class="chapter-num">04</span>
        <h2 class="chapter-head__title">来之前先对一下时间</h2>
      </div>

      <div class="visit-grid">
        <div class="visit-figure">
          <figure class="media-frame">
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="城市街区俯视抽象图，以网格与线条表达道路走向" loading="lazy" decoding="async">
          </figure>
        </div>
        <div class="visit-detail">
          <p class="visit-detail__label">办公地址</p>
          <p class="visit-address">天津市河西区黑牛城道与友谊路交口新业广场A座18层</p>
          <p class="visit-detail__text">这个地址承担日常收信与已预约的会面。出发前请发一封邮件，写清到访事由、人数和大致时段，我们会回一个能坐下来聊的时间。</p>
          <p class="visit-detail__text">第一次接触、想先了解我们怎么校订这些数字的，可以先翻一遍<a href="/profile/">品牌概况</a>，当面聊的时候能省掉大部分铺垫。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="contact-section">
    <div class="container">
      <div class="chapter-head">
        <span class="chapter-num">05</span>
        <h2 class="chapter-head__title">有些问题不用发邮件</h2>
      </div>
      <p class="section-lede">在动笔之前先花两分钟确认一下——这两种情况我们已经在别处写透了，翻完能省掉一轮往返。</p>

      <ul class="next-list">
        <li class="next-item" data-reveal>
          <a class="next-item__link" href="/questions/">
            <span class="next-item__label">只是想弄懂一个数字</span>
            <span class="next-item__title">问答中心</span>
            <span class="next-item__desc">控球率怎么算、补时时长为什么有出入、赔率什么时候刷新、赛后多久给结算口径——这些读法问题在问答中心按分区讲清楚了。</span>
          </a>
        </li>
        <li class="next-item" data-reveal>
          <a class="next-item__link" href="/catalog/">
            <span class="next-item__label">想先看清能拿到什么</span>
            <span class="next-item__title">数据方案档位</span>
            <span class="next-item__desc">五个档位对应四类使用对象，从赛季指标到场馆情报的包含范围逐一列出。对照完再来信，我们能直接进入具体的开通流程。</span>
          </a>
        </li>
      </ul>

      <p class="closing-line">这两处都没有答案的话，就把问题写成邮件发给 info@osis-baibo.com.cn。当季的赔率走向与轮次安排，在<a href="/">首页</a>随时能对上最新一版。</p>
    </div>
  </section>

</main>

.page-contact .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.page-contact .contact-hero {
  padding-block: var(--space-6) var(--space-4);
}

.page-contact .contact-hero__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-xl), 6vw, var(--text-3xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  max-width: 22ch;
}

.page-contact .contact-hero__lede {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .contact-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .contact-figure {
  margin-top: var(--space-2);
}

.page-contact .contact-figure .media-frame {
  margin: 0;
}

.page-contact .media-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.page-contact .contact-section {
  padding-block: var(--section-y);
}

.page-contact .contact-section--tint {
  background: var(--color-surface-alt);
}

.page-contact .chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.page-contact .chapter-head .chapter-num {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-primary);
}

.page-contact .chapter-head__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .section-lede {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-contact .channel-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.page-contact .contact-section--tint .channel-item {
  background: var(--color-surface);
}

.page-contact .channel-item__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--color-primary);
}

.page-contact .channel-item__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .channel-item__value {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-contact .channel-item__note {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .desk-grid {
  display: grid;
  gap: var(--space-4);
}

.page-contact .desk-block__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .desk-block__value {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-contact .desk-block__text {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .desk-note {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-contact .conclusion {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.page-contact .intake-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-contact .intake-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.page-contact .intake-row:nth-child(odd) {
  background: var(--color-surface-alt);
}

.page-contact .intake-row__idx {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.page-contact .intake-row__title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .intake-row__lead {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .intake-fields__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .intake-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.page-contact .intake-fields li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-contact .intake-fields li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: var(--space-1);
  height: var(--border-thin);
  background: var(--color-primary);
}

.page-contact .visit-grid {
  display: grid;
  gap: var(--space-4);
}

.page-contact .visit-figure .media-frame {
  margin: 0;
}

.page-contact .visit-detail__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .visit-address {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.page-contact .visit-detail__text {
  margin: 0 0 var(--space-2);
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .visit-detail__text a {
  color: var(--color-ink);
  text-decoration-color: var(--color-primary);
  text-underline-offset: 3px;
}

.page-contact .next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-contact .next-item__link {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease, transform 200ms ease;
}

.page-contact .next-item__link:hover,
.page-contact .next-item__link:focus-visible {
  background: var(--color-surface-deep);
  transform: translateY(-2px);
}

.page-contact .next-item__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-contact .next-item__title {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-contact .next-item__desc {
  display: block;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-contact .closing-line {
  margin: var(--space-4) 0 0;
  max-width: var(--measure);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-contact .closing-line a {
  color: var(--color-ink);
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .page-contact .channel-item__value {
    font-size: var(--text-lg);
  }
}

@media (min-width: 760px) {
  .page-contact .desk-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .page-contact .next-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .page-contact .intake-row {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-6);
  }
}

@media (min-width: 860px) {
  .page-contact .channel-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .page-contact .visit-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
    align-items: start;
  }

  .page-contact .intake-row {
    padding: var(--space-4);
  }
}