/* ============================================================
   联系页 contact.html（2026-09-06）
   版式：首屏巨标 → 左说明右表单（说明列里嵌联系方式表）→ 三张分流卡。
   表单控件本身的样式在 assets/css/forms.css，这里只管页面骨架。
   ============================================================ */

.ct-hero { padding-top: clamp(48px, 9vw, 108px); }
/* .sec__label 是 inline-flex、.display 是 inline-block，短英文标题（Hello）时两者会挤在同一行，
   所以这里各自拉成块级，眉题老老实实待在巨标上面。 */
.ct-hero .sec__label { display: flex; width: fit-content; }
.ct-hero .sec__display { display: block; }
.ct-hero__lead { max-width: 46ch; margin-top: 22px; color: var(--mut); }
.ct-hero .meta-chips { margin-top: 26px; }

/* ---------------- 主区 ---------------- */
.ct-main__grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 980px) { .ct-main__grid { grid-template-columns: 1fr; gap: 42px; } }

.ct-side__p { color: var(--mut); margin-top: 16px; max-width: 40ch; }

.ct-steps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.ct-steps li:last-child { border-bottom: 1px solid var(--line); }
.ct-steps b {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.ct-steps li:first-child b { background: var(--accent); color: var(--ink); }

/* 联系方式表：发丝线分隔的两列 */
.ct-chs {
  margin-top: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
  border-top: 1px solid var(--line);
}
.ct-ch {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.ct-ch--wide { grid-column: 1 / -1; }
.ct-ch__k {
  display: block;
  font-size: 12px;
  color: var(--mut-2);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.ct-ch__v {
  display: block;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.55;
  transition: color .2s var(--ease);
}
a.ct-ch__v:hover { color: var(--violet); }
.ct-ch__s {
  display: block;
  font-size: 13px;
  color: var(--mut-2);
  margin-top: 3px;
  text-decoration: none;
}
a.ct-ch__s:hover { color: var(--ink); }
@media (max-width: 520px) { .ct-chs { grid-template-columns: 1fr; } }

/* ---------------- 表单卡 ---------------- */
.ct-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(24px, 3.6vw, 44px);
}
.ct-form .sfield input,
.ct-form .sfield select,
.ct-form .sfield textarea { background-color: var(--ground); }
.ct-form .sfield input:focus,
.ct-form .sfield select:focus,
.ct-form .sfield textarea:focus { background-color: var(--card); }
.ct-form .schip { background-color: var(--ground); }
.ct-form[data-state="done"] { padding: 0; border: 0; }
.ct-form .sform__done { border-radius: var(--r-card); }

/* ---------------- 分流卡 ---------------- */
.ct-else__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px) { .ct-else__grid { grid-template-columns: 1fr; } }

.ct-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ct-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.ct-card__k { font-size: 12px; color: var(--mut-2); letter-spacing: .04em; }
.ct-card b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.ct-card p { font-size: 14px; color: var(--mut); line-height: 1.65; margin-top: 4px; }
.ct-card em {
  margin-top: auto;
  padding-top: 16px;
  font-style: normal;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
}
.ct-card em svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.ct-card:hover em svg { transform: translateX(4px); }
.ct-card:nth-child(1):hover { border-color: var(--violet); }
.ct-card:nth-child(2):hover { border-color: #b9cf35; }