/* ===== 联系我们页面 ===== */
.page-contact {
  --pc-hair: 1px solid var(--line);
  --pc-soft: rgba(38, 48, 79, .65);
  padding-top: calc(var(--u) * 2);
  padding-bottom: calc(var(--u) * 12);
  color: var(--paper);
}

.page-contact a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 216, 210, .35);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.page-contact a:hover,
.page-contact a:focus-visible {
  border-bottom-color: var(--cyan);
}

.page-contact .section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--paper);
  margin: 0 0 calc(var(--u) * 2);
}

.page-contact .section-note {
  max-width: 56ch;
  margin: 0;
  color: var(--dust);
  font-size: .9375rem;
  line-height: 1.8;
}

/* ---- 首屏 ---- */
.page-contact .contact-hero {
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 7);
  border-bottom: var(--pc-hair);
}

.page-contact .contact-hero .eyebrow {
  color: var(--cyan);
  letter-spacing: .18em;
  margin: 0 0 calc(var(--u) * 2);
}

.page-contact .contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 9.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--paper);
  margin: 0 0 calc(var(--u) * 2.5);
  max-width: 20ch;
}

.page-contact .contact-hero .lead {
  max-width: 50ch;
  margin: 0;
  color: var(--paper-dim);
  font-size: 1.0625rem;
  line-height: 1.8;
}

.page-contact .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.25) calc(var(--u) * 3);
  margin: calc(var(--u) * 4) 0 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--dust);
}

.page-contact .hero-meta li {
  position: relative;
  padding-left: calc(var(--u) * 2.5);
}

.page-contact .hero-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}

/* ---- 渠道区 ---- */
.page-contact .channel-layout {
  display: grid;
  gap: calc(var(--u) * 6);
  padding-top: calc(var(--u) * 8);
}

.page-contact .channel-list {
  display: grid;
  gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 4);
}

.page-contact .channel-card {
  position: relative;
  padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.5) calc(var(--u) * 4);
  background: linear-gradient(180deg, rgba(18, 26, 51, .96) 0%, rgba(10, 16, 36, .82) 100%);
  border: var(--pc-hair);
  border-radius: var(--r);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.page-contact .channel-card::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 1.5);
  bottom: calc(var(--u) * 1.5);
  left: calc(var(--u) * 1.25);
  width: 2px;
  border-radius: 2px;
  background: var(--pc-accent, var(--gold));
}

.page-contact .channel-card:hover,
.page-contact .channel-card:focus-within {
  border-color: var(--pc-accent, var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -30px rgba(4, 5, 12, .95);
}

.page-contact .channel-card--mail { --pc-accent: var(--gold); }
.page-contact .channel-card--phone { --pc-accent: var(--cyan); }
.page-contact .channel-card--visit { --pc-accent: var(--violet); }

.page-contact .channel-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.5);
  margin-bottom: calc(var(--u) * 1.5);
}

.page-contact .channel-code {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--pc-accent, var(--gold));
}

.page-contact .channel-name {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--paper);
}

.page-contact .channel-value {
  margin: 0 0 calc(var(--u) * 2);
  font-family: var(--font-mono);
  font-size: clamp(.9375rem, 4.4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.page-contact .channel-use {
  margin: 0;
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid var(--pc-soft);
  color: var(--dust);
  font-size: .9375rem;
  line-height: 1.75;
}

.page-contact .channel-tip {
  margin: calc(var(--u) * 1.5) 0 0;
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(155, 166, 196, .8);
}

/* ---- 方位图 ---- */
.page-contact .locator {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
}

.page-contact .locator-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--paper);
}

.page-contact .locator-lead {
  margin: 0;
  max-width: 40ch;
  color: var(--dust);
  font-size: .875rem;
  line-height: 1.7;
}

.page-contact .locator-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-top: calc(var(--u) * 1.5);
  border: var(--pc-hair);
  border-radius: var(--r);
  background:
    radial-gradient(circle at 28% 24%, rgba(124, 77, 255, .22), transparent 58%),
    radial-gradient(circle at 74% 78%, rgba(63, 216, 210, .14), transparent 60%),
    var(--void);
}

.page-contact .locator-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(38, 48, 79, .5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(38, 48, 79, .5) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 100%);
  pointer-events: none;
}

.page-contact .locator-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--r) - 1px);
  opacity: .48;
}

.page-contact .locator-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: rgba(155, 166, 196, .38);
  pointer-events: none;
}

.page-contact .locator-pin {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  outline: none;
  cursor: default;
}

.page-contact .locator-pin:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 6px;
  border-radius: 999px;
}

.page-contact .pin-mail { left: 30%; top: 30%; }
.page-contact .pin-phone { left: 68%; top: 47%; }
.page-contact .pin-visit { left: 44%; top: 76%; }

.page-contact .pin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pin-c, var(--gold));
  box-shadow: 0 0 0 5px rgba(255, 180, 84, .14);
  flex: none;
}

.page-contact .pin-phone .pin-dot {
  --pin-c: var(--cyan);
  box-shadow: 0 0 0 5px rgba(63, 216, 210, .14);
}

.page-contact .pin-visit .pin-dot {
  --pin-c: var(--violet);
  box-shadow: 0 0 0 5px rgba(124, 77, 255, .16);
}

.page-contact .pin-code {
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--paper-dim);
  white-space: nowrap;
}

.page-contact .pin-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translate(-50%, 6px);
  width: max-content;
  min-width: 170px;
  max-width: 220px;
  padding: calc(var(--u) * 1.25) calc(var(--u) * 1.5);
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: .8125rem;
  line-height: 1.6;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}

.page-contact .locator-pin:hover .pin-tip,
.page-contact .locator-pin:focus-visible .pin-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---- 反馈材料 ---- */
.page-contact .brief-section {
  display: grid;
  gap: calc(var(--u) * 5);
  padding-top: calc(var(--u) * 10);
}

.page-contact .brief-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: var(--pc-hair);
  border-radius: var(--r);
}

.page-contact .brief-list {
  display: grid;
  gap: calc(var(--u) * 2.5);
  margin: calc(var(--u) * 4) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .brief-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(var(--u) * 2);
  padding-top: calc(var(--u) * 2.5);
  border-top: 1px solid var(--pc-soft);
}

.page-contact .brief-num {
  padding-top: .25em;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--cyan);
}

.page-contact .brief-text h3 {
  margin: 0 0 calc(var(--u) * .75);
  font-size: 1rem;
  font-weight: 700;
  color: var(--paper);
}

.page-contact .brief-text p {
  margin: 0;
  color: var(--dust);
  font-size: .9375rem;
  line-height: 1.75;
}

/* ---- 服务时段 ---- */
.page-contact .hours-section {
  padding-top: calc(var(--u) * 10);
}

.page-contact .hours-grid {
  display: grid;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 4);
}

.page-contact .hours-block {
  padding-top: calc(var(--u) * 2.5);
  border-top: 2px solid var(--line);
}

.page-contact .hours-k {
  margin: 0 0 calc(var(--u) * 1.25);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-contact .hours-d {
  margin: 0;
  color: var(--dust);
  font-size: .9375rem;
  line-height: 1.78;
}

/* ---- 福建地区 ---- */
.page-contact .region-section {
  margin-top: calc(var(--u) * 10);
  padding: calc(var(--u) * 5) calc(var(--u) * 3.5);
  border: 1px solid rgba(124, 77, 255, .34);
  border-radius: var(--r);
  background:
    radial-gradient(circle at 88% 10%, rgba(124, 77, 255, .22), transparent 55%),
    radial-gradient(circle at 6% 100%, rgba(63, 216, 210, .1), transparent 55%),
    linear-gradient(158deg, rgba(18, 26, 51, .95), rgba(4, 5, 12, .92));
}

.page-contact .region-copy p {
  max-width: 62ch;
  margin: 0;
  color: var(--paper-dim);
  font-size: 1rem;
  line-height: 1.8;
}

.page-contact .region-stats {
  display: grid;
  gap: calc(var(--u) * 2.5);
  margin: calc(var(--u) * 4) 0 0;
  padding: 0;
  list-style: none;
}

.page-contact .region-stat {
  padding-top: calc(var(--u) * 2);
  border-top: 1px solid rgba(124, 77, 255, .28);
}

.page-contact .rs-num {
  display: block;
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--gold);
  margin-bottom: calc(var(--u) * .75);
}

.page-contact .rs-label {
  display: block;
  color: var(--dust);
  font-size: .875rem;
  line-height: 1.7;
}

/* ---- 备案 ---- */
.page-contact .icp-section {
  margin-top: calc(var(--u) * 9);
  padding-top: calc(var(--u) * 4);
  border-top: var(--pc-hair);
}

.page-contact .icp-title {
  margin: 0 0 calc(var(--u) * 1.5);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dust);
}

.page-contact .icp-line {
  margin: 0 0 calc(var(--u) * 1.5);
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--paper-dim);
}

.page-contact .icp-note {
  max-width: 60ch;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.75;
  color: rgba(155, 166, 196, .82);
}

/* ---- 响应式 ---- */
@media (min-width: 620px) {
  .page-contact .hours-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--u) * 4);
  }

  .page-contact .region-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(var(--u) * 4);
  }
}

@media (min-width: 880px) {
  .page-contact .channel-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: calc(var(--u) * 7);
    align-items: start;
  }

  .page-contact .brief-section {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: calc(var(--u) * 7);
    align-items: start;
  }

  .page-contact .brief-media {
    position: sticky;
    top: calc(var(--bar-h) + var(--u) * 3);
  }

  .page-contact .contact-hero {
    padding-bottom: calc(var(--u) * 9);
  }
}

@media (max-width: 519px) {
  .page-contact .pin-tip {
    min-width: 0;
    max-width: 168px;
    font-size: .75rem;
  }

  .page-contact .pin-code {
    display: none;
  }

  .page-contact .region-section {
    padding: calc(var(--u) * 4) calc(var(--u) * 2.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-contact .channel-card,
  .page-contact .pin-tip {
    transition: none;
  }

  .page-contact .channel-card:hover,
  .page-contact .channel-card:focus-within {
    transform: none;
  }
}