/* ══════════════════════════════════════════════════════════════════
   FOEVAIR — About page
   Design reference: 1920 × 8847 PSD（关于我们.psd）
   沿用 style.css 的基准：1920 画布，1rem ≈ 16px，横向定位一律用 vw
   纵向节奏同样用 vw（与设计稿等比），只有字号用 clamp(min-rem, vw, max-rem)
   ══════════════════════════════════════════════════════════════════ */

.page-about{ background:#fff; }

/* 设计稿里导航压在首屏照片上、始终可见，不需要「滚动才出现」 */
.page-about .mainnav{ transform:none; }

/* ───────────────────── 1. 首屏 ───────────────────── */
.about-hero{
  position:relative;
  height:var(--vh100); min-height:520px;
  overflow:hidden; background:#0d1b28;
}
.about-hero__media,
.about-hero__media img{ position:absolute; inset:0; }
.about-hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
}
/* 不再额外叠加压暗层：设计稿的照片图层（组 3）内部已经带了自己的渐变，
   再叠一层会把画面压黑（实测底部 ΔRGB 59、中下部 20）。
   实测去掉后与设计稿的像素差降到 3~5，故完全交给图片本身。 */

.about-hero__inner{
  position:absolute; z-index:3;
  left:6.1979vw; right:6.1979vw; bottom:3.5938vw;   /* 119 / 69（像素实测校准：标题墨迹落在 843） */
}
.about-hero__eyebrow{
  margin:0 0 1.3125rem;
  font-size:clamp(12px,.8854vw,17px);
  color:rgba(255,255,255,.82); letter-spacing:.005em;
}
.about-hero__title{
  margin:0;
  font-family:'Montserrat','Inter',sans-serif;
  font-size:clamp(1.5rem,2.5521vw,3.1rem);          /* 49px @1920 */
  line-height:1.224; font-weight:600;
  /* 负字距：设计稿全大写平均每字 0.60em，Montserrat 约 0.634em，
     按实测行宽 900px 反算得 -0.05em（见 _work/about_calib.js） */
  color:#fff; text-transform:uppercase; letter-spacing:-.05em;
}

/* ───────────────────── 2. 导语 ───────────────────── */
.about-intro{
  padding:5.9375vw 6.1979vw 12.3854vw;             /* 114 / 119 / 238（像素实测微调） */
  text-align:center;
}
.about-intro__title{
  margin:0;
  font-size:clamp(2.3rem,6.6146vw,8rem);            /* 127px @1920 */
  line-height:1; font-weight:600;
  color:#103357; text-transform:uppercase; letter-spacing:-.05em;      /* 实测反算，目标行宽 1299 */
  /* 设计稿这一行并不是画布居中：墨迹 280~1578，中心 929（画布中心 960）。
     右内距 62 → 居中点左移 31，与设计稿一致。 */
  margin-right:3.2292vw;
}
.about-intro__text{
  margin:3.1875rem auto 0;                          /* 51px */
  max-width:72.6042vw;                              /* 1394px */
  font-size:clamp(1rem,1.25vw,1.55rem);             /* 24px @1920 */
  line-height:2; color:#2b2b2b;
}

/* ───────────────────── 3. 五段图文 ───────────────────── */
/* 五段图文入场时文字块会先停在视口外（x = ±offset），
   若不裁剪，即使 body 有 overflow-x:hidden，documentElement.scrollWidth 仍会被撑宽
   （实测 390 视口下多出 60px）。overflow:clip 不创建滚动容器，比 hidden 安全。 */
.about-rows{ padding:0 6.1979vw; overflow:clip; }
.about-row{ position:relative; }
.about-row + .about-row{ margin-top:8.4896vw; }     /* 163 */
.about-row:nth-child(3){ margin-top:12.2396vw; }    /* 235 */
.about-row:nth-child(4){ margin-top:7.7083vw; }     /* 148 */
.about-row:nth-child(5){ margin-top:8.0208vw; }     /* 154 */

.about-row__media{
  width:44.5313vw;                                  /* 855 */
  aspect-ratio:855 / 575;
  overflow:hidden;
}
.about-row--media-right .about-row__media{ margin-left:auto; }
.about-row__media img{ width:100%; height:100%; object-fit:cover; }

.about-row__body{
  position:absolute; top:0; width:35.0521vw;        /* 673 */
}
.about-row--text-left  .about-row__body{ left:0; }              /* 119 */
.about-row--text-right .about-row__body{ left:50.4167vw; }      /* 1087 */

.about-row__title{
  margin:0;
  /* 设计稿该行墨迹宽 655、栏宽 673。Montserrat 同字号下约宽 5%，
     故把标题容器放宽到 700（正文栏仍是 673），避免 "R&D AND MANUFACTURING"
     被挤成两行 —— 行数一致比绝对宽度更重要。 */
  width:36.4583vw;                                  /* 700px */
  font-size:clamp(1.4rem,2.5521vw,3.2rem);          /* 49px @1920 */
  line-height:.98; font-weight:700;
  color:#121212; text-transform:uppercase; letter-spacing:-.027em;
}
.about-row__text{
  margin:1.9rem 0 0;                                /* 30px */
  font-size:clamp(.9rem,.9167vw,1.12rem);           /* 17.6px @1920 */
  line-height:1.7; color:#818181;
}

/* 第三段的三个小条目 */
.about-row__sub{ margin:1.95rem 0 0; }              /* 31px */
.about-row__sub + .about-row__sub{ margin-top:2.625rem; }  /* 42px */
.about-row__sub h3{
  margin:0 0 .4rem;
  font-size:clamp(.95rem,1.0208vw,1.24rem);         /* 19.6px @1920 */
  font-weight:700; color:#2b2b2b; letter-spacing:0;
}
.about-row__sub p{
  margin:0;
  font-size:clamp(.88rem,.9167vw,1.1rem);           /* 17.6px @1920 */
  line-height:1.5; color:#7f7f7f;
}
.about-row__lead{                                    /* 第三段顶部那句引导语 */
  margin:3.05rem 0 0;                                /* 49px */
  font-size:clamp(.88rem,.9167vw,1.1rem);
  line-height:1.6; color:#7f7f7f;
}
.about-row__tagline{
  margin:3.2rem 0 0;                                 /* 51px */
  font-size:clamp(.9rem,.9375vw,1.15rem);           /* 18px @1920 */
  font-weight:700; color:#122d4a;
}

/* Learn more 药丸按钮：设计稿 182×45，文字左内距 19、箭头距右 22 */
.btn-more{
  display:inline-flex; align-items:center; justify-content:space-between;
  width:9.4792vw; min-width:132px;                    /* 182px @1920 */
  margin-top:4.875rem;                                /* 78px */
  height:2.2917vw; min-height:34px;                  /* 44px（设计稿实测药丸 44 高） */
  padding:0 1.0938vw 0 .9896vw;                       /* 右 21 / 左 19（设计稿实测） */
  border-radius:999px; background:#0c3761;
  /* 设计稿的文字不是纯白，是偏冷的淡蓝 */
  color:#eef8ff;                                     /* 设计稿核心色 #F3FEFF */
  font-size:clamp(12px,.8854vw,1.06rem);            /* 17px（设计稿"Learn more"墨迹 90×13） */
  letter-spacing:.005em; white-space:nowrap;
  transition:background .35s var(--e-out), transform .35s var(--e-out);
}
.btn-more:hover{ background:#154a7d; transform:translateY(-2px); }
.btn-more svg{
  width:.71em; height:.774em; flex:none;              /* 设计稿箭头墨迹 11×12 */
  transition:transform .35s var(--e-out);
}
.btn-more:hover svg{ transform:translate(2px,-2px); }

/* ───────────────────── 4. 金色里程碑横幅 ───────────────────── */
.about-milestones{ margin-top:9.0104vw; }            /* 173 */
.about-milestones__inner{
  position:relative;
  margin-left:.8854vw; width:98.0729vw;              /* 17 / 1883 */
  aspect-ratio:1883 / 1083;
  border-radius:1.25vw; overflow:hidden;
  background:#8b6423;
}
.about-milestones__bg,
.about-milestones__bg img{ position:absolute; inset:0; }
.about-milestones__bg img{ width:100%; height:100%; object-fit:cover; }

/* 年份药丸：left 95 / top 421，91×45 */
.about-milestones__year{
  position:absolute; left:5.045%; top:38.87%;
  display:inline-flex; align-items:center; justify-content:center;
  width:4.833%; height:4.155%;
  border-radius:999px; background:#fff;
  font-size:clamp(12px,.9375vw,1.15rem);              /* 18px */
  color:#27384c; letter-spacing:.01em;
}

/* 进度轨：left 100 / top 510 / width 1663 */
.about-milestones__track{
  position:absolute; left:5.31%; top:47.09%; width:88.32%; height:1px;
  background:rgba(255,255,255,.55);
}
.about-milestones__track i{                                /* 起点实心点 */
  position:absolute; left:0; top:50%; width:1.434%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%; background:#fff;
}
.about-milestones__track b{                                /* 终点：实心点 + 半透明光晕 */
  position:absolute; right:0; top:50%; width:2.23%; aspect-ratio:1;
  transform:translate(50%,-50%); border-radius:50%;
  background:rgba(255,255,255,.30);
}
.about-milestones__track b::after{
  content:''; position:absolute; left:50%; top:50%;
  width:64%; aspect-ratio:1; margin:-32% 0 0 -32%;
  border-radius:50%; background:#fff;
}

/* 文案：left 101 / top 569 */
.about-milestones__copy{
  position:absolute; left:5.36%; top:52.54%; width:36%;
}
/* 4 步时间轴：幻灯片绝对叠放，靠 opacity/位移切换（高度不参与布局，
   因为文案区本身是绝对定位，不会影响横幅尺寸） */
.mstone{
  position:absolute; left:0; top:0; width:100%;
  opacity:0; transform:translateY(16px); pointer-events:none;
  /* 离场要快：旧文案必须在新文案起来之前退干净，
     否则两段字在同一个位置叠 0.3~0.5s，看起来是一团糊。 */
  transition:opacity .18s var(--e-out), transform .18s var(--e-out);
}
.mstone.is-active{
  opacity:1; transform:none; pointer-events:auto;
  /* 入场慢一档、并延后 0.14s —— 与上面的离场刚好错开 */
  transition:opacity .45s var(--e-out) .14s, transform .45s var(--e-out) .14s;
}
.about-milestones__copy h2{
  margin:0;
  font-size:clamp(1.2rem,1.9271vw,2.4rem);            /* 37px */
  line-height:.97; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:-.05em;        /* 目标行宽 489 */
}
.about-milestones__copy p{
  margin:1.7rem 0 0;
  font-size:clamp(.85rem,1.0417vw,1.3rem);            /* 20px */
  line-height:1.6; color:rgba(255,255,255,.94);
  max-width:35.0521vw;
}

/* 控件：设计稿为竖排三件套（右上「›」下一步、中间计数、右下「‹」上一步）
   实测圆钮 56px @ x=1741、y=6097 / 6207，计数在 y=6172 */
.about-milestones__nav{
  position:absolute; left:91.79%; top:54.94%;
  width:2.5491%; height:15.33%;               /* 圆钮 48px（客户要求再小一档） */
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  z-index:3;
}
.mstone-nav{
  flex:none; width:100%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.72); background:transparent;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .3s var(--e-out), border-color .3s var(--e-out), transform .25s var(--e-out);
}
.mstone-nav svg{
  width:.4167vw; height:.9375vw;             /* 设计稿箭头墨迹 8×18 @1920 */
  stroke-linejoin:miter; stroke-linecap:butt; /* 尖角，不要圆头 */
}
.mstone-nav:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.mstone-nav:active{ transform:scale(.93); }
.about-milestones__count{
  flex:none; display:flex; align-items:baseline; gap:.28em; white-space:nowrap;
  font-size:clamp(10px,.6771vw,.85rem);      /* 13px */
  color:rgba(255,255,255,.72); letter-spacing:.02em;
}
.about-milestones__count b{
  font-size:clamp(14px,1.2239vw,1.45rem);    /* 23.5px（设计稿"01"墨迹高 17） */
  font-weight:600; color:#fff; letter-spacing:.01em;
}
.about-milestones__count i{ font-style:normal; opacity:.55; }

/* 巨大的淡色年份水印「26」：left 116 / top 834 */
.about-milestones__ghost{
  position:absolute; left:6.16%; top:77.0%;
  font-family:'Montserrat','Inter',sans-serif;
  font-size:clamp(5rem,29vw,36rem); line-height:.72; font-weight:700;
  color:rgba(255,255,255,.20); letter-spacing:-.05em;
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* ───────────────────── 5. 资质与荣誉 ───────────────────── */
/* 资质区按设计稿的 1920×1080 比例做定位容器，
   标题 / 证书条 / 控件各自按百分比定位，保证与 PSD 的 y 完全对齐 */
.about-quals{
  position:relative; margin-top:5.3646vw;             /* 103 */
  aspect-ratio:1920 / 1080;
  background:#12324f url('../img/about/quals-bg.webp') center / 100% 100% no-repeat;
  overflow:hidden;
}
.about-quals__head{
  position:absolute; left:6.0938vw; right:6.0938vw; top:13.33%;   /* 144 / 1080 */
}
.about-quals__head h2{
  margin:0;
  font-size:clamp(1.4rem,2.1875vw,2.6rem);            /* 42px */
  font-weight:600; color:#fff; letter-spacing:.0414em;               /* 目标行宽 542 */
}

/* 横向轮播：右侧故意露出第 4 项，与设计稿一致 */
.about-quals__viewport{
  position:absolute; left:0; right:0; top:29.35%;     /* 317 / 1080 */
  overflow:hidden;
}
.about-quals__track{
  display:flex; align-items:flex-start; gap:7.5vw;    /* 144 */
  padding-left:6.0938vw;
  transition:transform .7s var(--e-out);
  will-change:transform;
}
.qual{
  flex:none; display:flex; align-items:flex-start; gap:4.27vw;  /* 82 */
  width:29.53vw;                                       /* 567 */
}
.qual__cert{
  flex:none; width:13.28vw;                            /* 255 */
  aspect-ratio:255 / 348;
  box-shadow:0 18px 40px -18px rgba(2,16,32,.55);
}
.qual__cert img{ width:100%; height:100%; object-fit:cover; }
.qual__text{ padding-top:.15vw; }
.qual__quote{
  display:block; font-family:'Montserrat','Inter',sans-serif;
  font-size:clamp(2rem,2.6vw,3rem); line-height:.56; font-weight:700;
  color:#fff; opacity:.95;
}
.qual__name{
  margin:1.55vw 0 0;
  font-size:clamp(1.15rem,1.9271vw,2.4rem);            /* 37px */
  font-weight:700; color:#fff; line-height:1; letter-spacing:-.005em;
}
.qual__desc{
  margin:1.4vw 0 0;
  font-size:clamp(.85rem,.9375vw,1.15rem);             /* 18px */
  color:rgba(255,255,255,.96); line-height:1.3;
  white-space:nowrap;                                   /* 设计稿为单行 */
}

/* 控件：两个 57px 圆钮 + 1502 进度线（left 118 / 201 / 299，top 7447/7471） */
.about-quals__ctrl{
  position:absolute; left:0; right:0; top:70.28%;       /* 759 / 1080 */
  height:2.97vw;                                       /* 57 */
}
/* 设计稿里两个圆钮是「状态」而非固定样式：
   可用 = 实心白底 + 深蓝箭头；禁用/次要 = 透明白描边 + 白箭头。
   位置 01/04 时左钮为禁用态，正是设计稿画的那个样子。 */
.about-quals__btn{
  position:absolute; top:0;
  width:2.5vw; height:2.5vw; border-radius:50%;          /* 48px（原 57） */
  border:1px solid #fff; background:#fff; color:#12324f;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--e-out), color .3s var(--e-out),
             border-color .3s var(--e-out), transform .25s var(--e-out);
}
.about-quals__btn:first-of-type{ left:6.1458vw; }      /* 118 */
.about-quals__btn:last-of-type { left:10.4688vw; }     /* 201 */
.about-quals__btn svg{
  width:.4167vw; height:.9375vw;              /* 设计稿箭头墨迹 8×18 @1920 */
  stroke-linejoin:miter; stroke-linecap:butt;
}
.about-quals__btn:hover:not([disabled]){ background:rgba(255,255,255,.86); transform:scale(1.05); }
.about-quals__btn:active:not([disabled]){ transform:scale(.95); }
.about-quals__btn[disabled]{
  background:transparent; border-color:rgba(255,255,255,.6);
  color:rgba(255,255,255,.9); cursor:default; transform:none;
}

.about-quals__bar{
  position:absolute; left:15.5729vw; right:6.0938vw; top:1.25vw;   /* 299 / 1801 */
  height:2px; background:rgba(255,255,255,.32);
}
.about-quals__bar i{
  position:absolute; left:0; top:0; height:100%; width:33%;
  background:#fff; transition:width .6s var(--e-out), left .6s var(--e-out);
}

/* ───────────────────── 6. 响应式 ─────────────────────
   断点与 style.css 完全对齐：1280 / 1024 / 720 / 480
   首页在 1024 就把 news 的双栏折成单列，About 的五段图文同理。 */

@media (max-width:1280px){
  .about-row__body{ width:37vw; }
  .about-row--text-right .about-row__body{ left:52vw; }
  .about-milestones__copy{ width:40%; }
  .about-milestones__copy p{ max-width:100%; }
}

@media (max-width:1024px){
  /* ── 五段图文：改为上图下文 ── */
  .about-intro{ padding:8vw var(--pad) 11vw; }
  .about-intro__title{ margin-right:0; }
  .about-intro__text{ max-width:none; }

  .about-rows{ padding:0 var(--pad); }
  .about-row + .about-row,
  .about-row:nth-child(3),
  .about-row:nth-child(4),
  .about-row:nth-child(5){ margin-top:9vw; }

  .about-row__media{ width:100%; margin:0 0 5vw; }
  .about-row--media-right .about-row__media{ margin-left:0; }
  .about-row__body{ position:static; width:auto; }
  .about-row__title{ width:auto; }

  /* 首屏标题在宽屏是 3 个独立行（配合遮罩式上浮）；窄屏改为连续排版，
     并用 text-wrap:balance 让各行长度均匀，避免出现 "PROVIDER" 这种孤行。
     （.line 的 block 规则只写在 style.css 的 .hero__title 下，About 页默认就是 inline） */
  .about-hero__title{ text-wrap:balance; }
  .about-hero__media img{ object-position:50% 58%; }

  /* 标题里的 <br> 到此取消，改自然折行（<br> 前已留空格，不会粘连） */
  .about-row__title br,
  .about-intro__text br,
  .mstone h2 br{ display:none; }

  .btn-more{
    width:auto; min-width:150px; height:auto;
    margin-top:5vw; padding:.72rem 1.5rem; gap:1.4rem;
  }
}

@media (max-width:720px){
  /* 首屏标题字号与首页保持一致（style.css 里 .hero__title 在 720 断点用的同一组值） */
  .about-hero__title{ font-size:clamp(1.02rem,5.1vw,1.6rem); letter-spacing:0; }

  /* ── 里程碑：竖版卡片，文案压在图底部 ── */
  .about-milestones{ margin-top:11vw; }
  .about-milestones__inner{
    margin:0 var(--pad); width:auto; aspect-ratio:335 / 470;
    border-radius:16px;
  }
  .about-milestones__bg img{ object-position:70% 42%; }
  .about-milestones__bg::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(58,38,10,0) 24%, rgba(58,38,10,.42) 56%, rgba(58,38,10,.82) 100%);
  }
  .about-milestones__year{
    left:7%; top:auto; bottom:54%; width:auto; height:auto; padding:.4rem 1.1rem;
  }
  .about-milestones__track{ left:7%; width:86%; top:auto; bottom:51%; }
  .about-milestones__track b{ display:none; }
  /* 用 top 锚定而不是 bottom：幻灯片是绝对定位、父级高度为 0，
     用 bottom 会让内容向下溢出卡片 */
  .about-milestones__copy{ left:7%; width:86%; top:55%; bottom:auto; }
  .mstone h2{ font-size:clamp(1.1rem,4.6vw,1.7rem); line-height:1.05; }
  .mstone p{ margin-top:.85rem; font-size:clamp(.8rem,3.3vw,1rem); line-height:1.5; }
  /* 控件移到卡片右下角，横排 */
  .about-milestones__nav{
    left:auto; right:6%; top:auto; bottom:5%;
    width:44%; height:auto;
    flex-direction:row; gap:.7rem;
  }
  /* 移动端读序：‹ 计数 ›  —— 必须用子选择器限定在 nav 内，
     否则 #msCur 的 order 会作用到计数容器自己的 flex 里，把 "01 / 04" 排成 "/ 04 01" */
  .about-milestones__nav > #msPrev{ order:1; }
  .about-milestones__nav > #msNext{ order:3; }
  .about-milestones__count{ order:2; margin:0 auto; }
  .mstone-nav{ width:2.2rem; height:2.2rem; }
  /* 箭头尺寸是绑在 1920 画布上的 vw，窄屏会缩到 1~2px，必须单独给值 */
  .mstone-nav svg{ width:.34rem; height:.77rem; }
  .about-milestones__count{ margin-left:auto; font-size:.72rem; }
  .about-milestones__count b{ font-size:1.05rem; }
  .about-milestones__ghost{ left:7%; top:auto; bottom:-3%; font-size:34vw; opacity:.2; }

  /* ── 资质区：回到流式，横向轮播保留 ── */
  .about-quals{ aspect-ratio:auto; padding:12vw 0 10vw; margin-top:11vw; }
  .about-quals__head{ position:static; padding:0 var(--pad); margin-bottom:7vw; }
  .about-quals__viewport{ position:static; }
  .about-quals__track{ padding-left:var(--pad); gap:9vw; }
  .qual{ width:auto; flex-direction:column; gap:3.5vw; }
  .qual__cert{ width:60vw; }
  .qual__name{ margin-top:3.5vw; }
  .qual__desc{ margin-top:2vw; }
  .about-quals__ctrl{
    position:static; margin-top:8vw; height:auto;
    display:flex; align-items:center; gap:4vw; padding:0 var(--pad);
  }
  .about-quals__btn{ position:static; width:2.3rem; height:2.3rem; }
  .about-quals__btn svg{ width:.37rem; height:.83rem; }
  /* 父级改 static 后，进度条填充必须一并回到流内，否则会脱出成整块遮罩 */
  .about-quals__bar{ position:static; flex:1; height:4px; }
  .about-quals__bar i{ position:static; display:block; height:100%; }
}

@media (max-width:480px){
  .about-intro{ padding:13vw var(--pad) 15vw; }
  .about-intro__title{ font-size:clamp(1.85rem,9.5vw,3rem); }
  .about-row__title{ font-size:clamp(1.25rem,5.8vw,1.9rem); }
  .about-row__text,
  .about-row__sub p,
  .about-row__lead{ font-size:.92rem; }
  .qual__cert{ width:74vw; }
  .about-milestones__inner{ aspect-ratio:335 / 500; }
}

/* ───────────────────── 7. 减弱动效 ───────────────────── */
@media (prefers-reduced-motion:reduce){
  .about-quals__track,
  .about-quals__bar i,
  .btn-more{ transition:none; }
}