/* ============================================
   Contact / CTA Section - 精确还原 Figma 设计
   蓝底 CTA 横幅 (图片+深蓝 0.75 叠层) + 标题/副标题/Contact Us 药丸按钮
   ============================================ */

.contact {
  position: relative;
  width: 100%;
  background: #ECF6FB;
  padding: 100px 120px;
  overflow: hidden;
}

.contact__inner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

/* --- CTA 横幅 (1680x450, r=8, 图+深蓝叠层烘焙在 JPG) --- */
.contact__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1680 / 450;
  border-radius: 8px;
  overflow: hidden;
  background-image: url(../images/contact-banner.jpg);
  background-size: cover;
  background-position: center;
}

/* --- 横幅内容 (左对齐, 绝对定位) --- */
.contact__content {
  position: absolute;
  top: 21.33%;
  left: 9.35%;
  right: 9.35%;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 2;
}

.contact__title {
  font-family: var(--font-primary);
  font-size: clamp(28px, 3.9583vw, 76px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0 0 clamp(8px, 1.146vw, 22px);
}

.contact__subtitle {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.6667vw, 32px);
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin: 0 0 clamp(16px, 2.604vw, 50px);
}

/* --- Contact Us 按钮 (六边形药丸, 白底+黑描边+蓝字 w700) --- */
.contact__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 9.479vw, 182px);
  height: clamp(44px, 3.021vw, 58px);
  align-self: flex-start;
  text-decoration: none;
  transition: transform var(--duration-micro) var(--ease-emphasized);
}

.contact__cta-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.contact__cta-shape path {
  transition: fill var(--duration-base) var(--ease-standard);
}

.contact__cta-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-primary);
  font-size: clamp(13px, 0.9375vw, 18px);
  font-weight: 700;
  line-height: 25px;
  color: var(--color-primary);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-standard);
}

.contact__cta:hover .contact__cta-shape path {
  fill: var(--color-primary);
}

.contact__cta:hover .contact__cta-text {
  color: var(--color-white);
}

.contact__cta:active {
  transform: scale(0.96);
}

/* ============================================
   Responsive Contact
   ============================================ */

@media (max-width: 1200px) {
  .contact { padding: 80px 60px; }
  /* 标题/副标题字号对齐 contact.shtml 的 Contact Us Now（ct-cta）移动端 */
  .contact__title { font-size: 40px; }
  .contact__subtitle { font-size: 18px; }
}

@media (max-width: 768px) {
  .contact { padding: 60px 20px; }

  /* 横幅改高一些以容纳内容 */
  .contact__banner { aspect-ratio: 3 / 2; }

  .contact__content {
    top: 50%;
    transform: translateY(-50%);
    gap: 18px;
    align-items: center;
    text-align: center;
  }

  /* 标题/副标题字号对齐 Contact Us Now（ct-cta）≤768 */
  .contact__title { font-size: 30px; }
  .contact__subtitle { font-size: 16px; }
  /* 移动端：标题在 "Well-T" 前强制换行 */
  .contact__title-break { display: block; }

  .contact__cta {
    align-self: center;
  }
}

@media (max-width: 576px) {
  .contact { padding: 48px 16px; }

  .contact__banner { aspect-ratio: 4 / 3; }

  .contact__content {
    left: 7%;
    right: 7%;
    gap: 14px;
    align-items: center;
    text-align: center;
  }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .contact__cta,
  .contact__cta-shape path,
  .contact__cta-text {
    transition: none;
  }
}