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

.story-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items:center; }
.story p{ max-width: 58ch; }

.story-panel{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius-lg);
  overflow:hidden; background: var(--navy-deep);
  box-shadow: var(--shadow);
}
.story-panel::after{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--red-2), transparent 60%);
}
.panel-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 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:.65;
}
.panel-rings span:nth-child(1){ width:70px; height:70px; }
.panel-rings span:nth-child(2){ width:132px; height:132px; border-color: var(--silver); opacity:.4; }
.panel-rings span:nth-child(3){ width:194px; height:194px; border-color: rgba(255,255,255,.28); }
.panel-rings span{ animation: pulseRing 3.4s ease-out infinite; }
.panel-rings span:nth-child(2){ animation-delay: .7s; }
.panel-rings span:nth-child(3){ animation-delay: 1.4s; }
.panel-caption{
  position:absolute; left:14px; bottom:14px;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background: rgba(6,28,44,.8);
  border:1px solid rgba(255,255,255,.2);
  padding: 6px 11px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce){ .panel-rings span{ animation:none; } }

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

/* ------------------------------------------------------------ timeline */
.timeline-section{ background: var(--bg-alt); }
.timeline{ list-style:none; margin:0; padding:0; border-left: 2px solid var(--line); position:relative; }
.timeline::before{
  content:""; position:absolute; left:-2px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg, var(--red), var(--navy) 60%, transparent);
}
.timeline li{
  position:relative;
  display:grid; grid-template-columns: 120px 1fr;
  gap: 26px;
  padding: 26px 0 26px 34px;
}
.timeline li::before{
  content:""; position:absolute; left:-8px; top:32px;
  width:14px; height:14px; border-radius:50%;
  background: var(--paper); border: 3px solid var(--red);
  box-shadow: 0 0 0 4px var(--bg-alt);
}
.tl-year{
  font-size:.82rem; letter-spacing:.08em; color: var(--navy);
  font-weight:600;
  display:inline-flex; align-items:flex-start; gap:10px;
}
.tl-year::after{ content:"→"; color: var(--red-2); font-family: var(--font-mono); font-size:.8rem; }
.timeline h3{ font-size:1.08rem; margin-bottom:.35em; }
.timeline p{ font-size:.92rem; margin:0; max-width: 60ch; }
@media (max-width:600px){ .timeline li{ grid-template-columns: 1fr; gap:8px; } }

/* -------------------------------------------------------------- values */
.values{ background: var(--bg); }
.spec-sheet{ box-shadow: var(--shadow-sm); }

/* -------------------------------------------------------------- people */
.people{ background: var(--bg-alt); }
.people-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
.person-card{
  background: var(--paper); border:1px solid var(--line); padding: 30px 26px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-radius: var(--radius-lg);
}
.person-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--red-2), var(--red));
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.person-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(195,49,31,.25); }
.person-card:hover::before{ transform: scaleX(1); }
.person-initial{
  width:48px; height:48px; border-radius:50%;
  background: linear-gradient(135deg, var(--navy-2), var(--navy-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:500;
  box-shadow: var(--shadow-sm);
}
.person-card h3{ font-size:1.02rem; margin:0; }
.person-card p{ margin:0; font-size:.85rem; }
.person-card p a{ color: var(--navy); border-bottom:1px dashed var(--silver); transition: color .15s ease, border-color .15s ease; }
.person-card p a:hover{ color: var(--red); border-color: var(--red); }