:root{
  --forest:#0b6b3a; /* forest green */
  --maroon:#6f0f11; /* maroon accent for buttons */
  --gold:#c59d1b;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --glass-strong: rgba(255,255,255,0.09);
  --max-width:1200px;
  --radius:14px;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, #03120a 0%, #071812 60%);
  color: #e8efe8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Navigation */
.nav-glass{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 80px);
  max-width:var(--max-width);
  z-index:1000;
  border-radius:18px;
  backdrop-filter: blur(8px) saturate(1.1);
  background: linear-gradient(180deg, rgba(10,10,10,0.18), rgba(10,10,10,0.08));
  box-shadow: 0 6px 30px rgba(2,6,4,0.6);
  border:1px solid var(--glass-border);
  padding:12px 18px;
}

.nav-wrap{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;gap:12px;align-items:center}
.brand-title{font-family:'Playfair Display', serif;font-size:18px;display:block}
.brand-sub{font-size:11px;opacity:0.8;display:block;margin-top:-4px}

.float-nav{display:flex;gap:14px;align-items:center}
.float-nav a{color: #e8efe8;text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:600}
.float-nav a.active{background: rgba(255,255,255,0.03)}
.phone-pill{background:linear-gradient(90deg,var(--forest), #064b34); padding:8px 12px;border-radius:999px;font-weight:700}

/* Hero / Slider */
.hero{position:relative;height:78vh;min-height:520px;max-height:980px;overflow:hidden;margin-top:40px}
.slider{height:100%;display:flex;transition:transform 0.9s cubic-bezier(.22,.9,.35,1)}
.slide{min-width:100%;height:100%;background-position:center;background-size:cover;position:relative;display:flex;align-items:center;justify-content:flex-start;padding-left:8%;padding-right:8%}
.overlay{max-width:760px;padding:40px;border-radius:20px}
.glass{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));backdrop-filter: blur(10px) saturate(1.1);border:1px solid var(--glass-border)}
.overlay h1{font-family:'Playfair Display', serif;font-size:40px;margin:0 0 10px;color:#fff}
.overlay h1 span{color:var(--gold);font-weight:700}
.overlay p{opacity:0.9;margin-top:6px;margin-bottom:18px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.btn-maroon{background:var(--maroon);color:white;border:2px solid rgba(0,0,0,0.12);box-shadow:0 8px 24px rgba(111,15,17,0.18)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff}
.btn-small{display:inline-block;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,0.03);text-decoration:none;color:#fff}

/* Section utilities */
.section-pad{padding:80px 24px}
.content{max-width:var(--max-width);margin:0 auto;padding-top:24px}

/* Services Grid */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{padding:20px;border-radius:14px;border:1px solid var(--glass-border)}
.service-icon{font-size:34px;margin-bottom:8px}

/* About short */
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}

/* Testimonials */
.testimonials blockquote{margin:12px 0;padding-left:12px;border-left:3px solid rgba(255,255,255,0.04);opacity:0.95}

/* Contact quick */
.contact-card{display:flex;align-items:center;justify-content:space-between;padding:24px;border-radius:14px}

/* Footer */
.footer{margin-top:40px;padding:36px 18px;background:linear-gradient(180deg, rgba(5,5,5,0.12), rgba(5,5,5,0.04));border-top:1px solid rgba(255,255,255,0.02)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.legal{margin-top:18px;text-align:center;opacity:0.7}

/* Projects grid on services */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.project{padding:18px;border-radius:12px;border:1px solid var(--glass-border)}

/* Contact page layout */
.contact-grid{display:grid;grid-template-columns:1fr 380px;gap:18px}
.contact-form label{display:block;margin-bottom:12px}
.contact-form input, .contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}
.error{color:#ffb3b3;font-size:12px;height:14px;display:block}

/* Team & Cards */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;padding-bottom:40px}

/* Responsive */
@media (max-width:1000px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav-glass{width:calc(100% - 30px);left:15px;transform:none}
}

@media (max-width:640px){
  .services-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  .overlay h1{font-size:28px}
  .nav-wrap{flex-direction:row;gap:8px}
  .float-nav{display:none}
  .hero{height:58vh}
}

/* Slider nav */
.slider-nav{position:absolute;right:32px;bottom:24px;display:flex;gap:8px;z-index:30}
.slider-nav button{background:rgba(0,0,0,0.35);border:0;color:#fff;padding:10px 14px;border-radius:8px;font-size:20px}

/* small helpers */
.section-title{font-family:'Playfair Display', serif;font-size:28px;margin-bottom:18px}
.btn-maroon:focus, .btn-small:focus, .btn:focus{outline:3px solid rgba(197,157,27,0.18);outline-offset:3px}


.service-thumb img{width:100%;height:180px;object-fit:cover;border-radius:12px 12px 0 0;border-bottom:1px solid rgba(255,255,255,0.04)}
.service-card{display:flex;flex-direction:column;overflow:hidden}
.service-hero img{width:100%;height:300px;object-fit:cover;border-radius:12px;margin-bottom:12px}


/* Logo image */
.site-logo{width:56px;height:auto;border-radius:8px;object-fit:contain}
.logo-link{display:inline-block;vertical-align:middle}

/* Mobile bottom navigation (app-like) */
#mobile-bottom-nav{
  display:none;
}
#mobile-bottom-nav .mb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#e8efe8;padding:8px 6px;font-size:12px;flex:1}
#mobile-bottom-nav .mb-item svg{margin-bottom:6px;opacity:0.95}
#mobile-bottom-nav .mb-wa{color: #fff;background:linear-gradient(180deg,var(--forest), #064b34);border-radius:12px;padding:6px 8px}

/* make nav fixed at bottom on small screens */
@media (max-width:640px){
  #mobile-bottom-nav{
    display:flex;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:1400;
    background: linear-gradient(180deg, rgba(10,10,10,0.28), rgba(10,10,10,0.18));
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    padding:6px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    backdrop-filter: blur(8px) saturate(1.05);
  }

  /* hide top float-nav on smallest screens to avoid clutter */
  .float-nav{display:none}
  .nav-glass{padding:10px 12px}
  .brand-title{display:none}
  .brand-sub{display:none}
  .site-logo{width:44px}
}


/* Polishing & animations */
.slide{transition:transform 0.9s cubic-bezier(.22,.9,.35,1), opacity 0.9s ease}
.slider{will-change:transform; transition:none}
.slide.fade{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}
.slide.fade.active{opacity:1;pointer-events:auto;position:relative}
.overlay{transition: transform 0.9s cubic-bezier(.22,.9,.35,1), opacity 0.6s ease; transform: translateY(6px); opacity:0}
.slide.fade.active .overlay{transform:none; opacity:1}

/* Service card hover */
.service-card{transition:transform 0.36s cubic-bezier(.2,.9,.3,1), box-shadow 0.36s;transform:translateY(0)}
.service-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(2,6,4,0.6)}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.gallery-item{display:block;position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(255,255,255,0.04);transition:transform .28s ease,box-shadow .28s ease}
.gallery-item img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .6s ease}
.gallery-item .gi-info{position:absolute;left:12px;bottom:12px;color:#fff;text-shadow:0 6px 18px rgba(0,0,0,0.6)}
.gallery-item:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(2,6,4,0.6)}
.gallery-item:hover img{transform:scale(1.06)}

/* Lightbox */
.lightbox{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(3,3,3,0.8);z-index:1600;opacity:0;pointer-events:none;transition:opacity .28s ease}
.lightbox.visible{opacity:1;pointer-events:auto}
.lightbox img{max-width:92%;max-height:72vh;border-radius:10px;display:block}
.lb-close{position:absolute;right:26px;top:18px;background:none;border:0;color:#fff;font-size:36px;cursor:pointer;padding:6px}

/* Logo positioning - polished */
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:12px}
.brand{margin-left:6px}
.site-logo{width:64px;height:auto}

/* make header slightly larger on desktop for premium feel */
.nav-glass{padding:16px 20px}

/* Responsive gallery and polish */
@media (max-width:1000px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .gallery-grid{grid-template-columns:repeat(1,1fr);gap:12px}
  .site-logo{width:48px}
  /* ensure overlay text smaller on mobile */
  .overlay h1{font-size:22px}
  .overlay{padding:18px}
}