@charset "UTF-8";
/* ===========================================================================
   青岛海隽贸易有限公司  Hisein 官网 —— 全站样式
   ---------------------------------------------------------------------------
   改配色/字号：直接改下面 :root 里的变量即可，全站自动生效。
   区块顺序：顶部条 → 导航 → 首屏轮播 → 信任条 → 产品 → 优势 → OEM流程
             → 应用行业 → 案例 → 资质 → 新闻 → 询盘 → 页脚
   =========================================================================== */

/* ------------------------------ 字体 ------------------------------
   全站字体 Montserrat，已转成本地 woff2 部署（fonts/montserrat-var.woff2），
   不引用 Google Fonts 等在线地址，国内网络下也能正常显示、断网也能打开。
   该文件是可变字体，一个文件覆盖 100–900 全部字重，无需按字重分别加载。
   Montserrat 不含中文字形，中文会自动回退到系统字体（见下方 --font-sans 栈尾）。 */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/montserrat-var.woff2") format("woff2");
}

/* ------------------------------ 设计变量 ------------------------------ */
:root{
  /* 主色：红色（客户指定），与产品包装 "true taste 真の味" 的品牌红一致 */
  --red:        #C8102E;
  --red-dark:   #9E0C24;
  --red-soft:   #FDF1F3;

  /* 中性色 */
  --ink:        #1B1B1B;   /* 主文字 */
  --ink-2:      #4A4A4A;   /* 次级文字 */
  --muted:      #7C7772;   /* 辅助文字 */
  --line:       #E7E1D9;   /* 描边 */
  --sand:       #F7F3EE;   /* 米白底 */
  --white:      #FFFFFF;
  --dark:       #161718;   /* 深色区块（OEM流程 / 页脚） */

  /* 注意：Montserrat 没有中文字形，中文会依次回退到后面列出的系统字体 */
  --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;

  --radius:     18px;
  --radius-lg:  28px;
  --shadow-sm:  0 2px 8px rgba(24,18,12,.05);
  --shadow:     0 18px 40px -18px rgba(24,18,12,.18);
  --shadow-lg:  0 30px 70px -28px rgba(24,18,12,.30);
  --wrap:       1240px;
  /* 宽屏"外侧留白"基准：导航条 / 顶部信息条 / 首页海报文案共用同一条式子
     max(32px, 41.5% - var(--edge-w))，所以它们的左边缘落在同一条竖线上。 */
  --edge-w:     620px;
  --topbar-h:   38px;
  --header-h:   76px;   /* 首屏高度按 100svh 减去顶栏+页头计算，改这两个值首屏会自动跟随 */
  --admin-bar:  0px;    /* 登录态 WP 工具条高度，下面 .admin-bar 会改写 */
  --ease:       cubic-bezier(.22,.61,.36,1);
}
.admin-bar{ --admin-bar:32px; }
@media screen and (max-width:782px){ .admin-bar{ --admin-bar:46px; } }
@media screen and (max-width:600px){ .admin-bar{ --admin-bar:0px; } }

/* ------------------------------ 基础重置 ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* 抽屉打开时锁背景滚动 —— 只用 touch-action，不用 overflow:hidden。
   实测：给 html/body 加 overflow:hidden 后文档滚动容器停滚，.site-header 的 position:sticky
   随之失效、回到文档原位，而移动端抽屉是绝对定位挂在页头下的，
   从页面中途打开时抽屉整个跑到屏幕外（navTop 从 77 变成 -591）—— 正是用户报的 bug。
   touch-action 不继承但对后代生效（命中元素向上求交集），所以下面 .nav 里再打开纵向拖动；
   iOS 上的惯性滚动由 main.js 的 touchmove 兜底。 */
html.nav-open body{ touch-action:none; }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto 是必需的：WP 输出的 <img> 带 width/height 属性，
   而下面的各容器只限 max-width/max-height，不限高度就会被拉成竖条。 */
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:800; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol,dl{ margin:0; padding:0; list-style:none; }
dd{ margin:0; }

.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* 跳过导航：聚焦时出现，键盘用户直达正文 */
.skip-link{
  position:absolute; left:16px; top:0; z-index:100;
  padding:10px 16px; border-radius:0 0 8px 8px;
  background:var(--red); color:#fff; font-size:14px; font-weight:700;
  transform:translateY(-120%); transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); outline:2px solid #fff; outline-offset:2px; }

.site-main{ display:block; min-width:0; }

.wrap{ width:min(var(--wrap), 100% - 64px); margin-inline:auto; }

/* 图标 */
.ic{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor;
     stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ic-xs{ width:13px; height:13px; stroke-width:2.2; }
.ic-lg{ width:26px; height:26px; }
.ic-xl{ width:32px; height:32px; stroke-width:1.5; }
/* 信任条 / 应用行业的图标改成后台上传的图片：按短边缩放，不变形。 */
img.ic{ object-fit:contain; }

/* 小标题 */
.eyebrow{
  margin:0 0 14px; color:var(--red); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow-light{ color:#FFC9D1; }

/* ------------------------------ 按钮 ------------------------------
   层级约定（全站统一）：
   · 色板：btn-primary = 主操作（红底）；btn-ghost = 次操作；btn-light = 深色底上的主操作
   · 尺寸：btn-sm = 页头/侧栏/卡片内；默认 = 区块 CTA；btn-lg = 表单提交 / 页脚大 CTA
   · 主操作带箭头图标（.ic），次操作一般不带（新闻 Read more 除外，表示前进） */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  font-size:14.5px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  transition:all .28s var(--ease); white-space:nowrap;
}
.btn .ic{ transition:transform .28s var(--ease); }
.btn:hover .ic{ transform:translateX(4px); }

.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 24px -12px rgba(200,16,46,.75); }
.btn-primary:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 16px 32px -14px rgba(200,16,46,.85); }

.btn-ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }

.btn-light{ background:#fff; color:var(--red); }
.btn-light:hover{ background:#FFE9EC; transform:translateY(-2px); }

.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-lg{ padding:17px 34px; font-size:15.5px; }

/* ------------------------------ 顶部信息条 ------------------------------ */
/* 顶部信息条：底色改为主红（客户要求） */
.topbar{ background:var(--red); color:rgba(255,255,255,.90); font-size:12.5px; padding-top:env(safe-area-inset-top, 0px); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--topbar-h); }
.topbar a{ display:inline-flex; align-items:center; gap:8px; min-width:0; transition:color .2s; overflow-wrap:anywhere; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; flex-wrap:wrap; gap:12px 24px; min-width:0; }
/* 红底上原来的 66% 白只有约 3.6:1，偏小字号会发虚，提到 88% */
.topbar-right{ letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; color:rgba(255,255,255,.88); }

/* ------------------------------ 头部导航 ------------------------------ */
.site-header{
  position:sticky; top:var(--admin-bar); z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.site-header.is-stuck{ border-color:var(--line); box-shadow:0 8px 24px -18px rgba(0,0,0,.35); }
.header-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--header-h); }

.logo{ flex:none; min-width:0; }
.logo img{ height:36px; width:auto; max-width:min(180px, 42vw); object-fit:contain; }

/* 导航绝对居中（客户偏好：导航文字水平居中） */
.nav{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center;
  /* 导航项间距（客户要求"间距大一些"）。不能写死一个大值：
     .nav 是绝对居中的，加了 Home 项和下拉箭头后，1025px 这类窄桌面两侧只剩 715px 可用，
     固定 72px 会让导航左右各撞掉 18px / 43px。所以按视口伸缩 ——
     1025 档 44px、1400 档 55px、1920 档 75px，宽屏明显拉开、窄屏不撞 LOGO 和按钮。
     移动端（≤1024）的列式下拉菜单另有 gap:0 覆盖，不受这里影响。 */
  gap:clamp(44px, 3.9vw, 76px);
}
.nav-link{
  display:inline-flex; align-items:center; font-size:14.5px; font-weight:600;
  color:var(--ink-2); transition:color .22s; white-space:nowrap;
}
.nav-link:hover,
.nav-link[aria-current="page"],
.nav-link.is-current{ color:var(--red); }

/* Products 右侧的下拉箭头（客户要求）。
   用 CSS 画：一个只带右边框和下边框的方块旋转 45°，正好是向下的箭头；
   悬停/聚焦时翻成向上，提示菜单已展开。用 currentColor 所以自动跟随文字颜色，
   悬停变红、移动端深色背景也不用单独配色。 */
.nav-caret{
  width:6px; height:6px; margin-left:9px; flex:none;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);   /* 只带右、下边框的方块转 45° = 向下的箭头 */
  transition:transform .24s var(--ease);
}
.nav-link.has-drop:hover .nav-caret,
.nav-link.has-drop:focus-visible .nav-caret{ transform:rotate(225deg); }   /* 展开时翻成向上 */

/* 产品大菜单（Mega Menu）：两行 × 三列，每项为「产品图 + 文案」
   面板以导航中心为基准水平居中，宽度随视口收缩（min 与 calc 配合，窄屏不会溢出） */
.dropdown{
  position:absolute; top:calc(100% + 16px); left:50%;
  /* 100vw 含滚动条宽度，用 80px 外边距避免桌面出现横向滚动条 */
  width:min(1080px, calc(100vw - 80px)); padding:22px;
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.dropdown::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-link.has-drop:hover + .dropdown,
.nav-link.has-drop:focus + .dropdown,
.dropdown:hover,
.dropdown:focus-within{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.mega-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mega-item{
  display:flex; align-items:center; gap:16px; padding:12px;
  border:1px solid transparent; border-radius:14px; transition:all .22s var(--ease);
}
.mega-item:hover{ background:var(--sand); border-color:var(--line); }

/* 缩略图用白色圆角方块：产品图多为白底，白底 + 白块可无缝融合，只留一圈细描边 */
.mega-thumb{
  flex:none; width:88px; height:88px; padding:8px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:12px;
}
.mega-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }

.mega-text{ display:block; min-width:0; }
.mega-text b{ display:block; font-size:15px; font-weight:700; line-height:1.3; color:var(--ink); transition:color .2s; }
.mega-text em{ display:block; margin-top:5px; font-size:12.5px; font-style:normal; line-height:1.45; color:var(--muted); }
.mega-item:hover .mega-text b{ color:var(--red); }

.mega-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:16px; padding:16px 12px 0; border-top:1px solid var(--line);
}
.mega-foot span{ font-size:13px; color:var(--muted); }
.mega-foot a{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--red); }
.mega-foot a .ic{ transition:transform .28s var(--ease); }
.mega-foot a:hover .ic{ transform:translateX(4px); }

.header-actions{ display:flex; align-items:center; gap:12px; flex:none; }
/* 抽屉内 CTA：桌面导航不显示，≤1180 汉堡打开后才出现（页头按钮已藏） */
.nav-cta{ display:none; }

/* ------------------------------ 导航条 / 顶部信息条：宽屏往两边展开 ------------------------------
   客户要求"LOGO 和按钮往两边去一下"。用与首页海报文案区【完全相同】的那条式子
   max(32px, 41.5% - var(--edge-w)) 作为左右外侧留白，于是宽屏下
   logo 的左边缘、顶部信息条左边缘、海报文案左边缘落在同一条竖线上，右侧对称。
   为什么不用 .wrap 的 1240px：那会让 logo 停在 1240 网格上（1920 视口距左边 340px），
   与已经加宽的海报文案（距左边 171px）对不齐，上面这两条横条会显得比首屏缩了一圈。
   不需要媒体查询：视口 ≤1570px 时这条式子被 max() 夹到 32px，
   恰好等于 .wrap 在这档宽度下的实际边距（100% - 64px 再居中），所以手机/窄屏完全不受影响。 */
.topbar-inner, .header-inner{
  width:100%;
  padding-left:max(32px, calc(41.5% - var(--edge-w)));
  padding-right:max(32px, calc(41.5% - var(--edge-w)));
}

/* 汉堡按钮（移动端）
   三条杠用绝对定位而不是 grid —— grid 的行会被 align-content:stretch 撑高，
   导致两条杠平移距离不够、展开后合不拢成 X（会变成 ">" 的形状）。 */
.burger{
  display:none; position:relative; width:44px; height:44px; padding:0;
  background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer;
}
.burger span{
  position:absolute; left:50%; margin-left:-9.5px; width:19px; height:2px;
  background:var(--ink); border-radius:2px; transition:all .3s var(--ease);
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ------------------------------ 首屏海报轮播 ------------------------------
   形式：海报按原比例整幅展示 —— 不裁切、不压暗、不放大。
        文案叠加在海报左侧留白区；轮播控件放在海报下方的独立细条里。
   可调项：
     --poster-ratio  海报宽高比（改海报尺寸时同步改这里）
     --scrim         文字遮罩，默认 none（完全不遮挡海报）；某张海报左侧偏亮时再单独开启
   换海报：覆盖 images/hero-poster-1/2/3.jpg 即可，这里不用改。 */
.hero{
  --poster-ratio: 1920 / 750;   /* 与海报实际尺寸一致 → 整张完整显示，不裁切 */
  --scrim: none;                /* 不压暗海报。需要时例：linear-gradient(90deg, rgba(10,11,14,.62), rgba(10,11,14,0) 60%) */
  position:relative; overflow:hidden; color:#fff;
  background:#14161A;           /* 海报未加载出来时的兜底底色 */
}

/* 海报层：高度由宽高比撑开，所以海报永远按原比例完整显示 */
.hero-posters{
  position:relative; width:100%; z-index:0;
  aspect-ratio:var(--poster-ratio);
  background:#14161A;
}
.hero-poster{
  position:absolute; inset:0; display:block;
  --poster-scrim:none;
  opacity:0; transition:opacity .6s var(--ease);
  /* 这里刻意不做任何放大动效 —— 任何 scale 都会让海报超出容器而被裁掉 */
}
.hero-poster.is-active{ opacity:1; }
/* 实图铺满比例盒：contain 保证不裁切（与原先 background-size:contain 一致） */
.hero-poster-img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block;
}

/* 文案区左侧渐隐：只压暗文案所在的左半边，右侧产品区不受影响。
   它挂在 .hero-poster 上，所以会跟着海报一起淡入淡出，不用单独做动画。
   海报 1、2 是偏亮的实景照，白字直压只有 1.47 / 1.68:1，靠这层兜到 4.5:1 以上；
   海报 3 用的是深色字，不给它设 --poster-scrim（默认 none，等于完全不遮）。 */
.hero-poster::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--poster-scrim, none);
}

/* 海报用模板输出的 <img.hero-poster-img>；左侧渐隐默认关闭（--poster-scrim:none）。
   白字可读性靠 .hero-text 的文字阴影。需要压暗左半边时给该 .hero-poster 设 --poster-scrim。 */

/* 文字遮罩：默认关闭，--scrim 为 none 时什么都不画，海报 100% 原样显示 */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--scrim);
}

/* 文案层：只占海报左侧留白区，垂直居中。
   【关键】这一层是 inset:0 铺满整个海报区的，层级又在海报之上，
   如果不关掉它的鼠标命中，海报上的圆点会被整层挡住、点了没反应。
   所以这里 pointer-events:none（整层透明给点击），
   再把文案块本身设回 auto，让文案里的按钮和链接照常可点。 */
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center;
  pointer-events:none;
}
.hero-inner{ padding:24px 0; pointer-events:none; }
.hero-copy{ pointer-events:auto; }

/* 海报文案块加宽（客户要求"海报 3 放大"）。
   文字块【右边界】必须停在海报宽度的 41.5% 以内（三张海报最靠左的产品分别在
   42.1% / 45.3% / 41.8% 处，越线就会压到产品）；这里动的是【左起点】——
   宽度所以从 456.8px 放宽到 620px，最长那行 "CUSTOMIZED SOLUTIONS."（21 字）
   终于排得下 44px，三张海报标题统一 44px。
   注意别再用 41.5vw 算：vw 含滚动条宽度、海报实际宽度不含，
   实测 1400px 视口下会越线 6.2px 压到产品。改用百分比（相对 .hero 解析）才精确。
   代价：宽屏下海报文案不再与下方 1240 网格左对齐（1920 时左移约 162px）。 */
/* 宽屏文案区宽度：与导航条的左右留白同源，见 :root 的 --edge-w */
.hero-copy{ display:grid; width:100%; max-width:var(--edge-w); }

/* 文案始终叠在海报上：用 .hero-overlay 的左右内边距划出左侧安全区。
   右 = 58.5% → 文案区右边界落在海报宽度的 41.5%（避免压到右侧产品）；
   左 = 41.5% - 文案宽（不小于 32px）→ 宽屏下文案宽恒为 --edge-w(620px)。
   ≤1180 改用百分比内边距 + 缩小字号，仍叠在海报上，不堆到下方。 */
@media (min-width:1181px){
  .hero-overlay{
    padding-left:max(32px, calc(41.5% - var(--edge-w)));
    padding-right:58.5%;
  }
  .hero .wrap.hero-inner{ width:100%; margin-inline:0; }
}
/* ---- 文案配色随海报明暗自动切换 ----
   默认（海报是深的）→ 白字。
   海报是亮的时候，给那一段 <article class="hero-text"> 加一个 on-light 类，自动改用深字。
   这个开关不是凭感觉设的：实测客户那张海报左侧平均亮度 218/255，
   白字放上去对比度只有 1.2:1（等于看不见），深字是 7.05:1（达标）。 */
.hero-text{
  --copy:#FFFFFF;
  --copy-soft:rgba(255,255,255,.84);
  --copy-line:rgba(255,255,255,.45);
  --eyebrow:#FF9AA9;
  /* 白字的可读性靠一层很轻的描边阴影，不压暗海报。
     调轻重就改这一行：alpha 越大越重，最后的模糊半径越大越"糊"。
     当前只保留两层很贴身的阴影，去掉了原先那圈会糊在字周围的 14px 大阴影。 */
  --copy-shadow:0 0 1px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.28);
  --ghost-line:rgba(255,255,255,.55);
  --ghost-fg:#FFFFFF;
  --ghost-hover-bg:#FFFFFF;
  --ghost-hover-fg:#1B1B1B;

  grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility .6s;
}
.hero-text.on-light{
  --copy:#17181A;
  --copy-soft:rgba(23,24,26,.92);
  --copy-line:rgba(23,24,26,.34);
  --eyebrow:#A00E24;
  /* 深色字用在"海报左侧是照片"的情况（海报 1、3）。
     照片里难免有很暗的局部（海报 1 实测有 15.8% 的区域是深色：锅、深色蔬菜、台面阴影），
     深字压上去会糊，所以加一圈很贴身的白色光晕 —— 只贴着笔画走、不铺色块。
     觉得重就调小这里的 alpha，或整行删掉换成 none。 */
  --copy-shadow:0 0 2px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.55);
  --ghost-line:rgba(23,24,26,.38);
  --ghost-fg:#17181A;
  --ghost-hover-bg:#17181A;
  --ghost-hover-fg:#FFFFFF;
}
.hero-text.is-active{ opacity:1; visibility:visible; transform:none; }

/* 海报文案整体放大（客户要求"文案都放大些"）。
   注意 .hero-title 另有 js/main.js 的 fitHeroTitles 兜底：它只在"单行宽度超出文案块"时
   按比例缩小，所以这里把上限调大后——较短的标题会真的变大，而最长的
   "CUSTOMIZED SOLUTIONS."（海报 3）仍会被文案块宽度卡住（约 33.7px）。
   文案块宽度受"海报左侧干净区 41.5%"这条硬约束限制，见 .hero-copy。 */
.hero .eyebrow{ color:var(--eyebrow); font-size:14px; }
.hero-title{
  font-size:clamp(28px, 2.9vw, 44px); font-weight:800; text-transform:uppercase;
  letter-spacing:-.015em; line-height:1.03; color:var(--copy);
  text-shadow:var(--copy-shadow);   /* 只跟着文字走的一层淡淡阴影，不构成对海报的遮挡 */
}
.hero-sub{
  margin-top:18px; max-width:var(--edge-w); color:var(--copy-soft);
  font-size:17.5px; line-height:1.66; text-shadow:var(--copy-shadow);
}
.hero-sub strong{ display:block; margin-bottom:6px; color:var(--copy); font-size:18.5px; font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:26px; }
.hero-cta .btn{ font-size:15.5px; }
/* 次级按钮只描边、不填充 —— 避免任何色块盖住海报 */
.hero .btn-ghost{ background:transparent; border-color:var(--ghost-line); color:var(--ghost-fg); }
.hero .btn-ghost:hover{ background:var(--ghost-hover-bg); border-color:var(--ghost-hover-bg); color:var(--ghost-hover-fg); }

/* 规格参数：纯文字一行，不加底色和描边，尽量不干扰海报 */
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center;
  margin-top:20px; font-size:14.5px; color:var(--copy-soft); text-shadow:var(--copy-shadow);
}
.hero-meta li + li::before{ content:"·"; margin:0 10px; color:var(--copy-line); }

/* 轮播指示圆点：水平居中、贴海报下缘（客户要求"海报中间靠下"）。
   放在 .hero-posters 内部，所以永远跟着海报走，不受版式变化影响。
   圆点本身极小、且只在字形位置上，不构成对海报的遮挡。 */
.hero-dots{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:2;                       /* 盖在海报层之上 */
  display:flex; align-items:center; gap:12px;
}
/* 圆点用"深色实心 + 1px 白色描边"，而不是白点：
   三张海报底部中间分别是浅木台面 / 近白石材 / 中深木台面，
   白点压在近白石材上实测只有约 1.4–1.7:1（几乎看不见），
   深点则在这三种背景上都有 4.6:1 以上；万一遇到深色背景，那圈白描边负责兜底。 */
.dot{
  position:relative; width:9px; height:9px; padding:0; border:0;
  border-radius:999px; cursor:pointer;
  background:rgba(20,22,26,.52);
  box-shadow:0 0 0 1px rgba(255,255,255,.6), 0 1px 5px rgba(0,0,0,.30);
  transition:background-color .25s var(--ease), width .25s var(--ease);
}
/* 圆点本身很小，用伪元素把点击热区撑大，方便手指点 */
.dot::after{ content:""; position:absolute; inset:-9px -6px; }
.dot:hover{ background:rgba(20,22,26,.72); }
.dot.is-active{ width:26px; background:#14161A; }

/* ------------------------------ 信任条 ------------------------------ */
/* 优势条：底色改为主红（客户要求）。它紧跟在海报下方，所以不再需要分隔线 */
.trustbar{ background:var(--red); color:#fff; }
.trust-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; padding:28px 0; }
.trust-item{ display:flex; align-items:center; gap:14px; min-width:0; }
.trust-item b,.trust-item span{ overflow-wrap:anywhere; }
.trust-item .ic{ color:rgba(255,255,255,.92); }   /* 原来的粉红图标压在主红上只有 2.6:1，改白 */
.trust-item b{ display:block; font-size:14px; font-weight:700; }
.trust-item span{ display:block; font-size:12.5px; color:rgba(255,255,255,.85); line-height:1.4; }

/* ------------------------------ 通用区块 ------------------------------ */
.section{ padding:96px 0; }
/* 通用页（page.php）：正文区底边与新闻 .article-wrap 对齐，避免短文贴紧 CTA */
.section--content{ padding-top:72px; padding-bottom:88px; }
.section--content .article-body{ margin-top:0; }
.section-cream{ background:var(--sand); }
.sec-head{ max-width:780px; margin-bottom:56px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-title{ font-size:clamp(28px, 3.2vw, 42px); }
.sec-lead{ margin-top:18px; color:var(--ink-2); font-size:16.5px; line-height:1.68; }

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

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s;
}
a.card:hover,.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(200,16,46,.3); }

/* ------------------------------ 产品类目 / 产品卡（首页 + 产品页通用） ------------------------------
   图片框用 1:1：客户的产品图都是正方形（1254×1254），
   用 4:3 的横框会被高度限制、左右各空约 29%，1:1 才能铺满。 */
.prod-media{
  aspect-ratio:1/1; display:grid; place-items:center; padding:30px;
  background:#fff; border-bottom:1px solid var(--line);
}
.prod-media img{ max-width:100%; max-height:100%; object-fit:contain; }
.prod-body{ padding:26px 26px 28px; }
.prod-body h3{ font-size:20px; }
.prod-sub{ margin-top:6px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--red); }
.prod-desc{ margin-top:14px; font-size:14.5px; line-height:1.68; color:var(--ink-2); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.tags li{
  font-size:12px; font-weight:600; color:var(--ink-2); background:var(--sand);
  border-radius:999px; padding:5px 11px;
}
.prod-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-size:14px; font-weight:700; color:var(--red);
}
.prod-link .ic{ transition:transform .28s var(--ease); }
.prod-card:hover .prod-link .ic{ transform:translateX(4px); }

.brand-note{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:48px;
  padding:20px 26px; background:var(--sand); border-radius:14px;
  font-size:14.5px; color:var(--ink-2);
}
.brand-note .ic{ color:var(--red); }
.brand-note b{ color:var(--ink); }

/* ------------------------------ 公司优势 ------------------------------ */
.why-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:start; }
.why-left{ position:sticky; top:calc(var(--header-h) + var(--admin-bar) + 32px); }
.why-left .btn{ margin-top:30px; }

.why-list li{
  display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.why-list li:first-child{ padding-top:0; }
.why-list li:last-child{ border-bottom:0; }
.why-list .num{
  font-size:13px; font-weight:800; color:var(--red); letter-spacing:.04em;
  padding-top:5px;
}
.why-list h3{ font-size:18px; }
.why-list p{ margin-top:9px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }

/* ------------------------------ OEM 七步流程（全站核心锚点，深色区块） ------------------------------ */
.process{
  /* 在深色区块内局部覆盖变量，子元素自动适配，无需逐个改样式 */
  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.78);
  --muted:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.14);
  --red:#FF6079;                 /* 深底上的红需要提亮，保证对比度 */
  --sand:rgba(255,255,255,.06);
  position:relative; padding:100px 0; color:#fff; background:var(--dark);
}
.process::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% -10%, rgba(200,16,46,.28), transparent 62%);
  pointer-events:none;
}
.process .wrap{ position:relative; }

.stepper{ margin-top:8px; }

/* 步骤横轴 */
.rail{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); padding-top:6px; }
.rail::before{
  content:""; position:absolute; top:28px; left:7.1%; right:7.1%; height:2px; background:var(--line);
}
.rail::after{
  content:""; position:absolute; top:28px; left:7.1%; height:2px; background:var(--red);
  width:calc((100% - 14.2%) * var(--progress, 0));
  transition:width .55s var(--ease);
}
.node{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:0 6px; background:none; border:0; cursor:pointer; text-align:center;
}
.node-dot{
  position:relative; z-index:1; width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:#232527; border:1.5px solid var(--line);
  font-size:12.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums;
  transition:all .3s var(--ease);
}
.node-label{ font-size:13px; font-weight:600; color:var(--muted); line-height:1.35; transition:color .3s; overflow-wrap:anywhere; }
/* 圆点悬停交互（客户要求"圆点扩大、透明底降低"）：
   圆点放大 1.13 倍；那层半透明光晕（透明底）比选中态的 7px/.16 更小更淡（5px/.10）。
   用 transform 缩放不影响布局，所以下方的步骤名不会跟着挪动。 */
.node:hover .node-dot{
  transform:scale(1.13);
  border-color:var(--red); color:var(--red);
  box-shadow:0 0 0 5px rgba(255,96,121,.10);
}
/* 悬浮在已选中的圆点上：透明底进一步收小、变淡 */
.node.is-active:hover .node-dot{
  transform:scale(1.13);
  box-shadow:0 0 0 4px rgba(255,96,121,.09);
}
.node:hover .node-label{ color:#fff; }
.node.is-active .node-dot{
  background:#fff; border-color:#fff; color:var(--red); box-shadow:0 0 0 7px rgba(255,96,121,.16);
}
.node.is-active .node-label{ color:#fff; }

/* 当前步骤详情 */
.step-detail{
  display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:center;
  margin-top:52px; padding:36px 40px; border:1px solid var(--line);
  border-radius:var(--radius); background:rgba(255,255,255,.05);
}
.sd-left{ min-width:0; }
.sd-count{ display:block; font-size:12.5px; letter-spacing:.1em; color:var(--muted); }
.sd-count b{ font-size:32px; font-weight:800; color:var(--red); letter-spacing:-.02em; }
.step-detail h3{ margin-top:8px; font-size:23px; }
.step-detail p{ font-size:15.5px; line-height:1.72; color:var(--ink-2); }

/* ------------------------------ 应用行业 ------------------------------ */
.app-card{
  padding:32px 30px 34px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); transition:all .32s var(--ease);
}
.app-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(200,16,46,.3); }
.app-card .ic{ color:var(--red); }
.app-card h3{ margin-top:22px; font-size:18px; }
.app-card p{ margin-top:8px; font-size:14px; color:var(--muted); line-height:1.6; }

/* ------------------------------ 案例 ------------------------------ */
.case-grid{ margin-top:8px; }
.case-card{ display:flex; flex-direction:column; }
/* 图片框改成 1:1 —— 客户的两张案例图都是正方形（1254×1254 / 2048×1930），
   用 16:10 的横框会被高度限制、左右各空约 30%，纯属浪费。
   max-width 是防止窄屏变单列时方图被拉成巨幅。 */
.case-media{
  aspect-ratio:1/1; display:grid; place-items:center; padding:34px;
  max-width:620px; margin-inline:auto;
  background:#FFFFFF; border-bottom:1px solid var(--line);
}
.case-media img{ max-width:100%; max-height:100%; object-fit:contain; }
.case-body{ padding:30px 30px 34px; }
.case-kicker{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.case-body h3{ margin-top:10px; font-size:23px; letter-spacing:-.015em; }
.case-media{ color:inherit; }
.case-body h3 a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
.case-body h3 a:hover{ color:var(--red); }
.case-card .news-more{ margin-top:22px; }
.case-lead{ margin-top:8px; font-size:13.5px; font-weight:600; color:var(--muted); }

/* 案例正文：原先的 Requirement / Our solution / Result 三段式已精简为一段概述 */
.case-text{ margin-top:20px; font-size:14.5px; line-height:1.68; color:var(--ink-2); }

.steps-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.steps-chips li{
  font-size:11.5px; font-weight:700; color:var(--red); background:var(--red-soft);
  border-radius:6px; padding:5px 10px;
}

/* ------------------------------ 资质证书 ------------------------------ */
.cert-card{ padding:34px 30px 32px; display:flex; flex-direction:column; }
.cert-seal{
  width:78px; height:78px; display:grid; place-items:center; border-radius:50%;
  color:var(--red); font-size:14px; font-weight:800; letter-spacing:.04em;
  background:radial-gradient(circle at 50% 50%, #fff 0 58%, var(--red-soft) 100%);
  border:1.5px solid rgba(200,16,46,.35);
  box-shadow:inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(200,16,46,.18);
}
.cert-card h3{ margin-top:22px; font-size:20px; }
.cert-sub{ margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.55; }

.cert-dl{ margin-top:22px; display:grid; gap:11px; }
.cert-dl dt{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cert-dl dd{ font-size:14px; font-weight:600; color:var(--ink); }

.cert-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:26px;
  font-size:14px; font-weight:700; color:var(--red);
}
.cert-link .ic{ transition:transform .28s var(--ease); }
.cert-card:hover .cert-link .ic{ transform:translateX(4px); }

/* ------------------------------ 公司新闻 ------------------------------ */
.news-card{ display:flex; flex-direction:column; }
.news-media{
  aspect-ratio:4/3; overflow:hidden; background:#fff; border-bottom:1px solid var(--line);
}
.news-media img{ width:100%; height:100%; object-fit:cover; }
.news-body{ padding:28px 30px 32px; }
.news-date{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.news-body h2,.news-body h3{ margin-top:10px; font-size:21px; }
.news-text{ margin-top:16px; font-size:14.5px; line-height:1.72; color:var(--ink-2); }
.news-more{ margin-top:22px; }   /* 「Read more」按钮 → 新闻详情页 */

/* ------------------------------ 询盘 CTA ------------------------------ */
.cta{
  position:relative; overflow:hidden; padding:92px 0;
  background:linear-gradient(120deg, var(--red-dark) 0%, var(--red) 52%, #D8263F 100%);
  color:#fff;
}
.cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 70% at 88% 20%, rgba(255,255,255,.18), transparent 60%);
}
.cta-inner{
  position:relative; display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center;
}
.cta-copy{ min-width:0; }
.cta-title{ font-size:clamp(26px, 3.1vw, 40px); }
.cta-lead{ margin-top:18px; max-width:600px; font-size:16px; line-height:1.7; color:rgba(255,255,255,.86); }
.cta-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.cta-contact{ display:flex; flex-direction:column; gap:10px; }
.cta-contact a{
  display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600;
  color:rgba(255,255,255,.9); transition:color .2s; overflow-wrap:anywhere;
}
.cta-contact a:hover{ color:#fff; }

/* ------------------------------ 页脚 ------------------------------ */
.site-footer{ background:var(--dark); color:rgba(255,255,255,.72); padding:76px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.5fr; gap:48px; }
.f-brand{ min-width:0; }

/* 页脚 logo：深色 logo 放在白色圆角底座上（客户的白字 logo 自带深色椭圆底，不适合深色页脚） */
.f-logo{
  width:168px; height:auto; padding:12px 18px;
  background:#fff; border-radius:12px;
}
.f-tag{ margin-top:18px; font-size:14.5px; font-weight:700; color:#fff; }
.f-desc{ margin-top:12px; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.55); }

.f-col h2{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff; }
.f-col > a{ display:block; margin-top:13px; font-size:14px; transition:color .2s; }
.f-col > a:hover{ color:#fff; }
.f-contact p{ display:flex; gap:10px; margin-top:14px; font-size:13.5px; line-height:1.6; }
.f-contact .ic{ margin-top:3px; color:#FF8A9C; flex:none; }
.f-contact a,.f-contact span{ min-width:0; overflow-wrap:anywhere; }
.f-contact a:hover{ color:#fff; }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:60px; padding:24px 0 28px; border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px; color:rgba(255,255,255,.45);
}
.fb-note{ letter-spacing:.02em; color:rgba(255,255,255,.4); }

/* ------------------------------ 进场动效 ------------------------------ */
/* 只在 <html> 带 .js 时隐藏元素（脚本被拦截时内容仍可见，不会白屏） */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* 锚点定位时避开吸顶导航 */
section[id]{ scroll-margin-top:calc(var(--header-h) + var(--admin-bar) + 16px); }

/* ------------------------------ 响应式 ------------------------------
   主断点：1180（汉堡 / 多数双栏）→ 1024（平板）→ 760（手机）→ 420（超窄）。
   Hero 文案始终叠在海报上（窄屏等比缩小），产品详情单栏与汉堡同档 1180。 */
@media (max-width:1180px){
  /* 文案继续叠在海报左侧，按视口缩小字号/按钮，不挪到海报下方 */
  .hero-overlay{
    padding-left:max(12px, 3.2%);
    padding-right:52%;
  }
  .hero .wrap.hero-inner{ width:100%; margin-inline:0; padding:8px 0 22px; }
  .hero-copy{ width:100%; max-width:none; }

  .hero .eyebrow{ font-size:clamp(9px, 1.7vw, 12px); }
  .hero-title{ font-size:clamp(14px, 2.8vw, 28px); line-height:1.08; }
  .hero-sub{
    margin-top:clamp(4px, 1vw, 12px); font-size:clamp(10px, 1.7vw, 14px); line-height:1.4;
  }
  .hero-sub strong{ font-size:inherit; margin-bottom:2px; }
  .hero-cta{ margin-top:clamp(6px, 1.3vw, 14px); gap:clamp(6px, 1.2vw, 12px); }
  .hero-cta .btn{
    padding:clamp(6px, 1.2vw, 11px) clamp(11px, 2vw, 18px);
    font-size:clamp(10px, 1.7vw, 13.5px); gap:6px;
    white-space:nowrap;
  }
  .hero-cta .btn .ic{ width:14px; height:14px; }
  .hero-meta{
    margin-top:clamp(4px, 1vw, 10px); font-size:clamp(9px, 1.5vw, 12px);
  }
  .hero-meta li + li::before{ margin:0 6px; }
  .hero-dots{ bottom:12px; gap:8px; }
  .dot{ width:7px; height:7px; }
  .dot.is-active{ width:18px; }

  .trust-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 28px; }
  .grid-3,.prod-grid,.cert-grid,.app-grid,.cust-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:36px; }
  .f-contact{ grid-column:1 / -1; }

  /* ≤1180 桌面导航会撞上 LOGO / CTA，提前切汉堡菜单；
     同步藏掉页头 Get a Quote，避免「汉堡 + CTA」并排挤占。 */
  .burger{ display:block; }
  .header-actions .btn{ display:none; }
  .nav{
    position:absolute; left:0; right:0; top:calc(100% + 1px); transform:none;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0 18px; background:#fff; border:1px solid var(--line);
    border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow);
    /* 抽屉里六个分类加上大菜单，390 宽时高约 880px，比手机屏还高。
       页头是 sticky 的，抽屉挂在页头下，页面滚动并不会把露出的一截带上来，
       所以这里必须让抽屉自己能滚，否则末尾的分类和底部按钮永远划不到。
       同时减掉顶栏和页头两个高度：这样滚动前后抽屉底部都保证在屏幕内。 */
    max-height:calc(100vh - var(--header-h) - var(--topbar-h) - var(--admin-bar) - 8px);
    max-height:calc(100dvh - var(--header-h) - var(--topbar-h) - var(--admin-bar) - 8px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    /* 背景被 html.nav-open body 的 touch-action:none 锁住时，抽屉内部要能滚。 */
    touch-action:pan-y;
    scrollbar-width:none;   /* Windows 下自带滚动条约 11px 宽，菜单里很突兀 */
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav.is-open{ display:flex; }
  .nav-link{ padding:14px 26px; font-size:15.5px; }
  .nav-cta{
    display:inline-flex; align-self:flex-start;
    margin:14px 26px 4px;
  }
  /* 移动端大菜单改为竖向列表：默认折叠，点 Products 才展开（.is-open）。
     六个分类常驻会把抽屉撑到约 880px，底部 CTA 很难够到。 */
  .dropdown{
    position:static; transform:none; width:auto;
    padding:0 20px 8px; box-shadow:none; border:0; border-radius:0;
    display:none; opacity:1; visibility:visible;
  }
  .dropdown.is-open{ display:block; }
  .nav-link.has-drop.is-open .nav-caret{ transform:rotate(225deg); }
  /* 上面那条压不住桌面的开启规则：`.nav-link.has-drop:hover + .dropdown` 等选择器
     特异性更高（0-3-1 / 0-2-0），鼠标滑过 Products 或分类面板时它们会再施加一次
     translateX(-50%)（桌面用它来把居中面板对齐），而窄屏的面板本来就是满宽的静态块，
     于是整块向左偏出半个宽度，分类跟着左右跳动。窄屏用手风琴，
     这里把这四条拍平，且不再靠 hover 显示（只认 .is-open）。 */
  .nav-link.has-drop:hover + .dropdown,
  .nav-link.has-drop:focus + .dropdown,
  .dropdown:hover,
  .dropdown:focus-within{
    position:static; transform:none; width:auto;
    /* 保持收起：display 只由 .is-open 控制，避免 hover 把折叠面板再拉开 */
    opacity:1; visibility:visible;
  }
  .nav-link.has-drop:hover + .dropdown:not(.is-open),
  .nav-link.has-drop:focus + .dropdown:not(.is-open),
  .dropdown:hover:not(.is-open),
  .dropdown:focus-within:not(.is-open){ display:none; }
  /* 桌面上面那 16px 透明热区是"鼠标从文字滑到面板"的桥。窄屏用不上，
     而且面板变成 static 后它的定位基准落到了 .nav 上，正好盖住汉堡按钮下沿、
     把那一块的点击吞掉，所以窄屏直接去掉。 */
  .dropdown::before{ display:none; }
  .mega-grid{ grid-template-columns:1fr; gap:2px; }
  .mega-item{ padding:8px; gap:14px; }
  .mega-thumb{ width:60px; height:60px; padding:5px; border-radius:10px; }
  .mega-text b{ font-size:14.5px; }
  .mega-text em{ font-size:12px; }
  .mega-foot{
    margin-top:10px; padding:12px 8px 0; flex-direction:column;
    align-items:flex-start; gap:10px;
  }
  .mega-foot span{ display:none; }   /* 窄屏隐藏这句说明，避免菜单过长 */

  /* 与汉堡导航同档：七步横轴在 1025–1180 仍挤 7 列会压扁长标题，提前改横向滑动。
     每列至少 120px，保证 Artwork Confirmation / Printing & Bag Making 等可换行阅读。
     padding-top 加大：overflow-x:auto 会连带把 overflow-y 也变成 auto，
     否则选中圆点外圈 7px 光晕会被裁掉上沿。 */
  .rail{
    min-width:0; width:100%;
    grid-template-columns:repeat(7, minmax(120px,1fr)); overflow-x:auto;
    padding:14px 4px 12px; scroll-padding-inline:12px;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .rail::-webkit-scrollbar{ display:none; }
  .rail::before,.rail::after{ display:none; }
  .node{ padding:0 8px; }
  .node-label{ font-size:12.5px; }
  .stepper::before{
    content:"Swipe to see all 7 steps \2192";
    display:block; margin-bottom:16px; font-size:12.5px; color:var(--muted); letter-spacing:.04em;
  }
}

/* 761–1180 的鼠标用户同样能横滚，但提示语不该写「Swipe」。
   hover/pointer 媒体查询只在真正带指针的设备上分叉，触摸设备保持原句。 */
@media (max-width:1180px) and (hover:hover) and (pointer:fine){
  .stepper::before{ content:"Scroll to see all 7 steps \2192"; }
}

@media (max-width:1024px){
  .hero-overlay{ padding-right:50%; }

  .why-grid{ grid-template-columns:1fr; gap:44px; }
  .why-left{ position:static; }

  .step-detail{ grid-template-columns:1fr; gap:16px; }

  .cta-inner{ grid-template-columns:1fr; gap:36px; }
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px){
  .wrap{ width:min(var(--wrap), 100% - 40px); }
  .topbar-inner, .header-inner{ padding-left:20px; padding-right:20px; }
  .header-inner{ gap:12px; }
  .section{ padding:70px 0; }
  .section--content{ padding-top:52px; padding-bottom:64px; }
  .co-section{ padding-top:52px; }
  .process{ padding:76px 0; }
  .cta{ padding:70px 0; }
  :root{ --header-h:66px; }

  /* 窄屏长文案 CTA（翻译/自定义按钮）允许换行，避免撑出视口 */
  .btn{
    white-space:normal; text-align:center; height:auto;
    line-height:1.35; max-width:100%;
  }

  .topbar-right{ display:none; }
  .grid{ gap:20px; }
  .grid-2,.grid-3,.prod-grid,.cert-grid,.app-grid,.trust-grid,.cust-grid{ grid-template-columns:1fr; }
  .trust-grid{ gap:16px; }
  .trust-item{ gap:12px; }

  /* 手机海报很矮：藏 meta、副标题最多两行，避免叠层溢出 */
  .hero-overlay{ padding-left:max(10px, 3%); padding-right:48%; }
  .hero .wrap.hero-inner{ padding:4px 0 18px; }
  .hero-sub{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
  .hero-meta{ display:none; }
  .hero-dots{ bottom:8px; gap:8px; }
  .dot{ width:6px; height:6px; }
  .dot.is-active{ width:16px; }

  .why-list li{ grid-template-columns:1fr; gap:8px; }
  .why-list .num{ padding-top:0; }

  /* 手机：七步改为「仅圆点 + 下方详情」。标题已在 .step-detail 里展示，
     轴上再挂长文案（Artwork Confirmation 等）既挤又要横滑，体验差。
     圆点一排撑满屏宽，恢复进度连线，去掉 Swipe 提示。 */
  .stepper::before{ display:none; }
  .rail{
    grid-template-columns:repeat(7, minmax(0,1fr));
    overflow:visible; padding:12px 0 0;
  }
  .rail::before,.rail::after{
    display:block; top:32px; left:calc(100% / 14); right:calc(100% / 14);
  }
  .rail::after{
    width:calc((100% - 100% / 7) * var(--progress, 0));
    right:auto;
  }
  .node{ padding:0 2px; gap:0; }
  .node-label{ display:none; }
  .node-dot{ width:40px; height:40px; font-size:11.5px; }
  .node.is-active .node-dot{ box-shadow:0 0 0 5px rgba(255,96,121,.16); }
  .step-detail{ margin-top:36px; padding:26px 24px; }

  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-bottom{ margin-top:44px; }
}

@media (max-width:420px){
  .wrap{ width:min(var(--wrap), 100% - 28px); }
  .section{ padding:56px 0; }
  .section--content,.co-section{ padding-top:40px; padding-bottom:56px; }
  .hero-title{ font-size:clamp(12px, 3.8vw, 18px); }
  .hero-sub{ font-size:clamp(9px, 2.6vw, 12px); }
  .hero-cta .btn{ padding:5px 10px; font-size:10px; }
  .btn{ padding:13px 22px; font-size:14px; }
  .btn-lg{ padding:15px 26px; }

  .step-detail{ padding:20px 16px; }
  .step-detail h3{ font-size:19px; }
  .node-dot{ width:36px; height:36px; font-size:11px; }
  .rail::before,.rail::after{ top:30px; }
  .node.is-active .node-dot{ box-shadow:0 0 0 4px rgba(255,96,121,.16); }

  .why-card{ padding:22px 18px 24px; }
  .why-card h3{ font-size:16.5px; }
  .cta{ padding:64px 0; }
  .cta-title{ font-size:clamp(22px, 6.5vw, 28px); }

  .site-footer{ padding-top:56px; }
  .f-logo{ width:140px; padding:10px 14px; }
  .footer-bottom{ margin-top:36px; gap:12px; padding:18px 0 22px; }

  .enq-form{ padding:22px 18px 20px; }
  .enq-title{ font-size:18px; }
  .field input,.field select,.field textarea{ height:44px; font-size:14.5px; }
  .field textarea{ min-height:84px; }

  .tl-no{ width:44px; height:44px; font-size:14.5px; }
  .timeline li::before{ left:21px; top:46px; }
  .tl-title{ font-size:14.5px; }
  .tl-text{ font-size:13px; }

  .pd-title{ font-size:clamp(24px, 7vw, 28px); }
  .contact-card{ padding:24px 20px 26px; }
}

/* 尊重系统"减少动态效果"设置 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}

/* ===========================================================================
   产品页 products.html
   ---------------------------------------------------------------------------
   结构参考麦瑞驰（mccormick.com）的产品列表页：
   页头横幅（面包屑 + 标题）→ 左侧吸顶分类栏（含数量）+ 右侧面板
   → 面板顶部结果数 → 产品网格 → 询盘 CTA。
   分类栏是真实可用的筛选（不是装饰），深链 #cat-xxx 也能直达对应分类。
   =========================================================================== */

/* ------------------------------ 页头横幅 ------------------------------ */
.page-hero{
  padding:54px 0 46px; background:var(--sand); border-bottom:1px solid var(--line);
}
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:var(--muted);
}
.crumbs a{ color:var(--muted); transition:color .2s var(--ease); }
.crumbs a:hover{ color:var(--red); }
.crumbs i{ font-style:normal; color:rgba(27,27,27,.28); }   /* 面包屑分隔符 */
.page-title{
  margin:14px 0 0; max-width:820px;
  font-size:clamp(28px, 3.4vw, 42px); font-weight:800;
  letter-spacing:-.02em; line-height:1.12;
}
.page-lead{
  margin-top:16px; max-width:720px;
  font-size:16.5px; line-height:1.68; color:var(--ink-2);
}

/* ------------------------------ 两栏布局 ------------------------------ */
.products-page{ padding:56px 0 92px; }
.products-layout{
  display:grid; grid-template-columns:262px minmax(0,1fr);
  gap:44px; align-items:start;
}

/* 左侧分类栏（桌面吸顶） */
.cat-side{
  position:sticky; top:calc(var(--header-h) + var(--admin-bar) + 26px);
  display:flex; flex-direction:column; gap:20px;
}
.side-title{
  margin:0 0 14px; font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.cat-list{ display:flex; flex-direction:column; gap:2px; }
.cat-btn{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:11px 14px; border:1px solid transparent; border-radius:10px;
  background:transparent; cursor:pointer; font-family:inherit; font-size:14.5px;
  font-weight:600; color:var(--ink-2); text-align:left; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
a.cat-btn{ color:var(--ink-2); }
.cat-name{ flex:1; min-width:0; }
.cat-num{
  flex:none; font-size:12px; font-weight:700; color:var(--muted);
  background:var(--sand); border-radius:999px; padding:2px 9px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.cat-btn:hover{ background:var(--red-soft); color:var(--red); }
.cat-btn:hover .cat-num{ background:#fff; color:var(--red); }
.cat-btn.is-active{ background:var(--red); color:#fff; }
.cat-btn.is-active .cat-num{ background:rgba(255,255,255,.22); color:#fff; }
/* 子项被选中时，父项标红表示"正在看这个分类下面" */
.cat-btn.is-open{ color:var(--red); }
.cat-btn.is-open .cat-num{ background:var(--red-soft); color:var(--red); }

/* 展开箭头：默认朝右，展开后转 90° 朝下 */
.cat-chev{
  flex:none; opacity:.5;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.cat-group.is-expanded .cat-chev{ transform:rotate(90deg); opacity:.9; }

/* 二级分类（产品小分组）：默认收起，点一级才展开。
   用 max-height + opacity 做展开/收起动画；
   visibility 用延迟切换，收起后里面的按钮不会被 Tab 键聚焦到。 */
.cat-group{ display:flex; flex-direction:column; }
.cat-subs{
  display:flex; flex-direction:column; gap:1px;
  max-height:0; margin:0; opacity:0; overflow:hidden; visibility:hidden;
  transition:max-height .32s var(--ease), opacity .24s var(--ease),
             margin .32s var(--ease), visibility 0s linear .32s;
}
.cat-group.is-expanded .cat-subs{
  max-height:360px; margin:1px 0 6px; opacity:1; visibility:visible;
  transition:max-height .32s var(--ease), opacity .24s var(--ease),
             margin .32s var(--ease), visibility 0s;
}
.cat-sub{
  position:relative; width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 14px 8px 27px; border:0; border-radius:9px;
  background:transparent; cursor:pointer; font-family:inherit;
  font-size:13.5px; font-weight:500; color:var(--muted); text-align:left;
  text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
a.cat-sub{ color:var(--muted); }
.cat-sub::before{
  content:""; position:absolute; left:15px; top:50%; width:4px; height:4px;
  margin-top:-2px; border-radius:50%; background:currentColor; opacity:.5;
}
.sub-num{ flex:none; font-size:11.5px; font-weight:700; }
.cat-sub:hover{ background:var(--red-soft); color:var(--red); }
.cat-sub.is-active{ background:var(--red-soft); color:var(--red); font-weight:700; }

/* 侧栏底部咨询卡 */
.side-help{
  padding:22px 20px; border:1px solid var(--line);
  border-radius:16px; background:var(--sand);
}
.side-help b{ display:block; font-size:14.5px; }
.side-help p{ margin:8px 0 16px; font-size:13px; line-height:1.6; color:var(--muted); }

/* 右侧面板 */
.prod-panel{ min-width:0; }
.panel-bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.result-count{ font-size:14px; color:var(--muted); }
.result-count b{ font-size:16px; font-weight:800; color:var(--ink); }
.panel-note{ font-size:13px; color:var(--muted); }
/* 产品网格：
   grid-auto-rows:1fr 让每一行等高（否则各行的行高按各自内容算，
   描述行数少的行会明显矮一截）；
   卡片内部用 flex 把「Enquire」压到卡片底部，这样整片网格底边齐平。 */
.prod-grid{ margin-top:28px; grid-auto-rows:1fr; }
.prod-grid .prod-card{ display:flex; flex-direction:column; }
/* 【必须】下面这条不能删：
   上面给 .prod-grid .prod-card 设了 display:flex，它的优先级高于浏览器默认的
   [hidden]{display:none}，会让 JS 里 c.hidden = true 完全失效 ——
   表现就是筛选时"数字变了、按钮高亮了，但卡片一张都没隐藏"。
   这条的选择器多一个 [hidden]，优先级更高，才能把 hidden 属性真正生效。 */
.prod-grid .prod-card[hidden]{ display:none; }

/* 列表页描述统一限制 2 行：卡片高度更整齐，文案也不会铺得太开。
   （文案本身已经压短，所以基本不会被截断） */
.prod-grid .prod-desc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  line-clamp:2; overflow:hidden;
}

/* 列表页的规格标签按客户要求去掉"圆框"，改成一行用 · 分隔的纯文字。
   只作用于 .prod-grid（产品列表页），首页的分类卡保持原来的药丸样式。 */
.prod-grid .tags{
  display:block; margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.65;
}
.prod-grid .tags li{
  display:inline; padding:0; border:0; border-radius:0;
  background:none; font-size:inherit; font-weight:600; color:inherit;
}
.prod-grid .tags li + li::before{
  content:"·"; margin:0 8px; color:rgba(27,27,27,.30); font-weight:400;
}
.prod-grid .prod-card .prod-body{ display:flex; flex-direction:column; flex:1; }
.prod-grid .prod-card .prod-link{ margin-top:auto; padding-top:22px; }
.grid-empty{ margin-top:36px; font-size:15px; color:var(--muted); }

/* 列表分页（产品 / 新闻共用；模板输出 .site-pager） */
.site-pager{ margin-top:44px; }
.site-pager .page-numbers{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  list-style:none; margin:0; padding:0;
}
.site-pager .page-numbers li{ margin:0; padding:0; }
.site-pager a.page-numbers,.site-pager span.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:14px; font-weight:700; color:var(--ink-2);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.site-pager a.page-numbers:hover{
  border-color:var(--red); color:var(--red); background:var(--red-soft);
}
.site-pager span.page-numbers.current{
  background:var(--red); border-color:var(--red); color:#fff;
}
.site-pager span.page-numbers.dots{
  min-width:auto; border:0; background:transparent; color:var(--muted); font-weight:600;
}
.site-pager a.prev,.site-pager a.next{ padding:0 18px; }

/* ------------------------------ 产品页响应式 ------------------------------ */
@media (max-width:1180px){
  .products-layout{ grid-template-columns:1fr; gap:26px; }
  .cat-side{ position:static; display:grid; gap:22px; }
  /* 窄屏把竖排分类改成可换行的横向筛选条；有子类的组保持列布局，
     点箭头展开后子类以小芯片横排在父项下方（不再整组隐藏）。 */
  .cat-list{ flex-direction:row; flex-wrap:wrap; gap:8px; align-items:flex-start; }
  .cat-btn{ width:auto; padding:9px 14px; border-color:var(--line); }
  .cat-group{
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  }
  .cat-group.is-expanded{ flex:1 1 100%; }
  .cat-group.is-expanded .cat-subs{
    display:flex; flex-direction:row; flex-wrap:wrap; gap:6px;
    max-height:none; width:100%; margin:0; opacity:1; visibility:visible;
  }
  .cat-sub{
    width:auto; padding:7px 12px; border:1px solid var(--line); border-radius:9px;
    background:#fff; font-size:12.5px;
  }
  .cat-sub::before{ display:none; }
  .side-help{ max-width:420px; }
}
@media (max-width:760px){
  .page-hero{ padding:38px 0 32px; }
  .products-page{ padding:38px 0 64px; }
  .panel-note{ display:none; }
}

/* ===========================================================================
   产品详情页 msg-bulk-pack.html
   ---------------------------------------------------------------------------
   面包屑 → 产品主区（左图库 + 右信息）→ Tab 详情面板 → 询盘 CTA → 页脚。
   图库按"左侧缩略图 + 右侧大图"排版：行高只由大图（aspect-ratio 1/1）决定，
   缩略图列绝对定位贴齐该高度并内部滚动，5 张及以上不会撑破 .pd-gallery
   （含 ≤420 与任意大图偏矮的视口）。
   =========================================================================== */

.pd-crumbs{ padding:20px 0; background:var(--sand); border-bottom:1px solid var(--line); }

/* ------------------------------ 主区 ------------------------------ */
.pd-top{ padding:52px 0 72px; }
.pd-layout{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px;
  /* 【必须留着 align-items:start】
     否则两列会互相拉伸到等高：右侧文字栏（实测 577px）比大图（517.6px）高，
     会把左侧图库连同缩略图列一起拉到 577px，导致缩略图列与大图差出约 60px。
     加了它以后，图库只按自身内容定高 = 大图的高度，缩略图列与之严格相等。 */
  align-items:start;
}
/* 缩略图列绝对定位贴齐大图高度：行高只由 .pd-stage（aspect-ratio 1/1）决定，
   多图时列内滚动，避免 5 张在大图偏矮时撑破网格。 */
.pd-gallery{
  position:relative;
  display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px;
}
.pd-thumbs{
  position:absolute; left:0; top:0; bottom:0; width:88px;
  display:flex; flex-direction:column; gap:12px;
  margin:0; padding:0; list-style:none;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.pd-thumbs::-webkit-scrollbar{ width:3px; }
.pd-thumbs::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.22); border-radius:2px; }
.pd-thumb{
  flex:none; width:100%; aspect-ratio:1/1; padding:6px; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  display:grid; place-items:center;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pd-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.pd-thumb:hover{ border-color:rgba(200,16,46,.45); }
.pd-thumb.is-active{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }

.pd-stage{
  /* 缩略图列是绝对定位、不在网格流里，不钉这一列的话大图会被自动放进第 1 条 88px 的列，
     实测整块塌成 88×88、<img> 只剩 2×2。 */
  grid-column:2;
  aspect-ratio:1/1; display:grid; place-items:center; padding:42px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
}
.pd-stage img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ------------------------------ 信息栏 ------------------------------ */
.pd-info{ padding-top:4px; }
.pd-title{
  margin:10px 0 0; font-size:clamp(28px, 3.2vw, 40px); font-weight:800;
  letter-spacing:-.02em; line-height:1.1;
}
.pd-lead{ margin-top:16px; font-size:16.5px; line-height:1.68; color:var(--ink-2); }
/* 批次 18 起导语来自正文编辑器，wpautop 会包出 <p>，间距由这里统一给。 */
.pd-lead p{ margin:0; }
.pd-lead p + p{ margin-top:10px; }
.pd-lead a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

.pd-highlights{ margin-top:28px; border-top:1px solid var(--line); }
.pd-highlights li{
  display:flex; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px;
}
.pd-highlights b{ flex:none; width:110px; font-weight:700; color:var(--ink); }
.pd-highlights span{ color:var(--ink-2); }

.pd-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.pd-note{ margin-top:22px; font-size:13px; line-height:1.6; color:var(--muted); }

/* ------------------------------ Tab 详情面板 ------------------------------ */
.pd-detail{ padding:64px 0 88px; }
.tabs{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); }
.tab{
  padding:12px 20px; margin-bottom:-1px; border:0; border-bottom:2px solid transparent;
  background:transparent; cursor:pointer; font-family:inherit;
  font-size:14.5px; font-weight:700; color:var(--muted);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover{ color:var(--red); }
.tab.is-active{ color:var(--red); border-bottom-color:var(--red); }
.tab-panel{ display:none; padding-top:34px; }
.tab-panel.is-active{ display:block; }

/* 三个选项卡内容都由后台编辑器产出，这里给富文本的段落/列表/表格定型。 */
.pd-prose{ max-width:760px; display:grid; gap:14px; }
.pd-prose p{ font-size:15.5px; line-height:1.75; color:var(--ink-2); }
.pd-prose h3,
.pd-prose h4{ font-size:16px; font-weight:700; color:var(--ink); }
.pd-prose ul,
.pd-prose ol{ margin:0; padding-left:20px; display:grid; gap:8px; }
.pd-prose li{ font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.pd-prose table{ width:100%; border-collapse:collapse; font-size:14px; }
.pd-prose th,
.pd-prose td{ padding:13px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.6; }
.pd-prose th{ width:132px; font-weight:700; color:var(--ink); }
.pd-prose td{ color:var(--ink-2); }
.pd-footnote{ margin-top:34px; font-size:13px; line-height:1.6; color:var(--muted); }

/* ------------------------------ 详情页响应式 ------------------------------ */
@media (max-width:1180px){
  .pd-layout{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:760px){
  .pd-top{ padding:36px 0 52px; }
  .pd-gallery{ grid-template-columns:56px minmax(0,1fr); gap:12px; }
  .pd-thumbs{ width:56px; gap:8px; }
  .pd-stage{ padding:22px; }
  .pd-highlights li{ flex-direction:column; gap:4px; }
  .pd-highlights b{ width:auto; font-size:13.5px; }
  .pd-prose th{ width:104px; }
  .pd-detail{ padding:44px 0 64px; }
  .tab{ padding:11px 14px; font-size:13.5px; }
}
@media (max-width:420px){
  .pd-gallery{ grid-template-columns:48px minmax(0,1fr); gap:10px; }
  .pd-thumbs{ width:48px; gap:7px; }
  .pd-stage{ padding:16px; }
  .pd-thumb{ padding:4px; border-radius:10px; }
}

/* ===========================================================================
   Why Us 页 why-us.html
   ---------------------------------------------------------------------------
   页头横幅 → 公司介绍（左文 + 右侧速览）→ 五点优势 → 资质证书 → 询盘 CTA → 页脚。
   其中"五点优势""证书"直接复用首页已有的 .why-list / .cert-card 样式，两页文案与
   排版完全一致；只有公司介绍这一块是新加的布局。
   =========================================================================== */

/* Why Us / About：页头横幅后的公司简介区块 */
.co-section{ padding-top:72px; }
.co-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:56px; align-items:start;
}
.co-prose .sec-title{ margin-top:12px; }
.co-prose p{
  margin-top:16px; font-size:16px; line-height:1.78; color:var(--ink-2);
}
.co-prose p:first-of-type{ margin-top:20px; }

/* 右侧速览卡 */
.co-facts{
  padding:28px 26px; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--sand);
}
.co-facts h3{ font-size:15px; font-weight:800; }
.co-facts dl{ margin-top:16px; }
.co-facts dl > div{
  display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--line);
}
.co-facts dl > div:last-child{ border-bottom:0; padding-bottom:0; }
.co-facts dt{ flex:none; width:104px; font-size:13px; font-weight:700; color:var(--ink); }
.co-facts dd{ flex:1; min-width:0; font-size:13.5px; line-height:1.55; color:var(--ink-2); overflow-wrap:anywhere; }

@media (max-width:1024px){
  .co-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:760px){
  .co-facts{ padding:22px 20px; }
  .co-facts dl > div{ flex-direction:column; gap:4px; }
  .co-facts dt{ width:auto; font-size:12.5px; }
  .co-prose p{ font-size:15.5px; }
}

/* ===========================================================================
   Why Us 页 —— 第二轮排版调整
   （公司介绍加滚动区 / 五点优势换卡片网格 / 证书改为直接放原图）
   =========================================================================== */

/* ------------------------------ 公司介绍：正文可上下滚动 ------------------------------
   标题固定在容器上方不动，只有正文在盒子里滚动，滚动条出现在盒子右侧。
   正文精简后自然高度约 418px，max-height 定 380px —— 留约 38px 的滚动量，
   滚动条继续可见、右侧那根"滑条"不会被砍掉。 */
.co-scroll{
  margin-top:4px; max-height:380px; overflow-y:auto; padding-right:20px;
  scrollbar-width:thin; scrollbar-color:rgba(27,27,27,.30) transparent;
}
.co-scroll p{ margin-top:16px; font-size:16px; line-height:1.78; color:var(--ink-2); }
.co-scroll p:first-child{ margin-top:0; }
/* 键盘聚焦时给个明显的焦点框（tabindex=0 的滚动区域必须能看出来当前焦点在哪） */
.co-scroll:focus-visible{ outline:2px solid var(--red); outline-offset:6px; border-radius:6px; }
/* Chrome / Edge / Safari 的滚动条：做成细的，悬停变红 */
.co-scroll::-webkit-scrollbar{ width:7px; }
.co-scroll::-webkit-scrollbar-track{ background:transparent; }
.co-scroll::-webkit-scrollbar-thumb{ background:rgba(27,27,27,.26); border-radius:4px; }
.co-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(200,16,46,.55); }

/* ------------------------------ 五点优势：卡片网格排版 ------------------------------
   5 张卡放在 6 列网格里：前 3 张各占 2 列（一行 3 张），后 2 张各占 3 列（一行 2 张），
   这样 3+2 的排布左右两侧都对齐，不会出现最后一行空半格的缺口。 */
.why-cards{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
.why-card{
  grid-column:span 2; padding:30px 26px 32px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.why-card:nth-child(4),.why-card:nth-child(5){ grid-column:span 3; }
.why-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow);
  border-color:rgba(200,16,46,.30);
}
.why-card .num{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--red-soft); color:var(--red);
  font-size:14.5px; font-weight:800; letter-spacing:.02em;
}
.why-card h3{ margin-top:18px; font-size:18px; font-weight:800; line-height:1.3; }
.why-card p{ margin-top:10px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.why-cta-wrap{
  margin-top:44px; text-align:center;
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}

/* ------------------------------ 证书：直接展示原图 ------------------------------
   卡片改成以证书图为主体：图片整幅铺满卡片宽度置顶，文字排在下方留白区。
   aspect-ratio 用 1/1.416 —— 正好是证书原图的宽高比（1200×1700），
   所以图片能完整铺满、不裁切也不留边。
   注意：这些样式全部限定在 .cert-grid--images 下，首页的证书卡（圆形印章版）不受影响。 */
.cert-grid--images .cert-card{ padding:0; }
.cert-grid--images .cert-shot{
  aspect-ratio:1/1.416; background:#fff; overflow:hidden;
  border-bottom:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.cert-grid--images .cert-shot img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .4s var(--ease);
}
.cert-grid--images .cert-card:hover .cert-shot img{ transform:scale(1.015); }
.cert-grid--images .cert-body{
  display:flex; flex-direction:column; flex:1; padding:22px 28px 30px;
}
.cert-grid--images .cert-body h3{ margin-top:0; font-size:19px; font-weight:800; }

/* 关于页证书：点击在页面内看大图。
   .cert-lb 自己声明了 display:grid，会盖掉浏览器默认的 [hidden]{display:none}
   （属性选择器优先级低于类），所以必须显式写 .cert-lb[hidden] —— 否则弹窗会一直挂在页面上。 */
.cert-card--view{ cursor:zoom-in; }
.cert-lb{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:24px; }
.cert-lb[hidden]{ display:none; }
.cert-lb-backdrop{ position:absolute; inset:0; background:rgba(16,22,28,.78); }
.cert-lb-dialog{
  position:relative; display:grid; gap:14px; justify-items:center;
  max-width:min(92vw, 720px); padding:22px 22px 18px;
  background:#fff; border-radius:var(--radius-lg); box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.cert-lb-dialog:focus{ outline:none; }
.cert-lb-img{ display:block; width:auto; max-width:100%; max-height:72vh; object-fit:contain; }
.cert-lb-title{ font-size:16px; font-weight:800; color:var(--ink); text-align:center; }
.cert-lb-x{
  position:absolute; top:-14px; right:-14px; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; border:none; cursor:pointer;
  background:var(--red); color:#fff; font-size:22px; line-height:1;
}
/* 锁背景滚动沿用抽屉的做法：touch-action 而不是 body{position:fixed}（批次 28 的教训）。 */
html.cert-lb-open body{ touch-action:none; }
@media (max-width:760px){
  .cert-lb{ padding:14px; }
  .cert-lb-img{ max-height:64vh; }
  .cert-lb-x{ top:-10px; right:-10px; }
}
@media (prefers-reduced-motion:reduce){
  .cert-lb-dialog{ animation:none; }
}

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width:1024px){
  .why-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why-card,.why-card:nth-child(4),.why-card:nth-child(5){ grid-column:span 1; }
}
@media (max-width:760px){
  .co-scroll{ max-height:300px; padding-right:14px; }
  .cert-grid--images .cert-body{ padding:18px 22px 24px; }
  .why-card{ padding:26px 22px 28px; }
  .why-cards{ grid-template-columns:1fr; }
}

/* ===========================================================================
   Customization / News / Contact 三个新页面
   ---------------------------------------------------------------------------
   复用站点既有的 .section / .sec-head / .grid / .card / .cta / .stepper 等基础样式，
   这里只补这三个页面新引入的组件。所有文案内容均来自客户原始资料。
   =========================================================================== */

/* ------------------------------ 定制化：六个可定制项 ------------------------------ */
.cust-grid{ margin-top:48px; }
.cust-card{ padding:30px 26px 32px; }
.cust-no{
  display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--red-soft); color:var(--red); font-size:14px; font-weight:800;
}
.cust-card h3{ margin-top:16px; font-size:17.5px; font-weight:800; line-height:1.32; }
.cust-card p{ margin-top:9px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }

/* ------------------------------ 定制化：案例全篇 ------------------------------ */
.case-full{
  margin-top:48px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
}
.cf-head{ padding:38px 44px 0; }
.cf-head .cf-title,
.cf-head h2,
.cf-head h3{ margin-top:10px; font-size:clamp(23px, 2.4vw, 31px); font-weight:800; line-height:1.2; letter-spacing:-.015em; }
.cf-head .case-lead{ margin-top:10px; }
/* 详情页隐藏 cf-head 后，正文区顶边与卡片对齐 */
.case-full > .cf-top:first-child{ margin-top:0; border-top:0; }
.case-full:not(:has(.cf-head)){ padding-top:0; }

/* 404 常用内链 */
.error-links{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px 20px; margin:8px 0 40px; max-width:720px;
}
.error-links a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15.5px; font-weight:700; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; transition:border-color .2s var(--ease), color .2s var(--ease);
}
.error-links a:hover{ border-color:rgba(200,16,46,.35); color:var(--red); }
.error-links .ic{ transition:transform .28s var(--ease); }
.error-links a:hover .ic{ transform:translateX(4px); }
@media (max-width:760px){
  .error-links{ grid-template-columns:1fr; }
}

/* 案例图是方图（1254×1254 / 2048×1930），整幅铺满会在宽屏两侧留大片空白，
   所以改成"左图右文"两栏：图片完整显示不裁切，右侧放前两段文字。 */
.cf-top{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  margin-top:30px; border-top:1px solid var(--line);
}
.cf-media{
  margin:0; display:grid; place-items:center; padding:36px 32px;
  background:#fff; border-right:1px solid var(--line);
}
.cf-media img{ max-width:100%; max-height:360px; object-fit:contain; display:block; }
.cf-side{ padding:34px 40px; }
.cf-side .cf-block + .cf-block,
.cf-body .cf-block + .cf-block{ margin-top:28px; padding-top:28px; border-top:1px solid var(--line); }

.cf-body{ padding:32px 44px 42px; border-top:1px solid var(--line); }
.cf-block h2{ display:flex; align-items:center; gap:12px; font-size:17px; font-weight:800; line-height:1.3; }
.cf-no{
  display:inline-grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--red); color:#fff; font-size:12.5px; font-weight:800;
}
.cf-block > p{ margin-top:12px; font-size:15.5px; line-height:1.78; color:var(--ink-2); }

/* 七步流程：静态列表（首页那个自动轮播 stepper 只能有一个，这里用静态更清楚） */
.cf-steps{ margin-top:16px; }
.cf-steps li{
  display:flex; gap:16px; padding:14px 18px; border-radius:var(--radius);
  background:var(--sand); transition:background .24s var(--ease);
}
.cf-steps li + li{ margin-top:8px; }
.cf-steps li:hover{ background:#F1EAE1; }
.cs-no{ flex:none; padding-top:1px; font-size:13px; font-weight:800; color:var(--red); letter-spacing:.02em; }
.cf-steps b{ display:block; font-size:14.5px; font-weight:800; }
.cf-steps p{ margin-top:4px; font-size:14px; line-height:1.66; color:var(--ink-2); }

/* ------------------------------ 新闻列表页 ------------------------------ */
.news-grid--page{ margin-top:48px; }
.news-grid--page .news-media{ display:block; }          /* 图片框本身是链接 */
/* 标题链接：列表页与首页共用同一套 hover */
.news-body h2 a,.news-body h3 a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
.news-body h2 a:hover,.news-body h3 a:hover{ color:var(--red); }
.news-note{ margin-top:38px; font-size:14px; color:var(--muted); }

/* ------------------------------ 新闻详情页（文章） ------------------------------ */
.article{ min-width:0; }
.page-hero--article .page-title{ max-width:960px; }
/* 底部留出 88px：否则文末那排按钮会紧贴下面的红色询盘区块，两块粘在一起。
   原来只有 padding-top，没有 padding-bottom。 */
.article-wrap{ padding:44px 0 88px; }
.article-hero{
  margin:0; border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--sand);
}
/* 配图不加任何尺寸限制：不设 max-height、不裁切（原为 max-height:460px + object-fit:cover，
   会把方图截掉上下大半）。宽 100%、高按图片自身比例自动，整幅完整显示。
   news-1.jpg 是 1024×1024 方图、news-2.png 是 1412×1114。 */
.article-hero img{ width:100%; height:auto; display:block; }

.article-body{ max-width:800px; margin:46px auto 0; }
.article-body p{ margin-top:18px; font-size:16.5px; line-height:1.86; color:var(--ink-2); }
.article-body .art-lead{ margin-top:0; font-size:19px; line-height:1.72; color:var(--ink); font-weight:600; }
.article-body h2{ margin-top:42px; font-size:clamp(20px, 2.1vw, 25px); font-weight:800; line-height:1.3; letter-spacing:-.015em; }
.article-body h2 + p{ margin-top:14px; }

.art-list{ margin-top:16px; }
.art-list li{ position:relative; padding-left:26px; margin-top:10px; font-size:16.5px; line-height:1.72; color:var(--ink-2); }
.art-list li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:9px; height:2px; border-radius:2px; background:var(--red);
}
/* 正文收束强调句：后台手写 class="art-outro" 时生效（见 hisein_article_body） */
.art-outro{
  margin-top:36px; padding:20px 26px; background:var(--sand);
  border-left:3px solid var(--red); border-radius:0 var(--radius) var(--radius) 0;
  font-weight:700; color:var(--ink) !important;
}
.art-foot{
  max-width:800px; margin:44px auto 0; display:flex; flex-wrap:wrap; gap:14px;
  justify-content:space-between; align-items:center;
}
.ic-flip{ transform:rotate(180deg); }   /* 返回箭头：把右箭头翻成左箭头 */

/* ------------------------------ 联系页 ------------------------------ */
.contact-grid{ margin-top:48px; }
.contact-card{ padding:30px 28px 32px; }
a.contact-card{ display:block; }
.cc-ic{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--red-soft); color:var(--red);
}
.cc-ic .ic{ width:20px; height:20px; }
.contact-card h2{
  margin-top:16px; font-size:12.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.cc-main{ margin-top:8px; font-size:17px; font-weight:700; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.cc-sub{ margin-top:9px; font-size:14px; line-height:1.66; color:var(--ink-2); }
.contact-note{ margin-top:32px; font-size:14.5px; color:var(--muted); }
.contact-note a{ color:var(--red); font-weight:700; }

.contact-grid2 .sec-lead{ margin-top:18px; }

/* 询盘要点清单：红底圆 + 白色对勾 */
.check-list{ margin-top:26px; }
.check-list li{ position:relative; padding-left:34px; margin-top:14px; font-size:15.5px; line-height:1.72; color:var(--ink-2); }
.check-list li::before{
  content:""; position:absolute; left:0; top:4px;
  width:20px; height:20px; border-radius:50%; background:var(--red-soft);
}
.check-list li::after{
  content:""; position:absolute; left:6px; top:9px;
  width:8px; height:4px; border-left:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
}
.contact-grid2 .btn{ margin-top:32px; }
.cf-link{ margin-top:18px; }
.cf-link a{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--red); }

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width:1024px){
  .cf-top{ grid-template-columns:1fr; }
  .cf-media{ border-right:0; border-bottom:1px solid var(--line); padding:30px 26px; }
  .cf-media img{ max-height:300px; }
  .cf-head{ padding:30px 28px 0; }
  .cf-side{ padding:28px 28px; }
  .cf-body{ padding:28px 28px 34px; }
  /* 联系卡片与下方表单同档单列，避免 761–1024 卡片仍两列 */
  .contact-grid{ grid-template-columns:1fr; margin-top:40px; }
}
@media (max-width:760px){
  .cust-grid{ margin-top:34px; }
  .case-full{ margin-top:34px; }
  .article-body p, .art-list li{ font-size:15.5px; }
  .article-body .art-lead{ font-size:17px; }
  .article-wrap{ padding:32px 0 64px; }
  .art-foot{ justify-content:flex-start; }
  .contact-grid{ margin-top:34px; }
}

/* ===========================================================================
   定制页 customization.html —— 七步流程：横向时间轴
   ---------------------------------------------------------------------------
   客户提供的切图样式：七个红色编号圆点由一条横向红线串起，圆点下方是步骤名 + 短说明。
   区块沿用站点既有的 .process（深色底），所以这里的文字色用白 / 半透明白。
   注意：本页已不再使用首页那套 .stepper 交互组件，下面这套是静态展示。
   =========================================================================== */

.timeline{
  position:relative; list-style:none; margin:64px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
  /* 客户指定：圆点与连线用品牌红 #C8102E。
     本区块的 --red 已被覆盖成 #FF6079（深底提亮保对比度），所以这里另立一个变量显式指定。
     品牌红在近黑底(#161718)上的对比度约 3.04:1，满足 WCAG 非文字图形 3:1 的底线；
     圆点内的白色数字对比 5.9:1。 */
  --tl-red:#C8102E;
}
/* 横向红线：画在圆点下层；左右各从第 1 / 第 7 个圆点的圆心起止
   （每列宽度是 100%/7，圆心在列正中，所以内缩 100%/14） */
.timeline::before{
  content:""; position:absolute; z-index:0;
  left:calc(100% / 14); right:calc(100% / 14);
  top:25px; height:2px; background:var(--tl-red);
}
.timeline li{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 12px;
}

/* 编号圆点：切图上圆点内圈还有一层暗边，用 inset 阴影还原 */
.tl-no{
  display:grid; place-items:center; flex:none;
  width:52px; height:52px; border-radius:50%;
  background:var(--tl-red); color:#fff;
  font-size:16px; font-weight:800; letter-spacing:.02em;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.13);   /* 切图上圆点内圈那层暗边（半透明底） */
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* 圆点悬停交互（客户要求"圆点扩大、透明底降低"）：
   放大 1.14 倍，同时内圈那层半透明底由 13% 减到 6%。
   触发范围是整个步骤列（含文字），比只悬停 52px 的圆点更好点中。 */
.timeline li:hover .tl-no{
  transform:scale(1.14);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.06);
}
.tl-title{ margin-top:22px; font-size:15px; font-weight:800; line-height:1.32; color:#fff; overflow-wrap:anywhere; }
.tl-text{ margin-top:10px; font-size:13.5px; line-height:1.62; color:rgba(255,255,255,.6); overflow-wrap:anywhere; }

@media (max-width:1180px){
  /* 与汉堡导航同档：1025–1180 仍挤 7 列时长标题（Artwork Confirmation 等）难读。
     改成竖向时间轴：圆点在左、文字在右，连线改为逐段竖线。
     竖向连线画在每个 li 自己的 ::before 上（从本圆点底边连到下一个圆点顶边），
     这样不用去算整条列表的总高，天然对齐。 */
  .timeline{ grid-template-columns:1fr; margin-top:44px; }
  .timeline::before{ display:none; }
  .timeline li{
    flex-direction:row; align-items:flex-start; text-align:left;
    gap:18px;              /* 圆点与文字之间要留空，否则文字紧贴圆点 */
    padding:0 0 28px; min-width:0;
  }
  .timeline li::before{
    content:""; position:absolute; left:25px; top:54px; bottom:0;
    width:2px; background:var(--tl-red);
  }
  .timeline li:last-child{ padding-bottom:0; }
  .timeline li:last-child::before{ display:none; }
  .tl-body{ flex:1; min-width:0; padding-top:14px; }
  .tl-title{ margin-top:0; font-size:15.5px; }
  .tl-text{ margin-top:6px; max-width:460px; }
}

/* ===========================================================================
   联系页 contact.html —— 内嵌询盘表单
   ---------------------------------------------------------------------------
   左栏放"写之前请准备"清单 + 公司信息，右栏是表单本身（所以左窄右宽）。
   字段与清单一一对应：清单告诉访客"该说什么"，表单就是"在哪儿说"。
   纯样式 + 原生校验：不用任何 JS 也能填、能提交（后端接口由客户接入，
   见 contact.html 里 <form> 上方的注释）。蜜罐字段用于挡机器人。
   =========================================================================== */

/* 左窄右宽：左栏提示、右栏表单（唯一列宽定义，勿在别处再写一套） */
.contact-grid2{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:56px; align-items:start;
}

/* 联系页公司信息卡：叠在 .co-facts 上，与清单拉开间距 */
.contact-facts{ margin-top:40px; }

/* 吸附：左栏（询盘清单 + 公司信息）比表单长，往下滚时让表单留在视口里不动，
   左侧继续滚；滚过左栏底部，表单才跟着页面走。
   不用额外包一层 div —— .enq-form 本身是 grid item，它的包含块是"网格区域"
   （整行高度，由更高的左栏撑开），所以 align-items:start 下也有完整的滑动行程。
   偏移沿用站内既有侧栏的写法（.why-left / 产品列表页筛选栏同款）。
   矮视口（约 1440×700）：max-height 限制在「视口 − 页头 − 余量」内，
   overflow 开在 sticky 元素自身（不会破坏 sticky；祖先 overflow 才会），
   保证提交区始终可滚到。CF7 路径见下方 .contact-grid2 > .wpcf7。 */
.enq-form{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px 32px 24px;
  box-shadow:var(--shadow);
  position:sticky;
  top:calc(var(--header-h) + var(--admin-bar) + 26px);
  max-height:calc(100vh - var(--header-h) - var(--admin-bar) - 52px);
  max-height:calc(100dvh - var(--header-h) - var(--admin-bar) - 52px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.enq-form::-webkit-scrollbar{ width:6px; }
.enq-form::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
.enq-title{ font-size:20px; font-weight:800; line-height:1.3; }
.enq-note{ margin-top:6px; font-size:13.5px; color:var(--muted); }
.req{ color:var(--red); font-weight:800; }

.enq-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px 20px; margin-top:18px;
}
.field{ display:flex; flex-direction:column; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.field label .req{ margin-left:3px; }

.field input,
.field select,
.field textarea{
  margin-top:9px; width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:0 14px; height:48px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{
  height:auto; min-height:92px; padding:12px 14px; line-height:1.6; resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:#A9A29A; }

/* 聚焦态：红描边 + 一层很淡的红光，和站内按钮的强调色一致 */
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(200,16,46,.13);
}
/* 校验失败标红：必须"提交过一次"之后才生效（js 会加 is-validated）。
   否则 :invalid 一进页面就成立 —— 必填框还没被碰过就顶着红框，很吓人。
   另外排除 :focus：正在输入的字段让位给品牌红描边 + 光圈，不跟"错误红"打架
   （:not(:focus) 也顺带把这条的特异性抬高，确保聚焦态稳定生效）。 */
.enq-form.is-validated .field input:not(:focus):invalid,
.enq-form.is-validated .field select:not(:focus):invalid,
.enq-form.is-validated .field textarea:not(:focus):invalid{ border-color:#C0392B; }

.field-hint{ margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--muted); }

/* 蜜罐：真人看不见，机器人常会填。不用 display:none —— 部分机器人会跳过隐藏元素。 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.enq-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin-top:20px; padding-top:20px; border-top:1px solid var(--line);
}
.enq-actions .btn{ margin-top:0; }
.enq-alt{ font-size:13.5px; color:var(--muted); }
.enq-alt a{ color:var(--red); font-weight:700; }
.enq-alt a:hover{ text-decoration:underline; }

/* 兜底模板（没装 CF7 时）的提示同样钉在滚动口底部，理由同上。 */
.enq-msg{ position:sticky; bottom:0; z-index:2; margin-top:12px; font-size:14px; font-weight:600; background:#fff; }
.enq-msg.is-ok{ color:#0F7B3F; }
.enq-msg.is-err{ color:var(--red); }

@media (max-width:1024px){
  .contact-grid2{ grid-template-columns:1fr; gap:40px; }
  .enq-grid{ grid-template-columns:1fr; }
  /* 窄屏变单列：表单排在左栏下方，吸附没有意义，取消掉 */
  .enq-form{
    padding:28px 24px 26px; position:static; top:auto; bottom:auto;
    max-height:none; overflow:visible;
  }
  .enq-actions{ gap:14px; }
  .enq-actions .btn{ width:100%; justify-content:center; }
  .contact-grid2 > .wpcf7{
    position:static; top:auto; max-height:none; overflow:visible;
  }
}

/* ---- Contact Form 7 接管询盘表单时多出来的几层壳 ----
   表单本体（.enq-form）由 CF7 输出，外面还套一层 div.wpcf7，控件又包在 span 里。
   插件自带的 styles.css 继续用（它管 hidden 字段、响应区的显隐、转圈），下面只把
   颜色与间距扳回品牌样式，需要盖过它的选择器时统一加 .wpcf7 form.enq-form 前缀。 */

/* CF7：壳才是网格项。sticky / max-height / 滚动必须挂在壳上——
   表单用 max-height:100% 无效（父级只有 max-height 没有明确 height），
   若只 sticky 壳、高度仍随表单固有高度走，矮视口提交区会被钉在视口外。
   form 改 static 并取消自身限高，避免双重 sticky / 双重滚动。 */
.contact-grid2 > .wpcf7{
  position:sticky;
  top:calc(var(--header-h) + var(--admin-bar) + 26px);
  max-height:calc(100vh - var(--header-h) - var(--admin-bar) - 52px);
  max-height:calc(100dvh - var(--header-h) - var(--admin-bar) - 52px);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  min-width:0;
}
.contact-grid2 > .wpcf7::-webkit-scrollbar{ width:6px; }
.contact-grid2 > .wpcf7::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.2); border-radius:3px; }
.contact-grid2 > .wpcf7 > .enq-form{
  position:static; top:auto;
  max-height:none; overflow:visible;
}

/* .field 是 flex 列，包控件的 span 要成块级；间距由 span 自己出，
   不让 input 的 margin-top 穿出去跟 span 折叠，否则整列会比静态版高出几像素。 */
.enq-form .wpcf7-form-control-wrap{ display:block; min-width:0; margin-top:9px; }
.enq-form .wpcf7-form-control-wrap > .wpcf7-form-control{ margin-top:0; }

/* 校验失败标红：取代原来 .is-validated + :invalid 那套（现在由 CF7 加类）。 */
.enq-form .wpcf7-not-valid{ border-color:#C0392B; }
.enq-form .wpcf7-not-valid-tip{ margin-top:6px; font-size:12.5px; font-weight:600; color:#C0392B; }

/* 提示条就是原来的 .enq-msg：显隐交给 CF7 的 form.init/.sent 等状态类，这里不抢 display。
   position:sticky 是必须的：提示条在 DOM 里是表单最后一个元素，而 CF7 路径的滚动口是外面的
   div.wpcf7（sticky + max-height + overflow-y:auto，见上方 1880 行那段），矮视口下用户要滚到
   底才能点到提交按钮，提示就落在滚动口外面。钉在滚动口底部 = 点完提交提示就在眼前。
   CF7 自己只做 innerText 赋值、不管定位（读插件 index.js 确认无 scrollIntoView）。 */
.wpcf7 form.enq-form .wpcf7-response-output{
  position:sticky; bottom:0; z-index:2;
  margin:14px 0 0; padding:12px 16px; font-size:14px; font-weight:600;
  border-width:0 0 0 3px; border-radius:0 var(--radius) var(--radius) 0;
  background:#F7F4F1; border-color:var(--line); color:var(--muted);
  box-shadow:0 -10px 16px rgba(255,255,255,.92);
}
.wpcf7 form.enq-form.sent .wpcf7-response-output{
  background:#EDF7F0; border-left-color:#0F7B3F; color:#0F7B3F;
}
/* 只有真有内容时才要底部留白：空提示条上面那条 CF7 自己的规则在 init/submitting/resetting
   时是 display:none，不占位；一旦有文字（成功/失败/校验）它就浮在滚动口底部，
   滚到底时若不给自己留位置，会压住提交按钮下沿（实测重叠 22px）。 */
.wpcf7 form.enq-form .wpcf7-response-output:not(:empty){ margin-bottom:63px; }
.wpcf7 form.enq-form.invalid .wpcf7-response-output,
.wpcf7 form.enq-form.failed .wpcf7-response-output,
.wpcf7 form.enq-form.aborted .wpcf7-response-output,
.wpcf7 form.enq-form.spam .wpcf7-response-output{
  background:#FDF1F3; border-left-color:var(--red); color:var(--red);
}

/* 提交中的转圈跟按钮同色，跟在按钮右边。 */
.enq-form .wpcf7-spinner{ background-color:var(--red); margin:0 0 0 14px; }

/* ------------------------------ 搜索页 ------------------------------ */
.search-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; max-width:560px; margin-bottom:44px; }
.search-form .field{ flex:1 1 240px; }
.search-form .btn{ margin-top:0; }

/* 触屏没有真悬停：避免点按后卡片一直停在抬起态 */
@media (hover:none){
  a.card:hover,.card:hover,.app-card:hover,.why-card:hover{
    transform:none; box-shadow:none; border-color:var(--line);
  }
  .cert-grid--images .cert-card:hover .cert-shot img{ transform:none; }
  /* 流程圆点：点按后 :hover 会粘住放大/红边，触屏取消悬停态 */
  .node:hover .node-dot{
    transform:none; border-color:var(--line); color:var(--muted); box-shadow:none;
  }
  .node.is-active:hover .node-dot,
  .node.is-active .node-dot{
    background:#fff; border-color:#fff; color:var(--red);
    box-shadow:0 0 0 5px rgba(255,96,121,.16);
  }
  .node:hover .node-label{ color:var(--muted); }
  .node.is-active .node-label,.node.is-active:hover .node-label{ color:#fff; }
}