:root{--brand:#c7d718;--ink:#111}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Inter,Arial,sans-serif;color:var(--ink);background:#fff}
.container{max-width:1000px;margin:0 auto;padding:0 16px}
.nav{border-bottom:1px solid #eee;background:#fff}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav .links a{margin-left:12px;text-decoration:none;color:#222}
.nav .links a:hover{text-decoration:underline}
.hero{background:var(--brand);padding:40px 0}
.hero h1{margin:0 0 8px;font-size:28px;line-height:1.2}
.hero p{margin:0 0 16px}
.btn{display:inline-block;background:#111;color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.footer{border-top:1px solid #eee;margin-top:32px;padding:18px 0;color:#555;font-size:14px}
h2{margin-top:24px}
ul{margin:8px 0 0 20px}
/* === Gallery Section === */
.gallery {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
}
.gallery h1 {
  margin: 0 0 8px;
  text-align: center;
}
.gallery p {
  text-align: center;
  margin-bottom: 20px;
}
.gallery .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gallery figure {
  margin: 0;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.gallery figcaption {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 4px;
  text-align: center;
}
/* Back button */
.btn-back{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  background:#111;        /* your brand ink */
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.btn-back:hover{ opacity:.9; }