/* Improved styles — logo aligned, neat header, responsive fixes */

:root{
  --green-1:#0f7a3a;
  --green-2:#0c6b33;
  --muted:#f5f6f4;
  --dark:#0b0b0b;
  --container:1200px;
  --header-height:68px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, Arial, sans-serif;
  color:var(--dark);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

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

/* Header - matches HTML structure: <header class="header"> and .brand/.nav */
.header{
  background:linear-gradient(180deg,#fff,#f7fff4);
  position:sticky;top:0;z-index:60;
  box-shadow:0 6px 18px rgba(12,107,51,0.03);
}
.header .header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 20px;height:var(--header-height);
}

/* Brand area */
.brand{display:flex;align-items:center;gap:14px}
.brand img{
  height:48px; /* reduced so header isn't too tall */
  width:auto;display:block;
  object-fit:contain;margin:0;padding:4px;
}
.brand .brand-text{font-weight:800;color:var(--green-2);font-size:18px;line-height:1;}

/* Navigation - HTML uses .nav */
.nav, .navbar-links{display:flex;gap:18px;align-items:center}
.nav a, .navbar-links a{color:rgba(0,0,0,0.8);padding:8px 10px;border-radius:8px;font-weight:600;transition:color .18s, background .18s}
.nav a:hover, .navbar-links a:hover{color:var(--green-1);background:rgba(15,122,58,0.04)}

/* CTA button in nav */
.nav a.cta, .navbar-links .btn{background:var(--green-1);color:#fff;padding:8px 14px;border-radius:8px;box-shadow:0 8px 20px rgba(15,122,58,0.12)}

/* Burger for mobile - HTML has #burgerBtn and #mobileNav */
.burger{display:none;background:transparent;border:0;font-size:22px;cursor:pointer;padding:6px}

/* Hero adjustments */
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:32px 0;}
.hero-card{padding:26px;border-radius:12px;background:linear-gradient(180deg,#fff,#f8fff7);box-shadow:0 10px 28px rgba(12,107,51,0.04)}
.hero h1{font-size:30px;margin:6px 0 14px 0;line-height:1.05}
.lead{color:rgba(0,0,0,0.66);margin:0 0 16px}

/* Images in hero */
.hero img{width:100%;height:auto;border-radius:12px;display:block;object-fit:cover}

/* Services grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 8px 20px rgba(12,107,51,0.03)}

/* Strip advantages */
.strip{display:flex;gap:12px;margin:18px 0;padding:14px;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(12,107,51,0.02);align-items:center}

/* Contact & footer */
.contact{display:grid;grid-template-columns:1fr 360px;gap:18px;margin:28px 0}
footer{padding:26px 0;background:linear-gradient(180deg,#f8fff7,#f5fff2);border-top:1px solid rgba(11,11,11,0.04);text-align:center;color:rgba(0,0,0,0.6)}

/* Small screens - important tweaks */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:18px;padding:20px 0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .burger{display:block}
  .brand img{height:52px} /* slightly larger on mid screens */
}

@media (max-width:600px){
  .grid-3{grid-template-columns:1fr}
  .brand .brand-text{font-size:16px}
  .brand img{height:44px}
  .header .header-inner{padding:10px}
  .hero{padding:18px 0}
  .hero h1{font-size:22px}
}

/* Utilities */
.small{font-size:13px;color:rgba(0,0,0,0.6)}
.center{display:flex;align-items:center;justify-content:center}