<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>MowBaby LawnCare | Same-Day Lawn Care in Central Florida</title>
<meta name="description" content="MowBaby LawnCare. You call, we mow. Same-day lawn care in Deltona, Sanford, Orange City, DeBary, Lake Mary, DeLand, Enterprise and Osteen. Call or text 352 460 6352.">
<meta name="theme-color" content="#053815">
<meta property="og:title" content="MowBaby LawnCare">
<meta property="og:description" content="You call, we mow. Same-day lawn care across Central Florida. Call or text 352 460 6352.">
<meta property="og:type" content="website">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="/brand/logo.png">
<link rel="apple-touch-icon" href="/brand/logo.png">
<link rel="manifest" href="manifest.webmanifest">
<meta name="apple-mobile-web-app-title" content="MowBaby">
<meta name="application-name" content="MowBaby">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta property="og:image" content="https://mowbaby.com/__l5e/assets-v1/f28b0a07-f86a-409f-8e68-679ea14b9617/mow-logo.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="card">

  <header class="hero">
    <div class="hero-stripes" aria-hidden="true"></div>
    <video class="hero-video" id="heroVideo" autoplay muted loop playsinline preload="auto" aria-hidden="true">
      <source src="videos/lawn-loop.mp4" type="video/mp4">
      <source src="videos/mowed-lawn-web.webm" type="video/webm">
      <source src="https://mowbaby.com/__l5e/assets-v1/034de454-c865-4c29-b0c9-4e0c3b814a42/mowed-lawn-web.webm" type="video/webm">
    </video>
    <div class="hero-shade" aria-hidden="true"></div>
    <div class="logo-badge">
      <img src="images/logo.png" alt="MowBaby LawnCare logo" id="logoImg">
      <span class="logo-fallback" id="logoFallback" aria-hidden="true">MB</span>
    </div>
    <svg class="hills" viewBox="0 0 390 130" preserveAspectRatio="none" aria-hidden="true">
      <path d="M0 62 C90 14 200 22 390 72 V130 H0z" fill="#227d32"/>
      <path d="M0 94 C120 54 260 62 390 98 V130 H0z" fill="#135d27"/>
      <path d="M0 118 C130 98 270 102 390 118 V130 H0z" fill="#f8f4ea"/>
    </svg>
  </header>

  <section class="intro">
    <h1>MowBaby <span>LawnCare</span></h1>
    <p class="tagline">You call, we mow!</p>
    <p class="sub">Same-day lawn care across Central Florida</p>
  </section>

  <section class="actions">
    <a class="btn-call" href="tel:+13524606352">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"/></svg>
      Call 352 460 6352
    </a>
    <div class="quick">
      <a class="pill" href="sms:+13524606352">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        Text
      </a>
      <a class="pill" href="mowbaby-lawncare.vcf" download="MowBaby LawnCare.vcf">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/></svg>
        Save
      </a>
      <a class="pill" href="https://www.mowbaby.com" target="_blank" rel="noopener">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20"/></svg>
        Website
      </a>
      <a class="pill" href="https://instagram.com/mowbabylawncare" target="_blank" rel="noopener">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1"/></svg>
        Insta
      </a>
    </div>
    <a class="btn-quote" href="#quote">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      Get my instant quote
    </a>
  </section>

  <section class="block" id="videoSection">
    <h2>See the crew in action</h2>
    <div class="video-frame">
      <video id="jobVideo" playsinline preload="metadata">
        <source src="videos/mow-job.mp4" type="video/mp4">
        <source src="https://mowbaby.com/__l5e/assets-v1/6aa19f0f-dfea-4b06-8cd4-c8090a05116d/mow-job.mp4" type="video/mp4">
      </video>
      <button type="button" class="play" id="playBtn" aria-label="Play the mow job video">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="#2e1e01" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
      </button>
    </div>
  </section>

  <section class="block">
    <div class="block-head">
      <h2>Pick your cut</h2>
      <span class="badge">SAME DAY</span>
    </div>
    <ul class="prices">
      <li data-svc="0" tabindex="0" role="button" aria-label="Get a quote for Simple mow and go, $40"><span>Simple mow and go</span><b>$40</b></li>
      <li data-svc="1" tabindex="0" role="button" aria-label="Get a quote for Mow and blow, $50"><span>Mow and blow</span><b>$50</b></li>
      <li data-svc="2" tabindex="0" role="button" aria-label="Get a quote for Mow, weed eat, blow, $60"><span>Mow, weed eat, blow</span><b>$60</b></li>
      <li data-svc="3" tabindex="0" role="button" aria-label="Get a quote for Mow, weed eat, edge, blow, $70"><span>Mow, weed eat, edge, blow</span><b>$70</b></li>
      <li data-svc="4" tabindex="0" role="button" aria-label="Get a quote for the full service, $100" class="top"><span>Mow, weed eat, edge, bush and tree trim, blow</span><b>$100</b></li>
    </ul>
    <p class="note">Prices based on regular sized yards. Tap a cut to get your quote.</p>
  </section>

  <section class="block" id="quote" hidden>
    <div class="quote">
      <div class="quote-head">
        <div class="quote-top">
          <h2>Instant quote</h2>
          <button type="button" class="q-close" id="qClose" aria-label="Close instant quote">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>
        <p>Pick your cut, tell us where, add a few yard photos, and send it straight to MowBaby by text.</p>
      </div>

      <fieldset class="q-group">
        <legend>1. Pick your cut</legend>
        <div class="svc-list" id="svcList">
          <label class="svc"><input type="radio" name="svc" value="0"><span class="svc-name">Simple mow and go</span><span class="svc-price">$40</span></label>
          <label class="svc"><input type="radio" name="svc" value="1"><span class="svc-name">Mow and blow</span><span class="svc-price">$50</span></label>
          <label class="svc"><input type="radio" name="svc" value="2"><span class="svc-name">Mow, weed eat, blow</span><span class="svc-price">$60</span></label>
          <label class="svc"><input type="radio" name="svc" value="3"><span class="svc-name">Mow, weed eat, edge, blow</span><span class="svc-price">$70</span></label>
          <label class="svc"><input type="radio" name="svc" value="4"><span class="svc-name">Mow, weed eat, edge, bush and tree trim, blow</span><span class="svc-price">$100</span></label>
        </div>
      </fieldset>

      <fieldset class="q-group">
        <legend>2. Where is the yard?</legend>
        <label class="field"><span>Town</span>
          <select id="qTown">
            <option value="">Choose your town</option>
            <option>Deltona</option><option>Sanford</option><option>Orange City</option><option>DeBary</option>
            <option>Lake Mary</option><option>DeLand</option><option>Enterprise</option><option>Osteen</option>
            <option value="Palm Coast">Palm Coast (+$100 distance fee)</option>
            <option value="Other">Somewhere else</option>
          </select>
        </label>
        <label class="field"><span>Street address</span>
          <input id="qAddress" type="text" autocomplete="street-address" placeholder="123 Main St">
        </label>
        <label class="field"><span>Your name</span>
          <input id="qName" type="text" autocomplete="name" placeholder="First name">
        </label>
        <label class="field"><span>When do you need it?</span>
          <select id="qWhen">
            <option>Today (same day)</option>
            <option>Tomorrow</option>
            <option>This week</option>
            <option>I'm flexible</option>
          </select>
        </label>
        <label class="field"><span>Anything we should know? (optional)</span>
          <textarea id="qNotes" rows="2" placeholder="Gate code, dogs in the yard, tall grass in back..."></textarea>
        </label>
      </fieldset>

      <fieldset class="q-group">
        <legend>3. Add yard photos</legend>
        <p class="q-help">Front yard, back yard, and any overgrown spots. Photos help us confirm your price.</p>
        <label class="btn-photo">
          <input id="qPhotos" type="file" accept="image/*" multiple>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
          <span id="photoLabel">Take or add photos</span>
        </label>
        <div class="thumbs" id="thumbs"></div>
      </fieldset>

      <div class="q-total" id="qTotal" aria-live="polite">
        <span class="q-total-label">Your estimate</span>
        <span class="q-total-price" id="qPrice">Pick a cut</span>
        <span class="q-total-sub" id="qSub">Prices based on regular sized yards</span>
      </div>

      <div class="disclaimer">
        <b>Good to know before you send</b>
        <p>Your estimate is based on a regular sized yard. MowBaby will look at your photos and confirm your final price by text before any work starts. Larger, overgrown, or hard to reach yards, heavy debris, and locations outside our service area may cost more. No surprises: you'll always approve the price first.</p>
      </div>

      <p class="q-error" id="qError" role="alert"></p>
      <button type="button" class="btn-send" id="qSend">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
        <span id="qSendLabel">Text my quote</span>
      </button>
      <a class="q-alt" id="qAlt" href="#">Send without photos</a>
      <p class="q-steps" id="qSteps"></p>
    </div>
  </section>

  <section class="block">
    <div class="area">
      <h2>Where we mow</h2>
      <div class="chips">
        <span>Deltona</span><span>Sanford</span><span>Orange City</span><span>DeBary</span>
        <span>Lake Mary</span><span>DeLand</span><span>Enterprise</span><span>Osteen</span>
      </div>
      <p>We travel anywhere for a distance fee. Palm Coast is $100 plus services.</p>
    </div>
  </section>

  <section class="block">
    <div class="review">
      <div class="stars" role="img" aria-label="Five stars">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg>
      </div>
      <h2>Loved your cut?</h2>
      <p>Leave MowBaby a Google review. It takes 30 seconds and helps a local crew grow.</p>
      <a class="btn-review" href="https://g.page/r/CZjqxQEWCaicEBM/review" target="_blank" rel="noopener">
        <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M22.6 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h5.9c-.3 1.4-1 2.5-2.2 3.3v2.7h3.6c2.1-1.9 3.3-4.8 3.3-8z"/><path fill="#34A853" d="M12 23c3 0 5.5-1 7.3-2.7l-3.6-2.7c-1 .7-2.2 1.1-3.7 1.1-2.9 0-5.3-1.9-6.2-4.5H2.1v2.8C3.9 20.5 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.8 14.2c-.2-.7-.4-1.4-.4-2.2s.1-1.5.4-2.2V7H2.1C1.4 8.5 1 10.2 1 12s.4 3.5 1.1 5l3.7-2.8z"/><path fill="#EA4335" d="M12 5.4c1.6 0 3.1.6 4.2 1.7l3.2-3.2C17.5 2.1 15 1 12 1 7.7 1 3.9 3.5 2.1 7l3.7 2.8C6.7 7.3 9.1 5.4 12 5.4z"/></svg>
        Leave a Google review
      </a>
    </div>
  </section>

  <section class="block">
    <div class="share">
      <h2>Share this card</h2>
      <p>Let a neighbor scan it, or send it to a friend who needs a cut.</p>
      <div class="qr-wrap">
        <div class="qr" id="qr" role="img" aria-label="QR code that opens this card"></div>
      </div>
      <button type="button" class="btn-share" id="shareBtn">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v13"/></svg>
        <span id="shareLabel">Share this card</span>
      </button>
    </div>
  </section>

  <footer class="foot">
    <div class="credit">
      <span>CRAFTED BY</span>
      <a href="https://finessemedia.pro" target="_blank" rel="noopener">Finesse Media</a>
    </div>
    <a class="own" href="https://wa.me/14079609004?text=Hi%20Angel%2C%20I%20really%20like%20the%20vCard%20you%20made%20for%20MowBaby%20LawnCare.%20I%27d%20love%20to%20get%20one%20for%20my%20business." target="_blank" rel="noopener">Get your own vCard</a>
  </footer>

</main>
<script src="js/qrcode.js"></script>
<script src="js/main.js"></script>
<script src="js/quote.js"></script>
<script src="js/sfx.js"></script>
</body>
</html>
