/* Portfolio grid — masonry (variable-height tiles via CSS columns).
   Scoped to just .gallery-grid / .masonry-tile so nothing else on these
   pages changes. Loaded after styles.css on purpose so it wins the cascade
   for these two selectors without needing !important.
   Source: the masonry rules already authored in concept-routes.css /
   final-public-pass.css, extracted here without the rest of those files'
   site-wide overrides. */
.gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 18px;
  width: 100%;
  max-width: none;
  padding: 0 max(2vw, 18px) 96px;
}
.masonry-tile {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  overflow: hidden;
  break-inside: avoid;
  background: #172840;
  cursor: zoom-in;
}
.masonry-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;
  border-radius: 0;
  filter: saturate(1.02) contrast(1.04);
  transition: transform 0.42s cubic-bezier(.23,1,.32,1), filter 0.42s ease;
}
.masonry-tile:hover img {
  transform: scale(1.018);
  filter: saturate(1.07) contrast(1.1);
}
@media (max-width: 850px) {
  .gallery-grid {
    column-count: 2;
    column-gap: 7px;
    padding: 0 8px 66px;
  }
  .masonry-tile { margin-bottom: 7px; }
}