/* ============================================================
   About — story split, mission/vision, timeline
   ============================================================ */
.story-split{
  display:grid;
  gap:var(--sp-7);
  align-items:center;
}
.story-media{
  position:relative;
}
.story-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.story-media .story-tag{
  position:absolute; left:calc(var(--sp-5) * -1); bottom:calc(var(--sp-5) * -1);
  background:var(--black-950); color:var(--on-black);
  padding:var(--sp-5);
  max-width:15rem;
  border:1px solid var(--jodhpur-600);
}
.story-media .story-tag .num{ font-family:var(--font-mono); color:var(--jodhpur-300); font-size:1.75rem; display:block; }
.story-media .story-tag .label{ font-size:12.5px; color:var(--on-black-soft); margin-top:2px; }
.story-copy p:not(.eyebrow){ color:var(--slate); margin-bottom:var(--sp-4); }
.story-copy p:last-child{ margin-bottom:0; }

.mv-grid{
  display:grid;
  gap:var(--sp-5);
}
.mv-card{
  background:color-mix(in srgb, var(--black-950) 66%, transparent);
  backdrop-filter: blur(23px) saturate(1.65);
  -webkit-backdrop-filter: blur(23px) saturate(1.65);
  color:var(--on-black);
  padding:var(--sp-6);
}
.mv-card .icon-tile{ background:var(--jodhpur-400); color:var(--black-950); margin-bottom:var(--sp-4); }
.mv-card h3{ color:var(--on-black); margin-bottom:var(--sp-3); }
.mv-card p{ color:var(--on-black-soft); font-size:var(--fs-sm); }

.timeline{
  display:flex;
  flex-direction:column;
}
.timeline-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-5);
  padding-bottom:var(--sp-6);
  position:relative;
}
.timeline-item::before{
  content:"";
  position:absolute;
  left:5px; top:22px; bottom:0;
  width:1px;
  background:var(--line-strong);
}
.timeline-item:last-child::before{ display:none; }
.timeline-dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--jodhpur-500);
  margin-top:6px;
}
.timeline-item h3{ font-size:1.0625rem; font-family:var(--font-body); font-weight:700; margin-bottom:4px; }
.timeline-item p{ color:var(--slate); font-size:var(--fs-sm); }

.diff-list{ display:flex; flex-direction:column; }
.diff-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-5);
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.diff-row:first-child{ border-top:1px solid var(--line); }
.diff-row .icon-tile{ width:44px; height:44px; }
.diff-row .icon-tile svg{ width:22px; height:22px; }
.diff-row h3{ font-size:1.0625rem; font-family:var(--font-body); font-weight:700; margin-bottom:4px; }
.diff-row p{ color:var(--slate); font-size:var(--fs-sm); max-width:60ch; }

/* ============================================================
   Quality Assurance — checklist, inspection stages
   ============================================================ */
.check-grid{
  display:grid;
  gap:var(--sp-4);
}
.check-item{
  display:flex; gap:var(--sp-4);
  padding:var(--sp-5);
  background:color-mix(in srgb, var(--paper-raised) 70%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border:1px solid var(--line);
}
.check-item .tick{
  width:26px; height:26px; flex:none;
  border:1.5px solid var(--success);
  color:var(--success);
  display:flex; align-items:center; justify-content:center;
}
.check-item .tick svg{ width:14px; height:14px; }
.check-item h3{ font-size:1rem; font-family:var(--font-body); font-weight:700; margin-bottom:4px; }
.check-item p{ font-size:var(--fs-sm); color:var(--slate); }

.stage-rail{
  display:grid;
  gap:var(--sp-4);
  counter-reset: stage;
}
.stage{
  position:relative;
  padding:var(--sp-5);
  background:color-mix(in srgb, var(--paper-raised) 70%, transparent);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
  border:1px solid var(--line);
  border-top:2px solid var(--jodhpur-500);
}
.stage .stage-no{
  font-family:var(--font-mono);
  color:var(--jodhpur-600);
  font-size:var(--fs-xs);
  margin-bottom:var(--sp-2);
  display:block;
}
.stage h3{ font-size:1.0625rem; font-family:var(--font-body); font-weight:700; margin-bottom:6px; }
.stage p{ font-size:var(--fs-sm); color:var(--slate); }
.stage-arrow{
  display:none;
}

.standards-row{
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
}
.standard-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  border:1px solid var(--line-strong);
  font-size:var(--fs-sm); font-weight:600;
  background:var(--paper-raised);
}
.standard-pill svg{ width:16px; height:16px; color:var(--jodhpur-600); }

@media (min-width:860px){
  .story-split{ grid-template-columns:.85fr 1fr; }
  .mv-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:760px){
  .stage-rail{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1080px){
  .stage-rail{ grid-template-columns:repeat(4,1fr); }
}