/* ==========================================================================
   ABOUT (COMPANY) PAGE — page-specific styles only.
   Tokens, header, footer, buttons, cards (.bento-card, .svc-card) and
   section-label are all inherited from style.css / services.css / projects.css.
========================================================================== */

/* ---------- HERO ---------- */
.about-page-hero{ padding-top:calc(var(--section-y) + 60px); padding-bottom:40px; text-align:center; }
.about-page-hero h1{ font-size:clamp(34px,5vw,58px); max-width:820px; margin:18px auto 0; cursor:default; }
.about-page-hero h1 span{ display:inline-block; transition:letter-spacing .5s cubic-bezier(.2,.8,.2,1), color .5s ease; }
.about-page-hero h1:hover span{ letter-spacing:0.01em; color:var(--accent1); }
.about-page-hero p{ margin:22px auto 0; max-width:600px; color:var(--text-muted); font-size:18px; line-height:1.65; }
@media (max-width:640px){
  .about-page-hero{ padding-top:calc(var(--section-y) + 30px); padding-bottom:24px; }
  .about-page-hero h1{ font-size:clamp(28px, 6vw, 42px); }
  .about-page-hero p{ font-size:15.5px; margin-top:16px; }
}

/* ---------- MISSION PULL-QUOTE ---------- */
.mission-block{ padding-top:10px; text-align:center; }
.mission-block .wrap{ max-width:920px; }
.mission-block p{
  font-size:clamp(24px,3.4vw,38px); font-weight:500; line-height:1.4;
  color:var(--text);
}
.mission-block span{ color:var(--accent1); }
@media (max-width:640px){
  .mission-block p{ font-size:clamp(19px, 4.5vw, 26px); }
}

/* ---------- CENTERED ZIG-ZAG TIMELINE ---------- */
.timeline-zigzag{ position:relative; margin-top:64px; }
.timeline-zigzag::before{
  content:'';
  position:absolute; top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, var(--border) 0 8px, transparent 8px 16px);
}
.timeline-zz-item{
  position:relative;
  width:50%;
  padding:0 50px 60px;
}
.timeline-zz-item:nth-child(odd){ left:0; text-align:right; }
.timeline-zz-item:nth-child(even){ left:50%; text-align:left; }
.timeline-zz-item::before{
  content:'';
  position:absolute; top:6px;
  width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid var(--accent1);
  box-shadow:0 0 0 5px rgba(0,91,252,0.08);
  z-index:1;
}
.timeline-zz-item:nth-child(odd)::before{ right:-7px; }
.timeline-zz-item:nth-child(even)::before{ left:-7px; }
.timeline-zz-card{
  display:inline-block; max-width:400px;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.timeline-zz-item.in-view .timeline-zz-card{ opacity:1; transform:translateY(0); }
.timeline-zz-card .year{ font-family:'Courier New', monospace; font-size:13px; color:var(--accent1); letter-spacing:0.06em; }
.timeline-zz-card h4{ font-size:19px; font-weight:500; margin-top:8px; }
.timeline-zz-card p{ font-size:14.5px; color:var(--text-muted); margin-top:8px; line-height:1.6; }
@media (max-width:760px){
  .timeline-zigzag::before{ left:15px; }
  .timeline-zz-item{ width:100%; left:0 !important; text-align:left !important; padding:0 0 40px 44px; }
  .timeline-zz-item::before{ left:9px !important; right:auto !important; }
  .timeline-zz-card{ max-width:none; }
}
@media (max-width:480px){
  .timeline-zigzag{ margin-top:40px; }
  .timeline-zigzag::before{ left:12px; }
  .timeline-zz-item{ padding:0 0 32px 34px; }
  .timeline-zz-item::before{ left:6px !important; width:11px; height:11px; }
  .timeline-zz-card h4{ font-size:17px; }
  .timeline-zz-card p{ font-size:13.5px; }
}

/* ---------- VALUES GRID (reuses .bento-card look) ---------- */
.values-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px;
}
@media (max-width:900px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .values-grid{ grid-template-columns:1fr; gap:16px; margin-top:40px; }
  .value-card{ padding:22px; border-radius:18px; }
}
.value-card{
  border-radius:22px; padding:28px;
  background:var(--bg-secondary); border:1px solid var(--border);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  opacity:0; transform:translateY(20px);
}
.value-card.in-view{ opacity:1; transform:translateY(0); }
.value-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -26px rgba(9,29,57,0.2); }
.value-card .svc-icon{ margin-bottom:18px; }
.value-card h4{ font-size:17px; font-weight:500; }
.value-card p{ font-size:14px; color:var(--text-muted); margin-top:8px; line-height:1.6; }

/* ---------- TEAM GRID ---------- */
.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:56px;
}
@media (max-width:900px){ .team-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){
  .team-grid{ grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; }
  .team-card{ padding:22px 14px; border-radius:18px; }
}
@media (max-width:380px){
  .team-grid{ grid-template-columns:1fr; }
}
.team-card{
  text-align:center; padding:30px 20px;
  border-radius:20px; background:var(--bg); border:1px solid var(--border);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  opacity:0; transform:translateY(20px);
}
.team-card.in-view{ opacity:1; transform:translateY(0); }
.team-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -26px rgba(9,29,57,0.2); }
.team-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:#fff; font-weight:600; font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.team-card h4{ font-size:16px; font-weight:500; margin-top:16px; }
.team-card span{ display:block; font-size:12.5px; color:var(--text-muted); margin-top:4px; }