.service-card { cursor: pointer; }
.service-more { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 14px; padding: 6px 10px; border-radius: 999px; background: #edf5ff; color: #24364c; font-size: .82rem; font-weight: 560; transition: color .25s ease, transform .25s ease, background .25s ease; }
.service-chevron { display: inline-block; color: var(--blue-dark); font-size: 1.05rem; line-height: 1; transition: transform .32s cubic-bezier(.22, 1, .36, 1), color .25s ease; }
.service-card:hover .service-more { background: #dfefff; color: var(--blue-dark); transform: translateX(2px); }
.service-card.is-active { border-color: rgba(9,104,216,.36); background: #fff; }
.service-card.is-active .service-more { background: var(--blue); color: #fff; } .service-card.is-active .service-chevron { color: #fff; transform: rotate(90deg); }
.service-panel {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr); gap: 24px; align-items: stretch;
  padding: 0 28px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  animation: servicePanel .32s ease both;
}
.service-panel[hidden] { display: none; }
.service-panel-icon { position: relative; display: grid; min-height: 100%; }
.service-panel-icon::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 34px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; }
.service-panel-icon img { width: 100%; height: 100%; min-height: 240px; border-radius: 0; object-fit: cover; }
.service-panel-text { align-self: center; padding: 34px 18px; color: #172337; font-size: 1rem; line-height: 1.7; }
.service-panel-text h3 { margin-bottom: 10px; color: var(--blue); font-size: 1.15rem; }
@keyframes servicePanel { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .service-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 22px; align-items: center; padding: 16px; text-align: left; }
  .service-icon { grid-row: 1 / 3; width: 58px; height: 58px; margin: 0; }
  .service-card h3 { min-height: 0; align-self: end; }
  .service-more { margin-top: 4px; align-self: start; }
  .service-panel { grid-template-columns: 1fr; gap: 0; padding: 22px; }
  .service-panel-icon { display: none; }
  .service-panel-text { padding: 0; }
}