/* Match the service/project desktop layout above 600px; mobile rules stay intact. */
@media (min-width: 601px) {
  .service-hero:has(.service-hero-image) {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 3vw;
    min-height: 0;
    padding: 154px 4.5vw 64px;
  }
  .service-hero:has(.service-hero-image) .service-hero-type { padding: 0; min-width: 0; }
  .service-hero:has(.service-hero-image) .back { margin-bottom: 26px; }
  .service-hero:has(.service-hero-image) h1 { font-size: clamp(40px, 4.3vw, 76px); }
  .service-hero:has(.service-hero-image) .scroll-cue { margin-top: 24px; }
  .service-hero-image { min-height: 0; height: auto; align-self: center; }
  .service-hero-image picture { display: block; height: auto; }
  .service-hero-image picture img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; transform: none; }
  .service-hero-image::before, .service-hero-image::after { display: none; }
  .service-hero-image .image-caption { position: static; display: block; margin: 0; padding: 12px 0 0; background: none; }

  .project-story figure img,
  .development .project-story figure img,
  .painting .painting-feature figure img {
    width: 100%; max-width: 100%; height: auto; margin: 0;
    aspect-ratio: auto; object-fit: contain;
  }
  /* The archive file has 260 px of black padding on the left and 259 px on the right.
     This frame reveals the complete 865 by 1536 photograph, without those margins. */
  .development .project-story figure.desktop-foundation { overflow: hidden; }
  .development .project-story figure.desktop-foundation img {
    width: 160%; max-width: none; margin-left: -30.0578034682%;
    height: auto; aspect-ratio: auto;
  }

  .photo-viewer:not(.installation-viewer) {
    width: min(100%, calc(78svh * var(--desktop-photo-ratio, 1)));
    margin-inline: auto; background: transparent;
  }
  .photo-viewer:not(.installation-viewer) .photo-slide {
    width: 100%; height: auto; min-height: 0;
    aspect-ratio: var(--desktop-photo-ratio, 1); overflow: hidden;
  }
  .photo-viewer:not(.installation-viewer) .photo-slide .project-full {
    position: static; inset: auto; width: 100%; height: auto;
    max-width: 100%; max-height: none; aspect-ratio: auto;
    margin: 0; object-fit: contain; transform: none; clip-path: none; background: none;
  }
  .photo-viewer:not(.installation-viewer) .photo-slide .padded-photo {
    position: absolute; top: 0; left: -30.0578034682%;
    width: 160%; max-width: none; height: auto;
  }

  .gallery-frame:has(.featured-gallery) {
    --desktop-photo-height: min(62svh, calc((100vw - 128px) * .75), 700px);
  }
  .featured-gallery { align-items: flex-start; }
  .featured-gallery::before {
    flex-basis: max(0px, calc((100% - var(--desktop-photo-height) * var(--desktop-first-ratio)) / 2 - var(--gallery-gap)));
  }
  .featured-gallery::after {
    flex-basis: max(0px, calc((100% - var(--desktop-photo-height) * var(--desktop-last-ratio)) / 2 - var(--gallery-gap)));
  }
  .featured-gallery .project-card {
    flex: 0 0 calc(var(--desktop-photo-height) * var(--desktop-photo-ratio));
    width: calc(var(--desktop-photo-height) * var(--desktop-photo-ratio));
  }
  .featured-gallery .project-card .project-thumbnail {
    width: 100%; height: var(--desktop-photo-height); aspect-ratio: auto;
  }
  .featured-gallery .project-card .project-thumbnail img {
    position: static; width: 100%; max-width: 100%; height: auto;
    min-height: 0; aspect-ratio: auto; margin: 0; object-fit: contain; transform: none;
  }
  .featured-gallery .project-card .foundation-thumbnail img {
    position: absolute; top: 0; left: -30.0578034682%;
    width: 160%; max-width: none; height: auto;
  }
  .gallery-frame:has(.featured-gallery) .gallery-arrow { top: calc(var(--desktop-photo-height) / 2); }

}

/* The entrance has its own desktop breakpoint; keep its smaller layouts unchanged. */
@media (min-width: 901px) {
  /* A complete entrance image, followed by its navigation; no zoom crops or filler. */
  .cinematic-home { overflow-y: auto; }
  .cinematic-home .cinematic-stage { height: auto; min-height: 0; }
  .cinematic-stage::before { content: ''; display: block; aspect-ratio: 1672 / 941; }
  .cinematic-home .cinematic-scene { bottom: auto; height: calc(100vw * 941 / 1672); transform: none; }
  .cinematic-home .cinematic-scene .scene-picture > img,
  .cinematic-home .plumbing-photo,
  .cinematic-home .plumbing-photo img,
  .cinematic-home .adaptive-photo { transform: none; }
  .cinematic-home .service-tabs {
    position: relative; inset: auto; margin: 0; padding: 16px 4.5vw 20px;
    background: #161713;
  }
  .cinematic-home .scene-copy { top: 53%; bottom: auto; transform: translateY(-50%); width: min(620px, 47vw); }
  .cinematic-home .scene-copy .scene-title { font-size: clamp(42px, 5.7vw, 96px); margin-bottom: 16px; }
  .cinematic-home .scene-kicker { margin-bottom: 14px; }
  .cinematic-home .scene-copy > p:not(.scene-kicker) { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.5; margin-bottom: 16px; }

  /* Tall desktop windows put the copy beneath the full image rather than stretching it. */
  @media (max-aspect-ratio: 4/3) {
    .cinematic-stage::before { display: none; }
    .cinematic-home .cinematic-scene { display: none; position: relative; height: auto; }
    .cinematic-home .cinematic-scene.active { display: block; }
    .cinematic-home .cinematic-scene::before {
      content: ''; display: block; position: relative; inset: auto;
      height: calc(100vw * 941 / 1672); background: none; filter: none; transform: none; z-index: auto;
    }
    .cinematic-home .cinematic-scene .scene-picture > img,
    .cinematic-home .plumbing-photo,
    .cinematic-home .cinematic-scene > .adaptive-photo,
    .cinematic-home .plumbing-cutaway,
    .cinematic-home .scene-overlay { height: calc(100vw * 941 / 1672); bottom: auto; }
    .cinematic-home .scene-copy { position: relative; inset: auto; width: 100%; max-width: 1050px; padding: 32px 5.2vw; transform: none; }
    .cinematic-home .scene-copy .scene-title { font-size: 48px; }
    .cinematic-home .scene-copy > p:not(.scene-kicker) { max-width: 65ch; font-size: 16px; }
    .cinematic-home .scene-copy .scene-title br { display: none; }
  }
}