/* ==========================================================================
   SIL-VEX ENGINEERING — about.css  (about.html only)
   ========================================================================== */

.story-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
.story h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); max-width: 18ch; }
.story-panel{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius);
  overflow:hidden; background: var(--navy-deep);
}
.panel-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
.panel-rings{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.panel-rings span{
  position:absolute; border: 2px solid var(--red); border-radius:50%; opacity:.6;
}
.panel-rings span:nth-child(1){ width:70px; height:70px; }
.panel-rings span:nth-child(2){ width:130px; height:130px; border-color: var(--silver); opacity:.4; }
.panel-rings span:nth-child(3){ width:190px; height:190px; border-color: rgba(255,255,255,.25); }

@media (max-width: 860px){ .story-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ timeline */
.timeline-section{ background: var(--bg-alt); }
.timeline-section h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 40px; }
.timeline{ list-style:none; margin:0; padding:0; border-left: 2px solid var(--line); }
.timeline li{
  position:relative;
  display:grid; grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 22px 0 22px 30px;
}
.timeline li::before{
  content:""; position:absolute; left:-7px; top:28px;
  width:12px; height:12px; border-radius:50%;
  background: var(--red); border: 2px solid var(--bg-alt);
}
.tl-year{ font-size:.85rem; color: var(--navy); letter-spacing:.06em; }
.timeline h3{ font-size:1.05rem; margin-bottom:.3em; }
.timeline p{ font-size:.92rem; margin:0; }
@media (max-width:600px){ .timeline li{ grid-template-columns: 1fr; gap:6px; } }

/* -------------------------------------------------------------- values */
.values h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); max-width:20ch; margin-bottom:30px; }
.values .spec-sheet{ background: var(--paper); border:1px solid var(--line); padding: 6px 28px; }

/* -------------------------------------------------------------- people */
.people{ background: var(--bg-alt); }
.people h2{ font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: 30px; }
.people-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
.person-card{
  background: var(--paper); border:1px solid var(--line); padding: 26px;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.person-initial{
  width:44px; height:44px; border-radius:50%;
  background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.person-card h3{ font-size:1rem; margin:0; }
.person-card p{ margin:0; font-size:.85rem; }