.page-contact{
  --ct-cut:22px;
  --ct-gap:clamp(14px,1.9vw,24px);
  position:relative;
  padding-bottom:clamp(48px,8vw,100px);
}

.page-contact .hh-breadcrumb{margin-top:clamp(16px,2.4vw,28px);}

/* ---------- 首屏 ---------- */
.page-contact .ct-hero{
  display:grid;
  gap:clamp(26px,3.4vw,52px);
  align-items:center;
  padding:clamp(22px,3.6vw,46px) 0 clamp(34px,5vw,66px);
}
@media (min-width:900px){
  .page-contact .ct-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
}
.page-contact .ct-hero__lede{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.8vw,20px);
}
.page-contact .ct-hero h1{
  font-family:var(--hh-font-display);
  font-size:clamp(30px,5.2vw,58px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
  color:var(--hh-white);
}
.page-contact .ct-hero__lede .hh-prose{
  color:var(--hh-mist);
  max-width:64ch;
}
.page-contact .ct-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-contact .ct-hero__aside{
  margin:0;
  padding-left:14px;
  border-left:2px solid var(--hh-cyan);
  font-size:14px;
  line-height:1.8;
  color:var(--hh-mist);
  max-width:52ch;
}

.page-contact .ct-hero__media{
  margin:0;
  min-width:0;
}
.page-contact .ct-hero__media .hh-media{
  clip-path:polygon(0 var(--ct-cut),var(--ct-cut) 0,100% 0,100% calc(100% - var(--ct-cut)),calc(100% - var(--ct-cut)) 100%,0 100%);
}
.page-contact .ct-hero__media .hh-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- 区块标题 ---------- */
.page-contact .hh-section{
  padding-top:clamp(34px,5vw,60px);
  padding-bottom:clamp(34px,5vw,60px);
}
.page-contact .ct-sechead{
  position:relative;
  padding-top:clamp(14px,1.8vw,20px);
  margin-bottom:clamp(22px,3vw,36px);
  max-width:920px;
}
.page-contact .ct-sechead::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--hh-line);
}
.page-contact .ct-sechead::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:68px;
  height:2px;
  background:var(--hh-cyan);
}
.page-contact .ct-sechead h2{
  font-family:var(--hh-font-display);
  font-size:clamp(23px,3.1vw,38px);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--hh-white);
  margin:.4em 0 0;
}
.page-contact .ct-sechead__sub{
  margin:.65em 0 0;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.8;
  max-width:64ch;
}

/* ---------- 三条渠道 ---------- */
.page-contact .ct-channels{
  display:grid;
  gap:var(--ct-gap);
}
@media (min-width:920px){
  .page-contact .ct-channels{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.9fr);
    align-items:stretch;
  }
}
.page-contact .ct-chan{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:clamp(20px,2.6vw,32px);
  background:linear-gradient(158deg,var(--hh-raise) 0%,var(--hh-deep) 70%);
  border:1px solid var(--hh-line);
  clip-path:polygon(0 0,calc(100% - var(--ct-cut)) 0,100% var(--ct-cut),100% 100%,var(--ct-cut) 100%,0 calc(100% - var(--ct-cut)));
}
.page-contact .ct-chan::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:var(--hh-line);
}
.page-contact .ct-chan--mail::before{background:var(--hh-cyan);}
.page-contact .ct-chan--phone::before{background:var(--hh-orange);}
.page-contact .ct-chan--addr::before{background:var(--hh-blue);}

.page-contact .ct-chan__label{
  margin:0;
  font-family:var(--hh-font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hh-mist);
}
.page-contact .ct-chan__value{
  margin:0;
  font-family:var(--hh-font-mono);
  font-weight:700;
  font-size:clamp(17px,1.6vw,22px);
  line-height:1.4;
  color:var(--hh-white);
  overflow-wrap:anywhere;
}
.page-contact .ct-chan__value a{
  color:var(--hh-cyan);
  text-decoration:none;
  border-bottom:1px dashed var(--hh-line);
}
.page-contact .ct-chan__value a:hover,
.page-contact .ct-chan__value a:focus-visible{
  border-bottom-color:var(--hh-cyan);
}
.page-contact .ct-chan__value--addr{
  font-family:var(--hh-font-body);
  font-weight:500;
  font-size:15px;
  line-height:1.75;
}
.page-contact .ct-chan__desc{
  margin:0;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.8;
}
.page-contact .ct-chan__list{
  list-style:none;
  margin:auto 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.page-contact .ct-chan__list li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--hh-white);
}
.page-contact .ct-chan__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border:1px solid var(--hh-cyan);
}

/* ---------- 合作方向 ---------- */
.page-contact .ct-works{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:var(--ct-gap);
}
@media (min-width:760px){
  .page-contact .ct-works{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.page-contact .ct-work{
  position:relative;
  padding:clamp(20px,2.4vw,28px);
  background:var(--hh-deep);
  border:1px solid var(--hh-line);
  border-left:3px solid var(--hh-line);
  transition:border-color .25s var(--hh-ease),background-color .25s var(--hh-ease);
}
.page-contact .ct-work:hover{
  border-left-color:var(--hh-cyan);
  background:var(--hh-raise);
}
.page-contact .ct-work__idx{
  display:block;
  font-family:var(--hh-font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--hh-cyan);
  margin-bottom:10px;
}
.page-contact .ct-work h3{
  font-family:var(--hh-font-display);
  font-size:clamp(18px,2vw,23px);
  letter-spacing:.005em;
  color:var(--hh-white);
  margin:0 0 8px;
}
.page-contact .ct-work p{
  margin:0;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.82;
}

/* ---------- 响应节奏 ---------- */
.page-contact .ct-response{
  display:grid;
  gap:clamp(18px,2.4vw,28px);
}
@media (min-width:800px){
  .page-contact .ct-response{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);}
}
.page-contact .ct-response__clock{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  padding:clamp(20px,2.6vw,32px);
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(31,245,192,.14), transparent 62%),
    var(--hh-deep);
  border:1px solid var(--hh-line);
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ct-cut)),calc(100% - var(--ct-cut)) 100%,0 100%);
}
.page-contact .ct-response__time{
  margin:0;
  font-family:var(--hh-font-mono);
  font-weight:700;
  font-size:clamp(26px,3.6vw,40px);
  letter-spacing:-.01em;
  color:var(--hh-cyan);
  font-variant-numeric:tabular-nums;
}
.page-contact .ct-response__caption{
  margin:0;
  font-size:13.5px;
  letter-spacing:.06em;
  color:var(--hh-mist);
}
.page-contact .ct-response__body p{
  margin:0 0 14px;
  color:var(--hh-mist);
  font-size:15.5px;
  line-height:1.88;
  max-width:68ch;
}
.page-contact .ct-response__body p:last-child{margin-bottom:0;}

.page-contact .ct-flow{
  list-style:none;
  margin:clamp(22px,3vw,34px) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.page-contact .ct-flow li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px 10px 12px;
  border:1px dashed var(--hh-line);
  font-family:var(--hh-font-mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--hh-white);
}
.page-contact .ct-flow__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--hh-cyan);
  color:var(--hh-ink);
  font-weight:700;
  font-size:12px;
}

/* ---------- 联络准备清单 ---------- */
.page-contact .ct-prep{
  list-style:none;
  margin:0;
  padding:0;
}
.page-contact .ct-prep li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,26px);
  align-items:start;
  padding:clamp(16px,2.2vw,22px) 0;
  border-bottom:1px solid var(--hh-line);
}
.page-contact .ct-prep li:first-child{border-top:1px solid var(--hh-line);}
.page-contact .ct-prep__num{
  font-family:var(--hh-font-mono);
  font-weight:700;
  font-size:clamp(16px,1.8vw,20px);
  letter-spacing:.08em;
  color:var(--hh-cyan);
  padding-top:2px;
  font-variant-numeric:tabular-nums;
}
.page-contact .ct-prep h3{
  margin:0 0 6px;
  font-family:var(--hh-font-display);
  font-size:clamp(17px,1.9vw,21px);
  color:var(--hh-white);
}
.page-contact .ct-prep p{
  margin:0;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.82;
  max-width:62ch;
}

/* ---------- 办公地址 ---------- */
.page-contact .ct-address{
  display:grid;
  gap:clamp(20px,2.8vw,40px);
}
@media (min-width:880px){
  .page-contact .ct-address{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    align-items:center;
  }
}
.page-contact .ct-address__map{
  margin:0;
  min-width:0;
}
.page-contact .ct-address__map .hh-media{
  clip-path:polygon(var(--ct-cut) 0,100% 0,100% 100%,0 100%,0 var(--ct-cut));
}
.page-contact .ct-address__map .hh-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-contact .ct-address__value{
  margin:0 0 18px;
  padding:16px 18px;
  background:var(--hh-deep);
  border-left:3px solid var(--hh-orange);
  font-family:var(--hh-font-mono);
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.6;
  color:var(--hh-white);
}
.page-contact .ct-address__body p{
  margin:0 0 14px;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.86;
  max-width:60ch;
}
.page-contact .ct-address__body .hh-btn{margin-top:6px;}

/* ---------- 引用与署名 ---------- */
.page-contact .ct-media-grid{
  display:grid;
  gap:var(--ct-gap);
}
@media (min-width:820px){
  .page-contact .ct-media-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.page-contact .ct-quote{
  position:relative;
  padding:clamp(20px,2.4vw,28px);
  background:var(--hh-deep);
  border:1px solid var(--hh-line);
  clip-path:polygon(0 0,calc(100% - var(--ct-cut)) 0,100% var(--ct-cut),100% 100%,var(--ct-cut) 100%,0 calc(100% - var(--ct-cut)));
}
.page-contact .ct-quote h3{
  margin:0 0 10px;
  font-family:var(--hh-font-display);
  font-size:clamp(17px,1.9vw,21px);
  letter-spacing:.01em;
  color:var(--hh-cyan);
}
.page-contact .ct-quote p{
  margin:0;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.82;
}

/* ---------- 结尾联系入口 ---------- */
.page-contact .ct-cta{
  position:relative;
  margin-top:clamp(34px,5vw,64px);
  padding:clamp(26px,4vw,52px);
  display:grid;
  gap:clamp(20px,3vw,32px);
  align-items:center;
  background:
    linear-gradient(120deg, rgba(31,245,192,.10), transparent 54%),
    linear-gradient(300deg, rgba(255,122,41,.10), transparent 48%),
    var(--hh-deep);
  border:1px solid var(--hh-line);
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,28px 100%,0 calc(100% - 28px));
}
@media (min-width:860px){
  .page-contact .ct-cta{grid-template-columns:minmax(0,1fr) auto;}
}
.page-contact .ct-cta h2{
  font-family:var(--hh-font-display);
  font-size:clamp(23px,3vw,36px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--hh-white);
  margin:.35em 0 .55em;
}
.page-contact .ct-cta__body p{
  margin:0;
  color:var(--hh-mist);
  font-size:15px;
  line-height:1.86;
  max-width:62ch;
}
.page-contact .ct-cta__body a{
  color:var(--hh-cyan);
  text-decoration:none;
  border-bottom:1px solid var(--hh-line);
}
.page-contact .ct-cta__body a:hover,
.page-contact .ct-cta__body a:focus-visible{
  border-bottom-color:var(--hh-cyan);
}
.page-contact .ct-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-contact .ct-cta__note{
  grid-column:1 / -1;
  margin:0;
  padding-top:clamp(14px,2vw,20px);
  border-top:1px solid var(--hh-line);
  font-size:13.5px;
  line-height:1.8;
  color:var(--hh-mist);
}
.page-contact .ct-cta__note a{
  color:var(--hh-cyan);
  text-decoration:none;
}

/* ---------- 键盘焦点 ---------- */
.page-contact a:focus-visible,
.page-contact .hh-btn:focus-visible{
  outline:2px solid var(--hh-cyan);
  outline-offset:2px;
}

/* ---------- 窄屏微调 ---------- */
@media (max-width:560px){
  .page-contact{--ct-cut:16px;}
  .page-contact .ct-hero__actions .hh-btn{width:100%;justify-content:center;text-align:center;}
  .page-contact .ct-cta__actions{width:100%;}
  .page-contact .ct-cta__actions .hh-btn{flex:1 1 100%;justify-content:center;text-align:center;}
  .page-contact .ct-chan__value{font-size:16px;}
  .page-contact .ct-flow li{flex:1 1 100%;}
}

@media (hover:none){
  .page-contact .ct-work:hover{
    border-left-color:var(--hh-line);
    background:var(--hh-deep);
  }
}

@media (prefers-reduced-motion:reduce){
  .page-contact *,
  .page-contact *::before,
  .page-contact *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}