/* Photographs keep the complete source frame. Component layouts cannot crop a person
   or add a mat to make unlike photographs share a height. Kept last in every bundle. */
.home-story .services .service-visual,
.home-story .hero-direction-media,
.journal-card-photo,
.journal-article-header picture,
.catalog-group-media,
.service-detail-photo:not(.service-detail-photo--empty),
.academy-photograph-grid a {
  background: transparent;
}

.home-story .services .service-visual img,
.home-story .hero-direction-media img,
.home-story .team-photo img,
.journal-card-photo img,
.journal-article-header img,
.catalog-group-media img,
.service-detail .service-detail-photo img,
.academy-photograph-grid img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto var(--photo-ratio);
  object-fit: contain;
  background: transparent;
}

.journal-card-photo,
.journal-card-photo picture { height: auto; aspect-ratio: auto; }

.content-page .wp-block-post-featured-image img { height: auto; max-height: none; object-fit: contain; }

/* A row can align its top edges without stretching the photographs to equal heights. */
.work-gallery-grid,
.service-landing-shots,
.academy-photograph-grid,
.services-menu-cards { align-items: start; }
.work-shot .work-shot-media,
.work-shot--accent .work-shot-media,
.service-landing-shots .service-landing-shot {
  flex: none;
  min-height: 0;
  aspect-ratio: auto;
  background: transparent;
}
.work-shot .work-shot-media picture,
.work-shot .work-shot-media img,
.service-landing-shot picture,
.service-landing-shot img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* The selected frame and its thumbnails use the same original proportions. */
.service-gallery .service-gallery-stage { background: transparent; }
.service-gallery .service-gallery-stage .service-gallery-open {
  display: block;
  min-height: 0;
  aspect-ratio: auto;
}
.service-gallery .service-gallery-open picture { position: static; height: auto; }
.service-gallery .service-gallery-open img { height: auto; }
.service-gallery .service-gallery-thumbs button {
  flex: 0 0 auto;
  width: auto;
}
.service-gallery .service-gallery-thumbs img {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: transparent;
}

/* Public direction banners also follow their photograph, including the narrow layout. */
.page-banner .page-banner-media {
  min-height: 0;
  aspect-ratio: auto;
  align-self: center;
}
.page-banner .page-banner-media picture,
.page-banner .page-banner-media img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Service menu labels sit below the complete photograph. Product cut-outs keep
   their existing product presentation; no hover zoom crops the service photograph. */
.services-menu-card:not(.shop-menu-card) { height: auto; background: transparent; }
.services-menu-card:not(.shop-menu-card)::after { content: none; }
.services-menu-card:not(.shop-menu-card) picture { position: static; display: block; }
.services-menu-card:not(.shop-menu-card) img { height: auto; object-fit: contain; transform: none; }
.services-menu-card:not(.shop-menu-card) .services-menu-card-title {
  position: static;
  padding-block: 0.8rem;
  color: var(--graphite);
  text-shadow: none;
}

.mobile-menu-strip { align-items: flex-start; }
.mobile-menu-card { height: auto; background: transparent; color: var(--graphite); }
.mobile-menu-card::after { content: none; }
.mobile-menu-card picture,
.mobile-menu-card img { position: static; display: block; width: 100%; height: auto; }
.mobile-menu-card img { aspect-ratio: auto var(--photo-ratio); object-fit: contain; }
.mobile-menu-card:hover img,
.mobile-menu-card:focus-visible img { transform: none; }
.mobile-menu-card-text { position: static; padding-block: 0.8rem; }

/* The drawer uses the same full-frame, equal-height rhythm as desktop services.
   Width follows each source ratio; Shop tiles keep their independent layout. */
#mobile-menu-services .mobile-menu-strip { display: flex; --service-photo-height: clamp(11rem, 45cqi, 13rem); }
#mobile-menu-services .mobile-menu-card { flex: 0 0 calc(var(--service-photo-height) * var(--service-photo-ratio)); min-width: 0; }
@container drawer (min-width: 29rem) {
 #mobile-menu-services .mobile-menu-card { flex: var(--service-photo-ratio) 1 0; }
}

/* F08 eyebrow details: keep the complete narrow crop clear of the enlarge control. */
.service-landing-shot:has(> picture > img[src*="/oct28-brows-f08-"]) > .photo-open {
  position: static;
  display: flex;
  margin: 8px 0 0 auto;
}
.service-gallery-open:has(img[src*="/oct28-brows-f08-"]) .service-gallery-expand {
  position: static;
  display: flex;
  margin: 8px 0 0 auto;
}
@media (max-width: 767px) {
  .service-landing-shot:has(> picture > img[src*="/oct28-brows-f08-"]) { grid-column: 1 / -1; }
}