.gallery-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 2.5rem 5rem; background: linear-gradient(115deg,#f0f4ec 0%,#f7f5ed 72%,#ede8dc); }
.gallery-hero-inner { position: relative; z-index: 1; }
.gallery-hero .breadcrumbs { margin-bottom: 3rem; }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.gallery-heading h1 { margin-bottom: 0; font-size: clamp(4rem,8vw,6.5rem); }
.gallery-intro { max-width: 335px; margin: 0 1rem .5rem 0; font-size: .86rem; }
.gallery-hero-mark { position: absolute; z-index: 0; top: -6rem; right: 5%; color: rgba(78,121,77,.08); font-size: 26rem; transform: rotate(18deg); }
.gallery-section { background: white; }
.gallery-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.gallery-topline .eyebrow { margin-bottom: 0; }
.gallery-topline > span { color: var(--gold-600); font-size: .57rem; font-weight: 700; letter-spacing: .13em; }
.gallery-mosaic { display: grid; grid-template-columns: 1.22fr .78fr .78fr; grid-auto-rows: 190px; gap: 1rem; }
.gallery-tile { position: relative; display: block; overflow: hidden; min-width: 0; border: 0; text-align: left; cursor: pointer; }
.gallery-tile-large { grid-row: 1 / 4; padding: 0; background: #dfe8d8; }
.gallery-tile-large img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s ease; }
.gallery-tile-large:hover img { transform: scale(1.035); filter: saturate(1.07); }
.tile-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .4s ease; }
.gallery-tile:hover .tile-image { transform: scale(1.045); }
.gallery-caption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: .25rem; padding: 1.2rem; color: white; background: linear-gradient(0deg,rgba(13,31,20,.8),rgba(13,31,20,0)); }
.gallery-caption > span { color: rgba(255,255,255,.75); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }
.gallery-caption strong { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--display-font); font-size: 1.18rem; font-weight: 500; }
.gallery-caption i { color: var(--gold-300); font-family: var(--body-font); font-size: .95rem; font-style: normal; }
.gallery-tile-green { background: linear-gradient(145deg,#b5caa2,#61815b); }
.gallery-tile-gold { background: linear-gradient(145deg,#e7d8ae,#b9974f); }
.gallery-tile-pale { background: linear-gradient(145deg,#e3ebd9,#b1c39c); }
.gallery-tile-cream { background: linear-gradient(145deg,#e8e0ca,#c6b99b); }
.gallery-tile-spice { background: linear-gradient(145deg,#e5d0a7,#b98c55); }
.gallery-tile-herb { background: linear-gradient(145deg,#d6e5ce,#91ad83); }
.gallery-tile-chilli { background: linear-gradient(145deg,#e5c3a6,#bb684f); }
.gallery-tile-field { background: linear-gradient(145deg,#e7e0b8,#b4a163); }
.gallery-tile-number { position: absolute; top: .9rem; left: 1rem; color: rgba(26,49,31,.75); font-size: .52rem; font-weight: 700; letter-spacing: .11em; }
.tile-decoration { position: absolute; top: 20%; left: 50%; color: rgba(255,255,255,.7); font-size: 5.2rem; line-height: 1; transform: translateX(-50%); transition: transform .4s var(--ease); }
.gallery-tile:hover .tile-decoration { transform: translateX(-50%) rotate(12deg) scale(1.1); }
.tile-spice { font-size: 4.4rem; }
.tile-coconut { font-size: 4.8rem; }
.gallery-disclaimer { display: flex; align-items: flex-start; gap: .8rem; margin-top: 1.5rem; padding: .9rem 1rem; background: var(--paper); }
.disclaimer-icon { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border: 1px solid var(--gold-600); border-radius: 50%; color: var(--gold-600); font-size: .65rem; font-weight: 700; }
.gallery-disclaimer p { margin: 0; font-size: .65rem; line-height: 1.65; }
.lightbox { position: fixed; max-width: min(850px,calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 1rem; border: 0; background: var(--green-950); box-shadow: 0 20px 80px rgba(0,0,0,.35); }
.lightbox::backdrop { background: rgba(14,31,20,.84); backdrop-filter: blur(4px); }
.lightbox img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; }
.lightbox p { margin: .7rem 0 0; color: white; font-size: .75rem; }
.lightbox-close { position: absolute; z-index: 2; top: .5rem; right: .5rem; width: 36px; height: 36px; border: 0; color: var(--green-950); background: white; cursor: pointer; font-size: 1.3rem; line-height: 1; }
.gallery-outro { padding-block: 3.4rem; background: var(--green-100); }
.gallery-outro-inner { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 1.5rem; }
.outro-symbol { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--gold-300); border-radius: 50%; color: var(--gold-600); }
.gallery-outro h2 { margin-bottom: 0; }
.gallery-outro .eyebrow { margin-bottom: .5rem; }
@media (max-width: 800px) { .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; } .gallery-tile-large { grid-column: 1 / 3; grid-row: auto; height: 300px; } }
@media (max-width: 640px) {
  .gallery-hero { padding-block: 1.7rem 3.4rem; }
  .gallery-hero .breadcrumbs { margin-bottom: 2.2rem; }
  .gallery-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .gallery-heading h1 { font-size: clamp(3.5rem,15vw,5rem); }
  .gallery-intro { max-width: 360px; margin: 0; }
  .gallery-hero-mark { top: auto; right: -3rem; bottom: -4rem; font-size: 16rem; }
  .gallery-topline { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .gallery-mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 165px; gap: .6rem; }
  .gallery-tile-large { grid-column: 1 / 3; grid-row: auto; height: 270px; }
  .gallery-caption { padding: .85rem; }
  .gallery-caption strong { font-size: .95rem; }
  .gallery-disclaimer { padding: .8rem; }
  .gallery-outro-inner { grid-template-columns: 42px 1fr; gap: .8rem; }
  .outro-symbol { width: 38px; height: 38px; }
  .gallery-outro-inner .button { grid-column: 2; justify-self: start; }
}