/* ===================================================================
   Pristine Lawnz — styles.css
   Marion County, FL lawn & property services
   =================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:        #06130D;
  --ink-2:      #0B2418;
  --forest:     #0B3D2C;
  --forest-2:   #10543B;
  --grass:      #22C55E;
  --lime:       #A3E635;
  --lime-bright:#C7FF5E;
  --gold:       #FFC93C;
  --cream:      #F5F8F1;
  --muted:      #9DB3A6;

  --line:       rgba(163,230,53,.14);
  --line-soft:  rgba(6,19,13,.08);

  --grad:       linear-gradient(115deg, var(--lime) 0%, var(--grass) 55%, var(--gold) 100%);
  --grad-dark:  linear-gradient(160deg, var(--forest) 0%, var(--ink) 70%);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --shadow:    0 18px 50px -18px rgba(6,19,13,.45);
  --shadow-lg: 0 40px 90px -30px rgba(6,19,13,.65);
  --glow:      0 0 0 1px rgba(163,230,53,.25), 0 20px 60px -25px rgba(163,230,53,.45);

  --container: 1240px;
  --nav-h: 74px;

  --ease: cubic-bezier(.22,.9,.28,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 18px); }
body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family:'Outfit',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:'Sora','Outfit',sans-serif; font-weight:800; line-height:1.06; margin:0; letter-spacing:-.02em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--lime); color:var(--ink); }

.container{ width:min(100% - 2.5rem, var(--container)); margin-inline:auto; }
.container--narrow{ width:min(100% - 2.5rem, 860px); }
.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ---------- 3. Buttons ---------- */
.btn{
  --pad: 14px 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:var(--pad);
  border:1.5px solid transparent;
  border-radius:100px;
  background:transparent;
  font-family:'Sora',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  will-change: transform;
}
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px) scale(.99); }
.btn--lg{ --pad: 17px 32px; font-size:1.02rem; }
.btn--sm{ --pad: 10px 18px; font-size:.86rem; }
.btn--full{ width:100%; }

.btn--lime{
  background: var(--grad);
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(163,230,53,.7);
}
.btn--lime:hover{ box-shadow: 0 18px 46px -14px rgba(163,230,53,.9); }

.btn--outline{
  border-color: rgba(163,230,53,.4);
  color: var(--cream);
  background: rgba(163,230,53,.04);
  backdrop-filter: blur(6px);
}
.btn--outline:hover{ border-color: var(--lime); background: rgba(163,230,53,.12); }

.btn--ghost{ border-color: var(--line); color: var(--cream); }

/* ---------- 4. Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: background .3s, backdrop-filter .3s, border-color .3s, height .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background: rgba(6,19,13,.82);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
  height: 64px;
}
.nav__inner{ display:flex; align-items:center; gap:1.4rem; width:min(100% - 2.5rem, var(--container)); }

.brand{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.brand__mark{ width:38px; height:38px; display:grid; place-items:center;
  background: linear-gradient(160deg, rgba(163,230,53,.16), rgba(163,230,53,.04));
  border:1px solid var(--line); border-radius:12px; }
.brand__mark svg{ width:24px; height:24px; }
.brand__text{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.18rem; letter-spacing:-.03em;
}
.brand__text em{
  font-style:normal; font-weight:600;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav__links{ display:flex; align-items:center; gap:.15rem; margin-left:auto; }
.nav__links a{
  position:relative; padding:.5rem .7rem; border-radius:8px;
  font-size:.9rem; font-weight:500; color: rgba(245,248,241,.82);
  transition: color .2s;
}
.nav__links a:hover{ color: var(--lime); }
.nav__links a.is-active{ color: var(--lime); }
.nav__links a.is-active::after{
  content:''; position:absolute; left:.7rem; right:.7rem; bottom:.18rem; height:2px;
  background:var(--grad); border-radius:2px;
}
.nav__cta-mobile{ display:none; }
.nav__call{ margin-left:.6rem; }

.nav__burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:rgba(163,230,53,.06); cursor:pointer;
  padding:0; place-items:center; gap:5px;
}
.nav__burger span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--lime);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero{ position:relative; padding-top: calc(var(--nav-h) + 4.5rem); padding-bottom:0; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__mesh{
  position:absolute; inset:-20% -10% 0;
  background:
    radial-gradient(50% 45% at 15% 18%, rgba(34,197,94,.30), transparent 60%),
    radial-gradient(45% 45% at 82% 8%,  rgba(163,230,53,.22), transparent 62%),
    radial-gradient(55% 50% at 60% 60%, rgba(255,201,60,.13), transparent 65%),
    var(--grad-dark);
}
.hero__stripes{
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    100deg,
    rgba(163,230,53,.045) 0 2px,
    transparent 2px 78px);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
.hero__orb{
  position:absolute; border-radius:50%; filter: blur(70px); opacity:.5;
  animation: float 16s ease-in-out infinite;
}
.hero__orb--1{ width:380px; height:380px; background:rgba(34,197,94,.42); top:-60px; left:-80px; }
.hero__orb--2{ width:300px; height:300px; background:rgba(255,201,60,.24); top:22%; right:-60px; animation-delay:-7s; }
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%    { transform: translate(30px,-40px) scale(1.12); }
}
.hero__blades{ position:absolute; bottom:0; left:0; width:100%; height:190px; }

.hero__inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.08fr .92fr; gap:3.5rem; align-items:center;
  padding-bottom: 5.5rem;
}

.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1rem .5rem .75rem;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(163,230,53,.07); backdrop-filter:blur(8px);
  font-size:.82rem; font-weight:500; color:rgba(245,248,241,.9);
  margin-bottom:1.6rem;
}
.pill__dot{
  width:8px; height:8px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 0 0 rgba(163,230,53,.7);
  animation: pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(163,230,53,.65); }
  70%{ box-shadow:0 0 0 12px rgba(163,230,53,0); }
  100%{ box-shadow:0 0 0 0 rgba(163,230,53,0); }
}

.hero__title{ font-size: clamp(2.9rem, 7.2vw, 5.6rem); }
.hero__sub{
  max-width:56ch; margin-top:1.5rem;
  font-size:clamp(1.02rem,1.6vw,1.16rem); color:rgba(245,248,241,.76);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }

.hero__trust{
  display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.2rem;
  font-size:.88rem; color:rgba(245,248,241,.68);
}
.hero__trust li{ display:flex; align-items:center; gap:.45rem; }
.hero__trust svg{ color:var(--lime); flex-shrink:0; }

/* Lawn card */
.hero__visual{ position:relative; }
.lawncard{
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(16,84,59,.55), rgba(6,19,13,.9));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  overflow:hidden;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
}
.lawncard__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem 1.25rem; border-bottom:1px solid var(--line);
}
.lawncard__title{ font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem; }
.lawncard__live{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--lime);
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--lime); animation:pulse 1.8s infinite; }

.lawncard__field{
  position:relative; height:230px; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(163,230,53,.22), transparent 70%),
    linear-gradient(180deg, #0E4A32, #072018);
}
.lawncard__stripes{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    90deg,
    rgba(163,230,53,.13) 0 26px,
    rgba(163,230,53,.05) 26px 52px);
  animation: stripe 3.4s linear infinite;
}
@keyframes stripe{ to{ background-position:52px 0; } }
.lawncard__mower{
  position:absolute; left:0; bottom:52px; width:90px;
  animation: mow 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
@keyframes mow{
  0%,100%{ transform: translateX(8px) translateY(0); }
  25%    { transform: translateX(70%) translateY(-10px); }
  50%    { transform: translateX(88%) translateY(2px); }
  75%    { transform: translateX(38%) translateY(-6px); }
}
.lawncard__spark{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--lime-bright); box-shadow:0 0 10px var(--lime);
  animation: spark 2.6s ease-in-out infinite;
}
.s1{ left:32%; bottom:44%; }
.s2{ left:56%; bottom:64%; animation-delay:.8s; }
.s3{ left:74%; bottom:34%; animation-delay:1.6s; }
@keyframes spark{
  0%,100%{ transform: translate(0,0) scale(.6); opacity:0; }
  50%    { transform: translate(6px,-14px) scale(1); opacity:1; }
}

.lawncard__stats{
  display:grid; grid-template-columns: repeat(3,1fr);
  margin:0; border-top:1px solid var(--line);
}
.lawncard__stats > div{ padding:1rem 1.1rem; border-right:1px solid var(--line); }
.lawncard__stats > div:last-child{ border-right:0; }
.lawncard__stats dt{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.lawncard__stats dd{
  margin:.15rem 0 0; font-family:'Sora',sans-serif; font-weight:800; font-size:1.4rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.floaty{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  padding:.65rem .95rem; border-radius:14px;
  background: rgba(6,19,13,.86); backdrop-filter: blur(12px);
  border:1px solid var(--line); box-shadow: var(--shadow);
  font-size:.8rem; font-weight:600;
  animation: bob 5s ease-in-out infinite;
}
.floaty--1{ top:-16px; right:-10px; flex-direction:column; align-items:flex-start; gap:.15rem; }
.floaty--2{ bottom:-18px; left:-14px; animation-delay:-2.4s; }
.floaty__stars{ color:var(--gold); letter-spacing:2px; font-size:.95rem; }
.floaty__txt{ color:rgba(245,248,241,.85); font-weight:500; font-size:.8rem; }
.floaty__ico{
  width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:var(--grad); color:var(--ink); font-weight:800; font-size:.85rem;
}
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(-.6deg); }
  50%    { transform: translateY(-13px) rotate(.6deg); }
}

/* Stats strip */
.stats{ position:relative; z-index:1; border-block:1px solid var(--line); background: rgba(6,19,13,.5); }
.stats__grid{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: 2.1rem 1rem; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat__num{
  font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(1.9rem,4vw,2.7rem);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; min-width:1ch;
}
.stat__num--suffix{ font-family:'Sora',sans-serif; font-weight:800; font-size:clamp(1.5rem,3vw,2rem);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__label{ display:block; margin-top:.15rem; font-size:.84rem; color:var(--muted); }

/* ---------- 6. Marquee ---------- */
.marquee{
  overflow:hidden; padding: 1.05rem 0;
  background: var(--grad); color: var(--ink);
}
.marquee__track{
  display:flex; align-items:center; gap:2rem; width:max-content;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.02rem;
  letter-spacing:.02em; text-transform:uppercase;
  animation: slide 26s linear infinite;
}
.marquee__track i{ font-style:normal; opacity:.55; }
@keyframes slide{ to{ transform: translateX(-50%); } }

/* ---------- 7. Sections ---------- */
.section{ padding: 7rem 0; position:relative; }
.section--alt{ background: linear-gradient(180deg, rgba(11,61,44,.35), rgba(6,19,13,0)); }

.sechead{ max-width: 720px; margin-bottom:3.5rem; }
.eyebrow{
  display:inline-block; margin-bottom:1rem; padding:.35rem .85rem;
  border:1px solid var(--line); border-radius:100px;
  background:rgba(163,230,53,.07);
  font-family:'Sora',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--lime);
}
.eyebrow--light{ color:var(--ink); background:rgba(6,19,13,.12); border-color:rgba(6,19,13,.2); }
.sechead h2{ font-size: clamp(2rem, 4.6vw, 3.35rem); }
.sechead p{ margin-top:1.1rem; color:rgba(245,248,241,.68); font-size:1.04rem; }

/* Reveal animation */
.reveal{ opacity:0; transform: translateY(28px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d,0) * 90ms);
}

/* ---------- 8. Service cards ---------- */
.cards{
  display:grid; gap:1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.card{
  position:relative; isolation:isolate;
  padding: 2rem 1.75rem 1.6rem;
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(16,84,59,.34), rgba(6,19,13,.65));
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background: radial-gradient(420px 260px at var(--mx,50%) var(--my,0%), rgba(163,230,53,.20), transparent 70%);
  transition: opacity .4s;
}
.card:hover{
  border-color: rgba(163,230,53,.42);
  box-shadow: var(--glow);
  transform: translateY(-6px);
}
.card:hover::before{ opacity:1; }
.card__icon{
  width:56px; height:56px; display:grid; place-items:center; margin-bottom:1.3rem;
  border-radius:16px;
  background: linear-gradient(150deg, rgba(163,230,53,.22), rgba(163,230,53,.05));
  border:1px solid var(--line);
  color:var(--lime);
}
.card__icon svg{ width:28px; height:28px; }
.card h3{ font-size:1.28rem; margin-bottom:.6rem; }
.card p{ font-size:.95rem; color:rgba(245,248,241,.68); }
.card__list{ margin-top:1.3rem; display:grid; gap:.45rem; }
.card__list li{
  position:relative; padding-left:1.5rem;
  font-size:.87rem; color:rgba(245,248,241,.62);
}
.card__list li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:3px;
  background:var(--grad);
}
.card__tag{
  position:absolute; top:1.5rem; right:1.5rem;
  padding:.3rem .7rem; border-radius:100px;
  border:1px solid var(--line); background:rgba(6,19,13,.5);
  font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lime);
}
@media (min-width:1100px){ .card--wide{ grid-column: span 2; } }

/* ---------- 9. Steps ---------- */
.steps{
  display:grid; gap:1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  counter-reset: s;
}
.step{
  position:relative; padding: 2.2rem 1.6rem 1.8rem;
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(11,61,44,.22);
  transition: transform .4s var(--ease), background .4s, border-color .4s;
}
.step:hover{ transform: translateY(-6px); background: rgba(16,84,59,.4); border-color:rgba(163,230,53,.4); }
.step__num{
  display:block; font-family:'Sora',sans-serif; font-weight:800; font-size:2.6rem; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.55; margin-bottom:.8rem;
}
.step h3{ font-size:1.12rem; margin-bottom:.5rem; }
.step p{ font-size:.9rem; color:rgba(245,248,241,.62); }

.strip{
  display:grid; gap:1rem; margin-top:2.5rem;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  padding:1.6rem; border:1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(34,197,94,.14), rgba(163,230,53,.05));
}
.strip__item{ display:grid; gap:.15rem; }
.strip__item strong{ font-family:'Sora',sans-serif; font-size:1rem; }
.strip__item span{ font-size:.85rem; color:var(--muted); }

/* ---------- 10. Pricing ---------- */
.plans{ display:grid; gap:1.4rem; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); align-items:start; }
.plan{
  position:relative; padding: 2.2rem 1.8rem;
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(16,84,59,.28), rgba(6,19,13,.6));
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.plan:hover{ transform: translateY(-6px); border-color:rgba(163,230,53,.4); box-shadow: var(--glow); }
.plan--pop{
  border-color: rgba(163,230,53,.45);
  background: linear-gradient(170deg, rgba(34,197,94,.3), rgba(11,61,44,.7));
  box-shadow: var(--glow);
}
@media (min-width:980px){ .plan--pop{ transform: scale(1.045); } .plan--pop:hover{ transform: scale(1.045) translateY(-6px); } }
.plan__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:.3rem .9rem; border-radius:100px;
  background: var(--grad); color: var(--ink);
  font-family:'Sora',sans-serif; font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
.plan__name{ font-size:1.32rem; }
.plan__desc{ margin-top:.35rem; font-size:.88rem; color:var(--muted); }
.plan__price{
  display:flex; align-items:baseline; gap:2px; margin:1.3rem 0 1.5rem;
  font-family:'Sora',sans-serif; font-weight:800; font-size:3.3rem; line-height:1;
}
.plan__price .cur{ font-size:1.6rem; align-self:flex-start; margin-top:.35rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan__price .counter{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan__price .per{ font-size:.95rem; font-weight:600; font-family:'Outfit',sans-serif;
  color:var(--muted); margin-left:.35rem; }
.plan__list{ display:grid; gap:.65rem; margin-bottom:1.8rem; }
.plan__list li{ position:relative; padding-left:1.7rem; font-size:.92rem; color:rgba(245,248,241,.75); }
.plan__list li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:16px; height:16px; border-radius:50%;
  background: rgba(163,230,53,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3E635' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- 11. Before / After ---------- */
.ba{
  position:relative; width:100%; aspect-ratio: 4/3; min-height:340px;
  border-radius: var(--r-xl); overflow:hidden;
  border:1px solid var(--line); box-shadow: var(--shadow-lg);
  touch-action: none; user-select:none; cursor: ew-resize;
  background: var(--ink-2);
}
.ba__pane{ position:absolute; inset:0; overflow:hidden; }
.ba__before{ clip-path: inset(0 50% 0 0); will-change: clip-path; }

/* Both photos are pre-normalized to identical dimensions by
   prepare-images.ps1, so object-fit:cover keeps them perfectly aligned. */
.ba__img{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  max-width:none;              /* beat the global img{max-width:100%} reset */
  min-width:100%; min-height:100%;
  object-fit:cover;
  object-position:center center;
  -webkit-user-drag:none; user-select:none;
  pointer-events:none;
}
/* Labels are direct children of .ba and pinned to opposite corners, so they
   stay on screen no matter where the divider sits. */
.ba__label{
  position:absolute; top:1rem; z-index:4;
  padding:.35rem .9rem; border-radius:100px;
  background: rgba(6,19,13,.8); backdrop-filter:blur(8px);
  border:1px solid var(--line);
  font-family:'Sora',sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.7);
  pointer-events:none;
}
.ba__label--before{ left:1rem; }
.ba__label--after{ right:1rem; color:var(--gold); border-color:rgba(255,201,60,.3); }

.ba__handle{ position:absolute; top:0; bottom:0; left:50%; width:0; z-index:3; outline:none; }
.ba__line{
  position:absolute; top:0; bottom:0; left:-2px; width:4px;
  background: var(--grad); border-radius:2px;
  box-shadow: 0 0 24px rgba(163,230,53,.8);
}
.ba__grip{
  position:absolute; top:50%; left:50%;
  width:52px; height:52px; transform: translate(-50%,-50%);
  display:grid; place-items:center; border-radius:50%;
  background: var(--grad); color: var(--ink);
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.7);
  transition: transform .25s var(--ease);
}
.ba__handle:hover .ba__grip,
.ba__handle:focus-visible .ba__grip{ transform: translate(-50%,-50%) scale(1.12); }
.ba__handle:focus-visible .ba__line{ box-shadow: 0 0 0 4px rgba(163,230,53,.45); }

.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:2rem; }
.chip{
  padding:.45rem 1rem; border-radius:100px;
  border:1px solid var(--line); background:rgba(163,230,53,.05);
  font-size:.84rem; color:rgba(245,248,241,.72);
  transition: border-color .25s, background .25s, color .25s, transform .25s;
}
.chip:hover{ border-color:var(--lime); background:rgba(163,230,53,.14); color:var(--lime); transform: translateY(-2px); }

/* ---------- 12. Reviews ---------- */
.reviews{ display:grid; gap:1.4rem; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.review{
  margin:0; padding: 2rem 1.75rem;
  border:1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(16,84,59,.3), rgba(6,19,13,.6));
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:1.1rem;
  transition: transform .4s var(--ease), border-color .4s;
}
.review:hover{ transform: translateY(-6px); border-color:rgba(163,230,53,.4); }
.review__stars{ color:var(--gold); letter-spacing:3px; font-size:1.05rem; }
.review blockquote{ margin:0; font-size:1rem; color:rgba(245,248,241,.82); line-height:1.65; flex:1; }
.review blockquote::before{ content:'“'; font-family:'Sora',sans-serif; font-size:2.6rem; line-height:0; vertical-align:-.35em; color:var(--lime); margin-right:.15rem; }
.review figcaption{ display:flex; align-items:center; gap:.8rem; }
.review__av{
  width:44px; height:44px; flex-shrink:0; display:grid; place-items:center;
  border-radius:50%; background: var(--grad); color: var(--ink);
  font-family:'Sora',sans-serif; font-weight:800; font-size:.9rem;
}
.review figcaption strong{ display:block; font-family:'Sora',sans-serif; font-size:.95rem; }
.review figcaption small{ color:var(--muted); font-size:.8rem; }

/* ---------- 13. Service area ---------- */
.area{ display:grid; grid-template-columns: 1fr .85fr; gap:4rem; align-items:center; }
.area__list{ display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap:.9rem; margin-top:2.2rem; }
.area__list li{
  padding:1rem 1.1rem; border:1px solid var(--line); border-radius: var(--r-sm);
  background: rgba(11,61,44,.28);
  font-family:'Sora',sans-serif; font-weight:700; font-size:.98rem;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.area__list li:hover{ transform: translateY(-4px); border-color:var(--lime); background:rgba(163,230,53,.1); }
.area__list li span{ display:block; margin-top:.15rem; font-family:'Outfit',sans-serif;
  font-weight:400; font-size:.8rem; color:var(--muted); }

.map{ position:relative; aspect-ratio:1; display:grid; place-items:center; }
.map::before{
  content:''; position:absolute; inset:6%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(34,197,94,.26), transparent 68%);
  filter: blur(8px);
}
.map__ring{
  position:absolute; border-radius:50%; border:1px dashed rgba(163,230,53,.28);
}
.r1{ inset:22%; }
.r2{ inset:12%; }
.r3{ inset:2%; }
.map__pin{
  position:absolute; padding:.3rem .7rem; border-radius:100px;
  background: rgba(6,19,13,.8); border:1px solid var(--line);
  font-size:.76rem; font-weight:600; white-space:nowrap;
  animation: bob 6s ease-in-out infinite;
}
.pin1{ top:14%; left:38%; animation-delay:-.5s; }
.pin2{ top:47%; left:44%; }
.pin3{ top:24%; left:8%;  animation-delay:-1.5s; }
.pin4{ bottom:18%; left:12%; animation-delay:-2.5s; }
.pin5{ bottom:30%; right:6%; animation-delay:-3.5s; }
.pin6{ bottom:8%; left:46%; animation-delay:-4.5s; }
.map__you{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--grad); box-shadow:0 0 0 0 rgba(163,230,53,.6);
  animation: pulse 2s infinite;
}
.map__cap{ text-align:center; margin-top:1.4rem; font-size:.84rem; color:var(--muted); }

/* ---------- 14. FAQ ---------- */
.faq{ display:grid; gap:.8rem; }
.qa{
  border:1px solid var(--line); border-radius: var(--r);
  background: rgba(11,61,44,.22);
  transition: border-color .3s, background .3s;
}
.qa[open]{ border-color: rgba(163,230,53,.42); background: rgba(16,84,59,.34); }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.2rem 1.4rem; cursor:pointer; list-style:none;
  font-family:'Sora',sans-serif; font-weight:700; font-size:1.02rem;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--lime); }
.qa__ico{
  position:relative; width:20px; height:20px; flex-shrink:0;
}
.qa__ico::before,.qa__ico::after{
  content:''; position:absolute; inset:50% 0 auto 0; height:2px; margin-top:-1px;
  background:var(--lime); border-radius:2px; transition: transform .3s var(--ease);
}
.qa__ico::after{ transform: rotate(90deg); }
.qa[open] .qa__ico::after{ transform: rotate(0deg); }
.qa p{ padding: 0 1.4rem 1.4rem; font-size:.94rem; color:rgba(245,248,241,.66); }

/* ---------- 15. Quote section ---------- */
.quote{
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(34,197,94,.3), transparent 65%),
    radial-gradient(50% 50% at 90% 85%, rgba(255,201,60,.16), transparent 65%),
    var(--grad-dark);
  border-top:1px solid var(--line);
}
.quote__grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap:3.5rem; align-items:start; }
.quote__copy h2{ font-size: clamp(2.1rem,4.6vw,3.3rem); }
.quote__copy > p{ margin-top:1.2rem; color:rgba(245,248,241,.72); }
.quote__points{ display:grid; gap:1.1rem; margin-top:2.2rem; }
.quote__points li{ display:flex; align-items:center; gap:1rem; }
.quote__points li > span{
  width:46px; height:46px; flex-shrink:0; display:grid; place-items:center;
  border-radius:14px; background: var(--grad); color: var(--ink);
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.1rem;
}
.quote__points strong{ display:block; font-family:'Sora',sans-serif; font-size:1rem; }
.quote__points div{ font-size:.87rem; color:var(--muted); }

.quote__direct{
  display:grid; gap:.8rem; margin-top:2.4rem;
  padding:1.4rem; border:1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(6,19,13,.5);
}
.quote__direct a{ display:grid; gap:.1rem; }
.quote__direct small{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.quote__direct strong{ font-family:'Sora',sans-serif; font-size:1.1rem; color:var(--lime);
  transition: color .2s; word-break: break-word; }
.quote__direct a:hover strong{ color:var(--gold); }

/* ---------- 16. Form ---------- */
.form{
  padding: 2.2rem;
  border:1px solid var(--line); border-radius: var(--r-xl);
  background: rgba(6,19,13,.62);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  display:grid; gap:1.1rem;
}
.hp{ position:absolute !important; left:-9999px !important; opacity:0; height:0; width:0; }

.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; }
.field{ display:grid; gap:.45rem; border:0; padding:0; margin:0; }
.field label, .field legend{
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:rgba(245,248,241,.75);
}
.field label span, .field legend span{ color:var(--lime); }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem;
  border:1.5px solid var(--line); border-radius: var(--r-sm);
  background: rgba(11,61,44,.5);
  font-size:.95rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:104px; }
.field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3E635' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .9rem center; background-size:16px;
  padding-right:2.6rem; cursor:pointer;
}
.field select option{ background: var(--ink-2); color: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--lime);
  background: rgba(16,84,59,.55);
  box-shadow: 0 0 0 4px rgba(163,230,53,.13);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(157,179,166,.55); }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#F87171; }

.err{ font-size:.78rem; color:#FCA5A5; font-style:normal; min-height:0; }
.err:empty{ display:none; }

.checks{ display:flex; flex-wrap:wrap; gap:.5rem; }
.check{ position:relative; cursor:pointer; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check span{
  display:inline-block; padding:.5rem .95rem;
  border:1.5px solid var(--line); border-radius:100px;
  background: rgba(11,61,44,.5);
  font-size:.85rem; font-weight:500;
  transition: border-color .25s, background .25s, color .25s, transform .2s;
}
.check:hover span{ border-color: rgba(163,230,53,.5); transform: translateY(-2px); }
.check input:checked + span{
  background: var(--grad); border-color: transparent; color: var(--ink); font-weight:700;
}
.check input:focus-visible + span{ box-shadow: 0 0 0 4px rgba(163,230,53,.3); }

#submitBtn{ position:relative; }
#submitBtn .btn__label{ transition: opacity .2s; }
#submitBtn.is-loading{ pointer-events:none; }
#submitBtn.is-loading .btn__label{ opacity:.35; }
.spinner{
  position:absolute; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(6,19,13,.3); border-top-color: var(--ink);
  opacity:0;
  animation: spin .7s linear infinite;
}
#submitBtn.is-loading .spinner{ opacity:1; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.form__note{ text-align:center; font-size:.78rem; color:var(--muted); }
.form__status{ font-size:.9rem; text-align:center; font-weight:600; }
.form__status:empty{ display:none; }
.form__status.ok{ color: var(--lime); }
.form__status.err{ color:#FCA5A5; }

/* ---------- 17. Footer ---------- */
.footer{ border-top:1px solid var(--line); background: var(--ink); padding-top: 4rem; }
.footer__grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
.footer__brand p{ margin-top:1.1rem; font-size:.9rem; color:var(--muted); max-width:34ch; }
.footer__col h4{
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime); margin-bottom:1.1rem;
}
.footer__col ul{ display:grid; gap:.6rem; }
.footer__col a{ font-size:.9rem; color:rgba(245,248,241,.7); transition: color .2s, padding-left .2s; }
.footer__col a:hover{ color:var(--lime); padding-left:.25rem; }
.footer__contact li{ font-size:.9rem; color:rgba(245,248,241,.7); }
.footer__col .btn{ margin-top:1.3rem; }

.footer__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding-block:1.4rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--muted);
}
.footer__made{ color:rgba(163,230,53,.6); }

/* ---------- 18. Back to top ---------- */
.totop{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:48px; height:48px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  background: rgba(6,19,13,.85); backdrop-filter:blur(10px);
  color:var(--lime); cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(16px) scale(.85);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s, background .3s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background: var(--grad); color:var(--ink); border-color:transparent; }

/* ---------- 19. Responsive ---------- */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:3.5rem; }
  .hero__visual{ max-width:560px; }
  .area, .quote__grid{ grid-template-columns:1fr; gap:3rem; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width:900px){
  .nav__burger{ display:grid; }
  .nav__call{ margin-left:0; }
  .nav__links{
    position:fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    margin:0; padding:1.4rem;
    background: rgba(6,19,13,.97);
    backdrop-filter: blur(20px);
    border-bottom:1px solid var(--line);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y:auto;
    transform: translateY(-12px); opacity:0; visibility:hidden;
    transition: transform .3s var(--ease), opacity .3s, visibility .3s;
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav__links a{ padding:.85rem 1rem; font-size:1rem; border-radius:12px; }
  .nav__links a:hover{ background:rgba(163,230,53,.09); }
  .nav__links a.is-active::after{ display:none; }
  .nav__cta-mobile{ display:inline-flex; margin-top:.7rem; }
  .stats__grid{ grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .ba{ aspect-ratio: 3/2; min-height:260px; border-radius: var(--r-lg); }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .section{ padding: 4.5rem 0; }
  .hero{ padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero__inner{ padding-bottom:3.5rem; }
  .hero__actions .btn{ width:100%; }
  .stats__grid{ grid-template-columns:1fr; }
  .stat{ border-right:0 !important; border-bottom:1px solid var(--line); }
  .stat:last-child{ border-bottom:0; }
  .form__row{ grid-template-columns:1fr; }
  .form{ padding:1.5rem; border-radius: var(--r-lg); }
  .floaty--1{ display:none; }
  .footer__grid{ grid-template-columns:1fr; gap:2rem; }
  .footer__base{ flex-direction:column; text-align:center; align-items:center; }
  .card__tag{ position:static; display:inline-block; margin-top:1.1rem; }
  .lawncard__stats > div{ padding:.8rem .7rem; }
  .ba__grip{ width:44px; height:44px; }
}

/* ---------- 20. Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .nav,.totop,.hero__bg,.marquee,.floaty{ display:none !important; }
  body{ background:#fff; color:#000; }
}