/* ---------- Page shell ---------- */
    .project-page {
      max-width: 1280px;
      margin: 0 auto;
      padding: clamp(28px, 6vw, 64px) clamp(20px, 5vw, 48px) 96px;
    }

    /* ---------- Description block ---------- */
    .project-description {
      font-size: 15.5px;
      line-height: 1.7;
      color: #2c4438;
      padding-top: 18px;
      border-top: 1px solid var(--steel);
    }

    /* ---------- Stats strip ---------- */
    .project-stats {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(20px, 4vw, 40px);
      margin-top: 20px;
      padding-top: 18px;
      margin-bottom: 20px;
      border-top: 1px solid var(--steel);
    }

    .project-stats .stat { min-width: 90px; }

    .project-stats .stat .value {
      font-size: 18px;
      font-weight: 700;
      color: var(--prime-green-dark);
      display: block;
    }

    .project-stats .stat .label {
      font-size: 11.5px;
      color: #6c8579;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ---------- Section divider ---------- */
    .section-divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: clamp(36px, 6vw, 56px) 0 clamp(20px, 4vw, 32px);
    }

    .section-divider::before,
    .section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--steel, #ccd9d3);
    }

    .section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--prime-green-dark, #083d25);
      white-space: nowrap;
      padding: 6px 14px;
      border: 1px solid var(--steel, #ccd9d3);
      border-radius: 999px;
    }

    /* ---------- Video grid — same columns as image grid ---------- */
    .video-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 2vw, 22px);
    }

    @media (max-width: 1080px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 760px)  { .video-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 460px)  { .video-grid { grid-template-columns: 1fr; } }

    /* ---------- Video card ---------- */
    .vid-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Video wrapper — 9:16 reel ratio */
    .vid-wrap {
      position: relative;
      aspect-ratio: 9 / 16;
      border-radius: 14px;
      overflow: hidden;
      background: #0b1a12;
      border: 1px solid var(--steel, #ccd9d3);
      cursor: pointer;
      isolation: isolate;
    }

    .proj-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Play / Pause overlay */
    .play-btn {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 2;
      transition: background 0.2s ease;
    }

    .play-btn:hover { background: rgba(0,0,0,0.1); }

    .play-btn .play-icon {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: rgba(8, 61, 37, 0.80);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      transition: transform 0.2s ease, background 0.2s ease, opacity 0.25s ease;
    }

    .play-btn:hover .play-icon {
      background: var(--prime-green-dark, #083d25);
      transform: scale(1.08);
    }

    /* Fade icon out while playing; reappear on hover */
    .play-btn.is-playing .play-icon {
      opacity: 0;
      transform: scale(0.8);
    }

    .vid-wrap:hover .play-btn.is-playing .play-icon {
      opacity: 1;
      transform: scale(1);
    }

    .play-btn svg {
      width: 22px;
      height: 22px;
      color: #ffffff;
    }

    /* Progress bar — sits at bottom of vid-wrap */
    .vid-progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: rgba(255,255,255,0.20);
      z-index: 3;
      cursor: pointer;
      transition: height 0.2s ease;
    }

    .vid-wrap:hover .vid-progress-bar { height: 6px; }

    .vid-progress-fill {
      height: 100%;
      width: 0%;
      background: var(--prime-green, #0d5e37);
      transition: width 0.25s linear;
    }

    /* Instagram button styled above the video card */
.video-section-footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 32px);
}

.ig-section-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #083d25 0%, #0a6b3d 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 24px rgba(8,61,37,0.30);
  border: 1px solid rgba(255,255,255,0.1);
}

.ig-section-btn:hover {
  background: linear-gradient(135deg, #0a6b3d 0%, #0d5e37 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(8,61,37,0.40);
}

.ig-section-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(8,61,37,0.25);
}

.ig-section-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


    /* ---------- Image grid ---------- */
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(14px, 2vw, 22px);
    }

    @media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 760px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 460px)  { .grid { grid-template-columns: 1fr; } }

    /* ---------- Tile ---------- */
    .tile {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: var(--prime-green-soft);
      border: 1px solid var(--steel);
      aspect-ratio: 4 / 5;
      isolation: isolate;
      padding: 0;
      cursor: zoom-in;
    }

    .tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .tile:hover img { transform: scale(1.045); }

    .tile .zoom-cue {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(8, 61, 37, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .tile:hover .zoom-cue,
    .tile:focus-visible .zoom-cue { opacity: 1; transform: scale(1); }

    .tile .zoom-cue svg { width: 14px; height: 14px; color: #ffffff; }

    .tile .plate {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      z-index: 2;
      padding: 12px 14px 11px;
      background: linear-gradient(to top, rgba(8,61,37,0.88) 0%, rgba(8,61,37,0.45) 65%, transparent 100%);
      transform: translateY(8px);
      opacity: 0;
      transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .tile:hover .plate,
    .tile:focus-visible .plate { transform: translateY(0); opacity: 1; }

    .tile .plate .name {
      color: #ffffff;
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.01em;
      margin: 0;
    }

    .tile:focus-visible { outline: 2px solid var(--prime-green); outline-offset: 2px; }

    @media (prefers-reduced-motion: reduce) {
      .tile img, .tile .plate, .tile .zoom-cue,
      .play-btn .play-icon, .vid-progress-fill { transition: none; }
    }

    /* ---------- Lightbox ---------- */
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(8,17,13,0.92);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease;
      padding: clamp(16px, 4vw, 48px);
    }

    .lightbox.is-open { opacity: 1; visibility: visible; }

    .lightbox-figure {
      position: relative;
      max-width: min(1100px, 92vw);
      max-height: 88vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .lightbox-figure img {
      max-width: 100%;
      max-height: 78vh;
      width: auto;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.45);
      transform: scale(0.96);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .lightbox.is-open .lightbox-figure img { transform: scale(1); opacity: 1; }

    .lightbox-caption {
      color: #e7f4ec;
      font-size: 13.5px;
      margin-top: 14px;
      text-align: center;
    }

    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      color: #ffffff;
      border-radius: 999px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .lightbox-close:hover,
    .lightbox-prev:hover,
    .lightbox-next:hover { background: var(--prime-green); border-color: var(--prime-green); }

    .lightbox-close { top: -6px; right: -6px; width: 36px; height: 36px; }
    .lightbox-close svg { width: 16px; height: 16px; }

    .lightbox-prev,
    .lightbox-next { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }

    .lightbox-prev { left: clamp(-8px, -4vw, 8px); }
    .lightbox-next { right: clamp(-8px, -4vw, 8px); }

    .lightbox-prev svg,
    .lightbox-next svg { width: 18px; height: 18px; }

    .lightbox-counter {
      position: absolute;
      top: -34px;
      left: 0;
      font-size: 12px;
      color: rgba(231,244,236,0.75);
      letter-spacing: 0.04em;
    }

    @media (max-width: 640px) {
      .lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
      .lightbox-prev { left: 4px; }
      .lightbox-next { right: 4px; }
      .lightbox-close { top: 6px; right: 6px; background: rgba(8,17,13,0.6); }
      .lightbox-counter { top: -28px; }
    }