.page-contact {
  --co-gold: var(--gold);
  --co-gold-hi: var(--gold-hi);
  --co-amber: var(--amber);
  --co-white: var(--white);
  --co-mist: var(--mist);
  --co-teal: var(--teal);
  --co-hold: var(--hold);
  --co-line: var(--line);
  --co-grid: var(--grid);
  --co-shadow: var(--shadow-soft);
  color: var(--white);
  overflow-x: clip;
}

/* ---------- 通用排版 ---------- */
.page-contact .section {
  padding: clamp(2.75rem, 7vw, 6rem) 0;
}

.page-contact .section--hair {
  border-top: 1px solid var(--co-grid);
}

.page-contact .section-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--co-gold);
  margin: 0 0 0.9rem;
}

.page-contact h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  max-width: 24ch;
  color: var(--co-white);
}

.page-contact .breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: clamp(1.25rem, 4vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--co-mist);
}

.page-contact .breadcrumb a {
  color: var(--co-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-contact .breadcrumb a:hover,
.page-contact .breadcrumb a:focus-visible {
  color: var(--co-gold-hi);
  border-bottom-color: var(--co-gold-hi);
}

.page-contact a {
  color: var(--co-gold-hi);
}

/* ---------- 首屏 ---------- */
.page-contact .co-hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2.25rem, 6vw, 4.5rem);
}

.page-contact .co-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 280px at 88% 4%, rgba(201, 162, 74, 0.17), transparent 70%),
    radial-gradient(420px 220px at 2% 96%, rgba(79, 179, 166, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(18, 34, 52, 0.72), transparent 62%);
}

.page-contact .co-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.page-contact .co-hero__kicker {
  color: var(--co-gold);
  margin: 0 0 1rem;
}

.page-contact .co-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 6.2vw, 4.1rem);
  line-height: 1.07;
  letter-spacing: -0.022em;
  margin: 0 0 1.15rem;
  max-width: 17ch;
  color: var(--co-white);
}

.page-contact .co-hero__intro {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.78;
  color: var(--co-white);
  max-width: 62ch;
  margin: 0 0 1.75rem;
}

.page-contact .co-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-contact .co-hero__aside {
  border: 2px solid var(--co-line);
  border-left: 4px solid var(--co-gold);
  background: linear-gradient(140deg, rgba(18, 34, 52, 0.96), rgba(11, 22, 34, 0.88));
  box-shadow: var(--co-shadow);
  padding: 1.35rem 1.3rem;
  align-self: end;
}

.page-contact .co-aside__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--co-gold);
  margin: 0 0 0.7rem;
}

.page-contact .co-aside__tel {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--co-white);
  margin: 0 0 0.85rem;
}

.page-contact .co-aside__hint {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--co-mist);
  margin: 0;
}

/* ---------- 章节头 ---------- */
.page-contact .co-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.page-contact .co-head__lead {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--co-mist);
  max-width: 62ch;
  margin: 0;
}

.page-contact .co-head__lead a {
  color: var(--co-gold-hi);
}

.page-contact .co-head__media {
  margin: 0;
}

.page-contact .co-head__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--co-line);
  box-shadow: var(--co-shadow);
  object-fit: cover;
}

.page-contact .media-frame__caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--co-mist);
  margin-top: 0.6rem;
}

/* ---------- 合作方向卡 ---------- */
.page-contact .co-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.page-contact .co-card {
  background: var(--co-hold);
  border: 2px solid var(--co-line);
  box-shadow: var(--co-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .co-card:hover,
.page-contact .co-card[open] {
  border-color: var(--co-gold);
}

.page-contact .co-card[open] {
  box-shadow: 6px 6px 0 rgba(201, 162, 74, 0.22);
}

.page-contact .co-card__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1.15rem 1.15rem 1.15rem 1.05rem;
  cursor: pointer;
  list-style: none;
}

.page-contact .co-card__summary::-webkit-details-marker {
  display: none;
}

.page-contact .co-card__no {
  color: var(--co-gold);
}

.page-contact .co-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--co-white);
}

.page-contact .co-card__toggle {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.page-contact .co-card__toggle::before,
.page-contact .co-card__toggle::after {
  content: "";
  position: absolute;
  background: var(--co-gold);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-contact .co-card__toggle::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.page-contact .co-card__toggle::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.page-contact .co-card[open] .co-card__toggle::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-contact .co-card__body {
  border-top: 1px solid var(--co-grid);
  padding: 1rem 1.15rem 1.3rem 1.05rem;
}

.page-contact .co-card__body p {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--co-mist);
  margin: 0 0 0.85rem;
}

.page-contact .co-card__body p a {
  color: var(--co-gold-hi);
}

.page-contact .co-card__label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  color: var(--co-gold) !important;
  margin-bottom: 0.55rem !important;
}

.page-contact .co-card__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}

.page-contact .co-card__body li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--co-mist);
}

.page-contact .co-card__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--co-gold);
}

/* ---------- 流程索引 ---------- */
.page-contact .co-head--single {
  display: block;
}

.page-contact .co-flow {
  position: relative;
  margin-top: clamp(1.75rem, 4.5vw, 3rem);
  padding-left: 3.1rem;
}

.page-contact .co-flow__track {
  position: absolute;
  left: 1.1rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 24px;
  height: auto;
  overflow: visible;
}

.page-contact .co-flow__track path {
  fill: none;
  stroke: var(--co-gold);
  stroke-width: 1.5;
  stroke-dasharray: 560;
  stroke-dashoffset: 0;
  animation: co-trace 1.3s ease-out;
}

@keyframes co-trace {
  from {
    stroke-dashoffset: 560;
  }
}

.page-contact .co-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
}

.page-contact .co-flow__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  background: linear-gradient(100deg, rgba(18, 34, 52, 0.94), rgba(11, 22, 34, 0.62));
  border: 1px solid var(--co-grid);
  border-left: 3px solid var(--co-line);
  padding: 1.1rem 1.15rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-contact .co-flow__step:hover {
  border-left-color: var(--co-amber);
  transform: translateX(4px);
}

.page-contact .co-flow__id {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--co-gold);
  border: 1px solid var(--co-line);
  padding: 0.28rem 0.42rem;
  height: fit-content;
  line-height: 1;
}

.page-contact .co-flow__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--co-white);
}

.page-contact .co-flow__body p {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--co-mist);
  margin: 0 0 0.6rem;
}

.page-contact .co-flow__eta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--co-teal);
  border-top: 1px dashed var(--co-grid);
  padding-top: 0.5rem;
  margin: 0;
  transition: color 0.2s ease;
}

.page-contact .co-flow__step:hover .co-flow__eta {
  color: var(--co-gold-hi);
}

/* ---------- 联系信息板 ---------- */
.page-contact .co-board {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--co-gold);
  background: var(--ink);
  box-shadow: var(--shadow-hard);
}

.page-contact .co-board__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.7);
}

.page-contact .co-board__inner {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.9rem);
  background: linear-gradient(118deg, rgba(11, 22, 34, 0.95) 0%, rgba(11, 22, 34, 0.8) 55%, rgba(11, 22, 34, 0.62) 100%);
}

.page-contact .co-dl {
  margin: clamp(1.4rem, 3vw, 2rem) 0 1.25rem;
  padding: 0;
  border-top: 1px solid rgba(201, 162, 74, 0.35);
}

.page-contact .co-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}

.page-contact .co-dl dt {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  color: var(--co-gold);
}

.page-contact .co-dl dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.88rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--co-white);
  overflow-wrap: anywhere;
}

.page-contact .co-board__note {
  font-size: 0.87rem;
  line-height: 1.72;
  color: var(--co-mist);
  max-width: 66ch;
  margin: 0;
}

/* ---------- 回复节奏 ---------- */
.page-contact .co-reply {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.page-contact .co-reply__lead {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--co-white);
  max-width: 60ch;
  margin: 0 0 1rem;
}

.page-contact .co-reply__sub {
  font-size: 0.9rem;
  color: var(--co-mist);
  margin: 0 0 0.8rem;
}

.page-contact .co-reply__list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-contact .co-reply__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--co-white);
}

.page-contact .co-reply__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--co-gold);
}

.page-contact .co-reply__foot {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--co-mist);
  border-left: 3px solid var(--co-teal);
  padding-left: 0.9rem;
  margin: 0;
}

.page-contact .co-reply__aside {
  border: 2px solid var(--co-line);
  background: rgba(18, 34, 52, 0.6);
  padding: 1.35rem 1.3rem;
}

.page-contact .co-reply__aside p {
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--co-mist);
  margin: 0 0 0.85rem;
}

.page-contact .co-links {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--co-grid);
}

.page-contact .co-links a {
  display: block;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--co-gold-hi);
  text-decoration: none;
  padding-left: 1.1rem;
  position: relative;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.page-contact .co-links a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--co-gold);
}

.page-contact .co-links a:hover,
.page-contact .co-links a:focus-visible {
  color: var(--co-white);
  padding-left: 1.35rem;
}

/* ---------- 常见问题 ---------- */
.page-contact .co-faq {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(1.6rem, 4vw, 2.5rem);
}

.page-contact .co-faq__item {
  border: 1px solid var(--co-grid);
  background: rgba(18, 34, 52, 0.55);
  transition: border-color 0.2s ease;
}

.page-contact .co-faq__item[open] {
  border-color: var(--co-gold);
}

.page-contact .co-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--co-white);
}

.page-contact .co-faq__q::-webkit-details-marker {
  display: none;
}

.page-contact .co-faq__q::after {
  content: "＋";
  flex: none;
  font-family: var(--font-mono);
  color: var(--co-gold);
}

.page-contact .co-faq__item[open] .co-faq__q::after {
  content: "－";
}

.page-contact .co-faq__a {
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.78;
  color: var(--co-mist);
  border-top: 1px solid var(--co-grid);
  padding-top: 1rem;
}

.page-contact .co-faq__a a {
  color: var(--co-gold-hi);
}

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

  .page-contact .co-dl__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1.5rem;
  }
}

@media (min-width: 900px) {
  .page-contact .co-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-contact .co-head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-contact .co-reply {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

@media (min-width: 1060px) {
  .page-contact .co-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: start;
  }

  .page-contact .co-card:nth-child(1) {
    margin-top: 0;
  }

  .page-contact .co-card:nth-child(2) {
    margin-top: 24px;
  }

  .page-contact .co-card:nth-child(3) {
    margin-top: 12px;
  }

  .page-contact .co-card:nth-child(4) {
    margin-top: 32px;
  }
}

@media (max-width: 560px) {
  .page-contact .co-flow {
    padding-left: 2.3rem;
  }

  .page-contact .co-flow__track {
    left: 0.75rem;
    width: 16px;
  }

  .page-contact .co-flow__step {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .co-flow__track path {
    animation: none;
  }

  .page-contact .co-flow__step,
  .page-contact .co-card,
  .page-contact .co-links a,
  .page-contact .breadcrumb a,
  .page-contact .co-faq__item,
  .page-contact .co-card__toggle::before,
  .page-contact .co-card__toggle::after {
    transition: none;
  }

  .page-contact .co-flow__step:hover {
    transform: none;
  }
}
</final>
<<<END>>>

等等，我写错了——这里不应该有“final”这些东西。让我修正一下，只保留正确的结尾标记。实际上，根据要求，输出应该以 `` 区块结束，不需要额外的标记或说明文字。让我重新输出，去掉那个多余的 `</final>` 和 `<<<END>>>`。正确的结尾就是 CSS 代码的结束括号。
<main id="main-content" class="page-contact">
  <div class="container">
    <nav class="breadcrumb" aria-label="所在位置">
      <a href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">商务合作</span>
    </nav>
  </div>

  <header class="co-hero">
    <div class="container co-hero__grid">
      <div class="co-hero__lead">
        <p class="mono-note co-hero__kicker">COOPERATION · V3.2</p>
        <h1>谈合作之前，先把方向、流程和对接人看清楚</h1>
        <p class="co-hero__intro">皇冠体肓从 2016 年起持续维护中文内容档案，目前与 8 家内容及技术支持伙伴保持长期协作。无论你要共建栏目、授权资料、推进无障碍适配，还是把站内检索与版本切换通道接到自有系统里，都能在下面找到对得上的方向和做法。</p>
        <div class="co-hero__actions">
          <a class="btn btn--primary" href="#contact-board">查看对接渠道</a>
          <a class="btn btn--ghost" href="#directions">浏览合作方向</a>
        </div>
      </div>

      <aside class="co-hero__aside" aria-label="联系提示">
        <p class="co-aside__label">工作日 9:00–18:00 有人值守</p>
        <p class="co-aside__tel">400-3887-3021</p>
        <p class="co-aside__hint">涉及会员中心或升级版切换的问题，邮件标题里写上当前版本号，客服会直接转给对应的同事跟进。</p>
      </aside>
    </div>
  </header>

  <section class="section" id="directions">
    <div class="container">
      <div class="co-head">
        <div class="co-head__text">
          <p class="section-number">01 / 合作方向</p>
          <h2>四类可以马上开始谈的合作</h2>
          <p class="co-head__lead">每一类都有明确适合的机构类型，也都有说得出名字的交付物。先对号入座，再来谈细节。想先了解我们是怎么做内容的，可以从<a href="/mission/">品牌使命</a>看起。</p>
        </div>
        <figure class="media-frame co-head__media">
          <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="俯拍的会议桌局部，深色桌面上摊开资料与标签卡，没有人物" decoding="async">
          <figcaption class="media-frame__caption">多数协作从一次需求说明和范围确认开始</figcaption>
        </figure>
      </div>

      <div class="co-cards">
        <details class="co-card">
          <summary class="co-card__summary">
            <span class="co-card__no mono-note">01</span>
            <h3 class="co-card__title">内容共建</h3>
            <span class="co-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="co-card__body">
            <p>适合品牌方、行业媒体和内容机构。一起定选题、排发布节奏，按事先约定好的方式署名。</p>
            <p class="co-card__label">开场请带上这些</p>
            <ul>
              <li>机构与栏目的介绍</li>
              <li>期望的选题方向</li>
              <li>计划上线的时间</li>
            </ul>
          </div>
        </details>

        <details class="co-card">
          <summary class="co-card__summary">
            <span class="co-card__no mono-note">02</span>
            <h3 class="co-card__title">资料授权</h3>
            <span class="co-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="co-card__body">
            <p>适合培训机构、企业内训团队、院校和行业研究机构。授权范围从通用资料包里按需选取，用于课程讲义、内部培训或研究引用。资料的完整分类可以在<a href="/notes/">内容笔记</a>里翻到。</p>
            <p class="co-card__label">开场请带上这些</p>
            <ul>
              <li>具体的使用场景</li>
              <li>使用人群与大致规模</li>
              <li>是否需要二次加工</li>
            </ul>
          </div>
        </details>

        <details class="co-card">
          <summary class="co-card__summary">
            <span class="co-card__no mono-note">03</span>
            <h3 class="co-card__title">无障碍适配</h3>
            <span class="co-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="co-card__body">
            <p>适合正在推进产品页面可读性的团队。我们在 2023 年完成了全站对比度适配，正文达到 WCAG AA 标准，这套检查项和改造流程可以整理出来交给合作方。</p>
            <p class="co-card__label">开场请带上这些</p>
            <ul>
              <li>当前的页面清单</li>
              <li>想要达到的可读性要求</li>
              <li>打算怎么验收</li>
            </ul>
          </div>
        </details>

        <details class="co-card">
          <summary class="co-card__summary">
            <span class="co-card__no mono-note">04</span>
            <h3 class="co-card__title">技术支持</h3>
            <span class="co-card__toggle" aria-hidden="true"></span>
          </summary>
          <div class="co-card__body">
            <p>适合需要接入站内检索、会员入口或版本切换通道的开发团队。我们的前端与运维共 4 人，可以安排联调窗口配合你们的排期。</p>
            <p class="co-card__label">开场请带上这些</p>
            <ul>
              <li>需要对接的功能范围</li>
              <li>你们的环境说明</li>
              <li>可用的联调时间</li>
            </ul>
          </div>
        </details>
      </div>
    </div>
  </section>

  <section class="section section--hair" id="flow">
    <div class="container">
      <div class="co-head co-head--single">
        <p class="section-number">02 / 协作流程</p>
        <h2>从第一封邮件到按期交付，一共四步</h2>
        <p class="co-head__lead">每一步都有明确的产出和大致耗时，你可以据此安排内部的评审和预算节奏。</p>
      </div>

      <div class="co-flow">
        <svg class="co-flow__track" viewBox="0 0 24 520" preserveAspectRatio="none" aria-hidden="true" focusable="false">
          <path d="M12 0 V520" />
        </svg>
        <ol class="co-flow__list">
          <li class="co-flow__step">
            <span class="co-flow__id">01</span>
            <div class="co-flow__body">
              <h3>说明需求</h3>
              <p>把机构情况、想推进的方向和期望时间一次性讲清楚。我们用一封回信确认理解是否有偏差，并把对接人固定下来。</p>
              <p class="co-flow__eta">一轮沟通 · 通常一个往返内定下方向</p>
            </div>
          </li>
          <li class="co-flow__step">
            <span class="co-flow__id">02</span>
            <div class="co-flow__body">
              <h3>确认范围</h3>
              <p>把交付物、署名方式、使用范围和关键节点逐条写进同一份说明里。双方都确认后，这份说明就是后面推进的依据。</p>
              <p class="co-flow__eta">一到两轮沟通 · 范围越具体，后面越省事</p>
            </div>
          </li>
          <li class="co-flow__step">
            <span class="co-flow__id">03</span>
            <div class="co-flow__body">
              <h3>试跑小样</h3>
              <p>先在一个小范围里做出成品给你看：一篇文章、一份授权样张，或者一段接入示例。看过效果再决定要不要放大。</p>
              <p class="co-flow__eta">三到五个工作日 · 小范围先验证</p>
            </div>
          </li>
          <li class="co-flow__step">
            <span class="co-flow__id">04</span>
            <div class="co-flow__body">
              <h3>按期交付</h3>
              <p>按确认的节点推进，中途需要调整会提前同步，不会拖到最后一刻才说。交付完成后仍保留对接人，方便后续继续扩展。</p>
              <p class="co-flow__eta">按确认节点推进 · 变更提前同步</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="section" id="contact-board">
    <div class="container">
      <div class="co-board">
        <img class="co-board__bg" src="{zhanqunpic:h:600w:1600}" width="1600" height="600" alt="暗底上的信封与档案编号标签局部特写，暖琥珀色点缀，没有人物" loading="lazy" decoding="async">
        <div class="co-board__inner">
          <p class="section-number">03 / 对接渠道</p>
          <h2>官方联系渠道与值守时间</h2>
          <dl class="co-dl">
            <div class="co-dl__row">
              <dt>合作邮箱</dt>
              <dd>kefu@h5-crown-huangguan.com.cn</dd>
            </div>
            <div class="co-dl__row">
              <dt>联系电话</dt>
              <dd>400-3887-3021</dd>
            </div>
            <div class="co-dl__row">
              <dt>登记地址</dt>
              <dd>四川省成都市武侯区科华北路62号力宝大厦南楼18层</dd>
            </div>
            <div class="co-dl__row">
              <dt>值守时间</dt>
              <dd>工作日 9:00–18:00，由真人轮值</dd>
            </div>
          </dl>
          <p class="co-board__note">涉及会员中心与升级版切换的问题，邮件标题里写上当前版本号，可以少一轮来回。来信中的机构信息与需求材料只用于本次对接。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--hair" id="reply">
    <div class="container co-reply">
      <div class="co-reply__main">
        <p class="section-number">04 / 回复节奏</p>
        <h2>把需求写清楚，回复会快很多</h2>
        <p class="co-reply__lead">邮件一般在收到后的一个工作日内首次回复。需求牵涉多方配合时，我们会分两次答复：第一次给范围判断和大致时间，第二次给具体的交付清单。</p>
        <p class="co-reply__sub">想让第一次回复就有用，建议在邮件里写清这几项：</p>
        <ul class="co-reply__list">
          <li>机构名称与所在地区</li>
          <li>想推进的合作方向</li>
          <li>期望的时间节点</li>
          <li>现有的素材、接口或场地条件</li>
        </ul>
        <p class="co-reply__foot">站点的客服团队共 3 人，负责邮件回复与问题归档，工作日 9:00–18:00 轮值。涉及会员中心与升级版切换的问题，标题注明当前版本号即可。</p>
      </div>

      <aside class="co-reply__aside">
        <p class="co-aside__label">打电话的合适时机</p>
        <p>方向已经明确了、只差当场确认细节的时候，直接拨 400-3887-3021 更省时间。</p>
        <p>方向还没想清楚，先用邮件把背景讲一遍，我们给出的范围判断会更有针对性。</p>
        <nav class="co-links" aria-label="延伸阅读">
          <a href="/experience/">体验中心：入口与切换通道</a>
          <a href="/notes/">内容笔记：版本日志与资料发布</a>
          <a href="/mission/">品牌使命：十年档案怎么做出来</a>
          <a href="/data-privacy/">数据与隐私：偏好与记录怎么管理</a>
        </nav>
      </aside>
    </div>
  </section>

  <section class="section" id="faq">
    <div class="container">
      <p class="section-number">05 / 合作常见问题</p>
      <h2>谈之前最常被问到的几件事</h2>

      <div class="co-faq">
        <details class="co-faq__item" open>
          <summary class="co-faq__q">资料授权可以用到什么范围？</summary>
          <p class="co-faq__a">通用资料包分 6 类、共 42 份文档，包含入门手册、路径图、版本说明、术语表、常见问题汇编与品牌素材。授权范围按实际使用场景单独约定，内部培训、课程讲义和研究引用都是常见场景。需要二次加工或对外分发时，在范围确认阶段说明，我们把署名与格式要求一并定下来。</p>
        </details>

        <details class="co-faq__item">
          <summary class="co-faq__q">共建内容怎么署名？</summary>
          <p class="co-faq__a">按双方确认的方式写，可以采用联合署名，也可以注明内容来源。署名写法在范围确认阶段一次性定下来，后面的每次发布不再逐篇沟通，合作周期里也不会中途改动。</p>
        </details>

        <details class="co-faq__item">
          <summary class="co-faq__q">一次协作大概要多久？</summary>
          <p class="co-faq__a">小范围的内容共建或资料授权，通常三到五周走完全部四步；涉及技术联调的会按你们的开发排期单独确认节点。流程本身是固定的，时间上的变量主要出在试跑小样和验收这两个环节。</p>
        </details>

        <details class="co-faq__item">
          <summary class="co-faq__q">谈合作时提供的材料会被怎么处理？</summary>
          <p class="co-faq__a">来信中的机构信息与需求材料只用于本次对接，不挪作他用。参与对接的同事按内部流程留存沟通记录与问题归档，你可以随时要求删除已经提供的材料，具体路径见<a href="/data-privacy/">数据与隐私</a>。</p>
        </details>
      </div>
    </div>
  </section>
</main>

.page-contact {
  --co-gold: var(--gold);
  --co-gold-hi: var(--gold-hi);
  --co-amber: var(--amber);
  --co-white: var(--white);
  --co-mist: var(--mist);
  --co-teal: var(--teal);
  --co-hold: var(--hold);
  --co-line: var(--line);
  --co-grid: var(--grid);
  --co-shadow: var(--shadow-soft);
  color: var(--white);
  overflow-x: clip;
}

/* ---------- 通用排版 ---------- */
.page-contact .section {
  padding: clamp(2.75rem, 7vw, 6rem) 0;
}

.page-contact .section--hair {
  border-top: 1px solid var(--co-grid);
}

.page-contact .section-number {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--co-gold);
  margin: 0 0 0.9rem;
}

.page-contact h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  max-width: 24ch;
  color: var(--co-white);
}

.page-contact .breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: clamp(1.25rem, 4vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--co-mist);
}

.page-contact .breadcrumb a {
  color: var(--co-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-contact .breadcrumb a:hover,
.page-contact .breadcrumb a:focus-visible {
  color: var(--co-gold-hi);
  border-bottom-color: var(--co-gold-hi);
}

.page-contact a {
  color: var(--co-gold-hi);
}

/* ---------- 首屏 ---------- */
.page-contact .co-hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2.25rem, 6vw, 4.5rem);
}

.page-contact .co-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 280px at 88% 4%, rgba(201, 162, 74, 0.17), transparent 70%),
    radial-gradient(420px 220px at 2% 96%, rgba(79, 179, 166, 0.1), transparent 72%),
    linear-gradient(180deg, rgba(18, 34, 52, 0.72), transparent 62%);
}

.page-contact .co-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
}

.page-contact .co-hero__kicker {
  color: var(--co-gold);
  margin: 0 0 1rem;
}

.page-contact .co-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 6.2vw, 4.1rem);
  line-height: 1.07;
  letter-spacing: -0.022em;
  margin: 0 0 1.15rem;
  max-width: 17ch;
  color: var(--co-white);
}

.page-contact .co-hero__intro {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.78;
  color: var(--co-white);
  max-width: 62ch;
  margin: 0 0 1.75rem;
}

.page-contact .co-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.page-contact .co-hero__aside {
  border: 2px solid var(--co-line);
  border-left: 4px solid var(--co-gold);
  background: linear-gradient(140deg, rgba(18, 34, 52, 0.96), rgba(11, 22, 34, 0.88));
  box-shadow: var(--co-shadow);
  padding: 1.35rem 1.3rem;
  align-self: end;
}

.page-contact .co-aside__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--co-gold);
  margin: 0 0 0.7rem;
}

.page-contact .co-aside__tel {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: 0.02em;
  color: var(--co-white);
  margin: 0 0 0.85rem;
}

.page-contact .co-aside__hint {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--co-mist);
  margin: 0;
}

/* ---------- 章节头 ---------- */
.page-contact .co-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.page-contact .co-head__lead {
  font-size: 0.98rem;
  line-height: 1.78;
  color: var(--co-mist);
  max-width: 62ch;
  margin: 0;
}

.page-contact .co-head__lead a {
  color: var(--co-gold-hi);
}

.page-contact .co-head__media {
  margin: 0;
}

.page-contact .co-head__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--co-line);
  box-shadow: var(--co-shadow);
  object-fit: cover;
}

.page-contact .media-frame__caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--co-mist);
  margin-top: 0.6rem;
}

/* ---------- 合作方向卡 ---------- */
.page-contact .co-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.page-contact .co-card {
  background: var(--co-hold);
  border: 2px solid var(--co-line);
  box-shadow: var(--co-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-contact .co-card:hover,
.page-contact .co-card[open] {
  border-color: var(--co-gold);
}

.page-contact .co-card[open] {
  box-shadow: 6px 6px 0 rgba(201, 162, 74, 0.22);
}

.page-contact .co-card__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 1.15rem 1.15rem 1.15rem 1.05rem;
  cursor: pointer;
  list-style: none;
}

.page-contact .co-card__summary::-webkit-details-marker {
  display: none;
}

.page-contact .co-card__no {
  color: var(--co-gold);
}

.page-contact .co-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--co-white);
}

.page-contact .co-card__toggle {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.page-contact .co-card__toggle::before,
.page-contact .co-card__toggle::after {
  content: "";
  position: absolute;
  background: var(--co-gold);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-contact .co-card__toggle::before {
  left: 0;
  top: 6px;
  width: 14px;
  height: 2px;
}

.page-contact .co-card__toggle::after {
  left: 6px;
  top: 0;
  width: 2px;
  height: 14px;
}

.page-contact .co-card[open] .co-card__toggle::after {
  transform: scaleY(0);
  opacity: 0;
}

.page-contact .co-card__body {
  border-top: 1px solid var(--co-grid);
  padding: 1rem 1.15rem 1.3rem 1.05rem;
}

.page-contact .co-card__body p {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--co-mist);
  margin: 0 0 0.85rem;
}

.page-contact .co-card__body p a {
  color: var(--co-gold-hi);
}

.page-contact .co-card__label {
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em;
  color: var(--co-gold) !important;
  margin-bottom: 0.55rem !important;
}

.page-contact .co-card__body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}

.page-contact .co-card__body li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--co-mist);
}

.page-contact .co-card__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--co-gold);
}

/* ---------- 流程索引 ---------- */
.page-contact .co-head--single {
  display: block;
}

.page-contact .co-flow {
  position: relative;
  margin-top: clamp(1.75rem, 4.5vw, 3rem);
  padding-left: 3.1rem;
}

.page-contact .co-flow__track {
  position: absolute;
  left: 1.1rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 24px;
  height: auto;
  overflow: visible;
}

.page-contact .co-flow__track path {
  fill: none;
  stroke: var(--co-gold);
  stroke-width: 1.5;
  stroke-dasharray: 560;
  stroke-dashoffset: 0;
  animation: co-trace 1.3s ease-out;
}

@keyframes co-trace {
  from {
    stroke-dashoffset: 560;
  }
}

.page-contact .co-flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.9rem, 2.4vw, 1.5rem);
}

.page-contact .co-flow__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  background: linear-gradient(100deg, rgba(18, 34, 52, 0.94), rgba(11, 22, 34, 0.62));
  border: 1px solid var(--co-grid);
  border-left: 3px solid var(--co-line);
  padding: 1.1rem 1.15rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.page-contact .co-flow__step:hover {
  border-left-color: var(--co-amber);
  transform: translateX(4px);
}

.page-contact .co-flow__id {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--co-gold);
  border: 1px solid var(--co-line);
  padding: 0.28rem 0.42rem;
  height: fit-content;
  line-height: 1;
}

.page-contact .co-flow__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--co-white);
}

.page-contact .co-flow__body p {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--co-mist);
  margin: 0 0 0.6rem;
}

.page-contact .co-flow__eta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--co-teal);
  border-top: 1px dashed var(--co-grid);
  padding-top: 0.5rem;
  margin: 0;
  transition: color 0.2s ease;
}

.page-contact .co-flow__step:hover .co-flow__eta {
  color: var(--co-gold-hi);
}

/* ---------- 联系信息板 ---------- */
.page-contact .co-board {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--co-gold);
  background: var(--ink);
  box-shadow: var(--shadow-hard);
}

.page-contact .co-board__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: saturate(0.7);
}

.page-contact .co-board__inner {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.9rem);
  background: linear-gradient(118deg, rgba(11, 22, 34, 0.95) 0%, rgba(11, 22, 34, 0.8) 55%, rgba(11, 22, 34, 0.62) 100%);
}

.page-contact .co-dl {
  margin: clamp(1.4rem, 3vw, 2rem) 0 1.25rem;
  padding: 0;
  border-top: 1px solid rgba(201, 162, 74, 0.35);
}

.page-contact .co-dl__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(201, 162, 74, 0.35);
}

.page-contact .co-dl dt {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  color: var(--co-gold);
}

.page-contact .co-dl dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(0.88rem, 1.4vw, 1.05rem);
  line-height: 1.6;
  color: var(--co-white);
  overflow-wrap: anywhere;
}

.page-contact .co-board__note {
  font-size: 0.87rem;
  line-height: 1.72;
  color: var(--co-mist);
  max-width: 66ch;
  margin: 0;
}

/* ---------- 回复节奏 ---------- */
.page-contact .co-reply {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.page-contact .co-reply__lead {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--co-white);
  max-width: 60ch;
  margin: 0 0 1rem;
}

.page-contact .co-reply__sub {
  font-size: 0.9rem;
  color: var(--co-mist);
  margin: 0 0 0.8rem;
}

.page-contact .co-reply__list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.page-contact .co-reply__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--co-white);
}

.page-contact .co-reply__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--co-gold);
}

.page-contact .co-reply__foot {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--co-mist);
  border-left: 3px solid var(--co-teal);
  padding-left: 0.9rem;
  margin: 0;
}

.page-contact .co-reply__aside {
  border: 2px solid var(--co-line);
  background: rgba(18, 34, 52, 0.6);
  padding: 1.35rem 1.3rem;
}

.page-contact .co-reply__aside p {
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--co-mist);
  margin: 0 0 0.85rem;
}

.page-contact .co-links {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--co-grid);
}

.page-contact .co-links a {
  display: block;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--co-gold-hi);
  text-decoration: none;
  padding-left: 1.1rem;
  position: relative;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.page-contact .co-links a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--co-gold);
}

.page-contact .co-links a:hover,
.page-contact .co-links a:focus-visible {
  color: var(--co-white);
  padding-left: 1.35rem;
}

/* ---------- 常见问题 ---------- */
.page-contact .co-faq {
  display: grid;
  gap: 0.7rem;
  margin-top: clamp(1.6rem, 4vw, 2.5rem);
}

.page-contact .co-faq__item {
  border: 1px solid var(--co-grid);
  background: rgba(18, 34, 52, 0.55);
  transition: border-color 0.2s ease;
}

.page-contact .co-faq__item[open] {
  border-color: var(--co-gold);
}

.page-contact .co-faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--co-white);
}

.page-contact .co-faq__q::-webkit-details-marker {
  display: none;
}

.page-contact .co-faq__q::after {
  content: "＋";
  flex: none;
  font-family: var(--font-mono);
  color: var(--co-gold);
}

.page-contact .co-faq__item[open] .co-faq__q::after {
  content: "－";
}

.page-contact .co-faq__a {
  margin: 0;
  padding: 1rem 1.15rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.78;
  color: var(--co-mist);
  border-top: 1px solid var(--co-grid);
}

.page-contact .co-faq__a a {
  color: var(--co-gold-hi);
}

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

  .page-contact .co-dl__row {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1.5rem;
  }
}

@media (min-width: 900px) {
  .page-contact .co-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-contact .co-head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .page-contact .co-reply {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

@media (min-width: 1060px) {
  .page-contact .co-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    align-items: start;
  }

  .page-contact .co-card:nth-child(1) {
    margin-top: 0;
  }

  .page-contact .co-card:nth-child(2) {
    margin-top: 24px;
  }

  .page-contact .co-card:nth-child(3) {
    margin-top: 12px;
  }

  .page-contact .co-card:nth-child(4) {
    margin-top: 32px;
  }
}

@media (max-width: 560px) {
  .page-contact .co-flow {
    padding-left: 2.3rem;
  }

  .page-contact .co-flow__track {
    left: 0.75rem;
    width: 16px;
  }

  .page-contact .co-flow__step {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .co-flow__track path {
    animation: none;
  }

  .page-contact .co-flow__step,
  .page-contact .co-card,
  .page-contact .co-links a,
  .page-contact .breadcrumb a,
  .page-contact .co-faq__item,
  .page-contact .co-card__toggle::before,
  .page-contact .co-card__toggle::after {
    transition: none;
  }

  .page-contact .co-flow__step:hover {
    transform: none;
  }
}