/* AA Landing 9.1.0 — card video media */
.aail-card-media-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  isolation: isolate;
  background: inherit;
}

.aail-card-media-poster {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: inherit;
  visibility: visible;
}

.aail-card-media-poster > img,
.aail-card-media-poster > .aail-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

.aail-card-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  visibility: hidden;
  opacity: 1 !important;
  pointer-events: none;
  background: transparent;
  transition: none !important;
}

.aail-card-media-stage.is-video-active .aail-card-video,
.aail-card-media-stage.aail-video-no-poster.is-video-primed .aail-card-video {
  visibility: visible;
}

.aail-card-media-stage.is-video-active .aail-card-media-poster,
.aail-card-media-stage.aail-video-no-poster.is-video-primed .aail-card-media-poster {
  visibility: hidden;
}

.aail-card-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: clamp(54px, 5vw, 72px);
  height: clamp(54px, 5vw, 72px);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(180deg, #FF7A00, #00A896) border-box;
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
  color: #111;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
}

.aail-card-video-play span {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  transform: translate(-42%, -50%);
}

.aail-card-video-play:hover,
.aail-card-video-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 16px 42px rgba(0,0,0,.2);
  outline: none;
}

.aail-card-media-stage.is-video-active:not(.is-video-ended) .aail-card-video-play,
.aail-card-media-stage.is-video-starting .aail-card-video-play,
.aail-card-media-stage.is-video-error .aail-card-video-play {
  visibility: hidden;
}

.aail-card-media-stage.is-video-ended .aail-card-video-play {
  visibility: visible;
}

/* The moving image receives the same crop, filter and hover treatment as a photo. */
.aail-visual-studio-hybrid .aail-service-image .aail-card-video,
.aail-visual-studio-hybrid .aail-project-image .aail-card-video {
  filter: saturate(.82) contrast(1.02);
}

.aail-visual-layout-master-v8 .aail-service-card:hover .aail-card-video {
  transform: scale(1.018) !important;
}

.aail-site .aail-project-card.aail-has-gallery:hover .aail-card-video,
.aail-fragment .aail-project-card.aail-has-gallery:hover .aail-card-video {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .aail-card-video-play {
    transition: none;
  }
}

/* Do not let the legacy gallery hint cover a running card video. */
.aail-project-image.aail-has-video:has(.aail-card-media-stage.is-video-active)::before {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* ==========================================================
   AA Landing 9.9.6 — pseudo-layer service hover image
   ----------------------------------------------------------
   Safari/WebKit could expose the service-image background when two live IMG
   layers cross-faded inside the service card. The alternate still image is now
   rendered as a pseudo-element background on .aail-service-image itself, while
   the primary image keeps the native 9.8.3 direct-image geometry.

   Result: there is only one layout-driving image element, and the hover layer
   is a paint-only overlay locked to the exact same containing block.
   ========================================================== */

.aail-service-image.aail-has-hover-image {
  isolation: isolate;
}

.aail-service-image.aail-has-hover-image > .aail-card-primary-image,
.aail-service-image.aail-has-hover-image > .aail-placeholder.aail-card-primary-image {
  z-index: 1;
  will-change: opacity, filter, transform;
  pointer-events: none;
}

.aail-service-image.aail-has-hover-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background-image: var(--aail-service-hover-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, filter, transform;
  transform-origin: center center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Match the existing service-photo rendering language and motion. */
.aail-visual-studio-hybrid .aail-service-image.aail-has-hover-image > .aail-card-primary-image,
.aail-visual-studio-hybrid .aail-service-image.aail-has-hover-image::after {
  filter: saturate(.82) contrast(1.02);
  transition: opacity var(--aail-service-hover-opacity-duration, 580ms) var(--aail-service-hover-opacity-timing, cubic-bezier(.22,.72,.18,1)) var(--aail-service-hover-opacity-delay, 0ms), filter .55s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
}

.aail-site[data-service-hover-fade-enabled="0"] .aail-service-image.aail-has-hover-image > .aail-card-primary-image,
.aail-fragment[data-service-hover-fade-enabled="0"] .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
  opacity: 1 !important;
}
.aail-site[data-service-hover-fade-enabled="0"] .aail-service-image.aail-has-hover-image::after,
.aail-fragment[data-service-hover-fade-enabled="0"] .aail-service-image.aail-has-hover-image::after {
  opacity: 0 !important;
}

/* Transparent cross-fade. */
.aail-site[data-service-hover-fade-enabled="1"][data-service-hover-fade-mode="transparent"] .aail-service-image.aail-has-hover-image,
.aail-fragment[data-service-hover-fade-enabled="1"][data-service-hover-fade-mode="transparent"] .aail-service-image.aail-has-hover-image {
  --aail-service-hover-opacity-duration: var(--aail-service-hover-fade-duration, 580ms);
  --aail-service-hover-opacity-delay: 0ms;
  --aail-service-hover-opacity-timing: cubic-bezier(.22,.72,.18,1);
}

/* White / black bridge. The bridge is the existing image well background, not
   a second wrapper, so there is no geometric seam to expose. */
.aail-site[data-service-hover-fade-mode="white"] .aail-service-image.aail-has-hover-image,
.aail-fragment[data-service-hover-fade-mode="white"] .aail-service-image.aail-has-hover-image {
  background: #fff;
}
.aail-site[data-service-hover-fade-mode="black"] .aail-service-image.aail-has-hover-image,
.aail-fragment[data-service-hover-fade-mode="black"] .aail-service-image.aail-has-hover-image {
  background: #000;
}

.aail-site[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-image.aail-has-hover-image > .aail-card-primary-image,
.aail-fragment[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
  --aail-service-hover-opacity-duration: var(--aail-service-hover-fade-half, 290ms);
  --aail-service-hover-opacity-delay: 0ms;
  --aail-service-hover-opacity-timing: ease;
}
.aail-site[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-image.aail-has-hover-image::after,
.aail-fragment[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-image.aail-has-hover-image::after {
  --aail-service-hover-opacity-duration: var(--aail-service-hover-fade-half, 290ms);
  --aail-service-hover-opacity-delay: var(--aail-service-hover-fade-half, 290ms);
  --aail-service-hover-opacity-timing: ease;
}

@media (hover: hover) and (pointer: fine) {
  .aail-site[data-service-hover-fade-enabled="1"] .aail-service-card:hover .aail-service-image.aail-has-hover-image > .aail-card-primary-image,
  .aail-fragment[data-service-hover-fade-enabled="1"] .aail-service-card:hover .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
    opacity: 0;
  }

  .aail-site[data-service-hover-fade-enabled="1"] .aail-service-card:hover .aail-service-image.aail-has-hover-image::after,
  .aail-fragment[data-service-hover-fade-enabled="1"] .aail-service-card:hover .aail-service-image.aail-has-hover-image::after {
    opacity: 1;
  }

  .aail-site[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-card:not(:hover) .aail-service-image.aail-has-hover-image > .aail-card-primary-image,
  .aail-fragment[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-card:not(:hover) .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
    --aail-service-hover-opacity-delay: var(--aail-service-hover-fade-half, 290ms);
  }

  .aail-site[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-card:not(:hover) .aail-service-image.aail-has-hover-image::after,
  .aail-fragment[data-service-hover-fade-enabled="1"]:is([data-service-hover-fade-mode="white"],[data-service-hover-fade-mode="black"]) .aail-service-card:not(:hover) .aail-service-image.aail-has-hover-image::after {
    --aail-service-hover-opacity-delay: 0ms;
  }

  .aail-visual-studio-hybrid .aail-service-card:hover .aail-service-image.aail-has-hover-image::after,
  .aail-visual-studio-hybrid .aail-service-card:hover .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
    filter: saturate(1) contrast(1.02);
    transform: scale(1.035);
  }

  .aail-visual-layout-master-v8 .aail-service-card:hover .aail-service-image.aail-has-hover-image::after,
  .aail-visual-layout-master-v8 .aail-service-card:hover .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
    transform: scale(1.018) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .aail-visual-layout-master-v8 .aail-service-card:hover .aail-service-image.aail-has-hover-image::after,
  .aail-visual-layout-master-v8 .aail-service-card:hover .aail-service-image.aail-has-hover-image > .aail-card-primary-image {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aail-service-image.aail-has-hover-image > .aail-card-primary-image,
  .aail-service-image.aail-has-hover-image::after {
    transition-duration: .01ms, .01ms, .01ms !important;
    transition-delay: 0ms, 0ms, 0ms !important;
  }
}