/* ============================================================
   ABOUT PAGE — flex layouts, no grid.
   Faithful port of the about-page sections from
   resources/css/site.css (mission, stats band [base], team,
   certifications, timeline).
   ============================================================ */

/* ============ ABOUT HERO VIDEO (about page only) ============ */
.hero-video-bg{
  position:absolute; inset:0; z-index:0;
  display:flex;
}
.hero-video-bg video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:rgba(14,12,20,.42);
  background-image:radial-gradient(130% 130% at 20% 25%, rgba(14,12,20,.55) 0%, rgba(14,12,20,.2) 100%);
}

/* ============ MISSION ============ */
.about-mission{ padding:100px 0; background:var(--white); }
.mission-grid{ display:flex; gap:80px; align-items:flex-start; }
.mission-grid > *{ flex:1 1 0; min-width:0; }
.mission-copy h2{ font-size:clamp(28px,3.4vw,40px); margin:14px 0 18px; }
.mission-copy p{ color:var(--gray); font-size:15.5px; line-height:1.7; margin-bottom:16px; }
.mission-values{ display:flex; flex-wrap:wrap; gap:24px; }
.value-card{
  flex:1 1 calc((100% - 24px)/2); min-width:220px;
  padding:24px; border-radius:16px; border:1px solid var(--line);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.value-card:hover{ border-color:var(--purple-tint-2); box-shadow:0 8px 30px -12px rgba(149,80,201,.15); }
.value-ico{
  width:40px; height:40px; border-radius:10px;
  background:var(--purple-tint); display:flex; align-items:center; justify-content:center;
  color:var(--purple); margin-bottom:14px;
}
.value-ico svg{ width:18px; height:18px; }
.value-card h4{ font-size:15px; margin-bottom:8px; }
.value-card p{ font-size:13.5px; color:var(--gray); line-height:1.6; }

/* ============ TEAM ============ */
.team-section{ background:var(--white); padding:100px 0; }
.team-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.team-card{ flex:1 1 calc((100% - 72px)/4); min-width:220px; border-radius:18px; overflow:hidden; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; }
.team-card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px -15px rgba(149,80,201,.2); }
.team-card--featured{
  flex:1 1 100%;
  display:flex; flex-direction:row; align-items:stretch;
  max-width:860px; margin:0 auto;
  padding:0;
}
.team-card--featured .team-photo{
  flex:0 0 280px; width:280px; height:auto;
  aspect-ratio:auto; min-width:0; min-height:100%;
}
.team-card--featured .team-info{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:30px 32px;
}
.team-photo{ aspect-ratio:1; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.team-card:hover .team-photo img{ transform:scale(1.06); }
.team-info{ padding:20px; }
.team-info h4{ font-size:17px; margin-bottom:4px; }
.team-role{ font-size:12.5px; font-weight:600; color:var(--purple); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.team-bio{ font-size:13.5px; color:var(--gray); line-height:1.6; margin-bottom:14px; }
.team-certs{ display:flex; flex-wrap:wrap; gap:6px; }
.team-certs span{ font-size:11px; font-weight:600; background:var(--purple-tint); color:var(--purple-deep); padding:4px 9px; border-radius:999px; }

/* ============ CERTIFICATIONS (about page section) ============ */
.certs-section{ background:var(--purple-tint); padding:100px 0; }
.certs-inner{ display:flex; gap:64px; align-items:flex-start; }
.certs-inner > *{ flex:1 1 0; min-width:0; }
.certs-copy h2{ font-size:clamp(28px,3.2vw,38px); margin:14px 0 16px; }
.certs-copy p{ color:var(--gray); font-size:15px; line-height:1.65; }
.certs-grid{ display:flex; flex-wrap:wrap; gap:14px; }
.cert-badge{
  flex:1 1 calc((100% - 28px)/3); min-width:140px;
  background:var(--white); border-radius:14px; padding:20px;
  text-align:center; border:1px solid var(--purple-tint-2);
  transition:box-shadow .25s ease;
}
.cert-badge:hover{ box-shadow:0 8px 24px -8px rgba(149,80,201,.2); }
.cert-ico{ width:44px; height:44px; border-radius:12px; background:var(--purple-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; color:var(--purple-deep); }
.cert-ico svg{ width:20px; height:20px; }
.cert-name{ font-size:13.5px; font-weight:700; color:var(--black); margin-bottom:4px; }
.cert-desc{ font-size:11.5px; color:var(--gray); }

/* ============ TIMELINE (professional cards) ============ */
.timeline-section{ background:var(--white); padding:110px 0; }
.timeline{ position:relative; max-width:860px; margin:0 auto; padding-left:48px; }
.timeline::before{ content:""; position:absolute; left:18px; top:8px; bottom:8px; width:2px; background:linear-gradient(to bottom, var(--purple), var(--purple-tint-2)); border-radius:2px; }
.timeline-item{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 28px;
  margin-bottom:18px;
  margin-left:12px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.timeline-item:last-child{ margin-bottom:0; }
.timeline-item:hover{ transform:translateY(-3px); border-color:var(--purple-tint-2); box-shadow:0 16px 40px -14px rgba(149,80,201,.18); }
.timeline-year{
  position:absolute; left:-60px; top:26px;
  width:auto; height:auto;
  padding:7px 14px;
  border-radius:999px;
  background:var(--purple);
  color:var(--white);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  line-height:1;
  box-shadow:0 8px 20px -8px rgba(149,80,201,.5);
  border:2px solid var(--white);
  white-space:nowrap;
}
.timeline-year::after{ display:none; }
.timeline-content{ padding-left:0; }
.timeline-content h4{ font-size:17px; margin-bottom:8px; line-height:1.4; }
.timeline-content p{ font-size:14.5px; color:var(--gray); line-height:1.7; max-width:none; }
.timeline-content p a{ color:var(--purple); text-decoration:underline; }

/* ============ RESPONSIVE — ABOUT ============ */
@media (max-width:1100px){
  .team-grid > *{ flex:1 1 calc((100% - 24px)/2); }
  .team-card--featured{ flex:1 1 100%; min-width:100%; }
  .certs-inner{ flex-direction:column; }
}
@media (max-width:980px){
  .mission-grid{ flex-direction:column; gap:50px; }
}
@media (max-width:768px){
  .team-grid > *{ flex:1 1 100%; }
  .team-card--featured{ flex-direction:column; align-items:stretch; }
  .team-card--featured .team-photo{ flex:1 1 auto; width:100%; min-height:0; aspect-ratio:16/11; }
  .team-card--featured .team-info{ padding:22px 20px; }
  .mission-values > *{ flex:1 1 100%; }
  .certs-grid > *{ flex:1 1 calc((100% - 14px)/2); }
  .timeline{ padding-left:0; }
  .timeline::before{ left:10px; }
  .timeline-item{ margin-left:22px; padding:20px 20px 20px 22px; }
  .timeline-year{ position:relative; left:auto; top:auto; margin-bottom:12px; display:inline-flex; }
}