.page-contact {
  background: var(--c-cream);
  color: var(--c-green);
  --contact-line: rgba(18, 58, 46, 0.16);
  --contact-line-light: rgba(199, 208, 203, 0.28);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  overflow: hidden;
  padding: 36px 0 48px;
  background:
    radial-gradient(120% 90% at 96% 4%, rgba(78, 122, 92, 0.62), transparent 62%),
    var(--c-green);
  color: var(--c-cream);
}

.page-contact .contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(199, 208, 203, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 208, 203, 0.07) 1px, transparent 1px);
  background-size: 52px 52px;
}

.page-contact .contact-hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-contact .contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.page-contact .contact-hero__copy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 8vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  color: var(--c-cream);
}

.page-contact .contact-hero__lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(245, 241, 230, 0.9);
}

.page-contact .contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-contact .contact-hero__actions .btn {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.page-contact .contact-hero__facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.9375rem;
  color: rgba(245, 241, 230, 0.82);
}

.page-contact .contact-hero__facts .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-orange);
}

.page-contact .contact-clock {
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--contact-line-light);
  border-radius: 10px;
  background: rgba(10, 36, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-contact .contact-clock__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--c-tin);
}

.page-contact .contact-clock__time {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-orange);
}

.page-contact .contact-clock__note {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(245, 241, 230, 0.86);
}

.page-contact .contact-clock__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--contact-line-light);
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(245, 241, 230, 0.78);
}

.page-contact .contact-clock__list .mono {
  font-family: var(--font-mono);
  color: var(--c-tin);
  margin-right: 8px;
}

/* ---------- 通用区块 ---------- */
.page-contact .contact-section {
  padding: 52px 0;
}

.page-contact .contact-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 5.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 10px 0 0;
}

.page-contact .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--c-moss);
}

.page-contact .eyebrow--light {
  color: var(--c-orange);
}

.page-contact .contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* ---------- 时间轴 ---------- */
.page-contact .contact-timeline {
  background: var(--c-cream);
}

.page-contact .timeline {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  position: relative;
  --tl-time: 52px;
  --tl-gap: 18px;
}

.page-contact .timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--tl-time) + var(--tl-gap) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--c-moss) 0%, var(--c-orange) 78%, var(--c-orange) 100%);
  border-radius: 2px;
}

.page-contact .timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-time) 1fr;
  gap: var(--tl-gap);
  padding-bottom: 26px;
}

.page-contact .timeline__item:last-child {
  padding-bottom: 0;
}

.page-contact .timeline__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(var(--tl-time) + var(--tl-gap) / 2 - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 2px solid var(--c-moss);
}

.page-contact .timeline__time {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 2px;
  text-align: right;
  color: var(--c-rock);
  overflow-wrap: anywhere;
}

.page-contact .timeline__body h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 700;
}

.page-contact .timeline__body p {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: #3a4a43;
}

.page-contact .timeline__item--cutoff::before {
  width: 18px;
  height: 18px;
  top: 2px;
  left: calc(var(--tl-time) + var(--tl-gap) / 2 - 9px);
  background: var(--c-orange);
  border-color: var(--c-orange);
  box-shadow: 0 0 0 5px rgba(255, 106, 43, 0.16);
}

.page-contact .timeline__item--cutoff .timeline__time {
  font-size: 1.25rem;
  color: var(--c-orange);
}

.page-contact .timeline__item--cutoff .timeline__body h3 {
  color: var(--c-clay);
}

/* ---------- 图片 ---------- */
.page-contact .contact-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-deep);
}

.page-contact .contact-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.page-contact .contact-figure .figure__label {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-tin);
  background: var(--c-deep);
}

.page-contact .contact-figure--wide img {
  aspect-ratio: 3 / 2;
}

/* ---------- 预约区 ---------- */
.page-contact .contact-booking {
  background: var(--c-deep);
  color: var(--c-cream);
}

.page-contact .contact-booking__heading {
  color: var(--c-cream);
}

.page-contact .contact-booking__side {
  order: 2;
}

.page-contact .contact-sticky {
  position: static;
  padding: 22px;
  border: 1px solid var(--contact-line-light);
  border-radius: 10px;
  background: rgba(18, 58, 46, 0.6);
}

.page-contact .contact-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-contact .contact-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: start;
}

.page-contact .contact-step__num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-orange);
  border: 1px solid rgba(255, 106, 43, 0.5);
  border-radius: 4px;
  text-align: center;
  padding: 4px 0;
  line-height: 1.2;
}

.page-contact .contact-step__title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-cream);
}

.page-contact .contact-step__text {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(245, 241, 230, 0.76);
}

.page-contact .contact-sticky__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--contact-line-light);
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(245, 241, 230, 0.78);
}

.page-contact .contact-sticky__note .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-orange);
}

.page-contact .contact-form {
  order: 1;
  padding: 24px 20px 28px;
  border-radius: 12px;
  background: var(--c-panel);
  color: var(--c-green);
  box-shadow: 0 18px 40px rgba(10, 36, 28, 0.35);
}

.page-contact .contact-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 4.6vw, 1.875rem);
  margin: 0;
  color: var(--c-green);
}

.page-contact .contact-form__sub {
  margin: 8px 0 22px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--c-rock);
}

.page-contact .contact-form__req {
  color: var(--c-clay);
  font-weight: 700;
}

.page-contact .cf-field {
  display: block;
  margin-bottom: 18px;
}

.page-contact .cf-field--half {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.page-contact .cf-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-green);
}

.page-contact .cf-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-green);
  background: #fff;
  border: 1.5px solid var(--contact-line);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.page-contact .cf-input::placeholder {
  color: #9aa5a0;
  font-size: 0.9375rem;
}

.page-contact .cf-input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18);
}

.page-contact .cf-input--area {
  min-height: 116px;
  resize: vertical;
}

.page-contact .cf-hint {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--c-rock);
}

.page-contact .cf-submit {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--contact-line);
}

.page-contact .cf-submit__btn {
  min-height: 52px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 30px;
  border: none;
}

.page-contact .cf-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-rock);
}

.page-contact .cf-note a {
  color: var(--c-blue);
}

/* ---------- 联系方式 ---------- */
.page-contact .contact-channels__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}

.page-contact .channel-card {
  padding: 20px;
  border: 1.5px solid var(--contact-line);
  border-radius: 10px;
  background: var(--c-panel);
  border-top: 4px solid var(--c-orange);
}

.page-contact .channel-card--plain {
  border-top-color: var(--c-moss);
  background: rgba(199, 208, 203, 0.22);
}

.page-contact .channel-card__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--c-rock);
}

.page-contact .channel-card__value {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--c-green);
  overflow-wrap: anywhere;
}

.page-contact .channel-card__value--mail {
  font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
  letter-spacing: -0.01em;
}

.page-contact .channel-card__address {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-green);
}

.page-contact .channel-card__note {
  margin: 10px 0 16px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #3a4a43;
}

.page-contact .channel-card .copy-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.875rem;
}

/* ---------- 准备清单 ---------- */
.page-contact .contact-prep {
  background: rgba(199, 208, 203, 0.26);
}

.page-contact .contact-prep__lead {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #3a4a43;
}

.page-contact .prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .prep-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 16px 18px;
  background: var(--c-panel);
  border-radius: 10px;
  border-left: 4px solid var(--c-moss);
}

.page-contact .prep-item__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-orange);
}

.page-contact .prep-item__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--c-green);
}

.page-contact .prep-item__text {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #3a4a43;
}

/* ---------- 片区 ---------- */
.page-contact .contact-zones__lead {
  margin: 14px 0 0;
  max-width: 46em;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: #3a4a43;
}

.page-contact .contact-zones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 28px;
}

.page-contact .zone-map {
  padding: 16px;
  border: 1.5px solid var(--contact-line);
  border-radius: 10px;
  background: var(--c-panel);
}

.page-contact .zone-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-contact .zone-map__cells rect {
  fill: rgba(78, 122, 92, 0.16);
  stroke: var(--c-moss);
  stroke-width: 1.5;
  transition: fill 180ms ease;
}

.page-contact .zone-map__cells rect:hover {
  fill: var(--c-orange);
  stroke: var(--c-orange);
}

.page-contact .zone-map__labels text {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  fill: var(--c-green);
  text-anchor: middle;
  pointer-events: none;
}

.page-contact .zone-map__hint {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--c-rock);
}

.page-contact .zone-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1.5px solid var(--contact-line);
  background: var(--c-panel);
}

.page-contact .zone-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.page-contact .zone-table__caption {
  padding: 14px 16px 10px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--c-rock);
}

.page-contact .zone-table th,
.page-contact .zone-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--contact-line);
  line-height: 1.5;
}

.page-contact .zone-table thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--c-rock);
  background: rgba(199, 208, 203, 0.28);
  border-bottom: 1.5px solid var(--c-moss);
}

.page-contact .zone-table tbody th {
  font-family: var(--font-mono);
  color: var(--c-orange);
  font-weight: 700;
  width: 64px;
}

.page-contact .zone-table tbody tr:last-child th,
.page-contact .zone-table tbody tr:last-child td {
  border-bottom: none;
}

.page-contact .zone-table .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-green);
  white-space: nowrap;
}

.page-contact .contact-zones .contact-figure--wide {
  margin-top: 26px;
}

.page-contact .contact-zones__extend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 26px;
}

.page-contact .contact-zones__extend-title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-green);
  padding-left: 12px;
  border-left: 4px solid var(--c-blue);
}

.page-contact .contact-zones__extend p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #3a4a43;
}

.page-contact .contact-zones__links {
  margin: 24px 0 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #3a4a43;
}

.page-contact .contact-zones__links a {
  color: var(--c-blue);
  font-weight: 700;
}

/* ---------- 桌面 ---------- */
@media (min-width: 860px) {
  .page-contact .contact-hero {
    padding: 56px 0 68px;
  }

  .page-contact .contact-hero__grid {
    grid-template-columns: 1.35fr 0.85fr;
    gap: 40px;
    align-items: start;
  }

  .page-contact .contact-section {
    padding: 76px 0;
  }

  .page-contact .contact-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
    gap: 48px;
    align-items: start;
  }

  .page-contact .timeline {
    --tl-time: 76px;
    --tl-gap: 28px;
    margin-top: 38px;
  }

  .page-contact .timeline__time {
    font-size: 0.9375rem;
  }

  .page-contact .contact-split--booking {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 44px;
  }

  .page-contact .contact-booking__side {
    order: 1;
  }

  .page-contact .contact-form {
    order: 2;
    padding: 34px 34px 36px;
  }

  .page-contact .contact-sticky {
    position: sticky;
    top: 32px;
    padding: 26px 26px 28px;
  }

  .page-contact .cf-field--half {
    width: calc(50% - 10px);
    margin-right: 16px;
  }

  .page-contact .cf-field--half:nth-of-type(even) {
    margin-right: 0;
  }

  .page-contact .cf-submit {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .page-contact .contact-channels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .page-contact .contact-split--prep {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 48px;
    align-items: start;
  }

  .page-contact .contact-prep__intro {
    position: sticky;
    top: 32px;
  }

  .page-contact .prep-item {
    padding: 18px 22px 20px;
  }

  .page-contact .contact-zones__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 26px;
    align-items: start;
  }

  .page-contact .contact-zones__extend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .page-contact .contact-figure img {
    aspect-ratio: 3 / 4;
  }

  .page-contact .contact-figure--wide img {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 1180px) {
  .page-contact .contact-hero {
    padding: 68px 0 84px;
  }

  .page-contact .contact-section {
    padding: 92px 0;
  }

  .page-contact .contact-split {
    gap: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .cf-input,
  .page-contact .zone-map__cells rect {
    transition: none;
  }
}


<main id="main-content" class="page-contact">
  <nav class="breadcrumbs" aria-label="面包屑导航">
    <ol>
      <li><a href="/">首页</a></li>
      <li aria-current="page">咨询与预约</li>
    </ol>
  </nav>

  <header class="contact-hero">
    <div class="wrap">
      <div class="contact-hero__grid">
        <div class="contact-hero__copy">
          <p class="eyebrow">06 / 咨询与预约</p>
          <h1>18:00 前约，明天上午到现场</h1>
          <p class="contact-hero__lead">
            PP王电子的元件供应与上门维修，都从这一页发起。工作日 18:00 前把型号和区域交给我们，次日上午工程师带着备件出门。
          </p>
          <div class="contact-hero__actions">
            <a class="btn btn--primary" href="#booking">填写预约</a>
            <button class="btn btn--ghost copy-btn" type="button" data-copy="400-8740-7044">
              <span data-copy-text>复制电话</span>
            </button>
          </div>
          <ul class="contact-hero__facts">
            <li><span class="mono">24</span> 名维修工程师</li>
            <li><span class="mono">6</span> 个本地服务片区</li>
            <li><span class="mono">9:00–18:00</span> 客服在线</li>
          </ul>
        </div>

        <aside class="contact-clock">
          <p class="contact-clock__label">今天的截止时刻</p>
          <p class="contact-clock__time">18:00</p>
          <p class="contact-clock__note">这一刻之前递进来，明天上午就能排到人。过了这一刻，顺延到下一个工作日上午。</p>
          <ul class="contact-clock__list">
            <li><span class="mono">上午</span> 09:00—12:00 上门时段</li>
            <li><span class="mono">下午</span> 14:00—17:00 结果回告</li>
          </ul>
        </aside>
      </div>
    </div>
  </header>

  <section class="contact-section contact-timeline" id="schedule" data-section data-reveal>
    <div class="wrap">
      <div class="contact-split">
        <div class="contact-split__main">
          <p class="eyebrow">01 / 一天怎么走</p>
          <h2>从提交到收工，五个时刻</h2>
          <ol class="timeline">
            <li class="timeline__item">
              <span class="timeline__time mono">09:00</span>
              <div class="timeline__body">
                <h3>客服开工，开始接单</h3>
                <p>电话、邮箱和表单同时开启。设备型号和所在区域说清楚，排期当场就能定下来。</p>
              </div>
            </li>
            <li class="timeline__item">
              <span class="timeline__time mono">12:00</span>
              <div class="timeline__body">
                <h3>工程师看单，判断带什么件</h3>
                <p>复杂故障会先回一通电话。问清现象再出门，省得师傅到了现场才发现拿错件。</p>
              </div>
            </li>
            <li class="timeline__item timeline__item--cutoff">
              <span class="timeline__time mono">18:00</span>
              <div class="timeline__body">
                <h3>当天排期的最后节点</h3>
                <p>这是预约明天上午的截止线。想赶次日上午的门，就把需求压在这一刻之前送到。</p>
              </div>
            </li>
            <li class="timeline__item">
              <span class="timeline__time mono">次日 09:00</span>
              <div class="timeline__body">
                <h3>上门时段，从最近的片区出发</h3>
                <p>六个片区按方位排线，师傅从离您最近的那个点出发，一个上午完成现场处理。</p>
              </div>
            </li>
            <li class="timeline__item">
              <span class="timeline__time mono">次日 14:00</span>
              <div class="timeline__body">
                <h3>处理结果当天回告</h3>
                <p>换了什么件、为什么换、后续怎么用得住，一并写进回告，方便您向上说明。</p>
              </div>
            </li>
          </ol>
        </div>

        <figure class="contact-figure">
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="工程师工具箱打开摆放，万用表、镊子、防静电手环与备件盒整齐排列">
          <figcaption class="figure__label">上门工具包 · 万用表 / 镊子 / 防静电手环 / 常用备件盒</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <div class="band band--orange" aria-hidden="true"></div>

  <section class="contact-section contact-booking" id="booking" data-section data-reveal>
    <div class="wrap">
      <div class="contact-split contact-split--booking">
        <aside class="contact-booking__side">
          <div class="contact-sticky">
            <p class="eyebrow eyebrow--light">02 / 提交之后</p>
            <h2 class="contact-booking__heading">填完这张表，剩下三步</h2>
            <ol class="contact-steps">
              <li class="contact-step">
                <span class="contact-step__num mono">01</span>
                <p class="contact-step__title">需求进单</p>
                <p class="contact-step__text">型号、数量和区域写全，工程师少跑一趟。</p>
              </li>
              <li class="contact-step">
                <span class="contact-step__num mono">02</span>
                <p class="contact-step__title">电话确认</p>
                <p class="contact-step__text">确认时间窗和带的备件，两边都不空等。</p>
              </li>
              <li class="contact-step">
                <span class="contact-step__num mono">03</span>
                <p class="contact-step__title">上门处理</p>
                <p class="contact-step__text">带件到场，换下的旧件留在您手上备查。</p>
              </li>
            </ol>
            <p class="contact-sticky__note">填表不方便时，直接打这个号：<br><span class="mono">400-8740-7044</span></p>
          </div>
        </aside>

        <div class="contact-form">
          <h2 class="contact-form__title">预约与询价</h2>
          <p class="contact-form__sub">带 <span class="contact-form__req">*</span> 的项目尽量填全，师傅据此决定带哪些备件出门。</p>

          <div class="cf-field">
            <label class="cf-label" for="cf-model">元件型号或设备型号 <span class="contact-form__req">*</span></label>
            <input class="cf-input" id="cf-model" name="model" type="text" placeholder="例：贴片电阻 0805 10kΩ / 整机型号 XYZ-220">
            <p class="cf-hint">丝印看不清就写封装和位置，比如「电源板上第二颗电解电容」。</p>
          </div>

          <div class="cf-field cf-field--half">
            <label class="cf-label" for="cf-qty">数量 <span class="contact-form__req">*</span></label>
            <input class="cf-input" id="cf-qty" name="qty" type="text" inputmode="numeric" placeholder="例：200 只">
          </div>

          <div class="cf-field cf-field--half">
            <label class="cf-label" for="cf-type">需求类型</label>
            <select class="cf-input" id="cf-type" name="type">
              <option>上门维修</option>
              <option>元件采购</option>
              <option>选型咨询</option>
              <option>批量备货</option>
            </select>
          </div>

          <div class="cf-field">
            <label class="cf-label" for="cf-desc">故障现象或需求描述</label>
            <textarea class="cf-input cf-input--area" id="cf-desc" name="desc" rows="4" placeholder="例：开机十分钟后风扇停转，闻到轻微焦味，已换过一颗 MOS 管"></textarea>
            <p class="cf-hint">什么时候出现、持续多久、有没有异响异味，写进去比只写「坏了」有用得多。</p>
          </div>

          <div class="cf-field cf-field--half">
            <label class="cf-label" for="cf-area">所在区域 <span class="contact-form__req">*</span></label>
            <select class="cf-input" id="cf-area" name="area">
              <option>太原 · 片区 01 城北</option>
              <option>太原 · 片区 02 城西</option>
              <option>太原 · 片区 03 城南</option>
              <option>太原 · 片区 04 汾东</option>
              <option>太原 · 片区 05 东山</option>
              <option>太原 · 片区 06 晋源</option>
              <option>山西省内其他地市</option>
              <option>山西省外（走发货）</option>
            </select>
          </div>

          <div class="cf-field cf-field--half">
            <label class="cf-label" for="cf-window">期望时间窗</label>
            <select class="cf-input" id="cf-window" name="window">
              <option>次日上午 09:00—12:00</option>
              <option>次日下午 14:00—17:00</option>
              <option>本周内任意工作日上午</option>
              <option>先电话沟通再定</option>
            </select>
          </div>

          <div class="cf-field">
            <label class="cf-label" for="cf-phone">联系电话 <span class="contact-form__req">*</span></label>
            <input class="cf-input" id="cf-phone" name="phone" type="tel" placeholder="例：138 0000 0000，填一个随时能接的号">
            <p class="cf-hint">上午出发前会先拨一次，确认有人在场再动身。</p>
          </div>

          <div class="cf-submit">
            <button class="btn btn--primary cf-submit__btn" type="button">提交预约</button>
            <p class="cf-note">工作时段内提交，四小时内会有人与您联系。信息的收集与使用见 <a href="/privacy-center/">隐私中心</a>。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="contact-section contact-channels" data-section data-reveal>
    <div class="wrap">
      <p class="eyebrow">03 / 直接找人</p>
      <h2>电话、邮箱与在线时段</h2>
      <div class="contact-channels__grid">
        <article class="channel-card">
          <p class="channel-card__label">客服电话</p>
          <p class="channel-card__value mono">400-8740-7044</p>
          <p class="channel-card__note">急单、当天要确认明天能不能排上，打这个最快。工作时段内通常三声之内有人接。</p>
          <button class="btn btn--outline copy-btn" type="button" data-copy="400-8740-7044">
            <span data-copy-text>复制号码</span>
          </button>
        </article>

        <article class="channel-card">
          <p class="channel-card__label">客服邮箱</p>
          <p class="channel-card__value channel-card__value--mail">contact@chip-ppwang.com.cn</p>
          <p class="channel-card__note">批量清单、选型表格、需要留档的正式沟通发邮件更省事，附件可以直接带上 BOM。</p>
          <button class="btn btn--outline copy-btn" type="button" data-copy="contact@chip-ppwang.com.cn">
            <span data-copy-text>复制邮箱</span>
          </button>
        </article>

        <article class="channel-card channel-card--plain">
          <p class="channel-card__label">服务地址</p>
          <p class="channel-card__address">山西省太原市小店区电子街66号元件服务园3层</p>
          <p class="channel-card__note">自提和送修请先来电。出货区与接待区分开，提前说一声有人在门口接您。</p>
        </article>

        <article class="channel-card channel-card--plain">
          <p class="channel-card__label">在线时段</p>
          <p class="channel-card__address">工作日 9:00—18:00</p>
          <p class="channel-card__note">周末与节假日递进来的需求，顺延到下一个工作日早上处理，排期顺序照旧。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="contact-section contact-prep" data-section data-reveal>
    <div class="wrap">
      <div class="contact-split contact-split--prep">
        <div class="contact-prep__intro">
          <p class="eyebrow">04 / 上门之前</p>
          <h2>把这五样准备好，一趟就能修到位</h2>
          <p class="contact-prep__lead">现场少一件东西，往往就要多跑一趟。花五分钟收齐，比事后补电话省事。</p>
        </div>
        <ol class="prep-list">
          <li class="prep-item">
            <span class="prep-item__num mono">1</span>
            <div>
              <h3 class="prep-item__title">设备的整机型号与出厂编号</h3>
              <p class="prep-item__text">同款机器的不同批次，板子可能不通用。有编号，师傅就能提前配到对的件。</p>
            </div>
          </li>
          <li class="prep-item">
            <span class="prep-item__num mono">2</span>
            <div>
              <h3 class="prep-item__title">故障发生时的具体表现</h3>
              <p class="prep-item__text">开机多久出现、负载多大时出现、有没有异响或异味，说清楚比一句「不工作」管用。</p>
            </div>
          </li>
          <li class="prep-item">
            <span class="prep-item__num mono">3</span>
            <div>
              <h3 class="prep-item__title">已经换过的元件与位置</h3>
              <p class="prep-item__text">换过哪颗、换完有没有好转，这两句能直接排除掉一半的怀疑方向。</p>
            </div>
          </li>
          <li class="prep-item">
            <span class="prep-item__num mono">4</span>
            <div>
              <h3 class="prep-item__title">现场的供电与防静电条件</h3>
              <p class="prep-item__text">地线是否可靠、有没有防静电工位，师傅据此决定要不要自带防护装备。</p>
            </div>
          </li>
          <li class="prep-item">
            <span class="prep-item__num mono">5</span>
            <div>
              <h3 class="prep-item__title">可以停机的时段和在场人员</h3>
              <p class="prep-item__text">维修要断电，谁在旁边配合、哪段时间不影响出货，最好提前说定。</p>
            </div>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <div class="band" aria-hidden="true"></div>

  <section class="contact-section contact-zones" data-section data-reveal>
    <div class="wrap">
      <p class="eyebrow">05 / 到您那儿要多久</p>
      <h2>太原本地六个片区，按方位排线</h2>
      <p class="contact-zones__lead">片区按仓库出发的路况和车程来分，不按行政区划线。同一片区的单子会并到一位师傅手上，路上省下的时间用来干活。</p>

      <div class="contact-zones__grid">
        <div class="zone-map">
          <svg viewBox="0 0 480 300" role="img" aria-label="太原本地六个服务片区分布示意图">
            <g class="zone-map__cells">
              <rect x="20" y="20" width="140" height="130" rx="6"><title>片区 01 城北 · 预计到达 08:30—10:00</title></rect>
              <rect x="170" y="20" width="140" height="130" rx="6"><title>片区 02 城西 · 预计到达 09:00—10:30</title></rect>
              <rect x="320" y="20" width="140" height="130" rx="6"><title>片区 03 城南 · 预计到达 09:00—11:00</title></rect>
              <rect x="20" y="170" width="140" height="110" rx="6"><title>片区 04 汾东 · 预计到达 10:00—11:30</title></rect>
              <rect x="170" y="170" width="140" height="110" rx="6"><title>片区 05 东山 · 预计到达 10:30—12:00</title></rect>
              <rect x="320" y="170" width="140" height="110" rx="6"><title>片区 06 晋源 · 预计到达 11:00—12:00</title></rect>
            </g>
            <g class="zone-map__labels">
              <text x="90" y="92">01</text>
              <text x="240" y="92">02</text>
              <text x="390" y="92">03</text>
              <text x="90" y="232">04</text>
              <text x="240" y="232">05</text>
              <text x="390" y="232">06</text>
            </g>
          </svg>
          <p class="zone-map__hint">把指针停在任一分区上，能看到该片区对应的到达时段。</p>
        </div>

        <div class="zone-table-wrap">
          <table class="zone-table">
            <caption class="zone-table__caption">六个片区的预计到达时段</caption>
            <thead>
              <tr>
                <th scope="col">片区</th>
                <th scope="col">主要方向</th>
                <th scope="col">预计到达</th>
              </tr>
            </thead>
            <tbody>
              <tr><th scope="row">01</th><td>城北 · 尖草坪一带</td><td class="mono">08:30—10:00</td></tr>
              <tr><th scope="row">02</th><td>城西 · 万柏林一带</td><td class="mono">09:00—10:30</td></tr>
              <tr><th scope="row">03</th><td>城南 · 小店北部</td><td class="mono">09:00—11:00</td></tr>
              <tr><th scope="row">04</th><td>汾东 · 综改示范区</td><td class="mono">10:00—11:30</td></tr>
              <tr><th scope="row">05</th><td>东山 · 迎泽东部</td><td class="mono">10:30—12:00</td></tr>
              <tr><th scope="row">06</th><td>晋源 · 晋源新城</td><td class="mono">11:00—12:00</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <figure class="contact-figure contact-figure--wide">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="太原本地仓库发货区与车辆装卸口，工作人员把打包好的元件箱推上货车" loading="lazy" decoding="async">
        <figcaption class="figure__label">太原元件仓 · 发货区与装卸口，上午出车的备件从这里装车</figcaption>
      </figure>

      <div class="contact-zones__extend">
        <div>
          <h3 class="contact-zones__extend-title">山西其他地市</h3>
          <p>省内 11 个地市都在服务范围内。维修需求提前一个工作日约，工程师按线路集中安排；元件订单当天备货，走快递或专线。</p>
        </div>
        <div>
          <h3 class="contact-zones__extend-title">省外 26 个省份</h3>
          <p>省外以元件发货为主，工作日 18:00 前的订单当天出库。需要技术判断的，先把型号和故障描述发过来，工程师电话里给方向。</p>
        </div>
      </div>

      <p class="contact-zones__links">还在比价？可以先看 <a href="/products/">元件供应服务与两家报价对照</a>。起订量、含税和运费怎么算，<a href="/knowledge/">知识中心</a>里有逐条说明。</p>
    </div>
  </section>
</main>

.page-contact {
  background: var(--c-cream);
  color: var(--c-green);
  --contact-line: rgba(18, 58, 46, 0.16);
  --contact-line-light: rgba(199, 208, 203, 0.28);
}

/* ---------- 首屏 ---------- */
.page-contact .contact-hero {
  position: relative;
  overflow: hidden;
  padding: 36px 0 48px;
  background:
    radial-gradient(120% 90% at 96% 4%, rgba(78, 122, 92, 0.62), transparent 62%),
    var(--c-green);
  color: var(--c-cream);
}

.page-contact .contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(199, 208, 203, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 208, 203, 0.07) 1px, transparent 1px);
  background-size: 52px 52px;
}

.page-contact .contact-hero > .wrap {
  position: relative;
  z-index: 1;
}

.page-contact .contact-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.page-contact .contact-hero__copy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 8vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  color: var(--c-cream);
}

.page-contact .contact-hero__lead {
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(245, 241, 230, 0.9);
}

.page-contact .contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-contact .contact-hero__actions .btn {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.page-contact .contact-hero__facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.9375rem;
  color: rgba(245, 241, 230, 0.82);
}

.page-contact .contact-hero__facts .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-orange);
}

.page-contact .contact-clock {
  position: relative;
  padding: 22px 22px 24px;
  border: 1px solid var(--contact-line-light);
  border-radius: 10px;
  background: rgba(10, 36, 28, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-contact .contact-clock__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--c-tin);
}

.page-contact .contact-clock__time {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-orange);
}

.page-contact .contact-clock__note {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(245, 241, 230, 0.86);
}

.page-contact .contact-clock__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--contact-line-light);
  display: grid;
  gap: 8px;
  font-size: 0.875rem;
  color: rgba(245, 241, 230, 0.78);
}

.page-contact .contact-clock__list .mono {
  font-family: var(--font-mono);
  color: var(--c-tin);
  margin-right: 8px;
}

/* ---------- 通用区块 ---------- */
.page-contact .contact-section {
  padding: 52px 0;
}

.page-contact .contact-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 5.4vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 10px 0 0;
}

.page-contact .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--c-moss);
}

.page-contact .eyebrow--light {
  color: var(--c-orange);
}

.page-contact .contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

/* ---------- 时间轴 ---------- */
.page-contact .contact-timeline {
  background: var(--c-cream);
}

.page-contact .timeline {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  position: relative;
  --tl-time: 52px;
  --tl-gap: 18px;
}

.page-contact .timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--tl-time) + var(--tl-gap) / 2 - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--c-moss) 0%, var(--c-orange) 78%, var(--c-orange) 100%);
  border-radius: 2px;
}

.page-contact .timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--tl-time) 1fr;
  gap: var(--tl-gap);
  padding-bottom: 26px;
}

.page-contact .timeline__item:last-child {
  padding-bottom: 0;
}

.page-contact .timeline__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(var(--tl-time) + var(--tl-gap) / 2 - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 2px solid var(--c-moss);
}

.page-contact .timeline__time {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 2px;
  text-align: right;
  color: var(--c-rock);
  overflow-wrap: anywhere;
}

.page-contact .timeline__body h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 700;
}

.page-contact .timeline__body p {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: #3a4a43;
}

.page-contact .timeline__item--cutoff::before {
  width: 18px;
  height: 18px;
  top: 2px;
  left: calc(var(--tl-time) + var(--tl-gap) / 2 - 9px);
  background: var(--c-orange);
  border-color: var(--c-orange);
  box-shadow: 0 0 0 5px rgba(255, 106, 43, 0.16);
}

.page-contact .timeline__item--cutoff .timeline__time {
  font-size: 1.25rem;
  color: var(--c-orange);
}

.page-contact .timeline__item--cutoff .timeline__body h3 {
  color: var(--c-clay);
}

/* ---------- 图片 ---------- */
.page-contact .contact-figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-deep);
}

.page-contact .contact-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.page-contact .contact-figure .figure__label {
  display: block;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--c-tin);
  background: var(--c-deep);
}

.page-contact .contact-figure--wide img {
  aspect-ratio: 3 / 2;
}

/* ---------- 预约区 ---------- */
.page-contact .contact-booking {
  background: var(--c-deep);
  color: var(--c-cream);
}

.page-contact .contact-booking__heading {
  color: var(--c-cream);
}

.page-contact .contact-booking__side {
  order: 2;
}

.page-contact .contact-sticky {
  position: static;
  padding: 22px;
  border: 1px solid var(--contact-line-light);
  border-radius: 10px;
  background: rgba(18, 58, 46, 0.6);
}

.page-contact .contact-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.page-contact .contact-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: start;
}

.page-contact .contact-step__num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-orange);
  border: 1px solid rgba(255, 106, 43, 0.5);
  border-radius: 4px;
  text-align: center;
  padding: 4px 0;
  line-height: 1.2;
}

.page-contact .contact-step__title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-cream);
}

.page-contact .contact-step__text {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(245, 241, 230, 0.76);
}

.page-contact .contact-sticky__note {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--contact-line-light);
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(245, 241, 230, 0.78);
}

.page-contact .contact-sticky__note .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-orange);
}

.page-contact .contact-form {
  order: 1;
  padding: 24px 20px 28px;
  border-radius: 12px;
  background: var(--c-panel);
  color: var(--c-green);
  box-shadow: 0 18px 40px rgba(10, 36, 28, 0.35);
}

.page-contact .contact-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 4.6vw, 1.875rem);
  margin: 0;
  color: var(--c-green);
}

.page-contact .contact-form__sub {
  margin: 8px 0 22px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--c-rock);
}

.page-contact .contact-form__req {
  color: var(--c-clay);
  font-weight: 700;
}

.page-contact .cf-field {
  display: block;
  margin-bottom: 18px;
}

.page-contact .cf-field--half {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}

.page-contact .cf-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-green);
}

.page-contact .cf-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-green);
  background: #fff;
  border: 1.5px solid var(--contact-line);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.page-contact .cf-input::placeholder {
  color: #9aa5a0;
  font-size: 0.9375rem;
}

.page-contact .cf-input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18);
}

.page-contact .cf-input--area {
  min-height: 116px;
  resize: vertical;
}

.page-contact .cf-hint {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--c-rock);
}

.page-contact .cf-submit {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--contact-line);
}

.page-contact .cf-submit__btn {
  min-height: 52px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 30px;
  border: none;
}

.page-contact .cf-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--c-rock);
}

.page-contact .cf-note a {
  color: var(--c-blue);
}

/* ---------- 联系方式 ---------- */
.page-contact .contact-channels__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}

.page-contact .channel-card {
  padding: 20px;
  border: 1.5px solid var(--contact-line);
  border-top: 4px solid var(--c-orange);
  border-radius: 10px;
  background: var(--c-panel);
}

.page-contact .channel-card--plain {
  border-top-color: var(--c-moss);
  background: rgba(199, 208, 203, 0.22);
}

.page-contact .channel-card__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--c-rock);
}

.page-contact .channel-card__value {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.25rem, 5.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--c-green);
  overflow-wrap: anywhere;
}

.page-contact .channel-card__value--mail {
  font-size: clamp(0.9375rem, 3.5vw, 1.125rem);
  letter-spacing: -0.01em;
}

.page-contact .channel-card__address {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-green);
}

.page-contact .channel-card__note {
  margin: 10px 0 16px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #3a4a43;
}

.page-contact .channel-card .copy-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.875rem;
}

/* ---------- 准备清单 ---------- */
.page-contact .contact-prep {
  background: rgba(199, 208, 203, 0.26);
}

.page-contact .contact-prep__lead {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #3a4a43;
}

.page-contact .prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.page-contact .prep-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 16px 18px;
  background: var(--c-panel);
  border-radius: 10px;
  border-left: 4px solid var(--c-moss);
}

.page-contact .prep-item__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-orange);
}

.page-contact .prep-item__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--c-green);
}

.page-contact .prep-item__text {
  margin: 6px 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #3a4a43;
}

/* ---------- 片区 ---------- */
.page-contact .contact-zones__lead {
  margin: 14px 0 0;
  max-width: 46em;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: #3a4a43;
}

.page-contact .contact-zones__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 28px;
}

.page-contact .zone-map {
  padding: 16px;
  border: 1.5px solid var(--contact-line);
  border-radius: 10px;
  background: var(--c-panel);
}

.page-contact .zone-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-contact .zone-map__cells rect {
  fill: rgba(78, 122, 92, 0.16);
  stroke: var(--c-moss);
  stroke-width: 1.5;
  transition: fill 180ms ease;
}

.page-contact .zone-map__cells rect:hover {
  fill: var(--c-orange);
  stroke: var(--c-orange);
}

.page-contact .zone-map__labels text {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  fill: var(--c-green);
  text-anchor: middle;
  pointer-events: none;
}

.page-contact .zone-map__hint {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--c-rock);
}

.page-contact .zone-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1.5px solid var(--contact-line);
  background: var(--c-panel);
}

.page-contact .zone-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.page-contact .zone-table__caption {
  padding: 14px 16px 10px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--c-rock);
}

.page-contact .zone-table th,
.page-contact .zone-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--contact-line);
  line-height: 1.5;
}

.page-contact .zone-table thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--c-rock);
  background: rgba(199, 208, 203, 0.28);
  border-bottom: 1.5px solid var(--c-moss);
}

.page-contact .zone-table tbody th {
  font-family: var(--font-mono);
  color: var(--c-orange);
  font-weight: 700;
  width: 64px;
}

.page-contact .zone-table tbody tr:last-child th,
.page-contact .zone-table tbody tr:last-child td {
  border-bottom: none;
}

.page-contact .zone-table .mono {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-green);
  white-space: nowrap;
}

.page-contact .contact-zones .contact-figure--wide {
  margin-top: 26px;
}

.page-contact .contact-zones__extend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 26px;
}

.page-contact .contact-zones__extend-title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-green);
  padding-left: 12px;
  border-left: 4px solid var(--c-blue);
}

.page-contact .contact-zones__extend p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #3a4a43;
}

.page-contact .contact-zones__links {
  margin: 24px 0 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #3a4a43;
}

.page-contact .contact-zones__links a {
  color: var(--c-blue);
  font-weight: 700;
}

/* ---------- 桌面 ---------- */
@media (min-width: 860px) {
  .page-contact .contact-hero {
    padding: 56px 0 68px;
  }

  .page-contact .contact-hero__grid {
    grid-template-columns: 1.35fr 0.85fr;
    gap: 40px;
    align-items: start;
  }

  .page-contact .contact-section {
    padding: 76px 0;
  }

  .page-contact .contact-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
    gap: 48px;
    align-items: start;
  }

  .page-contact .timeline {
    --tl-time: 76px;
    --tl-gap: 28px;
    margin-top: 38px;
  }

  .page-contact .timeline__time {
    font-size: 0.9375rem;
  }

  .page-contact .contact-split--booking {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 44px;
  }

  .page-contact .contact-booking__side {
    order: 1;
  }

  .page-contact .contact-form {
    order: 2;
    padding: 34px 34px 36px;
  }

  .page-contact .contact-sticky {
    position: sticky;
    top: 32px;
    padding: 26px 26px 28px;
  }

  .page-contact .cf-field--half {
    width: calc(50% - 10px);
    margin-right: 16px;
  }

  .page-contact .cf-field--half:nth-of-type(even) {
    margin-right: 0;
  }

  .page-contact .cf-submit {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .page-contact .contact-channels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .page-contact .contact-split--prep {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: 48px;
    align-items: start;
  }

  .page-contact .contact-prep__intro {
    position: sticky;
    top: 32px;
  }

  .page-contact .prep-item {
    padding: 18px 22px 20px;
  }

  .page-contact .contact-zones__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 26px;
    align-items: start;
  }

  .page-contact .contact-zones__extend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (min-width: 1180px) {
  .page-contact .contact-hero {
    padding: 68px 0 84px;
  }

  .page-contact .contact-section {
    padding: 92px 0;
  }

  .page-contact .contact-split {
    gap: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .cf-input,
  .page-contact .zone-map__cells rect {
    transition: none;
  }
}