/* reset */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif; color: #0e2431; }

/* (optional) top bar */
.g-topbar { border-bottom: 1px solid #e7edf1; background:#fff; }
.g-wrap { width:min(1200px, 100%); margin:auto; padding:10px 14px; display:flex; align-items:center; gap:16px; }
.brand img { height:34px; display:block; }
.nav { margin-left:auto; display:flex; gap:14px; }
.nav a { text-decoration:none; color:#0e2431; font-weight:600; }
.nav a.active { color:#12b2e8; }

/* --- GALLERY --- */
.gallery { padding: 0; background: #fff; }

/* FULL-BLEED GRID (edge-to-edge like your mock) */
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                 /* << no gaps */
  width: 100%;            /* << full width */
  margin: 0;
  padding: 0;             /* << remove inner padding */
}

/* tiles */
.g-item{
  position: relative;
  border-radius: 0;       /* << no rounding */
  overflow: hidden;
  box-shadow: none;       /* << no shadow */
}

/* uniform tile heights; adjust ratio to taste (try 16/10 or 4/3) */
.g-item img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: brightness(.95);
}

/* center tile overlay */
.g-center .g-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: #fff;
  padding: 12px;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
}
.g-center .g-overlay h3{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  text-shadow: 0 3px 16px rgba(0,0,0,.4);
}
.g-center .g-overlay p{
  margin: 0;
  opacity: .95;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .g-item img{ aspect-ratio: 16 / 10; }
}
/* --- keep nav on top & clickable --- */
.site-header{ position: sticky; top: 0; z-index: 1000; background:#fff; }