:root {
  --nav-height: 64px;
  --color-primary:#005F2E;
  --color-secondary:#CFE8D6;
  --color-accent:#FFC20A;
  --white:#FFFFFF;
  --black:#333333;
  --wrap-max:1240px;
  --wrap-pad: clamp(1rem, 3vw, 2.25rem);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-height);}
body{
  font-family:'Lato',sans-serif;
  color:var(--black);
  line-height:1.6;
  background:#fff;
}

/******** NAVIGATION ********/
.site-nav{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-height);
  background:var(--color-primary);
  z-index:1000;
  font-family:'Lato',sans-serif;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.site-nav .container{
  max-width:var(--wrap-max);
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--wrap-pad);
  gap:1.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--white);
  line-height:1.1;
  min-width:240px;
}
.brand img{
  height:46px;width:auto;display:block;
}
.brand .name{
  font-family:'Playfair Display',serif;
  font-size:1.30rem;
  font-weight:700;
  color:var(--white);
  white-space:nowrap;
}
.brand .tagline{
  display:block;
  font-size:.65rem;
  color:var(--color-secondary);
  font-weight:500;
  letter-spacing:.6px;
  margin-top:.15rem;
}

/* Menu */
.menu{
  display:flex;
  align-items:center;
  gap:1.75rem;
}
.menu a{
  color:var(--white);
  text-decoration:none;
  font-size:.9rem;
  font-weight:500;
  position:relative;
  padding:.35rem .15rem;
  line-height:1;
  transition:color .2s;
}
.menu a:hover{color:var(--color-accent);}
.menu a.cta{
  background:var(--color-accent);
  color:var(--color-primary)!important;
  padding:.6rem 1.05rem;
  border-radius:4px;
  font-weight:700;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.menu a.cta:hover{filter:brightness(1.07);}

/* Hamburger (mobile) */
#nav-toggle{display:none;}
.hamburger{
  display:none;
  cursor:pointer;
  background:transparent;
  border:none;
  color:var(--white);
  font-size:2rem;
  line-height:1;
  padding:.4rem .6rem;
  margin-left:auto;
}

/* Mobile layout */
@media (max-width:980px){
  .hamburger{display:block;}
  .menu{
    position:absolute;
    top:var(--nav-height);
    left:0;right:0;
    background:var(--color-primary);
    flex-direction:column;
    align-items:flex-start;
    padding:1rem var(--wrap-pad) 1.5rem;
    gap:.75rem;
    display:flex;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
    border-bottom:4px solid var(--color-accent);
  }
  #nav-toggle:checked ~ .menu{
    max-height:500px;
  }
  .menu a{padding:.45rem 0;width:100%;}
  .menu a.cta{width:auto;align-self:stretch;text-align:center;margin-top:.25rem;}
}

/******** GENERIC LAYOUT ********/
section{
  padding: clamp(2.5rem,7vw,4.5rem) 0;
}
.inner-wrap{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 var(--wrap-pad);
  width:100%;
}
section.full-bleed > .inner-wrap{max-width:var(--wrap-max);}

/******** HERO ********/
#hero{
  position:relative;
  background:
    linear-gradient(rgba(0,95,46,.88),rgba(0,95,46,.88)),
    url("charger-illustration.png")
      no-repeat center right / contain,
    linear-gradient(135deg,var(--color-primary) 0%,#009955 100%);
  color:var(--white);
  text-align:center;
  padding-top: calc(var(--nav-height) + clamp(2rem,6vw,3.5rem));
  padding-bottom: clamp(3rem,8vw,5rem);
  overflow:hidden;
}
#hero .hero-content{
  max-width:820px;
  margin:0 auto;
  position:relative;
  z-index:1;
}
#hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.1rem,4.2vw,3.1rem);
  line-height:1.15;
  margin:0 0 1.3rem;
}
#hero p.sub{
  font-size:clamp(1rem,1.4vw,1.25rem);
  font-weight:500;
  margin:0 0 2.1rem;
  letter-spacing:.5px;
}
#hero .cta-hero{
  background:var(--color-accent);
  color:var(--color-primary);
  padding:1rem 2rem;
  border-radius:4px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:.25s;
}
#hero .cta-hero:hover{transform:translateY(-2px);filter:brightness(1.05);}
#hero::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 55% 50%,rgba(255,255,255,.08),transparent 60%);
  z-index:0;
}

/******** HEADINGS / INTROS ********/
h2{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(1.55rem,2.4vw,2.05rem);
  color:var(--color-primary);
  margin:0 0 .5rem;
  line-height:1.2;
}
p.intro{
  color:#555;
  margin:0 0 2rem;
  font-size:.95rem;
  max-width:820px;
}

/******** CORE VALUES ********/
.values-grid{
  display:flex;flex-wrap:wrap;gap:1.25rem;
}
.value-card{
  flex:1 1 clamp(220px,22%,260px);
  background:var(--color-secondary);
  border-radius:10px;
  padding:1.75rem 1.25rem 1.4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  transition:.25s;
}
.value-card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.value-card .icon{
  font-size:2rem;
  width:58px;height:58px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
  background:var(--color-primary);
  color:#fff;
}
.value-card h3{margin:0 0 .55rem;font-size:1.02rem;}
.value-card p{font-size:.85rem;margin:0;color:#2b2b2b;line-height:1.45;}

/******** SERVICES ********/
.service-badges{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1rem;margin:0 0 2.25rem;
}
.service-badges img{height:64px;object-fit:contain;display:block;}
.services-grid{
  display:flex;flex-wrap:wrap;gap:1.25rem;
}
.service-card{
  flex:1 1 clamp(300px,31%,420px);
  background:#fff;
  border-radius:10px;
  padding:1.6rem 1.4rem 1.6rem;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  transition:.25s;
  border:1px solid #e6eee9;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.icon-circle{
  width:56px;height:56px;border-radius:50%;
  background:var(--color-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.55rem;margin:0 0 1rem;color:var(--color-primary);
  font-weight:700;
}
.service-card h3{margin:0 0 .6rem;font-size:1.1rem;color:var(--color-primary);}
.service-card ul{
  margin:0 0 1rem;
  padding:0 0 0 1.1rem;
  font-size:.9rem;
  line-height:1.45;
  color:#333;
}
.service-card ul li{margin:.35rem 0;}
.service-card .btn{
  margin-top:auto;
  align-self:flex-start;
  background:var(--color-primary);
  color:#fff;
  padding:.6rem 1.1rem;
  border-radius:4px;
  font-weight:700;
  font-size:.85rem;
  text-decoration:none;
  letter-spacing:.5px;
  transition:.25s;
}
.service-card .btn:hover{background:#04763b;}

/******** ABOUT ********/
#about .about-layout{
  display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;
}
#about .image-circle{
  width:240px;height:240px;
  border-radius:50%;
  background:var(--color-secondary);
  display:flex;align-items:center;justify-content:center;
  font-size:4.2rem;
  margin:0 auto;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
#about .text-col{flex:1 1 420px;min-width:300px;}
#about p{margin:0 0 1.05rem;font-size:.93rem;color:#2d2d2d;}
.why-choose{
  background:var(--color-secondary);
  padding:1.4rem 1.4rem 1.2rem;
  border-radius:10px;
  margin-top:.75rem;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
}
.why-choose h3{margin:0 0 .65rem;font-size:1.05rem;color:var(--color-primary);}
.why-choose ul{list-style:none;margin:0;padding:0;font-size:.88rem;}
.why-choose li{margin:.4rem 0;padding-left:1.2rem;position:relative;}
.why-choose li:before{content:"✔";position:absolute;left:0;color:var(--color-primary);font-weight:700;}

/******** PROCESS ********/
.process-grid{
  display:flex;flex-wrap:wrap;gap:1.2rem;
}
.process-step{
  flex:1 1 clamp(200px,22%,260px);
  background:#fff;
  border-radius:10px;
  padding:1.5rem 1.2rem 1.35rem;
  text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  border:1px solid #e6eee9;
  transition:.25s;
}
.process-step:hover{transform:translateY(-4px);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.step-circle{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  margin:0 auto 1rem;
  font-size:1.15rem;
}
.process-step h3{margin:0 0 .55rem;font-size:1.0rem;color:var(--color-primary);}
.process-step p{margin:0;font-size:.83rem;color:#333;line-height:1.45;}

/******** TESTIMONIALS ********/
#testimonials{
  background:var(--color-primary);
  color:#fff;
  text-align:center;
  position:relative;
}
#testimonials h2{color:#fff;}
.testimonials-grid{
  display:flex;flex-wrap:wrap;gap:1.25rem;
  justify-content:center;
  margin:2rem 0 2.25rem;
}
.testimonial-card{
  flex:1 1 clamp(250px,30%,380px);
  background:#fff;
  border-radius:10px;
  padding:1.4rem 1.2rem 1.55rem;
  text-align:left;
  color:#222;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
  position:relative;
  display:flex;
  flex-direction:column;
}
.avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--color-accent);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem;margin:0 0 .9rem;
}
.testimonial-card p.name{font-weight:700;margin:0 0 .25rem;font-size:.95rem;}
.testimonial-card blockquote{
  margin:0 0 .75rem;
  font-size:.85rem;
  line-height:1.5;
  font-style:italic;
  position:relative;
}
.testimonial-card blockquote footer{
  font-style:normal;
  margin-top:.5rem;
  font-size:.7rem;
  color:#666;
}
.rating{color:var(--color-accent);font-size:.9rem;margin-top:auto;}
.btn-cta{
  background:var(--color-accent);
  color:var(--color-primary);
  padding:.85rem 1.7rem;
  border-radius:4px;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:.25s;
}
.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.05);}

/******** FAQ ********/
#faqs{background:var(--color-secondary);}
#faqs details{
  background:#fff;
  border-radius:10px;
  max-width:760px;
  margin:.55rem auto;
  padding:1.05rem 1.35rem 1rem;
  font-size:.9rem;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  position:relative;
  border:1px solid #e6eee9;
}
#faqs summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  font-family:'Playfair Display',serif;
  color:var(--color-primary);
  position:relative;
  padding-right:1.3rem;
}
#faqs summary::-webkit-details-marker{display:none;}
#faqs summary:after{
  content:'▾';position:absolute;right:0;top:0;font-size:.9rem;
  color:var(--color-primary);
}
#faqs details[open] summary:after{content:'▴';}
#faqs details p{margin:.65rem 0 0;line-height:1.5;color:#333;}
#faqs .btn-cta{margin-top:1.75rem;}

/******** RECEIVE / QUOTE ********/
#receive{background:var(--color-secondary);}
.panel{
  display:flex;flex-wrap:wrap;
  max-width:1000px;
  margin:0 auto;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.info{
  flex:1 1 380px;
  background:var(--color-primary);
  color:#fff;
  padding:2.25rem 2rem 2.4rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.info h3{margin:0;font-size:1.35rem;font-family:'Playfair Display',serif;}
.info p{margin:0;font-size:.9rem;line-height:1.5;}
.info ul{margin:.25rem 0 0;padding:0 0 0 1.05rem;font-size:.85rem;line-height:1.45;}
.info ul li{margin:.35rem 0;}
.info blockquote{
  margin:1rem 0 0;
  font-size:.8rem;
  background:rgba(255,255,255,.12);
  padding:.75rem .85rem;
  border-left:4px solid var(--color-accent);
  border-radius:4px;
  font-style:italic;
  line-height:1.4;
}
.form{
  flex:1 1 420px;
  background:#fff;
  padding:2rem 2rem 2.4rem;
  min-height:400px;
}
.form iframe{
  width:100%;
  border:none;
  background:transparent;
  min-height:1050px;
}

/******** CONTACT ********/
.contact-cards{
  display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;
}
.contact-card{
  flex:1 1 clamp(220px,30%,340px);
  background:var(--color-secondary);
  border-radius:10px;
  padding:1.6rem 1.2rem 1.45rem;
  text-align:center;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
  border:1px solid #e6eee9;
}
.contact-card .icon{
  font-size:1.5rem;
  background:var(--color-accent);
  color:var(--color-primary);
  width:54px;height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;justify-content:center;
  margin:0 auto 1rem;
}
.contact-card h3{margin:0 0 .4rem;font-size:1rem;color:var(--color-primary);}
.contact-card p{margin:.25rem 0;font-size:.8rem;color:#222;}
.contact-card a{color:var(--color-primary);text-decoration:none;font-weight:700;}
.contact-card a:hover{text-decoration:underline;}

/******** FOOTER ********/
.site-footer{
  background:#005F2E;
  color:#fff;
  padding:2.25rem 0 2.4rem;
  font-size:.8rem;
}
.site-footer .footer-container{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 var(--wrap-pad);
  display:flex;
  flex-wrap:wrap;
  gap:1.5rem;
  align-items:center;
  justify-content:space-between;
}
.footer-phone{
  font-family:'Playfair Display',serif;
  font-size:1.55rem;
  font-weight:700;
  color:var(--color-accent);
  letter-spacing:.5px;
}
.footer-phone a{color:inherit;text-decoration:none;}
.footer-nav{
  display:flex;flex-wrap:wrap;gap:.65rem;
  font-size:.75rem;font-weight:700;
}
.footer-nav a{
  color:#fff;text-decoration:none;position:relative;padding:.15rem .25rem;
}
.footer-nav a:hover{color:var(--color-accent);}
.footer-copy{font-size:.7rem;opacity:.85;}

@media (max-width:780px){
  .footer-container{flex-direction:column;align-items:flex-start;}
  .footer-nav{gap:.9rem;}
  .footer-copy{text-align:left;}
}

/******** UTILS ********/
.full-bleed{width:100%;}

/* Adjust sections so content not flush with window edges */
section > .inner-wrap > h2:first-child,
section > .inner-wrap > p.intro:first-of-type{
  padding-left:0;
}

/* Reduce top gap for first section after hero */
#core-values{padding-top:2.2rem;}
/* Make sure hero overlaps nicely */
body{padding-top:var(--nav-height);}

.heading-center{text-align:center;margin-bottom:2.25rem;}

/******** ANIMATIONS ********/
section.hidden{opacity:0;transform:translateY(20px);}
section.visible{animation:fadeSlide .6s ease-out forwards;}
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}