:root{
  --gold: #C9A227;
  --gold-soft: #e7d69a;
  --beige: #f6f1e7;
  --grey-100:#f8f9fa;
  --grey-300:#dee2e6;
  --grey-700:#495057;
  --dark:#111;
}

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:#222; }
a { text-decoration: none; }
.text-gold { color: var(--gold) !important; }
.btn-gold{
  background: var(--gold);
  color:#111;
  border: none;
  transition: transform .2s ease, filter .2s ease;
}
.btn-gold:hover{ transform: translateY(-1px); filter: brightness(1.05); color:#111; }

.nav-link{ font-weight:500; }
.nav-link:hover, .hover-gold:hover{ color: var(--gold) !important; }

.section-title{
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  position: relative;
  display: inline-block;
}
.section-title::after{
  content:"";
  display:block;
  width:60%;
  height:3px;
  background: var(--gold);
  margin: .5rem auto 0;
  border-radius: 6px;
}

.hero-section{
  height: clamp(520px, 72vh, 780px);
  overflow: hidden;
}
.hero-section img{ height:100%; width:100%; object-fit: cover; }
.hero-overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45));
}

.service-card{
  background:#fff; border:1px solid var(--grey-300); border-radius:18px; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.service-img{ width:100%; height:210px; object-fit: cover; }

.product-card{
  background:#fff; border:1px solid var(--grey-300); border-radius:18px;
  padding:22px; text-align:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.product-icon{
  height:64px; width:64px; border-radius:16px; display:grid; place-items:center;
  background: linear-gradient(145deg, var(--gold-soft), #fff);
  color:#111; font-size:1.4rem; border:1px solid #eadfb1;
}

/* Masonry gallery using CSS columns for simplicity */
.masonry{
  column-count: 1;
  column-gap: 1rem;
}
.masonry a{ display:block; margin-bottom:1rem; border-radius:14px; overflow:hidden; border:1px solid var(--grey-300); }
.masonry img{ width:100%; display:block; transition: transform .3s ease, filter .3s ease; }
.masonry a:hover img{ transform: scale(1.02); filter: brightness(1.05); }

@media (min-width: 576px){ .masonry{ column-count: 2; } }
@media (min-width: 992px){ .masonry{ column-count: 3; } }

.footer{ border-top:1px solid rgba(255,255,255,.08); background: #0e0e0e; }

/* Small accents */
.shadow-soft{ box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.rounded-4{ border-radius: 1rem !important; }