/* ==========================================================================
   合并层 refine.css
   --------------------------------------------------------------------------
   在 GPT 版 site.css 之上做增量修改，原文件一行未动，方便对比与回退。

   三项改动：
     1. 弱化版滚动渐入  —— 统一节奏、无交错延迟、位移 7px、可访问性安全
     2. 页脚重构        —— 改用 hshx-site 的完整条款区结构
     3. 排版精度        —— 从 hshx-site 取字距/行高/发丝线规范

   明确没有做的事（避免"AI 味"）：
     · 不加数字跳动计数器
     · 不加交错延迟（--i）
     · 不加整页 keyframes 编舞（rise / rule-draw / faq-in / panel-in 全部不要）
     · 不加统一悬停位移
     · 不改配色（GPT 的藏蓝+橙是其"非 AI 感"的来源，保留）
   ========================================================================== */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --hair:rgba(255,255,255,.14);
  --rule:#dfe6ef;
}

/* --------------------------------------------------------------------------
   1. 弱化版滚动渐入
   --------------------------------------------------------------------------
   与 hshx-site 原版对比：
     原版  transform:translateY(14px) + IntersectionObserver 交错延迟(--i)
     本版  transform:translateY(7px)  + 无交错，全站同一节奏

   安全设计（三层）：
     a. 初始隐藏态挂在 html.js 下 —— 禁用 JS 时元素直接可见，不会白屏
     b. 元素进入视口后 unobserve，只播一次
     c. 1500ms 兜底：无论观察器是否工作，到点强制显示
   -------------------------------------------------------------------------- */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(7px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
html.js [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* 尊重系统"减弱动态效果"设置：直接显示，不做任何位移 */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   2. 页脚重构
   --------------------------------------------------------------------------
   GPT 版页脚：3 栏（品牌 / 邮箱 / 网站信息），无主体信息、无免责声明
   本版页脚：5 栏 + 双主体信息区 + 免责声明（取自 hshx-site）

   注意：按客户要求，页脚不出现电话号码。
   -------------------------------------------------------------------------- */
.footer{
  background:#071a35;
  color:#c8d2df;
  padding:72px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.25fr 1fr;
  gap:46px;
}
.footer-brand img{
  width:186px;
  filter:brightness(0) invert(1);
  margin-bottom:18px;
}
.footer-brand p{
  font-size:.87rem;
  line-height:1.75;
  color:#93a6be;
  margin:0;
  max-width:30ch;
}

/* 栏目标题：用 b 保留 GPT 的标签结构，但统一成小号大写字距风格 */
.footer-col b{
  display:block;
  color:#fff;
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:15px;
}
.footer-col a,
.footer-col p{
  display:block;
  font-size:.875rem;
  line-height:2;
  color:#a7b8cd;
  margin:0;
}
.footer-col a{
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease);
  width:fit-content;
}
.footer-col a:hover{
  color:#fff;
  border-bottom-color:var(--hair);
}
.footer-col .is-static{
  display:block;
  font-size:.875rem;
  line-height:2;
  color:#7d90a8;
}

/* 双主体信息区 —— 用发丝线分隔，不用阴影（GPT 的克制语言） */
.footer-entity{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px;
  margin-top:52px;
  padding-top:26px;
  border-top:1px solid var(--hair);
}
.footer-entity div{
  border-left:3px solid #f28c00;
  padding-left:15px;
}
.footer-entity span{
  display:block;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7f93ac;
  font-weight:750;
  margin-bottom:7px;
}
.footer-entity b{
  display:block;
  color:#eaf1fa;
  font-size:.92rem;
  font-weight:700;
  line-height:1.5;
}
.footer-entity i{
  display:block;
  font-style:normal;
  font-size:.8rem;
  color:#8b9db4;
  line-height:1.65;
  margin-top:5px;
}

/* 免责声明
   教训：该元素原先自己带 .wrap，而 .wrap 靠 margin:auto 做水平居中。
   在同一元素上加 max-width 会收窄盒子，auto 随即把它居中掉（实测确实居中了）；
   改成 margin-left:0 又把整个盒子推到页面最左边（实测 left=0，更糟）。
   正确解法：宽度限制交给内层 <p>，外层保留 .wrap 负责居中与左对齐。 */
.footer-disclaimer{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid var(--hair);
  font-size:.78rem;
  line-height:1.7;
  color:#8093aa;
  max-width:88ch;
}

.legal{
  border-top:0;
  margin-top:16px;
  padding-top:0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:.75rem;
  color:#7b8ea6;
}
.legal a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.legal a:hover{color:#c8d2df;border-bottom-color:rgba(255,255,255,.4)}

/* --------------------------------------------------------------------------
   3. 排版精度（取自 hshx-site）
   -------------------------------------------------------------------------- */
body{
  font-size:16px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* H1 折行修复（实测数据驱动）
   问题：标题用 <br> 只应在一处断行，但中文首段「从新疆棉纱到染色面料，」
        （12 字）在 68.8px 字号下实测需要 732px，而 .hero-copy 只有 700px，
        浏览器于是自行再折一次，把「料，」甩成孤字单独一行。
   修复：① .hero-copy 放宽到 800px（桌面实际列宽 790px）
        ② 字号 vw 系数 5vw → 4.8vw
   验算：1000px 以上时所需宽度 ≈ 10.64×字号，容器 = vw-478，
        解得 vw ≥ 977px 即可容纳；1000px 以下 hero 面板隐藏、正文占满整行。 */
.hero-copy{max-width:800px}
h1{
  font-size:clamp(2.5rem,4.8vw,4.3rem);
  letter-spacing:-.032em;
  line-height:1.14;
}
h2{
  letter-spacing:-.021em;
  line-height:1.22;
}
h3{
  letter-spacing:-.012em;
}
/* 正文段落稍收一点行宽，长行更易读 */
.about-grid p{max-width:62ch}
.section-head p{max-width:46ch;line-height:1.7}

/* 表格数字统一等宽，避免跳动 */
.top-contact,[data-numeric]{font-variant-numeric:tabular-nums}

/* 产品卡：GPT 原版 hover 位移 4px + 40px 弥散阴影偏"模板感"，
   收敛为 2px + 贴身阴影，保留反馈但降低表演性 */
.product-card{
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(18,48,85,.08);
  border-color:#c3cfdd;
}

/* 按钮：GPT 原版 hover 有 translateY(-1px) + brightness(.96) 两个动作叠加，
   收敛为只改底色，不做位移 */
.btn{
  transition:background-color .2s var(--ease),filter .2s var(--ease);
}
.btn:hover{
  transform:none;
  filter:brightness(.94);
}

/* 焦点可见性：键盘导航时必须有清晰焦点环 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid #f28c00;
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   4. 响应式补充（页脚 5 栏 → 2 栏 → 1 栏）
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:38px}
  .footer-brand{grid-column:1/-1}
  .footer-entity{gap:30px}
}
@media(max-width:700px){
  .footer{padding:54px 0 22px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}
  .footer-entity{grid-template-columns:1fr;gap:20px}
  .legal{flex-direction:column;gap:8px}
}
@media(max-width:460px){
  .footer-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   5. Hero 图片轮播
   --------------------------------------------------------------------------
   刻意做成"最不像轮播的轮播"：
     · 只用 opacity 交叉淡入 —— 不做位移、缩放、Ken Burns 推拉
     · 无箭头、无圆点、无可点击控件（没有东西可以点错）
     · 6.5 秒一张，节奏慢到不打扰阅读标题
     · 切换逻辑放在 hero-rotate.js；这里只管视觉

   基础态 opacity:0，靠 .is-active 显示。
   第一张的 is-active 写在 HTML 里，因此：
     · 首屏立即可见，不等待 JS
     · 禁用 JS 时只显示第一张，优雅降级
   -------------------------------------------------------------------------- */
.hero-image{
  opacity:0;
  transition:opacity 1.1s var(--ease);
  /* 叠放的图片不参与交互，避免遮挡 hero 内的按钮点击 */
  pointer-events:none;
}
.hero-image.is-active{
  opacity:1;
}

/* 系统要求减弱动态效果：不做淡入，直接硬切（并把切换交给 JS 决定是否停止） */
@media (prefers-reduced-motion:reduce){
  .hero-image{
    transition:none;
  }
}

/* 手动翻页按钮
   --------------------------------------------------------------------------
   刻意做成"小方按钮 + 细线箭头"，而不是大圆按钮 —— 后者是最典型的模板元素。
   位置在 hero 右下角（对齐容器右边缘），落在面板下方的留白里，不压正文。
   无 JS 时按钮没有任何作用，所以默认隐藏，只在 html.js 下显示。 */
.hero-nav{
  display:none;
  position:absolute;
  right:0;
  bottom:26px;
  gap:8px;
  z-index:3;
}
html.js .hero-nav{display:flex}

.hero-nav-btn{
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(9,26,52,.42);
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background-color .18s var(--ease),border-color .18s var(--ease);
}
.hero-nav-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.62)}
.hero-nav-btn:active{background:rgba(255,255,255,.3)}
.hero-nav-btn svg{width:18px;height:18px;display:block}

@media(max-width:700px){
  /* 窄屏时面板隐藏、正文占满整行，按钮下移避免压住 CTA */
  .hero-nav{bottom:18px}
  .hero-nav-btn{width:38px;height:38px}
}

/* --------------------------------------------------------------------------
   6. 工厂直播预约
   --------------------------------------------------------------------------
   移植自 hshx-site 的 Live.astro（原本是独立页面），按当前单页站的语言重做：
     · 深蓝底，与「制造能力」呼应，形成 白→深蓝→浅灰→深蓝→白 的明暗节奏
     · 四宫格用 gap:1px + 底色透出做发丝线分隔 —— 沿用本站 .flow-grid 的手法
     · 不放大图、不做轮播，避免与 hero 抢戏
   -------------------------------------------------------------------------- */
.live{
  background:var(--navy);
  color:#fff;
}
.live .section-head p{color:#c2d0e4}
.live .eyebrow{color:#f4a62d}

.live-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.17);   /* 透出 1px 发丝线 */
}
.live-card{
  background:var(--navy);
  padding:30px 26px 32px;
}
.live-card>span{
  display:block;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  color:#f28c00;
}
.live-card h3{
  margin:14px 0 9px;
  font-size:1.06rem;
  line-height:1.35;
}
.live-card p{
  margin:0;
  font-size:.87rem;
  line-height:1.62;
  color:#a7bcd8;
}

.live-body{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:64px;
  margin-top:58px;
}
.live-how h3,
.live-rules h3{
  margin:0 0 16px;
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}

.live-how ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:live;
}
.live-how li{
  position:relative;
  padding:14px 0 14px 40px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.92rem;
  line-height:1.6;
  color:#c7d5e8;
}
.live-how li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.live-how li::before{
  counter-increment:live;
  content:counter(live,decimal-leading-zero);
  position:absolute;
  left:0;
  top:15px;
  font-size:.76rem;
  font-weight:800;
  color:#f28c00;
}

/* 注意事项：左侧橙色竖线，沿用页脚主体信息区的强调手法 */
.live-rules{
  border-left:3px solid #f28c00;
  padding-left:22px;
}
.live-rules ul{margin:0;padding:0;list-style:none}
.live-rules li{
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.87rem;
  line-height:1.65;
  color:#9fb4cf;
}
.live-rules li:first-child{border-top:0;padding-top:0}

.live-cta{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:54px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.16);
}
.live-cta-note{
  font-size:.85rem;
  color:#8ba1bd;
}

@media(max-width:1000px){
  .live-grid{grid-template-columns:repeat(2,1fr)}
  .live-body{grid-template-columns:1fr;gap:36px}
}
@media(max-width:700px){
  .live-grid{grid-template-columns:1fr}
  .live-card{padding:24px 20px 26px}
  .live-body{margin-top:40px}
  .live-cta{flex-direction:column;align-items:flex-start;gap:12px;margin-top:40px}
}

/* 直播板块媒体位
   一张真实车间照片，让"可以直播给你看"这句话有实物支撑。
   用发丝线描边 + 极淡底色，与四宫格同一套语言；圆点只是静态标记，不做脉冲动画。 */
.live-media{
  margin:0 0 46px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
}
.live-media img{
  display:block;
  width:100%;
  height:auto;
  max-height:430px;
  object-fit:cover;
  object-position:center 42%;
}
.live-media figcaption{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
  color:#9fb4cf;
}
.live-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f28c00;
  box-shadow:0 0 0 3px rgba(242,140,0,.2);
}
@media(max-width:700px){
  .live-media{margin-bottom:34px}
  .live-media img{max-height:240px}
  .live-media figcaption{padding:11px 14px;font-size:.78rem}
}

/* ==========================================================================
   条款弹窗（新增） 交货与付款 / 事业合伙人 / 隐私政策
   --------------------------------------------------------------------------
   原先页脚「文件」栏的 #terms、#privacy 是死链，这里改用 <dialog> 呈现。
   页脚按钮沿用原来的链接样式，视觉上无变化。
   ========================================================================== */
.footer-link{
  display:block;
  width:fit-content;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  text-align:left;
  color:#a7b8cd;
  font-size:.875rem;
  line-height:2;
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .18s cubic-bezier(.22,.61,.36,1),border-color .18s cubic-bezier(.22,.61,.36,1);
}
.footer-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.footer-link:focus-visible{outline:2px solid #f28c00;outline-offset:2px}

.doc-dialog{
  width:min(780px,calc(100% - 30px));
  max-height:86vh;
  padding:0;
  border:0;
  box-shadow:0 30px 90px rgba(4,20,44,.35);
}
.doc-dialog[open]{display:flex;flex-direction:column}
.doc-body{
  flex:1;
  min-height:0;              /* Safari: flex 子项必须显式写 0，否则会算错尺寸 */
  overflow-y:auto;
  padding:2px 38px 6px;
  /* 注意：这里不要加 -webkit-overflow-scrolling:touch。
     Safari 13+ 已废弃该属性，且会给滚动容器建独立合成层，
     导致层内内容不绘制（表现为"有滚动条、没内容"）。 */
}
.doc-body section{padding:20px 0;border-top:1px solid #dce3ec}
.doc-body section:first-child{border-top:0;padding-top:4px}
.doc-body h3{
  margin:0 0 10px;
  font-size:.98rem;
  letter-spacing:-.01em;
  color:#0b2f68;
}
.doc-body div{font-size:.9rem;line-height:1.78;color:#4a5768}
.doc-body ul{margin:0;padding-left:1.15em}
.doc-body li{margin:6px 0}
.doc-body strong{color:#142033;font-weight:750}
.doc-foot{
  padding:18px 38px 26px;
  border-top:1px solid #dce3ec;
  display:flex;
  justify-content:flex-end;
}

@media(max-width:700px){
  .doc-dialog{width:min(100% - 20px,780px);max-height:90vh}
  .doc-body{padding:2px 20px 6px}
  .doc-body div{font-size:.86rem}
  .doc-foot{padding:14px 20px 20px}
}

/* ==========================================================================
   H1 折行修复（修复 codex-concept.css 引入的回归）
   --------------------------------------------------------------------------
   问题：codex-concept.css 里 `.hero h1{font-size:clamp(2.9rem,5vw,4.75rem)}`
        把上限提到 4.75rem(76px)。中文首段「从新疆棉纱到染色面料，」12 个字
        在 76px 下实测需要 798px，而 .hero-copy 只有 790px —— 超 8px，
        浏览器自行折行，把「料，」甩成孤字单独一行。

        实测触发范围：屏宽 ≥ 约 1520px（1500px 时只剩 2px 余量）。
        也就是绝大多数桌面显示器都会看到断掉的标题。

   修法：把上限从 4.75rem 降到 4.4rem(70.4px) → 需要 739px，留 51px 余量。

   为什么用 `.hero .hero-copy h1` 而不是 `.hero h1`：
     本文件（refine.css）在 codex-concept.css **之前**加载，
     同优先级会输。`.hero .hero-copy h1` 特异性 (0,2,1) 高于
     `.hero h1` 的 (0,1,1)，因此不依赖加载顺序即可生效。
   ========================================================================== */
.hero .hero-copy h1{
  font-size:clamp(2.9rem,5vw,4.4rem);
}

/* ==========================================================================
   事业合伙人板块
   --------------------------------------------------------------------------
   背景：客户要求把合伙人作为网站重要组成部分，在主导航里独立成板块。
   视觉沿用本站语言：浅灰底 + gap:1px 发丝线四宫格（与 .flow-grid / .live-grid 一致）。
   明暗节奏：合作流程(浅灰) → 工厂直播(深蓝) → 事业合伙人(浅灰) → 关于我们(白)
   ========================================================================== */
.partners{background:var(--pale)}

.partner-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#d7dfe9;      /* 透出 1px 发丝线 */
  border:1px solid #d7dfe9;
}
.partner-card{background:#fff;padding:30px 26px 32px}
.partner-card>span{
  display:block;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--orange);
}
.partner-card h3{margin:14px 0 9px;font-size:1.06rem;line-height:1.35}
.partner-card p{margin:0;font-size:.87rem;line-height:1.62;color:var(--muted)}

.partner-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

.btn-ghost-dark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 21px;
  border:1px solid var(--navy);
  border-radius:3px;
  background:transparent;
  color:var(--navy);
  font-weight:750;
  cursor:pointer;
  transition:background-color .2s cubic-bezier(.22,.61,.36,1),border-color .2s cubic-bezier(.22,.61,.36,1);
}
.btn-ghost-dark:hover{background:rgba(11,47,104,.06)}
.btn-ghost-dark:focus-visible{outline:2px solid #f28c00;outline-offset:2px}

@media(max-width:1000px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .partner-grid{grid-template-columns:1fr}
  .partner-card{padding:24px 20px 26px}
  .partner-cta{flex-direction:column;align-items:stretch}
  .partner-cta .btn,.partner-cta .btn-ghost-dark{width:100%}
}

/* 规格说明条（产品区）
   色牢度、缩水率是 B 端工厂选供应商的硬指标，但具体数值不能在这里编造 ——
   统一指向"确认样与随货检测报告"，既告诉客户「这些参数我们给」，
   又不留下无法验证的数字。 */
.spec-note{
  margin:24px 0 0;
  padding:14px 18px;
  border-left:3px solid var(--orange);
  background:var(--pale);
  font-size:.85rem;
  line-height:1.7;
  color:#4a5768;
}
@media(max-width:700px){
  .spec-note{font-size:.8rem;padding:12px 14px}
}

/* 品牌标语（顶栏，试验） */
.brand-slogan{
  display:flex;
  align-items:center;
  flex:none;
  padding-left:16px;
  margin-left:2px;
  border-left:1px solid var(--line);
}
.brand-slogan img{height:30px;width:auto;display:block}
@media(max-width:1100px){.brand-slogan{display:none}}

/* ==========================================================================
   品牌标语「从棉田到衣橱」
   --------------------------------------------------------------------------
   决策：客户要求「只有中文版的时候才有」。
   理由：这是中文书法位图，无法翻译；本站主客户为俄语区，
        在 RU/EN 下它只是一块看不懂的装饰，反而干扰识别。

   实现：用 html[lang] 切换，不依赖 JS 二次渲染 ——
        site.js 的 setLanguage() 会设置 document.documentElement.lang
        （中文时写入 "zh-CN"），所以纯 CSS 就能跟着语言切换。

   显示位置：① 顶栏（logo 右侧）② 页脚（主体信息区上方）

   断点说明：Codex 的移动端汉堡菜单在 max-width:1000px 触发。
   导航折叠后顶栏空间反而更宽裕，所以标语真正需要让位的是
   「1001px ~ 导航刚好放得下」这一段，见下方实测断点。
   ========================================================================== */
.brand-slogan,
.footer-slogan{display:none}

html[lang="zh-CN"] .brand-slogan{
  display:flex;
  align-items:center;
  flex:none;
  padding-left:15px;
  margin-left:2px;
}
html[lang="zh-CN"] .brand-slogan img{height:28px;width:auto;display:block}

html[lang="zh-CN"] .footer-slogan{
  display:block;
  margin-top:46px;
}
html[lang="zh-CN"] .footer-slogan img{
  height:42px;
  width:auto;
  display:block;
  opacity:.92;
}

@media(max-width:1250px){
  /* 1001~1250px：完整导航 + 标语会挤，先让标语退场 */
  html[lang="zh-CN"] .brand-slogan{display:none}
}
@media(max-width:700px){
  html[lang="zh-CN"] .footer-slogan{margin-top:34px}
  html[lang="zh-CN"] .footer-slogan img{height:32px}
}

/* 页脚主体信息区：删除「出口与合同主体（珠海市雄顺达）」后只剩一列，
   原 grid-template-columns:1fr 1fr 会让内容挤在左半边、右边空一大块。
   改为单列并限制最大宽度，保持原有橙色竖线的强调感。 */
.footer-entity{
  grid-template-columns:minmax(0,760px);
}
@media(max-width:700px){
  .footer-entity{grid-template-columns:1fr}
}

/* 页脚标语改版：从"独立一行"移进 logo 栏，和 logo 组成品牌锁定。
   覆盖前面 .footer-slogan 的独立行样式（margin-top:46px 等不再适用）。 */
.footer-brand .footer-slogan{margin-top:14px}
html[lang="zh-CN"] .footer-brand .footer-slogan{
  display:block;
  margin-top:14px;
}
html[lang="zh-CN"] .footer-brand .footer-slogan img{
  height:auto;
  width:100%;
  max-width:186px;
  display:block;
  opacity:.95;
}
@media(max-width:700px){
  html[lang="zh-CN"] .footer-brand .footer-slogan{margin-top:12px}
  html[lang="zh-CN"] .footer-brand .footer-slogan img{max-width:150px}
}

/* ==========================================================================
   移动端两处修复
   --------------------------------------------------------------------------
   ① 移动端 H1 字号 —— 修复我自己的 H1 补丁引入的回归
      我的 `.hero .hero-copy h1` 特异性 (0,2,1)，盖过了 codex-concept.css 里
      @media(max-width:700px) 的 `.hero h1` (0,1,1)。结果手机上跑的是桌面
      clamp(2.9rem,5vw,4.4rem) —— 5vw 在 390px 只有 19.5px，低于最小值，
      于是取到 2.9rem = 46.4px，手机上必然排成 4 行、还把词拆断。
      修法：在同样的断点用同样的高特异性把 Codex 的移动端字号还回去。

   ② 移动端菜单项过高 —— codex-concept.css 的 bug
      它的 `.navlinks a{padding:29px 0}` 是桌面用的，但没包在 media query 里，
      加载顺序又在 site.css 之后，于是盖掉了 site.css 移动端的 padding:8px。
      结果 7 个菜单项每项 85px、整个菜单 856px —— 比一台手机还高。
      修法：用 #navlinks（ID 选择器，特异性 1,0,1）在移动端断点内压回去。
   ========================================================================== */
@media(max-width:700px){
  .hero .hero-copy h1{
    font-size:clamp(2.25rem,11vw,2.9rem);
  }
}
@media(max-width:1000px){
  #navlinks a{
    padding:13px 0;
  }
}

/* --------------------------------------------------------------------------
   移动端 H1 折行 —— 真正根因
   --------------------------------------------------------------------------
   标题文案本身带一个 <br>：
       从新疆棉纱到染色面料，<br>更靠近您的制衣工厂
   桌面宽屏下两半各占一行，很整齐。但手机上容器只有 339px（390px 屏），
   而前段 11 个字 × 42.5px = 467px 放不下 —— 于是每一半各自再折一次，
   变成 4 行，还留下「料，」和「厂」两个孤字。

   修法：让字号跟容器宽度精确挂钩，保证 11 个字刚好一行放得下。
       可用宽度 ≈ 100vw - 51px（左右各 24px 内边距 + 少量余量）
       需要容纳 11 个字 → 字号 = (100vw - 51px) / 11
   这样每一半都稳定占一行，两种断点下都是干净的 2 行。
   -------------------------------------------------------------------------- */
@media(max-width:700px){
  .hero .hero-copy h1{
    font-size:clamp(1.35rem, calc((100vw - 51px) / 11), 2.75rem);
  }
}