/* Figma service-card reveal, with one link and a stable card footprint. */
.service-reveal .service-card { position: relative; display: grid; }
.service-card-front { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.service-card-front > .practice-icon { align-self: center; }
.service-card-back {
  position: absolute;
  inset: -1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #ebe1d0;
  border: 2px solid var(--gold);
  color: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-out, visibility 300ms;
}
.service-card-back > p { flex: 1; font: 400 16px/28px var(--sans); }
.service-hover-rule { flex: none; max-width: 100%; }
.service-hover-cta {
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;
  max-width: 100%;
  border: 1px solid var(--gold);
  background: var(--navy);
  color: var(--offwhite);
  font: 600 16px/28px var(--sans);
}
.service-hover-cta:hover,
.service-reveal:focus-visible .service-hover-cta {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.service-reveal:focus-visible .service-card-back { opacity: 1; visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  .service-reveal:hover .service-card-back { opacity: 1; visibility: visible; }
}
@media (max-width: 1100px) {
  .service-card-back { padding: 16px; gap: 16px; }
  .service-hover-cta { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card-back { transition: none; }
}