/* ============================================================
   CONTACT — 联系我们页专属样式
   仅 contact.html 引用，独立 ?v 版本控制（不触发全站 bump）。
   2026-09-10：Hero 左侧亮场蒙版 + 文字靠左落位 + 向下引导 CTA
   蒙版方案与 brands.html Hero 保持一致（左白渐变）。
   ============================================================ */

/* ---------- Hero 区 ---------- */
.page-hero--contact {
  min-height: 660px;
  display: flex;
  align-items: center;
  padding-block: 110px 100px;
}

.page-hero--contact h1 {
  font-family: var(--font-display);
  font-weight: 700;
  /* 收小字号：文字列可用内容宽 496px（560 - 左右 padding 32*2）。
     43px 时整句正好卡在折行边界（42px 单行 / 43px 两行），极不稳定，
     故降到 40px 留出约 5% 余量，确保「开始您的全球美妆合作之旅」稳定单行。 */
  font-size: clamp(2.1rem, 2.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.page-hero--contact p {
  margin-top: 18px;
  font-size: var(--fs-lg);
  /* 不用 var(--slate) #6e6e73：2026-09-10 换用 Capabilities/…_1.webp 背景图后，
     该图整体更暗，正文区纯净背景亮度由 242.4 降到 216.9（同法实测），
     slate 对比度 4.55:1 → 3.59:1，跌破 WCAG AA 4.5:1。
     改深色 #55555d 后对比度回到 5.23:1（AA 通过）。
     修法选加深字色而非加白蒙版——加白会让左侧退回此前被否掉的「太空白」观感。 */
  color: #55555d;
  max-width: 560px;
  line-height: 1.7;
}

/* ---------- Hero 左侧亮场蒙版：白区收紧贴合文字，减少空白 ----------
   实测（1440 视口）：文字最右墨迹在 44.4%（副标 640px），旧方案蒙版到 60% 才消失，
   文字右侧留下约 225px 无内容的白区 → 显得空。
   现收紧到 52% 消失，并把峰值不透明度 0.96 降到 0.93（减少死白、透出图片纹理）；
   文字右缘 44.4% 处白度约 0.49，与原方案 0.477 基本持平，可读性不降低。 */
.page-hero--contact .zone__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.93) 0%,
    rgba(255, 255, 255, 0.88) 24%,
    rgba(255, 255, 255, 0.74) 40%,
    rgba(255, 255, 255, 0.34) 47%,
    rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}

.page-hero--contact .page-hero__inner {
  max-width: 560px;
  /* 覆盖 .container 的 margin auto：文字列靠左落位（左缘对齐站点栅格），不居中 */
  margin-left: max(0px, calc((100% - 1200px) / 2));
  margin-right: auto;
}

/* ---------- 向下引导 CTA ---------- */
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* 洋红描边胶囊：贴合「向下引导」的强调语义，白蒙版上对比清晰 */
.page-hero__actions .btn--ghost {
  border-color: rgba(221, 19, 123, 0.35);
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.7);
}
.page-hero__actions .btn--ghost:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}

/* 向下箭头轻微弹跳，强化「向下填写表单」的引导（尊重 prefers-reduced-motion） */
.page-hero__actions .btn--ghost svg {
  animation: ct-arrow-bob 1.6s ease-in-out infinite;
}
@keyframes ct-arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* 锚点滚动落点：避开吸顶 header（64px）+ 呼吸位 */
#leadForm { scroll-margin-top: 96px; }

/* 修正锚点落点被 .reveal 位移带偏 28px：
   表单容器带 .reveal，初始 transform:translateY(28px)。浏览器按「未归位」的
   位置计算 scroll-margin 对齐，滚动完成后元素再上移 28px → 实际落点 68px 而非 96px
   （紧贴在 header 下沿）。这里取消该容器的位移（保留淡入），使落点精确 = 96px。 */
.contact__form-wrap.reveal { transform: none; }

/* ---------- 响应式：≤760px ---------- */
@media (max-width: 760px) {
  .page-hero--contact {
    min-height: auto;
    /* 2026-09-15 收紧：64/40 -> 32/26，整屏占比 ≤ 57%（390×844 实测 ≤ 480px） */
    padding-block: 32px 26px;
  }
  .page-hero--contact .page-hero__inner { max-width: 100%; margin-left: 0; }
  .page-hero--contact h1 { font-size: clamp(1.7rem, 7vw, 2rem); }
  .page-hero--contact p { margin-top: 12px; font-size: 0.95rem; }
  .page-hero--contact .page-hero__meta { margin-top: 14px; }
  .page-hero--contact .page-hero__meta span { padding: 5px 10px; font-size: 0.68rem; }
  /* 向下引导胶囊：nowrap + 15px 字在 390px 屏会右溢 23px 被裁（实测 right=413 > 390），
     移动端缩小并放开换行（2026-09-15） */
  .page-hero--contact .btn--ghost {
    max-width: 100%;
    white-space: normal;
    padding: 11px 18px;
    font-size: 0.85rem;
  }
  /* 移动端改为上下渐变：文字区在上方保持干净，底部让图透出（同步收紧，减少空白） */
  .page-hero--contact .zone__bg::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.78) 38%,
      rgba(255, 255, 255, 0) 66%);
  }
}