.page-contact{
  --ct-line: rgba(20,28,36,.12);
  --ct-line-soft: rgba(244,237,224,.18);
  --ct-r-lg: 32px;
  --ct-r-md: 24px;
  overflow-x: clip;
  color: var(--lx-ink);
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero{
  padding-top: clamp(20px,3.4vw,40px);
}
.page-contact .ct-hero .lx-crumb{
  margin-bottom: clamp(20px,3vw,34px);
}
.page-contact .ct-hero__grid{
  display: grid;
  gap: 26px;
}
.page-contact .ct-hero__title{
  font-family: var(--lx-font-display);
  font-weight: 900;
  font-size: clamp(34px,6.4vw,68px);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 10px 0 0;
}
.page-contact .ct-lead{
  margin: 18px 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(20,28,36,.76);
}
.page-contact .ct-hero__meta{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-contact .ct-hero__media{
  border-radius: var(--ct-r-lg);
  overflow: hidden;
  margin: 0;
}
.page-contact .ct-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

/* ---------- 章节间距 ---------- */
.page-contact .ct-block{
  padding-block: clamp(36px,6vw,78px);
}
.page-contact .ct-block--tight{
  padding-block: clamp(24px,4vw,52px);
}
.page-contact .ct-block--loose{
  padding-block: clamp(32px,5.4vw,68px);
}

/* ---------- 小节标题组 ---------- */
.page-contact .ct-sectionhead{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px,3vw,32px);
}
.page-contact .ct-anno{
  writing-mode: vertical-rl;
  letter-spacing: .34em;
  font-size: 12px;
  color: var(--lx-stone);
  max-height: 92px;
}
.page-contact .ct-scope__head{
  max-width: 62ch;
  margin-bottom: clamp(22px,3.2vw,36px);
}

/* ---------- 三块错落联系卡 ---------- */
.page-contact .ct-cards{
  display: grid;
  gap: 20px;
}
.page-contact .ct-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 22px;
  border-radius: var(--ct-r-md);
  border: 1px solid var(--ct-line);
  background: var(--lx-paper);
  box-shadow: var(--lx-shadow-2);
  transition: transform 320ms var(--lx-ease), box-shadow 320ms var(--lx-ease);
}
.page-contact .ct-card::before{
  content: "";
  position: absolute;
  inset: 0 auto auto 24px;
  width: 54px;
  height: 4px;
  border-radius: var(--lx-r-pill);
  background: var(--lx-gold);
  top: 0;
}
.page-contact .ct-card__title{
  margin: 4px 0 0;
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
}
.page-contact .ct-card__value{
  margin: 0;
  font-family: var(--lx-font-mono);
  font-size: clamp(21px,2.6vw,28px);
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--lx-navy);
}
.page-contact .ct-card__value--mail{
  font-size: clamp(15px,2.2vw,21px);
  word-break: break-all;
}
.page-contact .ct-card__value--addr{
  font-size: clamp(17px,2.2vw,22px);
}
.page-contact .ct-card__note{
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-stone);
}
.page-contact .ct-card__foot{
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ct-line);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--lx-stone);
}
.page-contact .ct-card--mail{
  border-radius: var(--ct-r-lg);
}
.page-contact .ct-card--phone{
  background: var(--lx-navy);
  border-color: rgba(253,251,247,.14);
  color: var(--lx-sand);
  border-radius: 26px;
  box-shadow: var(--lx-shadow-1);
}
.page-contact .ct-card--phone .ct-card__title{
  color: var(--lx-paper);
}
.page-contact .ct-card--phone .ct-card__value{
  color: var(--lx-gold-soft);
}
.page-contact .ct-card--phone .ct-card__note{
  color: rgba(244,237,224,.8);
}
.page-contact .ct-card--phone .ct-card__foot{
  border-top-color: var(--ct-line-soft);
  color: rgba(246,217,160,.9);
}
.page-contact .ct-card--addr{
  background: var(--lx-sand);
  border-radius: var(--ct-r-lg);
}
.page-contact .ct-card--addr::before{
  background: var(--lx-euca);
}

/* ---------- 回复时段 ---------- */
.page-contact .ct-hours{
  display: grid;
  gap: 26px;
}
.page-contact .ct-hours__title{
  margin: 0;
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: clamp(24px,3.4vw,34px);
  letter-spacing: -.01em;
}
.page-contact .ct-hours__lead{
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.78;
  color: rgba(20,28,36,.78);
}
.page-contact .ct-hours__list{
  margin: 22px 0 0;
}
.page-contact .ct-hours__row{
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--ct-line);
}
.page-contact .ct-hours__row dt{
  font-family: var(--lx-font-mono);
  font-size: 12.5px;
  letter-spacing: .12em;
  color: var(--lx-gold-ink);
}
.page-contact .ct-hours__row dd{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.76;
  color: var(--lx-stone);
}
.page-contact .ct-hours__media{
  margin: 0;
  border-radius: var(--ct-r-lg);
  overflow: hidden;
}
.page-contact .ct-hours__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- 备案块 ---------- */
.page-contact .ct-reg{
  position: relative;
  display: grid;
  gap: 20px;
  padding: clamp(24px,3.4vw,36px);
  border-radius: var(--ct-r-lg);
  background: var(--lx-sand);
  background-image: repeating-linear-gradient(180deg, rgba(14,43,71,.05) 0 1px, transparent 1px 9px);
  border: 1px solid rgba(14,43,71,.08);
}
.page-contact .ct-reg__head{
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-contact .ct-reg__shield{
  display: inline-flex;
  color: var(--lx-gold-ink);
  flex: none;
}
.page-contact .ct-reg__title{
  margin: 0;
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
}
.page-contact .ct-reg__num{
  margin: 6px 0 0;
  font-family: var(--lx-font-mono);
  font-size: clamp(19px,2.6vw,28px);
  letter-spacing: .04em;
  color: var(--lx-navy);
  word-break: break-all;
}
.page-contact .ct-reg__region{
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--lx-navy);
}
.page-contact .ct-reg__region .lx-mono{
  font-size: 12.5px;
  letter-spacing: .14em;
  font-weight: 400;
  color: var(--lx-stone);
}
.page-contact .ct-reg__note{
  margin: 10px 0 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-stone);
}

/* ---------- 可协助范围与自查 ---------- */
.page-contact .ct-scope{
  display: grid;
  gap: 32px;
}
.page-contact .ct-scope__sub{
  margin: 0 0 12px;
  font-family: var(--lx-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--lx-navy);
}
.page-contact .ct-scope__list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-contact .ct-scope__item{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--ct-line);
}
.page-contact .ct-scope__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--lx-r-pill);
  font-family: var(--lx-font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  flex: none;
}
.page-contact .ct-scope__num--navy{
  background: var(--lx-gold-soft);
  color: var(--lx-navy);
}
.page-contact .ct-scope__itemtitle{
  margin: 0;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--lx-ink);
}
.page-contact .ct-scope__itembody{
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-stone);
}
.page-contact .ct-check{
  list-style: none;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--lx-gold);
  display: grid;
  gap: 22px;
}
.page-contact .ct-check__item{
  position: relative;
}
.page-contact .ct-check__idx{
  display: block;
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--lx-gold-ink);
}
.page-contact .ct-check__text{
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--lx-stone);
}

/* ---------- 收束 ---------- */
.page-contact .ct-close{
  position: relative;
  padding: clamp(28px,4.2vw,48px);
  border-radius: var(--ct-r-lg);
  background:
    radial-gradient(120% 130% at 10% 0%, rgba(227,163,60,.22), transparent 62%),
    var(--lx-navy);
  color: var(--lx-sand);
  overflow: hidden;
}
.page-contact .ct-close__title{
  margin: 0;
  font-family: var(--lx-font-display);
  font-weight: 900;
  font-size: clamp(24px,3.6vw,38px);
  letter-spacing: -.01em;
  color: var(--lx-paper);
}
.page-contact .ct-close__body{
  margin: 16px 0 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(244,237,224,.84);
}
.page-contact .ct-close__acts{
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-contact .ct-close__links{
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--ct-line-soft);
  font-size: 14.5px;
  line-height: 1.78;
  color: rgba(244,237,224,.72);
}
.page-contact .ct-link{
  color: var(--lx-gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(246,217,160,.45);
  transition: border-color 160ms var(--lx-ease);
}
.page-contact .ct-link:hover,
.page-contact .ct-link:focus-visible{
  border-bottom-color: var(--lx-gold-soft);
}

/* ---------- 响应式 ---------- */
@media (min-width: 768px){
  .page-contact .ct-cards{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .page-contact .ct-card--addr{
    grid-column: 1 / -1;
  }
  .page-contact .ct-reg{
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    align-items: center;
    gap: 32px;
  }
  .page-contact .ct-reg__note{
    margin-top: 0;
  }
}

@media (min-width: 900px){
  .page-contact .ct-hero__grid{
    grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
    gap: clamp(28px,4vw,56px);
    align-items: end;
  }
  .page-contact .ct-hours{
    grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
    gap: clamp(28px,4vw,52px);
    align-items: start;
  }
  .page-contact .ct-hours__row{
    grid-template-columns: 108px minmax(0,1fr);
    gap: 18px;
    align-items: baseline;
  }
  .page-contact .ct-scope{
    grid-template-columns: minmax(0,1.34fr) minmax(0,.9fr);
    gap: clamp(32px,4vw,64px);
  }
}

@media (min-width: 1080px){
  .page-contact .ct-cards{
    grid-template-columns: 1.14fr .96fr .9fr;
    align-items: start;
  }
  .page-contact .ct-card--addr{
    grid-column: auto;
  }
  .page-contact .ct-card--phone{
    margin-top: 36px;
  }
  .page-contact .ct-card--addr{
    margin-top: 72px;
  }
  .page-contact .ct-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--lx-shadow-1);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-contact .ct-card{
    transition: none;
  }
  .page-contact .ct-card:hover{
    transform: none;
  }
}
</final>
