:root{
  --bg:#2E2E2E;
  --text:#FFFFFF;
  --muted:#E5E5E5;
  --accent:#00FF66;
  --accent-warm:#D17B0F;
  --card:#383838;
}

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

.container{width:min(1100px,92%);margin-inline:auto}

.site-header{position:sticky;top:0;background:#1f1f1f;z-index:10;border-bottom:1px solid #444}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand img{height:200px;width:auto;filter:drop-shadow(0 0 12px rgba(0,255,102,.25))}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;padding:10px 14px;border-radius:10px}
.nav a:hover{background:#2a2a2a}
.nav .cta{background:var(--accent);color:#111;font-weight:800}
.nav .cta:hover{background:#62ffa3}

.nav-toggle{display:none;background:transparent;border:1px solid #444;color:#fff;padding:8px 12px;border-radius:8px}

.hero{background:radial-gradient(1200px 400px at 50% -10%, rgba(0,255,102,.18), transparent), #141414;padding:72px 0;border-bottom:1px solid #333}
.hero h1{font-family:Montserrat,system-ui,sans-serif;font-weight:800;font-size:clamp(28px,5vw,46px);margin:0 0 10px;letter-spacing:.2px;text-shadow:0 0 18px rgba(0,255,102,.25)}
.subtitle{color:var(--muted);max-width:800px;margin-bottom:24px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--accent);color:#111}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{border:1px solid #555;color:#fff}
.btn-secondary:hover{background:#2a2a2a}

.intro{padding:44px 0}
.intro h2{font-family:Montserrat;font-weight:800;margin:0 0 10px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:32px}
.card{background:var(--card);padding:20px;border:1px solid #444;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.card h3{margin-top:0;font-family:Montserrat}

.cta-band{background:linear-gradient(90deg, rgba(209,123,15,.18), transparent);border-top:1px solid #3a3a3a;border-bottom:1px solid #3a3a3a;padding:36px 0;text-align:center}
.cta-band h2{font-family:Montserrat;margin:0 0 6px}

.page{padding:36px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.checklist{list-style:none;padding:0;margin:0}
.checklist li{padding-left:26px;position:relative;margin-bottom:10px}
.checklist li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent)}

.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px}

.note-box{margin:20px 0;padding:16px;border:1px dashed #666;border-radius:12px;background:#303030}

.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.gallery-item{background:#303030;border:1px solid #444;border-radius:12px;overflow:hidden}
.gallery-item img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery-item figcaption{padding:10px;color:#ddd;font-size:.95rem;border-top:1px solid #444}

.reviews blockquote{margin:0 0 18px;padding:16px;border-left:4px solid var(--accent);background:#303030;border-radius:8px}

.quote-form{display:block;margin-top:10px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
label{display:flex;flex-direction:column;font-weight:600;color:#e9e9e9}
input,textarea{margin-top:6px;background:#202020;color:#fff;border:1px solid #555;border-radius:10px;padding:10px 12px}
input:focus,textarea:focus{outline:2px solid var(--accent)}
.form-note{color:#cfcfcf;font-size:.95rem}
.form-success,.form-error{margin-top:8px}

.site-footer{border-top:1px solid #3a3a3a;margin-top:40px;background:#181818}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding:22px 0}
.footer-logo{height:200px;margin-bottom:8px;filter:grayscale(.1) contrast(1.1)}
.footer-bottom{padding:12px 0;border-top:1px solid #2d2d2d;font-size:.95rem;color:#cfcfcf}

/* Remove bullets and extra padding from footer lists */
.site-footer ul {
  list-style: none;     /* removes the dots */
  padding-left: 0;      /* removes left indent */
  margin: 0;            /* keeps things tight */
}

.site-footer li {
  margin-bottom: 6px;   /* even spacing between lines */
}

.site-footer a {
  text-decoration: none;
  color: var(--text);
}

.site-footer a:hover {
  color: var(--accent);
}

@media (max-width: 880px){

  /* GENERAL LAYOUT */
  .features, .service-grid { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .container { width:92%; }

 /* HEADER & MENU */
.brand{
  display:flex;
  justify-content:center;
  width:100%;
}
.brand img{
  height:115px; /* bigger logo */
  max-width:115%;
  margin:auto;
}


.nav-toggle{
  font-size:2rem;
  background:transparent;
  border:none;
  color:var(--accent);
  cursor:pointer;
  margin-left:auto;
  display:block;          /* <— ensures icon is visible */
  z-index:1001;
  transition:transform .3s ease, color .3s ease;
}
.nav-toggle:hover{
  transform:scale(1.15);
  color:var(--accent-warm);
}

/* Menu Overlay */
.nav{
  display:none;
  position:fixed;
  inset:0;
  backdrop-filter:blur(12px) saturate(150%);
  background:rgba(18,18,18,0.82);
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  animation:slideIn .4s ease forwards;
  z-index:1000;
}
.nav.open{display:flex;animation:slideIn .4s ease forwards;}

@keyframes slideIn{
  from{opacity:0;transform:translateY(-12px);}
  to{opacity:1;transform:translateY(0);}
}

/* Link styling */
.nav a{
  position:relative;
  padding:14px 22px;
  font-size:1.25rem;
  color:var(--text);
  border:none;
  text-align:center;
  overflow:hidden;
  transition:color .3s ease;
}
.nav a:hover{color:var(--accent);}
.nav a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:0%;
  height:2px;
  background:var(--accent);
  transition:width .3s ease,left .3s ease;
}
.nav a:hover::after{
  width:100%;
  left:0;
}

/* HERO */
.hero{padding:48px 0;text-align:center;}
.hero h1{font-size:1.9rem;line-height:1.3;}
.hero-ctas{flex-direction:column;align-items:center;}

/* FOOTER FIX */
.footer-grid{
  grid-template-columns:1fr;
  text-align:center;
}
.footer-logo{
  height:auto;
  max-width:160px;
  margin:0 auto 10px;
}
.footer-bottom{text-align:center;font-size:.9rem;}
  
  /* Footer icon styling */
.site-footer i {
  color: var(--accent);
  margin-right: 8px;
  width: 18px;
  text-align: center;
}

  
/* SCROLL ANIMATION STYLES */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}