/* Preserve the supplied SVG artwork and let each asset keep its own ratio. */
.brand img {
  display: block;
  width: 80px;
  height: auto;
  object-fit: contain;
}

.icon img,
.card-arrow img,
.credential-icon,
.case-icon {
  display: block;
  object-fit: contain;
}

.blue { --accent: #3b82f6; }
.violet { --accent: #a855f7; }
.green { --accent: #22c55e; }
.orange { --accent: #f97316; }

.service-card { padding-bottom: 24px; }
.service-card .icon {
  width: 52px;
  height: 52px;
  margin-bottom: 13px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 13px;
}
.icon img {
  width: 40px;
  height: 40px;
  transition: filter .22s ease;
}

/* Next.svg already contains a ring; no extra border is needed. */
.service-card .card-arrow {
  top: 29px;
  bottom: auto;
  right: 18px;
  width: 32px;
  height: 32px;
}
.card-arrow img {
  width: 100%;
  height: 100%;
  transition: filter .22s ease;
}
.service-card:is(:hover, :focus-visible, :active) .icon img,
.case-card:hover .case-icon {
  filter: drop-shadow(0 0 7px var(--accent));
}
.service-card:is(:hover, :focus-visible, :active) .card-arrow img {
  filter: brightness(1.65) drop-shadow(0 0 4px var(--accent));
}

.credentials > div {
  position: relative;
  padding-left: 38px;
  border-left: none;
}
.credential-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 28px;
}
.case-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 32px;
}
.case-heading .case-type { margin: 0; }
.case-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  transition: filter .22s ease;
}
.case-card h3 { margin-top: 18px; }
.case-card:hover { border-color: var(--accent); }

@media (max-width: 720px) {
  .service-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 32px;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
    row-gap: 6px;
    padding: 16px;
  }
  .service-card .icon,
  .service-card .card-arrow {
    position: static;
    align-self: center;
    grid-row: 1 / 3;
    margin: 0;
  }
  .service-card .icon { grid-column: 1; }
  .service-card h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .service-card p { grid-column: 2; grid-row: 2; }
  .service-card .card-arrow { grid-column: 3; }
  .credentials > div { padding-left: 28px; }
  .credential-icon { width: 20px; height: 24px; }
}
@media (max-width: 390px) {
  .service-card { column-gap: 10px; padding: 12px; }
  .credentials > div { padding-left: 0; text-align: center; }
  .credential-icon { position: static; transform: none; margin: 0 auto 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-card, .service-card .icon, .card-arrow, .icon img,
  .card-arrow img, .case-card, .case-icon { transition: none; }
  .service-card:is(:hover, :focus-visible),
  .service-card:is(:hover, :focus-visible) .icon,
  .service-card:is(:hover, :focus-visible) .card-arrow,
  .case-card:hover { transform: none; }
}