.page-contact {
  --pc-gap: calc(var(--sy-step) * 3);
  --pc-pad: calc(var(--sy-step) * 2.75);
  --pc-offset: 18px;
  background: var(--sy-deep);
  color: var(--sy-paper);
}

.page-contact .sy-breadcrumb {
  padding: calc(var(--sy-step) * 3.5) 0 0;
}

.page-contact .sy-breadcrumb__link {
  color: var(--sy-mist);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-intro {
  padding-top: calc(var(--sy-step) * 5);
}

.page-contact .contact-intro__grid {
  display: grid;
  gap: calc(var(--sy-step) * 4);
  align-items: end;
}

.page-contact .contact-intro__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--sy-step) * 2);
}

.page-contact .contact-intro__copy h1 {
  margin: 0;
  font-size: clamp(var(--sy-fs-28), 6.6vw, var(--sy-fs-44));
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.page-contact .contact-intro__copy .sy-lead {
  color: var(--sy-mist);
  max-width: 54ch;
}

.page-contact .contact-intro__figure {
  margin: 0;
  border: var(--sy-bd-strong);
  border-color: var(--sy-graphite);
  box-shadow: var(--sy-shadow);
  aspect-ratio: 16 / 9;
}

.page-contact .contact-intro__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 合作方向 ---------- */
.page-contact .contact-tracks {
  background: var(--sy-night);
  border-top: var(--sy-bd-strong);
  border-color: var(--sy-graphite);
}

.page-contact .contact-tracks__lead {
  color: var(--sy-mist);
  max-width: 62ch;
  margin-top: calc(var(--sy-step) * 1.5);
}

.page-contact .contact-tracks__grid {
  display: grid;
  gap: var(--pc-gap);
  margin-top: calc(var(--sy-step) * 4);
}

.page-contact .contact-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--sy-step) * 1.5);
  padding: var(--pc-pad);
  background: var(--sy-deep);
  border: 2px solid var(--sy-graphite);
  box-shadow: var(--sy-shadow-sm);
  transition: border-color 120ms ease, transform 120ms ease;
}

.page-contact .contact-track:hover,
.page-contact .contact-track:focus-within {
  border-color: var(--sy-lime);
  transform: translateY(-2px);
}

.page-contact .contact-track__num {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-13);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sy-night);
  background: var(--sy-lime);
  padding: 3px 9px;
}

.page-contact .contact-track__title {
  margin: 0;
  font-size: var(--sy-fs-20);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--sy-paper);
}

.page-contact .contact-track__row {
  margin: 0;
  font-size: var(--sy-fs-13);
  line-height: 1.85;
  color: var(--sy-mist);
}

.page-contact .contact-track__label {
  display: block;
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-12);
  letter-spacing: 0.12em;
  color: var(--sy-amber);
  margin-bottom: 2px;
}

.page-contact .contact-track__label--give {
  color: var(--sy-lime);
}

.page-contact .contact-track .sy-link {
  color: var(--sy-paper);
}

/* ---------- 推进节奏 ---------- */
.page-contact .contact-flow__lead {
  color: var(--sy-mist);
  max-width: 58ch;
  margin-top: calc(var(--sy-step) * 1.5);
}

.page-contact .contact-flow__figure {
  margin: calc(var(--sy-step) * 4) 0 0;
  border: var(--sy-bd-strong);
  border-color: var(--sy-graphite);
  box-shadow: var(--sy-shadow);
}

.page-contact .contact-flow__figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-contact .contact-flow__track {
  position: relative;
  list-style: none;
  margin: calc(var(--sy-step) * 4) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--sy-step) * 2.5);
}

.page-contact .contact-flow__track::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--sy-lime);
  opacity: 0.4;
}

.page-contact .contact-flow__step {
  position: relative;
  padding-left: calc(var(--sy-step) * 4);
}

.page-contact .contact-flow__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sy-lime);
  z-index: 1;
}

.page-contact .contact-flow__index {
  display: block;
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-12);
  letter-spacing: 0.16em;
  color: var(--sy-amber);
  margin-bottom: calc(var(--sy-step) * 0.75);
}

.page-contact .contact-flow__title {
  margin: 0 0 calc(var(--sy-step) * 1.5);
  font-size: var(--sy-fs-20);
  font-weight: 900;
  color: var(--sy-paper);
}

.page-contact .contact-flow__text {
  margin: 0;
  font-size: var(--sy-fs-16);
  line-height: 1.75;
  color: var(--sy-mist);
  max-width: 42ch;
}

.page-contact .contact-flow__detail {
  margin-top: calc(var(--sy-step) * 1.5);
}

.page-contact .contact-flow__summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  font-size: var(--sy-fs-13);
  color: var(--sy-mist);
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

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

.page-contact .contact-flow__summary::before {
  content: "+";
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-13);
  font-weight: 700;
  color: var(--sy-lime);
}

.page-contact .contact-flow__detail[open] .contact-flow__summary::before {
  content: "−";
}

.page-contact .contact-flow__summary:hover,
.page-contact .contact-flow__summary:focus-visible {
  color: var(--sy-lime);
  border-bottom-color: var(--sy-lime);
}

.page-contact .contact-flow__detail p {
  margin: calc(var(--sy-step) * 1.5) 0 0;
  font-size: var(--sy-fs-13);
  line-height: 1.8;
  color: var(--sy-mist);
  max-width: 44ch;
  border-left: 1px solid var(--sy-graphite);
  padding-left: calc(var(--sy-step) * 2);
}

/* ---------- 联系渠道 ---------- */
.page-contact .contact-channels {
  background: var(--sy-night);
  border-top: var(--sy-bd-strong);
  border-color: var(--sy-graphite);
}

.page-contact .contact-channels__grid {
  display: grid;
  gap: var(--pc-gap);
  margin-top: calc(var(--sy-step) * 4);
}

.page-contact .contact-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sy-step) * 1.25);
  padding: var(--pc-pad);
  background: var(--sy-paper);
  color: var(--sy-graphite);
  border: var(--sy-bd-strong);
  border-color: var(--sy-graphite);
  box-shadow: var(--sy-shadow-pop);
}

.page-contact .contact-card--mail {
  border-top: 4px solid var(--sy-lime);
}

.page-contact .contact-card--phone {
  border-top: 4px solid var(--sy-amber);
}

.page-contact .contact-card--address {
  border-top: 4px solid var(--sy-graphite);
}

.page-contact .contact-card__tag {
  align-self: flex-start;
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-12);
  letter-spacing: 0.1em;
  padding: 3px 9px;
  background: var(--sy-deep);
  color: var(--sy-paper);
}

.page-contact .contact-card__title {
  margin: 0;
  font-size: var(--sy-fs-20);
  font-weight: 900;
  color: var(--sy-deep);
}

.page-contact .contact-card__value {
  margin: 0;
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-20);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sy-deep);
  word-break: break-word;
  overflow-wrap: anywhere;
  cursor: text;
  user-select: all;
  -webkit-user-select: all;
}

.page-contact .contact-card__value--text {
  font-family: var(--sy-sans);
  font-size: var(--sy-fs-16);
  font-weight: 500;
  line-height: 1.6;
}

.page-contact .contact-card__text {
  margin: 0;
  font-size: var(--sy-fs-13);
  line-height: 1.8;
  color: var(--sy-graphite);
}

.page-contact .contact-card__hint {
  margin-top: auto;
  padding-top: calc(var(--sy-step) * 1.25);
  border-top: 1px solid var(--sy-table);
  font-size: var(--sy-fs-12);
  letter-spacing: 0.06em;
  color: var(--sy-silver);
}

.page-contact .contact-channels__note {
  margin: calc(var(--sy-step) * 3) 0 0;
  font-size: var(--sy-fs-13);
  line-height: 1.8;
  color: var(--sy-mist);
}

/* ---------- 受理时间条 ---------- */
.page-contact .contact-bar {
  background: var(--sy-lime);
  color: var(--sy-night);
  border-top: var(--sy-bd-strong);
  border-bottom: var(--sy-bd-strong);
  border-color: var(--sy-graphite);
}

.page-contact .contact-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--sy-step) * 1.5);
  padding: calc(var(--sy-step) * 2.25) 0;
}

.page-contact .contact-bar__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sy-night);
}

.page-contact .contact-bar__text {
  flex: 1 1 240px;
  margin: 0;
  font-size: var(--sy-fs-16);
  line-height: 1.6;
  color: var(--sy-night);
}

.page-contact .contact-bar__text strong {
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-right: 8px;
}

.page-contact .contact-bar__link {
  flex: none;
  font-size: var(--sy-fs-13);
  font-weight: 700;
  color: var(--sy-night);
  text-decoration: none;
  border-bottom: 2px solid var(--sy-night);
  padding-bottom: 1px;
  transition: opacity 120ms ease;
}

.page-contact .contact-bar__link:hover,
.page-contact .contact-bar__link:focus-visible {
  opacity: 0.62;
}

/* ---------- 常见问题 ---------- */
.page-contact .contact-faq__list {
  margin-top: calc(var(--sy-step) * 4);
  border-top: 2px solid var(--sy-graphite);
}

.page-contact .contact-faq__item {
  border-bottom: 1px solid var(--sy-graphite);
}

.page-contact .contact-faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--sy-step) * 1.5);
  cursor: pointer;
  list-style: none;
  padding: calc(var(--sy-step) * 2.5) 0;
  font-size: var(--sy-fs-20);
  font-weight: 700;
  line-height: 1.45;
  color: var(--sy-paper);
  transition: color 120ms ease;
}

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

.page-contact .contact-faq__item summary::before {
  content: "Q";
  flex: none;
  margin-top: 5px;
  font-family: var(--sy-mono);
  font-size: var(--sy-fs-12);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sy-lime);
  border: 1px solid var(--sy-lime);
  padding: 2px 6px;
}

.page-contact .contact-faq__item summary:hover,
.page-contact .contact-faq__item summary:focus-visible,
.page-contact .contact-faq__item[open] summary {
  color: var(--sy-lime);
}

.page-contact .contact-faq__item p {
  margin: 0;
  padding: 0 0 calc(var(--sy-step) * 2.5) 0;
  font-size: var(--sy-fs-16);
  line-height: 1.75;
  color: var(--sy-mist);
  max-width: 68ch;
}

.page-contact .contact-faq__more {
  margin: calc(var(--sy-step) * 3) 0 0;
  font-size: var(--sy-fs-16);
  line-height: 1.7;
  color: var(--sy-mist);
}

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

  .page-contact .contact-faq__item p {
    padding-left: calc(var(--sy-step) * 4.5);
  }
}

@media (min-width: 900px) {
  .page-contact .contact-intro__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: calc(var(--sy-step) * 5);
  }

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

  .page-contact .contact-flow__track {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--sy-step) * 3);
  }

  .page-contact .contact-flow__track::before {
    left: 0;
    right: 0;
    top: 5px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .page-contact .contact-flow__step {
    padding-left: 0;
    padding-top: calc(var(--sy-step) * 3.5);
  }

  .page-contact .contact-flow__step::before {
    top: 0;
    left: 0;
  }
}

@media (min-width: 1024px) {
  .page-contact .contact-tracks__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .page-contact .contact-track:nth-child(even) {
    margin-top: var(--pc-offset);
  }

  .page-contact .contact-track:nth-child(even):hover,
  .page-contact .contact-track:nth-child(even):focus-within {
    transform: translateY(-2px);
  }
}
</main>