:root{
  --blue:#5b91c4;
  --green:#c7e783;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;
  color:var(--blue);
  background:var(--white);
  line-height:1.55;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,92%);margin:auto}

.topbar{
  background:var(--blue);
  color:var(--white);
  font-size:.92rem;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:8px 0;
}

header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--white);
  border-bottom:4px solid var(--green);
}
.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:88px;
}
.logo{
  display:flex;
  align-items:center;
  gap:13px;
}
.logo img,.footer-logo{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:50%;
  border:4px solid var(--green);
  background:var(--green);
}
.logo strong{
  font-size:1.05rem;
  max-width:220px;
  line-height:1.15;
  color:var(--blue);
}
nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-weight:800;
}
nav a:hover,nav a.active{color:var(--green)}
.menu{
  display:none;
  border:0;
  background:none;
  color:var(--blue);
  font-size:1.8rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 21px;
  border-radius:999px;
  font-weight:900;
  border:0;
  cursor:pointer;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-green{background:var(--green);color:var(--blue)}
.btn-blue{background:var(--blue);color:var(--white)}
.btn-outline{border:3px solid var(--white);color:var(--white)}


.hero{
  background:var(--white);
  color:var(--blue);
  overflow:hidden;
  border-bottom:12px solid var(--green);
}
.hero .container{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:56px;
  align-items:center;
  padding:94px 0;
}
.hero .eyebrow{color:var(--blue)}
.hero h1{
  font-size:clamp(3.2rem,7vw,6.5rem);
  line-height:.94;
  margin:.15em 0 .25em;
  color:var(--blue);
}
.hero p{
  font-size:1.18rem;
  max-width:650px;
  color:var(--blue);
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero .btn-outline{border-color:var(--blue);color:var(--blue)}
.logo-stage{
  position:relative;
  min-height:470px;
  display:grid;
  place-items:center;
  border-radius:34px;
  overflow:hidden;
  background:var(--green);
  border:10px solid var(--blue);
}
.logo-stage:before,
.logo-stage:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--blue);
  opacity:.16;
}
.logo-stage:before{width:330px;height:330px;top:-110px;right:-90px}
.logo-stage:after{width:260px;height:260px;left:-70px;bottom:-80px}
.logo-stage .stripe{
  position:absolute;
  width:145%;
  height:70px;
  background:var(--white);
  transform:rotate(-24deg);
  opacity:.55;
}
.logo-stage .stripe.two{
  transform:rotate(24deg);
  opacity:.35;
}
.logo-stage img{
  position:relative;
  z-index:2;
  width:min(300px,72%);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:12px solid var(--white);
  background:var(--green);
}
.logo-stage span{
  position:absolute;
  z-index:3;
  bottom:24px;
  background:var(--blue);
  color:var(--white);
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.04em;
}

.trust{
  background:var(--green);
  color:var(--blue);
}
.trust .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  padding:22px 0;
  text-align:center;
  font-weight:900;
}

.section{padding:82px 0;background:var(--white)}
.section.alt{background:var(--green)}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:35px;
}
.section h2,.page-hero h1{
  font-size:clamp(2.2rem,4vw,3.7rem);
  line-height:1.05;
  margin:0;
}
.section h2{color:var(--blue)}
.section-head p{max-width:600px;color:var(--blue);margin:0}

.services{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.service,.review-card{
  background:var(--white);
  border:4px solid var(--green);
  border-radius:22px;
  padding:24px;
}
.section.alt .service,
.section.alt .review-card{
  border-color:var(--blue);
}
.icon{
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--green);
  color:var(--blue);
  display:grid;
  place-items:center;
  font-size:1.7rem;
}
.service h3{margin:18px 0 7px;color:var(--blue)}
.service p,.review-card p{margin:0;color:var(--blue)}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
.split-image{
  border-radius:26px;
  overflow:hidden;
  background:var(--white);
  padding:14px;
  border:8px solid var(--blue);
}
.split-image img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:18px;
}
.checks{display:grid;gap:13px;margin:25px 0}
.check{display:flex;gap:12px;color:var(--blue)}
.check b{color:var(--blue)}

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.portfolio-grid figure{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:var(--green);
  border:5px solid var(--green);
}
.portfolio-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:.35s;
}
.portfolio-grid figure:hover img{transform:scale(1.035)}
.portfolio-grid figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  background:var(--blue);
  color:var(--white);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:.84rem;
}

.before-after{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:26px;
}
.ba-card{
  background:var(--white);
  border:5px solid var(--green);
  border-radius:22px;
  overflow:hidden;
}
.ba-images{display:grid;grid-template-columns:1fr 1fr}
.ba-images div{position:relative}
.ba-images img{width:100%;aspect-ratio:1/1;object-fit:cover}
.ba-label{
  position:absolute;
  left:10px;
  top:10px;
  background:var(--blue);
  color:var(--white);
  padding:6px 9px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:900;
}
.ba-copy{padding:20px;color:var(--blue)}

.cta{
  background:var(--blue);
  color:var(--white);
  border:10px solid var(--green);
  border-radius:28px;
  padding:45px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:center;
}
.cta h2{margin:0 0 8px;color:var(--white)}
.cta p{margin:0;color:var(--white)}

.page-hero{
  background:var(--blue);
  color:var(--white);
  padding:68px 0;
  border-bottom:12px solid var(--green);
}
.page-hero p{max-width:720px;color:var(--white);font-size:1.08rem}

.service-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.service-item{
  background:var(--white);
  border:5px solid var(--green);
  border-radius:18px;
  padding:26px;
}
.service-item h2,.service-item p{color:var(--blue)}

.form-shell{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:34px;
}
.form-info{
  background:var(--blue);
  color:var(--white);
  border:8px solid var(--green);
  border-radius:24px;
  padding:32px;
}
.form-info h2,.form-info p{color:var(--white)}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
label{display:grid;gap:7px;font-weight:900;color:var(--blue)}
input,select,textarea{
  width:100%;
  padding:14px;
  border:3px solid var(--green);
  border-radius:12px;
  font:inherit;
  color:var(--blue);
  background:var(--white);
}
textarea{min-height:150px;resize:vertical}
.full{grid-column:1/-1}
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.option{display:flex;align-items:center;gap:8px;font-weight:700}
.option input{width:auto}

footer{
  background:var(--blue);
  color:var(--white);
  padding:54px 0 22px;
  border-top:12px solid var(--green);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
}
footer h3,footer p,footer a{color:var(--white)}
footer a{display:block;margin:7px 0}
.copy{
  border-top:2px solid var(--green);
  margin-top:30px;
  padding-top:20px;
  color:var(--white);
}

@media(max-width:900px){
  .menu{display:block}
  nav{
    display:none;
    position:absolute;
    top:88px;
    left:0;
    right:0;
    background:var(--white);
    padding:22px 4%;
    flex-direction:column;
    align-items:flex-start;
    border-bottom:4px solid var(--green);
  }
  nav.open{display:flex}
  .hero .container,.split,.form-shell{grid-template-columns:1fr}
  .services{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .topbar .container{display:block;text-align:center}
  .logo strong{display:none}
  .trust .container,.services,.portfolio-grid,.service-list,.form-grid,.footer-grid,.before-after{grid-template-columns:1fr}
  .section-head,.cta{flex-direction:column;align-items:flex-start}
  .full{grid-column:auto}
  .options{grid-template-columns:1fr}
}

label small{
  color:var(--blue);
  font-size:.82rem;
  line-height:1.4;
}
input[type="file"]{
  padding:12px;
  background:var(--white);
}