/* Services V9.10 - exact V9.4 colour blocks and consistent hover motion. */

/* Exact approved card surfaces: light, pale gold, light/white. */
.services-page .car-service-grid {
  gap: 24px;
  align-items: stretch;
}

.services-page .car-service-card,
.services-page .car-service-card:first-child,
.services-page .car-service-card:last-child,
.services-page .car-service-card:nth-child(odd),
.services-page .car-service-card:nth-child(even) {
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #fff;
  background-color: #fff;
  box-shadow: 0 14px 38px rgba(7, 52, 58, .085);
}

.services-page .car-service-card-featured,
.services-page .car-service-card-featured:first-child,
.services-page .car-service-card-featured:last-child,
.services-page .car-service-card-featured:nth-child(odd),
.services-page .car-service-card-featured:nth-child(even) {
  background: #f7f2e7;
  background-color: #f7f2e7;
}

.services-page .car-service-card > img {
  height: 195px;
}

.services-page .car-service-card > div {
  padding: 27px 28px 30px;
}

/* Every image-and-copy module responds as one composed object on hover. */
.services-page .car-service-card,
.services-page .business-story,
.services-page .support-card {
  transition:
    transform 620ms var(--ease-premium),
    box-shadow 620ms var(--ease-premium),
    background-color 620ms var(--ease-premium);
  will-change: transform;
}

.services-page .car-service-card > img,
.services-page .business-story-media img,
.services-page .support-card > img {
  transition:
    transform 900ms var(--ease-premium),
    filter 700ms var(--ease-premium),
    box-shadow 620ms var(--ease-premium);
  will-change: transform;
}

.services-page .car-service-card > div,
.services-page .business-story-copy,
.services-page .support-card > div {
  transition:
    opacity 720ms var(--ease-premium),
    transform 720ms var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .services-page .car-service-card:hover,
  .services-page .car-service-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(7, 52, 58, .15);
  }

  .services-page .business-story:hover,
  .services-page .business-story:focus-within {
    transform: translateY(-7px);
    box-shadow: 0 24px 58px rgba(0, 0, 0, .22);
    background-color: rgba(255, 255, 255, .055);
  }

  .services-page .support-card:hover,
  .services-page .support-card:focus-within {
    transform: translateY(-7px);
  }

  .services-page .car-service-card:hover > img,
  .services-page .car-service-card:focus-within > img,
  .services-page .business-story:hover .business-story-media img,
  .services-page .business-story:focus-within .business-story-media img,
  .services-page .support-card:hover > img,
  .services-page .support-card:focus-within > img {
    filter: saturate(1.04) contrast(1.015);
    transform: scale(1.04);
  }

  .services-page .support-card:hover > img,
  .services-page .support-card:focus-within > img {
    box-shadow: 0 18px 34px rgba(7, 52, 58, .13);
  }

  .motion-ready.services-page .car-service-card.in-view:hover > div,
  .motion-ready.services-page .car-service-card.in-view:focus-within > div,
  .motion-ready.services-page .business-story.in-view:hover .business-story-copy,
  .motion-ready.services-page .business-story.in-view:focus-within .business-story-copy,
  .motion-ready.services-page .support-card.in-view:hover > div,
  .motion-ready.services-page .support-card.in-view:focus-within > div {
    transform: translateY(-3px);
  }
}

@media (max-width: 1040px) {
  .services-page .car-service-card,
  .services-page .car-service-card:first-child,
  .services-page .car-service-card:last-child,
  .services-page .car-service-card:nth-child(odd),
  .services-page .car-service-card:nth-child(even) {
    padding: 0;
  }
}

@media (max-width: 760px) {
  .services-page .car-service-card,
  .services-page .car-service-card:first-child,
  .services-page .car-service-card:last-child {
    padding: 0;
    border: 0;
  }

  .services-page .car-service-card > img {
    height: 205px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-page .car-service-card,
  .services-page .business-story,
  .services-page .support-card,
  .services-page .car-service-card > img,
  .services-page .business-story-media img,
  .services-page .support-card > img,
  .services-page .car-service-card > div,
  .services-page .business-story-copy,
  .services-page .support-card > div {
    transition: none;
  }
}