/* Brown-and-orange service-card interaction aligned with the site brand. */
:root { --card-brand-brown: #3F2A17; --card-brand-orange: #E76F1D; --card-brand-cream: #FFD29E; }

@media (hover: hover) and (pointer: fine) {
  .service-card {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
    transition: transform 240ms ease, box-shadow 240ms ease;
  }

  .service-card::after {
    background: linear-gradient(112deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%);
    content: "";
    inset: -30% -75%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-62%) skewX(-18deg);
    z-index: 5;
  }

  .service-card:hover,
  .service-card:focus-within {
    box-shadow: 0 25px 48px rgba(63,42,23,.25);
    transform: translateY(-10px);
  }

  .service-card:hover::after,
  .service-card:focus-within::after { animation: brand-card-shine 680ms ease-out; opacity: 1; }

  .service-card:hover .service-card-body,
  .service-card:focus-within .service-card-body {
    background: linear-gradient(135deg, var(--card-brand-brown) 0%, #75451F 55%, var(--card-brand-orange) 145%);
    color: #fff;
    transition: background 260ms ease, color 220ms ease;
  }

  .service-card:hover .service-card-body h3,
  .service-card:focus-within .service-card-body h3,
  .service-card:hover .service-card-body > p:not(.service-type),
  .service-card:focus-within .service-card-body > p:not(.service-type),
  .service-card:hover .text-link,
  .service-card:focus-within .text-link { color: #fff; }

  .service-card:hover .service-type,
  .service-card:focus-within .service-type { color: var(--card-brand-cream); }

  .service-card:hover .service-media::after,
  .service-card:focus-within .service-media::after {
    background: linear-gradient(135deg, rgba(63,42,23,.68), rgba(231,111,29,.38));
    content: "";
    inset: 0;
    position: absolute;
  }

  .service-card:hover .card-call,
  .service-card:focus-within .card-call {
    background: #fff;
    color: var(--card-brand-orange);
    transform: translateY(-5px) scale(1.14);
  }

  .service-card:hover .card-call i,
  .service-card:focus-within .card-call i { animation: card-icon-float 620ms ease-out; }
}

.card-call { transition: transform 220ms ease, background 220ms ease, color 220ms ease; }

@keyframes brand-card-shine { from { transform: translateX(-62%) skewX(-18deg); } to { transform: translateX(62%) skewX(-18deg); } }
@keyframes card-icon-float { 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .service-card, .card-call { transition: none !important; }
  .service-card:hover::after, .service-card:focus-within::after,
  .service-card:hover .card-call i, .service-card:focus-within .card-call i { animation: none; }
}