.page-contact{
  --pc-pad:clamp(20px,4vw,44px);
  --pc-gap:clamp(14px,2vw,22px);
  --pc-card:linear-gradient(180deg,rgba(18,59,51,.55),rgba(12,31,27,.9));
  display:block;
  padding-bottom:clamp(32px,6vw,72px);
}

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

.page-contact .section-head__title{
  max-width:22em;
}

/* ---------- 首屏框景 ---------- */
.page-contact .contact-hero{
  position:relative;
  display:grid;
  gap:clamp(22px,3.4vw,44px);
  padding:var(--pc-pad);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(56,225,208,.16), transparent 55%),
    linear-gradient(180deg, rgba(18,59,51,.78), rgba(12,31,27,.96));
}

.page-contact .contact-hero::before,
.page-contact .contact-hero::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border:2px solid var(--cyan);
  opacity:.85;
  pointer-events:none;
}

.page-contact .contact-hero::before{
  top:-1px;
  left:-1px;
  border-right:0;
  border-bottom:0;
}

.page-contact .contact-hero::after{
  right:-1px;
  bottom:-1px;
  border-top:0;
  border-left:0;
}

.page-contact .contact-hero__text{
  min-width:0;
}

.page-contact .contact-hero h1{
  margin:.3em 0 .5em;
  font-size:var(--fs-h1);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.01em;
  max-width:16em;
}

.page-contact .contact-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(18px,2.6vw,28px);
}

.page-contact .contact-hero__media{
  margin:0;
  min-width:0;
}

.page-contact .contact-hero__media figcaption{
  margin-top:12px;
  padding-left:14px;
  border-left:2px solid var(--cyan);
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--celadon);
}

/* ---------- 渠道卡片 ---------- */
.page-contact .channel-grid{
  display:grid;
  gap:var(--pc-gap);
}

.page-contact .channel-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);
  background:var(--pc-card);
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-contact .channel-card:hover{
  transform:translateY(-2px);
  border-color:var(--cyan);
}

.page-contact .channel-card__coord{
  position:absolute;
  top:14px;
  right:16px;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  color:var(--cyan);
}

.page-contact .channel-card--phone .channel-card__coord{
  color:var(--orange);
}

.page-contact .channel-card__title{
  margin:0;
  font-size:var(--fs-h4);
  font-weight:800;
  letter-spacing:-.01em;
}

.page-contact .channel-card__text{
  margin:0;
  max-width:var(--measure);
  color:var(--celadon);
  font-size:var(--fs-small);
  line-height:1.75;
}

.page-contact .channel-card__addr{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(17px,2.6vw,24px);
  letter-spacing:.03em;
  line-height:1.5;
  color:var(--warm);
  word-break:break-word;
}

.page-contact .channel-card .copy-chip{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 14px;
  width:100%;
  min-height:44px;
  padding:14px 16px;
  border:1px dashed var(--line);
  background:rgba(12,31,27,.72);
  color:var(--warm);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.page-contact .channel-card .copy-chip:hover{
  border-color:var(--cyan);
  background:rgba(18,59,51,.6);
}

.page-contact .copy-chip__key{
  font-size:var(--fs-label);
  letter-spacing:.14em;
  color:var(--celadon);
}

.page-contact .copy-chip__val{
  font-family:var(--font-mono);
  font-size:clamp(15px,2.8vw,22px);
  letter-spacing:.04em;
  line-height:1.35;
  color:var(--warm);
  word-break:break-all;
}

.page-contact .channel-card--phone .copy-chip__val{
  color:var(--orange);
}

.page-contact .copy-chip__hint{
  margin-left:auto;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  color:var(--cyan);
}

.page-contact .channel-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.page-contact .channel-card__list li{
  position:relative;
  padding-left:18px;
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--celadon);
}

.page-contact .channel-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:9px;
  height:1px;
  background:var(--cyan);
}

.page-contact .channel-card--phone .channel-card__list li::before{
  background:var(--orange);
}

/* ---------- 服务时段 ---------- */
.page-contact .contact-hours{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}

.page-contact .contact-hours .data-strip__item{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:clamp(16px,2.4vw,26px);
  background:var(--ink);
}

.page-contact .contact-hours .data-strip__num{
  font-family:var(--font-mono);
  font-size:clamp(19px,3vw,28px);
  letter-spacing:.04em;
  line-height:1.2;
  color:var(--cyan);
}

.page-contact .contact-hours .data-strip__item:nth-child(3) .data-strip__num{
  color:var(--orange);
}

.page-contact .contact-hours .data-strip__label{
  font-size:var(--fs-label);
  letter-spacing:.1em;
  color:var(--celadon);
}

.page-contact .hours-notes{
  display:grid;
  gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(22px,3vw,34px);
}

.page-contact .hours-figure{
  border-left:3px solid var(--orange);
}

.page-contact .panel__text{
  max-width:var(--measure);
}

/* ---------- 受理范围 ---------- */
.page-contact .topics-legend{
  margin:0 0 clamp(18px,2.4vw,26px);
}

.page-contact .fold-group{
  border-top:1px solid var(--line);
}

.page-contact .fold{
  border-bottom:1px solid var(--line);
}

.page-contact .fold__trigger{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:56px;
  padding:18px 2px;
  border:0;
  background:none;
  color:var(--warm);
  font-size:clamp(16px,2vw,20px);
  font-weight:700;
  line-height:1.5;
  text-align:left;
  cursor:pointer;
  transition:color var(--dur) var(--ease);
}

.page-contact .fold__trigger:hover,
.page-contact .fold__trigger[aria-expanded="true"]{
  color:var(--cyan);
}

.page-contact .fold__trigger .mono{
  flex:none;
  font-size:var(--fs-label);
  letter-spacing:.14em;
  color:var(--celadon);
}

.page-contact .fold__trigger::after{
  content:"＋";
  margin-left:auto;
  font-weight:400;
  color:var(--celadon);
}

.page-contact .fold__trigger[aria-expanded="true"]::after{
  content:"－";
  color:var(--orange);
}

.page-contact .fold__panel{
  padding:0 2px 24px;
}

.page-contact .fold__panel p{
  margin:0 0 12px;
  max-width:var(--measure);
  font-size:var(--fs-small);
  line-height:1.75;
  color:var(--celadon);
}

.page-contact .fold__panel a,
.page-contact .partner-list a,
.page-contact .contact-closing__note a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}

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

.page-contact .material-list li{
  position:relative;
  padding-left:20px;
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--warm);
}

.page-contact .material-list li::before{
  content:"／";
  position:absolute;
  left:0;
  color:var(--orange);
}

/* ---------- 处理流程 ---------- */
.page-contact .flow-line{
  display:block;
  width:100%;
  height:auto;
  margin:0 0 clamp(20px,3vw,30px);
}

.page-contact .flow-line__base{
  stroke:var(--line);
  stroke-width:1;
}

.page-contact .flow-line__draw{
  stroke:var(--cyan);
  stroke-width:2;
  stroke-dasharray:640;
  stroke-dashoffset:640;
  animation:pc-flow-draw 640ms var(--ease) forwards;
}

.page-contact .flow-line__nodes circle{
  fill:var(--ink);
  stroke:var(--cyan);
  stroke-width:2;
}

@keyframes pc-flow-draw{
  to{stroke-dashoffset:0;}
}

.page-contact .flow-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(16px,2.2vw,22px);
}

.page-contact .flow-step{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:16px;
  border-top:2px solid var(--cyan);
}

.page-contact .flow-step__no{
  font-size:var(--fs-label);
  letter-spacing:.16em;
  color:var(--cyan);
}

.page-contact .flow-step h3{
  margin:0;
  font-size:var(--fs-h4);
  font-weight:800;
  letter-spacing:-.01em;
}

.page-contact .flow-step p{
  margin:0;
  font-size:var(--fs-small);
  line-height:1.75;
  color:var(--celadon);
}

.page-contact .flow-step__time{
  margin-top:auto;
  padding-top:10px;
  font-size:var(--fs-label);
  letter-spacing:.1em;
  color:var(--orange);
}

.page-contact .flow-figure{
  margin:clamp(26px,4vw,44px) 0 0;
}

.page-contact .flow-figure figcaption{
  margin-top:12px;
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--celadon);
}

/* ---------- 合作与素材 ---------- */
.page-contact .partner-grid{
  display:grid;
  gap:clamp(18px,2.6vw,28px);
}

.page-contact .partner-copy p{
  margin:0 0 14px;
  max-width:var(--measure);
}

.page-contact .partner-copy p:last-child{
  margin-bottom:0;
}

.page-contact .partner-panel{
  border-left:3px solid var(--cyan);
}

.page-contact .partner-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.page-contact .partner-list li{
  position:relative;
  padding-left:18px;
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--celadon);
}

.page-contact .partner-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--cyan);
}

/* ---------- 收尾 ---------- */
.page-contact .contact-closing{
  margin-top:clamp(40px,7vw,92px);
  padding:clamp(40px,8vw,104px) 0 clamp(24px,4vw,40px);
  border-top:1px solid var(--line);
}

.page-contact .contact-closing__line{
  margin:0 0 16px;
  font-size:clamp(18px,3.4vw,30px);
  letter-spacing:.04em;
  line-height:1.4;
  color:var(--warm);
}

.page-contact .contact-closing__note{
  margin:0 0 28px;
  max-width:var(--measure);
  font-size:var(--fs-small);
  line-height:1.75;
  color:var(--celadon);
}

.page-contact img{
  max-width:100%;
  height:auto;
}

.page-contact .media-figure{
  margin:0;
}

/* ---------- 响应式 ---------- */
@media (min-width:700px){
  .page-contact .channel-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-contact .channel-card--mail{
    grid-column:1 / -1;
  }
  .page-contact .flow-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:900px){
  .page-contact .contact-hero{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;
  }
  .page-contact .hours-notes{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
  }
  .page-contact .partner-grid{
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    align-items:start;
  }
}

@media (min-width:1024px){
  .page-contact .contact-hours{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .page-contact .channel-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
  }
  .page-contact .channel-card--mail{
    grid-column:span 7;
  }
  .page-contact .channel-card--phone{
    grid-column:span 5;
  }
  .page-contact .channel-card--addr{
    grid-column:1 / -1;
  }
  .page-contact .flow-steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion: reduce){
  .page-contact .flow-line__draw{
    animation:none;
    stroke-dashoffset:0;
  }
  .page-contact .channel-card,
  .page-contact .channel-card:hover{
    transform:none;
  }
}