/* ===== 品牌价值页 · 高原纵向长卷 ===== */
.page-about{
  --about-hair:rgba(16,26,28,.13);
  --about-hair-dark:rgba(199,180,154,.36);
  --about-pad:clamp(56px,8vw,112px);
  background:var(--mist);
  color:var(--ink);
  overflow-x:hidden;
}

.page-about .about-section{
  position:relative;
  padding:var(--about-pad) 0;
}
.page-about .about-section--mist{background:var(--mist);color:var(--ink);}
.page-about .about-section--sand{background:var(--sand);color:var(--ink);}
.page-about .about-section--qing{background:var(--qing);color:var(--mist);}
.page-about .about-section--night{background:var(--night);color:var(--mist);}

/* ---------- 首屏 ---------- */
.page-about .about-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:clamp(560px,88vh,820px);
  padding:calc(var(--header-h) + 88px) 0 clamp(48px,7vw,88px);
  color:var(--mist);
  overflow:hidden;
}
.page-about .about-hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.page-about .about-hero__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(7,36,42,.58) 0%,rgba(7,36,42,.74) 46%,rgba(15,58,66,.98) 100%);
}
.page-about .about-hero__inner{
  position:relative;
  width:100%;
}
.page-about .about-crumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 clamp(24px,4vw,44px);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--gravel);
}
.page-about .about-crumb a{
  color:var(--gravel);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.page-about .about-crumb a:hover,
.page-about .about-crumb a:focus-visible{
  color:var(--glow);
  border-bottom-color:var(--glow);
  outline:none;
}
.page-about .about-kicker{
  margin:0 0 18px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--glow);
}
.page-about .about-hero h1{
  margin:0 0 clamp(20px,3vw,30px);
  max-width:19ch;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(36px,7.2vw,80px);
  line-height:1.04;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.page-about .about-lede{
  max-width:58ch;
  margin:0 0 clamp(28px,4vw,44px);
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.85;
  color:var(--sand);
}
.page-about .about-figures{
  display:flex;
  flex-wrap:wrap;
  gap:16px clamp(28px,5vw,64px);
  margin:0;
  padding:clamp(18px,2.4vw,24px) 0 0;
  list-style:none;
  border-top:1px solid rgba(199,180,154,.32);
}
.page-about .about-figure{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.page-about .about-figure b{
  font-family:var(--font-mono);
  font-size:clamp(20px,2.6vw,28px);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--mist);
}
.page-about .about-figure span{
  font-size:12px;
  letter-spacing:.06em;
  color:rgba(244,247,246,.7);
}

/* ---------- 章节头 ---------- */
.page-about .about-chapter{
  display:flex;
  gap:clamp(12px,2.6vw,28px);
  align-items:flex-start;
  margin:0 0 clamp(28px,5vw,54px);
  padding-top:clamp(16px,2.4vw,26px);
  border-top:1px solid var(--about-hair);
}
.page-about .about-chapter__num{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:clamp(34px,6vw,64px);
  line-height:.86;
  letter-spacing:-.02em;
  color:var(--gravel);
}
.page-about .about-chapter__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(24px,4.2vw,40px);
  line-height:1.16;
  letter-spacing:.005em;
  text-wrap:balance;
}
.page-about .about-chapter__sub{
  max-width:62ch;
  margin:14px 0 0;
  font-size:clamp(14px,1.5vw,16px);
  line-height:1.8;
  color:var(--ink-soft);
}
.page-about .about-section--night .about-chapter,
.page-about .about-section--qing .about-chapter{
  border-top-color:var(--about-hair-dark);
}
.page-about .about-section--night .about-chapter__sub,
.page-about .about-section--qing .about-chapter__sub{
  color:rgba(244,247,246,.76);
}

/* ---------- 02 入口三步 ---------- */
.page-about .about-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2.4vw,26px);
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .about-step{
  position:relative;
  padding:clamp(22px,3vw,32px);
  background:#ffffff;
  border:1px solid var(--about-hair);
  border-radius:var(--radius);
  box-shadow:0 20px 46px -38px rgba(7,36,42,.85);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.page-about .about-step:hover,
.page-about .about-step:focus{
  transform:translateY(-4px);
  border-color:var(--glow);
  box-shadow:var(--shadow-soft);
}
.page-about .about-step:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:3px;
}
.page-about .about-step__num{
  display:block;
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--flag);
}
.page-about .about-step h3{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(19px,2.2vw,22px);
  line-height:1.3;
}
.page-about .about-step p{
  margin:0;
  font-size:15px;
  line-height:1.8;
  color:var(--ink-soft);
}
.page-about .about-step__arrow{
  display:none;
  position:absolute;
  top:clamp(24px,3vw,32px);
  right:clamp(20px,2.6vw,26px);
  width:36px;
  color:var(--glow);
}
.page-about .about-step__arrow svg{
  display:block;
  width:100%;
  height:auto;
}
.page-about .about-step:last-child .about-step__arrow{display:none;}
.page-about .about-entry__foot{
  margin:clamp(22px,3vw,32px) 0 0;
  font-size:15px;
  line-height:1.8;
  color:var(--ink-soft);
}
.page-about .about-entry__foot a,
.page-about .about-quote a,
.page-about .about-team__list a,
.page-about .about-values__tail a{
  color:var(--lake);
  text-decoration:none;
  border-bottom:1px solid rgba(28,111,142,.4);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.page-about .about-entry__foot a:hover,
.page-about .about-quote a:hover,
.page-about .about-team__list a:hover,
.page-about .about-values__tail a:hover,
.page-about .about-entry__foot a:focus-visible,
.page-about .about-quote a:focus-visible,
.page-about .about-team__list a:focus-visible,
.page-about .about-values__tail a:focus-visible{
  color:var(--flag);
  border-bottom-color:var(--flag);
  outline:none;
}
.page-about .about-section--qing .about-values__tail a{
  color:var(--glow);
  border-bottom-color:rgba(70,175,196,.5);
}
.page-about .about-section--qing .about-values__tail a:hover{
  color:var(--amber);
  border-bottom-color:var(--amber);
}

/* ---------- 03 方法论 ---------- */
.page-about .about-method{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,52px);
  align-items:start;
}
.page-about .about-pipeline{
  margin:0 0 clamp(24px,3vw,34px);
  padding:0;
  list-style:none;
}
.page-about .about-pipeline li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,24px);
  padding:clamp(18px,2.4vw,26px) 0;
  border-top:1px solid rgba(16,26,28,.16);
}
.page-about .about-pipeline li:first-child{
  border-top:0;
  padding-top:0;
}
.page-about .p-idx{
  padding-top:5px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--lake);
}
.page-about .about-pipeline h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(19px,2.2vw,22px);
}
.page-about .about-pipeline p{
  margin:0;
  font-size:15px;
  line-height:1.82;
  color:var(--ink-soft);
}
.page-about .about-quote{
  margin:0;
  padding:clamp(20px,3vw,28px) clamp(20px,3vw,30px);
  background:var(--mist);
  border-left:4px solid var(--lake);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.page-about .about-quote p{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:var(--ink-soft);
}
.page-about .about-method__figure{
  margin:0;
}
.page-about .about-method__figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--lake),var(--qing));
  box-shadow:var(--shadow-soft);
}
.page-about .about-figcap{
  margin:14px 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.7;
  color:var(--ink-soft);
}

/* ---------- 04 发展历程 ---------- */
.page-about .about-history{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.page-about .about-history__bg{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.34;
}
.page-about .about-history::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(118deg,rgba(7,36,42,.95) 0%,rgba(15,58,66,.86) 52%,rgba(28,111,142,.74) 100%);
}
.page-about .about-timeline{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,3vw,32px);
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .about-node{
  position:relative;
  padding:clamp(20px,2.6vw,26px) 0 0;
  border-top:2px solid rgba(199,180,154,.32);
  outline:none;
}
.page-about .about-node__dot{
  position:absolute;
  top:-7px;
  left:0;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--flag);
  box-shadow:0 0 0 5px rgba(222,100,55,.18);
  transition:box-shadow .3s var(--ease);
}
.page-about .about-node:hover .about-node__dot,
.page-about .about-node:focus .about-node__dot{
  box-shadow:0 0 0 8px rgba(222,100,55,.24);
}
.page-about .about-node:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:6px;
  border-radius:var(--radius-sm);
}
.page-about .about-node__year{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:clamp(22px,3vw,30px);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--glow);
}
.page-about .about-node__title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.01em;
  color:var(--mist);
}
.page-about .about-node__text{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(244,247,246,.78);
}
.page-about .about-node__more{
  max-height:0;
  margin-top:0;
  overflow:hidden;
  opacity:0;
  font-size:13px;
  line-height:1.8;
  color:var(--gravel);
  transition:max-height .35s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease);
}
.page-about .about-node:hover .about-node__more,
.page-about .about-node:focus .about-node__more,
.page-about .about-node:focus-within .about-node__more{
  max-height:220px;
  margin-top:10px;
  opacity:1;
}

/* ---------- 05 团队 ---------- */
.page-about .about-team__list{
  margin:0;
  padding:0;
  list-style:none;
}
.page-about .about-team__list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,38px);
  align-items:start;
  padding:clamp(18px,2.4vw,26px) 0;
  border-top:1px solid var(--about-hair);
}
.page-about .about-team__list li:last-child{
  border-bottom:1px solid var(--about-hair);
}
.page-about .about-team__num{
  min-width:3.4ch;
  font-family:var(--font-mono);
  font-size:clamp(26px,4.4vw,44px);
  font-weight:600;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--lake);
}
.page-about .about-team__list h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px,2vw,20px);
  line-height:1.35;
}
.page-about .about-team__list p{
  margin:0;
  max-width:60ch;
  font-size:15px;
  line-height:1.82;
  color:var(--ink-soft);
}

/* ---------- 06 价值清单 ---------- */
.page-about .about-values__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.page-about .about-values__list li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,34px);
  align-items:start;
  padding:clamp(20px,2.8vw,30px) 0;
  border-top:1px solid var(--about-hair-dark);
}
.page-about .about-values__idx{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.16em;
  padding-top:6px;
  color:var(--flag);
}
.page-about .about-values__list h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(19px,2.4vw,24px);
  letter-spacing:.01em;
  color:var(--mist);
}
.page-about .about-values__list p{
  margin:0;
  max-width:56ch;
  font-size:15px;
  line-height:1.82;
  color:rgba(244,247,246,.78);
}
.page-about .about-values__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:clamp(28px,4vw,44px) 0 0;
}
.page-about .about-values__cta .btn-outline{
  border-color:rgba(244,247,246,.5);
  color:var(--mist);
}
.page-about .about-values__cta .btn-outline:hover,
.page-about .about-values__cta .btn-outline:focus-visible{
  border-color:var(--glow);
  color:var(--glow);
  outline:none;
}
.page-about .about-values__tail{
  margin:clamp(24px,3vw,34px) 0 0;
  max-width:62ch;
  font-size:15px;
  line-height:1.85;
  color:rgba(244,247,246,.72);
}

/* ---------- 中等屏 ---------- */
@media (min-width:700px){
  .page-about .about-values__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,4vw,56px);
  }
  .page-about .about-values__list li:nth-child(2){
    border-top:1px solid var(--about-hair-dark);
  }
}

/* ---------- 桌面 ---------- */
@media (min-width:900px){
  .page-about .about-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-about .about-step__arrow{
    display:block;
  }
  .page-about .about-method{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  }
  .page-about .about-pipeline li{
    grid-template-columns:auto minmax(0,1fr);
  }
  .page-about .about-hero h1{
    max-width:17ch;
  }
}

@media (min-width:780px){
  .page-about .about-timeline{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(18px,2.4vw,32px);
  }
}

/* ---------- 触屏：展开内容常显 ---------- */
@media (hover:none){
  .page-about .about-node__more{
    max-height:none;
    margin-top:10px;
    opacity:1;
  }
}

/* ---------- 窄屏收敛 ---------- */
@media (max-width:420px){
  .page-about .about-chapter{
    flex-direction:column;
    gap:10px;
  }
  .page-about .about-chapter__num{
    font-size:32px;
  }
  .page-about .about-team__list li,
  .page-about .about-values__list li{
    grid-template-columns:1fr;
    gap:8px;
  }
  .page-about .about-team__num{
    min-width:0;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .page-about .about-step,
  .page-about .about-node__dot,
  .page-about .about-node__more,
  .page-about .about-crumb a{
    transition:none;
  }
  .page-about .about-step:hover,
  .page-about .about-step:focus{
    transform:none;
  }
}