/* A photograph rises from each service's rule without moving the layout. */
#services .service-note { position: relative; isolation: isolate; }
#services .service-title { display: block; width: fit-content; color: inherit; text-decoration: none; }
#services .service-title strong { margin-bottom: .55rem; }
#services .service-title:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }
#services .service-peek { display: none; }

@media (min-width: 781px) and (hover: hover) and (pointer: fine) {
  #services .service-note { overflow: hidden; min-height: 220px; align-content: start; padding-top: .25rem; }
  #services .service-title { position: relative; z-index: 2; }
  #services .service-title::after {
    content: "↗"; position: absolute; left: calc(100% + .6rem); top: 0;
    font-size: .95rem; opacity: 0; transform: translate(-4px, 4px);
    transition: opacity .3s, transform .4s;
  }
  #services .service-peek {
    display: block; position: absolute; inset: 0; z-index: 1;
    pointer-events: none; overflow: hidden;
  }
  #services .service-photo-link { display: contents; }
  #services .service-peek img {
    pointer-events: auto;
    display: block; position: absolute; right: 5%; bottom: 0;
    width: min(70%, 390px, calc(310px * var(--peek-ratio, 1.5))); height: auto; object-fit: contain;
    border-radius: 3px; opacity: 0;
    transform: translate3d(0, 112%, 0) rotate(-12deg);
    transform-origin: center; box-shadow: 0 14px 35px rgb(0 0 0 / .17);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
  }
  #services .service-note:is(:hover, :has(:focus-visible)) .service-peek img {
    opacity: 1; transform: translate3d(0, 49%, 0) rotate(-8deg);
  }
  #services .service-note:is(:hover, :has(:focus-visible)) .service-title::after {
    opacity: .6; transform: translate(0, 0);
  }
}

.service-flight { position: fixed; inset: 0; z-index: 14000; pointer-events: auto; }
.service-flight-backdrop { position: absolute; inset: 0; background: var(--bg, #f4f1eb); }
.service-flight img { position: absolute; display: block; max-width: none; object-fit: contain; border-radius: 3px; will-change: transform; }
body.service-navigating .cursor, body.service-navigating .back-to-top { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  #services .service-peek img, #services .service-title::after { transition: none; }
}