/* ==========================================================================
   AOM — About page styles
   ========================================================================== */

/* ---------- Hero ---------- */
.main-wrapper > .about-hero{margin:0;border-radius:0;--section-inset:0px}
.about-hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:5.5rem;padding-bottom:5.5rem;
  max-width:840px;
}
.about-hero-title{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.03em;margin-top:.9rem}
.about-hero-sub{margin-top:1.4rem;font-size:1.12rem;color:var(--grey-700);max-width:56ch}

/* ---------- Timeline — horizontal scroll story ----------
   The section pins to the viewport and the track pans left as the visitor
   scrolls down through it (see js/main.js), each milestone alternating
   above/below centre for a zigzag rhythm. Falls back to a plain swipeable
   strip on narrow screens and with reduced motion. */
.main-wrapper > .about-timeline{overflow:visible}
.about-timeline{background:var(--purple);color:var(--white);padding-top:6.5rem}
.about-timeline-head{margin-bottom:1rem}
.about-timeline-title{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-top:.6rem;max-width:20ch}

.about-timeline-pin{position:relative}
.about-timeline-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.about-timeline-track{
  display:flex;
  align-items:center;
  gap:clamp(2.5rem,6vw,6rem);
  padding:0 8vw;
  will-change:transform;
}
.about-timeline-item{
  flex:none;
  width:min(340px,72vw);
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.about-timeline-item--up{transform:translateY(-4rem)}
.about-timeline-item--down{transform:translateY(4rem)}
.about-timeline-card{display:flex;flex-direction:column;gap:.9rem}
.about-timeline-photo{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius-card);
}
.about-timeline-item-title{font-size:1.25rem;font-weight:550}
.about-timeline-item-text{color:var(--purple-100);max-width:32ch}
.about-timeline-year{
  font-family:var(--font-mono);
  font-size:clamp(2.6rem,5vw,4rem);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--purple-100);
}
@media (max-width:780px),(prefers-reduced-motion:reduce){
  .about-timeline-pin{height:auto!important}
  .about-timeline-sticky{position:static;height:auto;padding:1rem 0 2.5rem}
  .about-timeline-track{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding:0 var(--gutter);
    transform:none!important;
  }
  .about-timeline-item{scroll-snap-align:start}
  .about-timeline-item--up,.about-timeline-item--down{transform:none}
}

/* ---------- Team (moved here from the R&D page) ---------- */
.about-people{background:var(--ink);color:var(--white);padding:6rem 0}
.about-people-head{margin-bottom:2.6rem}
.about-people-title{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:.6rem}
.about-people-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2rem;
}
/* Plain editorial columns — equal width via grid gap, no divider. */
.about-people-card{position:relative}
.about-people-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grey-400);
}
.about-people-avatar{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:top center;
  border-radius:var(--radius-card);
  margin-top:1.1rem;
  transition:transform .5s var(--ease);
}
.about-people-card:hover .about-people-avatar{transform:scale(1.03)}
.about-people-name{font-size:1.15rem;font-weight:550;color:var(--white);margin-top:1.3rem}
.about-people-bio{margin-top:.5rem;font-size:.88rem;color:var(--grey-300)}
/* Credentials: a quiet ledger under the team, two columns of hairline
   rows, the heading in the copy voice rather than a label. */
.about-people-creds{margin-top:4.5rem;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.14)}
.about-people-creds-title{font-size:1.05rem;font-weight:500;color:var(--grey-400)}
.about-people-creds-list{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 3rem;
}
.about-people-creds-list li{
  padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:1.02rem;
  color:var(--white);
}
@media (max-width:960px){
  .about-people-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
}
@media (max-width:560px){
  .about-people-grid{grid-template-columns:1fr;row-gap:2rem}
  .about-people-creds{margin-top:3rem;padding-top:1.8rem}
  .about-people-creds-list{grid-template-columns:1fr;gap:0}
}

/* ---------- Facility ----------
   One photograph of the sterile hood, framed like every section, with
   the two facts set on it: title top-left, the pair of lines bottom-left
   over a quiet gradient. Nothing else — those are the facts we have. */
.about-facility-media{
  position:relative;
  min-height:clamp(420px,62vh,720px);
  border-radius:var(--radius-card);
  overflow:hidden;
  color:var(--white);
}
.about-facility-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.about-facility-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,6,8,.78) 0%,rgba(5,6,8,.25) 45%,rgba(5,6,8,.05) 70%,transparent);
  pointer-events:none;
}
.about-facility-copy{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  padding:2.6rem var(--gutter) 2.8rem;
}
.about-facility-title{font-size:clamp(2rem,3.8vw,3.2rem);letter-spacing:-.03em}
.about-facility-list{margin-top:1.4rem;display:flex;flex-direction:column;max-width:36rem}
.about-facility-list li{
  padding:.9rem 0;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:1.05rem;
  font-weight:480;
}
.about-facility-list li:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
@media (max-width:640px){
  .about-facility-media{min-height:78vh}
  .about-facility-copy{padding:1.8rem var(--gutter) 2rem}
}