:root{
  --bg: #f6f1e8;
  --text: #1f2a2e;
  --brand: #b77b3b;
  --brand-dark: #8e5d2a;
  --accent: #0f5c5d;
  --card: rgba(255,255,255,0.82);
  --border: rgba(31,42,46,0.12);
}
#site-logo .logo {
  display: block;
}

#site-logo .logo-scrolled {
  display: none;
}

#site-logo.logo-scrolled .logo {
  display: none;
}

#site-logo.logo-scrolled .logo-scrolled {
  display: block;
}




:root{
  --brand:#0f5c5d;
  --accent:#d4af37;
  --terra:#b77b3b;
}

.hero{
  position:relative;
  min-height:78vh;
  background:
    linear-gradient(rgba(10,20,20,.72), rgba(10,20,20,.72)),
    radial-gradient(circle at top left, rgba(15,92,93,.55), transparent 35%),
    radial-gradient(circle at bottom right, rgba(183,123,59,.45), transparent 30%);
  overflow:hidden;
}

.hero__overlay{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image: url("/site/templates/images/zellije3.png");
}

.letter-spacing-small{
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.8rem;
}

.service-card{
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important;
}

.zellige-box{
  background-image: url("/site/templates/images/zellije3.png");
}

.area-chip{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  padding:.85rem 1rem;
  text-align:center;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}