*{box-sizing:border-box}
:root{ --k:calc(100vw / 1920px); --cw:338px; --cg:24px }
@media (min-width:1920px){ :root{ --k:1 } }
html,body{ margin:0; padding:0; background:#EEF4FA }
html{ overflow-x:hidden }
#wrap{ width:100%; margin:0 auto; background:#fff; box-shadow:0 10px 40px rgba(16,42,80,.18) }
@media (min-width:1920px){ #wrap{ max-width:1920px } }
#body{ position:relative; font-family:Arial,Helvetica,sans-serif; color:#122E4F; -webkit-text-size-adjust:100% }
#body a{ color:inherit }
/* ★ 特异度坑（r327 查出）：`#body a` = (1,0,1) 会压过任何 class 级 (0,1,0) 的 color
   ⇒ 按钮上写的 `color:#fff` / `color:#1D5188` 被静默改成 #122E4F。
     <a> 上要显式着色，一律用 (1,1,x) 起的选择器。 */
#body a.hero-btn{ color:#FFFFFF }
#body a.cta-btn{ color:#1D5188 }
#body a.btn-navy{ color:#FFFFFF }
.core{ width:calc(1500px * var(--k)); max-width:100%; margin:0 auto }

/* 通用字件 */
.eyebrow{ display:block; margin:0; font-size:calc(13px * var(--k)); line-height:1.5; font-weight:700;
          letter-spacing:calc(.99px * var(--k)); color:#D78A36 }
.h2{ margin:0; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
     font-size:calc(38px * var(--k)); line-height:1.3; letter-spacing:calc(-.4px * var(--k)); color:#122E4F }
.lead{ margin:0; font-size:calc(16px * var(--k)); line-height:1.6; color:#5B6B7F }

/* ═══ 吸顶导航（真 DOM · 与 about/index/contact 同源）═══ */
.hd{ position:sticky; top:0; z-index:99; background:#fff; font-family:Arial,Helvetica,sans-serif }
.hd-r1{ height:calc(64px * var(--k)); background:#FFFFFF }
.hd-r2{ height:calc(56px * var(--k)); background:#F8FBFE }
.hd-core{ position:relative; width:calc(1500px * var(--k)); max-width:100%; margin:0 auto; height:100% }
.hd-logo{ position:absolute; left:0; top:50%; transform:translateY(-50%); line-height:0 }
.hd-logo img{ display:block; width:calc(175.8px * var(--k)); height:auto }
.hd-sch{ position:absolute; right:0; top:50%; transform:translateY(-50%);
         display:flex; align-items:stretch; width:calc(500px * var(--k)); height:calc(36px * var(--k));
         border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(6px * var(--k));
         background:#fff; overflow:hidden; margin:0 }
.hd-q{ flex:1 1 auto; min-width:0; border:0; outline:none; margin:0;
       background-color:#fff; background-repeat:no-repeat;
       background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOEE5OUFCIiBzdHJva2Utd2lkdGg9IjIuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iNi42Ii8+PHBhdGggZD0iTTE1LjYgMTUuNiAyMSAyMSIvPjwvc3ZnPg==");
       background-position:calc(18px * var(--k)) center;
       background-size:calc(15px * var(--k)) calc(15px * var(--k));
       padding:0 calc(10px * var(--k)) 0 calc(65px * var(--k));
       letter-spacing:calc(.25px * var(--k));
       font-family:inherit; font-size:calc(14px * var(--k)); color:#5B6B7F;
       -webkit-appearance:none; appearance:none }
.hd-q::placeholder{ color:#5B6B7F; opacity:1 }
.hd-q::-webkit-search-cancel-button{ display:none }
.hd-btn{ flex:0 0 auto; width:calc(120px * var(--k)); border:0; background:#122E4F; color:#fff;
         font-family:inherit; font-size:calc(14px * var(--k)); font-weight:700;
         letter-spacing:calc(.14px * var(--k)); cursor:pointer; padding:0 }
.hd-btn:hover{ background:#1D5188 }
.hd-nav{ position:absolute; left:0; top:0; height:100%; display:flex; gap:calc(34.5px * var(--k)) }
.hd-nav a{ display:block; position:relative; height:calc(56px * var(--k));
           line-height:calc(56px * var(--k)); white-space:nowrap; text-decoration:none;
           font-size:calc(14px * var(--k)); letter-spacing:calc(.14px * var(--k)); color:#5B6B7F }
.hd-nav a:hover{ color:#1D5188; text-decoration:underline; text-decoration-thickness:calc(2.5px * var(--k)); text-underline-offset:calc(12px * var(--k)) }
.hd-nav a.on{ color:#1D5188; font-weight:700 }
.hd-nav a.on::after{ content:''; position:absolute; left:0; right:0;
                     top:calc(37.5px * var(--k)); height:calc(2.5px * var(--k)); background:#1D5188 }
/* 导航悬停横线：与当前页那条归到同一条基线（原来走文字下划线、位置低 7px；当前页被悬停时会上下各出一条） */
.hd-nav a::after{ content:''; position:absolute; left:0; right:0; top:calc(37.5px * var(--k)); height:calc(2.5px * var(--k)); background:#1D5188; opacity:0 }
.hd-nav a:hover{ text-decoration:none }
.hd-nav a:hover::after, .hd-nav a.on::after{ opacity:1 }

.hd-lang{ position:absolute; right:calc(4px * var(--k)); top:0; height:100%;
          display:flex; align-items:center; gap:calc(4px * var(--k)) }
.hd-lang a{ display:flex; align-items:center; justify-content:center; gap:calc(5px * var(--k));
            width:calc(52px * var(--k)); height:calc(36px * var(--k));
            border-radius:calc(4px * var(--k)); background:#fff;
            box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(18,46,79,.07);
            text-decoration:none; color:#122E4F; font-weight:700;
            font-size:calc(12px * var(--k)); letter-spacing:calc(.48px * var(--k)) }
.hd-lang a:hover{ color:#1D5188; box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(29,81,136,.40) }
.fl{ display:block; flex:0 0 auto; width:calc(18px * var(--k)); height:calc(12px * var(--k));
     background-size:cover; background-position:center; background-repeat:no-repeat }

/* ═══ 回到顶部 ═══ */
.p-topwrap{ position:fixed; right:calc(28px * var(--k)); bottom:calc(28px * var(--k)); z-index:60;
  opacity:0; visibility:hidden; transform:translateY(calc(10px * var(--k)));
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease }
.p-topwrap.on{ opacity:1; visibility:visible; transform:translateY(0) }
.p-top{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  width:calc(52px * var(--k)); height:calc(52px * var(--k)); border-radius:50%;
  font-size:calc(18px * var(--k)); line-height:1.5; color:#122E4F; background:#FFFFFF;
  border:calc(1px * var(--k)) solid #DDE5EF;
  box-shadow:0 calc(8px * var(--k)) calc(22px * var(--k)) rgba(18,46,79,.18);
  transition:background .2s ease,color .2s ease,border-color .2s ease }
.p-top:hover{ background:#F8FBFE; color:#1D5188; border-color:rgba(29,81,136,.40) }

/* ═══════════════ ① Hero 横幅（带高 377 · r330 固定格式，与 about/contact 逐值同源）═══════════════ */
.hero{ position:relative; overflow:hidden;
       /* r329 定案：内页横幅＝**平涂** ALWID DEEP #122E4F（与页脚/CTA 同色，固定不再变）。
          首页大 Hero 仍为 #122E4F→#1D5188 45° 渐变（Hero 档），两者有意区分。 */
       background:#122E4F }
.hero .core{ position:relative; height:calc(377px * var(--k)) }
.crumb{ position:absolute; left:0; top:calc(91.0712px * var(--k)); display:flex; align-items:center;
        margin:0; font-size:calc(13px * var(--k)); line-height:1.5; color:#F2F6FB }
.crumb a{ color:#F2F6FB; text-decoration:none; opacity:.62 }
.crumb a:hover{ color:#FFFFFF; opacity:1 }
.crumb .sep{ margin:0 calc(7px * var(--k)); color:#F2F6FB; opacity:.3844 }
.crumb .cur{ color:#FFFFFF; opacity:.62 }
.hero-rule{ position:absolute; left:0; top:calc(134.711px * var(--k)); display:block;
            width:calc(46px * var(--k)); height:calc(4px * var(--k));
            border-radius:calc(2px * var(--k)); background:#D78A36 }
.hero-h1{ position:absolute; left:0; top:calc(154.8485px * var(--k)); margin:0;
          font-family:"Arial Black",Arial,sans-serif; font-weight:900;
          font-size:calc(52px * var(--k)); line-height:1.3; letter-spacing:calc(-.4px * var(--k));
          color:#FFFFFF }
.hero-lead{ position:absolute; left:0; top:calc(237.9406px * var(--k)); margin:0;
            font-size:calc(16px * var(--k)); line-height:1.5; color:#F2F6FB; opacity:.85;
            max-width:calc(1100px * var(--k)) }
.hero-lead.two{ top:calc(261.9406px * var(--k)) }
.hero-btn{ position:absolute; right:0; top:calc(163px * var(--k));
           display:inline-flex; align-items:center; height:calc(51px * var(--k));
           padding:0 calc(23px * var(--k)); border-radius:calc(6px * var(--k));
           background:#D78A36; text-decoration:none;
           box-shadow:0 calc(1.8293px * var(--k)) calc(5.122px * var(--k)) rgba(18,46,79,.15);
           font-size:calc(14px * var(--k)); font-weight:700; letter-spacing:calc(.14px * var(--k)) }
.hero-btn:hover{ filter:brightness(.94) }

/* ═══════════════ ② WHY ALWID（背景 #F2F6FB · S=64）═══════════════ */
.why{ background:#F2F6FB; padding:calc(64px * var(--k)) 0 }
.why .h2{ margin-top:calc(12px * var(--k)) }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(40px * var(--k));
           margin-top:calc(40px * var(--k)) }
.wcard{ display:flex; flex-direction:column; background:#FFFFFF;
        border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(8px * var(--k));
        padding:calc(36px * var(--k)) calc(32px * var(--k)) calc(32px * var(--k));
        box-shadow:0 calc(3px * var(--k)) calc(7px * var(--k)) rgba(18,46,79,.10) }
.wcard .t{ margin:0; font-size:calc(22px * var(--k)); line-height:1.36; font-weight:700; color:#122E4F }
.wcard .d{ margin:calc(14px * var(--k)) 0 0; font-size:calc(16px * var(--k)); line-height:1.6; color:#5B6B7F }
.wcard .n{ display:block; margin-top:auto; padding-top:calc(22px * var(--k));
           font-family:"Arial Black",Arial,sans-serif; font-weight:900;
           font-size:calc(13px * var(--k)); line-height:1.5; letter-spacing:calc(1.4px * var(--k));
           color:#D78A36 }

/* ═══════════════ ③ OUR WORK（背景白 · S=64）：左索引（可折叠）＋ 右 9 卡 ═══════════════ */
.work{ background:#FFFFFF; padding:calc(64px * var(--k)) 0 }
.work .h2{ margin-top:calc(12px * var(--k)) }
.work .lead{ margin-top:calc(14px * var(--k)); max-width:calc(1100px * var(--k)) }
.work-grid{ display:grid; grid-template-columns:calc(320px * var(--k)) 1fr;
            gap:calc(40px * var(--k)); margin-top:calc(44px * var(--k)); align-items:start }

/* — 左：索引（点标题行折叠 9 项）— */
.idx{ position:sticky; top:calc(140px * var(--k)) }
.idx-hd{ display:flex; align-items:center; gap:calc(9px * var(--k));
         width:100%; margin:0; padding:calc(8px * var(--k)) 0; border:0; background:none;
         font-family:inherit; text-align:left; cursor:pointer;
         color:#1D5188 }
.idx-hd .tri{ flex:0 0 auto; display:block; width:calc(13px * var(--k)); height:calc(13px * var(--k));
              color:#D78A36; font-size:calc(13px * var(--k)); line-height:1;
              transition:transform .28s cubic-bezier(.4,0,.2,1) }
.idx-hd .tt{ flex:1 1 auto; min-width:0; font-size:calc(13px * var(--k)); line-height:1.5;
             font-weight:700; letter-spacing:calc(.36px * var(--k)); color:#1D5188 }
.idx-hd:hover .tt{ color:#122E4F }
.idx-hd .ct{ flex:0 0 auto; font-size:calc(13px * var(--k)); color:#5B6B7F }
/* ★ 折叠用 max-height 过渡（height:auto→0 不可过渡）；--k 缩放下用 calc 一起缩，
   手机段必须显式覆盖成固定 px，否则 640×0.2≈128px 会把 9 项裁掉 */
.idx-body{ overflow:hidden; max-height:calc(640px * var(--k));
           transition:max-height .36s cubic-bezier(.4,0,.2,1),opacity .26s ease }
.idx.closed .idx-body{ max-height:0; opacity:0 }
.idx-list{ display:block; margin:calc(10px * var(--k)) 0 0; padding:0; list-style:none }
.idx.closed .idx-hd .tri{ transform:rotate(-90deg) }
.idx-list li a{ display:flex; align-items:center; gap:calc(12px * var(--k));
                padding:calc(6px * var(--k)) 0; text-decoration:none }
.idx-list img{ display:block; flex:0 0 auto; width:calc(44px * var(--k)); height:calc(33px * var(--k));
               border-radius:calc(4px * var(--k)); object-fit:cover }
.idx-list .n{ flex:0 0 calc(22px * var(--k)); font-family:"Arial Black",Arial,sans-serif;
              font-weight:900; font-size:calc(13px * var(--k)); line-height:1.5;
              letter-spacing:calc(1px * var(--k)); color:#D78A36 }
.idx-list .t{ flex:1 1 auto; min-width:0; font-size:calc(14px * var(--k)); line-height:1.5;
              color:#3D74AC }
.idx-list li a:hover .t{ color:#122E4F; font-weight:700 }
.idx-foot{ margin:calc(16px * var(--k)) 0 0; font-size:calc(13px * var(--k));
           line-height:1.6; color:#5B6B7F }

/* — 右：9 张客户卡（3×3 · 悬停放大）— */
.wc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:calc(30px * var(--k)) }
.wc{ display:flex; flex-direction:column; background:#FFFFFF;
     border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(10px * var(--k));
     padding:calc(10px * var(--k)) calc(10px * var(--k)) 0;
     box-shadow:0 calc(3px * var(--k)) calc(7px * var(--k)) rgba(18,46,79,.10);
     transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease }
.wc:hover{ border-color:rgba(29,81,136,.34);
           box-shadow:0 calc(14px * var(--k)) calc(30px * var(--k)) rgba(18,46,79,.18);
           transform:translateY(calc(-4px * var(--k))) }
.wc-fig{ position:relative; display:block; overflow:hidden; border-radius:calc(8px * var(--k));
         background:#EEF4FA; line-height:0 }
.wc-fig img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
             transition:transform .5s cubic-bezier(.4,0,.2,1),filter .5s ease }
.wc:hover .wc-fig img{ transform:scale(1.055); filter:brightness(1.06) saturate(1.04) }
.wc-new{ position:absolute; left:calc(12px * var(--k)); top:0; z-index:2;
         padding:calc(4px * var(--k)) calc(10px * var(--k)) calc(5px * var(--k));
         background:#D78A36; border-radius:0 0 calc(4px * var(--k)) calc(4px * var(--k));
         font-family:"Arial Black",Arial,sans-serif; font-weight:900;
         font-size:calc(13px * var(--k)); line-height:1; letter-spacing:calc(1px * var(--k));
         color:#FFFFFF }
.wc-b{ display:flex; flex-direction:column; flex:1 1 auto;
       padding:calc(20px * var(--k)) calc(8px * var(--k)) calc(22px * var(--k)) }
.wc-h{ display:flex; align-items:baseline; gap:calc(10px * var(--k)) }
.wc-h .n{ flex:0 0 auto; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
          font-size:calc(13px * var(--k)); line-height:1.5; letter-spacing:calc(1.4px * var(--k));
          color:#D78A36 }
.wc-h .t{ flex:1 1 auto; min-width:0; margin:0; font-size:calc(22px * var(--k));
          line-height:1.36; font-weight:700; color:#122E4F;
          transition:color .25s ease }
.wc:hover .wc-h .t{ color:#1D5188 }
.wc .d{ margin:calc(12px * var(--k)) 0 0; font-size:calc(14px * var(--k));
        line-height:1.6; color:#5B6B7F }

/* — 分页行（静态展示 · 与旧代一致）— */






.pager-note{ margin:calc(12px * var(--k)) 0 0; text-align:center;
             font-size:calc(13px * var(--k)); line-height:1.6; color:#5B6B7F }

/* ═══════════════ ④ STUDIO COLLECTION · 06（轮播 · S=64）═══════════════ */
.studio{ background:#F8FBFE; padding:calc(64px * var(--k)) 0 }
.st-hd{ display:flex; align-items:flex-end; justify-content:space-between;
        gap:calc(24px * var(--k)) }
.st-hd .l{ flex:1 1 auto; min-width:0 }
.st-hd .r{ flex:0 0 auto; font-size:calc(13px * var(--k)); line-height:1.5; color:#5B6B7F }
.st-note{ margin:calc(10px * var(--k)) 0 0; font-size:calc(14px * var(--k));
          line-height:1.6; color:#5B6B7F }

.car{ position:relative; margin-top:calc(36px * var(--k)) }
.car-view{ overflow:hidden; padding:calc(6px * var(--k)) 0 calc(10px * var(--k)) }
/* ★ 位移由 --ci（当前索引）驱动，用 CSS 变量做长度运算 —— 不用 JS 算 px，
   否则在 --k 缩放下（视口 ≠1920）会与卡片实际位置错开。 */
.car-track{ display:flex; gap:calc(var(--cg) * var(--k));
            transform:translateX(calc(-1 * var(--ci,0) * (var(--cw) + var(--cg)) * var(--k)));
            transition:transform .62s cubic-bezier(.4,0,.2,1); will-change:transform }
.car-track.notr{ transition:none }
.sc{ flex:0 0 calc(var(--cw) * var(--k)); display:flex; flex-direction:column;
     background:#FFFFFF; border:calc(1px * var(--k)) solid #DDE5EF;
     border-radius:calc(8px * var(--k)); padding:calc(8px * var(--k)) calc(8px * var(--k)) 0;
     box-shadow:0 calc(3px * var(--k)) calc(7px * var(--k)) rgba(18,46,79,.10);
     transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease }
.sc:hover{ border-color:rgba(29,81,136,.34);
           box-shadow:0 calc(12px * var(--k)) calc(26px * var(--k)) rgba(18,46,79,.16);
           transform:translateY(calc(-4px * var(--k))) }
.sc-fig{ display:block; overflow:hidden; border-radius:calc(6px * var(--k));
         background:#EEF4FA; line-height:0 }
.sc-fig img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
             transition:transform .5s cubic-bezier(.4,0,.2,1),filter .5s ease }
.sc:hover .sc-fig img{ transform:scale(1.055); filter:brightness(1.06) saturate(1.04) }
.sc-b{ padding:calc(16px * var(--k)) calc(10px * var(--k)) calc(18px * var(--k)) }
.sc .t{ margin:0; font-size:calc(16px * var(--k)); line-height:1.4; font-weight:700; color:#122E4F }
.sc .c{ margin:calc(6px * var(--k)) 0 0; font-size:calc(13px * var(--k));
        line-height:1.5; color:#5B6B7F }
.car-btn{ position:absolute; top:50%; z-index:3; transform:translateY(-50%);
          display:inline-flex; align-items:center; justify-content:center;
          width:calc(46px * var(--k)); height:calc(46px * var(--k)); padding:0;
          border:calc(1px * var(--k)) solid #DDE5EF; border-radius:50%;
          background:#FFFFFF; color:#122E4F; cursor:pointer;
          box-shadow:0 calc(6px * var(--k)) calc(16px * var(--k)) rgba(18,46,79,.16);
          transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease }
.car-btn:hover{ background:#122E4F; color:#FFFFFF; border-color:#122E4F }
.car-btn[disabled]{ opacity:.35; cursor:default }
.car-btn svg{ display:block; width:calc(16px * var(--k)); height:calc(16px * var(--k)) }
.car-prev{ left:calc(-23px * var(--k)) }
.car-next{ right:calc(-23px * var(--k)) }
.car-dots{ display:flex; align-items:center; justify-content:center; gap:calc(8px * var(--k));
           margin-top:calc(22px * var(--k)) }
.car-dots button{ width:calc(8px * var(--k)); height:calc(8px * var(--k)); padding:0;
                  border:0; border-radius:50%; background:rgba(18,46,79,.22); cursor:pointer;
                  transition:background .2s ease,width .25s ease }
.car-dots button.on{ width:calc(22px * var(--k)); border-radius:calc(4px * var(--k)); background:#1D5188 }

/* ═══════════════ ⑤ SERVICES & PROCESS（背景 #F2F6FB · S=64）═══════════════ */
.svc{ background:#F2F6FB; padding:calc(64px * var(--k)) 0 }
.svc .h2{ margin-top:calc(12px * var(--k)) }
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(32px * var(--k));
           margin-top:calc(40px * var(--k)) }
.sv{ display:flex; align-items:center; background:#FFFFFF;
     border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(8px * var(--k));
     height:calc(64px * var(--k)); padding:0 calc(20px * var(--k)) 0 calc(40px * var(--k));
     box-shadow:0 calc(3px * var(--k)) calc(7px * var(--k)) rgba(18,46,79,.10) }
.sv span{ font-size:calc(16px * var(--k)); line-height:1.4; font-weight:700; color:#122E4F }
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(30px * var(--k));
            margin-top:calc(56px * var(--k)) }
.stp{ text-align:center }
.stp-n{ display:inline-flex; align-items:center; justify-content:center;
        width:calc(56px * var(--k)); height:calc(56px * var(--k)); border-radius:50%;
        background:#FFFFFF; box-shadow:0 calc(4px * var(--k)) calc(12px * var(--k)) rgba(18,46,79,.12);
        font-family:"Arial Black",Arial,sans-serif; font-weight:900;
        font-size:calc(22px * var(--k)); line-height:1; color:#1D5188 }
.stp-t{ display:block; margin:calc(18px * var(--k)) 0 0; font-size:calc(22px * var(--k));
        line-height:1.36; font-weight:700; color:#122E4F }
.stp-d{ display:block; margin:calc(10px * var(--k)) auto 0; max-width:calc(280px * var(--k));
        font-size:calc(14px * var(--k)); line-height:1.6; color:#5B6B7F }
.svc-btnwrap{ display:flex; justify-content:center; margin-top:calc(56px * var(--k)) }
.btn-navy{ display:inline-flex; align-items:center; justify-content:center;
           height:calc(51px * var(--k)); padding:0 calc(28px * var(--k));
           border-radius:calc(6px * var(--k)); background:#122E4F; text-decoration:none;
           font-size:calc(16px * var(--k)); font-weight:700; letter-spacing:calc(.14px * var(--k));
           box-shadow:0 calc(1.8293px * var(--k)) calc(5.122px * var(--k)) rgba(18,46,79,.22) }
.btn-navy:hover{ background:#1D5188 }

/* ═══════════════ ⑥ CTA 带（全站基准 ＝ catalog / about / contact）═══════════════
   基准真值（设计单位，带顶=0）：带高 365.77｜橙短线 23.78×2.74 @+64.00
   眉标 fs13/700/#D78A36 @+73.84（墨顶）｜H2 fs38/900/#FFFFFF @+101.69
   导语 fs16/#F2F6FB .88 @+166.62｜邮箱卡 439.02×31.10 rx15.5488 @+219.16
   按钮卡 210.36×38.41 rx4.5732 纯白 @+263.35 字 #1D5188 */
.cta{ position:relative; overflow:hidden; background:#122E4F; padding:calc(64px * var(--k)) 0 }
.cta-bg{ position:absolute; inset:0; background-position:center; background-size:cover;
         background-repeat:no-repeat; opacity:.16 }
.cta .core{ position:relative; text-align:center }
.cta-rule{ display:block; width:calc(23.78px * var(--k)); height:calc(2.74px * var(--k));
           background:#D78A36; margin:0 auto }
.cta-eyebrow{ display:block; margin:calc(2.15px * var(--k)) 0 0; font-size:calc(13px * var(--k));
              line-height:1.5; font-weight:700; letter-spacing:calc(1.44px * var(--k));
              color:#D78A36 }
.cta .h2{ margin:calc(-1.16px * var(--k)) 0 0; color:#FFFFFF;
          font-size:calc(38px * var(--k)); line-height:1.3 }
.cta-p{ margin:calc(23.9px * var(--k)) 0 0; font-size:calc(16px * var(--k));
        line-height:1.5; color:rgba(242,246,251,.88) }
.cta-mail{ margin:calc(34.63px * var(--k)) 0 0; display:flex; justify-content:center }
.cta-mail span{ display:inline-flex; align-items:center; justify-content:center;
                height:calc(31.10px * var(--k)); min-width:calc(439.02px * var(--k));
                padding:0 calc(22px * var(--k));
                border-radius:calc(15.5488px * var(--k)); background:rgba(255,255,255,.10);
                box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(255,255,255,.30);
                font-size:calc(13px * var(--k)); line-height:1; font-weight:700; color:#FFFFFF }
.cta-btnwrap{ margin:calc(13.09px * var(--k)) 0 0; display:flex; justify-content:center }
.cta-btn{ display:inline-flex; align-items:center; justify-content:center;
          height:calc(38.41px * var(--k)); padding:0 calc(24px * var(--k));
          min-width:calc(210.36px * var(--k));
          border-radius:calc(4.5732px * var(--k)); background:#FFFFFF;
          color:#1D5188; text-decoration:none;
          font-size:calc(14px * var(--k)); line-height:1; font-weight:700 }
.cta-btn:hover{ background:#EEF4FA }
.cta-note{ margin:calc(9.29px * var(--k)) 0 0; font-size:calc(13px * var(--k));
           line-height:1.5; color:rgba(242,246,251,.72) }

/* ═══════════════ ⑦ 页脚（三栏 · 排版对标 index 首页）═══════════════
   带高 344.9672｜上细线 +0.50 h.9146｜二维码白卡 +64.00 176.0672² rx5.4878
   竖线 +91.03 h122 x=647.5/1272.5 α.12｜LOGO +94.41 150.7317×27.439
   主体名 墨顶 +95｜地址 墨顶 +118/+138｜品牌语 墨顶 +148｜ISO 卡 +161.56
   社媒 ×4 +185.05 31.0976² rx8.2317 步距 42.0732｜底细线 +249｜版权 墨顶 +268 */
.ft{ position:relative; background:#122E4F; color:#F2F6FB; padding-top:calc(64px * var(--k)) }
.ft::before{ content:''; position:absolute; left:0; right:0; top:calc(.5px * var(--k));
             height:calc(.9146px * var(--k)); background:rgba(255,255,255,.25) }
.ft .core{ position:relative }
.ft-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start }
.ft-c{ position:relative }
.ft-l{ padding-right:calc(30px * var(--k)) }
.ft-qr{ text-align:center }
.ft-r{ padding-left:calc(30px * var(--k)); text-align:right }
.ft-vl{ position:absolute; top:calc(27.03px * var(--k)); width:calc(.9146px * var(--k));
        height:calc(122px * var(--k)); background:rgba(255,255,255,.12) }
.ft-vl1{ left:calc(437.043px * var(--k)) }
.ft-vl2{ left:calc(1062.043px * var(--k)) }
.ft-logo{ display:block; width:calc(150.7317px * var(--k)); height:calc(27.439px * var(--k));
          margin-top:calc(30.41px * var(--k)) }
.ft-tag{ margin:calc(21.04px * var(--k)) 0 0; font-size:calc(16px * var(--k));
         line-height:1.5; color:#F2F6FB }
.ft-soc{ display:flex; gap:calc(10.9756px * var(--k)); margin:calc(18.16px * var(--k)) 0 0;
         padding:0; list-style:none }
.ft-soc a{ display:flex; align-items:center; justify-content:center; text-decoration:none;
           box-sizing:border-box; width:calc(31.0976px * var(--k)); height:calc(31.0976px * var(--k));
           border-radius:calc(8.2317px * var(--k)); background:rgba(255,255,255,.10);
           box-shadow:inset 0 0 0 calc(1px * var(--k)) rgba(255,255,255,.22); color:#FFFFFF }
.ft-soc a:hover{ background:rgba(255,255,255,.20) }
.ft-soc svg{ display:block; width:calc(22px * var(--k)); height:calc(22px * var(--k)); fill:#FFFFFF }
.ft-qr img{ display:block; box-sizing:border-box; margin:0 auto;
            width:calc(176.0672px * var(--k)); height:calc(176.0672px * var(--k));
            padding:calc(2px * var(--k)); background:#FFFFFF;
            border-radius:calc(5.4878px * var(--k));
            box-shadow:0 calc(2px * var(--k)) calc(2.8px * var(--k)) rgba(18,46,79,.15) }
.ft-name{ margin:calc(26.73px * var(--k)) 0 0; font-size:calc(13px * var(--k));
          line-height:1.5; color:#F2F6FB }
.ft-addr{ margin:calc(4.27px * var(--k)) 0 0; font-size:calc(13px * var(--k));
          line-height:1.5; color:#F2F6FB }
.ft-iso{ position:relative; display:flex; flex-direction:column; justify-content:flex-start;
         margin:calc(8.06px * var(--k)) 0 0 auto; box-sizing:border-box;
         width:calc(329.2683px * var(--k)); height:calc(68.4913px * var(--k));
         padding:calc(2.90px * var(--k)) 0 0 calc(16.4634px * var(--k));
         background:rgba(255,255,255,.06); border:calc(1px * var(--k)) solid rgba(255,255,255,.18);
         border-radius:calc(5.4878px * var(--k)); text-align:left }
.ft-iso::before{ content:''; position:absolute; left:0; top:0; width:calc(2.7439px * var(--k));
                 height:100%; background:#D78A36 }
.ft-iso b{ display:block; font-family:"Arial Black",Arial,sans-serif; font-weight:900;
           font-size:calc(22px * var(--k)); line-height:1.42; color:#FFFFFF }
.ft-iso span{ display:block; margin-top:calc(2.95px * var(--k)); font-size:calc(13px * var(--k));
              line-height:1.5; color:#F2F6FB }
.ft-hr{ height:calc(.9146px * var(--k)); background:rgba(255,255,255,.1185);
        margin-top:calc(9.24px * var(--k)) }
.ft-cr{ margin:0; padding:calc(13.83px * var(--k)) 0 calc(61.42px * var(--k)); text-align:center;
        font-size:calc(13px * var(--k)); line-height:1.5; color:#F2F6FB }

/* ═══════════════════════════════════════════════════════════════
   手机版（<1024px）：同一份 HTML，固定 px 尺寸（不用 --k）
   字阶 6 档 {23,20,17,15,14,13}
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
html,body{ background:#fff }
.core{ width:100%; padding:0 18px }
.eyebrow{ font-size:13px }
.h2{ font-size:23px; line-height:1.28; letter-spacing:-.2px }
.lead{ font-size:15px; line-height:1.62 }
.hd-r1{ height:auto; padding:0 }
.hd-r2{ height:auto }
.hd-core{ width:100%; padding:0 14px; height:auto }
.hd-logo{ position:static; transform:none; display:block }
.hd-logo img{ width:auto; height:18px }
.hd-sch{ position:static; transform:none; width:100%; height:38px; margin:0 0 2px }
.hd-r1 .hd-core{ padding:11px 14px }
.hd-r2 .hd-core{ padding:0 14px 10px }
.hd-nav{ position:static; height:auto; flex-wrap:wrap; gap:0 16px }
.hd-nav a{ height:34px; line-height:34px; font-size:14px }
.hd-nav a.on::after{ top:26px; height:2px }
.hd-lang{ position:static; height:auto; margin-top:8px; gap:6px }
.hd-lang a{ width:auto; padding:0 9px; height:30px; font-size:12px }
/* ★ 全站 header 组件的 --k 泄漏（r328 实测，与 contact 线上件逐项同值）：
   桌面这三个值是 calc(Npx*var(--k))，手机段漏覆盖 ⇒ --k≈0.203 下
     .hd-q   字号 2.84px（placeholder 缩到看不见）
     .hd-btn 字号 2.84px ＋ 宽 24px（Search 挤成一个小蓝方块）
     .fl     4×2px（国旗缩成一条短横）
   必须显式给固定 px。改动同步口径：index/about/contact 同一组件同样存在。 */
.hd-q{ font-size:14px; padding:0 12px 0 38px;
       background-position:14px center; background-size:15px 15px }
.hd-btn{ width:auto; min-width:92px; padding:0 16px; font-size:14px }
.fl{ width:18px; height:12px }
.p-topwrap{ right:14px; bottom:14px }
.p-top{ width:44px; height:44px; font-size:16px }

/* Hero：桌面 .hero-rule 的 width/height 是 calc(46px*var(--k))，手机段若不覆盖
   就会按 --k≈0.203 缩成 9.3×0.8 的细丝 ⇒ 必须显式给固定 px。
   22×3 rx2 ＝ 全站手机端「hero 眉标短线」尺寸（index/about 的 .mhero-rule 同值）*/
.hero .core{ height:auto; padding:22px 18px 26px }
.crumb{ position:static; font-size:13px; margin-bottom:16px }
.hero-rule{ position:static; width:22px; height:3px; border-radius:2px; margin-bottom:14px }
.hero-h1{ position:static; font-size:23px; line-height:1.28; letter-spacing:-.2px; margin-bottom:12px }
.hero-lead{ position:static; font-size:15px; line-height:1.6; max-width:none }
.hero-lead.two{ margin-top:8px }
.hero-btn{ position:static; margin-top:20px; height:46px; padding:0 20px; font-size:15px; border-radius:8px }

/* WHY */
.why{ padding:38px 0 }
.why .h2{ margin-top:10px }
.why-grid{ grid-template-columns:1fr; gap:14px; margin-top:24px }
.wcard{ padding:22px 18px 20px }
.wcard .t{ font-size:20px }
.wcard .d{ font-size:15px; line-height:1.62; margin-top:10px }
.wcard .n{ font-size:13px; padding-top:16px }

/* OUR WORK */
.work{ padding:38px 0 }
.work .h2{ margin-top:10px }
.work .lead{ margin-top:12px; font-size:15px }
.work-grid{ grid-template-columns:1fr; gap:0; margin-top:24px }
.idx{ position:static; margin-bottom:22px; padding-bottom:18px;
      border-bottom:1px solid #DDE5EF }
.idx-hd{ padding:6px 0; gap:8px }
.idx-hd .tri{ width:11px; height:11px; font-size:13px }
.idx-hd .tt{ font-size:13px; letter-spacing:.3px }
.idx-body{ max-height:600px }
.idx-list{ margin-top:8px }
.idx-list li a{ padding:7px 0; gap:12px }
.idx-list img{ width:44px; height:33px; border-radius:4px }
.idx-list .n{ flex:0 0 22px; font-size:13px }
.idx-list .t{ font-size:15px }
.idx-foot{ font-size:13px; margin-top:12px }
.wc-grid{ grid-template-columns:1fr; gap:16px }
.wc{ padding:10px 10px 0; border-radius:10px }
.wc-b{ padding:16px 8px 18px }
.wc-h .n{ font-size:13px }
.wc-h .t{ font-size:20px }
.wc .d{ font-size:14px; line-height:1.6; margin-top:8px }
.wc-new{ font-size:13px; padding:4px 10px 5px; left:12px }



.pager-note{ font-size:13px; margin-top:10px }

/* STUDIO 轮播（手机：一屏 1.2 张）*/
.studio{ padding:38px 0 }
.st-hd{ display:block }
.st-hd .r{ margin-top:8px; font-size:13px }
.st-note{ font-size:14px; margin-top:8px }
.car{ margin-top:22px }
.car-view{ padding:4px 0 6px }
.car-track{ gap:14px; transform:translateX(calc(-1 * var(--ci,0) * 276px)) }
.sc{ flex:0 0 262px; padding:7px 7px 0; border-radius:8px }
.sc-b{ padding:13px 9px 15px }
.sc .t{ font-size:15px }
.sc .c{ font-size:13px; margin-top:4px }
.car-btn{ width:38px; height:38px; transform:none; top:auto; bottom:-56px }
.car-btn svg{ width:14px; height:14px }
.car-prev{ left:calc(50% - 92px) }
.car-next{ right:auto; left:calc(50% + 52px) }
.car-dots{ margin-top:16px }
.car-dots button{ width:8px; height:8px }
.car-dots button.on{ width:20px }

/* SERVICES */
.svc{ padding:38px 0 }
.svc .h2{ margin-top:10px }
.svc-grid{ grid-template-columns:1fr; gap:12px; margin-top:24px }
.sv{ height:56px; padding:0 16px 0 24px; border-radius:8px }
.sv span{ font-size:15px }
.step-grid{ grid-template-columns:1fr; gap:0; margin-top:28px }
.stp{ display:flex; align-items:flex-start; gap:14px; text-align:left;
      padding:14px 0; border-top:1px solid #DDE5EF }
.stp:last-child{ border-bottom:1px solid #DDE5EF }
.stp-n{ flex:0 0 38px; width:38px; height:38px; font-size:17px }
.stp-b{ flex:1 1 auto; min-width:0 }
.stp-t{ margin:0; font-size:17px; line-height:1.35 }
.stp-d{ margin:5px 0 0; max-width:none; font-size:15px; line-height:1.6 }
.svc-btnwrap{ margin-top:28px }
.btn-navy{ width:100%; height:48px; font-size:17px; border-radius:8px }

/* CTA */
.cta{ padding:38px 0 }
.cta-rule{ width:24px; height:3px }
.cta-eyebrow{ font-size:13px; margin-top:8px }
.cta .h2{ font-size:23px; line-height:1.28; margin-top:6px }
.cta-p{ font-size:15px; line-height:1.62; margin-top:16px }
.cta-mail{ margin-top:22px }
.cta-mail span{ height:40px; min-width:0; width:100%; border-radius:20px; font-size:13px; padding:0 18px }
.cta-btnwrap{ margin-top:12px }
.cta-btn{ width:100%; min-width:0; height:48px; font-size:17px; border-radius:8px }
.cta-note{ font-size:13px; margin-top:16px }

/* 页脚 */
.ft{ padding-top:38px }
.ft::before{ top:0; height:1px }
.ft-grid{ grid-template-columns:1fr; gap:0 }
.ft-c{ padding:0; text-align:left }
.ft-l{ padding-right:0 }
.ft-r{ padding-left:0; text-align:left }
.ft-vl{ display:none }
.ft-c+.ft-c{ border-top:1px solid rgba(255,255,255,.14); margin-top:22px; padding-top:22px }
.ft-logo{ width:150px; height:auto; margin-top:0 }
.ft-tag{ font-size:15px; margin-top:14px }
.ft-soc{ margin-top:16px }
.ft-soc a{ width:32px; height:32px; border-radius:8px }
.ft-soc svg{ width:22px; height:22px }
.ft-qr{ text-align:left }
.ft-qr img{ margin:0; width:132px; height:132px; padding:2px; border-radius:4px }
.ft-name{ margin-top:0 }
.ft-name,.ft-addr{ font-size:13px }
.ft-iso{ margin:16px auto 0 0; width:auto; height:auto; padding:12px 16px 12px 22px;
         align-items:flex-start; justify-content:flex-start }
.ft-iso::before{ width:3px }
.ft-iso b{ font-size:20px }
.ft-iso span{ font-size:13px; margin-top:6px }
.ft-hr{ margin-top:14px; height:1px }
.ft-cr{ padding:18px 0 24px; font-size:13px }
}
/* ── 翻页器 · 统一为 products.html 的 .p-pager 口径（r335）──
   方胶囊 38×38 rx6 ｜ 选中深蓝 #1D5188 ｜ 组上方 1px 分隔线 ｜ 末行整宽计数
   第 2 页沿用原文的不可点语义 ⇒ .off */
.p-pager{ display:flex; align-items:center; justify-content:center;
  gap:calc(8px * var(--k)); flex-wrap:wrap;
  margin:calc(38px * var(--k)) 0 0; padding:calc(24px * var(--k)) 0 0;
  border-top:calc(1px * var(--k)) solid #DDE5EF }
.p-pg{ display:inline-flex; align-items:center; justify-content:center;
  min-width:calc(38px * var(--k)); height:calc(38px * var(--k)); padding:0 calc(12px * var(--k));
  box-sizing:border-box; text-decoration:none; font-weight:700; font-size:calc(14px * var(--k));
  line-height:1.5; color:#122E4F; background:#FFFFFF;
  border:calc(1px * var(--k)) solid #DDE5EF; border-radius:calc(6px * var(--k));
  transition:border-color .25s ease, background .25s ease, color .25s ease }
.p-pg.on{ background:#1D5188; border-color:#1D5188; color:#FFFFFF }
.p-pg.off{ color:#5B6B7F; background:#F8FBFE; border-color:#DDE5EF; cursor:default }
.p-pg-i{ flex:0 0 100%; width:100%; text-align:center;
  font-size:calc(14px * var(--k)); line-height:1.5; color:#5B6B7F; margin:calc(10px * var(--k)) 0 0 }
.p-pg:hover{ border-color:rgba(29,81,136,.40); background:#F8FBFE; color:#1D5188 }
@media (max-width:1023px){
.p-pager{ gap:6px; margin-top:26px; padding-top:18px }
.p-pg{ min-width:34px; height:34px; padding:0 10px; font-size:13px; border-radius:5px }
.p-pg-i{ font-size:13px; margin-top:8px }
}
footer.mft{display:none}
@media (max-width:1023px){
footer.ft{display:none}
footer.mft{display:block}
.mft{font-family:Arial,Helvetica,sans-serif;color:#5B6B7F;background:#122E4F;padding:34px 18px 0;text-align:center;position:relative;overflow:hidden}
.mft-logo{line-height:0}
.mft-logo img{display:inline-block;height:20px;width:auto}
.mft-c{margin:0;font-size:13px;line-height:1.6;color:rgba(242,246,251,.72);word-break:break-word}
.mft-rule{display:block;width:26px;height:2.5px;background:#D78A36;border-radius:2px;margin:16px auto 0}
.mft-c1{margin-top:18px;letter-spacing:.2px}
.mft-c2{margin-top:11px;font-size:12px;letter-spacing:.2px;color:rgba(242,246,251,.55)}
.mft-map{position:relative;display:block;height:101.4px;margin:20px -18px 0}
.mft-map>*{position:absolute;inset:0;display:block}
.mft-mapbg{background-image:url('../img/img_d0bb21272d.png');background-repeat:no-repeat;background-size:100% auto;background-position:50% -21.2px;opacity:0.4}
.mft-cx{padding-top:28px;padding-bottom:40px;text-align:left}
.mft-cx .mft-lgorow{display:flex;align-items:center;margin-bottom:24px}
.mft-cx .mft-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mft-cx .mft-brand{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto}
.mft-cx .mft-logo img{height:20px}
.mft-cx .mft-rule{width:32px;height:3px;border-radius:1.5px;margin:0px auto 0 0}
.mft-cx .mft-tag{margin-top:12px;font-size:13px;line-height:1.55;color:rgba(242,246,251,.72);letter-spacing:.2px}
.mft-cx .mft-cont{display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-top:15px}
.mft-cx .mft-cont .mft-c1{margin-top:0;font-size:14px;line-height:1.5;color:rgba(242,246,251,.85);letter-spacing:.2px}
.mft-cx .mft-cont .mft-c2{margin-top:12px;font-size:13px;line-height:1.5;color:rgba(242,246,251,.72);letter-spacing:.2px}
.mft-cx .mft-cont .mft-c3{margin-top:12px;font-size:13px;line-height:1.5;color:rgba(242,246,251,.62);letter-spacing:.2px}
.mft-cx .mft-cert{margin-top:24px;height:50px;padding:0 14px 0 16px;border-radius:5.5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:center;position:relative;text-align:left}
.mft-cx .mft-cert::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2.7439px;border-radius:1.372px;background:#D78A36}
.mft-cx .mft-ch{font-size:17px;font-weight:900;line-height:1.25;color:#FFFFFF;letter-spacing:.2px}
.mft-cx .mft-cs{margin-top:2px;font-size:13px;line-height:1.3;color:rgba(242,246,251,.72);letter-spacing:.2px}
.mft-cx .mft-c4{margin-top:20px;padding-top:18px;position:relative;font-size:13px;line-height:1.6;color:rgba(242,246,251,.55);letter-spacing:.4px;text-align:center}
.mft-cx .mft-c4::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#1D5188 16%,#1D5188 84%,transparent)}
.mft-cx .mft-map{margin:0;position:absolute;left:0;right:0;bottom:0;z-index:0;height:271.8px}
.mft-cx .mft-mapbg{background-size:100% auto;background-position:50% 0;opacity:.14;background-image:url('../img/img_d0bb21272d.png');background-repeat:no-repeat}
.mft-cx>*:not(.mft-map){position:relative;z-index:1}
}
/* r20：包装页顶部三张文字卡补上悬停（沿用全站卡片统一口径） */
.wcard{ transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease }
.wcard:hover{ transform:translateY(calc(-6px * var(--k))); box-shadow:0 calc(12px * var(--k)) calc(28px * var(--k)) rgba(18,46,79,.16); border-color:rgba(29,81,136,.40) }
/* r21：包装页悬停口径统一 ＋ 步骤条/页脚徽章补 hover（纯插入，后置覆盖） */
.wc:hover{ border-color:rgba(29,81,136,.40); box-shadow:0 calc(12px * var(--k)) calc(28px * var(--k)) rgba(18,46,79,.16); transform:translateY(calc(-6px * var(--k))) }
.sc:hover{ border-color:rgba(29,81,136,.40); box-shadow:0 calc(12px * var(--k)) calc(28px * var(--k)) rgba(18,46,79,.16); transform:translateY(calc(-6px * var(--k))) }
.sv{ transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease }
.sv:hover{ transform:translateY(calc(-6px * var(--k))); box-shadow:0 calc(12px * var(--k)) calc(28px * var(--k)) rgba(18,46,79,.16); border-color:rgba(29,81,136,.40) }
.ft-iso{ transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,background .28s ease }
.ft-iso:hover{ transform:translateY(calc(-6px * var(--k))); box-shadow:0 calc(12px * var(--k)) calc(28px * var(--k)) rgba(18,46,79,.16); background:rgba(255,255,255,.20) }

/* r33 V2 内页横幅压缩：377 -> 250（仅桌面，手机档由 @media(max-width:1023px) 接管） */
@media (min-width:1024px){
.hero .core{height:calc(250px * var(--k))}
.hero .crumb{top:calc(27px * var(--k))}
.hero .hero-rule{top:calc(70.6px * var(--k))}
.hero .hero-h1{top:calc(90.8px * var(--k))}
.hero .hero-btn{top:calc(98.9px * var(--k))}
.hero .hero-lead{top:calc(173.9px * var(--k))}
.hero .hero-lead.two{top:calc(197.9px * var(--k))}
.hero-art .crumb{position:static;margin:0}
.hero-art .hero-rule{position:static;margin:calc(10px * var(--k)) 0 0}
.hero-art .hero-h1{position:static;margin:calc(8px * var(--k)) 0 0}
.hero-art .hero-lead{position:static;margin:calc(8px * var(--k)) 0 0}
}

/* r39 案2 内页横幅·面包屑撤除（仅桌面；手机档由 @media(max-width:1023px) 接管） */
/* 面包屑整条撤除 ⇒ 其余元素整体上移 27.1 保持内部节奏；带高 250 -> 223 */
@media (min-width:1024px){
.hero .core{height:calc(223px * var(--k))}
.hero .hero-rule{top:calc(43.5px * var(--k))}
.hero .hero-h1{top:calc(63.7px * var(--k))}
.hero .hero-btn{top:calc(71.8px * var(--k))}
.hero .hero-lead{top:calc(146.8px * var(--k))}
.hero .hero-lead.two{top:calc(170.8px * var(--k))}
.hero-art .core{height:calc(250px * var(--k))}
.hero-art .hero-btn{top:calc(98.9px * var(--k))}
}


/* ══════ r63h 手机头（与 index.html 逐字同源；桌面不显示）══════ */
.mhd{ display:none }
@media (max-width:1023px){
#wrap > header.hd{ display:none }
.mhd{ display:block }
.mhd{ position:sticky; top:0; z-index:99; background:#fff;
      box-shadow:0 1px 0 #DDE5EF }
.mhd-bar{ height:50px; padding:0 14px; display:flex; align-items:center;
          justify-content:space-between; gap:10px }
.mhd-logo{ display:block; line-height:0; flex:0 1 auto; min-width:0 }
.mhd-logo img{ display:block; height:18px; width:auto }
.mhd-rt{ display:flex; align-items:center; gap:6px; flex:0 0 auto }

.mlang{ position:relative }
.mlang summary{ list-style:none; display:flex; align-items:center; gap:5px; height:26px;
                padding:0 7px; border-radius:6px; cursor:pointer;
                box-shadow:inset 0 0 0 1px rgba(18,46,79,.12);
                color:#122E4F; font-weight:700; font-size:13px; letter-spacing:.2px }
.mlang summary::-webkit-details-marker{ display:none }
.mlang summary b{ font-weight:700 }
.cv{ width:0; height:0; border-left:3.5px solid transparent;
     border-right:3.5px solid transparent; border-top:4px solid #5B6B7F }
.mlang[open] .cv{ border-top:0; border-bottom:4px solid #5B6B7F }
.mlang-panel{ position:absolute; right:0; top:32px; width:168px; background:#fff;
              border:1px solid #DDE5EF; border-radius:10px; padding:5px;
              box-shadow:0 14px 34px rgba(18,46,79,.16); z-index:3 }
.mlang-panel a{ display:flex; align-items:center; gap:8px; padding:8px 9px;
                border-radius:7px; text-decoration:none; color:#122E4F;
                font-size:14px; font-weight:700 }
.mlang-panel a.on{ background:#F2F6FB; color:#1D5188 }
.fl{ display:block; flex:0 0 auto; width:14px; height:9.33px; background-size:cover;
     background-position:center; background-repeat:no-repeat }

.mmenu{ position:relative }
.mmenu summary{ list-style:none; display:flex; flex-direction:column; justify-content:center;
                gap:4px; width:30px; height:30px; padding:6px; cursor:pointer;
                border-radius:6px; box-shadow:inset 0 0 0 1px rgba(18,46,79,.12) }
.mmenu summary::-webkit-details-marker{ display:none }
.mmenu summary i{ display:block; height:2px; background:#122E4F; border-radius:2px }
.mmenu summary i:nth-child(2){ width:78% }
.mmenu[open] summary i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.mmenu[open] summary i:nth-child(2){ opacity:0 }
.mmenu[open] summary i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.mmenu-panel{ position:absolute; right:0; top:36px; width:min(86vw,320px); background:#fff;
              border:1px solid #DDE5EF; border-radius:12px;
              box-shadow:0 14px 40px rgba(18,46,79,.16); padding:12px; z-index:2 }
.msearch{ width:100%; height:40px; border:1px solid #DDE5EF; border-radius:8px;
          padding:0 12px; font-size:14px; margin:0 0 8px; -webkit-appearance:none }
.mnav{ display:flex; flex-direction:column }
.mnav a{ padding:11px 4px; border-bottom:1px solid #F2F6FB; color:#122E4F;
         text-decoration:none; font-size:15px; font-weight:700 }
.mnav a:last-child{ border-bottom:0 }
.mhd{box-shadow:0 1px 0 #DDE5EF}
.mlang summary,.mmenu summary{box-shadow:inset 0 0 0 1px rgba(18,46,79,.07)}
.cv{border-top-color:#5B6B7F}
.mlang[open] .cv{border-bottom-color:#5B6B7F}
.mlang-panel,.mmenu-panel{box-shadow:0 14px 34px rgba(18,46,79,.07)}
}



/* ══════ r64 节题橙线（统一到产品族 / 首页 hero 的 46x4 橙线）══════ */
.core > .eyebrow{ position:relative; padding-top:calc(20px * var(--k)) }
.core > .eyebrow::before{ content:''; position:absolute; left:0; top:0; width:calc(46px * var(--k)); height:calc(4px * var(--k)); background:#D78A36; border-radius:calc(2px * var(--k)) }

/* ─── r65 手机档还原：桌面 calc(46px*var(--k)) 在 --k≈0.203 时会缩成 9.3×0.8 细丝 ───
   22×3 rx2 ＝ 全站手机端「眉标短线」标准尺寸（index/about .mhero-rule、projects .hero-rule 手机段同值）─── */
@media (max-width:1023px){
.core > .eyebrow{ padding-top:14px }
.core > .eyebrow::before{ width:22px; height:3px; border-radius:2px }
}


/* ══════════════════════════════════════════════════════════════════
   r70 手机档「排版精简」（packaging.html）
   ── 只作用于 ≤1023px；桌面档零影响（整块在 @media 内） ──

   ① .idx 索引面板（9 项 × 47px + 头尾 = 554.59px）
      —— 其内容与紧随其后的 9 张 .wc 客户卡**完全是同一批品牌**
         （01 VDA … 09 ALWID），手机上等于把同一份清单列了两遍。
         卡片本身整卡可点，索引的「快速跳转」价值在单列滚动里不成立 ⇒ 收起。

   ② .p-pager + .pager-note（≈130px）
      —— 这枚翻页器是**纯静态装饰**：4 枚 span 全带 aria-disabled="true"、
         没有任何 JS 绑定（`grep -c pkgPager` 只命中 DOM 一处），
         页面实际只有 9 条 ＝ 1 页，"2 / Next" 永远点不动。
         手机上既不可用又占一屏 1/6 ⇒ 收起。

   ③ .wc-b / .wc .d 卡内文字区收紧（每卡省 16px × 9 = 144px）
      —— 桌面卡内距是 calc(20px*k)/calc(22px*k) 的两级；手机档
         .wc-b 仍是 20/8/22，与卡内 15px 正文比偏松 ⇒ 收到 14/8/16。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .idx{ display:none }
  .p-pager,.pager-note{ display:none }
  .wc-b{ padding:14px 8px 16px }
  .wc .d{ margin-top:8px }
}


/* ══════════════════════════════════════════════════════════════════
   r71 手机档（packaging.html）：客户卡「4:3 × 2 列」＋ STUDIO 轮播「一屏 2 张」
   ── 只作用于 ≤1023px；整块在 @media 内 ⇒ 桌面档零影响 ──

   ① .wc-grid —— 一屏 2 张（原 1 列，每卡 334px 高，一屏放不下一张卡）
      卡宽 = (354 − 12) / 2 = 171px
      ⚠️ 必须写 `minmax(0,1fr)`，不能写 `1fr`：
      `.wc` 是网格项，其**自动最小尺寸**取内容 min-content（被最长的卡
      「05 RAPSTECH」撑到 167.77px）⇒ 窄视口（≤375px）下两列会变成
      167.77 / 144.23 **不等宽**。minmax(0,·) 把下限压到 0 即恒等宽。
      （实测：360px → 156/156，375px → 163.5/163.5）

   ② .wc-fig img —— 1:1 → 4:3（9 张卡省 9 × ~43px）
      图仍是 object-fit:cover，上下会裁掉一部分。

   ③ STUDIO 轮播 —— 一屏 2 张（原一屏 1.35 张，第二张标题被切一半）
      轨道位移按「卡宽 + 沟」自算，不用写死 px：
        卡宽 = 50% − 7px、沟 = 14px ⇒ 步进 = 50% + 7px
      354 容器下：卡 170px + 沟 14px = 184px，两卡正好铺满 354px。
      JS 只推 --ci，无需改动。
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  .wc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
  .wc-fig img{ aspect-ratio:4/3 }
  .car-track{ transform:translateX(calc(-1 * var(--ci,0) * (50% + 7px))) }
  .sc{ flex:0 0 calc(50% - 7px) }
}


@media (max-width:1023px){
/* ── r74 收尾 CTA → 首页「白底左对齐」版式（等价 .mcta）── */
#body .cta{ padding:50px 0 56px; background:#fff }
#body .cta-bg{ display:none }
#body .cta .core{ text-align:left }
#body .cta-rule{ display:none }
#body .cta-eyebrow{ margin:0; font-size:13px; font-weight:700; color:#D78A36; letter-spacing:1.4px; line-height:1.4; display:block }
#body .cta .h2{ margin:11px 0 0; font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:20px; line-height:1.3; color:#1D5188; letter-spacing:-.2px }
#body .cta-p{ margin:12px 0 0; font-size:15px; line-height:1.6; color:#5B6B7F; max-width:330px }
#body .cta-mail{ display:none }
#body .cta-btnwrap{ display:block; margin:0 }
#body .cta .cta-btn{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-width:0; height:46px; padding:0 24px; font-size:15px; font-weight:700; line-height:1; border-radius:6px; background:#D78A36; color:#fff; letter-spacing:.2px; margin-top:28px; box-shadow:0 5px 14px rgba(18,46,79,.13) }
#body .cta .cta-btn:hover{ background:#D78A36; filter:brightness(.94) }
#body .cta .cta-btn::after{ content:'\2192'; display:inline-block; margin-left:10px; font-size:14px; opacity:.9; transform:translateY(-.5px) }
#body .cta-note{ display:none }
}