.page-contact{
  --ct-gap:clamp(18px,2.6vw,26px);
  --ct-shadow:0 28px 66px -32px rgba(0,0,0,.94);
  display:block;
}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--fh-ink);
  padding-bottom:clamp(40px,7vw,84px);
}
.page-contact .ct-hero__canvas{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.page-contact .ct-hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% 48%;
  opacity:.5;
  filter:saturate(.72) contrast(1.06);
}
.page-contact .ct-hero__canvas::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(11,12,14,.62) 0%,rgba(11,12,14,.9) 58%,var(--fh-ink) 100%),
    linear-gradient(100deg,rgba(11,12,14,.94) 0 40%,rgba(11,12,14,.1) 78%);
}
.page-contact .ct-hero::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-1px;
  height:2px;
  transform:rotate(-1.2deg);
  background:linear-gradient(90deg,transparent,var(--fh-lava) 24%,var(--fh-amber) 56%,transparent 92%);
  opacity:.85;
}
.page-contact .ct-hero__body{
  position:relative;
  padding-top:clamp(44px,8vw,96px);
  max-width:min(100% - 40px,var(--fh-wrap));
}
.page-contact .ct-hero__tag{
  margin-top:clamp(26px,5vw,52px);
  font-size:.76rem;
  letter-spacing:.24em;
  color:var(--fh-ice);
  text-transform:uppercase;
}
.page-contact .ct-hero__title{
  margin-top:14px;
  max-width:18ch;
  overflow-wrap:break-word;
}
.page-contact .ct-hero__lede{
  margin-top:20px;
  max-width:56ch;
  color:var(--fh-mist);
}
.page-contact .ct-hero__tags{
  list-style:none;
  margin:clamp(26px,4vw,40px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-contact .ct-hero__tags li{
  font-family:var(--fh-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--fh-bone);
  padding:7px 14px;
  border:1px solid var(--fh-line-strong);
  border-radius:999px;
  background:rgba(22,24,28,.66);
}
.page-contact .ct-hero__tags li:first-child{
  border-color:rgba(255,90,31,.6);
  color:var(--fh-amber);
}

/* ---------- 区块标题 ---------- */
.page-contact .ct-sec-head{
  max-width:62ch;
  margin-bottom:clamp(28px,5vw,54px);
}
.page-contact .ct-sec-lede{
  margin-top:14px;
  color:var(--fh-mist);
  font-size:1.02rem;
  line-height:1.8;
}

/* ---------- 四条通道卡片 ---------- */
.page-contact .ct-lanes__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ct-gap);
}
.page-contact .ct-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:24px 22px 22px;
  border-radius:var(--fh-radius);
  border:1px solid var(--fh-line);
  background:linear-gradient(165deg,rgba(22,24,28,.97),rgba(11,12,14,.99));
  box-shadow:var(--ct-shadow);
  transition:transform .35s var(--fh-ease),border-color .35s var(--fh-ease);
}
.page-contact .ct-card::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--fh-lava),rgba(255,90,31,0));
}
.page-contact .ct-card--b::before{background:linear-gradient(90deg,var(--fh-ice),rgba(79,195,247,0))}
.page-contact .ct-card--c::before{background:linear-gradient(90deg,var(--fh-amber),rgba(255,176,32,0))}
.page-contact .ct-card--d::before{background:linear-gradient(90deg,var(--fh-gold),rgba(201,162,39,0))}
.page-contact .ct-card:hover,
.page-contact .ct-card:focus-within{
  transform:translateY(-6px) rotate(-.4deg);
  border-color:rgba(255,90,31,.5);
}
.page-contact .ct-card--b:hover,
.page-contact .ct-card--b:focus-within{border-color:rgba(79,195,247,.5)}
.page-contact .ct-card--c:hover,
.page-contact .ct-card--c:focus-within{border-color:rgba(255,176,32,.5)}
.page-contact .ct-card--d:hover,
.page-contact .ct-card--d:focus-within{border-color:rgba(201,162,39,.5)}
.page-contact .ct-card__no{
  font-size:.72rem;
  letter-spacing:.24em;
  color:var(--fh-dim);
}
.page-contact .ct-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:12px;
  color:var(--fh-lava);
  background:rgba(255,90,31,.1);
  border:1px solid rgba(255,90,31,.28);
}
.page-contact .ct-card--b .ct-card__icon{color:var(--fh-ice);background:rgba(79,195,247,.1);border-color:rgba(79,195,247,.3)}
.page-contact .ct-card--c .ct-card__icon{color:var(--fh-amber);background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.3)}
.page-contact .ct-card--d .ct-card__icon{color:var(--fh-gold);background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.3)}
.page-contact .ct-card__desc{
  margin:0;
  color:var(--fh-mist);
  font-size:.95rem;
  line-height:1.78;
}
.page-contact .ct-card__facts{
  margin:0;
  display:grid;
  gap:8px;
}
.page-contact .ct-card__facts > div{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:10px;
  align-items:baseline;
  font-size:.86rem;
}
.page-contact .ct-card__facts dt{
  color:var(--fh-dim);
  font-family:var(--fh-mono);
  font-size:.72rem;
  letter-spacing:.08em;
}
.page-contact .ct-card__facts dd{
  margin:0;
  color:var(--fh-bone);
}
.page-contact .ct-card__detail{
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-top:0;
  border-top:1px solid transparent;
  transition:max-height .42s var(--fh-ease),opacity .3s var(--fh-ease),padding-top .42s var(--fh-ease);
}
.page-contact .ct-card__detail p{
  margin:0;
  font-size:.86rem;
  line-height:1.8;
  color:var(--fh-mist);
}
.page-contact .ct-card:hover .ct-card__detail,
.page-contact .ct-card:focus-within .ct-card__detail{
  max-height:260px;
  opacity:1;
  padding-top:12px;
  border-top-color:var(--fh-line);
}

/* ---------- 联系方式全宽横条 ---------- */
.page-contact .ct-bar{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--fh-ink-2);
  border-top:1px solid var(--fh-line);
  border-bottom:1px solid var(--fh-line);
}
.page-contact .ct-bar__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.34;
}
.page-contact .ct-bar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(120deg,rgba(11,12,14,.92) 0 34%,rgba(27,58,92,.55) 62%,rgba(11,12,14,.9) 100%);
}
.page-contact .ct-bar__inner{
  position:relative;
  padding-block:clamp(30px,5vw,54px);
}
.page-contact .ct-bar__label{
  font-size:.74rem;
  letter-spacing:.32em;
  color:var(--fh-amber);
}
.page-contact .ct-bar__list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:22px;
}
.page-contact .ct-bar__item{
  display:grid;
  gap:7px;
  padding-left:16px;
  border-left:2px solid rgba(79,195,247,.5);
}
.page-contact .ct-bar__item:nth-child(2){border-left-color:rgba(255,90,31,.62)}
.page-contact .ct-bar__item:nth-child(3){border-left-color:rgba(201,162,39,.6)}
.page-contact .ct-bar__key{
  font-size:.7rem;
  letter-spacing:.26em;
  color:var(--fh-dim);
}
.page-contact .ct-bar__val{
  font-size:.98rem;
  color:var(--fh-bone);
  word-break:break-word;
  text-decoration:none;
  transition:color .25s var(--fh-ease);
}
.page-contact .ct-bar__val--addr{
  font-family:var(--fh-sans);
  line-height:1.74;
}
.page-contact a.ct-bar__val:hover,
.page-contact a.ct-bar__val:focus-visible{
  color:var(--fh-amber);
}
.page-contact .ct-bar__hint{
  font-size:.8rem;
  color:var(--fh-mist);
}

/* ---------- 来信建议 ---------- */
.page-contact .ct-write__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(30px,5vw,56px);
  align-items:start;
}
.page-contact .ct-write__intro .fh-h2{
  margin-top:8px;
}
.page-contact .ct-write__tips{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.page-contact .ct-write__tips li{
  position:relative;
  padding-left:18px;
  color:var(--fh-mist);
  font-size:.95rem;
  line-height:1.78;
}
.page-contact .ct-write__tips li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--fh-lava);
  transform:rotate(45deg);
}
.page-contact .ct-write__tips b{
  color:var(--fh-bone);
  font-weight:700;
}
.page-contact .ct-code{
  border-radius:var(--fh-radius);
  border:1px solid var(--fh-line);
  background:linear-gradient(180deg,rgba(27,58,92,.34),rgba(11,12,14,.94));
  overflow:hidden;
  box-shadow:var(--ct-shadow);
}
.page-contact .ct-code__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid var(--fh-line);
  background:rgba(11,12,14,.72);
}
.page-contact .ct-code__bar i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--fh-dim);
}
.page-contact .ct-code__bar i:nth-child(1){background:rgba(255,90,31,.85)}
.page-contact .ct-code__bar i:nth-child(2){background:rgba(255,176,32,.8)}
.page-contact .ct-code__bar i:nth-child(3){background:rgba(79,195,247,.8)}
.page-contact .ct-code__file{
  margin-left:auto;
  font-style:normal;
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--fh-dim);
}
.page-contact .ct-code__body{
  margin:0;
  padding:18px 16px 22px;
  font-family:var(--fh-mono);
  font-size:.8rem;
  line-height:1.95;
  color:var(--fh-bone);
  white-space:pre-wrap;
  word-break:break-word;
  overflow-x:auto;
}

/* ---------- 事项快查 ---------- */
.page-contact .ct-finder{
  margin-top:clamp(38px,6vw,68px);
  padding:clamp(22px,3.6vw,34px);
  border-radius:var(--fh-radius);
  border:1px solid var(--fh-line);
  background:rgba(22,24,28,.62);
}
.page-contact .ct-finder__label{
  display:block;
  font-family:var(--fh-serif);
  font-weight:700;
  font-size:1.16rem;
  color:var(--fh-bone);
  margin-bottom:14px;
}
.page-contact .ct-finder__input{
  width:100%;
  box-sizing:border-box;
  padding:13px 16px;
  font-family:var(--fh-mono);
  font-size:.88rem;
  color:var(--fh-bone);
  background:rgba(11,12,14,.86);
  border:1px solid var(--fh-line-strong);
  border-radius:var(--fh-radius-sm);
  outline:none;
  transition:border-color .25s var(--fh-ease),box-shadow .25s var(--fh-ease);
}
.page-contact .ct-finder__input::placeholder{color:var(--fh-dim)}
.page-contact .ct-finder__input:focus{
  border-color:rgba(79,195,247,.7);
  box-shadow:0 0 0 3px rgba(79,195,247,.14);
}
.page-contact .ct-finder__list{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:0;
}
.page-contact .ct-finder__row{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  align-items:baseline;
  justify-content:space-between;
  padding:13px 4px;
  border-bottom:1px solid var(--fh-line);
  font-size:.9rem;
  color:var(--fh-mist);
  line-height:1.7;
}
.page-contact .ct-finder__row em{
  font-style:normal;
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--fh-ice);
  padding:4px 10px;
  border:1px solid rgba(79,195,247,.34);
  border-radius:999px;
  white-space:nowrap;
}
.page-contact .ct-finder__row[hidden]{display:none}

/* ---------- 响应节拍 ---------- */
.page-contact .ct-beat__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,5vw,58px);
  align-items:start;
}
.page-contact .ct-timeline{
  list-style:none;
  margin:26px 0 0;
  padding:0;
}
.page-contact .ct-timeline li{
  position:relative;
  padding:22px 0 22px 34px;
  border-top:1px solid var(--fh-line);
}
.page-contact .ct-timeline li::before{
  content:"";
  position:absolute;
  left:1px;
  top:29px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--fh-lava);
  box-shadow:0 0 0 5px rgba(255,90,31,.14);
}
.page-contact .ct-timeline li:nth-child(2)::before{background:var(--fh-amber);box-shadow:0 0 0 5px rgba(255,176,32,.13)}
.page-contact .ct-timeline li:nth-child(3)::before{background:var(--fh-ice);box-shadow:0 0 0 5px rgba(79,195,247,.14)}
.page-contact .ct-timeline li:nth-child(4)::before{background:var(--fh-gold);box-shadow:0 0 0 5px rgba(201,162,39,.14)}
.page-contact .ct-timeline li::after{
  content:"";
  position:absolute;
  left:6px;
  top:44px;
  bottom:-1px;
  width:1px;
  background:linear-gradient(180deg,var(--fh-line-strong),transparent);
}
.page-contact .ct-timeline li:last-child::after{display:none}
.page-contact .ct-timeline__t{
  margin:0;
  font-size:1.02rem;
}
.page-contact .ct-timeline__d{
  margin:9px 0 0;
  color:var(--fh-mist);
  font-size:.93rem;
  line-height:1.82;
  max-width:62ch;
}
.page-contact .ct-post{
  padding:clamp(22px,3.4vw,30px);
  border-radius:var(--fh-radius);
  border:1px solid var(--fh-line);
  background:linear-gradient(160deg,rgba(27,58,92,.4),rgba(11,12,14,.92));
  box-shadow:var(--ct-shadow);
}
.page-contact .ct-post__title{
  margin:0;
  color:var(--fh-bone);
  font-size:1.06rem;
}
.page-contact .ct-post__addr{
  margin:14px 0 0;
  font-family:var(--fh-mono);
  font-size:.86rem;
  line-height:1.8;
  color:var(--fh-ice);
  word-break:break-word;
}
.page-contact .ct-post__list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.page-contact .ct-post__list li{
  position:relative;
  padding-left:16px;
  font-size:.9rem;
  line-height:1.78;
  color:var(--fh-mist);
}
.page-contact .ct-post__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--fh-amber);
}
.page-contact .ct-post__btn{
  display:inline-block;
  margin-top:22px;
  text-decoration:none;
}

/* ---------- 断点 ---------- */
@media (min-width:640px){
  .page-contact .ct-lanes__grid{grid-template-columns:repeat(2,1fr)}
  .page-contact .ct-hero__tags{gap:12px}
}

@media (min-width:900px){
  .page-contact .ct-write__grid{grid-template-columns:1fr 1fr}
  .page-contact .ct-beat__grid{grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr)}
  .page-contact .ct-bar__list{grid-template-columns:repeat(3,1fr);gap:30px}
}

@media (min-width:1080px){
  .page-contact .ct-lanes__grid{grid-template-columns:repeat(4,1fr)}
  .page-contact .ct-card--b{margin-top:28px}
  .page-contact .ct-card--c{margin-top:56px}
  .page-contact .ct-card--d{margin-top:84px}
  .page-contact .ct-hero__body{padding-top:110px;padding-bottom:40px}
}

@media (hover:none){
  .page-contact .ct-card__detail{
    max-height:none;
    opacity:1;
    padding-top:12px;
    border-top-color:var(--fh-line);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-contact .ct-card,
  .page-contact .ct-card__detail,
  .page-contact .ct-finder__input,
  .page-contact .ct-bar__val{
    transition:none;
  }
  .page-contact .ct-card:hover,
  .page-contact .ct-card:focus-within{transform:none}
}
<<<END>>>