@media (hover: hover) {
  .residential-project,
  .project-card {
    cursor: zoom-in;
    transition: transform .2s, box-shadow .2s;
  }

  .residential-project:hover,
  .project-card:hover {
    box-shadow: 0 18px 36px #071d2c33;
    transform: translateY(-6px) scale(1.015);
  }
}

.residential-project:focus-visible,
.project-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

.project-lightbox {
  background: transparent;
  max-width: min(92vw, 1100px);
  padding: 0;
}

.project-lightbox::backdrop { background: #071d2ce6; }
.project-lightbox img { display: block; max-height: 82vh; max-width: 92vw; }
.project-lightbox button {
  background: var(--yellow);
  border-radius: 50%;
  color: var(--navy);
  cursor: pointer;
  font-size: 28px;
  height: 42px;
  line-height: 1;
  position: fixed;
  right: 3vw;
  top: 3vh;
  width: 42px;
}