/* ── "Websites" parent header (spans both columns) ── */
#layout-groups > .services-group:nth-child(1)::before {
    content: "Websites";
    display: block;
    position: absolute;
    top: -2.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    z-index: 1;
}

/* ── Side-by-side columns ── */
#layout-groups {
    position: relative;
    padding-top: 2rem;
}
#layout-groups > .services-group:nth-child(1),
#layout-groups > .services-group:nth-child(2) {
    flex: 0 0 calc(50% - 0.5rem) !important;
    max-width: calc(50% - 0.5rem) !important;
    position: relative;
}

/* ── Sub-headers: centered, bold ── */
#layout-groups > .services-group:nth-child(1) h2,
#layout-groups > .services-group:nth-child(2) h2 {
    text-align: center !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

/* ── Internal 2x2 grid for service groups (when not using style: row) ── */
@media (min-width: 500px) {
  .services-list.flex.flex-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .services-list.flex.flex-col .service {
    grid-column: span 2;
  }
  .services-list.flex.flex-col .service > div {
    height: 100%;
  }
  .services-list.flex.flex-col .service > .mb-2 {
    margin-bottom: 0 !important;
  }
  .services-list.flex.flex-col #col-small.service {
    grid-column: span 1;
  }
}