/* ===== 联系我们页（08-联系我们.psd 还原） 依赖 style.css 的变量与公共组件 ===== */

/* 整页米白底（总部/园区区采样 #FAF8F4；招商加盟区自带 #F0EBE3） */
body { background: #faf8f4; }

/* ---- 页头横幅轮播（设计稿 y 92-492 → 400px 高；两帧无遮罩，100% 100% 完整显示） ---- */
.page-hero { position: relative; height: 400px; overflow: hidden; background: #2e3b38; }
.hero-bg {
  position: absolute; inset: 0; background-size: 100% 100%; background-position: center;
  opacity: 0; transition: opacity 1s ease;
}
.hero-bg.is-active { opacity: 1; }
/* 标题容器 1320（PSD 标题/圆钮均以 x300/1620 对齐，非 1420） */
.hero-layer { position: relative; height: 100%; }
.hero-text {
  position: absolute; left: 0; right: 0; top: 126px;
  color: #fff; opacity: 0; transform: translateY(18px);
  transition: opacity .9s ease, transform .9s ease; pointer-events: none;
}
.hero-text.is-active { opacity: 1; transform: none; }
/* 标题 58px / Tracking 65(≈3.8px) 白色；墨迹 230-314（行框 81.2 → lh 1.4），行框顶 218 → 区内 126 */
.hero-text h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: 58px; line-height: 1.4; letter-spacing: 3.8px; color: #fff;
}
/* 副标题 14px / Tracking 130(≈1.8px) #F4EFE6；墨迹 334-355，与标题行框底 299.6 间距 28 */
.hero-text p { margin-top: 28px; font-size: 14px; line-height: 1.85; letter-spacing: 1.8px; color: #f4efe6; }
/* 帧2 面包屑 13px / Tracking 160(≈2.1px) #E0D5C2；墨迹 192-211（帧一无此行）：
   文档流内置于标题上方，行框 15.6 + 间距 12 → 帧2 文本块整体上移 27.6px 保持 h1 行框顶 126 不变 */
.hero-text .hero-crumb { margin: 0 0 12px; font-size: 13px; line-height: 1.2; letter-spacing: 2.1px; color: #e0d5c2; white-space: nowrap; }
.hero-text--meta { top: 98px; }
/* 帧切换文字：13px 白，墨迹 435-454（bottom = 492-454 = 38）；激活纯白、非激活半透明白 */
.hero-tabs { position: absolute; left: 0; bottom: 38px; display: flex; gap: 24px; }
.hero-tabs button { font-size: 13px; line-height: 1; color: rgba(255, 255, 255, .55); transition: color .2s; }
.hero-tabs button:hover, .hero-tabs button.is-active { color: #fff; }
/* 轮播圆钮：官方切图 016/017/018（44px ×3，PSD x1475/1526/1578，右缘 1622，bottom = 492-468 = 24） */
.hero-ctrl { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: flex-end; gap: 7px; }
.ctrl-btn { width: 44px; height: 44px; background: center / 44px no-repeat; }
.btn-prev { background-image: url('../icons/016_PC_上一张_默认@2x.png'); }
.btn-prev:hover { background-image: url('../icons/016_PC_上一张_悬停@2x.png'); }
.btn-next { background-image: url('../icons/017_PC_下一张_默认@2x.png'); }
.btn-next:hover { background-image: url('../icons/017_PC_下一张_悬停@2x.png'); }
.btn-pause { background-image: url('../icons/018_PC_暂停轮播_默认@2x.png'); }
.btn-pause:hover { background-image: url('../icons/018_PC_暂停轮播_悬停@2x.png'); }
/* 官方无“播放”带圈切图：按官方按钮规格画圈（44px 圆 + 1px 半透明白描边） */
.btn-pause.is-paused,
.btn-pause.is-paused:hover {
  background-image: url('../icons/Play_白色.svg');
  background-size: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.btn-pause.is-paused:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9); }

/* ---- 上海总部 / 产业园区（y 492-1405，底 #FAF8F4）：图顶 604（-492=112）、线底 1229→1405=176 ---- */
.branch-wrap { padding: 112px 0 176px; }
.branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
/* 图 635×374：左卡官方总部大楼.jpg 比例 1.70 吻合；右卡 02.jpg 为超宽全景按 PSD 卡片比例显示 */
.branch-pic { aspect-ratio: 635 / 374; overflow: hidden; }
.branch-pic img { width: 100%; height: 100%; object-fit: fill; }
/* 信息区：图底 978 → 标题行框顶 999.5（margin 22）；数字 x300、标题 x340（PSD 实测两者行框顶对齐） */
.branch-head { display: flex; align-items: flex-start; margin-top: 22px; }
.branch-num { font-family: var(--serif); font-size: 16px; line-height: 1.2; color: #ad8963; }
/* 标题 30px / Tracking 40(≈1.2px) #282725，行框 45 → lh 1.5；数字右 317 → 标题 340 */
.branch-name { margin-left: 23px; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.5; letter-spacing: 1.2px; color: #282725; }
/* 地址 15px / Leading 28.5(1.9) #706A62；标题行框底 1044.5 → 墨迹顶 1067 */
.branch-addr { margin: 16px 0 0 40px; font-size: 15px; line-height: 1.9; color: #706a62; }
/* 在线地图：官方切图 019（图标+文字+描边圆箭头整体，双态）154×60；内容 x340 → 按钮左 336.5；地址行框底 1088.75 → 按钮顶 1108.5 */
.branch-link {
  display: block; width: 154px; height: 60px; margin: 20px 0 0 36px;
  font-size: 0; overflow: hidden;  /* 文案已含在按钮切图内 */
  background: url('../icons/019_PC_在线地图_默认@2x.png') center / 100% 100% no-repeat;
}
.branch-link:hover { background-image: url('../icons/019_PC_在线地图_悬停@2x.png'); }
/* 分隔线 1px #E2DACF（y1228，x300-1620 全容器宽）；链接底 1168.5 → 线 1228 */
.branch-rule { margin-top: 60px; border-top: 1px solid #e2dacf; }

/* ---- 招商加盟（y 1405-2160，底采样 #F0EBE3）：表单首行行框顶 1514（-1405=109）、按钮底 2048→2160=112 ---- */
.join-wrap { background: #f0ebe3; padding: 109px 0 112px; }
.join-flex { display: flex; align-items: flex-start; }
/* 左列：标题行框顶 1545.65（表单顶下方 32px） */
.join-intro { flex: 1 1 auto; min-width: 0; margin-top: 32px; }
/* 招商加盟 46px / Tracking 15(≈0.69px) #282725，行框 66.7 → lh 1.45（同溯源页标准题） */
.join-intro h2 { font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: 1.45; letter-spacing: .69px; color: #282725; }
/* 官方客服电话（设计稿 y221）：标题行框底 → 电话 31、电话 → 说明 20 */
.join-intro .join-phone { margin-top: 31px; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: 1.2px; color: #282725; }
.join-intro .join-phone + p { margin-top: 20px; }
.join-phone a { color: inherit; text-decoration: none; }
/* 说明 15px / Leading 29.25(1.95) #706A62；标题行框底 1612.35 → 墨迹顶 1669 */
.join-intro p { margin-top: 52px; font-size: 15px; line-height: 1.95; color: #706a62; }
/* 在线客服：官方切图 020（图标+文字+描边圆箭头整体，双态）154×60；说明行框底 1693.75 → 按钮顶 1718.5 */
.join-service {
  display: block; width: 154px; height: 60px; margin: 25px 0 0 -4px;
  font-size: 0; overflow: hidden;
  background: url('../icons/020_PC_在线客服_默认@2x.png') center / 100% 100% no-repeat;
}
.join-service:hover { background-image: url('../icons/020_PC_在线客服_悬停@2x.png'); }

/* 右列表单：x807-1620 宽 813（两列 393.5 + 列距 26） */
.join-form { flex: none; width: 813px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
/* 窄屏（#pageZoom 锁 1200px 布局整体 zoom）容器仅 1104px：表单按 1104/1320 比例（×.8364）缩至 680，
   避免左列介绍被压缩过窄。阈值与 industry.css 一致 */
@media (max-width: 1220px) {
  .join-form { width: 680px; }
}
/* 行距：第 3 个起的字段（div 类型计数，避免命中 p.f-note/button.f-submit）margin 28 → 框顶行距 119 = 60+22.4+8+28.6 */
.join-form div.f-field:nth-of-type(n+3) { margin-top: 28px; }
.f-field label {
  display: block; margin-bottom: 8px;
  font-size: 14px; line-height: 1.6; letter-spacing: .35px; color: #5b5144;
}
/* 输入框：高 60（含 1px 边框）、内底 #FFFDF9、边框 #D4C8B7（纵向扫描 y1551-1611 实测）；placeholder 字 x824 = 框左 807+17 */
.f-field input,
.f-field textarea {
  width: 100%; height: 60px; padding: 0 17px;
  background: #fffdf9; border: 1px solid #d4c8b7; border-radius: 0; outline: none;
  font-family: var(--sans); font-size: 15px; color: #282725;
}
.f-field input::placeholder,
.f-field textarea::placeholder { color: #938a7d; }  /* 15px #938A7D */
.f-field input:focus,
.f-field textarea:focus { border-color: #ad8963; }
/* 留言框：高 136（y1790-1925 实测）、placeholder 行框顶 1803.75 → 上内边距 14；PSD 右下画有缩放手柄，保留浏览器原生 resize */
.f-field--area textarea { height: 136px; padding: 14px 17px; line-height: 1.7; resize: vertical; }
.f-field--area { grid-column: 1 / -1; }
/* 注释 13px / Leading 24(1.85) #706A62；留言框底 1926 → 墨迹顶 1949 */
.f-note { grid-column: 1 / -1; margin-top: 19px; font-size: 13px; line-height: 1.85; color: #706a62; }
/* 提交反馈（?sent=1 / ?err=… 回跳显示） */
.f-msg-ok { color: #4a7c59; }
.f-msg-err { color: #b0413e; }
/* 个人信息处理告知（提交按钮上方小字） */
.f-privacy { grid-column: 1 / -1; margin-top: 8px; font-size: 12px; line-height: 1.8; color: #8a847c; }
/* 提交按钮：暖棕金色块 + 衬线字（原为含字切图 021，现改为纯色按钮显示文字） */
.f-submit {
  grid-column: 1 / -1; justify-self: start;
  min-width: 160px; height: 54px; margin-top: 21px; padding: 0 44px;
  font-family: var(--serif); font-size: 18px; letter-spacing: 6px; text-indent: 6px;
  color: #fff; background: #ad8963; border: none; border-radius: 0; cursor: pointer;
  transition: background-color .25s;
}
.f-submit:hover { background: #97744f; }