*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Barlow,Arial,sans-serif;color:#172c3d;background:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,90%);margin:auto}
:root{--blue:#216cae;--deep:#174f83;--green:#fe4d02;--yellow:#ffd600;--dark:#172c3d;--muted:#697983}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 28px}
.envato{font:700 17px Arial}.envato i{color:#82c341;font-style:normal;font-size:24px}.buy{background:#82b93b;color:#fff;border-radius:4px;padding:8px 21px;font-weight:600;font-size:13px}
.hero{
  height:765px;
  position:relative;
  overflow:visible;
  background:#176ca8;
}
.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.02);
  transition:opacity 1.1s ease, transform 6s ease;
}
.hero-slide:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, #485d4994, #264d286e);
}
.hero-slide.active{
  opacity:1;
  transform:scale(1);
}
.hero-slider-dots{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:108px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
}
.hero-slider-dot{
  width:9px;
  height:9px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.hero-slider-dot.active{background:#ffd600;border-color:#ffd600}

.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,87,145,.20),rgba(12,80,130,.18) 60%,rgba(255,255,255,.08));pointer-events:none}
.nav{height:85px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.logo{font-family:Montserrat,sans-serif;font-size:27px;font-weight:800;color:#fff;display:flex;align-items:center;gap:7px}
.logo-mark{font-size:39px;line-height:1;color:#68c73e;transform:rotate(-12deg)}
.menu{display:flex;align-items:center;gap:31px;color:#fff;font-weight:600;font-size:15px}
.menu a{padding:12px 0}
.menu .drop:after{content:"⌄";font-size:15px;margin-left:7px}
.start{background:var(--yellow);padding:13px 28px!important;border-radius:6px;color:#222!important}
.mobile{display:none;background:none;border:0;color:#fff;font-size:28px}
.hero-content{position:relative;z-index:3;text-align:center;color:#fff;width:730px;max-width:92%;margin:112px auto 0}
.eyebrow{letter-spacing:2px;font-size:14px;font-weight:600;margin-bottom:21px}
.hero h1{font-family:Montserrat,sans-serif;font-size:52px;line-height:1.08;font-weight:800}
.hero p{font-size:23px;font-weight:600;line-height:1.25;margin:24px auto 18px;max-width:700px}
.hero-buttons{display:flex;justify-content:center;gap:18px;margin-top:18px}
.hero-buttons a{height:57px;min-width:318px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:17px;font-weight:500}
.yellow{background:var(--yellow);color:#222}.outline{border:2px solid #fff;color:#fff;background:rgba(255,255,255,.04)}
.quick{position:absolute;z-index:8;bottom:-78px;left:50%;transform:translateX(-50%);width:min(1160px,90%);display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:18px}
.qcard{height:156px;background:#fff;border-radius:8px;box-shadow:0 10px 35px rgba(22,52,75,.15);padding:34px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.qcard:first-child{background:#226eb0;color:#fff;align-items:flex-start;text-align:left;padding-left:45px}
.qicon{font-size:40px;color:var(--green);margin-bottom:10px}.qcard:first-child .qicon{color:#fff}
.qcard h3{font-family:Montserrat,sans-serif;font-size:23px}.qcard p{font-size:14px;line-height:1.5;color:#6e7b82;margin-top:8px}.qcard:first-child p{color:#fff}
.about{padding:170px 0 95px}.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.label{color:var(--green);font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.about h2,.section-title{font-family:Montserrat,sans-serif;font-size:42px;line-height:1.13;margin-bottom:18px}
.about p{color:var(--muted);line-height:1.8;font-size:16px}.ticks{list-style:none;margin:24px 0}.ticks li{margin:12px 0;font-weight:600}.ticks li:before{content:"✓";color:var(--green);font-weight:800;margin-right:10px}.read{display:inline-block;background:var(--yellow);padding:14px 28px;border-radius:5px;font-weight:600}
.about-img{height:455px;border-radius:8px;object-fit:cover;width:100%}

/* WHAT WE OFFER — GREENIO STYLE */
.what-offer{
  background:#f5f5f5;
  padding:95px 0 105px;
}
.offer-head{
  max-width:760px;
  margin:0 auto 42px;
  text-align:center;
}
.offer-label{
  color:#fe4d02;
  font-size:15px;
  font-weight:600;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:20px;
}
.offer-head h2{
  color:#1d3848;
  font-size:43px;
  line-height:1.08;
  font-weight:800;
  margin:0;
}
.offer-grid{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.offer-card{
  background:#fff;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(25,55,70,.055);
}
.offer-card img{
  width:100%;
  height:270px;
  display:block;
  object-fit:cover;
}
.offer-card-body{
  min-height:235px;
  padding:38px 29px 28px;
  box-sizing:border-box;
}
.offer-line{
  width:28px;
  height:5px;
  border-radius:3px;
  background:#fe4d02;
  margin-bottom:20px;
}
.offer-card h3{
  color:#203c4c;
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 10px;
}
.offer-card p{
  color:#858585;
  font-size:15px;
  line-height:1.6;
  margin:0 0 28px;
}
.offer-card .learn{
  display:inline-block;
  background:#ffd600;
  color:#222;
  padding:10px 20px;
  border-radius:5px;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}
@media(max-width:900px){
  .what-offer{padding:75px 25px 85px}
  .offer-grid{grid-template-columns:1fr 1fr}
  .offer-head h2{font-size:38px}
}
@media(max-width:600px){
  .what-offer{padding:55px 20px 65px}
  .offer-grid{grid-template-columns:1fr}
  .offer-head{margin-bottom:30px}
  .offer-head h2{font-size:32px}
  .offer-card img{height:240px}
}

.services{background:#f5f8fa;padding:100px 0}.heading{text-align:center;max-width:700px;margin:0 auto 50px}.heading p{color:var(--muted);line-height:1.7}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service{background:#fff;padding:35px;border-radius:7px;text-align:center;box-shadow:0 5px 22px rgba(25,58,82,.07)}.service .icon{font-size:42px;color:var(--green);margin-bottom:18px}.service h3{font-family:Montserrat;font-size:21px;margin-bottom:12px}.service p{color:var(--muted);line-height:1.7}
.banner{padding:90px 0;background:var(--blue);color:#fff}.banner-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.banner h2{font-family:Montserrat;font-size:40px}.banner p{margin-top:10px;color:#dbeaf4}.banner a{background:var(--yellow);color:#222;padding:16px 30px;border-radius:5px;font-weight:600;white-space:nowrap}
.projects{padding:100px 0}.project-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px}.project{height:350px;border-radius:7px;overflow:hidden;position:relative}.project img{width:100%;height:100%;object-fit:cover;transition:.5s}.project:hover img{transform:scale(1.06)}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.75))}.project-text{position:absolute;z-index:2;left:25px;bottom:24px;color:#fff}.project-text small{color:#b7e58e}.project-text h3{font-family:Montserrat;margin-top:5px}
footer{background:#102b41;color:#fff;padding:70px 0 25px}.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px}.foot p,.foot a{color:#aebdc7;line-height:1.8;font-size:17px}.foot h4{font-family:Montserrat;margin-bottom:16px}.foot a{display:block;margin:7px 0}.bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:45px;padding-top:22px;color:#8296a3;font-size:13px;display:flex;justify-content:space-between}
@media(max-width:900px){.menu{display:none}.mobile{display:block}.quick{grid-template-columns:1fr 1fr;bottom:-170px}.hero{height:790px}.about{padding-top:240px}.two{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr 1fr}.foot{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .hero-slider-dots{bottom:92px}
.topbar-inner{padding:0 14px}.hero{height:820px}.hero-content{margin-top:80px}.hero h1{font-size:37px}.hero p{font-size:18px}.hero-buttons{flex-direction:column}.hero-buttons a{min-width:100%}.quick{grid-template-columns:1fr;bottom:-560px}.qcard{height:135px}.about{padding-top:620px}.about h2,.section-title{font-size:32px}.cards,.project-grid,.foot{grid-template-columns:1fr}.banner-inner{flex-direction:column;align-items:flex-start}.banner h2{font-size:30px}.bottom{flex-direction:column;gap:8px}}

.solution-section{background:#216eaf;padding:105px 0 125px;color:#fff;position:relative;overflow:hidden}
.solution-section:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(24,108,171,.90),rgba(24,108,171,.90)),url("https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=2200&q=85") center/cover;opacity:.95}
.solution-wrap{position:relative;z-index:2}
.solution-head{text-align:center;max-width:700px;margin:0 auto 50px}.solution-head .label{color:#73c13f}.solution-head h2{font-family:Montserrat;font-size:39px;line-height:1.15;margin-bottom:18px}.solution-head p{line-height:1.7;color:#e1edf5}
.solution-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.solution-card{background:#fff;border-radius:9px;overflow:hidden;color:#172c3d;box-shadow:0 12px 35px rgba(0,0,0,.12)}.solution-card img{width:100%;height:270px;object-fit:cover}.solution-body{padding:27px 29px 30px}.solution-icon{color:#fe4d02;font-size:30px;margin-bottom:8px}.solution-body h3{font-family:Montserrat;font-size:22px;margin-bottom:8px}.solution-body p{color:#687983;line-height:1.65;margin-bottom:20px}.learn{display:inline-block;background:#ffd600;padding:11px 20px;border-radius:5px;font-size:14px;font-weight:600}
.steps{background:#f4f5f5;padding:105px 0 125px;position:relative;overflow:hidden}.steps:before{content:"";position:absolute;left:-4%;right:-4%;top:180px;height:400px;background:repeating-radial-gradient(ellipse at 15% 65%,transparent 0,transparent 100px,#0fc5aa 102px,#0fc5aa 104px,transparent 106px,transparent 205px);opacity:.9;pointer-events:none}.steps-head{position:relative;z-index:2;text-align:center;max-width:680px;margin:0 auto 55px}.steps-head .label{color:#69b33f}.steps-head h2{font-family:Montserrat;font-size:40px;margin-bottom:17px}.steps-head p{color:#8a8e90;line-height:1.7}.step-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}.step-card{background:#fff;border-radius:9px;padding:31px 25px;text-align:center;box-shadow:0 6px 18px rgba(20,45,62,.06);min-height:207px}.step-card:nth-child(even){margin-top:45px}.step-no{width:39px;height:39px;border-radius:50%;background:#fe4d02;color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}.step-card h3{font-family:Montserrat;font-size:17px;margin-bottom:10px}.step-card p{color:#85898b;line-height:1.6;font-size:14px}
.video-energy-section{
  position:relative;
  height:515px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  background:#398e82;
}
.video-energy-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  pointer-events:none;
}
.video-energy-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(16,103,168,.76),rgba(71,173,112,.68));
}
.video-energy-content{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:auto;
}
.video-energy-content h2{
  font-family:"Barlow",Arial,sans-serif;
  font-size:52px;
  line-height:1.05;
  font-weight:800;
  margin:0 0 20px;
}
.video-energy-content p{
  font-size:16px;
  line-height:1.55;
  margin:0 0 30px;
}
.video-energy-content a{
  display:inline-block;
  background:#ffd600;
  color:#222;
  padding:16px 34px;
  border-radius:5px;
  font-size:16px;
  font-weight:600;
}
@media(max-width:900px){
  .video-energy-section{height:470px}
  .video-energy-content h2{font-size:42px}
  .video-energy-content p br{display:none}
}
@media(max-width:600px){
  .video-energy-section{height:430px;padding:0 20px}
  .video-energy-content h2{font-size:32px}
  .video-energy-content p{font-size:14px}
}


/* ABOUT GREENIO - SECTION FROM REFERENCE */
.about-solar-section{
  background:#fff;
  padding:105px 0 100px;
}
.about-solar-wrap{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}
.about-solar-media{
  position:relative;
}
.about-solar-image{
  width:100%;
  height:545px;
  object-fit:cover;
  display:block;
  border-radius:10px;
}
.about-solar-play{
  position:absolute;
  top:50%;
  right:-28px;
  transform:translateY(-50%);
  width:96px;
  height:96px;
  border-radius:50%;
  background:#fff;
  border:7px solid rgba(255,255,255,.45);
  box-shadow:0 8px 30px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.about-solar-play:after{
  content:"";
  margin-left:6px;
  width:0;
  height:0;
  border-top:16px solid transparent;
  border-bottom:16px solid transparent;
  border-left:23px solid #ffd600;
}
.about-solar-content{
  padding-top:4px;
}
.about-solar-label{
  display:flex;
  align-items:center;
  gap:18px;
  color:#fe4d02;
  font-size:15px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.about-solar-label:before{
  content:"";
  width:38px;
  height:2px;
  background:#fe4d02;
}
.about-solar-content h2{
  color:#1d3848;
  font-size:44px;
  line-height:1.12;
  font-weight:800;
  margin:0 0 24px;
}
.about-solar-content p{
  color:#858585;
  font-size:16px;
  line-height:1.65;
  margin:0 0 27px;
}
.about-solar-content .about-solar-btn{
  display:inline-block;
  margin-top:2px;
  padding:14px 29px;
  background:#ffd600;
  color:#222;
  border-radius:5px;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
}
@media(max-width:900px){
  .about-solar-section{padding:75px 25px}
  .about-solar-wrap{
    grid-template-columns:1fr;
    gap:55px;
  }
  .about-solar-image{height:500px}
  .about-solar-play{right:25px}
  .about-solar-content h2{font-size:40px}
}
@media(max-width:600px){
  .about-solar-section{padding:55px 20px}
  .about-solar-image{height:390px}
  .about-solar-play{
    width:72px;
    height:72px;
    border-width:5px;
    right:18px;
  }
  .about-solar-play:after{
    border-top-width:11px;
    border-bottom-width:11px;
    border-left-width:16px;
  }
  .about-solar-content h2{font-size:32px}
  .about-solar-content p{font-size:15px}
}


/* WHY CHOOSE US - REFERENCE SECTION */
.why-choose-section{
  background:#f4f4f4;
  padding:100px 0 110px;
}
.why-choose-wrap{
  max-width:1140px;
  margin:0 auto;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:60px;
  align-items:stretch;
}
.why-intro{
  display:flex;
  flex-direction:column;
}
.why-label{
  display:flex;
  align-items:center;
  gap:18px;
  color:#fe4d02;
  font-size:15px;
  font-weight:600;
  letter-spacing:1.7px;
  text-transform:uppercase;
  margin-bottom:22px;
}
.why-label:before{
  content:"";
  width:38px;
  height:2px;
  background:#fe4d02;
}
.why-intro h2{
  color:#1d3848;
  font-size:42px;
  line-height:1.08;
  font-weight:800;
  margin:0 0 22px;
}
.why-intro p{
  color:#858585;
  font-size:16px;
  line-height:1.55;
  margin:0;
}
.why-person{
  margin-top:32px;
  width:100%;
  height:232px;
  object-fit:cover;
  border-radius:9px;
  display:block;
}
.why-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.why-card{
  background:#fff;
  border-radius:14px;
  min-height:265px;
  padding:35px 32px 30px;
  text-align:center;
  box-shadow:0 3px 18px rgba(25,55,70,.045);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.why-icon{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
  color:#fe4d02;
}
.why-icon svg{
  width:48px;
  height:48px;
  fill:#fe4d02;
}
.why-card h3{
  color:#1d3848;
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 15px;
}
.why-card p{
  color:#858585;
  font-size:16px;
  line-height:1.55;
  margin:0;
  max-width:285px;
}
@media(max-width:900px){
  .why-choose-section{padding:75px 25px}
  .why-choose-wrap{
    grid-template-columns:1fr;
    gap:45px;
  }
  .why-intro h2{font-size:40px}
  .why-person{height:330px}
}
@media(max-width:600px){
  .why-choose-section{padding:55px 20px}
  .why-cards{grid-template-columns:1fr}
  .why-intro h2{font-size:32px}
  .why-card{min-height:235px}
  .why-person{height:270px}
}


/* GREEN ENERGY CTA + CONTACT SECTION */
.green-contact-section{
  position:relative;
  background:#f4f4f4;
  padding:55px 0 80px;
  overflow:hidden;
}
.green-contact-section:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:245px;
  bottom:0;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(205,205,205,.34) 0px,
    rgba(205,205,205,.34) 1px,
    transparent 1px,
    transparent 5px
  );
  pointer-events:none;
}
.green-energy-box{
  position:relative;
  z-index:2;
  max-width:1160px;
  min-height:345px;
  margin:0 auto 58px;
  border-radius:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:#4c9b88;
}
.green-energy-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.green-energy-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(24,111,163,.70),rgba(67,157,100,.70));
}
.green-energy-content{
  position:relative;
  z-index:2;
  max-width:650px;
  padding:40px 25px;
}
.green-energy-label{
  color:#6fc24b;
  font-size:15px;
  letter-spacing:1.8px;
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:20px;
}
.green-energy-content h2{
  font-size:42px;
  line-height:1.08;
  font-weight:800;
  margin:0 0 25px;
}
.green-energy-content a{
  display:inline-block;
  background:#ffd600;
  color:#222;
  padding:14px 28px;
  border-radius:5px;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
}
.green-contact-grid{
  position:relative;
  z-index:3;
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.green-contact-card{
  background:#fff;
  border-radius:10px;
  min-height:0;
  padding:40px 44px 38px;
  box-shadow:0 4px 20px rgba(25,55,70,.055);
}
.green-contact-label{
  color:#fe4d02;
  font-size:14px;
  letter-spacing:1.8px;
  font-weight:500;
  text-transform:uppercase;
  margin-bottom:20px;
}
.green-contact-card h3{
  color:#17394b;
  font-size:38px;
  line-height:1.12;
  font-weight:800;
  margin:0 0 18px;
}
.green-contact-line{
  width:46px;
  height:2px;
  background:#fe4d02;
  margin-bottom:22px;
}
.green-contact-card p{
  color:#7f8589;
  font-size:16px;
  line-height:1.65;
  margin:0;
}
.contact-details{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.contact-details a{
  color:#17394b;
  text-decoration:none;
  font-size:22px;
  line-height:1.25;
  font-weight:700;
}
.contact-details .contact-support-btn{
  margin-top:4px;
  display:inline-block;
  background:#ffd600;
  color:#222;
  border-radius:5px;
  padding:12px 27px;
  font-size:15px;
  font-weight:500;
}
.green-contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 13px;
}
.green-contact-form label{
  color:#202d35;
  font-size:17px;
  display:block;
}
.green-contact-form input,
.green-contact-form textarea{
  width:100%;
  margin-top:5px;
  border:0;
  outline:none;
  background:#f1f1f1;
  border-radius:6px;
  padding:13px 14px;
  font-family:"Barlow",Arial,sans-serif;
  font-size:15px;
  box-sizing:border-box;
}
.green-contact-form textarea{
  height:92px;
  resize:none;
}
.green-form-full{
  grid-column:1 / -1;
}
.green-contact-submit{
  grid-column:1 / -1;
  width:100%;
  border:0;
  background:#ffd600;
  color:#222;
  padding:13px 28px;
  border-radius:5px;
  cursor:pointer;
  font-size:15px;
}
@media(max-width:900px){
  .green-contact-section{padding:65px 25px 75px}
  .green-contact-section:before{top:270px}
  .green-energy-box{min-height:380px}
  .green-energy-content h2{font-size:36px}
  .green-contact-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .green-contact-section{padding:50px 20px 60px}
  .green-contact-section:before{top:245px}
  .green-energy-box{min-height:360px;margin-bottom:35px}
  .green-energy-content h2{font-size:30px}
  .green-contact-card{padding:30px 25px}
  .green-contact-card h3{font-size:31px}
  .contact-details a{font-size:20px}
  .green-contact-form{grid-template-columns:1fr}
  .green-form-full,.green-contact-submit{grid-column:auto}
}

.energy-cta{height:515px;display:flex;align-items:center;text-align:center;color:#fff;position:relative;background:linear-gradient(90deg,rgba(22,108,170,.82),rgba(70,171,111,.72)),url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=85") center/cover}.energy-cta-inner{max-width:760px;margin:auto}.energy-cta h2{font-family:Montserrat;font-size:48px;line-height:1.12;margin-bottom:20px}.energy-cta p{font-size:16px;line-height:1.7;margin-bottom:28px}.energy-cta a{display:inline-block;background:#ffd600;color:#222;padding:16px 32px;border-radius:5px;font-weight:600}
@media(max-width:900px){.solution-cards{grid-template-columns:1fr}.step-grid{grid-template-columns:1fr 1fr}.step-card:nth-child(even){margin-top:0}.energy-cta h2{font-size:38px}}
@media(max-width:600px){.solution-section,.steps{padding:75px 0}.solution-head h2,.steps-head h2{font-size:31px}.solution-cards,.step-grid{grid-template-columns:1fr}.energy-cta{height:440px}.energy-cta h2{font-size:32px}}


/* ===== WORKING TOP DROPDOWN MENUS ===== */
.menu{position:relative}
.menu-item{position:relative;height:100%;display:flex;align-items:center}
.menu-item>a{display:flex;align-items:center;gap:7px}
.menu-item>a .arrow{font-size:13px;transition:.2s}
.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
  min-width:205px;background:#fff;border-radius:6px;padding:10px 0;
  box-shadow:0 12px 30px rgba(0,0,0,.18);opacity:0;visibility:hidden;
  pointer-events:none;transition:.22s;z-index:100;
}
.dropdown-menu:before{
  content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #fff;
}
.dropdown-menu a{
  display:block!important;color:#243847!important;padding:11px 20px!important;
  font-size:14px;font-weight:500;white-space:nowrap;
}
.dropdown-menu a:hover{background:#f3f8f1;color:#fe4d02!important}
.menu-item.open .dropdown-menu,
.menu-item:hover .dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
.menu-item.open>a .arrow,.menu-item:hover>a .arrow{transform:rotate(180deg)}
@media(max-width:900px){
  .mobile{
    display:block;
    background:none;
    border:0;
    color:#fff;
    font-size:30px;
    cursor:pointer;
    padding:8px;
    position:relative;
    z-index:1001;
  }

  .menu{
    display:none;
  }

  .menu.open{
    display:flex!important;
    position:absolute;
    top:75px;
    left:0;
    right:0;
    width:100%;
    background:#216cae;
    flex-direction:column;
    align-items:stretch;
    padding:15px 18px;
    border-radius:8px;
    gap:3px;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    z-index:1000;
  }

  .menu.open > a,
  .menu.open .menu-item > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    color:#fff!important;
    padding:13px 6px!important;
  }

  .menu.open .menu-item{
    display:block;
    height:auto;
  }

  .menu.open .dropdown-menu{
    position:static;
    display:none;
    transform:none!important;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    width:100%;
    min-width:0;
    background:#fff;
    box-shadow:none;
    border-radius:5px;
    padding:4px 0;
  }

  .menu.open .menu-item.open .dropdown-menu{
    display:block;
  }

  .menu.open .dropdown-menu:before{
    display:none;
  }

  .menu.open .dropdown-menu a{
    display:block!important;
    color:#243847!important;
    padding:11px 18px!important;
  }

  .menu.open .start{
    width:100%;
    justify-content:center;
    text-align:center;
    margin-top:7px;
  }
}

@media(max-width:600px){
  .menu.open{
    top:70px;
    left:0;
    right:0;
    width:100%;
  }
}


.solar-video-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:25px;
}
.solar-video-modal.show{display:flex}
.solar-video-modal video{
  width:min(1000px,92vw);
  max-height:82vh;
  border-radius:8px;
  background:#000;
}
.solar-video-close{
  position:absolute;
  top:22px;
  right:28px;
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#222;
  font-size:27px;
  line-height:44px;
  cursor:pointer;
}


/* FINAL REFERENCE SPACING — HERO QUICK CARDS + FOLLOWING CONTENT */
@media(min-width:901px){
  .quick{
    width:min(1160px,90%);
    grid-template-columns:1.25fr 1fr 1fr 1fr;
    gap:18px;
    bottom:-135px;
  }
  .qcard{
    height:245px;
    padding:35px 28px;
    border-radius:10px;
  }
  .qcard:first-child{
    padding:38px 44px;
    justify-content:center;
  }
  .qicon{
    font-size:42px;
    margin-bottom:16px;
  }
  .qcard h3{
    font-size:24px;
    line-height:1.25;
    margin:0;
  }
  .qcard p{
    font-size:15px;
    line-height:1.55;
    margin-top:13px;
  }
  .about{
    padding:275px 0 110px;
  }
  .about .two{
    gap:90px;
  }
  .about-img{
    height:475px;
  }
}
@media(max-width:900px) and (min-width:601px){
  .quick{
    bottom:-145px;
  }
  .qcard{
    height:190px;
  }
  .about{
    padding-top:250px;
  }
}
@media(max-width:600px){
  .quick{
    bottom:-410px;
    gap:14px;
  }
  .qcard{
    height:180px;
    padding:28px 22px;
    border-radius:9px;
  }
  .qcard:first-child{
    padding:28px 25px;
  }
  .qicon{
    font-size:36px;
    margin-bottom:11px;
  }
  .qcard h3{
    font-size:21px;
    line-height:1.25;
  }
  .qcard p{
    font-size:14px;
    line-height:1.5;
    margin-top:8px;
  }
  .about{
    padding-top:475px;
  }
}


/* Reference layout: the Who We Are section follows the hero directly. */
.quick{display:grid !important}

.who-we-are{
  background:#f5f5f5;
  padding:92px 0 55px;
  overflow:hidden;
}
.who-grid{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.who-copy{
  padding-top:5px;
}
.who-label{
  display:flex;
  align-items:center;
  gap:17px;
  color:#fe4d02;
  font-size:15px;
  line-height:1;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:24px;
}
.who-label:before{
  content:"";
  width:39px;
  height:2px;
  background:#fe4d02;
}
.who-copy h2{
  color:#1c3949;
  font-size:46px;
  line-height:1.08;
  font-weight:800;
  margin:0 0 24px;
}
.who-copy p{
  color:#858585;
  max-width:540px;
  font-size:16px;
  line-height:1.65;
  margin:0 0 30px;
}
.who-btn{
  display:inline-block;
  background:#ffd600;
  color:#222;
  padding:14px 28px;
  border-radius:5px;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
}
.who-visual{
  position:relative;
  min-height:500px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.who-visual > img{
  width:100%;
  max-width:555px;
  height:455px;
  object-fit:cover;
  border-radius:9px;
  display:block;
}
.who-floating-card{
  position:absolute;
  left:-42px;
  bottom:0;
  width:270px;
  min-height:255px;
  padding:39px 43px 30px;
  box-sizing:border-box;
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 35px rgba(22,52,75,.10);
}
.who-bolt{
  color:#fe4d02;
  font-size:35px;
  line-height:1;
  text-align:center;
  margin-bottom:16px;
}
.who-card-label{
  color:#fe4d02;
  font-size:14px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  margin-bottom:12px;
}
.who-floating-card h3{
  color:#17394b;
  font-size:29px;
  line-height:1.18;
  font-weight:800;
  margin:0;
}
.client-logos{
  max-width:1160px;
  margin:60px auto 0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  align-items:center;
  gap:30px;
  color:#35414a;
}
.client-logo{
  text-align:center;
  font-size:17px;
  font-weight:600;
  opacity:.9;
  white-space:nowrap;
}
.logo-two{letter-spacing:2px;font-size:14px}
.logo-three{font-size:16px}
.logo-four{line-height:.9;font-size:17px}
.logo-five{letter-spacing:1px;font-size:14px}
.logo-six{font-size:27px;font-weight:800;letter-spacing:1px}
@media(max-width:900px){
  .who-we-are{padding:70px 25px 55px}
  .who-grid{grid-template-columns:1fr;gap:55px}
  .who-copy h2{font-size:42px}
  .who-visual{justify-content:center}
  .who-floating-card{left:20px}
  .client-logos{grid-template-columns:repeat(3,1fr);row-gap:28px}
}
@media(max-width:600px){
  .who-we-are{padding:55px 20px 45px}
  .who-copy h2{font-size:33px}
  .who-copy p{font-size:15px}
  .who-visual{min-height:100%}
  .who-visual > img{height:100%}
  .who-floating-card{
    left:8px;
    bottom:0;
    width:235px;
    min-height:225px;
    padding:30px 28px;
  }
  .who-floating-card h3{font-size:25px}
  .client-logos{grid-template-columns:repeat(2,1fr);gap:22px 10px;margin-top:45px}
  .client-logo{font-size:14px}
}


/* RESTORED HERO QUICK BOXES + WHO WE ARE SPACING */
@media(min-width:901px){
  .quick{
    position:absolute;
    z-index:8;
    bottom:-135px;
    left:50%;
    transform:translateX(-50%);
    width:min(1160px,90%);
    grid-template-columns:1.25fr 1fr 1fr 1fr;
    gap:18px;
  }
  .qcard{
    height:245px;
    padding:5px 28px;
  }
  .qcard:first-child{
    padding:38px 44px;
  }
  .who-we-are{
    padding-top:125px;
  }
}
@media(max-width:900px) and (min-width:601px){
  .quick{
    position:absolute;
    bottom:-145px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    grid-template-columns:1fr 1fr;
  }
  .who-we-are{padding-top:250px}
}
@media(max-width:600px){
  .quick{
    position:absolute;
    bottom:-410px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    grid-template-columns:1fr;
  }
  .who-we-are{padding-top:475px}
}

/* ===== Extracted style block ===== */

/* ===== FINAL GREENIO TYPOGRAPHY + FULL-WIDTH STEP ARROW ===== */
body,
button,
input,
textarea,
select{
  font-family:"Barlow",Arial,sans-serif;
}

h1,h2,h3,h4,h5,h6,
.logo,
.hero h1,
.about h2,
.section-title,
.solution-head h2,
.steps-head h2,
.energy-cta h2,
.step-card h3,
.service h3,
.project-text h3,
.banner h2{
  font-family:"Barlow",Arial,sans-serif;
}

/* Greenio-style larger, stronger typography */
body{font-size:16px}
.menu{font-size:16px;gap:32px}
.logo{font-size:29px;font-weight:800}
.hero h1{font-size:58px;line-height:1.05;font-weight:800}
.hero p{font-size:24px;line-height:1.3}
.eyebrow{font-size:15px}
.about h2,.section-title{font-size:46px;font-weight:700}
.about p,.heading p,.solution-head p,.steps-head p{font-size:17px}
.service h3{font-size:23px}
.service p{font-size:16px}
.solution-head h2{font-size:44px}
.solution-body h3{font-size:24px}
.solution-body p{font-size:16px}
.steps-head h2{font-size:44px}
.step-card h3{font-size:19px}
.step-card p{font-size:16px}
.energy-cta h2{font-size:52px}
.banner h2{font-size:43px}

/* Full screen curved dotted arrow/path behind all four cards */
.steps-area{
  position:relative;
  min-height:390px;
  overflow:visible;
}
.steps-path{
  position:absolute;
  z-index:1;
  top:-5px;
  left:50%;
  width:100vw;
  height:390px;
  transform:translateX(-50%);
  overflow:visible;
  pointer-events:none;
}
.steps-path path{
  fill:none;
  stroke:#10bfa9;
  stroke-width:2.6;
  stroke-dasharray:7 9;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.step-grid{position:relative;z-index:3}
.step-card{position:relative;z-index:4}

/* Make the alternating cards closer to the reference */
.step-card:nth-child(1),
.step-card:nth-child(3){margin-top:0}
.step-card:nth-child(2),
.step-card:nth-child(4){margin-top:46px}

/* Keep path full width on smaller desktop screens */
@media(max-width:1200px){
  .hero h1{font-size:52px}
  .about h2,.section-title{font-size:42px}
}
@media(max-width:900px){
  .menu{font-size:15px}
  .hero h1{font-size:46px}
  .hero p{font-size:20px}
  .about h2,.section-title{font-size:38px}
  .steps-area{min-height:0}
  .steps-path{display:none}
}
@media(max-width:600px){
  .hero h1{font-size:38px}
  .hero p{font-size:18px}
  .about h2,.section-title{font-size:33px}
  .solution-head h2,.steps-head h2{font-size:34px}
  .energy-cta h2{font-size:36px}
  .step-card h3{font-size:19px}
  .step-card p{font-size:15px}
}

/* ===== Extracted style block ===== */

/* ===== MOBILE HERO TEXT FIX ONLY ===== */
@media (max-width:600px){

  .hero{
    position:relative;
  }

  .hero-content{
    position:relative;
    z-index:6;
    width:100%;
    max-width:350px;
    margin:34px auto 0 !important;
    padding:0 10px;
    box-sizing:border-box;
    text-align:center;
  }

  .eyebrow{
    font-size:14px !important;
    line-height:1.2 !important;
    letter-spacing:2px !important;
    margin-bottom:20px !important;
  }

  .hero h1{
    font-size:32px !important;
    line-height:1.06 !important;
    letter-spacing:-0.5px;
    margin:0 auto !important;
    max-width:340px;
  }

  .hero p{
    font-size:18px !important;
    line-height:1.28 !important;
    margin:22px auto 0 !important;
    max-width:340px;
  }

  .hero-buttons{
    margin-top:26px !important;
    gap:9px !important;
  }

  .hero-buttons a{
    height:62px !important;
    min-width:0 !important;
    width:100%;
    font-size:17px !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== FINAL MOBILE HERO BUTTON VISIBILITY FIX ===== */
@media (max-width:600px){

  .hero-content{
    margin-top:30px !important;
  }

  .hero-buttons{
    margin-top:22px !important;
    gap:9px !important;
    position:relative;
    z-index:20;
  }

  .hero-buttons a{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative;
    z-index:21;
    height:62px !important;
    min-height:62px !important;
  }

  /* Keep both buttons inside the visible hero area */
  .hero{
    overflow:visible !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== MOBILE: GIVE HERO BUTTONS MORE ROOM BEFORE 4 BOXES ===== */
@media (max-width:600px){

  /* More vertical room inside the banner */
  .hero{
    height:900px !important;
    overflow:visible !important;
  }

  .hero-content{
    margin-top:30px !important;
    padding-bottom:20px;
  }

  .hero-buttons{
    margin-top:22px !important;
    position:relative;
    z-index:50;
  }

  .hero-buttons a{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative;
    z-index:51;
    height:62px !important;
    min-height:62px !important;
  }

  /* Start the first card shortly after the Discover more button */
  .quick{
    top:520px !important;
    bottom:auto !important;
    z-index:30;
  }

  /* Keep the next section below the four cards */
  .who-we-are{
    padding-top:575px !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== MOBILE MENU MUST STAY ABOVE HERO TEXT ===== */
@media (max-width:600px){
  .hero .nav{
    position:relative !important;
    z-index:10000 !important;
  }

  .hero .menu.open{
    z-index:10001 !important;
    background:#216cae !important;
    position:absolute !important;
  }

  .hero .mobile{
    position:relative !important;
    z-index:10002 !important;
  }

  /* Keep hero text below the open navigation */
  .hero .hero-content{
    z-index:2 !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== GREENIO SCROLL / ENTRANCE EFFECTS ===== */
@media (prefers-reduced-motion: no-preference){
  body.reveal-enabled .reveal{
    opacity:0;
    transform:translate3d(0,45px,0);
    transition:opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform;
  }
  body.reveal-enabled .reveal.from-left{transform:translate3d(-70px,0,0)}
  body.reveal-enabled .reveal.from-right{transform:translate3d(70px,0,0)}
  body.reveal-enabled .reveal.from-top{transform:translate3d(0,-55px,0)}
  body.reveal-enabled .reveal.from-bottom{transform:translate3d(0,55px,0)}
  body.reveal-enabled .reveal.zoom{transform:scale(.92)}
  body.reveal-enabled .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  body.reveal-enabled .reveal.delay-1{transition-delay:.10s}
  body.reveal-enabled .reveal.delay-2{transition-delay:.20s}
  body.reveal-enabled .reveal.delay-3{transition-delay:.30s}
  body.reveal-enabled .reveal.delay-4{transition-delay:.40s}

  /* Smooth stagger for repeated cards/items */
  body.reveal-enabled .who-we-are .qcard,
  body.reveal-enabled .what-offer .offer-card,
  body.reveal-enabled .project-grid .project,
  body.reveal-enabled .steps .step,
  body.reveal-enabled .why-choose-section .feature,
  body.reveal-enabled .green-contact-section .contact-details > *,
  body.reveal-enabled .foot > div{
    opacity:0;
    transform:translate3d(0,45px,0);
    transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  }
  body.reveal-enabled .who-we-are .qcard.is-visible,
  body.reveal-enabled .what-offer .offer-card.is-visible,
  body.reveal-enabled .project-grid .project.is-visible,
  body.reveal-enabled .steps .step.is-visible,
  body.reveal-enabled .why-choose-section .feature.is-visible,
  body.reveal-enabled .green-contact-section .contact-details > *.is-visible,
  body.reveal-enabled .foot > div.is-visible{
    opacity:1;
    transform:none;
  }
  body.reveal-enabled .who-we-are .qcard:nth-child(2),
  body.reveal-enabled .what-offer .offer-card:nth-child(2),
  body.reveal-enabled .project-grid .project:nth-child(2),
  body.reveal-enabled .steps .step:nth-child(2){transition-delay:.12s}
  body.reveal-enabled .who-we-are .qcard:nth-child(3),
  body.reveal-enabled .what-offer .offer-card:nth-child(3),
  body.reveal-enabled .project-grid .project:nth-child(3),
  body.reveal-enabled .steps .step:nth-child(3){transition-delay:.24s}
  body.reveal-enabled .who-we-are .qcard:nth-child(4),
  body.reveal-enabled .what-offer .offer-card:nth-child(4),
  body.reveal-enabled .steps .step:nth-child(4){transition-delay:.36s}

  /* Section headings/content enter from opposite sides like the reference */
  body.reveal-enabled .who-we-are .heading,
  body.reveal-enabled .projects .heading,
  body.reveal-enabled .what-offer .heading{
    opacity:0; transform:translate3d(-55px,0,0);
    transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
  }
  body.reveal-enabled .who-we-are .heading.is-visible,
  body.reveal-enabled .projects .heading.is-visible,
  body.reveal-enabled .what-offer .heading.is-visible{opacity:1;transform:none}

  .hero, .topbar{animation:none !important}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ===== Extracted style block ===== */

/* ===== Quick 4 Cards + About entrance effects ===== */
.quick .qcard,
.who-we-are .about-text,
.who-we-are .about-image,
.who-we-are .about-stat,
.who-we-are .about-content,
.who-we-are h2,
.who-we-are p {
  opacity: 0;
  transition: opacity .75s ease, transform .75s ease;
}

.quick .qcard {
  transform: translateY(55px);
}

.who-we-are .about-text,
.who-we-are h2,
.who-we-are p {
  transform: translateX(-60px);
}

.who-we-are .about-image,
.who-we-are .about-stat {
  transform: translateX(60px);
}

.who-we-are.is-visible .about-text,
.who-we-are.is-visible h2,
.who-we-are.is-visible p {
  opacity: 1;
  transform: translateX(0);
}

.who-we-are.is-visible .about-image,
.who-we-are.is-visible .about-stat {
  opacity: 1;
  transform: translateX(0);
}

.quick.is-visible .qcard {
  opacity: 1;
  transform: translateY(0);
}

.quick.is-visible .qcard:nth-child(1){transition-delay:.05s;}
.quick.is-visible .qcard:nth-child(2){transition-delay:.15s;}
.quick.is-visible .qcard:nth-child(3){transition-delay:.25s;}
.quick.is-visible .qcard:nth-child(4){transition-delay:.35s;}

.who-we-are.is-visible h2{transition-delay:.10s;}
.who-we-are.is-visible p{transition-delay:.20s;}
.who-we-are.is-visible .about-image{transition-delay:.15s;text-align:justify;}
.who-we-are.is-visible .about-stat{transition-delay:.30s;}

@media (prefers-reduced-motion: reduce){
  .quick .qcard,
  .who-we-are .about-text,
  .who-we-are .about-image,
  .who-we-are .about-stat,
  .who-we-are h2,
  .who-we-are p {
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ===== Extracted style block ===== */

/* WHO WE ARE: left content enters from left, visual enters from right */
.who-we-are .who-copy{
  opacity:0;
  transform:translateX(-70px);
  transition:opacity .8s ease, transform .8s ease;
}
.who-we-are .who-visual{
  opacity:0;
  transform:translateX(70px);
  transition:opacity .8s ease .12s, transform .8s ease .12s;
}
.who-we-are.is-visible .who-copy,
.who-we-are.is-visible .who-visual{
  opacity:1;
  transform:translateX(0);
}

@media(max-width:600px){
  .who-we-are .who-copy{
    transform:translateX(-45px);
  }
  .who-we-are .who-visual{
    transform:translateX(45px);
  }
}

@media(prefers-reduced-motion:reduce){
  .who-we-are .who-copy,
  .who-we-are .who-visual{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== WHO WE ARE - strong left/right entrance animation ===== */
@media (prefers-reduced-motion: no-preference){
  .who-we-are.who-animation-ready .who-copy{
    opacity:0 !important;
    transform:translate3d(-90px,0,0) !important;
    transition:opacity 1s cubic-bezier(.22,1,.36,1),
               transform 1s cubic-bezier(.22,1,.36,1) !important;
  }

  .who-we-are.who-animation-ready .who-visual{
    opacity:0 !important;
    transform:translate3d(90px,0,0) !important;
    transition:opacity 1s cubic-bezier(.22,1,.36,1) .12s,
               transform 1s cubic-bezier(.22,1,.36,1) .12s !important;
  }

  .who-we-are.who-animation-ready.who-animated .who-copy,
  .who-we-are.who-animation-ready.who-animated .who-visual{
    opacity:1 !important;
    transform:translate3d(0,0,0) !important;
  }

  .who-we-are.who-animation-ready.who-animated .who-floating-card{
    animation:whoCardIn .8s cubic-bezier(.22,1,.36,1) .35s both;
  }

  @keyframes whoCardIn{
    from{opacity:0;transform:translate3d(35px,25px,0);}
    to{opacity:1;transform:translate3d(0,0,0);}
  }
}

@media (max-width:600px){
  .who-we-are.who-animation-ready .who-copy{
    transform:translate3d(-55px,0,0) !important;
  }
  .who-we-are.who-animation-ready .who-visual{
    transform:translate3d(55px,0,0) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .who-we-are.who-animation-ready .who-copy,
  .who-we-are.who-animation-ready .who-visual{
    opacity:1 !important;
    transform:none !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== HOW IT WORKS — reference-style grey background, 4 white cards + visible curved dashed path ===== */
.how-it-works-original{
  position:relative !important;
  overflow:hidden !important;
  background:#f1f1f1 !important;
  padding-top:95px !important;
  padding-bottom:105px !important;
}

.how-it-works-original .how-works-arrow{
  position:absolute !important;
  left:0 !important;
  top:145px !important;
  width:100% !important;
  height:440px !important;
  z-index:1 !important;
  pointer-events:none !important;
  color:#16c6a7 !important;
  opacity:1 !important;
}

.how-it-works-original .how-works-arrow svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
}

.how-it-works-original .how-works-arrow path{
  stroke:#16c6a7 !important;
  stroke-width:3.2 !important;
  stroke-dasharray:9 11 !important;
  stroke-linecap:round !important;
}

/* Keep all section content clearly above the decorative path */
.how-it-works-original > .container,
.how-it-works-original > div:not(.how-works-arrow),
.how-it-works-original .section-title,
.how-it-works-original .steps,
.how-it-works-original .step,
.how-it-works-original [class*="step"]{
  position:relative;
  z-index:3;
}

/* Four individual cards: white, rounded, clean */
.how-it-works-original .step,
.how-it-works-original .step-card,
.how-it-works-original .steps > div{
  background:#fff !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* If the existing four cards use qcard-like styling, preserve their content but make them reference-like */
.how-it-works-original .qcard{
  background:#fff !important;
  border-radius:10px !important;
  box-shadow:none !important;
}

/* Reference-style stagger: cards 1/3 higher, 2/4 slightly lower */
@media (min-width:901px){
  .how-it-works-original .steps > div:nth-child(2),
  .how-it-works-original .step:nth-child(2){
    transform:translateY(42px);
  }
  .how-it-works-original .steps > div:nth-child(4),
  .how-it-works-original .step:nth-child(4){
    transform:translateY(42px);
  }
}

@media (max-width:900px){
  .how-it-works-original{
    background:#f1f1f1 !important;
    padding-top:75px !important;
  }
  .how-it-works-original .how-works-arrow{
    top:155px !important;
    height:1050px !important;
    opacity:.9 !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .how-it-works-original .how-works-arrow{
    transition:none !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== EASY STEP: exact reference-style presentation ===== */
section.how-it-works-original.steps{
  position:relative !important;
  width:100% !important;
  background:#f2f2f2 !important;
  overflow:hidden !important;
  padding:105px 0 115px !important;
  isolation:isolate !important;
}

section.how-it-works-original.steps .container{
  position:relative !important;
  z-index:5 !important;
  max-width:1400px !important;
}

section.how-it-works-original.steps .steps-head{
  position:relative !important;
  z-index:6 !important;
  text-align:center !important;
  margin-bottom:52px !important;
}

section.how-it-works-original.steps .steps-head .label{
  color:#fe4d02 !important;
  letter-spacing:2px !important;
  font-size:13px !important;
  font-weight:600 !important;
  margin-bottom:18px !important;
}

section.how-it-works-original.steps .steps-head h2{
  color:#173244 !important;
  font-size:44px !important;
  line-height:1.1 !important;
  margin-bottom:18px !important;
}

section.how-it-works-original.steps .steps-head p{
  color:#858585 !important;
  font-size:17px !important;
  line-height:1.5 !important;
}

section.how-it-works-original.steps .step-grid{
  position:relative !important;
  z-index:7 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
}

section.how-it-works-original.steps .step-card{
  position:relative !important;
  z-index:8 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:207px !important;
  padding:31px 25px !important;
  background:#fff !important;
  border-radius:10px !important;
  box-shadow:none !important;
  text-align:center !important;
  color:#173244 !important;
}

section.how-it-works-original.steps .step-card:nth-child(1),
section.how-it-works-original.steps .step-card:nth-child(3){
  margin-top:0 !important;
}

section.how-it-works-original.steps .step-card:nth-child(2),
section.how-it-works-original.steps .step-card:nth-child(4){
  margin-top:45px !important;
}

section.how-it-works-original.steps .step-no{
  position:relative !important;
  z-index:9 !important;
  width:39px !important;
  height:39px !important;
  margin:0 auto 18px !important;
  border-radius:50% !important;
  background:#fe4d02 !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;
  font-weight:700 !important;
}

section.how-it-works-original.steps .step-card h3{
  color:#173244 !important;
  font-size:18px !important;
  line-height:1.25 !important;
  margin-bottom:10px !important;
}

section.how-it-works-original.steps .step-card p{
  color:#858585 !important;
  font-size:17px !important;
  line-height:1.6 !important;
  margin:0 !important;
}

/* Strong, visible curved dashed path behind all 4 white cards */
section.how-it-works-original.steps .how-works-arrow{
  position:absolute !important;
  z-index:2 !important;
  left:0 !important;
  top:190px !important;
  width:100% !important;
  height:430px !important;
  pointer-events:none !important;
  color:#13c4a5 !important;
  opacity:1 !important;
}

section.how-it-works-original.steps .how-works-arrow svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
  overflow:visible !important;
}

section.how-it-works-original.steps .how-works-arrow path{
  stroke:#13c4a5 !important;
  stroke-width:2.8 !important;
  stroke-dasharray:8 10 !important;
  stroke-linecap:round !important;
}

/* Don't let the scroll-effect system hide these cards */
body.reveal-enabled section.how-it-works-original.steps .step-card,
body.reveal-enabled section.how-it-works-original.steps .step-card.reveal,
body.reveal-enabled section.how-it-works-original.steps .step-card.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* Desktop sizing close to the supplied original-theme screenshot */
@media (min-width:901px){
  section.how-it-works-original.steps .step-grid{
    padding:0 2px !important;
  }
}

/* Mobile: keep white rounded cards stacked and keep the decorative path visible */
@media (max-width:900px){
  section.how-it-works-original.steps{
    padding:75px 0 85px !important;
  }

  section.how-it-works-original.steps .steps-head{
    margin-bottom:35px !important;
  }

  section.how-it-works-original.steps .steps-head h2{
    font-size:34px !important;
  }

  section.how-it-works-original.steps .step-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  section.how-it-works-original.steps .step-card:nth-child(2),
  section.how-it-works-original.steps .step-card:nth-child(4){
    margin-top:0 !important;
  }

  section.how-it-works-original.steps .how-works-arrow{
    top:175px !important;
    height:1050px !important;
    opacity:.8 !important;
  }
}

/* ===== Extracted style block ===== */

section.how-it-works-original.steps{
  background:#f2f2f2 !important;
  background-image:none !important;
}

section.how-it-works-original.steps::before,
section.how-it-works-original.steps::after{
  background-image:none !important;
  content:none !important;
}

/* Keep ONLY the curved dashed arrow as decoration */
section.how-it-works-original.steps .how-works-arrow{
  background:none !important;
  background-image:none !important;
  z-index:1 !important;
}

section.how-it-works-original.steps .how-works-arrow svg{
  background:none !important;
  background-image:none !important;
}

/* ===== Extracted style block ===== */

/* ===== Greenio demo-style typography =====
   The current version mixed Montserrat + Barlow. The reference uses a
   consistent, softer Barlow-style family across headings and body text. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');

html, body,
button, input, textarea, select{
  font-family:"Barlow", Arial, sans-serif !important;
}

body{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:16px !important;
  line-height:1.6 !important;
  font-weight:400 !important;
}

/* Main hero */
.hero h1{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:56px !important;
  line-height:1.04 !important;
  font-weight:700 !important;
  letter-spacing:-.4px !important;
}

.hero p{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:20px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
}

.eyebrow{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:2.2px !important;
}

/* Navigation */
.nav,
.nav a,
.logo{
  font-family:"Barlow", Arial, sans-serif !important;
}

.nav a{
  font-size:16px !important;
  font-weight:500 !important;
}

.logo{
  font-size:27px !important;
  font-weight:700 !important;
}

/* Section headings */
.who-we-are h2,
.steps-head h2,
.what-offer h2,
.why-choose-section h2,
.green-contact-section h2{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:40px !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  letter-spacing:-.25px !important;
}

.who-we-are p,
.steps-head p,
.what-offer p,
.why-choose-section p,
.green-contact-section p{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:17px !important;
  line-height:1.65 !important;
  font-weight:400 !important;
}

/* Small section labels */
.who-we-are .label,
.steps-head .label,
.what-offer .label,
.why-choose-section .label,
.green-contact-section .label{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:2px !important;
}

/* Cards */
.qcard,
.qcard h3,
.qcard p,
.step-card,
.step-card h3,
.step-card p,
.offer-card,
.offer-card h3,
.offer-card p{
  font-family:"Barlow", Arial, sans-serif !important;
}

.qcard h3,
.offer-card h3,
.step-card h3{
  font-size:20px !important;
  line-height:1.25 !important;
  font-weight:600 !important;
}

.qcard p,
.offer-card p,
.step-card p{
  font-size:15px !important;
  line-height:1.55 !important;
  font-weight:400 !important;
}

.step-card h3{
  font-size:18px !important;
  font-weight:600 !important;
}

.step-card p{
  font-size:14px !important;
}

/* Buttons */
.hero-buttons a,
.yellow,
.outline,
button,
.learn-more{
  font-family:"Barlow", Arial, sans-serif !important;
  font-size:16px !important;
  font-weight:500 !important;
}

/* Desktop reference sizing */
@media (min-width:901px){
  .hero h1{
    font-size:56px !important;
  }

  .hero p{
    font-size:20px !important;
  }

  .who-we-are h2,
  .steps-head h2{
    font-size:40px !important;
  }
}

/* Mobile reference sizing */
@media (max-width:600px){
  .hero h1{
    font-size:38px !important;
    line-height:1.04 !important;
    font-weight:700 !important;
  }

  .hero p{
    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:500 !important;
  }

  .who-we-are h2,
  .steps-head h2{
    font-size:32px !important;
    line-height:1.08 !important;
  }

  .who-we-are p,
  .steps-head p{
    font-size:16px !important;
    line-height:1.55 !important;
  }

  .qcard h3{
    font-size:20px !important;
  }
}

/* ===== Extracted style block ===== */

/* ===== Slightly larger paragraph text across the whole website ===== */
body p{
  font-size:17px !important;
  line-height:1.6 !important;
}

/* Keep the hero paragraph a little larger and readable */
.hero p{
  font-size:21px !important;
  line-height:1.45 !important;
}

/* Small/card paragraphs */
.qcard p,
.offer-card p,
.step-card p{
  font-size:17px !important;
  line-height:1.55 !important;
}

@media (max-width:600px){
  body p{
    font-size:17px !important;
    line-height:1.55 !important;
  }

  .hero p{
    font-size:19px !important;
    line-height:1.3 !important;
  }

  .qcard p,
  .offer-card p,
  .step-card p{
    font-size:16px !important;
  }
}