.work-section {
  padding: 110px clamp(20px, 7vw, 110px);
  background: #edf4eb;
}

.work-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 245px;
  gap: 16px;
}

.work-card {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--forest);
  box-shadow: 0 10px 32px rgba(13, 47, 31, .12);
}

.work-card.work-wide { grid-column: span 2; }
.work-card.work-tall { grid-row: span 2; }
.work-card a { display: block; width: 100%; height: 100%; }

.work-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.work-card:hover img { transform: scale(1.04); }

.work-card::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: linear-gradient(transparent, rgba(5, 25, 15, .9));
  pointer-events: none;
}

.work-card figcaption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
  color: white;
  pointer-events: none;
}

.work-card figcaption b,
.work-card figcaption span { display: block; }
.work-card figcaption b { font: 700 17px 'Manrope'; }
.work-card figcaption span { font-size: 13px; color: #dbe8df; }

.work-cta {
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: 22px;
  background: var(--forest);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.work-cta b,
.work-cta span { display: block; }
.work-cta b { font: 700 20px 'Manrope'; }
.work-cta span { color: #cbd9d0; }

@media (max-width: 980px) {
  .work-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 270px; }
}

@media (max-width: 640px) {
  .work-section { padding: 78px 20px; }
  .work-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; gap: 10px; }
  .work-card { border-radius: 16px; }
  .work-card.work-wide { grid-column: span 2; }
  .work-card.work-tall { grid-row: span 2; }
  .work-card figcaption { left: 12px; right: 12px; bottom: 12px; }
  .work-card figcaption b { font-size: 14px; }
  .work-card figcaption span { display: none; }
  .work-cta { align-items: stretch; flex-direction: column; padding: 22px; }
}

body.viewer-open { overflow: hidden; }

.photo-viewer[hidden] { display: none; }
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 14px;
  padding: 70px 24px 28px;
  background: rgba(4, 15, 9, .94);
  backdrop-filter: blur(8px);
}

.photo-viewer figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  margin: 0;
}

.photo-viewer img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .5);
}

.photo-viewer figcaption {
  margin-top: 14px;
  color: white;
  font-weight: 700;
  text-align: center;
}

.viewer-close,
.viewer-nav {
  border: 0;
  color: white;
  background: rgba(255, 255, 255, .13);
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.viewer-close:hover,
.viewer-nav:hover { background: rgba(255, 255, 255, .24); transform: scale(1.05); }
.viewer-close { position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border-radius: 50%; font-size: 34px; line-height: 1; }
.viewer-nav { width: 54px; height: 54px; border-radius: 50%; font-size: 38px; line-height: 1; }

@media (max-width: 640px) {
  .photo-viewer { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 4px; padding: 64px 8px 20px; }
  .photo-viewer img { max-height: calc(100vh - 135px); border-radius: 12px; }
  .viewer-nav { width: 40px; height: 48px; font-size: 32px; }
  .viewer-close { top: 10px; right: 12px; width: 44px; height: 44px; }
}