.page-about{
  --about-space:56px;
  --about-muted:rgba(229,231,235,.12);
  --about-card-pad:20px;
  position:relative;
  background:var(--color-deep-blue);
  color:var(--color-silver);
  font-family:var(--font-body);
  padding-bottom:var(--space-2xl);
  overflow-x:hidden;
}

.page-about::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:420px;
  background:
    linear-gradient(120deg,rgba(230,57,70,.32) 0%,rgba(230,57,70,.08) 22%,transparent 46%),
    linear-gradient(200deg,rgba(0,212,255,.16) 0%,transparent 40%);
  clip-path:polygon(0 0,100% 0,100% 260px,0 420px);
  pointer-events:none;
  z-index:0;
}

.page-about > .container{
  position:relative;
  z-index:1;
}

.page-about .breadcrumb{
  padding-top:24px;
  margin-bottom:8px;
}

.page-about__intro{
  padding:40px 0 24px;
  border-bottom:1px solid var(--border-thin);
}

.page-about__eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.18em;
  color:var(--color-yellow);
  text-transform:uppercase;
  margin-bottom:12px;
}

.page-about__intro h1{
  font-family:var(--font-head);
  font-size:clamp(34px,7vw,62px);
  line-height:.98;
  color:var(--color-white);
  text-transform:uppercase;
  letter-spacing:.02em;
  max-width:900px;
  margin:0 0 16px;
}

.page-about__lead{
  font-size:15px;
  line-height:1.8;
  color:var(--color-gray);
  max-width:720px;
  margin-bottom:24px;
}

.page-about__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.page-about__toc{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  padding:16px 0;
  border-bottom:1px solid var(--border-thin);
  margin-bottom:24px;
}

.page-about__toc-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--color-data-blue);
  text-transform:uppercase;
}

.page-about__toc a{
  color:var(--color-gray);
  text-decoration:none;
  font-size:13px;
  transition:color var(--transition-fast);
}

.page-about__toc a:hover,
.page-about__toc a:focus-visible{
  color:var(--color-yellow);
}

.page-about__section-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:var(--about-space) 0 20px;
  padding-top:24px;
  border-top:1px solid var(--border-thin);
}

.page-about__section-head h2{
  font-family:var(--font-head);
  font-size:clamp(24px,3.6vw,36px);
  color:var(--color-white);
  line-height:1.05;
  margin:0;
  text-transform:uppercase;
}

.page-about__section-index{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--color-red);
  font-weight:600;
}

.page-about__mission-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.page-about__mission-copy p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 12px;
}

.page-about__mission-card{
  background:linear-gradient(135deg,rgba(17,43,84,.9),rgba(11,27,46,.9));
  border:1px solid var(--border-thin);
  border-left:3px solid var(--color-red);
  border-radius:8px;
  padding:var(--about-card-pad);
  box-shadow:var(--shadow-card);
}

.page-about__mission-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--color-gray);
  text-transform:uppercase;
  margin-bottom:8px;
}

.page-about__mission-claim{
  font-family:var(--font-head);
  font-size:28px;
  line-height:1.1;
  color:var(--color-white);
  margin:0 0 10px;
  text-transform:uppercase;
}

.page-about__mission-card p:last-child{
  font-size:14px;
  line-height:1.7;
  color:var(--color-silver);
  margin:0;
}

.page-about__capability-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.page-about__capability-copy p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 12px;
}

.page-about__capability-img,
.page-about__eco-img,
.page-about__team-img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--border-thin);
  box-shadow:var(--shadow-card);
}

.page-about__progress{
  margin-top:24px;
  display:grid;
  gap:14px;
}

.page-about__progress-row{
  display:grid;
  grid-template-columns:96px 1fr 88px;
  align-items:center;
  gap:12px;
  font-size:13px;
}

.page-about__progress-label{
  color:var(--color-silver);
}

.page-about__progress-track{
  display:block;
  height:6px;
  background:rgba(0,0,0,.4);
  border-radius:99px;
  overflow:hidden;
}

.page-about__progress-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--color-red),var(--color-yellow));
  border-radius:99px;
}

.page-about__progress-value{
  font-family:var(--font-mono);
  color:var(--color-yellow);
  text-align:right;
  white-space:nowrap;
}

.page-about__stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:32px;
}

.page-about__stat-card{
  background:var(--color-dark-blue);
  border:1px solid var(--border-thin);
  padding:20px 16px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition-base),border-color var(--transition-base);
  animation:page-about-rise 500ms ease backwards;
}

.page-about__stat-card:hover{
  transform:translateY(-3px);
  border-color:rgba(249,199,79,.45);
}

.page-about__stat-card:nth-child(2){
  animation-delay:60ms;
}

.page-about__stat-card:nth-child(3){
  animation-delay:120ms;
}

.page-about__stat-card:nth-child(4){
  animation-delay:180ms;
}

.page-about__stat-value{
  font-family:var(--font-mono);
  font-size:30px;
  font-weight:700;
  line-height:1;
  color:var(--color-white);
}

.page-about__stat-card:nth-child(1) .page-about__stat-value{
  color:var(--color-data-blue);
}

.page-about__stat-card:nth-child(2) .page-about__stat-value{
  color:var(--color-yellow);
}

.page-about__stat-card:nth-child(3) .page-about__stat-value{
  color:var(--color-red);
}

.page-about__stat-label{
  font-size:13px;
  color:var(--color-gray);
}

.page-about__timeline{
  --tl-pad:36px;
  --tl-dot:14px;
  position:relative;
  display:grid;
  gap:var(--space-xl);
  padding-left:var(--tl-pad);
  margin-top:32px;
}

.page-about__timeline::before{
  content:"";
  position:absolute;
  left:calc((var(--tl-pad) - 2px) * .5);
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg,var(--color-red),var(--color-yellow));
}

.page-about__tl-item{
  position:relative;
  animation:page-about-rise 500ms ease backwards;
}

.page-about__tl-item:nth-child(2){
  animation-delay:80ms;
}

.page-about__tl-item:nth-child(3){
  animation-delay:160ms;
}

.page-about__tl-item:nth-child(4){
  animation-delay:240ms;
}

.page-about__tl-item:nth-child(5){
  animation-delay:320ms;
}

.page-about__tl-dot{
  position:absolute;
  left:calc((var(--tl-pad) + var(--tl-dot)) * -.5);
  top:18px;
  width:var(--tl-dot);
  height:var(--tl-dot);
  border-radius:50%;
  background:var(--color-deep-blue);
  border:2px solid var(--color-yellow);
  box-shadow:0 0 0 2px rgba(249,199,79,.22);
}

.page-about__tl-card{
  background:rgba(17,43,84,.55);
  border:1px solid var(--border-thin);
  border-left:3px solid var(--color-red);
  border-radius:8px;
  padding:18px;
  transition:background var(--transition-base),transform var(--transition-base);
}

.page-about__tl-item:hover .page-about__tl-card{
  background:rgba(17,43,84,.9);
  transform:translateX(4px);
}

.page-about__tl-tag{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--color-yellow);
  text-transform:uppercase;
  margin-bottom:6px;
}

.page-about__tl-card h3{
  font-family:var(--font-head);
  font-size:22px;
  color:var(--color-white);
  margin:0 0 8px;
  text-transform:uppercase;
}

.page-about__tl-card p{
  font-size:14px;
  line-height:1.7;
  margin:0;
  color:var(--color-silver);
}

.page-about__eco-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.page-about__eco-copy p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 12px;
}

.page-about__eco-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:24px;
}

.page-about__eco-card{
  background:var(--color-dark-blue);
  border:1px solid var(--border-thin);
  border-radius:8px;
  padding:18px;
  border-top:2px solid var(--color-data-blue);
}

.page-about__eco-card:nth-child(2){
  border-top-color:var(--color-yellow);
}

.page-about__eco-card:nth-child(3){
  border-top-color:var(--color-red);
}

.page-about__eco-card h3{
  font-family:var(--font-head);
  font-size:18px;
  color:var(--color-white);
  margin:0 0 8px;
  text-transform:uppercase;
}

.page-about__eco-card p{
  font-size:14px;
  line-height:1.7;
  margin:0;
  color:var(--color-silver);
}

.page-about__team-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:center;
}

.page-about__team-copy p{
  font-size:15px;
  line-height:1.8;
  margin:0 0 12px;
}

.page-about__team-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
}

.page-about__team-list li{
  position:relative;
  padding:10px 0 10px 24px;
  font-size:14px;
  border-bottom:1px solid var(--about-muted);
  color:var(--color-silver);
}

.page-about__team-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  width:8px;
  height:8px;
  background:var(--color-red);
  transform:skewX(-12deg);
}

.page-about__related{
  margin-top:64px;
  padding:32px 24px;
  border-radius:12px;
  background:
    linear-gradient(135deg,rgba(230,57,70,.16),transparent 50%),
    var(--color-dark-blue);
  border:1px solid var(--border-thin);
}

.page-about__related-copy{
  text-align:center;
  margin-bottom:20px;
}

.page-about__related h2{
  font-family:var(--font-head);
  font-size:28px;
  color:var(--color-white);
  margin:0 0 8px;
  text-transform:uppercase;
}

.page-about__related p{
  margin:0;
  color:var(--color-gray);
  font-size:14px;
}

.page-about__related-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

@keyframes page-about-rise{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (min-width:768px){
  .page-about__mission-grid{
    grid-template-columns:1.4fr 1fr;
    align-items:start;
  }

  .page-about__capability-wrap{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }

  .page-about__stat-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .page-about__timeline{
    --tl-pad:48px;
  }

  .page-about__eco-grid{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }

  .page-about__eco-cards{
    grid-template-columns:repeat(3,1fr);
  }

  .page-about__team-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (min-width:1024px){
  .page-about__intro{
    padding-top:64px;
  }

  .page-about__intro h1{
    font-size:72px;
  }

  .page-about__stat-card{
    padding:28px 20px;
  }

  .page-about__related{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }

  .page-about__related-copy{
    text-align:left;
    margin-bottom:0;
  }

  .page-about__related-actions{
    flex-wrap:nowrap;
  }
}