/* ============================================================
   冷板产品页（设计稿 10. Products - Liquid Cooling Cold Plates）
   ============================================================ */

/* ---------- 1. HERO：Products 眉标 + 58.2pt 大标题 ---------- */
.ara-cp-hero {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 56px 0 46px;
}
.ara-cp-eyebrow {
  font-family: var(--ara-font-head);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 25px);   /* 设计真值 23pt */
  color: #fff;
  margin-bottom: 6px;
}
.ara-cp-title {
  font-family: var(--ara-font-head);
  font-weight: 900;
  font-size: clamp(34px, 5.7vw, 64px);   /* 设计真值 58.2pt Roboto-Bold */
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
}

/* ---------- 2. 深色主体：冷板图 + 小标题 + 正文 ---------- */
.ara-cp-intro {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 30px 0 90px;
}
.ara-cp-h2,.ara-cp-config-title,.ara-mf-quickship-sub {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 35px);    /* 设计真值 35pt Rubik-Bold 浅蓝 */
  color: var(--ara-sky, #80c2d7);
  margin: 0 0 3.0rem;                       /* 设计稿标题 y354 → 图 y445，约 78pt */
}
.ara-mf-quickship-sub{
  color: #fff;
  text-align: center;
  margin: 3.0rem auto;
}
/* 冷板图：设计稿居中约占 40% 版心宽；图片为透明底，
   下边距取负值让紧随的小标题上移压进图片透明区（与 PDF 一致） */
.ara-cp-figure { margin: 0; }
.ara-cp-figure img { display: block; width: 100%; }
.ara-cp-figure-md {
  width: 50%;
  margin: 0 auto;                   /* 设计稿图底 2168 → 正文顶 2143，重叠 25pt */
}
.ara-cp-h3 {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 27px);   /* 设计真值 25pt Rubik-Bold 浅蓝 */
  color: var(--ara-sky, #80c2d7);
  text-align: center;
  margin: 0 0 28px;
}
.ara-cp-text {
  font-size: clamp(15px, 2vw, 20px);  
  text-align: center;
  color: #fff;
  max-width: 800px;
  margin: 0 auto 3.0rem;
}
.ara-cp-text-sm {
  font-size: clamp(14px, 1.6vw, 17px);   /* 设计真值 16pt Muli */
  max-width: 550px;                       /* 设计稿正文块 x294-732 ≈ 42% */
  margin-bottom: 3.0rem;
}
.ara-cp-text:last-child { margin-bottom: 0; }

/* ---------- 3. 验证能力 + Cooling For The Future ---------- */
.ara-cp-capability {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 0 0 110px;
}
.ara-cp-h2-lg {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 32px);   /* 设计真值 30pt Rubik-Bold 浅蓝 */
  color: var(--ara-sky, #80c2d7);
  text-align: center;
  margin: 0 0 0.5rem;
}
/* 赭红小标题：设计真值 22pt Muli-Bold #b75136 */
.ara-cp-kicker {
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 22px);
  color: #b75136;
  text-align: center;
  margin: 0 0 0.5rem;
}

/* ---------- 4. 浅灰区：单/双相配置说明 ---------- */
.ara-cp-config {
  background: #ebebf1;                    /* 设计稿浅灰 (0.922,0.922,0.945) */
  padding: 46px 0 66px;
}
.ara-cp-config-title {  
  color: var(--ara-navy);
}
.ara-cp-config-lead,.ara-cp-config-text,.ara-cp-config-h3 {
  font-size: clamp(15px, 2vw, 21px);     /* 设计真值 20pt 黑色 */
  line-height: 1.5;
  text-align: center;
  margin: 0 auto 3.0rem;
}
.ara-cp-config-h3 {
  font-family: var(--ara-font-body); 
  color: #b75136;
  margin: 0 0rem;
}
.ara-cp-config-text {  
  max-width: 780px;
}
/* 正文内的赭红斜体强调（设计真值 Muli-BoldItalic #b75136） */
.ara-cp-config-text em {
  font-style: italic;
  font-weight: 700;
  color: #b75136;
}
.ara-cp-config-text:last-child { margin-bottom: 0; }

/* ---------- 5. CTA：左对齐（设计稿 x82.9，按钮 223x52pt 居左） ---------- */
.ara-cp-cta {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 65px 0 30px;
}
.ara-cp-cta-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 25px);   /* 设计真值 23pt Rubik-Bold 浅蓝 */
  color: var(--ara-sky, #80c2d7);
  margin: 0 0 1.0rem;
}
.ara-cp-cta-desc {
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2vw, 21px);     /* 设计真值 20pt 白色 */
  line-height: 1.5;
  color: #fff;
  max-width: 700px;
  margin: 0 0 1.5rem;
}
/* 浅蓝胶囊按钮 */
.ara-cp-cta .ara-btn {
  background: var(--ara-sky, #80c2d7);
}
.ara-cp-cta .ara-btn:hover {
  background: #9fd4e6;
  border-color: #9fd4e6;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 响应式（≤860px：取消负边距重叠，图文改纵向舒适排布） ---------- */
@media (max-width: 1080px) {
  .ara-cp-hero { padding: 40px 0 30px; }

  .ara-cp-h2 { margin-bottom: 40px; }
  .ara-cp-figure-lg { width: 82%; margin: 0 auto 24px; }
  .ara-cp-figure-md { width: 90%; margin: 0 auto 20px; }
  .ara-cp-text,
  .ara-cp-text-sm { max-width: 100%; margin-bottom: 44px; }
  .ara-cp-capability { padding-bottom: 60px; }
  .ara-cp-config-title { margin-bottom: 32px; }
  .ara-cp-config-lead { margin-bottom: 40px; }
  .ara-cp-config-text { max-width: 100%; margin-bottom: 40px; }
  .ara-cp-cta { padding: 50px 0 80px; }
  .ara-cp-cta-title { margin-bottom: 24px; }
  .ara-cp-cta-desc { margin-bottom: 32px; }
}

/* ============================================================
   预制集装箱页（设计稿 16. Prefab）
   Prefabricated Container Solutions —— 前缀 ara-pf-
   浅灰底 #ebebf1 为主体，深色 hero + 通栏底部大图
   ============================================================ */

/* ---------- 1. HERO：眉标 + 58.2pt 标题 + 25pt 副标 ---------- */
.ara-pf-hero {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 56px 0 46px;
}
.ara-pf-eyebrow {
  font-family: var(--ara-font-head);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 25px);   /* 设计真值 23pt */
  color: #fff;
  margin-bottom: 6px;
}
.ara-pf-title {
  font-family: var(--ara-font-head);
  font-weight: 900;
  font-size: clamp(34px, 5.7vw, 64px);   /* 设计真值 58.2pt */
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 18px;
}
.ara-pf-tagline {
  font-size: clamp(16px, 2.6vw, 27px);   /* 设计真值 25pt Roboto-Bold */
  color: #fff;
  margin: 0 0 30px;
}

/* ---------- 2. 浅灰首屏：斜体标题 + 左右出血双图 ---------- */
.ara-pf-intro { background: #ebebf1; padding: 3.0rem 0 0px; }
.ara-pf-h2 {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 47px);     /* 设计真值 35pt 深蓝 */
  color: var(--ara-navy);
  text-align: center;
  margin: 0 0 3.0rem;
}
/* 前半句 Rubik-BoldItalic（设计稿前段为斜体） */
.ara-pf-h2 em { font-style: italic; }
/* 双图交叠：左图左出血，右图右出血并压在上层 */
.ara-pf-duo {
  display: flex;
  align-items: flex-start;
  margin-bottom: 46px;
}
.ara-pf-duo-left { flex: 0 0 58.3%; margin: 0; }   /* 设计稿 x0-598 */
.ara-pf-duo-right {
  flex: 0 0 53.4%;                                  /* 设计稿 x479-1024 */
  margin: 1.3% 0 0 -11%;                            /* 与左图水平交叠 119pt */
  position: relative;
  z-index: 2;
}
.ara-pf-duo img { display: block; width: 100%; }
.ara-pf-text {
  font-size: clamp(15px, 2vw, 21px);     /* 设计真值 20pt 黑色 */
  text-align: center;
  max-width: 860px;
  margin: 0 auto 60px;
}
.ara-pf-lead-navy,.ara-pf-lead-rust {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(19px, 2.6vw, 27px);   /* 设计真值 25pt 深蓝 */
  color: var(--ara-navy);
  text-align: center;
  line-height: 1.4;
  margin-bottom: 3.0rem;
}
.ara-pf-lead-rust {  
  color: #c56148;
  margin: 0;
}

/* ---------- 3. 一站式数据中心：总览图 + 两列图例 ---------- */
.ara-pf-overview { background: #ebebf1; padding: 3.0rem 0px; }
.ara-pf-h2-navy {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 47px);     /* 设计真值 35pt 深蓝 */
  color: var(--ara-navy);
  text-align: center;
  margin-bottom: 3.0rem;
}
.ara-pf-overview-img {
  width: 78.4%;                                     /* 设计稿 x128-932 */
  margin: 0 auto 30px;
}
.ara-pf-overview-img img { display: block; width: 100%; }
.ara-pf-legend {
  display: flex;
  gap: 5%;
  padding: 0 8.5% 0 13.8%;                          /* 设计稿左列 x142、右列 x551 */
}
.ara-pf-legend-col { flex: 1 1 0; list-style: none; margin: 0; padding: 0; }
.ara-pf-legend-col li {
  font-family: var(--ara-font-body);
  font-weight: 700;                                  /* 设计真值 20pt Muli-Bold 深蓝 */
  font-size: clamp(15px, 1.4vw, 20px);
  color: var(--ara-navy);
  margin-bottom: 8px;
}
.ara-pf-legend-col li span { font-weight: 400; margin-right: 4px; }

/* ---------- 4. 三个交替图文块 ---------- */
.ara-pf-features { background: #ebebf1; padding: 0 0 10px; }
.ara-pf-row {
  display: flex;
  align-items: center;
  gap: 8%;
  margin-bottom: 3.0rem;
}
.ara-pf-row-rev { flex-direction: row-reverse; }
.ara-pf-row-img { flex: 0 0 50%; margin: 0; }
.ara-pf-row-img img { display: block; width: 100%; }
.ara-pf-row-text { flex: 1 1 auto; }
.ara-pf-row-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 34px);   /* 设计真值 33.8 / 35.5pt 深蓝 */
  color: var(--ara-navy);
  margin: 0 0 30px;
}
.ara-pf-row-text p {
  font-family: var(--ara-font-body);
  font-size: clamp(14px, 1.4vw, 20px); 
}

/* ---------- 5. Special Features：浅蓝小方块标号列表 ---------- */
.ara-pf-specs { background: #ebebf1; padding: 3.0rem 0; }
.ara-pf-specs-title { margin-bottom: 54px; }
.ara-pf-specs-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 0 0 13.8%;                              /* 设计稿标号方块 x145 */
  max-width: 900px;
}
.ara-pf-specs-list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 1.5vw, 20px);
  margin-bottom: 1.25rem;
}
/* 26x26 浅蓝方块（设计稿 x145-170） */
.ara-pf-specs-list li::before {
  content: '';
  flex: 0 0 auto;
  width: clamp(20px, 1.9vw, 40px);
  height: clamp(20px, 1.9vw, 40px);
  margin-top: 5px;
  background: url(../images/xing.png) no-repeat left 0 / 100% 100%;
}

/* ---------- 6. CTA + 通栏底部大图 ---------- */
.ara-pf-cta {
  position: relative;
  background: #ebebf1;
  text-align: center;
  padding: 20px 0 0;
  overflow: hidden;
}
.ara-pf-cta-kicker {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 47px);     /* 设计真值 35pt 赭红 */
  color: #b75136;
}
.ara-pf-cta-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 47px);     /* 设计真值 35pt 深蓝 #085481 */
  color: #085481;
  margin: 0 0 10px;
}
/* 通栏大图：设计稿满宽铺底，按钮压在图片顶部 */
.ara-pf-cta-media {
  position: relative;
  margin: 2.0rem 0 0;
}
.ara-pf-cta-media img { display: block; width: 100%; }

/* ---------- 第 16 页响应式 ---------- */
@media (max-width: 1080px) {
  .ara-pf-hero { padding: 40px 0 30px; }
  .ara-pf-intro { padding: 40px 0 50px; }
  .ara-pf-h2, .ara-pf-h2-navy { margin-bottom: 36px; }
  .ara-pf-duo { flex-direction: column; }
  .ara-pf-duo-left, .ara-pf-duo-right {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 20px;
  }
  .ara-pf-duo-right { margin-left: 0; }
  .ara-pf-text { margin-bottom: 36px; }
  .ara-pf-lead-navy { margin-bottom: 36px; }
  .ara-pf-overview { padding: 40px 0 50px; }
  .ara-pf-overview-img { width: 100%; }
  .ara-pf-legend { flex-direction: column; gap: 0; padding: 0; }
  .ara-pf-legend-col li { font-size: clamp(14px, 3.4vw, 18px); }
  .ara-pf-row,
  .ara-pf-row-rev { flex-direction: column; gap: 24px; margin-bottom: 50px; }
  .ara-pf-row-img { flex: 0 0 auto; width: 100%; }
  .ara-pf-row-title { margin-bottom: 18px; }
  .ara-pf-specs { padding: 30px 0; }
  .ara-pf-specs-list{
    padding-left: 0;
  }
}

/* ============================================================
   浸没冷却页（设计稿 17. Immersion）
   Immersion —— 前缀 ara-im-
   深色 hero → 浅灰 Key Benefits → 深色三种方案 → 深色 CTA
   ============================================================ */

/* ---------- 1. HERO：深色底 + 左出血大图 + 右侧竖图 ---------- */
.ara-im-hero {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 3.0rem 0;
}
.ara-im-eyebrow {
  font-family: var(--ara-font-head);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 25px);   /* 设计真值 23pt */
  color: #fff;
  margin-bottom: 6px;
}
.ara-im-title {
  font-family: var(--ara-font-head);
  font-weight: 900;
  font-size: clamp(34px, 5.7vw, 64px);   /* 设计真值 58.2pt */
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px;
}
.ara-im-tagline {
  font-family: var(--ara-font-sub);
  font-weight: 400;
  font-size: clamp(15px, 2vw, 21px);     /* 设计真值 20pt Rubik-Regular */
  color: #fff;
  margin: 0 0 26px;
}
/* 双图：左图向左出血（设计稿 x-264→763，约 126% 容器宽），
   右图竖版绝对定位在右上（设计稿 x585-901，约 39% 容器宽） */
.ara-im-hero-media { position: relative; margin-bottom: 30px; }
.ara-im-hero-left {
  width: 126%;
  margin: 0 0 0 -26%;
}
.ara-im-hero-left img { display: block; width: 100%; }
.ara-im-hero-right {
  position: absolute;
  right: 0;
  top: 2%;
  width: 39%;
  margin: 0;
}
.ara-im-hero-right img { display: block; width: 100%; }
/* 两列正文：设计稿左列 mid 291.7 / 右列 mid 747 */
.ara-im-hero-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 11%;
  width: 78%;
  margin: 0 auto;
}
.im-hero-card{
  text-align: center;
  font-size: clamp(14px, 1.4vw, 20px);
}
.im-hero-card img{
  margin-bottom: 1.0rem;
}
/* 浅蓝标语：Plug In. Submerge. Perform.（中间为斜体） */
.ara-im-slogan {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 25px);   /* 设计真值 25pt 浅蓝 */
  color: var(--ara-sky, #80c2d7);
  text-align: center;
  margin: 3.0rem 0 0;
}
.ara-im-slogan em { font-style: italic; }

/* ---------- 2. Key Benefits：两列 6 组 ---------- */
.ara-im-benefits { background: #ebebf1; padding: 3.0rem 0; }
.ara-im-h2 {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 47px);     /* 设计真值 35pt 深蓝 */
  color: var(--ara-navy);
  text-align: center;
  margin: 0 0 66px;
}
.ara-im-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4%;
  width: 88%;
  margin: 0 auto;
}
.ara-im-benefit { text-align: center; margin-bottom: 62px; font-size: clamp(14px, 1.4vw, 20px);}
.ara-im-benefit h3 {
  font-size: clamp(20px, 2.8vw, 30px);   /* 设计真值 30pt 赭红 */
  color: #b75136;
  margin: 0 0 1.0rem;
}

.ara-im-benefits-foot {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-style: italic;                     /* 设计真值 35pt Rubik-BoldItalic 深蓝 */
  font-size: clamp(26px, 3.6vw, 42px);
  color: var(--ara-navy);
  text-align: center;
  margin: 20px 0 0;
}

/* ---------- 3. 三种浸没方案：左列表 + 右侧出血大图 ---------- */
.ara-im-types {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 3.0rem 0;
}
.ara-im-types-title {
  color: #fff;
}
.ara-im-types-row { display: flex; align-items: flex-start; }
.ara-im-types-list {
  flex: 0 0 45%;
  padding: 0 0 0 10%;                     /* 设计稿标号方块 x113 */
}
.ara-im-types-list li {
  position: relative;
  padding-left: 42px;
  margin-bottom: 56px;
}
/* 26x26 浅蓝方块（设计稿 x113-139） */
.ara-im-types-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 26px;
  height: 26px;
 background: url(../images/xing.png) no-repeat left 0 / 100% 100%;
}
.ara-im-types-list h3 {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 21px);   /* 设计真值 20pt Rubik-Bold 浅蓝 */
  color: var(--ara-sky, #80c2d7);
  margin: 0 0 12px;
}
.ara-im-types-list p {
  font-family: var(--ara-font-body);
  font-size: clamp(14px, 1.6vw, 17px);   /* 设计真值 16pt 白色 */
  line-height: 1.5;
  color: #fff;
  margin: 0;
}
/* 右图：贴容器右缘（原 23% 相对容器出血在 <1920 屏会横向溢出，改为安全对齐） */
.ara-im-types-img {
  flex: 1 1 auto;
  margin: 0;
}
.ara-im-types-img img { display: block; width: 100%; }

/* ---------- 4. CTA ---------- */
.ara-im-cta {
  background: var(--ara-ink, #202022);
  color: #fff;
  text-align: center;
}
.ara-im-cta-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 25px);   /* 设计真值 23pt 赭红 */
  color: #b75136;
  margin-bottom: 1.5rem;
}
.ara-im-cta-desc,.ara-pf-cta-desc  {
  font-size: clamp(14px, 1.9vw, 20px);
  margin: 0 auto 1.5rem;
}
.ara-pf-cta .ara-btn,.ara-im-cta .ara-btn {  
  background: var(--ara-sky, #80c2d7);
  color: #fff;
  border-color: var(--ara-sky, #80c2d7);
}
.ara-pf-cta .ara-btn:hover,.ara-im-cta .ara-btn:hover {
  background: #9fd4e6;
  border-color: #9fd4e6;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 第 17 页响应式 ---------- */
@media (max-width: 1080px) {
  .ara-im-hero { padding: 40px 0 30px; }
  .ara-im-hero-left { width: 100%; margin-left: 0; }
  .ara-im-hero-right {
    position: static;
    width: 60%;
    margin: 20px auto 0;
  }
  .ara-im-hero-cols { grid-template-columns: 1fr; width: 100%; row-gap: 24px; }
  .ara-im-hero-cols p { text-align: center; }
  .ara-im-slogan { margin-top: 40px; padding-bottom: 44px; }

  .ara-im-benefits { padding: 40px 0 50px; }
  .ara-im-h2 { margin-bottom: 36px; }
  .ara-im-benefits-grid { grid-template-columns: 1fr; width: 100%; }
  .ara-im-benefit { margin-bottom: 40px; }
  .ara-im-benefits-foot { font-size: clamp(20px, 5vw, 28px); margin-top: 10px; }

  .ara-im-types { padding: 44px 0 60px; }
  .ara-im-types-title { margin-bottom: 36px; }
  .ara-im-types-row { flex-direction: column; }
  .ara-im-types-list { flex: 0 0 auto; width: 100%; padding-left: 0px; }
  .ara-im-types-list li { margin-bottom: 36px; }
  .ara-im-types-img { margin: 0; width: 100%; }

  .ara-im-cta { padding-bottom: 70px; }
  .ara-im-cta-title { margin-bottom: 20px; }
  .ara-im-cta-desc { margin-bottom: 30px; }
}

/* ============================================================
   管路产品页（设计稿 11. Manifolds and Loops，第十一页：管路页）
   Secondary Loop Products —— 全页深色底 #202022
   前缀：ara-mf-（与冷板/预制/浸没页共用 product.css）
   换算锚点：16pt Muli ≈ 17px；35pt Rubik-Bold ≈ clamp(30px,4vw,47px)
   ============================================================ */

/* ---------- 1. HERO：Products 眉标 + 58.2pt 大标题 ---------- */
.ara-mf-hero {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 56px 0 46px;
}
.ara-mf-eyebrow {
  font-family: var(--ara-font-head);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 25px);   /* 设计真值 23pt */
  color: #fff;
  margin-bottom: 6px;
}
.ara-mf-title {
  font-family: var(--ara-font-head);
  font-weight: 900;
  font-size: clamp(34px, 5.7vw, 64px);   /* 设计真值 58.2pt Roboto-Bold */
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
}

/* ---------- 2. MANIFOLDS AND PIPING ---------- */
.ara-mf-piping {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 5.0rem 0 0px;
}
.ara-mf-h2 {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 47px);     /* 设计真值 35pt Rubik-Bold */
  color: var(--ara-sky, #80c2d7);
  margin: 0 0 34px;
}
/* 车间大图：设计稿居中约占 75% 版心宽 */
.ara-mf-piping-heroimg {
  width: 75%;
  margin: 0 auto 30px;
}
.ara-mf-piping-heroimg img { display: block; width: 100%; }
/* 居中导语：块宽约 56%（设计稿 x200-768） */
.ara-mf-piping-lead {
  max-width: 680px;
  margin: 0 auto 1.0rem;
  font-size: clamp(15px, 2vw, 21px);  
  text-align: center;
  color: #fff;
}
/* 机柜管路宽图：设计稿居中约占 64% 版心宽（x184-841） */
.ara-mf-piping-loopimg {
  width: 64%;
  margin: 0 auto 60px;
}
.ara-mf-piping-loopimg img { display: block; width: 100%; }
/* 左对齐正文：左边距约 16% 版心（设计稿 x165） */
.ara-mf-piping-text {
  margin-left: 10.5%;
  max-width: 690px;                       /* 设计稿 x165-839 ≈ 66% */
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2.1vw, 22px);    /* 设计真值 21pt Muli */
  line-height: 1.4;
  color: #fff;
}
.ara-mf-piping-text p { margin: 0 0 30px; }
.ara-mf-piping-text p:last-child { margin-bottom: 0; }

/* ---------- 3. QUICK SHIP PIPING SYSTEMS：左文右图 ---------- */
.ara-mf-quickship {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 3.0rem 0;
}
.ara-mf-quickship .ara-mf-h2 { margin-left: 6.5%; }  /* 设计稿标题 x124，比版心略缩进 */
.ara-mf-quickship-row {
  display: flex;
  align-items: center;
  gap: 8%;
}
/* 左列文字：约 25% 版心宽（设计稿 x124-383） */
.ara-mf-quickship-text {
  flex: 0 0 35%;
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2.1vw, 22px);   
  color: #fff;
}

/* 右图：约 55% 宽、贴向右侧（设计稿 x435-1004） */
.ara-mf-quickship-img {
  flex: 1 1 auto;
}
.ara-mf-quickship-img img { display: block; width: 100%; }

/* ---------- 4. QUICK DISCONNECTS：左图右文 ---------- */
.ara-mf-qd {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 50px 0 0;
}
.ara-mf-qd .ara-mf-h2 { margin-left: 6.5%; }
.ara-mf-qd-row {
  display: flex;
  align-items: center;
  gap: 6.5%;
}
/* 左图：约 37.5% 版心宽（设计稿 x126-510） */
.ara-mf-qd-img {
  flex: 0 0 37.5%;
  margin-left: 6.5%;
}
.ara-mf-qd-img img { display: block; width: 100%; }
/* 右侧文字：约 27% 版心宽（设计稿 x578-853） */
.ara-mf-qd-text {
  flex: 0 0 28%;
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2.1vw, 22px);    /* 设计真值 21pt */
  line-height: 1.4;
  color: #fff;
}
.ara-mf-qd-text p { margin: 0; }
/* 底部居中小标题（设计真值 25pt Rubik-Bold 浅蓝，y3017） */

.ara-mf-qd-sub {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 25px);      /* 设计真值 25pt */
  color: var(--ara-sky, #80c2d7);
  text-align: center;
  margin: 3.0rem 0 0;
}

/* ---------- 5. 产品系列说明：左标题 + 右窄栏正文 ---------- */
.ara-mf-series {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 40px 0 120px;
}
.ara-mf-series-row {
  display: flex;
  align-items: flex-start;
}
/* 左标题：21pt Muli-Bold（设计稿 x180 起） */
.ara-mf-series-title {
  flex: 0 0 34%;
  margin: 0 0 0 12%;
  font-family: var(--ara-font-body);
  font-weight: 700;
  font-size: clamp(15px, 2.1vw, 22px);    /* 设计真值 21pt */
  color: #fff;
}
/* 右窄栏正文：约 24% 版心宽（设计稿 x360-608） */
.ara-mf-series-text {
  flex: 0 0 25%;
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2.1vw, 22px);
  line-height: 1.4;
  color: #fff;
}
.ara-mf-series-text p { margin: 0; }

/* ---------- 6. CTA：赭红标语 + 浅蓝标题 + 胶囊按钮 ---------- */
.ara-mf-cta {
  background: var(--ara-ink, #202022);
  color: #fff;
  text-align: center;
  padding: 66px 0 66px;                   /* 设计稿按钮下方留白约 220pt */
}
/* "Close your loop." 设计真值 35pt #b75136 */
.ara-mf-cta-kicker {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: 2.125rem;
  color: #b75136;
}
.ara-mf-cta-title {
  font-family: var(--ara-font-sub);
  font-weight: 700;
  font-size: 2.125rem;
  color: var(--ara-sky, #80c2d7);
  line-height: 1.28;
  margin: 0 0 32px;
}
.ara-mf-cta-desc {
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2vw, 21px);      /* 设计真值 20pt */
  line-height: 1.5;
  max-width: 730px;
  margin: 0 auto 40px;
  color: #fff;
}
/* 浅蓝胶囊按钮（设计稿 223x52pt，居中） */
.ara-mf-cta .ara-btn {
  font-family: var(--ara-font-sub);
  font-size: clamp(13px, 1.4vw, 15px);    /* 设计真值 14pt */
  font-weight: 700;
  background: var(--ara-sky, #80c2d7);
  color: #fff;
  border-color: var(--ara-sky, #80c2d7);
  padding: 17px 66px;
  border-radius: 100px;
}
.ara-mf-cta .ara-btn:hover {
  background: #9fd4e6;
  border-color: #9fd4e6;
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- 响应式（≤860px：所有多列改纵向堆叠） ---------- */
@media (max-width: 1080px) {
  .ara-mf-hero { padding: 40px 0 30px; }

  .ara-mf-piping { padding-bottom: 60px; }
  .ara-mf-piping-heroimg,
  .ara-mf-piping-loopimg { width: 100%; }
  .ara-mf-piping-lead { max-width: 100%; }
  .ara-mf-piping-text { margin-left: 0; }

  .ara-mf-quickship .ara-mf-h2,
  .ara-mf-qd .ara-mf-h2 { margin-left: 0; }

  .ara-mf-quickship-row,
  .ara-mf-qd-row,
  .ara-mf-series-row {
    flex-direction: column;
    gap: 28px;
  }
  .ara-mf-quickship-text,
  .ara-mf-qd-img,
  .ara-mf-qd-text,
  .ara-mf-series-title,
  .ara-mf-series-text {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0;
  }
  .ara-mf-qd-img { max-width: 420px; }

  .ara-mf-qd-sub { margin-top: 48px; padding-bottom: 48px; }
  .ara-mf-series { padding-bottom: 70px; }
  .ara-mf-cta { padding: 50px 0 110px; }
}

/* ============================================================
   In-Rack CDU 产品图轮播（设计稿：主图 + 三张缩略图 + 左右箭头）
   前缀：ara-cdu-p-gallery-* / ara-cdu-p-thumbs
   ============================================================ */
.ara-cdu-p-gallery {
  width: 100%;
  overflow: hidden;   /* 裁剪轮播 slides，防止图片原始尺寸撑破布局 */
}
.ara-cdu-p-gallery .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 兜底约束：slide 恒等于容器宽度，覆盖 Swiper 初始化异常时
     slide 被图片原始宽度（如 3288px）撑开的问题 */
  width: 100% !important;
  max-width: 100%;
  flex-shrink: 0;
}
.ara-cdu-p-gallery .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -0.5rem;
}

/* 缩略图条：箭头 + 3 张缩略图 */
.ara-cdu-p-gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 46px);
  margin-top: -0.5rem;
}
.ara-cdu-p-thumbs {
  width: clamp(160px, 22vw, 330px);
  flex: 0 0 auto;
  overflow: hidden;
}
.ara-cdu-p-thumbs .swiper-slide {
  cursor: pointer;
  opacity: .55;
  transition: opacity .3s ease;
}
.ara-cdu-p-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(128, 194, 215, .45);
  transition: outline-color .3s ease;
}
.ara-cdu-p-thumbs .swiper-slide:hover { opacity: .85; }
.ara-cdu-p-thumbs .swiper-slide.is-active { opacity: 1; }
.ara-cdu-p-thumbs .swiper-slide.is-active img {
  outline-color: var(--ara-sky, #80c2d7);
}

/* 左右箭头：白色实心三角（用 border 绘制，便于换色与缩放） */
.ara-cdu-p-gallery-prev,
.ara-cdu-p-gallery-next {
  flex: 0 0 auto;
  position: relative;
  width: clamp(34px, 4.2vw, 62px);
  height: clamp(34px, 4.2vw, 62px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ara-cdu-p-gallery-prev::before,
.ara-cdu-p-gallery-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid #fff;
  border-width: clamp(14px, 1.75vw, 20px);
}
.ara-cdu-p-gallery-prev::before {
  border-left-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-left: calc(clamp(14px, 1.75vw, 20px) / 2);
}
.ara-cdu-p-gallery-next::before {
  border-right-width: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  margin-left: calc(clamp(14px, 1.75vw, 20px) / -2);
}
.ara-cdu-p-gallery-prev:hover::before,
.ara-cdu-p-gallery-next:hover::before { border-color: var(--ara-sky, #80c2d7); }
.ara-cdu-p-gallery-prev:hover::before {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.ara-cdu-p-gallery-next:hover::before {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.ara-cdu-p-gallery-prev.swiper-button-disabled,
.ara-cdu-p-gallery-next.swiper-button-disabled {
  opacity: .35;
  cursor: default;
}

/* ---------- 响应式（≤860px：缩略图缩小，箭头略收） ---------- */
@media (max-width: 1080px) {
  .ara-cdu-p-gallery-nav { gap: 14px; }
  .ara-cdu-p-thumbs { width: 58%; }
}

/* ============================================================
   Manifold 页 hero 车间图轮播（设计稿 11：hero 改为 swiper 轮播）
   轮播控件参照 Industries 页 ind-prod-nav（箭头 + 分页器），
   本页为深色底，颜色按 --ara-sky 适配以保证可见性
   ============================================================ */
.ara-mf-piping-heroimg { position: relative; }
.ara-mf-hero-swiper {
  width: 100%;
  overflow: hidden;   /* 裁剪 slides，防止图片原始宽度撑破布局 */
}
.ara-mf-hero-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100%;
  flex-shrink: 0;
}
.ara-mf-hero-swiper .swiper-slide img { display: block; width: 100%; height: auto; }

/* 轮播控件：与 Industries 页 ind-prod-nav 相同的箭头/分页样式（深色底适配）。
   箭头叠放在图片左右两侧、垂直居中；分页圆点保持在图片下方居中。 */
.ind-prod-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(20px, 3.4vw, 48px);
}
.ind-prod-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 3.6vw, 52px);
  height: clamp(40px, 3.6vw, 52px);
  padding: 0;
  border: 1px solid rgba(128, 194, 215, .45);
  border-radius: 50%;
  background: transparent;
  color: var(--ara-sky, #80c2d7);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.ind-prod-arrow--prev { left: clamp(8px, 2vw, 18px); }
.ind-prod-arrow--next { right: clamp(8px, 2vw, 18px); }
.ind-prod-arrow:hover { background: var(--ara-sky, #80c2d7); border-color: var(--ara-sky, #80c2d7); color: #fff; }
.ind-prod-arrow.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }

.ind-prod-pagination.swiper-pagination-bullets { position: static; bottom: auto; }
.ind-prod-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  opacity: 1;
  transition: width .25s ease, border-radius .25s ease, background .25s ease;
}
.ind-prod-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 6px;
  background: var(--ara-sky, #80c2d7);
}

/* ============================================================
   Manifold 页 Pumps and RPUs（设计稿 11：左文右图，同 Quick Ship）
   前缀：ara-mf-pumps-*
   ============================================================ */
.ara-mf-pumps {
  background: var(--ara-ink, #202022);
  color: #fff;
  padding: 50px 0 60px;
}
.ara-mf-pumps .ara-cp-h2 { margin-left: 6.5%; }
.ara-mf-pumps-row {
  display: flex;
  align-items: flex-start;
  gap: 5%;
}
/* 左列文字：约 26% 版心宽 */
.ara-mf-pumps-text {
  flex: 0 0 26%;
  margin-left: 6.5%;
  font-family: var(--ara-font-body);
  font-size: clamp(15px, 2.1vw, 22px);    /* 设计真值 21pt */
  line-height: 1.4;
  color: #fff;
}
.ara-mf-pumps-text p { margin: 0; }
/* 右图：约 55% 宽、贴向右侧 */
.ara-mf-pumps-img {
  flex: 1 1 auto;
  margin: 0 2% 0 0;
}
.ara-mf-pumps-img img { display: block; width: 100%; }

/* ---------- 响应式（≤1080px：Pumps 改纵向堆叠） ---------- */
@media (max-width: 1080px) {
  .ara-mf-pumps .ara-cp-h2 { margin-left: 0; }
  .ara-mf-pumps-row {
    flex-direction: column;
    gap: 28px;
  }
  .ara-mf-pumps-text,
  .ara-mf-pumps-img {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0;
  }
}