@charset "UTF-8";
/* CSS Document */

    .food-gallery-page {
      background: #111;
      color: #fff;
    }

    .gallery-hero {
      margin-top: 100px;
      padding: 110px 0 74px;
      background:
        radial-gradient(circle at top left, rgba(110,180,63,.22), transparent 34%),
        linear-gradient(135deg, #111 0%, #151515 55%, #0c0c0c 100%);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .gallery-hero h1 {
      font-size: clamp(2.4rem, 5vw, 4.65rem);
      line-height: 1;
      margin-bottom: 1.4rem;
      max-width: 720px;
    }

    .gallery-hero .lead {
      color: rgba(255,255,255,.8);
      max-width: 560px;
      font-size: 1.08rem;
    }

    .gallery-hero-image {
      width: 100%;
      min-height: 420px;
      object-fit: cover;
      border-radius: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,.38);
    }

    .gallery-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .gallery-intro {
      padding: 30px 0;
      background: #181818;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .gallery-intro strong {
      display: block;
      font-size: 1.08rem;
      color: #fff;
    }

    .gallery-intro span {
      color: rgba(255,255,255,.64);
      font-size: .95rem;
    }

    .gallery-filter-section {
      padding: 46px 0 16px;
    }

    .gallery-section-heading {
      max-width: 780px;
      margin: 0 auto 26px;
      text-align: center;
    }

    .gallery-section-heading h2 {
      font-size: clamp(1.9rem, 3vw, 3rem);
      margin-bottom: 12px;
    }

    .gallery-section-heading p {
      color: rgba(255,255,255,.72);
      margin-bottom: 0;
    }

    .gallery-filter {
      border: 1px solid rgba(255,255,255,.25);
      background: transparent;
      color: #fff;
      padding: 8px 18px;
      border-radius: 999px;
      margin: 5px;
      transition: all .25s ease;
    }

    .gallery-filter:hover,
    .gallery-filter.active {
      background: rgba(110,180,63,1);
      border-color: rgba(110,180,63,1);
      color: #111;
    }
	  
	  /* Gallery Feature */

    .gallery-feature {
      padding: 40px 0 50px;
    }
	  
	 .feature-container {
     width: 50%;
  	 max-width: 1400px;
	}

    .feature-image-wrap {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: #222;
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
    }

    .feature-image-wrap img {
      width: 100%;
      min-height: 430px;
      object-fit: cover;
      display: block;
    }

    .feature-caption {
      position: absolute;
      left: 30px;
      bottom: 30px;
      max-width: 750px;
      background: rgba(0,0,0,.7);
      backdrop-filter: blur(8px);
      padding: 10px;
      border-radius: 22px;
    }

    .feature-caption h2 {
      margin-bottom: 12px;
      color: #fff;
    }

    .feature-caption p {
      color: rgba(255,255,255,.8);
      margin-bottom: 0;
    }

    .gallery-masonry-section {
      padding: 46px 0 70px;
    }

    .cjm-masonry {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 15px;
    }

    .gallery-item {
      display: block;
      position: relative;
      margin-bottom: 0;
      border-radius: 20px;
      overflow: hidden;
      background: #222;
      text-decoration: none;
    }

    .gallery-item img {
      width: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      display: block;
      transition: transform .45s ease, opacity .45s ease;
    }

    .gallery-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.36), transparent 42%);
      opacity: 0;
      transition: opacity .35s ease;
    }

    .gallery-item span {
      position: absolute;
      z-index: 2;
      left: 14px;
      bottom: 14px;
      background: rgba(0,0,0,.68);
      color: #fff;
      padding: 7px 12px;
      border-radius: 999px;
      font-size: .82rem;
      opacity: 0;
      transform: translateY(8px);
      transition: all .3s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.045);
      opacity: .86;
    }

    .gallery-item:hover::after,
    .gallery-item:hover span {
      opacity: 1;
    }

    .gallery-item:hover span {
      transform: translateY(0);
    }

    .gallery-item.is-hidden {
      display: none;
    }

    .gallery-case-study {
      padding: 80px 0;
      background:
        radial-gradient(circle at bottom right, rgba(110,180,63,.16), transparent 30%),
        #171717;
      border-top: 1px solid rgba(255,255,255,.07);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .case-study-card {
      background: #202020;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 30px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0,0,0,.22);
    }

    .case-study-kicker {
      display: inline-block;
      color: rgba(110,180,63,1);
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: .8rem;
      margin-bottom: 12px;
    }

    .case-study-card h2 {
      color: #fff;
      margin-bottom: 16px;
      font-size: clamp(1.85rem, 3vw, 3rem);
    }

    .case-study-card p {
      color: rgba(255,255,255,.76);
    }

    .case-study-points {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
    }

    .case-study-points li {
      color: rgba(255,255,255,.82);
      margin-bottom: 10px;
    }

    .case-study-points i {
      color: rgba(110,180,63,1);
      margin-right: 8px;
    }

    .case-study-gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: 12px;
}

.case-tile {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
}

.case-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, opacity .45s ease;
}

.case-tile.feature {
  grid-column: span 2;
  grid-row: span 2;
}

.case-tile.tall {
  grid-row: span 2;
}

.case-tile.wide {
  grid-column: span 2;
}

.case-tile:hover img {
  transform: scale(1.04);
  opacity: .9;
}

@media (max-width: 768px) {
  .case-study-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-tile.feature,
  .case-tile.wide {
    grid-column: span 2;
  }

  .case-tile.tall {
    grid-row: span 2;
  }
}
	  
	  /* Mobile */

@media (max-width: 480px) {
  .case-study-gallery-grid {
    grid-template-columns: 1fr;
  }
	
	.feature-container {
     width: 100%;
  	 max-width: 1400px;
	}

  .case-tile.feature,
  .case-tile.wide,
  .case-tile.tall {
    grid-column: auto;
    grid-row: auto;
  }
}

    .related-services {
      padding: 76px 0 90px;
      background: #151515;
    }

    .related-card {
      display: block;
      height: 100%;
      padding: 28px;
      border-radius: 22px;
      background: #202020;
      color: #fff;
      text-decoration: none;
      transition: transform .25s ease, background .25s ease;
    }

    .related-card:hover {
      transform: translateY(-4px);
      background: #292929;
      color: #fff;
    }

    .related-card h3 {
      color: rgba(110,180,63,1);
    }

    @media (max-width: 1200px) {
      .cjm-masonry {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 991px) {
      .gallery-hero-image {
        min-height: 340px;
      }

      .case-study-grid {
        grid-template-columns: 1fr 1fr;
      }

      .case-study-grid a:first-child {
        grid-row: auto;
        grid-column: span 2;
      }
    }

    @media (max-width: 768px) {
      .gallery-hero {
        padding: 85px 0 50px;
      }

      .feature-caption {
        position: static;
        border-radius: 0;
        max-width: none;
      }

      .feature-image-wrap {
        border-radius: 22px;
      }

      .feature-image-wrap img {
        min-height: 280px;
      }

      .cjm-masonry {
        grid-template-columns: repeat(2, 1fr);
      }

      .case-study-card {
        padding: 22px;
      }
    }

    @media (max-width: 480px) {
      .cjm-masonry,
      .case-study-grid {
        grid-template-columns: 1fr;
      }

      .case-study-grid a:first-child {
        grid-column: auto;
      }
    }