/* ============================================================
   contact.css — 联系我们 (浅色屏) 还原自 Figma node 1101:2798
   仅含本页专属区块；共享头/尾/浮动电话见 home.css，令牌见 tokens.css
   ============================================================ */
:root {
  --c-field: #f8f8f8;            /* 表单输入框底色 */
  --c-hair: rgba(0, 1, 36, 0.1); /* 浅色屏分隔线 */
}

.contact-page { background: var(--c-paper); color: var(--c-ink); }

/* ============ 浅底头部变体：未滚动时深色 logo/导航 ============ */
.contact-page .site-header:not(.scrolled) .brand-cn { color: var(--c-ink); }
.contact-page .site-header:not(.scrolled) .nav-link { color: var(--c-ink); }
.contact-page .site-header:not(.scrolled) .nav-link:hover,
.contact-page .site-header:not(.scrolled) .nav-link.is-active { color: var(--c-teal); }
.contact-page .site-header:not(.scrolled) .nav-toggle span { background: var(--c-ink); }

/* ============ 页面主体 ============ */
.contact-main { padding: clamp(120px, 13vw, 190px) 0 clamp(80px, 8.33vw, 120px); }
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 563px) minmax(0, 748px);
  justify-content: space-between;
  align-items: start;
  gap: 48px;
}

/* ============ 左：联系信息 ============ */
.ct-info { display: flex; flex-direction: column; gap: 70px; }
.ct-head { display: flex; flex-direction: column; gap: 4px; }
.ct-eyebrow {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 14px; line-height: 1.6; color: var(--c-ink); opacity: .8;
}
.ct-title {
  max-width: 537px;
  font-weight: 400; font-size: 56px; line-height: 1.2; color: var(--c-ink);
}
.ct-title span { color: var(--c-teal); }

.ct-detail { display: flex; flex-direction: column; gap: 16px; }
.ct-company {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--c-hair);
}
.ct-badge {
  flex: none; width: 50px; height: 50px;
  border-radius: 8px; overflow: hidden;
}
.ct-badge img { width: 100%; height: 100%; object-fit: cover; }
.ct-company-name { display: flex; flex-direction: column; gap: 8px; }
.ct-company-name strong {
  font-weight: 400; font-size: 20px; line-height: 1; color: var(--c-ink);
}
.ct-company-name span {
  font-family: 'Open Sans', var(--font-en);
  font-size: 20px; line-height: 1; color: var(--c-ink);
}

.ct-rows { display: flex; flex-direction: column; }
.ct-row { display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.ct-row-icon { flex: none; width: 24px; height: 24px; }
.ct-row-text { display: flex; flex-direction: column; gap: 4px; }
.ct-label {
  font-family: var(--font-cn); font-weight: 300;
  font-size: 16px; line-height: 1.6; color: var(--c-ink); opacity: .8;
}
.ct-val { font-weight: 400; font-size: 20px; line-height: 1.4; color: var(--c-ink); }
.ct-val a { transition: color .2s ease; }
.ct-val a:hover { color: var(--c-teal); }
/* 电话/传真号码用 Open Sans (与全站数字一致) */
.ct-rows li:nth-child(n+2) .ct-val { font-family: 'Open Sans', var(--font-en); }

/* ============ 右：联系表单卡片 ============ */
.ct-form {
  display: flex; flex-direction: column; gap: 30px;
  padding: 40px;
  background: var(--c-white);
  border: 1px solid rgba(0, 1, 36, .05);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 1, 36, .08);
}
.ct-form-head { padding-bottom: 21px; border-bottom: 1px solid var(--c-hair); }
.ct-form-head h2 { font-weight: 400; font-size: 24px; line-height: 1; color: var(--c-ink); }

.ct-field { display: flex; flex-direction: column; gap: 10px; }
.ct-field-row { display: flex; gap: 24px; }
.ct-field-row .ct-field { flex: 1 1 0; min-width: 0; }
.ct-field label {
  font-family: var(--font-cn); font-weight: 400;
  font-size: 16px; line-height: 20px; color: var(--c-ink);
}
.ct-field .req { color: inherit; }

/* 输入控件统一风格 */
.ct-field input,
.ct-field textarea,
.ct-select select {
  width: 100%;
  background: var(--c-field);
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-cn); font-size: 16px; line-height: 24px;
  color: var(--c-ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-field input { height: 50px; padding: 0 14px; }
.ct-field textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: rgba(0, 1, 36, .5); }
.ct-field input:focus,
.ct-field textarea:focus,
.ct-select select:focus {
  outline: none;
  background: var(--c-white);
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(61, 200, 193, .18);
}

/* 自定义下拉 */
.ct-select { position: relative; }
.ct-select select {
  height: 50px; padding: 0 40px 0 18px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
}
.ct-select select:required:invalid { color: rgba(0, 1, 36, .5); }
.ct-select option { color: var(--c-ink); }
.ct-select option[disabled] { color: rgba(0, 1, 36, .5); }
.ct-select-arrow {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 8px; pointer-events: none;
}

/* 校验错误态 */
.ct-field.is-error input,
.ct-field.is-error textarea,
.ct-field.is-error .ct-select select { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .14); }
.ct-error-msg { font-size: 13px; line-height: 1.4; color: #e5484d; }

/* 提交按钮 */
.ct-submit {
  width: 100%; padding: 16px;
  background: var(--c-teal); color: var(--c-navy);
  border-radius: 10px;
  font-family: var(--font-cn); font-size: 16px; line-height: 24px; font-weight: 400;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ct-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(61, 200, 193, .35); }
.ct-submit:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.ct-form-note {
  margin-top: -10px;
  font-size: 15px; line-height: 1.5;
  padding: 12px 16px; border-radius: 10px;
}
.ct-form-note.is-ok { color: #1c7c54; background: rgba(61, 200, 193, .12); }
.ct-form-note.is-err { color: #e5484d; background: rgba(229, 72, 77, .08); }

/* ============ 页脚覆写：恢复实底(保留底部辉光) ============ */
.contact-page .site-footer { margin-top: 0; background: var(--c-navy); }

/* ============================================================
   响应式  ·  与首页同 5 档断点
   ============================================================ */
@media (max-width: 1280px) {
  .ct-title { font-size: 48px; }
}

@media (max-width: 1024px) {
  /* 双列 → 堆叠：联系信息上 / 表单下 */
  .ct-grid { grid-template-columns: 1fr; gap: 48px; }
  .ct-info { gap: 48px; }
  .ct-title { font-size: 40px; }
  .ct-form { max-width: 720px; }
}

@media (max-width: 768px) {
  .contact-main { padding-top: 132px; }
  .ct-title { font-size: 32px; }
  .ct-company-name strong, .ct-company-name span, .ct-val { font-size: 18px; }
  .ct-field-row { flex-direction: column; gap: 20px; }
  .ct-form { padding: 28px 22px; gap: 24px; }
  /* 移动端下拉菜单内导航字回白(深色头部下) */
  .contact-page .site-header:not(.scrolled) .main-nav .nav-link { color: var(--c-white); }
  .contact-page .site-header:not(.scrolled) .main-nav .nav-link:hover { color: var(--c-teal); }
}

@media (max-width: 480px) {
  .ct-title { font-size: 28px; }
  .ct-form-head h2 { font-size: 20px; }
  .ct-row { gap: 16px; }
  .ct-submit{
    padding: 12px;
  }
}