/* ==================================================
BASE PAGE
================================================== */


body{
  position: relative;
  background-color: #dde7d4;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("assets/grass-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .45;
  z-index: -2;
}

body::after{
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(244,248,240,.30) 0%,
      rgba(244,248,240,.16) 35%,
      rgba(244,248,240,.22) 100%);
  z-index: -1;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}


/* ==================================================
TYPOGRAPHY
================================================== */

h1,h2,h3{
  margin: 0 0 14px;
  line-height: 1.2;
}

h2{
  font-size: 32px;
  letter-spacing: -.02em;
}

p{
  line-height: 1.65;
}

.text-center{
  text-align:center;
}


/* ==================================================
BUTTONS
================================================== */

.btn{
  display:inline-block;
  padding:14px 18px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
}

.btn-primary{
  background:#0f3d4c;
  color:#fff;
}

.btn-primary:hover{
  background:#14576d;
}

.btn-secondary{
  background:#e5e7eb;
  color:#0f2f3a;
}

.button-row{
  margin-top:18px;
}

.button-row-center{
  text-align:center;
}


/* ==================================================
TRUST BAR
================================================== */

.trust-bar{
  text-align:center;
  padding:12px 0;
  background:#e9eef5;
  font-weight:600;
}


/* ==================================================
HERO
================================================== */

.lp-hero{
  background:linear-gradient(180deg, rgba(0,90,255,0.10), rgba(0,0,0,0));
  border-bottom:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:48px 40px;
  box-shadow:0 16px 40px rgba(0,0,0,.08);
}

.lp-hero__cols{
  display:flex;
  gap:56px;
  align-items:center;
}

.lp-hero__left{
  background: rgba(250,248,243,.72);
  border: 1px solid rgba(90,78,54,.10);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  backdrop-filter: blur(4px);
}
.lp-hero__image{
  width:100%;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}


/* ==================================================
SECTIONS
================================================== */

.lp-section{
  padding:24px 0;
  margin-bottom:36px;
}

.lp-inner{
  background: rgba(250,248,243,.94);
  border-radius: 16px;
  padding: 34px 36px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border: 1px solid rgba(90,78,54,.08);
  backdrop-filter: blur(2px);
}

.lp-section.alt-section .lp-inner{
  background:#f5f8fb;
}


/* ==================================================
FEATURE CARDS
================================================== */

.lp-cards{
  display:flex;
  gap:28px;
  margin-top:20px;
}

.lp-cards--three > *{
  flex:1;
}

.lp-cards .lp-inner{
  text-align:center;
  padding:28px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border:1px solid rgba(15,47,58,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}

.lp-cards .lp-inner:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
}


/* ==================================================
ARTICLE GRID
================================================== */

.lp-body-columns{
  display:flex;
  gap:32px;
  align-items:flex-start;
}

.lp-main-column{
  flex:0 0 70%;
}

.lp-sidebar-column{
  flex:0 0 30%;
}


/* ==================================================
PROOF IMAGE CARD
================================================== */



.lp-damage-photo{
  position:relative;
  max-width:920px;
  margin:28px auto 36px;
  background:#fff;
  border-radius:18px;
  padding:18px 14px 14px 14px;
  box-shadow:0 18px 42px rgba(0,0,0,.12);
  border:1px solid rgba(15,47,58,.08);
  overflow:hidden;
}

.lp-damage-photo img{
  width:95%;
  display:block;
  margin:0 auto;
  border-radius:24px;
}


.lp-damage-photo__caption{
  padding:14px 6px 2px;
  font-size:15px;
  color:#334155;
}


/* ==================================================
FLOATING CALL WIDGET
================================================== */

#lp-float-call{
  position:fixed;
  right:24px;
  bottom:24px;
  width:340px;
  max-width:calc(100vw - 32px);
  z-index:99999;
  opacity:0;
  visibility:hidden;
  transform:translateY(18px);
  transition:opacity .25s ease, transform .25s ease;
}

#lp-float-call.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

#lp-float-call .lp-float-call__body{
  background: rgba(250,248,243,.96);
  border: 1px solid rgba(90,78,54,.10);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  padding:18px;
}

.lp-float-call__header{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}

.lp-float-call__button{
  display:block;
  text-align:center;
  background:#0f3d4c;
  color:#fff;
  padding:14px;
  border-radius:10px;
  text-decoration:none;
}


/* ==================================================
DECORATIVE GRAPHIC PACK (TERMITE / BUG)
================================================== */

#lp-termite-pack{
  position:fixed;
  left:70px;
  top:0;
  width:220px;
  height:100vh;
  pointer-events:none;
  z-index: 1;
}

.lp-termite-pop{
  position:absolute;
  width:95px;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) rotate(-8deg) scale(.96);
  transition:opacity .28s ease, transform .28s ease, top .35s ease;
}

.lp-termite-pop.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) rotate(-8deg);
}

.lp-termite-pop img{
  width:100%;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.18));
  animation:termiteWiggle 3s ease-in-out infinite;
}

.termite-1{ left:0; }
.termite-2{ left:70px; }
.termite-3{ left:233px; }

@keyframes termiteWiggle{
  0%{transform:rotate(-16deg);}
  50%{transform:rotate(-12deg);}
  100%{transform:rotate(-16deg);}
}


/* ==================================================
RESPONSIVE
================================================== */

@media (max-width:900px){

  .lp-hero__cols{
    flex-direction:column;
    gap:28px;
  }

  .lp-body-columns{
    flex-direction:column;
  }

  #lp-float-call{
    right:12px;
    bottom:12px;
    width:calc(100vw - 24px);
  }

}

@media (max-width:700px){

  #lp-termite-pack{
    left:6px;
    width:72px;
  }

  .lp-termite-pop{
    width:28px;
  }

  .termite-3{
    display:none;
  }

}

@media (max-width:480px){

  #lp-termite-pack{
    display:none;
  }

}
/* =========================================
FEATURE STRIP TIGHTER SPACING + GRASS BACKGROUND
========================================= */

.feature-strip{
  position: relative;
  border-radius: 18px;
  padding-top: 34px;
  padding-bottom: 70px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(88,125,66,.88) 0%,
      rgba(109,148,83,.82) 35%,
      rgba(132,171,103,.78) 70%,
      rgba(149,186,118,.74) 100%);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.feature-strip::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.03) 45%,
      rgba(0,0,0,.04) 100%);
  z-index: 0;
}

.feature-strip .container{
  position: relative;
  z-index: 1;
}

.feature-strip__heading{
  margin-bottom: 14px;
}

.feature-strip__cards{
  margin-top: 0;
  gap: 18px;
}

.feature-strip__heading h2{
  margin-bottom: 0;
}

.feature-strip .lp-inner.feature-strip__heading{
  padding: 26px 30px;
}

.feature-strip__cards .lp-inner{
  padding: 24px;
}

.feature-strip .container{
  position: relative;
  z-index: 1;
}

.feature-strip__heading{
  margin-bottom: 14px;
}

.feature-strip__cards{
  margin-top: 0;
  gap: 18px;
}

.feature-strip__heading h2{
  margin-bottom: 0;
}

/* tighten vertical space between heading bubble and cards */
.feature-strip .lp-inner.feature-strip__heading{
  padding: 26px 30px;
}

/* slightly tighten card padding if desired */
.feature-strip__cards .lp-inner{
  padding: 24px;
}

/* mobile */
@media (max-width: 900px){
  .feature-strip{
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .feature-strip__heading{
    margin-bottom: 10px;
  }

  .feature-strip__cards{
    gap: 14px;
  }
}
.lp-termite-pack,
.lp-termite-pop {
  z-index: 1;
}

footer {
  position: relative;
  z-index: 50;
}
#lp-widget-body {
  overflow: hidden;
}

.lp-popup,
.lp-widget {
  transition: all 0.2s ease;
}
.lp-float-call__tab {
  display: none;
}

/* ==================================================
MOBILE CALL BAR
================================================== */

.lp-mobile-callbar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#114b5f;
  text-align:center;
  z-index:9999;
  display:none;
}

.lp-mobile-callbar a{
  display:block;
  color:#ffffff;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  padding:16px 12px;
}

/* show only on mobile */
@media (max-width:768px){
  .lp-mobile-callbar{
    display:block;
  }

  body{
    padding-bottom:70px;
  }
}
/* ==================================================
MOBILE CLEAN FIX
================================================== */
@media (max-width: 768px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    margin:0;
    padding:0 12px 78px;
  }

  /* mobile performance: disable heavy background repaint effects */
  body::before,
  body::after{
    position:absolute;
  }

  .lp-hero__left,
  .lp-inner,
  #lp-float-call .lp-float-call__body{
    backdrop-filter:none;
  }

  /* general containers */
  .container,
  .lp-section,
  .lp-inner,
  .lp-body-columns,
  .lp-main-column,
  .lp-sidebar-column,
  .lp-damage-photo,
  .feature-strip,
  footer{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .container{
    padding:0 12px;
  }

  .lp-section{
    padding:18px 0;
    margin-bottom:22px;
  }

  .lp-inner{
    padding:20px 16px;
  }

  /* hero */
  .lp-hero{
    padding:22px 16px;
    border-radius:16px;
  }

  .lp-hero__cols{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .lp-hero__left{
    padding:20px 16px;
  }

  /* typography */
  h1{
    font-size:36px;
    line-height:1.12;
  }

  h2{
    font-size:28px;
    line-height:1.15;
  }

  h3{
    font-size:22px;
    line-height:1.2;
  }

  p,
  li{
    font-size:17px;
    line-height:1.55;
  }

  /* body columns stack */
  .lp-body-columns{
    display:flex;
    flex-direction:column;
    gap:18px;
  }

  .lp-main-column,
  .lp-sidebar-column{
    flex:none;
    width:100%;
  }

  /* feature cards: force true vertical stack */
  .lp-cards,
  .feature-strip__cards{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:14px;
  }

  .lp-cards--three > *,
  .lp-cards > *,
  .feature-strip__cards > *{
    flex:none;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
  }

  .lp-cards .lp-inner,
  .feature-strip__cards .lp-inner{
    padding:20px 16px;
  }

  /* proof image */
  .lp-damage-photo{
    padding:10px;
    margin:20px auto 24px;
  }

  .lp-damage-photo img{
    width:100%;
    display:block;
    margin:0;
    border-radius:16px;
  }

  /* decorative mower pack off on mobile */
  #lp-termite-pack{
    display:none;
  }

  /* floating popup off on mobile, bottom call bar is enough */
  #lp-float-call{
    display:none;
  }

  .lp-mobile-callbar{
    display:block;
  }

  .lp-mobile-callbar a{
    font-size:16px;
    padding:14px 10px;
  }

  /* footer */
  footer{
    margin-top:24px;
    padding:24px 18px;
  }
}

@media (max-width: 768px){
  .feature-strip{
    padding-top:18px;
    padding-bottom:18px;
    border-radius:16px;
  }

  .feature-strip .lp-inner.feature-strip__heading{
    padding:18px 16px;
    margin-bottom:12px;
  }

  .feature-strip__heading h2{
    font-size:26px;
    line-height:1.12;
  }

  .feature-strip__cards .lp-inner{
    text-align:center;
  }
}