/* 上海薯瓜信息科技 */
.company-page {
  background: #fff;
  color: #171717;
}
.company-wrap {
  width: 76%;
  margin: 0 auto;
  padding: 3.6vw 0 5.5vw;
}
.company-wrap--after-toolbar {
  padding-top: 2.4vw;
}
.company-crumb {
  font-size: clamp(10px, 0.75vw, 14px);
  margin-bottom: 0.7vw;
}
.company-toolbar {
  position: sticky;
  top: var(--design-header-height);
  z-index: 55;
  background: #fff;
  transition: top 0.38s;
}
.header-collapsed .company-toolbar {
  top: 0;
}
.company-toolbar-inner {
  width: 76%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
  min-height: var(--design-section-nav-height, 4.2vw);
}
.company-toolbar .company-crumb {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}
.company-toolbar .company-nav {
  position: static;
  flex: 1;
  justify-content: flex-end;
  gap: clamp(12px, 1.8vw, 36px);
  min-height: auto;
  background: transparent;
  transition: none;
}
.company-nav {
  position: sticky;
  top: var(--design-header-height);
  z-index: 55;
  display: flex;
  justify-content: center;
  gap: 4.5vw;
  background: #fff;
  border-bottom: 0;
  min-height: 4.2vw;
  transition: top 0.38s;
}
.header-collapsed .company-nav {
  top: 0;
}
.company-nav a {
  display: flex;
  align-items: center;
  font-size: clamp(10px, 0.8vw, 15px);
  color: #999;
  position: relative;
  padding: 1.4vw 0;
  white-space: nowrap;
}
.company-nav a.active {
  color: #171717;
}
.company-nav a.active:before {
  content: '';
  height: 2px;
  background: #171717;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.company-section {
  margin-bottom: 4.5vw;
  scroll-margin-top: 7vw;
}
.company-section:last-child {
  margin-bottom: 0;
}
.company-heading {
  font-size: clamp(13px, 1.3vw, 25px);
  font-weight: 400;
  line-height: 1.4;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 1.2vw;
  margin: 0 0 1.3vw;
}
.company-banner {
  aspect-ratio: 16/9;
  position: relative;
  color: #fff;
}
.company-banner-copy {
  position: absolute;
  left: 4.8%;
  bottom: 7%;
  width: 65%;
}
.company-banner h2 {
  font-size: clamp(20px, 2vw, 38px);
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 0.6vw;
}
.company-banner p {
  font-size: clamp(12px, 1.15vw, 21px);
  line-height: 1.6;
  margin: 0 0 1.2vw;
}
.philosophy-banner {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.philosophy-banner.is-dragging {
  cursor: grabbing;
}
.philosophy-banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 0.45s ease;
  will-change: transform;
}
.philosophy-banner.is-dragging .philosophy-banner-track {
  transition: none;
}
.philosophy-banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  /* 定位上下文：slide 内那层 absolute 文案（.absolute left-[5%] top-[20%]）必须挂在自己这张 slide 上。
     若这里不声明 position，最近的定位祖先是 .philosophy-banner-track，
     三张 slide 的文案会落到同一个坐标上叠成一团（表现为「文案都挤在第一张」）。 */
  position: relative;
  background-position: center 45% !important;
}
.philosophy-banner .company-banner-copy {
  z-index: 2;
  left: 5%;
  bottom: 11%;
  width: 56%;
  pointer-events: none;
}
.philosophy-banner .company-banner-copy h2 {
  /* 标注：Montserrat Regular 60（设计基准 1440 → 60/1440 = 4.167vw） */
  font-size: clamp(24px, 4.167vw, 60px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 0.55vw;
}
.philosophy-banner .company-banner-copy h3 {
  /* 标注：Montserrat Light 36（36/1440 = 2.5vw） */
  font-size: clamp(15px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.35;
  margin: 0 0 0.85vw;
}
.philosophy-banner .company-banner-copy p {
  /* 标注：Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  max-width: 46em;
}
/* 间距用双类名：`.company-dots`（246 行）在后面又声明了 gap:1.2vw，单类会被它覆盖 */
.company-dots.philosophy-banner-dots {
  gap: 0.6vw;
}
.philosophy-banner-dots {
  z-index: 3;
  right: 4.5%;
  bottom: 8%;
}
/*
 * 圆点样式与 Group Company 完全一致（.company-banner-dots .dot）：
 * 常态 10px 圆、选中 38px 白条。哲学区容器没挂 company-banner-dots 类
 * （挂了会把 bottom 从 8% 改成 6%，动到位置），所以这里按同一组数值写一遍。
 */
.philosophy-banner-dots .dot {
  appearance: none;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}
.philosophy-banner-dots .dot.selected {
  width: 38px;
  background: #fff;
}
.philosophy-banner-dots .dot:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .philosophy-banner-track {
    transition: none;
  }
}
.company-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.9em;
  background: #fff;
  color: #222;
  font-size: clamp(10px, 0.85vw, 16px);
  line-height: 1.7;
}
.company-banner .company-pill {
  border-color: #fff;
  background: transparent;
  color: #fff;
}
.company-banner .company-pill--solid {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.company-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vw 1.2vw;
  margin-top: 0.4vw;
}
.company-dots {
  position: absolute;
  right: 4.5%;
  bottom: 6%;
  display: flex;
  align-items: center;
  gap: 1.2vw;
}
.company-dots span {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #ffffff70;
}
.company-dots span:nth-child(2) {
  width: 25px;
  background: #fff;
}
.company-world {
  aspect-ratio: 16/9;
  background: #050505 url('https://file.colorsled.com/pro/images/media/company/world.jpg') center
    top/100% auto no-repeat;
  color: #fff;
  position: relative;
  margin-bottom: 3.2vw;
}
.company-world-content {
  position: absolute;
  bottom: 15%;
  left: 5%;
  right: 5%;
  text-align: center;
}
.company-world h1 {
  font-weight: 400;
  font-size: clamp(20px, 2vw, 38px);
  margin: 0 0 2vw;
}
.company-world-tabs {
  display: flex;
  justify-content: center;
  gap: 3vw;
}
.company-world-tabs .company-pill {
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #fff;
}
.company-world-tabs button {
  border: 1px solid #aaa;
  background: transparent;
  color: #fff;
  border-radius: 30px;
  padding: 0.2em 0.8em;
  font-size: clamp(10px, 0.9vw, 17px);
  line-height: 1.6;
}
.company-world-tabs button.active {
  background: #fff;
  color: #222;
}
.company-location {
  display: grid;
  grid-template-columns: 60% 31%;
  gap: 9%;
  margin-bottom: 1.2vw;
}
.company-location img {
  width: 100%;
  aspect-ratio: 1.895;
  object-fit: cover;
}
.company-location h2 {
  font-size: clamp(13px, 1.3vw, 25px);
  font-weight: 400;
  border-bottom: 1px solid #ddd;
  line-height: 1.35;
  margin: 0 0 1.3vw;
  padding-bottom: 1.2vw;
}
.company-location p {
  font-size: clamp(12px, 1.05vw, 20px);
  margin: 0 0 2vw;
}
.company-location address {
  font-size: clamp(11px, 1.1vw, 18px);
  font-style: italic;
  line-height: 1.9;
}
.company-location:last-child {
  margin-bottom: 0;
}
.support-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8vw;
  margin-bottom: 4.5vw;
}
.support-tiles a {
  aspect-ratio: 1;
  background: #ccc;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: clamp(18px, 2vw, 38px);
}
.support-intro {
  margin-bottom: 5vw;
}
.support-intro p,
.support-grid p {
  font-size: clamp(11px, 1.1vw, 18px);
  line-height: 1.6;
  margin: 0;
}
.support-grid {
  display: grid;
  grid-template-columns: 47% 47%;
  column-gap: 6%;
  row-gap: 3vw;
}
.support-grid h3 {
  font-weight: 400;
  font-size: clamp(11px, 1.1vw, 18px);
  margin: 0;
}
.support-placeholder {
  /* background: #ccc; */
  aspect-ratio: 1.6;
}
.support-description p {
  white-space: pre-line;
  margin-bottom: 1.4vw;
}
.support-description p + p {
  font-style: italic;
}
.support-section {
  margin-bottom: 6vw;
  scroll-margin-top: 7vw;
}
.support-section .company-heading {
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 21px);
  padding-bottom: 0.7vw;
}
.support-section .company-heading span {
  display: block;
  font-weight: 400;
}
.company-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.5vw;
}
/* ---------- 三卡容器的命名（两个模块共用同一套基础栅格） ----------
 * .company-detail-grid 历史上被两个语义无关的模块复用：
 *   ① R&D Strength 三卡（模板 class="company-detail-grid strength-grid"）
 *   ② Manufacturing System 三卡（模板 class="company-detail-grid manufacturing-grid"）
 * 两者图片、标题、描述的结构并不一样，却共用下面那几条 `.company-detail-grid h3 / p` 规则，
 * 导致改任一处都会连累另一处。这里把基础规则降为「纯栅格 + 字号」，
 * 各自的间距/描述样式交给下面的专属类名，以后要调互不影响。
 *
 * ⚠ 关于 margin：原来这里**没写** margin，实际生效的是浏览器默认的 `margin: 1em 0`，
 * 也就是「上下外边距 = 1em = clamp 出来的字号」。本次把它**显式写成 1em**——
 * 数值与之前完全一致（视觉零变化），但不再依赖浏览器默认值。
 * 想让间距真正脱离字号联动，请在各自的 .strength-grid / .manufacturing-grid
 * 里显式覆盖（本轮刻意不做，避免改视觉）。
 */
.company-detail-grid h3 {
  /* 三卡区标题（Manufacturing System 等）。
     斜率由 1.667vw 调到 1.4vw：1.667vw@1440 正好顶到 clamp 上限 24px，
     在1440~1714px 之间被「钉」在上限、放大屏幕不再增长，观感偏大；
     1.4vw@1440 = 20.16px，随视口平滑缩放。上限 24px 保留（1714px 以上才到顶）。 */
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 400;
  margin: 1em 0;
}
.company-detail-grid p {
  /* 标注：卡片描述 — Montserrat Light Italic 16（16/1440 = 1.111vw） */
  font-size: clamp(11px, 1.111vw, 16px);
  font-weight: 300;
  font-style: italic;
  margin: 1em 0;
}
.manufacturing-lead {
  /* 标注：Manufacturing System 引导段落 — Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.55;
  color: #333;
  margin: 0.2vw 0 1.6vw;
  max-width: 72%;
}
/* ---------- Manufacturing System 三卡（about 页）专属 ----------
 * 这个类名此前不存在（模板只挂了裸的 .company-detail-grid），现在补上，
 * 把该模块的间距从「和 R&D Strength 共用通用规则」收回到自己名下。
 *
 * ⚠ 字号 / 字重 / 斜体这些「基础属性」仍走通用规则（与 R&D Strength 相同），
 *   本区块负责把它与页面其它三卡区块对齐到 **Full-Chain Control（.chain-features）为基准**：
 *   标题 line-height 1.35、margin 0 0 0.7vw；列表 line-height 1.65、颜色 #444。
 *   之前的值（line-height 1.25 继承全局 h3、margin 1em 0、列表 1.111vw/#333）
 *   与基准块差一截—— 1440px 下列表 15.8px vs 12.5px，700px 下标题 16px vs 15px。
 */
.manufacturing-grid h3 {
  line-height: 1.35;
  margin: 0 0 0.7vw;
}
.manufacturing-grid p {
  line-height: 1.65;
  color: #444;
}
/* 卡片要点列表：向 .chain-features p 看齐（字号斜率 0.88vw、行高 1.65、颜色 #444）。
   标题 margin-bottom 已经给出 0.7vw 的间距，这里的 margin-top 归零，避免叠加成两倍。 */
.manufacturing-grid .about-base-list {
  margin-top: 0;
  font-size: clamp(11px, 0.88vw, 16px);
  line-height: 1.65;
  color: #444;
}
/* 条目间距交给行高，不再额外加 0.15em —— 否则比基准块（段落靠 line-height 分行）明显更松。 */
.manufacturing-grid .about-base-list li + li {
  margin-top: 0;
}
.company-detail-image {
  width: 100%;
  display: block;
}
.company-detail-placeholder {
  /* 标注"留出间距"：占位图与下方标题之间留白（原为 0，标题紧贴图片）。 */
  margin-bottom: 1.8vw;
}
/* ---------- Certification 徽标墙（about 页） ----------
 * 量参考图（616×257 截图）：每行图标宽 46 / 间距 18 / 行距 26 → 图标 : 间距 ≈ 2.56 : 1，
 * 按版心 940 等比放大即 图标 100 / 间距 40 / 行距 56（与原实现 940/7 列的格子尺寸一致）。
 * 三行的中心线重合 → 两行都 justify-content: center。
 * 前 4 个是体系认证圆章（ISO 9001 / 14001 / 45001 / IATF 16949）：宽度与方块相同、
 * 高度按各自原图比例（14001 原图 284×360，最高），且**底边对齐**（参考图里就是这么对的）；
 * 后 13 个市场认证标本身就是「折角 + 勾」的方块图，排 7 + 6 两行，末行自动居中。
 * 图标都是白稿，底色沿用本模块原来的深色渐变。
 */
.cert-panel {
  /* 16:9 的深色面板里把徽标墙居中：原来这层内容顶在面板上边、下面空一大截 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-wall {
  width: 940px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.cert-wall-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  /* 列距 40、行距 56：参考图里「同一行内」的空隙是 18、三行之间都是 26（≈ 图标宽 0.565 倍），
     所以换行后的行距不能沿用列距，要单独给 row-gap */
  column-gap: 40px;
  row-gap: 56px;
}
.cert-wall-row img {
  width: auto;
  height: 100px;
  display: block;
}
/* 方块图是 1:1 的（原图 178 / 200 两种尺寸），统一装进 100 的方框 */
.cert-wall-row--market img {
  height: 100px;
}
@media (max-width: 1160px) {
  /* 面板高度 = 版心宽 × 9/16，窄屏要跟着收，否则徽标墙会溢出深色面板 */
  .cert-wall {
    gap: 42px;
  }
  .cert-wall-row {
    column-gap: 30px;
    row-gap: 42px;
  }
  .cert-wall-row img {
    height: 76px;
    width: auto;
  }
  .cert-wall-row--market img {
    height: 76px;
  }
}
@media (max-width: 700px) {
  /* 手机上 16:9 的面板装不下一堵 logo 墙：面板改成随内容撑高 */
  .cert-panel {
    aspect-ratio: auto;
    padding: 28px 16px;
  }
  .cert-wall {
    gap: 26px;
  }
  .cert-wall-row {
    column-gap: 18px;
    row-gap: 26px;
  }
  .cert-wall-row img {
    width: 52px;
  }
  .cert-wall-row--market img {
    height: 52px;
  }
}
/* ---------- R&D Strength 三卡的图片区（about 页） ----------
 * 图片一律 width:100% + height:auto：整张显示完整、高度跟着图片比例走（这批图是 2.133:1），
 * 不再固定 16:9，也不再裁切。外框 #ccc。
 * 多图的卡在这里横向拖拽 / 点圆点 / 点两侧箭头切换；单图卡（.is-single）就是一张铺平的图。
 */
/* ---------- R&D Strength 三卡（about 页）专属 ----------
 * 这个类名模板里早就挂了，但 CSS 里一直没定义（死类名）—— 说明当初本打算做模块隔离，
 * 写到一半没落地，于是三张卡只能裸用通用规则、和 Manufacturing System 互相牵制。
 * 现在补上定义。同样**只声明通用规则已有的值**，视觉零变化；
 * 今后调这张卡的间距在这里写，不会波及另一处。
 * 注意标题上边距仍由模板的 Tailwind `mb-[0.7vw]` 控制（工具类作用在元素自身，优先级高于这里）。
 */
.strength-grid h3 {
  margin: 1em 0;
}
.strength-grid p {
  margin: 1em 0;
}
.strength-media {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  touch-action: pan-y;
  user-select: none;
}
.strength-media:not(.is-single) {
  cursor: grab;
}
.strength-media.is-dragging {
  cursor: grabbing;
}
.strength-media-track {
  display: flex;
  /* flex-start：每张图按自己的比例定高（不拉伸），容器高度取其中最高的一张 */
  align-items: flex-start;
  transition: transform 0.45s ease;
  will-change: transform;
}
.strength-media.is-dragging .strength-media-track {
  transition: none;
}
.strength-media-track img {
  /* flex-basis 100%：每张图正好占满容器宽度；高度 auto 由图片自己撑开 */
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  display: block;
  /* 图片默认是原生可拖拽元素，拖拽手势会被浏览器截走（并抛 pointercancel）；
     模板上还给了 draggable="false"，这里再兜一层（Safari/Firefox 用各自的前缀）。 */
  -webkit-user-drag: none;
  user-select: none;
}
.strength-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* 两个切换箭头常驻可见：不再只在 hover / 键盘聚焦时淡入，任何时候都能直接点切 */
  opacity: 1;
  transition: background 0.2s ease;
}
.strength-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}
.strength-arrow--prev {
  left: 8px;
}
.strength-arrow--next {
  right: 8px;
}
/* 圆点行常驻占位（单图卡也留这一行的高度），三张卡的标题才能落在同一条线上 */
.strength-dots {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 5px;
}
.strength-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfcfcf;
  cursor: pointer;
  transition: background 0.2s ease;
}
.strength-dot.is-active {
  background: #333;
}
.strength-dot:focus-visible {
  outline: 1px solid #333;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .strength-media-track,
  .strength-dot {
    transition: none;
  }
}
/* 这里原来用 ::after 画了个白色圆环、::before 画三角，作为「媒体占位」的静态播放按钮。
   但这个媒体占位全站只在 about 页 Manufacturing System 的三张卡上用到（故已改名
   .manufacturing-media，与所在模块对齐），卡里放的是真实 <video>（TypeDisplay 自己带播放按钮），
   两个按钮会重叠成一个「大圆套小圆」。真实按钮在，装饰按钮直接去掉。 */
.manufacturing-media {
  position: relative;
  /* 原先这里是 .company-detail-placeholder 提供的「图片与下方标题之间留白」（1.8vw）。
     改名时一并搬过来 —— 这层留白是设计要的，不能丢。 */
  margin-bottom: 1.8vw;
}
/* 播放按钮尺寸：Manufacturing 三卡只有 318px 宽（1440 下），
   继承组件默认的 84px 会占掉卡片高度的一半，收到 40~64px。
   顶部 Supply Chain 那条大视频不在此容器内，仍是 84px。
   作用域限定 .manufacturing-grid —— 原来写成 .company-page .company-detail-grid，
   会连 R&D Strength 三卡（虽然没有 video、暂时不显形）一起算进去。 */
.manufacturing-grid .play-icon-box {
  --play-size: clamp(40px, 3.5vw, 64px);
}
.company-page .v5-contact-submit {
  background: #000;
}
.company-page .v5-contact-submit:hover {
  background: #333;
}
@media (max-width: 700px) {
  .company-wrap {
    width: 86%;
    padding: 28px 0 40px;
  }
  .company-wrap--after-toolbar {
    padding-top: 18px;
  }
  .company-toolbar-inner {
    width: 86%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding-top: 12px;
  }
  .company-toolbar .company-crumb {
    white-space: normal;
  }
  .company-toolbar .company-nav {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 24px;
    padding: 0;
    min-height: 48px;
  }
  .company-nav {
    justify-content: flex-start;
    overflow-x: auto;
    gap: 24px;
    padding: 0 7%;
    min-height: 48px;
  }
  .company-nav a {
    font-size: 10px;
    padding: 16px 0;
  }
  .company-section {
    margin-bottom: 32px;
    scroll-margin-top: 60px;
  }
  .company-heading {
    padding-bottom: 12px;
    margin-bottom: 14px;
  }
  .company-banner-copy {
    width: 83%;
  }
  .company-banner p {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .company-banner h2 {
    font-size: 18px;
  }
  .company-dots {
    bottom: 6%;
  }
  .philosophy-banner .company-banner-copy {
    left: 4%;
    width: 88%;
    bottom: 14%;
  }
  .philosophy-banner .company-banner-copy h2 {
    font-size: 20px;
  }
  .philosophy-banner .company-banner-copy h3 {
    font-size: 13px;
  }
  .philosophy-banner .company-banner-copy p {
    font-size: 10px;
    line-height: 1.5;
  }
  .philosophy-banner-dots {
    bottom: 7%;
    right: 4%;
  }
  .company-world {
    aspect-ratio: 1.3;
  }
  .company-world-content {
    bottom: 10%;
    left: 3%;
    right: 3%;
  }
  .company-world h1 {
    font-size: 19px;
    margin-bottom: 16px;
  }
  .company-world-tabs {
    gap: 8px;
    flex-wrap: wrap;
  }
  .company-world-tabs button {
    font-size: 9px;
  }
  .company-location {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 30px;
  }
  .company-location h2 {
    padding-bottom: 10px;
  }
  .company-location address {
    font-size: 12px;
  }
  .support-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 30px;
  }
  .support-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .support-grid > div:nth-child(2) {
    grid-row: 2;
  }
  .support-section {
    margin-bottom: 40px;
    scroll-margin-top: 65px;
  }
  .support-intro {
    margin-bottom: 35px;
  }
  .company-detail-grid {
    grid-template-columns: 1fr;
  }
  .manufacturing-lead {
    max-width: none;
    margin-bottom: 22px;
  }
  .company-page .company-banner {
    min-height: 220px;
  }
}

.detail-title {
  font-size: clamp(20px, 2vw, 38px);
  font-weight: 400;
  margin: 4vw 0 1vw;
  line-height: 1.4;
}
.center {
  text-align: center;
}
.company-page main > section > p {
  font-size: clamp(12px, 1vw, 19px);
  margin: 0 0 1.5vw;
}
.about-overview {
  position: relative;
  color: #fff;
}
.about-overview > img {
  display: block;
  width: 100%;
}
/* 数据叠在照片上方，无底色；每项下方一条等宽直线。 */
.about-stats {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6vw 2vw;
  padding: 2.2vw 8% 2.6vw;
}
.about-stats > div {
  padding-bottom: 0.7vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
.about-stats strong {
  display: block;
  font-weight: 300;
  font-size: clamp(16px, 2vw, 38px);
  line-height: 1.1;
}
.about-stats span {
  font-style: italic;
  font-size: clamp(9px, 0.95vw, 18px);
}
.about-ceo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6%;
  margin-top: 1.5vw;
}
/* 标注：左对齐、段落无缩进——去掉 ol 的左内边距，序号随文内排。 */
.about-ceo-guarantees ol,
.about-ceo-cta ol {
  margin: 0.8vw 0 0;
  padding-left: 0;
  list-style-position: inside;
  font-size: clamp(11px, 0.75vw, 16px);
  font-style: italic;
  line-height: 1.6;
}
.about-ceo-guarantees li,
.about-ceo-cta li {
  margin-bottom: 1vw;
}
/* 标签/链接按标注不加粗。 */
.about-ceo-guarantees strong,
.about-ceo-cta a {
  font-style: italic;
  font-weight: 300;
  color: inherit;
}
.about-ceo-cta a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.about-ceo-cta a:hover {
  opacity: 0.7;
}
.ideal-standard-title,
.company-page h2.detail-title.center,
.company-page h3.detail-title.center {
  display: block;
  justify-content: center;
  width: 100%;
}
/* 标注：IDeaLuMia® Service Standard 1.0 — Montserrat Regular 36（36/1440 = 2.5vw） */
.ideal-standard-title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}
.ideal-principles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4vw;
  margin: 2vw 0 6vw;
  align-items: stretch;
}
.ideal-principles > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0;
}
.ideal-principles strong {
  font-size: 8vw;
  font-weight: 300;
  line-height: 1.3;
}
.ideal-principles h3 {
  /* 标注：Montserrat Regular 24（24/1440 = 1.667vw） */
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 24px);
  min-height: 2.5vw;
}
.ideal-principles p {
  /* 标注：Montserrat Light Italic 16（16/1440 = 1.111vw） */
  font-size: clamp(11px, 0.75vw, 16px);
  font-weight: 300;
  font-style: italic;
  flex: 1;
  margin: 0 0 1.6vw;
}
.ideal-bar {
  display: block;
  width: 100%;
  height: clamp(10px, 1.1vw, 18px);
  margin-top: auto;
  flex-shrink: 0;
}
.about-base-list {
  margin: 0.6vw 0 0;
  padding: 0;
  list-style: none;
  /* 标注：卡片列表项 — Montserrat Light Italic 16（16/1440 = 1.111vw） */
  font-size: clamp(11px, 1.111vw, 16px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.7;
  color: #333;
}
.about-base-list li + li {
  margin-top: 0.15em;
}
.company-page .chain-title {
  display: block;
  width: 100%;
  margin: 4.8vw 0 2.4vw;
  font-size: clamp(20px, 1.85vw, 34px);
  font-weight: 400;
  line-height: 1.35;
}
.chain-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.2vw 2.6vw;
  margin: 0 0 4.2vw;
  align-items: start;
}
.chain-features > div {
  min-width: 0;
  border-top: 1px solid #d0d0d0;
  padding-top: 1.35vw;
}
.chain-features h3 {
  /* 特性标题 — 与 .company-detail-grid h3 / .chain-metrics h3 同为三卡区标题，
     斜率统一 1.4vw（1.667vw@1440 直接顶到 24px 上限，偏大）。 */
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 400;
  margin: 0 0 0.7vw;
  line-height: 1.35;
}
.chain-features p {
  margin: 0;
  font-size: clamp(11px, 0.88vw, 16px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: #444;
}
.workshop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4vw 1.5vw;
  margin: 0;
}
.workshop-grid .support-placeholder {
  background: #c8c8c8;
  aspect-ratio: 1.55;
}
.workshop-grid p {
  margin: 0.7vw 0 0;
  /* 标注：车间名称（01. SMD Encapsulation 等）— Montserrat Regular 24（24/1440 = 1.667vw） */
  font-size: clamp(16px, 1.667vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  color: #171717;
}
.chain-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4vw 1.5vw;
  margin: 3.4vw 0 0;
}
.chain-metrics > div {
  min-width: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.chain-metric-rule {
  width: 100%;
  height: 1px;
  background: #d0d0d0;
  margin: 1.05vw 0 1.35vw;
}
.chain-metrics h3 {
  /* Production Capacity / Delivery — 与上面两块同为三卡区标题，
     斜率统一 1.4vw；字重 / line-height / margin 也同样向 .chain-features h3 对齐。 */
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 0.7vw;
}
.chain-metrics p {
  margin: 0;
  /* 标注：描述项 — Montserrat Light Italic 16
     字号斜率 / 行高 / 颜色均对齐 .chain-features p，否则同一页里两种描述文字大小不一。 */
  font-size: clamp(11px, 0.88vw, 16px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: #444;
}
.history-grid {
  display: grid;
  grid-template-columns: 62% 29%;
  gap: 9%;
  margin-bottom: 4vw;
}
/* 时间轴里的图片贴着自己的标题，不要通用规则给的 1.8vw 留白。
   只作用于 .history-grid 内部 —— 那个 1.8vw 的基础规则仍由另外两个模块各自使用。 */
.history-grid > div > .company-detail-placeholder {
  margin-bottom: 0;
}
.history-grid > div > h3 {
  /* 标注：Montserrat Regular 24（24/1440 = 1.667vw） */
  font-size: clamp(16px, 1.667vw, 24px);
  font-weight: 400;
  line-height: 1.4;
  margin: 2.8vw 0 1vw;
}
.history-grid nav {
  display: flex;
  flex-direction: column;
}
.history-grid button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
  padding: 0.8vw;
  color: #999;
  /* 标注：Montserrat Regular 24（24/1440 = 1.667vw） */
  font-family: inherit;
  font-size: clamp(14px, 1.667vw, 24px);
  font-weight: 400;
}
.history-grid button.active {
  color: #000;
}
.history-grid p {
  /* 标注：Montserrat Light 18（18/1440 = 1.25vw），非斜体 */
  font-size: clamp(12px, 1vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  margin: 0;
  color: #333;
}
.history-group-title {
  /* 标注：Montserrat Regular 36（36/1440 = 2.5vw） */
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  margin-top: 6.5vw;
}
/* SHENZHEN banner — 标注 60 / 36 / 18（60/1440=4.167vw, 36/1440=2.5vw, 18/1440=1.25vw）。
   只为这一张 banner 设字号，避免影响共用 .company-banner 的其它区块。 */
.company-banner--shenzhen h2 {
  font-size: clamp(24px, 4.167vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.company-banner--shenzhen h3 {
  font-size: clamp(15px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.3;
}
/* 覆盖同优先级的 .company-page h3 { font-weight: 400 } */
.company-page .company-banner--shenzhen h3 {
  font-weight: 300;
}
.company-banner--shenzhen p {
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 300;
}
/*
 * Group Company 轮播（about 页）。版式完全沿用上面的 Group Company 那套：
 * .company-banner 的比例/底色 + .company-banner-copy 的位置 + .company-banner--shenzhen 的字号
 * + .company-banner-dots .dot 的圆点。这里只补「轮播必需」的结构 —— 轨道、单张 slide、
 * 裁切与定位上下文，结构写法参考 .philosophy-banner-*，不引入任何新的视觉样式。
 */
.group-banner {
  /* 轨道是 flex 横排的 300% 宽，必须裁掉溢出 */
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.group-banner.is-dragging {
  cursor: grabbing;
}
.group-banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 0.45s ease;
  will-change: transform;
}
.group-banner.is-dragging .group-banner-track {
  transition: none;
}
.group-banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  /* 定位上下文：slide 里的 .company-banner-copy 是绝对定位（left 4.8% / bottom 7%），
     缺了这一行，三张 slide 的文案会一起挂到 .group-banner-track 上、落在同一坐标叠成一团。 */
  position: relative;
}
/*
 * 文字可读性遮罩：白字压在偏亮的城市天际线上（尤其 SHENZHEN 那张的右侧天空）几乎看不清。
 * 两层渐变叠在图片上 —— 底部为主（文案区最暗），左侧辅助（左对齐的长段落）。
 * z-index 0 压在图片上、文案层 group-banner-copy-layer 为 1 在遮罩之上；
 * pointer-events:none 保证不影响拖拽与圆点点击。
 */
.group-banner-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 轻微加深版，变化不大 */
  background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.16) 26%,
      rgba(0, 0, 0, 0) 44%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.17) 26%, rgba(0, 0, 0, 0) 44%);
}
.group-banner-copy-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* 圆点由静态标记改成真的可点按钮：只补按钮默认皮肤，尺寸与配色仍来自 .company-banner-dots .dot */
.group-banner .company-banner-dots .dot {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.group-banner .company-banner-dots .dot:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .group-banner-track {
    transition: none;
  }
}
@media (max-width: 700px) {
  /* 最长的一条（YANGZHOU，约 500 字符）按 .company-page .company-banner 的 230px 放不下、
     文案会被 overflow 裁掉顶部；参考 .philosophy-banner 在同样情况下抬到 280px 的做法，这里给 320px。 */
  .company-page .group-banner {
    height: 320px;
  }
}
/* 3D VR Showroom banner — 标注 60 / 36 / 18（与 SHENZHEN 同规格）。 */
.company-banner--showroom h2 {
  font-size: clamp(24px, 4.167vw, 60px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.company-banner--showroom h3 {
  font-size: clamp(15px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1.3;
}
/* 覆盖同优先级的 .company-page h3 { font-weight: 400 } */
.company-page .company-banner--showroom h3 {
  font-weight: 300;
}
.company-banner--showroom p {
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 300;
}
/* 全站统一的轮播圆点样式（与 POSITION banner 一致），仅静态展示。 */
.company-banner-dots {
  bottom: 6%;
  gap: 0.6vw;
}
.company-banner-dots .dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
}
.company-banner-dots .dot.selected {
  width: 38px;
  background: #fff;
}
.research-section > .detail-title {
  /* 标注：Product Category / R&D Philosophy — Montserrat Regular 36（36/1440 = 2.5vw） */
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 36px);
  margin: 4.5vw 0 1.2vw;
}
.research-section > .detail-title:first-of-type {
  margin-top: 1.5vw;
}
/* 标注：Supply Chain 区块标题 — Montserrat Regular 36（36/1440 = 2.5vw）。
   该区块用 .company-section（非 .research-section），故单独指定。 */
#supply > .detail-title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}
/* 标注：Supply Chain 区块引导段落 — Montserrat Light 18（18/1440 = 1.25vw） */
.company-lead {
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin: 0 0 2vw;
  max-width: 92%;
}
/* 标注：Core Advantages 区块标题 — Montserrat Regular 24（24/1440 = 1.667vw）。
   该区块的唯一 .company-heading，用 ID 精确定位，不影响同页其它分区标题。 */
#advantages > .company-heading {
  font-size: clamp(18px, 1.667vw, 24px);
  font-weight: 400;
}
/* 标注：Core Advantages 段落 — Montserrat Light 18（18/1440 = 1.25vw） */
#advantages > p {
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
}
/* 标注：why 页 Member of LIRC / Silver Member of DIALux / Arc Magazine Advertising
   三项规格一致 —— 标题 Montserrat Regular 36，描述 Montserrat Light 18。
   三项共用同一 v-for，故用包裹类统一命中。 */
.why-influence-list h3 {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}
.why-influence-list p {
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin: 0 0 2vw;
}
/* 标注：why 页事件条目描述 — Montserrat Light 18（18/1440 = 1.25vw） */
.why-event-copy {
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin: 0 0 2vw;
}
/* 标注：why 页 Localized Promotional Events 标题 — Montserrat Regular 36（36/1440 = 2.5vw）。
   同一 v-for 内还有其它事件标题，用条件 class 只命中标注过的两处。 */
.why-event-title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}
/* 标注：why 页 Offline Global Exhibition 标题 — Montserrat Regular 36（36/1440 = 2.5vw）。
   该区块还有多处 .detail-title，用专属 class 只命中这一处。 */
.why-influence-title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}

/*
 * 标注：Brand Influence 区块（#influence）内所有「标题 + 描述 + 媒体」的上下间距统一，
 *   以 Offline Global Exhibition（.why-influence-title + .company-lead）那一条为标准。
 *
 * 之前的问题：模板里用 Tailwind 手工补间距（mt-[2vw] / my-[2vw]），
 * 这些补丁会叠加在 .detail-title 的 margin（4vw 0 1vw）和描述的 margin 上，
 * 导致同一条目里「标题→描述」与「描述→媒体」用两套节奏，条目之间也不一致。
 * 现在改成一套显式规则，模板里不再写任何间距补丁。
 *
 * 统一后的节奏（1600 视口下括号内为实测 px）：
 *   条目标题上方   4vw  (64px)   —— 与 .detail-title 的 margin-top 一致
 *   标题 → 描述   1vw  (16px)   —— .detail-title 的 margin-bottom
 *   描述 → 媒体   1vw  (16px)   —— 描述自身的 margin-bottom
 *   媒体 → 下一条 4vw  (64px)   —— 媒体块的 margin-bottom
 *
 * 为什么描述 margin-bottom 用 1vw 而不是 .company-lead 原有的 2vw：
 *   why.vue 的 scoped 样式里有 `p { margin: 16px 0 }`（带 [data-v-xxx] 属性选择器，
 *   特异性高于任何单类规则），页面里所有 p 的 margin 实际都被它改成 16px 0。
 *   这里把值显式写成 1vw，是让「最终生效值」与设计意图一致，而不是依赖那条 scoped 规则。
 */
#influence .detail-title {
  margin: 4vw 0 1vw;
}
#influence .company-lead,
#influence .why-event-copy,
#influence .why-influence-list p {
  margin: 0 0 1vw;
}
/* 媒体块（视频 / 单图 / 图组）：与标准条目一致，块下方留出到下一条标题的整段间距 */
#influence .why-influence-media {
  margin: 0 0 4vw;
}
#influence .why-influence-media:last-child {
  margin-bottom: 0;
}
/* 标注：why 页 Services and Empowerment 标题 — Montserrat Regular 36（36/1440 = 2.5vw）。
   该标题不在带 id 的区块内，用专属 class 精确定位。 */
.why-lead-title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}
.why-lead-p {
  /* 标注：描述段落 — Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin: 0 0 3.2vw;
}
/* 标注：why 页 The Iron Triangle Ecosystem 标题 — Montserrat Regular 36（36/1440 = 2.5vw）。
   该标题是该区块唯一的 .detail-title，用 ID 精确定位，不影响其它区块。 */
#strategy > .detail-title {
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
}
.research-lead {
  /* 标注：引导段落 — Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin: 0 0 2vw;
  max-width: 92%;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.1vw;
  margin-bottom: 1vw;
}
.category-grid a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.category-grid .support-placeholder {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #fff;
  background: #808080;
  font-size: clamp(18px, 2.2vw, 42px);
  font-weight: 300;
  margin-bottom: 0.7vw;
}
.category-grid span {
  display: block;
  /* 标注：分类名称 — Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.35;
  color: #333;
}
.research-philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4vw;
  row-gap: 0;
  margin: 0.5vw 0 1vw;
}
.research-philosophy-grid > div {
  border-top: 1px solid #d8d8d8;
  padding: 1.4vw 0 2.4vw;
}
.research-philosophy-title {
  display: flex;
  align-items: center;
  gap: 0.55vw;
  margin: 0 0 0.85vw;
}
.research-philosophy-title img {
  /* 固定 24×24，六个图标尺寸一致。
     注：不改动 SVG 自身颜色，保持各图标原色。 */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.research-philosophy-title h3 {
  margin: 0;
  /* 标注：条目名称 — Montserrat Regular 24（24/1440 = 1.667vw） */
  font-size: clamp(16px, 1.667vw, 24px);
  font-weight: 400;
  line-height: 1.25;
  color: #171717;
}
.research-philosophy-grid p {
  margin: 0;
  /* 标注：条目描述 — Montserrat Light Italic 16（16/1440 = 1.111vw） */
  font-size: clamp(11px, 1.111vw, 16px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: #333;
}
/* ---------- Leadership in Production Innovation：年份里程碑时间轴 ----------
 * 逐条照搬 components/aboutUs/ProductPower/index.vue 的 <style scoped>：
 * 三列固定 320 / 360 / 320px、年份圆 w-82、年份之间的虚线轴（kd.svg）、底部 more.gif 箭头，
 * 以及展开后浮在视口底部的固定箭头。原文件把这段挂在 .main 下，这里挂在 about 页时间轴容器
 * .innov-pp 下 —— 选择器与数值一字未改（含源组件那个会被 overflow:hidden 裁掉的横向连接线）。
 * 版心 76% 比 1000px 窄时（视口 < ~1316px），时间轴会溢出到版心外但仍留在视口内 ——
 * 不裁切，免得把两列表头（源组件给的是 400px 文本列）的头一个字切掉。
 * 视口再窄到 1160px 以下，溢出部分会顶出视口、整页出现横向滚动条，这段才裁切兜底
 * （源组件是在整页根节点 `.main { overflow-x:hidden }` 兜的，这里只兜这一块，
 * 免得给 .company-page 加 overflow 破坏吸顶导航 —— overflow 会让 sticky 失效）。
 */
@media (max-width: 1160px) {
  .innov-pp {
    overflow-x: hidden;
    overflow-x: clip;
  }
}
.innov-pp .borderStyle::after {
  content: '';
  position: absolute;
  top: 100px;
  left: 29px;
  width: 24px;
  height: 205px;
  background-image: url(https://file.colorsled.com/pro/images/aboutUs-rd/kd.svg);
  background-size: 100% 100%;
}
.innov-pp .leftBorder::after {
  content: '';
  position: absolute;
  top: 88px;
  right: -140px;
  width: 100px;
  height: 4px;
  background-color: #d9d9d9;
}
.innov-pp .rightBorder::before {
  content: '';
  position: absolute;
  top: 88px;
  left: -140px;
  width: 100px;
  height: 4px;
  background-color: #d9d9d9;
}
/* 收起态 = 写死 1660px + 裁切；点底部箭头换成 yearBoxAction（height:auto）展开全部年份 */
.innov-pp .yearBox {
  height: 1660px;
  overflow: hidden;
  margin-bottom: 30px;
  transition: 1s;
  padding-bottom: 29px;
}
.innov-pp .yearBoxAction {
  height: auto;
  overflow: unset;
  margin-bottom: 30px;
  transition: 1s;
  padding-bottom: 1px;
}
.innov-pp .icon1 {
  cursor: pointer;
}
.innov-pp .icon2 {
  transform: rotate(-180deg);
  cursor: pointer;
}
.event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vw 1.3vw;
  margin: 2vw 0;
}
.event-grid p {
  /* 标注：事件条目名称（01.Title 等）— Montserrat Regular 18（18/1440 = 1.25vw） */
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 400;
  margin: 0.6vw 0 0;
}
.spaces-block {
  margin-top: 1vw;
}
.spaces-block > .detail-title {
  /* 标注：8 Application Spaces... — Montserrat Regular 36（36/1440 = 2.5vw） */
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 400;
  margin: 3.2vw 0 1vw;
  color: #171717;
}
.spaces-block > p {
  /* 标注：描述段落 — Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(12px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin: 0 0 3.2vw;
  max-width: 92%;
}
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 4.2vw;
  row-gap: 3.6vw;
  margin: 0;
  justify-items: center;
}
.spaces-grid > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 0;
}
.spaces-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: #d9d9d9;
}
.spaces-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.spaces-grid p {
  width: 100%;
  text-align: center;
  /* 标注：条目标签（BOUTIQUE OFFICE 等）— Montserrat Regular 18（18/1440 = 1.25vw） */
  font-size: clamp(11px, 1.25vw, 18px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin: 1.05vw 0 0;
  color: #171717;
}
.company-banner--strategy {
  background: #000;
  aspect-ratio: 2.35 / 1;
}
.company-banner--strategy .company-banner-copy {
  width: 58%;
  left: 5.2%;
  bottom: 10%;
}
.company-banner--strategy p {
  /* 标注：Brand Strategy 段落 — Montserrat Light 18（18/1440 = 1.25vw） */
  font-size: clamp(11px, 1.25vw, 18px);
  line-height: 1.55;
  margin: 0;
  font-weight: 300;
}
.company-page > .company-wrap--after-toolbar {
  padding-bottom: 0;
}
.why-support-section {
  margin-top: 4.5vw;
  margin-bottom: 4.5vw;
}
.why-support-heading.company-wrap {
  padding-top: 0;
  padding-bottom: 1.2vw;
}
.why-support-section > .company-wrap:not(.why-support-heading) {
  padding-top: 2.2vw;
  padding-bottom: 0;
}
.company-page > .company-wrap:not(.company-wrap--after-toolbar) {
  padding-top: 0;
}
.why-service {
  position: relative;
  width: 76%;
  margin: 0 auto;
  height: 48vw;
  max-height: 1020px;
  background: linear-gradient(105deg, #e8e8e8 0%, #cfcfcf 42%, #b7b7b7 100%);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.why-service.is-dragging {
  cursor: grabbing;
}
.why-service-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}
.why-service.is-dragging .why-service-track {
  transition: none;
}
.why-service-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0 10vw;
  box-sizing: border-box;
}
.why-service-art {
  width: min(42vw, 520px);
  max-width: 100%;
  justify-self: center;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}
.why-service-copy {
  width: min(26vw, 420px);
  justify-self: start;
  margin-left: 4%;
  text-align: center;
  z-index: 1;
  pointer-events: auto;
  user-select: text;
  cursor: auto;
}
.why-service-copy h2 {
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 32px);
  letter-spacing: 0.02em;
  margin: 0;
  color: #111;
}
.why-service-copy p {
  font-size: clamp(11px, 0.95vw, 17px);
  line-height: 1.85;
  margin: 1.2vw 0 0;
  color: #222;
}
.why-service-dots {
  position: absolute;
  right: 4.5%;
  bottom: 6%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.35vw;
}
.why-service-dots button {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 24px;
  border: 0;
  padding: 0 3px;
  background: transparent;
  cursor: pointer;
}
.why-service-dots button span {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  transition:
    width 0.25s,
    background 0.25s;
}
.why-service-dots button span.selected {
  width: 22px;
  background: #fff;
}
.why-service-dots button:focus-visible {
  outline: 1px solid #111;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .why-service-track,
  .why-service-dots button span {
    transition: none;
  }
}
.company-nav:has(a[href^='/supports']) {
  gap: 3vw;
}
.company-nav:has(a[href^='/brand/about']),
.company-nav:has(a[href^='/brand/why']) {
  gap: 3vw;
}
.company-page h3 {
  font-weight: 400;
}
@media (max-width: 700px) {
  .about-ceo {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .about-ceo figure {
    width: 55%;
    margin: 20px auto;
  }
  .about-ceo-split {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ideal-standard-title {
    margin-top: 32px;
    clear: both;
  }
  .company-section {
    scroll-margin-top: 110px;
  }
  .about-ceo-guarantees ol,
  .about-ceo-cta ol {
    font-size: 12px;
  }
  .ideal-principles {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .ideal-principles strong {
    font-size: 60px;
  }
  .ideal-principles h3 {
    font-size: 14px;
  }
  .ideal-principles p,
  .history-grid p {
    font-size: 12px;
  }
  .history-grid > div > h3 {
    font-size: 20px;
    margin: 28px 0 12px;
  }
  .ideal-bar {
    height: 12px;
  }
  .about-base-list {
    font-size: 12px;
  }
  .company-banner-actions {
    gap: 10px;
  }
  .event-grid--features {
    grid-template-columns: 1fr;
  }
  .company-page .chain-title {
    margin: 36px 0 22px;
    font-size: 20px;
  }
  .chain-features {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
    margin-bottom: 28px;
  }
  .chain-features > div {
    padding-top: 14px;
  }
  .chain-features h3 {
    font-size: 15px;
  }
  .chain-features p {
    font-size: 12px;
  }
  /* Manufacturing System 三卡此前完全没进这个断点，标题一直停在 clamp 下限 16px，
     而下面两块是 15px —— 缩到700px 以下时三块标题就对不上。补齐，与基准一致。 */
  .manufacturing-grid h3 {
    font-size: 15px;
  }
  .manufacturing-grid .about-base-list {
    font-size: 12px;
  }
  .workshop-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }
  .workshop-grid p {
    font-size: 12px;
    margin-top: 8px;
  }
  .chain-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    margin-top: 28px;
  }
  .chain-metric-rule {
    margin: 12px 0 16px;
  }
  .chain-metrics h3 {
    font-size: 15px;
  }
  .chain-metrics p {
    font-size: 12px;
  }
  .history-grid {
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
  .history-group-title {
    margin-top: 12px;
  }
  .history-grid nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .history-grid button {
    padding: 10px;
  }
  .research-section > .detail-title {
    font-size: 22px;
    margin: 32px 0 12px;
  }
  .research-lead {
    font-size: 12px;
    max-width: none;
    margin-bottom: 18px;
  }
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .category-grid .support-placeholder {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .category-grid span {
    font-size: 10px;
  }
  .research-philosophy-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .research-philosophy-grid > div {
    padding: 16px 0 22px;
  }
  .research-philosophy-title {
    gap: 8px;
    margin-bottom: 10px;
  }
  .research-philosophy-title img {
    height: 24px;
    width: 24px;
  }
  .research-philosophy-title h3 {
    font-size: 16px;
  }
  .research-philosophy-grid p {
    font-size: 12px;
  }
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
  .spaces-block > .detail-title {
    font-size: 18px;
    margin: 28px 0 12px;
  }
  .spaces-block > p {
    font-size: 12px;
    max-width: none;
    margin-bottom: 24px;
  }
  .spaces-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 18px;
    row-gap: 24px;
  }
  .spaces-grid p {
    font-size: 10px;
    margin-top: 10px;
  }
  .why-support-heading.company-wrap {
    padding-bottom: 12px;
  }
  .why-support-section {
    margin-bottom: 32px;
  }
  .why-support-section > .company-wrap:not(.why-support-heading) {
    padding-top: 18px;
  }
  .strategy-pillars {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 28px;
  }
  .strategy-pillar-rule {
    margin: 12px 0 14px;
  }
  .strategy-pillars h3 {
    font-size: 22px;
  }
  .strategy-win {
    max-width: none;
    margin-top: 28px;
    font-size: 13px;
  }
  .why-service {
    height: 560px;
    max-height: none;
  }
  .why-service-slide {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 36px 8% 64px;
    gap: 20px;
  }
  .why-service-art {
    width: 58%;
    max-width: 280px;
    mix-blend-mode: multiply;
  }
  .why-service-copy {
    width: 100%;
    margin-left: 0;
  }
  .why-service-copy h2 {
    font-size: 20px;
  }
  .why-service-copy p {
    font-size: 12px;
    margin-top: 12px;
  }
  .why-service-ghost {
    font-size: 11px;
  }
  .why-service-ghost--top {
    top: 8%;
    left: auto;
    right: 10%;
  }
  .why-service-ghost--right {
    top: auto;
    bottom: 18%;
    right: 8%;
  }
  .why-service-ghost--bottom {
    display: none;
  }
  .why-service-dots {
    right: 6%;
    bottom: 4%;
  }
  .about-stats {
    gap: 14px 10px;
    padding: 18px 6% 22px;
  }
  .about-stats span {
    font-size: 8px;
  }
  .about-overview > img {
    aspect-ratio: 1.4;
  }
  .company-nav:has(a[href^='/supports']),
  .company-nav:has(a[href^='/brand/about']),
  .company-nav:has(a[href^='/brand/why']) {
    gap: 24px;
  }
}

.company-world {
  background-image: none;
}
.company-world:before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('https://file.colorsled.com/pro/images/media/company/world.jpg') center top/100%
    auto no-repeat;
  mask-image: linear-gradient(#000 0%, #000 42%, transparent 67%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 42%, transparent 67%);
}
@media (prefers-reduced-motion: reduce) {
  .company-nav {
    transition: none;
  }
}

.company-page .v5-contact-block .v5-contact-submit {
  background: #000;
}
.company-page .v5-contact-block .v5-contact-submit:hover {
  background: #333;
}
@media (max-width: 700px) {
  .company-page .company-banner {
    width: 100%;
    aspect-ratio: auto;
    height: 230px;
    min-height: 0;
  }
  .company-banner-copy {
    bottom: 9%;
    width: 85%;
  }
  .company-dots {
    bottom: 7%;
  }
  .company-banner h3 {
    font-size: 14px;
  }
  .company-page .philosophy-banner {
    height: 280px;
  }
  .philosophy-banner .company-banner-copy {
    bottom: 16%;
    width: 90%;
  }
  .philosophy-banner .company-banner-copy h2 {
    font-size: 18px;
  }
  .philosophy-banner .company-banner-copy h3 {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .philosophy-banner .company-banner-copy p {
    font-size: 9px;
  }
  .philosophy-banner-dots {
    bottom: 6%;
  }
}