.page-about{
  --about-line:rgba(27,74,99,.58);
  --about-body:#B7D1E1;
  background:var(--deep);
  color:var(--ink);
  overflow-x:clip;
}

.page-about .breadcrumbs{
  padding-block:clamp(.9rem,3vw,1.6rem) 0;
  font-size:.78rem;
}

/* ---------- hero ---------- */
.page-about .about-hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(1.25rem,4vw,2.25rem) clamp(2.5rem,7vw,5.5rem);
}
.page-about .about-hero::before{
  content:"";
  position:absolute;
  top:-34%;
  right:-18%;
  width:min(640px,84vw);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(56,242,224,.17),rgba(56,242,224,0) 68%);
  pointer-events:none;
}
.page-about .about-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(56,242,224,0),rgba(27,74,99,.85) 40%,rgba(56,242,224,.35) 70%,rgba(56,242,224,0));
}
.page-about .about-hero__grid{
  position:relative;
  display:grid;
  gap:clamp(1.75rem,5vw,3.5rem);
}
.page-about .about-hero__title{
  margin:.55rem 0 0;
  font-size:clamp(2.7rem,9vw,6rem);
  font-weight:200;
  line-height:1.02;
  letter-spacing:-.035em;
}
.page-about .about-hero__title em{
  font-style:normal;
  color:var(--cyan);
  text-shadow:0 0 34px rgba(56,242,224,.35);
}
.page-about .about-hero__lede{
  max-width:46ch;
  margin:clamp(1rem,3vw,1.5rem) 0 0;
  font-size:1rem;
  line-height:1.85;
  color:var(--about-body);
}
.page-about .about-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:clamp(1.25rem,4vw,1.9rem);
}

.page-about .about-hero__board{
  display:grid;
  gap:.9rem;
  padding:clamp(1.1rem,3.5vw,1.6rem);
  border:1px solid var(--about-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(16,43,66,.9),rgba(10,27,43,.66));
  box-shadow:var(--shadow-panel);
}
.page-about .about-board__cap{
  margin:0 0 .2rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
}
.page-about .about-board__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid rgba(27,74,99,.5);
}
.page-about .about-board__row:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.page-about .about-board__num{
  font-family:var(--font-mono);
  font-size:clamp(1.3rem,4.6vw,1.7rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--cyan);
  white-space:nowrap;
}
.page-about .about-board__unit{
  font-size:.55em;
  color:var(--cyan-soft);
  margin-left:.15rem;
}
.page-about .about-board__label{
  font-size:.8rem;
  line-height:1.5;
  text-align:right;
  color:var(--ink-mute);
}

/* ---------- chapter shell ---------- */
.page-about .about-chapter{
  position:relative;
  padding-block:clamp(2.5rem,8vw,5.5rem);
}
.page-about .about-chapter--band::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(16,43,66,.46),rgba(5,13,23,0) 86%);
  pointer-events:none;
}
.page-about .about-chapter--band > .site-shell{
  position:relative;
}
.page-about .about-chapter__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:clamp(.9rem,3vw,2rem);
  margin-bottom:clamp(1.4rem,4vw,2.4rem);
}
.page-about .about-chapter__index{
  font-family:var(--font-mono);
  font-size:clamp(2.6rem,11vw,7rem);
  font-weight:200;
  line-height:.78;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(56,242,224,.42);
}
.page-about .about-chapter__head h2{
  margin:.3rem 0 0;
  font-size:clamp(1.5rem,4.4vw,2.55rem);
  font-weight:300;
  line-height:1.25;
  letter-spacing:-.01em;
}
.page-about .about-chapter__body{
  display:grid;
  gap:1rem;
  max-width:64ch;
}
.page-about .about-chapter__body p{
  margin:0;
  font-size:1rem;
  line-height:1.85;
  color:var(--about-body);
}
.page-about .about-lead{
  max-width:58ch;
  margin:0 0 clamp(1.25rem,4vw,2rem);
  font-size:1rem;
  line-height:1.85;
  color:var(--about-body);
}

/* ---------- split with figure ---------- */
.page-about .about-split{
  display:grid;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  margin-block:clamp(1.5rem,4vw,2.5rem);
}
.page-about .about-split__p{
  margin:0;
  font-size:1rem;
  line-height:1.85;
  color:var(--about-body);
}
.page-about .about-points{
  list-style:none;
  margin:1.1rem 0 0;
  padding:0;
  display:grid;
  gap:.75rem;
}
.page-about .about-points li{
  position:relative;
  padding-left:1.15rem;
  font-size:.95rem;
  line-height:1.75;
  color:var(--about-body);
}
.page-about .about-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(56,242,224,.7);
}
.page-about .about-points strong{
  color:var(--ink);
  font-weight:600;
}

.page-about .about-figure{
  display:grid;
  gap:.7rem;
  margin:0;
}
.page-about .about-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border:1px solid var(--about-line);
  border-radius:var(--radius-lg);
  background:rgba(16,43,66,.55);
  object-fit:cover;
}
.page-about .about-figure figcaption{
  font-family:var(--font-mono);
  font-size:.72rem;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--ink-mute);
}
.page-about .about-figure--wide{
  margin-top:clamp(1.75rem,4vw,2.75rem);
}

/* ---------- flow list ---------- */
.page-about .flow-list{
  list-style:none;
  margin:clamp(1.5rem,4vw,2.5rem) 0 0;
  padding:0;
}
.page-about .flow-step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.9rem,3vw,1.75rem);
  padding:clamp(1rem,3vw,1.5rem) 0;
  border-top:1px solid var(--about-line);
  transition:border-color var(--dur) var(--ease);
}
.page-about .flow-step:last-child{
  border-bottom:1px solid var(--about-line);
}
.page-about .flow-step:hover{
  border-top-color:var(--line-hard);
}
.page-about .flow-step__num{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--cyan);
  padding-top:.4rem;
  white-space:nowrap;
}
.page-about .flow-step h3{
  margin:0 0 .4rem;
  font-size:1.05rem;
  font-weight:600;
  color:var(--ink);
}
.page-about .flow-step p{
  margin:0;
  font-size:.94rem;
  line-height:1.8;
  color:var(--about-body);
}

/* ---------- roles ---------- */
.page-about .about-roles{
  margin-top:clamp(1.25rem,3vw,1.75rem);
}
.page-about .about-roles .filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.page-about .about-roles .filter-chip{
  border:1px solid var(--about-line);
  border-radius:var(--capsule);
  background:rgba(16,43,66,.62);
  color:var(--ink-mute);
  font-family:inherit;
  font-size:.82rem;
  line-height:1.2;
  padding:.55rem 1.05rem;
  cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.page-about .about-roles .filter-chip:hover{
  color:var(--ink);
  border-color:var(--line-hard);
}
.page-about .about-roles .filter-chip[aria-pressed="true"]{
  background:rgba(56,242,224,.14);
  border-color:rgba(56,242,224,.6);
  color:var(--cyan-soft);
}
.page-about .about-roles__status{
  margin:.85rem 0 1.1rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--ink-mute);
}
.page-about .role-grid{
  display:grid;
  gap:1rem;
}
.page-about .role-card{
  display:flex;
  flex-direction:column;
  gap:.65rem;
  padding:clamp(1.1rem,3.5vw,1.6rem);
  border:1px solid var(--about-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg,rgba(10,27,43,.95),rgba(5,13,23,.82));
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.page-about .role-card:hover{
  border-color:var(--line-hard);
  transform:translateY(-3px);
}
.page-about .role-card .pill{
  align-self:flex-start;
}
.page-about .role-card h3{
  margin:0;
  font-size:1.08rem;
  font-weight:600;
  color:var(--ink);
}
.page-about .role-card p{
  margin:0;
  font-size:.92rem;
  line-height:1.8;
  color:var(--about-body);
}
.page-about .role-card__foot{
  margin-top:auto;
  padding-top:.7rem;
  border-top:1px dashed rgba(27,74,99,.7);
  font-family:var(--font-mono);
  font-size:.72rem;
  line-height:1.6;
  color:var(--ink-mute);
}

/* ---------- milestones ---------- */
.page-about .milestones{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
}
.page-about .milestone{
  border:1px solid var(--about-line);
  border-radius:var(--radius-md);
  background:rgba(10,27,43,.72);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.page-about .milestone:hover{
  border-color:var(--line-hard);
}
.page-about .milestone summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(.7rem,3vw,1.4rem);
  padding:clamp(.85rem,2.6vw,1.1rem) clamp(1rem,3vw,1.4rem);
  cursor:pointer;
  list-style:none;
}
.page-about .milestone summary::-webkit-details-marker{
  display:none;
}
.page-about .milestone__year{
  font-family:var(--font-mono);
  font-size:clamp(1rem,3.4vw,1.2rem);
  font-weight:600;
  color:var(--cyan);
  letter-spacing:-.01em;
}
.page-about .milestone__title{
  font-size:.98rem;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.page-about .milestone__mark{
  position:relative;
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--line-hard);
  flex:none;
  transition:background var(--dur) var(--ease);
}
.page-about .milestone[open] .milestone__mark{
  background:rgba(56,242,224,.2);
}
.page-about .milestone__mark::before,
.page-about .milestone__mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--cyan);
  transform:translate(-50%,-50%);
}
.page-about .milestone__mark::before{
  width:9px;
  height:1.5px;
}
.page-about .milestone__mark::after{
  width:1.5px;
  height:9px;
  transition:opacity var(--dur) var(--ease);
}
.page-about .milestone[open] .milestone__mark::after{
  opacity:0;
}
.page-about .milestone__body{
  padding:0 clamp(1rem,3vw,1.4rem) clamp(1rem,3vw,1.3rem);
  border-top:1px solid rgba(27,74,99,.5);
}
.page-about .milestone__body p{
  margin:.85rem 0 0;
  font-size:.93rem;
  line-height:1.85;
  color:var(--about-body);
}

/* ---------- stats ---------- */
.page-about .stat-strip{
  border-top:1px solid var(--about-line);
}
.page-about .stat-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:clamp(.75rem,3vw,1.5rem);
  padding:clamp(.9rem,2.8vw,1.2rem) 0;
  border-bottom:1px solid var(--about-line);
}
.page-about .stat-row__num{
  font-family:var(--font-mono);
  font-size:clamp(1.6rem,6vw,2.6rem);
  font-weight:200;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--ink);
  white-space:nowrap;
}
.page-about .stat-row__num span{
  font-size:.45em;
  color:var(--cyan);
  margin-left:.22rem;
  letter-spacing:0;
}
.page-about .stat-row__label{
  font-size:.84rem;
  line-height:1.6;
  text-align:right;
  color:var(--ink-mute);
  max-width:22ch;
}

.page-about .about-partners{
  margin-top:clamp(2rem,5vw,3rem);
  padding:clamp(1.25rem,4vw,2.1rem);
  border:1px solid var(--about-line);
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,rgba(16,43,66,.82),rgba(5,13,23,.55));
}
.page-about .about-partners h3{
  margin:0 0 .7rem;
  font-size:1.15rem;
  font-weight:600;
  color:var(--ink);
}
.page-about .about-partners p{
  max-width:60ch;
  margin:0 0 1.2rem;
  font-size:.95rem;
  line-height:1.85;
  color:var(--about-body);
}

/* ---------- next ---------- */
.page-about .about-next{
  padding-block:clamp(2.5rem,7vw,4.5rem);
}
.page-about .about-next .site-shell{
  padding:clamp(1.4rem,5vw,3rem);
  border:1px solid var(--line-hard);
  border-radius:var(--radius-xl);
  background:radial-gradient(130% 150% at 12% 0%,rgba(56,242,224,.13),rgba(10,27,43,.92) 62%);
}
.page-about .about-next h2{
  margin:0 0 .7rem;
  font-size:clamp(1.45rem,4.4vw,2.1rem);
  font-weight:300;
  letter-spacing:-.01em;
}
.page-about .about-next p{
  max-width:56ch;
  margin:0 0 clamp(1.25rem,4vw,2rem);
  font-size:.95rem;
  line-height:1.85;
  color:var(--about-body);
}
.page-about .about-next__links{
  display:grid;
  gap:.7rem;
}
.page-about .about-next__link{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.25rem .9rem;
  padding:.9rem 1rem;
  border:1px solid rgba(27,74,99,.7);
  border-radius:var(--radius-md);
  background:rgba(10,27,43,.55);
  text-decoration:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.page-about .about-next__link:hover{
  border-color:rgba(56,242,224,.6);
  background:rgba(16,43,66,.8);
  transform:translateX(3px);
}
.page-about .about-next__idx{
  grid-row:span 2;
  align-self:start;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--cyan);
  padding-top:.2rem;
}
.page-about .about-next__name{
  font-size:.98rem;
  font-weight:600;
  color:var(--ink);
}
.page-about .about-next__desc{
  font-size:.82rem;
  line-height:1.6;
  color:var(--ink-mute);
}

/* ---------- desktop ---------- */
@media (min-width:760px){
  .page-about .role-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-about .about-next__links{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .page-about .about-next__link{
    grid-template-columns:minmax(0,1fr);
    gap:.4rem;
  }
  .page-about .about-next__idx{
    grid-row:auto;
  }
}

@media (min-width:900px){
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
    align-items:end;
  }
  .page-about .about-split{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-about .about-split--flip > .about-figure{
    order:2;
  }
  .page-about .about-chapter__head{
    gap:2.5rem;
  }
  .page-about .stat-row__label{
    max-width:34ch;
  }
  .page-about .flow-step{
    padding-inline:.4rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-about .role-card,
  .page-about .about-next__link,
  .page-about .flow-step{
    transition:none;
  }
  .page-about .role-card:hover,
  .page-about .about-next__link:hover{
    transform:none;
  }
}