.services { background: var(--surface); }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--line); }
.service-card { display: flex; flex-direction: column; min-height: 344px; padding: 1.55rem; background: var(--paper); transition: background var(--transition), transform var(--transition); }
.service-card:hover { position: relative; z-index: 1; background: var(--white); transform: translateY(-5px); box-shadow: var(--shadow); }
.service-card-top { display: flex; align-items: start; justify-content: space-between; margin-bottom: auto; }
.service-card-top > span { color: var(--muted); font: .63rem var(--font-mono); }
.service-card-top b { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; color: var(--blue); border-radius: 50%; background: #e2ebff; font-size: 1.18rem; }
.service-card h3 { max-width: 12ch; margin: 2.4rem 0 .8rem; font-size: 1.25rem; }
.service-card p { margin-bottom: 1.3rem; color: var(--muted); font-size: .82rem; }
.service-card a { margin-top: auto; color: var(--blue); font-size: .75rem; font-weight: 800; }
.service-card a span { margin-left: .35rem; transition: margin var(--transition); }
.service-card a:hover span { margin-left: .6rem; }

.solutions { color: var(--white); background: var(--navy); }
.solutions-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: clamp(3rem, 9vw, 9rem); }
.solutions-sticky { align-self: start; position: sticky; top: 7rem; }
.solutions h2 { max-width: 9ch; margin-bottom: 1.4rem; }
.solutions h2 em { color: var(--mint); }
.solutions-sticky > p:not(.eyebrow) { max-width: 28rem; margin-bottom: 1.8rem; color: rgba(255,255,255,.63); font-size: .92rem; }
.process-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.process-list li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1.65rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.process-list li > span { color: var(--mint); font: .65rem var(--font-mono); }
.process-list h3 { margin: 0 0 .35rem; font-size: 1.3rem; }
.process-list p { max-width: 31rem; margin: 0; color: rgba(255,255,255,.62); font-size: .85rem; }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 305px; }
}

@media (max-width: 700px) {
  .service-card { min-height: 295px; padding: 1.2rem; }
  .service-card h3 { margin-top: 2rem; }
  .solutions-grid { grid-template-columns: 1fr; gap: 3rem; }
  .solutions-sticky { position: static; }
  .process-list li { grid-template-columns: 3.5rem 1fr; }
}

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