/* ═══════════════════════════════════════════════════════════════
   syz-contact.css
   SYZ Rod Ends — Contact Us 页面独有样式
   适用页面：Contact 联系页
   依赖：style.css, szr-components.css
   类前缀：ct-*
   ═══════════════════════════════════════════════════════════════ */

.ct-hero {
  background: var(--szr-slate);
  padding: 56px 0 52px;
  position: relative;
  overflow: hidden;
}

.ct-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.ct-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 30%; height: 100%;
  background: var(--szr-steel);
  opacity: .06;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

.ct-hero__inner {
  position: relative;
  z-index: 1;
}

.ct-hero__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 10px;
}

.ct-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  max-width: 520px;
  line-height: 1.7;
}

.ct-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}

.ct-form-card {
  background: var(--szr-white);
  border: 1px solid var(--szr-line);
  border-top: 3px solid var(--szr-steel);
  border-radius: var(--szr-r);
  padding: 36px 40px;
  box-shadow: 0 2px 16px rgba(28,43,58,.06);
}

.ct-form-title {
  font-family: var(--szr-f-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--szr-slate);
  letter-spacing: .01em;
  margin-bottom: 6px;
}

.ct-form-sub {
  font-size: .875rem;
  color: var(--szr-mid);
  line-height: 1.6;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--szr-line);
}

.ct-purpose-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ct-purpose-tab {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--szr-line);
  background: var(--szr-white);
  font-family: var(--szr-f-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--szr-mid);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}

.ct-purpose-tab.active {
  border-color: var(--szr-steel);
  background: var(--szr-steel-lt);
  color: var(--szr-steel);
}

.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.ct-field { margin-bottom: 14px; }

.ct-field label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--szr-mid);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ct-field textarea {
  width: 100%;
  border: 1.5px solid var(--szr-line);
  border-radius: 4px;
  padding: 11px 14px;
  font-family: var(--szr-f-body);
  font-size: .875rem;
  color: var(--szr-ink);
  background: var(--szr-white);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}

.ct-field textarea::placeholder { color: rgba(96,112,128,.45); }

.ct-field textarea:focus {
  border-color: var(--szr-steel);
  box-shadow: 0 0 0 3px rgba(26,111,168,.08);
}

.ct-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23607080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.ct-field textarea { resize: vertical; min-height: 110px; }

.ct-field--file input[type="file"] {
  padding: 8px 12px;
  color: var(--szr-mid);
  font-size: .8rem;
  cursor: pointer;
}

.ct-file-hint {
  font-size: .72rem;
  color: var(--szr-mid);
  margin-top: 5px;
}

.ct-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--szr-line);
  flex-wrap: wrap;
}

.ct-form-note {
  font-size: .75rem;
  color: var(--szr-mid);
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ct-form-note svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--szr-mid);
  stroke-width: 2; flex-shrink: 0;
}

.ct-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ct-channel {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--szr-line);
  border-radius: var(--szr-r);
  background: var(--szr-white);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--szr-ease);
}

.ct-channel:hover {
  border-color: var(--szr-steel);
  box-shadow: 0 4px 20px rgba(26,111,168,.1);
  transform: translateY(-2px);
  text-decoration: none;
}

.ct-channel__icon {
  width: 44px; height: 44px;
  border-radius: var(--szr-r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ct-channel__icon svg {
  width: 20px; height: 20px;
  fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.ct-channel--email .ct-channel__icon  { background: var(--szr-steel-lt); }

.ct-channel--email .ct-channel__icon svg { stroke: var(--szr-steel); }

.ct-channel--phone .ct-channel__icon  { background: var(--szr-steel-lt); }

.ct-channel--phone .ct-channel__icon svg { stroke: var(--szr-steel); }

.ct-channel__body { flex: 1; min-width: 0; }

.ct-channel__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--szr-mid);
  margin-bottom: 2px;
}

.ct-channel__value {
  font-family: var(--szr-f-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--szr-slate);
  margin-bottom: 3px;
}

.ct-channel__hint {
  font-size: .78rem;
  color: var(--szr-mid);
  line-height: 1.4;
}

.ct-promise {
  border: 1px solid var(--szr-line);
  border-top: 3px solid var(--szr-steel);
  border-radius: var(--szr-r);
  padding: 22px;
  background: var(--szr-white);
}

.ct-promise__title {
  font-family: var(--szr-f-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--szr-slate);
  margin-bottom: 16px;
}

.ct-promise-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ct-promise-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ct-promise-step__num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--szr-steel-lt);
  border: 1.5px solid #c8dff0;
  font-family: var(--szr-f-head);
  font-size: .72rem;
  font-weight: 800;
  color: var(--szr-steel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.ct-promise-step__text {
  font-size: .82rem;
  color: var(--szr-mid);
  line-height: 1.55;
}

.ct-promise-step__text strong {
  color: var(--szr-ink);
  font-weight: 600;
}

.ct-office {
  border: 1px solid var(--szr-line);
  border-radius: var(--szr-r);
  padding: 22px;
  background: var(--szr-white);
}

.ct-office__title {
  font-family: var(--szr-f-head);
  font-size: 1rem;
  font-weight: 800;
  color: var(--szr-slate);
  margin-bottom: 16px;
}

.ct-office-rows { display: flex; flex-direction: column; gap: 12px; }

.ct-office-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .83rem;
  color: var(--szr-mid);
  line-height: 1.55;
}

.ct-office-row svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--szr-steel);
  stroke-width: 2; stroke-linecap: round;
  flex-shrink: 0; margin-top: 2px;
}

.ct-guide-intro {
  max-width: 600px;
  margin-bottom: 48px;
}

.ct-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ct-guide-card {
  border: 1px solid var(--szr-line);
  border-radius: var(--szr-r);
  background: var(--szr-white);
  padding: 28px;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--szr-ease);
}

.ct-guide-card:hover {
  border-color: var(--szr-steel);
  box-shadow: 0 6px 24px rgba(26,111,168,.1);
  transform: translateY(-3px);
}

.ct-guide-card__tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
}

.ct-guide-card__tag--quote  { background: #fdf2f2; color: var(--szr-red); }

.ct-guide-card__tag--sample { background: var(--szr-steel-lt); color: var(--szr-steel); }

.ct-guide-card__tag--oem    { background: #f0f0f8; color: #5a5aaa; }

.ct-guide-card__title {
  font-family: var(--szr-f-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--szr-slate);
  margin-bottom: 10px;
}

.ct-guide-card__text {
  font-size: .875rem;
  color: var(--szr-mid);
  line-height: 1.7;
  margin-bottom: 18px;
}

.ct-guide-card__checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .82rem;
  color: var(--szr-mid);
}

.ct-guide-card__checklist li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.ct-guide-card__checklist li::before {
  content: '→';
  color: var(--szr-steel);
  flex-shrink: 0;
  font-weight: 600;
}

.ct-bottom-cta__wrap {
  position: relative;
  z-index: 1;
}

.ct-bottom-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.ct-bottom-cta__title {
  font-family: var(--szr-f-head);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  margin-bottom: 6px;
}

.ct-bottom-cta__sub {
  font-size: .9rem;
  color: rgba(255,255,255,.5);
  max-width: 480px;
}

.ct-bottom-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ct-bottom-cta__actions .szr-btn {
  border-radius: var(--szr-r);
  padding: 13px 28px;
  font-family: var(--szr-f-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ct-bottom-cta__actions .ct-btn--light-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.42);
}

.ct-bottom-cta__actions .ct-btn--primary {
  background: var(--szr-red);
  color: #fff;
  border: 2px solid var(--szr-red);
}

@media(max-width:1024px){
  .ct-grid{grid-template-columns:1fr;}
  .ct-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .ct-promise,.ct-office{grid-column:1/-1;}
  .ct-guide-grid{grid-template-columns:1fr;}
}

@media(max-width:768px){
  :root{--szr-pad-x:20px;}
  .szr-section,.ct-hero{padding:48px 0;}
  .ct-grid,.ct-sidebar{grid-template-columns:1fr;}
  .ct-form-card{padding:24px 20px;}
  .ct-row{grid-template-columns:1fr;}
  .ct-form-footer{flex-direction:column;align-items:flex-start;}
  .ct-purpose-tabs{gap:6px;}
  .ct-purpose-tab{padding:7px 12px;font-size:.75rem;}
}