/* ==========================================================================
   CUCSR — services.html specific styles
   ========================================================================== */

.page-hero {
  padding-block: var(--sp-7) var(--sp-5);
}

.service-block { padding-block: var(--sp-8); scroll-margin-top: 150px; }
.service-grid { max-width: 820px; }
.service-index {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-amber-dark);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}
.service-main h2 { margin-bottom: var(--sp-2); }
.sub-heading {
  font-size: var(--fs-md);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  color: var(--color-navy-900);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.mini-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.mini-steps span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-navy-700);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
}
.mini-steps span:not(:last-child)::after {
  content: '→';
  margin-left: var(--sp-2);
  color: var(--color-muted-light);
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }