:root{
  --bg:#1f2328;
  --bg-elev:#2a2f36;
  --text:#f1f5f9;
  --muted:#cbd5e1;
  --gold:#caa55a;
  --gold-strong:#b88a2e;
  --border:#3a4049;
  --accent:#8b949e;
  --max:1200px;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.nav{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.2));
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.6px}
.brand-logo{
  width:36px;height:36px;border-radius:10px;
  background:radial-gradient(120px 120px at -20% -20%, #fff2 0, #fff0 60%), linear-gradient(135deg, var(--gold), var(--gold-strong));
  display:grid;place-items:center;color:#1a1e23;font-weight:900
}
.menu{display:flex;gap:28px;align-items:center}
.menu a{opacity:.9}
.menu a:hover{opacity:1}
.cta{padding:10px 16px;border-radius:999px;background:var(--gold);color:#1a1e23;font-weight:700;border:1px solid #0003}
.cta.outline{background:transparent;color:var(--text);border-color:var(--border)}

.mobile-toggle{display:none;background:none;border:0;color:var(--text);font-size:28px}

@media (max-width:900px){
  .menu{display:none;position:absolute;right:20px;top:60px;flex-direction:column;background:var(--bg-elev);padding:16px;border:1px solid var(--border);border-radius:12px}
  .menu.show{display:flex}
  .mobile-toggle{display:block}
}

.hero {
  position: relative;
  min-height: 70vh;
  display: grid;
  place-items: center;
  background: url('./htdocs/IMG_5778.JPEG') center/cover no-repeat;
  border-bottom: 1px solid var(--border);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  z-index: 1; /* overlay stays behind text */
}

.hero-inner {
  position: relative;
  text-align: center;
  padding: 40px 20px;
  z-index: 2; /* content above overlay */
}

.hero h1 {
  font-size: clamp(28px,4vw,48px);
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .5px;
  color: white; /* makes heading pop */
}

.hero p {
  color: #f0f0f0; /* lighter than muted for visibility */
  margin: 0 0 24px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2; /* ensure buttons are above overlay */
}

.section{padding:56px 0;border-top:1px solid var(--border)}
.section.light{background:#fff; color:#1a1e23}
.section-title{font-size:28px;font-weight:800;text-align:center;margin:0 0 28px}

.services{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{
  background:var(--bg-elev);padding:22px;border:1px solid var(--border);border-radius:var(--radius);
  display:grid;gap:12px;justify-items:start
}
.service-card .icon{width:36px;height:36px}
.service-card h3{margin:0;font-size:18px}
.service-card p{margin:0;color:var(--muted);font-size:14px}

@media (max-width:900px){ .services{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .services{grid-template-columns:1fr} }

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{border-radius:12px;border:1px solid var(--border)}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .gallery{grid-template-columns:1fr} }

.footer{padding:28px 0;border-top:1px solid var(--border);color:var(--muted)}
.footer .cols{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr}
.footer small{display:block;margin-top:12px}
@media (max-width:900px){ .footer .cols{grid-template-columns:1fr} }

.form{display:grid;gap:14px;max-width:720px;margin:0 auto}
.input, textarea{
  width:100%;padding:14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text)
}
textarea{min-height:140px;resize:vertical}
.btn{padding:12px 16px;border-radius:10px;border:1px solid var(--border);background:var(--gold);color:#1a1e23;font-weight:700}
.btn.secondary{background:transparent;color:var(--text)}

.icon {
  font-size: 2.5rem;       /* make emojis bigger like icons */
  color: #D4AF37;          /* gold color */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  filter: brightness(1.1) saturate(1.3); /* gives them a shinier look */
}