.page-about{
  --about-node-size:3.5rem;
  --about-node-size-desktop:6.5rem;
  position:relative;
  overflow-x:hidden
}

.page-about .about-hero{
  position:relative;
  padding:2.5rem 0 2.75rem;
  background:
    radial-gradient(circle at 12% 18%, rgba(194,117,90,.1), transparent 28rem),
    var(--bg-50)
}
.page-about .about-hero__grid{
  display:grid;
  gap:2rem;
  align-items:center
}
.page-about .about-hero__copy{
  max-width:36rem
}
.page-about .about-hero .breadcrumb{
  margin:0 0 1.5rem
}
.page-about .about-hero__title{
  margin:.25rem 0 .875rem;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:clamp(1.875rem,5.5vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--text)
}
.page-about .about-hero__lead{
  color:var(--text-secondary);
  font-size:1.0625rem;
  line-height:1.7;
  max-width:34rem
}
.page-about .about-hero__stats{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.75rem;
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:2px solid var(--bg-200)
}
.page-about .about-hero__stat{
  display:flex;
  flex-direction:column;
  gap:.25rem
}
.page-about .about-hero__num{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:1.75rem;
  line-height:1;
  color:var(--text)
}
.page-about .about-hero__label{
  font-size:.8125rem;
  color:var(--text-secondary)
}
.page-about .about-hero__visual{
  position:relative
}
.page-about .about-hero__badge{
  position:absolute;
  z-index:2;
  top:-.75rem;
  right:1rem;
  width:3.5rem;
  height:3.5rem;
  border-radius:46% 54% 60% 40% / 42% 58% 42% 58%;
  background:var(--accent-fire);
  color:var(--on-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:1.0625rem;
  box-shadow:var(--shadow-lift)
}
.page-about .about-hero__visual .img-frame{
  margin:0;
  width:100%
}
.page-about .about-hero__visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover
}

@media (min-width:56rem){
  .page-about .about-hero{
    padding:4.5rem 0 5rem
  }
  .page-about .about-hero__grid{
    grid-template-columns:minmax(0,5fr) minmax(0,6fr);
    gap:clamp(2rem,7vw,5.5rem)
  }
  .page-about .about-hero__badge{
    top:-1.5rem;
    right:2.5rem
  }
}

.page-about .about-intro{
  background:var(--bg-100);
  padding-top:4rem;
  padding-bottom:4rem
}
.page-about .about-intro__grid{
  display:grid;
  gap:2rem
}
.page-about .about-intro__rail{
  display:flex;
  align-items:center;
  gap:.75rem
}
.page-about .about-intro__rail::before{
  content:'';
  width:.375rem;
  height:3.5rem;
  flex:0 0 auto;
  background:linear-gradient(to bottom,var(--accent-fire),var(--secondary-500));
  border-radius:var(--radius-pill)
}
.page-about .about-intro__rail-label{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-secondary);
  white-space:nowrap
}
.page-about .about-intro__content{
  max-width:42rem
}
.page-about .about-intro__lead{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:1.875rem;
  line-height:1.2;
  color:var(--text);
  margin:.25rem 0 1rem
}
.page-about .about-intro__body{
  color:var(--text-secondary);
  line-height:1.8
}
.page-about .about-intro__quote{
  position:relative;
  margin:1.75rem 0 0;
  padding-left:1.25rem;
  border-left:6px solid var(--accent-fire);
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1.375rem;
  line-height:1.4;
  color:var(--text)
}
.page-about .about-intro__quote p{
  margin:0
}

@media (min-width:56rem){
  .page-about .about-intro{
    padding-top:5.5rem;
    padding-bottom:5.5rem
  }
  .page-about .about-intro__grid{
    grid-template-columns:26% 1fr;
    gap:clamp(2rem,8vw,6rem)
  }
  .page-about .about-intro__rail{
    display:block;
    position:relative;
    min-height:14rem
  }
  .page-about .about-intro__rail::before{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:.375rem;
    height:auto
  }
  .page-about .about-intro__rail-label{
    position:absolute;
    top:4rem;
    left:1.75rem;
    writing-mode:vertical-rl;
    letter-spacing:.18em;
    font-size:.875rem
  }
}

.page-about .about-milestones{
  overflow:hidden
}
.page-about .milestone-track-wrap{
  position:relative;
  margin-top:2.5rem
}
.page-about .milestone-track__svg{
  display:none
}
.page-about .milestone-track{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  display:grid;
  gap:2.5rem;
  z-index:1
}
.page-about .milestone-track::before{
  content:'';
  position:absolute;
  left:calc(var(--about-node-size) / 2);
  top:.75rem;
  bottom:.75rem;
  width:.375rem;
  transform:translateX(-50%);
  border-radius:var(--radius-pill);
  background:linear-gradient(to bottom,var(--accent-fire),var(--secondary-500),var(--primary-300));
  opacity:.55
}
.page-about .milestone-item{
  display:grid;
  grid-template-columns:var(--about-node-size) minmax(0,1fr);
  gap:0 1rem;
  align-items:start
}
.page-about .milestone-item__year{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--about-node-size);
  height:var(--about-node-size);
  border-radius:46% 54% 62% 38% / 52% 44% 56% 48%;
  background:var(--accent-fire);
  color:var(--on-dark);
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:1rem;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.18)
}
.page-about .milestone-item__card{
  grid-column:2;
  background:var(--bg-50);
  border:1px solid var(--bg-200);
  border-radius:var(--radius-organic);
  padding:1.25rem 1.25rem 1.5rem;
  box-shadow:var(--shadow-float)
}
.page-about .milestone-item__card h3{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:1.4rem;
  margin:.5rem 0 .625rem
}
.page-about .milestone-item__card p{
  margin:0;
  color:var(--text-secondary);
  font-size:.9375rem;
  line-height:1.7
}

@media (min-width:56rem){
  .page-about .milestone-track-wrap{
    margin-top:3rem
  }
  .page-about .milestone-track__svg{
    display:block;
    position:absolute;
    left:50%;
    top:0;
    height:100%;
    width:60%;
    max-width:44rem;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
    opacity:.35
  }
  .page-about .milestone-track{
    gap:0
  }
  .page-about .milestone-track::before{
    left:50%;
    top:1rem;
    bottom:1rem
  }
  .page-about .milestone-item{
    grid-template-columns:1fr var(--about-node-size-desktop) 1fr;
    gap:0 1.75rem;
    min-height:15rem;
    align-items:center
  }
  .page-about .milestone-item__year{
    grid-column:2;
    grid-row:1;
    width:var(--about-node-size-desktop);
    height:var(--about-node-size-desktop);
    justify-self:center;
    font-size:1.5rem
  }
  .page-about .milestone-item:nth-child(odd) .milestone-item__card{
    grid-column:1;
    grid-row:1
  }
  .page-about .milestone-item:nth-child(even) .milestone-item__card{
    grid-column:3;
    grid-row:1
  }
  .page-about .milestone-item:nth-child(even) .milestone-item__year{
    transform:rotate(3deg)
  }
}

.page-about .about-tech{
  background:var(--bg-50);
  padding-top:4.5rem;
  padding-bottom:4.5rem
}
.page-about .about-tech__grid{
  display:grid;
  gap:2rem;
  align-items:center;
  margin-top:2rem
}
.page-about .about-tech__visual{
  width:100%;
  margin:0
}
.page-about .about-tech__visual img{
  width:100%;
  height:auto;
  object-fit:cover
}
.page-about .about-tech__content,
.page-about .about-tech__content p{
  color:var(--text-secondary);
  line-height:1.75
}
.page-about .about-tech__speed{
  display:flex;
  align-items:baseline;
  gap:.875rem;
  margin:0 0 1rem;
  padding:.75rem 1rem;
  background:var(--bg-100);
  border-left:6px solid var(--accent-fire);
  border-radius:0 var(--radius-organic) var(--radius-organic) 0
}
.page-about .about-tech__speed-num{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:3.25rem;
  line-height:1;
  color:var(--accent-fire)
}
.page-about .about-tech__speed-note{
  font-weight:700;
  color:var(--text-secondary)
}
.page-about .about-tech__list{
  list-style:none;
  margin:1.5rem 0 0;
  padding:0;
  display:grid;
  gap:.65rem
}
.page-about .about-tech__list li{
  position:relative;
  padding-left:1.5rem;
  color:var(--text-secondary);
  font-size:.9375rem
}
.page-about .about-tech__list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.65em;
  width:.625rem;
  height:.625rem;
  border-radius:50%;
  background:var(--secondary-500)
}

@media (min-width:56rem){
  .page-about .about-tech__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:3rem
  }
  .page-about .about-tech__visual{
    transform:rotate(-.5deg)
  }
}

.page-about .about-scale{
  position:relative;
  overflow:hidden;
  padding-top:4.5rem;
  padding-bottom:4.5rem
}
.page-about .about-scale__grid{
  display:grid;
  gap:2rem;
  align-items:center;
  margin-top:2.5rem
}
.page-about .about-scale__visual{
  width:100%;
  margin:0
}
.page-about .about-scale__visual img{
  width:100%;
  height:auto;
  object-fit:cover
}
.page-about .about-scale__body{
  color:var(--on-dark)
}
.page-about .about-scale__body p{
  color:rgba(245,240,232,.82);
  line-height:1.8
}
.page-about .about-scale__stats{
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem
}
.page-about .about-scale__stat{
  background:rgba(255,255,255,.08);
  border-radius:var(--radius-organic);
  padding:1rem 1rem 1.25rem
}
.page-about .about-scale__stat--lead{
  grid-column:1 / -1
}
.page-about .about-scale__stat dt{
  font-size:.8125rem;
  opacity:.72;
  margin-top:.4rem
}
.page-about .about-scale__stat dd{
  margin:0;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:2.5rem;
  line-height:1.1;
  color:var(--accent-300)
}

@media (min-width:56rem){
  .page-about .about-scale__grid{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    gap:clamp(2rem,6vw,4.5rem)
  }
}

.page-about .about-honors{
  background:var(--bg-100);
  padding-top:4.5rem;
  padding-bottom:4.5rem
}
.page-about .about-honors__note{
  max-width:46rem;
  color:var(--text-secondary);
  line-height:1.7
}
.page-about .about-honors__grid{
  display:grid;
  gap:1rem;
  margin-top:1.75rem
}
.page-about .about-honor{
  background:var(--bg-50);
  border:1px solid var(--bg-200);
  border-radius:var(--radius-organic);
  box-shadow:var(--shadow-float)
}
.page-about .about-honor__summary{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  padding:1.25rem 1.25rem 1.25rem 1.5rem;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  border:0;
  background:transparent;
  text-align:left;
  color:var(--text)
}
.page-about .about-honor__summary::-webkit-details-marker,
.page-about .about-honor__summary::marker{
  display:none;
  content:''
}
.page-about .about-honor__summary::after{
  content:'+';
  margin-left:auto;
  font-family:var(--font-heading);
  font-size:1.5rem;
  line-height:1;
  color:var(--accent-fire)
}
.page-about .about-honor[open] .about-honor__summary::after{
  content:'−'
}
.page-about .about-honor__num{
  color:var(--accent-fire);
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:.875rem
}
.page-about .about-honor__body{
  margin:0;
  padding:.4rem 1.5rem 1.4rem;
  color:var(--text-secondary);
  font-size:.9375rem;
  line-height:1.7;
  border-top:1px solid var(--bg-200)
}

.page-about .about-values{
  padding-top:4.5rem;
  padding-bottom:4.5rem
}
.page-about .about-values__grid{
  display:grid;
  gap:1.25rem;
  margin-top:2.25rem
}
.page-about .about-values__card{
  position:relative;
  background:var(--bg-50);
  border-radius:var(--radius-organic);
  padding:2rem 1.5rem 1.75rem;
  box-shadow:var(--shadow-float)
}
.page-about .about-values__index{
  display:block;
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:3rem;
  line-height:.75;
  color:var(--accent-300);
  margin-bottom:1.25rem
}
.page-about .about-values__card h3{
  font-family:var(--font-heading);
  font-style:italic;
  font-weight:700;
  font-size:1.5rem;
  margin:.5rem 0 .5rem
}
.page-about .about-values__card p{
  color:var(--text-secondary);
  font-size:.9375rem;
  line-height:1.7;
  margin:0
}
.page-about .about-values__card--2{
  transform:translateY(.75rem) rotate(.5deg)
}
.page-about .about-values__card--3{
  transform:rotate(-.35deg)
}

@media (min-width:56rem){
  .page-about .about-values__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem
  }
  .page-about .about-values__card--1{
    transform:translateY(-.5rem) rotate(-.5deg)
  }
  .page-about .about-values__card--2{
    transform:translateY(1rem) rotate(.8deg)
  }
}

.page-about .about-links{
  background:var(--bg-50);
  padding-top:4.5rem;
  padding-bottom:4.5rem
}
.page-about .about-links__grid{
  display:grid;
  gap:1.25rem;
  margin-top:2rem
}
.page-about .about-links__card{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  align-items:flex-start;
  padding:1.5rem;
  background:var(--bg-100);
  border:1px solid var(--bg-200);
  border-radius:var(--radius-organic);
  text-decoration:none;
  color:var(--text);
  box-shadow:var(--shadow-float);
  transition:transform .2s, box-shadow .2s
}
.page-about .about-links__card strong{
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1.125rem;
  line-height:1.4
}
.page-about .about-links__arrow{
  margin-top:auto;
  align-self:flex-end;
  color:var(--accent-fire);
  font-weight:700;
  font-size:1.25rem;
  transition:transform .2s
}
.page-about .about-links__card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift)
}
.page-about .about-links__card:hover .about-links__arrow{
  transform:translateX(.25rem)
}

@media (min-width:56rem){
  .page-about .about-links__grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (prefers-reduced-motion: reduce){
  .page-about *,
  .page-about *::before,
  .page-about *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
}
