/* Homepage service symbols: teal certification, gold laboratory, rose management. */
.hero-core-services .hero-core-service {
  --service-ink: #087785;
  --service-rgb: 8, 119, 133;
  --service-tint: #e1f3f2;
  position: relative;
  isolation: isolate;
  grid-template-columns: 52px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 13px;
  padding: 18px 15px;
  border: 1px solid #d3e4e8;
  border-radius: 18px;
  background: linear-gradient(125deg, #fff 35%, #f3f9fa);
  box-shadow: 0 3px 6px rgba(20, 61, 78, .025), 0 10px 24px rgba(20, 61, 78, .07), inset 0 1px 0 #fff;
  /* The old forwards-filled entrance transform prevented hover lift. */
  animation-fill-mode: backwards;
  transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .3s ease;
}
.hero-core-services .hero-core-service-2 {
  --service-ink: #8b6819;
  --service-rgb: 139, 104, 25;
  --service-tint: #f7edce;
}
.hero-core-services .hero-core-service-3 {
  --service-ink: #aa3f52;
  --service-rgb: 170, 63, 82;
  --service-tint: #f9e6eb;
}
.hero-core-services .hero-core-service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse at 0 0, rgba(var(--service-rgb), .10), transparent 70%);
  opacity: .45;
  pointer-events: none;
  transition: opacity .4s ease;
}
.hero-core-services .hero-core-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  color: var(--service-ink);
  background: linear-gradient(145deg, #fff -15%, var(--service-tint) 65%);
  border: 1px solid rgba(var(--service-rgb), .18);
  box-shadow: 0 5px 12px rgba(var(--service-rgb), .12), inset 0 1px 0 #fff, inset 0 -2px 4px rgba(var(--service-rgb), .04);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.hero-core-services .hero-core-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 12px;
  pointer-events: none;
}
.hero-core-services .hero-core-mark svg { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.hero-core-services .hero-core-copy strong,
.hero-core-services .hero-core-copy small {
  display: block;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
.hero-core-services .hero-core-arrow { margin-top: 0; }
.hero-core-services .hero-core-service:focus-visible {
  outline: 2px solid var(--service-ink);
  outline-offset: 4px;
  border-color: var(--service-ink);
}
@media (hover: hover) and (pointer: fine) {
  .hero-core-services .hero-core-service:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--service-rgb), .4);
    background: linear-gradient(125deg, #fff 35%, #f3f9fa);
    box-shadow: 0 7px 12px rgba(20,61,78,.035), 0 17px 32px rgba(20,61,78,.12), inset 0 1px 0 #fff;
  }
  .hero-core-services .hero-core-service:hover::before { opacity: 1; }
  .hero-core-services .hero-core-service:hover .hero-core-mark {
    transform: translateY(-1px) scale(1.035);
    box-shadow: 0 8px 18px rgba(var(--service-rgb), .18), inset 0 1px 0 #fff;
  }
}
@media (max-width: 1050px) {
  .hero-core-services { grid-template-columns: 1fr; }
  .hero-core-services .hero-core-service { min-height: 92px; }
}
@media (max-width: 460px) {
  .hero-core-services .hero-core-service { grid-template-columns: 46px minmax(0,1fr) 26px; gap: 11px; padding: 15px 12px; }
  .hero-core-services .hero-core-mark { width: 46px; height: 46px; border-radius: 14px; }
  .hero-core-services .hero-core-mark::after { border-radius: 10px; }
  .hero-core-services .hero-core-mark svg { width: 29px; height: 29px; }
}
@media (hover: none) {
  .hero-core-services .hero-core-service:hover,
  .hero-core-services .hero-core-service:hover .hero-core-arrow { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-core-services .hero-core-service,
  .hero-core-services .hero-core-service::before,
  .hero-core-services .hero-core-mark,
  .hero-core-services .hero-core-arrow { animation: none; transition: none; }
  .hero-core-services .hero-core-service:hover,
  .hero-core-services .hero-core-service:hover .hero-core-mark,
  .hero-core-services .hero-core-service:hover .hero-core-arrow { transform: none; }
}