.page-about{
  --about-mountain-top:#0E4064;
  --about-mountain-mid:#145A8A;
  --about-mountain-hi:#1C76AD;
  --about-hero-text:#F4F6F7;
  --about-silver-bg:#E6ECEF;
  --about-card-radius:18px;
  font-family:var(--font-body);
  color:var(--color-ink);
  background:var(--color-snow);
  overflow-x:hidden;
}
.page-about .container{
  width:min(1200px,100% - 40px);
  margin-inline:auto;
}

/* ========== HERO ========== */
.page-about .about-hero{
  position:relative;
  padding-top:calc(var(--header-total) + 48px);
  padding-bottom:0;
  background:linear-gradient(150deg,var(--color-ink) 0%,var(--about-mountain-mid) 70%,var(--about-mountain-hi) 100%);
  color:var(--about-hero-text);
}
.page-about .about-hero-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  padding-bottom:32px;
}
.page-about .about-hero-copy{
  min-width:0;
}
.page-about .about-hero-kicker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:14px 0 10px;
}
.page-about .about-hero-kicker-text{
  font-size:.875rem;
  letter-spacing:.14em;
  color:rgba(244,246,247,.85);
}
.page-about .about-hero-title{
  font-family:var(--font-title);
  font-size:2rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0 0 16px;
  max-width:760px;
}
.page-about .about-hero-lead{
  font-size:1rem;
  line-height:1.7;
  color:rgba(244,246,247,.9);
  max-width:660px;
  margin-bottom:28px;
}
.page-about .about-hero-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:28px;
}
.page-about .about-hero-stat{
  background:rgba(244,246,247,.1);
  border:1px solid rgba(244,246,247,.14);
  border-radius:var(--radius-md);
  padding:16px 14px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.page-about .about-hero-stat:hover{
  background:rgba(244,246,247,.16);
  transform:translateY(-2px);
}
.page-about .about-hero-stat-num{
  display:block;
  font-family:var(--font-mono);
  font-size:1.4rem;
  font-weight:500;
  line-height:1.2;
  color:#fff;
}
.page-about .about-hero-stat-label{
  display:block;
  margin-top:6px;
  font-size:.78rem;
  color:rgba(244,246,247,.75);
}
.page-about .about-toc{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  padding:14px 0 0;
  border-top:1px solid rgba(244,246,247,.18);
}
.page-about .about-toc-label{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  color:rgba(244,246,247,.65);
  margin-right:4px;
}
.page-about .about-toc-link{
  font-size:.82rem;
  color:#F4F6F7;
  background:rgba(244,246,247,.1);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(244,246,247,.16);
  text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.page-about .about-toc-link:hover,
.page-about .about-toc-link:focus-visible{
  background:rgba(44,143,191,.65);
  border-color:rgba(44,143,191,.8);
  outline:none;
}
.page-about .about-hero-aside{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:120px;
  padding:24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(11,14,17,.38),rgba(20,90,138,.32));
  border:1px solid rgba(244,246,247,.16);
  overflow:hidden;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.page-about .about-hero-bigversion{
  position:absolute;
  right:12px;
  top:-18px;
  font-family:var(--font-title);
  font-size:6rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.05em;
  color:rgba(244,246,247,.12);
  user-select:none;
  pointer-events:none;
}
.page-about .about-hero-aside-note{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  color:rgba(244,246,247,.62);
  margin:0 0 8px;
}
.page-about .about-hero-aside-desc{
  font-size:.88rem;
  line-height:1.6;
  color:rgba(244,246,247,.92);
  margin:0;
  max-width:300px;
}
.page-about .about-hero-figure{
  margin:0;
  max-width:1200px;
  margin-inline:auto;
  padding:0 20px;
}
.page-about .about-hero-img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-lg);
  object-fit:cover;
  aspect-ratio:1200 / 600;
}
.page-about .about-hero-caption{
  font-size:.8rem;
  color:rgba(244,246,247,.6);
  padding:10px 6px 0;
}
.page-about .about-hero-ridge{
  height:44px;
  margin-top:0;
  background:var(--color-snow);
  clip-path:polygon(0 100%,0 55%,14% 24%,26% 48%,38% 10%,52% 42%,68% 18%,84% 52%,100% 22%,100% 100%);
}
.page-about .breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:rgba(244,246,247,.7);
}
.page-about .breadcrumb-link{
  color:rgba(244,246,247,.7);
  text-decoration:none;
}
.page-about .breadcrumb-link:hover{
  color:#fff;
}
.page-about .breadcrumb-current{
  color:#fff;
}

/* ========== SHARED SECTION HEAD ========== */
.page-about .about-section-head{
  padding-top:64px;
  padding-bottom:32px;
  max-width:760px;
  margin-bottom:8px;
}
.page-about .about-section-head .section-title{
  font-family:var(--font-title);
  font-size:1.75rem;
  font-weight:800;
  line-height:1.25;
  margin:6px 0 12px;
}
.page-about .about-section-head .about-section-desc{
  font-size:1rem;
  line-height:1.7;
  color:var(--color-gray);
  margin:0;
}
.page-about .about-section-head-light .section-title{
  color:#F4F6F7;
}
.page-about .about-section-head-light .section-subtitle{
  color:rgba(244,246,247,.55);
}
.page-about .about-section-head-light .about-section-desc{
  color:rgba(244,246,247,.72);
}
.page-about .divider-flag{
  height:4px;
  background:linear-gradient(90deg,#2C8FBF 0 20%,#2E9B6B 20% 40%,#E6A817 40% 60%,#C04848 60% 80%,#F4F6F7 80% 100%);
}
.page-about .panel-silver{
  background:var(--about-silver-bg);
}
.page-about .panel-snow{
  background:var(--color-snow);
}
.page-about .panel-dark{
  background:linear-gradient(180deg,var(--about-mountain-top) 0%,var(--about-mountain-mid) 100%);
  color:var(--about-hero-text);
}
.page-about .panel-ink{
  background:var(--color-ink);
  color:#F4F6F7;
}

/* ========== STORY / TIMELINE ========== */
.page-about .about-story-inner{
  padding-bottom:72px;
}
.page-about .about-timeline{
  position:relative;
  margin:32px 0 8px;
  padding-left:26px;
}
.page-about .about-timeline::before{
  content:'';
  position:absolute;
  left:8px;
  top:8px;
  bottom:12px;
  width:2px;
  background:linear-gradient(180deg,#2C8FBF 0%,#2E9B6B 30%,#E6A817 62%,#C04848 100%);
  border-radius:2px;
}
.page-about .about-timeline-item{
  position:relative;
  padding:0 0 40px 22px;
}
.page-about .about-timeline-item::before{
  content:'';
  position:absolute;
  left:-21px;
  top:6px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--color-flag-blue);
  border:3px solid var(--color-snow);
  box-shadow:0 0 0 2px rgba(44,143,191,.35);
}
.page-about .about-timeline-item-current::before{
  background:var(--color-flag-yellow);
  border-color:#F4F6F7;
  box-shadow:0 0 0 4px rgba(230,168,23,.28);
}
.page-about .about-timeline-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.page-about .about-timeline-year{
  font-family:var(--font-mono);
  font-size:1.1rem;
  font-weight:500;
  color:var(--about-mountain-mid);
}
.page-about .about-timeline-item-current .about-timeline-year{
  color:var(--color-flag-yellow);
  font-weight:700;
}
.page-about .about-timeline-content{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:18px 18px 16px;
  border-left:3px solid var(--color-flag-blue);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.page-about .about-timeline-item:hover .about-timeline-content{
  box-shadow:var(--shadow-md);
  transform:translateX(3px);
}
.page-about .about-timeline-item-current .about-timeline-content{
  border-left-color:var(--color-flag-yellow);
}
.page-about .about-timeline-content h3{
  font-family:var(--font-title);
  font-size:1.06rem;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.35;
}
.page-about .about-timeline-content p{
  font-size:.9rem;
  line-height:1.65;
  color:var(--color-gray);
  margin:0;
}
.page-about .about-milestone{
  margin:40px 0 0;
}
.page-about .about-milestone-img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  object-fit:cover;
  aspect-ratio:900 / 400;
}
.page-about .about-milestone-caption{
  font-size:.8rem;
  color:var(--color-gray);
  text-align:right;
  padding:8px 4px 0;
}

/* ========== TEAM ========== */
.page-about .about-team-inner{
  padding-bottom:80px;
}
.page-about .about-team-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
.page-about .about-team-roles{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-about .about-team-card{
  background:#fff;
  border-radius:var(--radius-md);
  padding:18px 18px 16px;
  box-shadow:var(--shadow-sm);
  border-top:3px solid var(--color-primary);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.page-about .about-team-card:hover,
.page-about .about-team-card:focus-within{
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.page-about .about-team-card:nth-child(2){
  border-top-color:var(--color-flag-green);
}
.page-about .about-team-card:nth-child(3){
  border-top-color:var(--color-flag-blue);
}
.page-about .about-team-card:nth-child(4){
  border-top-color:var(--color-flag-yellow);
}
.page-about .about-team-card-num{
  font-family:var(--font-mono);
  font-size:1.5rem;
  font-weight:500;
  color:var(--about-mountain-mid);
}
.page-about .about-team-card h3{
  font-family:var(--font-title);
  font-size:1rem;
  font-weight:700;
  margin:8px 0 6px;
}
.page-about .about-team-card p{
  font-size:.86rem;
  line-height:1.6;
  color:var(--color-gray);
  margin:0;
}
.page-about .about-team-figure{
  margin:0;
}
.page-about .about-team-img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  object-fit:cover;
  aspect-ratio:800 / 500;
}
.page-about .about-team-caption{
  font-size:.8rem;
  color:var(--color-gray);
  text-align:left;
  padding:8px 4px 0;
}

/* ========== CERTIFICATION ========== */
.page-about .about-cert-inner{
  padding-bottom:80px;
}
.page-about .about-cert-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.page-about .about-cert-card{
  background:rgba(244,246,247,.1);
  border:1px solid rgba(244,246,247,.16);
  border-radius:var(--about-card-radius);
  padding:22px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
  outline:none;
  cursor:default;
}
.page-about .about-cert-card:hover,
.page-about .about-cert-card:focus-visible{
  background:rgba(244,246,247,.16);
  box-shadow:var(--glow-blue);
  transform:translateY(-4px);
}
.page-about .about-cert-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--color-flag-blue);
  background:rgba(44,143,191,.12);
  border:1px solid rgba(44,143,191,.35);
  border-radius:var(--radius-sm);
  padding:4px 10px;
  margin-bottom:12px;
}
.page-about .about-cert-card:nth-child(2) .about-cert-badge{
  color:var(--color-flag-green);
  background:rgba(46,155,107,.12);
  border-color:rgba(46,155,107,.35);
}
.page-about .about-cert-card:nth-child(3) .about-cert-badge{
  color:var(--color-flag-yellow);
  background:rgba(230,168,23,.12);
  border-color:rgba(230,168,23,.35);
}
.page-about .about-cert-card h3{
  font-family:var(--font-title);
  font-size:1.15rem;
  font-weight:700;
  color:#F4F6F7;
  margin:0 0 8px;
}
.page-about .about-cert-card .about-cert-card-front p{
  font-size:.9rem;
  color:rgba(244,246,247,.75);
  margin:0;
}
.page-about .about-cert-detail{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(244,246,247,.16);
  font-size:.86rem;
  line-height:1.6;
  color:rgba(244,246,247,.78);
}
.page-about .about-cert-detail p{
  margin:0;
}

/* ========== ECOSYSTEM ========== */
.page-about .about-ecosystem-inner{
  padding-bottom:80px;
}
.page-about .about-ecosystem-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  counter-reset:eco-counter;
}
.page-about .about-ecosystem-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--color-silver);
  transition:background .2s var(--ease);
}
.page-about .about-ecosystem-item:first-of-type{
  border-top:1px solid var(--color-silver);
}
.page-about .about-ecosystem-item:hover{
  background:rgba(20,90,138,.04);
}
.page-about .about-ecosystem-index{
  font-family:var(--font-mono);
  font-size:1rem;
  font-weight:500;
  color:var(--color-flag-blue);
  background:rgba(44,143,191,.08);
  border:1px solid rgba(44,143,191,.2);
  border-radius:8px;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-about .about-ecosystem-item:nth-child(2) .about-ecosystem-index{
  color:var(--color-flag-green);
  background:rgba(46,155,107,.08);
  border-color:rgba(46,155,107,.2);
}
.page-about .about-ecosystem-item:nth-child(3) .about-ecosystem-index{
  color:var(--color-flag-yellow);
  background:rgba(230,168,23,.08);
  border-color:rgba(230,168,23,.2);
}
.page-about .about-ecosystem-body h3{
  font-family:var(--font-title);
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 8px;
}
.page-about .about-ecosystem-body p{
  font-size:.92rem;
  line-height:1.65;
  color:var(--color-gray);
  margin:0;
}

/* ========== WELFARE ========== */
.page-about .about-welfare-inner{
  padding-bottom:80px;
}
.page-about .about-welfare-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.page-about .about-welfare-card{
  background:linear-gradient(145deg,rgba(20,90,138,.22),rgba(11,14,17,.6));
  border:1px solid rgba(244,246,247,.12);
  border-radius:var(--radius-lg);
  padding:24px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.page-about .about-welfare-card:hover{
  background:linear-gradient(145deg,rgba(44,143,191,.28),rgba(11,14,17,.72));
  transform:translateY(-3px);
}
.page-about .about-welfare-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  font-size:1.1rem;
  color:#F4F6F7;
  background:rgba(44,143,191,.2);
  border:1px solid rgba(44,143,191,.35);
  margin-bottom:16px;
}
.page-about .about-welfare-card:nth-child(2) .about-welfare-icon{
  background:rgba(46,155,107,.2);
  border-color:rgba(46,155,107,.35);
}
.page-about .about-welfare-card:nth-child(3) .about-welfare-icon{
  background:rgba(230,168,23,.2);
  border-color:rgba(230,168,23,.35);
}
.page-about .about-welfare-card h3{
  font-family:var(--font-title);
  font-size:1.1rem;
  font-weight:700;
  color:#F4F6F7;
  margin:0 0 10px;
}
.page-about .about-welfare-card p{
  font-size:.9rem;
  line-height:1.65;
  color:rgba(244,246,247,.72);
  margin:0;
}

/* ========== OUTRO ========== */
.page-about .about-outro{
  background:linear-gradient(120deg,var(--color-primary-deep) 0%,var(--about-mountain-mid) 100%);
  color:#F4F6F7;
}
.page-about .about-outro-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding-top:56px;
  padding-bottom:56px;
  align-items:center;
}
.page-about .about-outro-copy .section-subtitle{
  color:rgba(244,246,247,.6);
}
.page-about .about-outro-title{
  font-family:var(--font-title);
  font-size:1.8rem;
  font-weight:800;
  line-height:1.25;
  margin:6px 0 12px;
}
.page-about .about-outro-desc{
  font-size:1rem;
  line-height:1.65;
  color:rgba(244,246,247,.75);
  margin:0;
}
.page-about .about-outro-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}
.page-about .about-outro-link{
  font-size:.9rem;
  color:rgba(244,246,247,.85);
  text-decoration:none;
  padding:10px 16px;
  border:1px solid rgba(244,246,247,.3);
  border-radius:999px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.page-about .about-outro-link:hover,
.page-about .about-outro-link:focus-visible{
  background:rgba(244,246,247,.16);
  border-color:rgba(244,246,247,.55);
  outline:none;
}

/* ========== IMAGE SAFETY ========== */
.page-about img{
  max-width:100%;
}

/* ========== RESPONSIVE ========== */
@media (min-width:640px){
  .page-about .about-hero-title{
    font-size:2.4rem;
  }
  .page-about .about-hero-stats{
    grid-template-columns:repeat(4,1fr);
  }
  .page-about .about-cert-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .page-about .about-welfare-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .page-about .about-timeline{
    padding-left:30px;
  }
}

@media (min-width:1024px){
  .page-about .about-hero-inner{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:56px;
    align-items:end;
  }
  .page-about .about-hero-title{
    font-size:3rem;
    line-height:1.18;
  }
  .page-about .about-hero-lead{
    font-size:1.06rem;
  }
  .page-about .about-hero-aside{
    min-height:180px;
    padding:28px;
  }
  .page-about .about-hero-bigversion{
    font-size:7rem;
  }
  .page-about .about-hero-ridge{
    height:64px;
  }
  .page-about .about-section-head{
    padding-top:88px;
  }
  .page-about .about-team-layout{
    grid-template-columns:1fr 1fr;
    gap:52px;
  }
  .page-about .about-cert-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .page-about .about-welfare-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .page-about .about-outro-inner{
    grid-template-columns:1fr auto;
    padding-top:72px;
    padding-bottom:72px;
  }
}