.page-about .about-crumbs{padding-top:clamp(20px,4vw,34px)}

.page-about .about-hero{padding-top:clamp(26px,5vw,50px)}

.page-about .about-hero__grid{
  display:grid;
  gap:clamp(28px,5vw,44px);
  align-items:start;
}

.page-about .about-hero__lead h1{
  margin:.24em 0 .5em;
}

.page-about .about-hero__spec{
  margin:clamp(20px,3vw,30px) 0 0;
}

.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(20px,3vw,28px);
}

.page-about .about-hero__fig{
  margin:0;
}

.page-about .about-hero__fig .figure__frame{
  aspect-ratio:5 / 7;
  overflow:hidden;
}

.page-about .about-hero__fig img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:100%;
}

@media (min-width:940px){
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    gap:clamp(32px,4vw,68px);
  }
  .page-about .about-hero__fig{
    margin-top:clamp(16px,3vw,48px);
  }
}

.page-about .about-flow{
  padding-top:clamp(30px,5vw,58px);
}

.page-about .about-list{
  list-style:none;
  margin:0;
  padding:0;
}

.page-about .about-block{
  --node-c:var(--cyan-400);
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:clamp(14px,3vw,26px);
  padding-bottom:clamp(34px,6vw,74px);
}

.page-about .about-block:nth-child(4n+2){--node-c:var(--orange-500)}
.page-about .about-block:nth-child(4n+3){--node-c:var(--magenta-500)}
.page-about .about-block:nth-child(4n+4){--node-c:var(--lime-400)}

.page-about .about-block::before{
  content:"";
  position:absolute;
  left:5px;
  top:20px;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg,var(--hair),rgba(233,238,247,.04));
}

.page-about .about-block--end::before{
  bottom:auto;
  height:40px;
}

.page-about .about-node{
  position:relative;
  padding-left:20px;
  padding-top:4px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.page-about .about-node__dot{
  position:absolute;
  left:1px;
  top:9px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink-600);
  box-shadow:inset 0 0 0 1px var(--hair);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

.page-about .about-block.is-in .about-node__dot{
  background:var(--node-c);
  box-shadow:0 0 0 4px rgba(47,227,208,.13);
}

.page-about .about-node__idx{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--gray-400);
}

.page-about .about-node__year{
  font-size:13px;
  letter-spacing:.02em;
  color:var(--cold-100);
  line-height:1.5;
}

.page-about .about-body h2{
  margin:0 0 .6em;
}

.page-about .about-body p{
  margin:0 0 1.05em;
}

.page-about .about-body p:last-child{
  margin-bottom:0;
}

@media (min-width:860px){
  .page-about .about-block{
    grid-template-columns:132px minmax(0,1fr);
    gap:clamp(22px,3.4vw,58px);
  }
  .page-about .about-node{
    padding-left:24px;
  }
  .page-about .about-block::before{
    left:5px;
  }
}

@media (min-width:1120px){
  .page-about .about-block:nth-child(even) .about-body{
    padding-left:clamp(18px,3vw,54px);
  }
}

/* 版本折叠 */
.page-about .about-vers{
  margin-top:clamp(18px,2.6vw,26px);
  display:grid;
  gap:8px;
}

.page-about .about-ver{
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  background:var(--glass);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}

.page-about .about-ver[open]{
  border-color:var(--hair-cyan);
  background:var(--glass-strong);
}

.page-about .about-ver__sum{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  cursor:pointer;
  list-style:none;
}

.page-about .about-ver__sum::-webkit-details-marker{display:none}
.page-about .about-ver__sum::marker{color:var(--cyan-400)}

.page-about .about-ver__sum:hover{
  color:var(--cold-100);
}

.page-about .about-ver__sum:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

.page-about .about-ver__tag{
  font-size:12px;
  letter-spacing:.06em;
  color:var(--cyan-400);
  border:1px solid var(--hair-cyan);
  border-radius:999px;
  padding:2px 9px;
  flex:0 0 auto;
}

.page-about .about-ver__name{
  font-size:15px;
  color:var(--cold-100);
  flex:1 1 auto;
  min-width:0;
}

.page-about .about-ver__mark{
  position:relative;
  flex:0 0 auto;
  width:12px;
  height:12px;
}

.page-about .about-ver__mark::before,
.page-about .about-ver__mark::after{
  content:"";
  position:absolute;
  background:var(--gray-400);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}

.page-about .about-ver__mark::before{left:0;top:5.5px;width:12px;height:1px}
.page-about .about-ver__mark::after{left:5.5px;top:0;width:1px;height:12px}

.page-about .about-ver[open] .about-ver__mark::after{transform:scaleY(0)}
.page-about .about-ver[open] .about-ver__mark::before{background:var(--cyan-400)}

.page-about .about-ver__body{
  padding:0 14px 14px;
}

.page-about .about-ver__body p{
  margin:0;
  font-size:15.5px;
  color:var(--soft-300);
}

/* 纸色面板 */
.page-about .about-body--paper{
  padding:clamp(22px,3.4vw,40px);
  border-radius:var(--radius);
  color:var(--ink-950);
}

.page-about .about-body--paper h2{
  color:var(--ink-950);
}

.page-about .about-body--paper > p{
  color:var(--ink-800);
}

.page-about .about-method{
  list-style:none;
  margin:clamp(18px,2.6vw,26px) 0 0;
  padding:0;
  display:grid;
  gap:14px;
}

.page-about .about-method li{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding-top:13px;
  border-top:1px solid rgba(5,7,13,.16);
}

.page-about .about-method__k{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--ink-600);
  padding-top:.35em;
}

.page-about .about-method li p{
  margin:0;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink-800);
}

.page-about .about-method__note{
  margin:clamp(18px,2.6vw,24px) 0 0;
  font-weight:700;
  color:var(--ink-950);
}

.page-about .about-method__note::before{
  content:"";
  display:inline-block;
  width:20px;
  height:2px;
  margin-right:9px;
  vertical-align:middle;
  background:var(--magenta-500);
}

@media (max-width:620px){
  .page-about .about-method li{
    grid-template-columns:1fr;
    gap:5px;
  }
}

/* 团队 */
.page-about .about-team{
  display:grid;
  gap:12px;
  margin-top:clamp(18px,2.6vw,26px);
}

.page-about .about-team__row{
  --bar:var(--cyan-400);
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  background:var(--glass);
  padding:13px 15px;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.page-about .about-team__row--eng{--bar:var(--cyan-400)}
.page-about .about-team__row--ops{--bar:var(--orange-500)}
.page-about .about-team__row--cnt{--bar:var(--magenta-500)}

.page-about .about-team__row:hover,
.page-about .about-team__row:focus-within{
  border-color:var(--hair-cyan);
  background:var(--glass-strong);
  transform:translateY(-2px);
}

.page-about .about-team__row:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:2px;
}

.page-about .about-team__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.page-about .about-team__name{
  font-weight:700;
  color:var(--cold-100);
}

.page-about .about-team__num{
  font-family:var(--font-mono);
  font-size:20px;
  line-height:1;
  color:var(--bar);
}

.page-about .about-team__bar{
  height:6px;
  border-radius:999px;
  background:rgba(233,238,247,.08);
  margin-top:11px;
  overflow:hidden;
}

.page-about .about-team__fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--bar);
}

.page-about .about-team__row--eng .about-team__fill{width:43.75%}
.page-about .about-team__row--ops .about-team__fill{width:34.375%}
.page-about .about-team__row--cnt .about-team__fill{width:21.875%}

.page-about .about-team__duty{
  list-style:none;
  margin:11px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}

.page-about .about-team__duty li{
  position:relative;
  padding-left:15px;
  font-size:15px;
  line-height:1.65;
  color:var(--soft-300);
}

.page-about .about-team__duty li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:6px;
  height:1px;
  background:var(--bar);
}

.page-about .about-team__hint{
  margin:12px 0 0;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--gray-400);
}

.page-about .about-team__fig{
  margin:clamp(20px,3vw,30px) 0 0;
}

.page-about .about-team__fig img,
.page-about .about-region__fig img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:100%;
}

@media (hover:hover){
  .page-about .about-team__duty{
    max-height:0;
    margin-top:0;
    opacity:0;
    overflow:hidden;
    transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease),margin-top var(--dur) var(--ease);
  }
  .page-about .about-team__row:hover .about-team__duty,
  .page-about .about-team__row:focus-within .about-team__duty{
    max-height:200px;
    margin-top:11px;
    opacity:1;
  }
}

/* 服务地区 */
.page-about .about-region__fig{
  margin:clamp(20px,3vw,30px) 0 0;
}

.page-about .about-region__meta{
  display:grid;
  gap:1px;
  margin-top:clamp(16px,2.4vw,24px);
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--hair);
}

.page-about .about-region__cell{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:12px 15px;
  background:var(--ink-800);
}

.page-about .about-region__k{
  font-size:12px;
  letter-spacing:.09em;
  color:var(--gray-400);
  flex:0 0 auto;
}

.page-about .about-region__v{
  font-size:15.5px;
  color:var(--cold-100);
  text-align:right;
}

@media (min-width:760px){
  .page-about .about-region__meta{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-about .about-region__cell{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .page-about .about-region__v{
    text-align:left;
  }
}

/* 节奏 */
.page-about .about-rhythm{
  margin-top:clamp(16px,2.4vw,24px);
}

.page-about .about-rhythm__tip{
  margin-top:clamp(14px,2vw,20px);
  font-size:15.5px;
  color:var(--soft-300);
}

/* 反馈闭环 */
.page-about .about-steps{
  list-style:none;
  margin:clamp(16px,2.4vw,24px) 0 0;
  padding:0;
}

.page-about .about-steps__item{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:15px 0;
  border-top:1px solid var(--hair);
}

.page-about .about-steps__item:last-child{
  border-bottom:1px solid var(--hair);
}

.page-about .about-steps__idx{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--cyan-400);
  padding-top:.35em;
}

.page-about .about-steps__item h3{
  margin:0 0 5px;
  font-size:16.5px;
  color:var(--cold-100);
}

.page-about .about-steps__item p{
  margin:0;
  font-size:15.5px;
  line-height:1.7;
  color:var(--soft-300);
}

/* 接下来 */
.page-about .about-next{
  display:grid;
  gap:10px;
  margin-top:clamp(18px,2.6vw,26px);
}

.page-about .about-next__item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:4px 14px;
  align-items:baseline;
  padding:14px 16px;
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  background:var(--glass);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.page-about .about-next__item:hover,
.page-about .about-next__item:focus-visible{
  border-color:var(--hair-cyan);
  background:var(--glass-strong);
  transform:translateY(-2px);
}

.page-about .about-next__item:focus-visible{
  outline:2px solid var(--cyan-400);
  outline-offset:2px;
}

.page-about .about-next__idx{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--gray-400);
  grid-row:span 2;
}

.page-about .about-next__label{
  font-size:16.5px;
  font-weight:700;
  color:var(--cold-100);
}

.page-about .about-next__desc{
  font-size:14.5px;
  line-height:1.65;
  color:var(--soft-300);
}

@media (min-width:860px){
  .page-about .about-next{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .about-team__row,
  .page-about .about-next__item,
  .page-about .about-node__dot{
    transition:none;
  }
  .page-about .about-team__row:hover,
  .page-about .about-team__row:focus-within,
  .page-about .about-next__item:hover,
  .page-about .about-next__item:focus-visible{
    transform:none;
  }
}
</main>