/* ============================================================
   HOW IT WORKS -- hero (.svc-hero-simple, shared with contact /
   vertical), the hub diagram in a dark console frame, the five-step
   flow, and the three data-class cards. Built from main.css +
   components.css tokens.
   ============================================================ */
.svc-hero-simple{
  position: relative; overflow: hidden;
  padding: 140px 24px 56px; text-align: center;
}
@media (max-width: 1024px){ .svc-hero-simple{ padding: 120px 24px 44px; } }
@media (max-width: 640px){ .svc-hero-simple{ padding: 100px 20px 36px; } }
.svc-hero-inner{ position: relative; z-index: 1; margin: 0 auto; }
.svc-hero-title{ letter-spacing: -0.4px; margin: 0 0 18px; text-wrap: balance; }
.svc-hero-lede{ font-size: 18px; line-height: 1.7; margin: 12px auto 0; }

/* ---------- diagram section ---------- */
.diagram-section{ padding-top: 0; }
.diagram-frame{
  max-width: 640px; margin: 0 auto;
  background: linear-gradient(160deg, #06203f 0%, #01122b 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 44px);
}
/* ---------- the flow -- five independent cards (.feature-card, same
   component the "What Stays Where" cards below use), each with its own
   numbered badge instead of an icon. 5 doesn't divide evenly into 3
   columns, so .flow-grid overrides .card-grid's plain grid with a
   centered, wrapping flex layout -- the leftover 2-card row centers
   itself instead of hanging left with an empty gap on the right. */
.flow-grid{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; max-width: 1280px; margin-inline: auto;
}
.flow-grid .flow-card{
  flex: 1 1 300px; max-width: 405px;
  /* the sitewide --border token is a very faint 10%-alpha navy, nearly
     invisible against this section's light background -- a clearer,
     darker border here so each card actually reads as a bordered box. */
  border-color: rgba(0,40,120,0.22);
}
@media (max-width: 980px){
  .flow-grid{ gap: 20px; }
  .flow-grid .flow-card{ flex-basis: 100%; max-width: 560px; }
}
@media (max-width: 640px){
  .flow-grid .flow-card{ max-width: 100%; }
}
.flow-card-num{
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  font-family: var(--font-main); font-weight: 700; font-size: 17px;
  color: #fff; background: linear-gradient(135deg, var(--btn-color), var(--accent-blue));
}