{"id":8,"date":"2026-04-05T18:52:03","date_gmt":"2026-04-05T18:52:03","guid":{"rendered":"https:\/\/emyardwork.work\/?page_id=8"},"modified":"2026-04-22T03:46:51","modified_gmt":"2026-04-22T03:46:51","slug":"hydra-home","status":"publish","type":"page","link":"https:\/\/emyardwork.work\/","title":{"rendered":"E&#038;M Home"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>E&#038;M Yardwork | Home<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display&#038;family=Outfit:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n  <style>\n    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n    :root {\n      --forest: #1b3a20;\n      --green-dark: #2d5a34;\n      --green-mid: #4a7c3a;\n      --green-light: #7ab648;\n      --sage: #a8c5a0;\n      --cream: #f5f1eb;\n      --warm-white: #faf9f7;\n      --text: #3a3a38;\n      --text-light: #6b6b68;\n      --shadow-sm: 0 2px 8px rgba(27, 58, 32, 0.08);\n      --shadow-md: 0 8px 30px rgba(27, 58, 32, 0.12);\n      --radius: 12px;\n    }\n\n    body {\n      font-family: 'Outfit', sans-serif;\n      color: var(--text);\n      background: var(--warm-white);\n      line-height: 1.7;\n    }\n\n    .section-label {\n      display: inline-block;\n      font-size: 0.75rem;\n      font-weight: 600;\n      letter-spacing: 3px;\n      text-transform: uppercase;\n      color: var(--green-mid);\n      margin-bottom: 0.75rem;\n    }\n    .section-title {\n      font-family: 'DM Serif Display', serif;\n      font-size: clamp(2rem, 4vw, 2.75rem);\n      color: var(--forest);\n      line-height: 1.2;\n      margin-bottom: 1.25rem;\n    }\n\n    @keyframes fadeUp {\n      from { opacity: 0; transform: translateY(30px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .animate { opacity: 0; animation: fadeUp 0.7s ease forwards; }\n    .animate-d1 { animation-delay: 0.1s; }\n    .animate-d2 { animation-delay: 0.2s; }\n    .animate-d3 { animation-delay: 0.3s; }\n\n    \/* ===== HERO ===== *\/\n    .hero {\n      padding: 5rem 2rem;\n      text-align: center;\n      background:\n        radial-gradient(ellipse at 30% 80%, rgba(122, 182, 72, 0.07) 0%, transparent 50%),\n        radial-gradient(ellipse at 70% 20%, rgba(168, 197, 160, 0.1) 0%, transparent 50%),\n        var(--warm-white);\n    }\n    .hero-inner { max-width: 720px; margin: 0 auto; }\n\n    .hero-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      background: rgba(74, 124, 58, 0.1);\n      color: var(--green-dark);\n      padding: 0.4rem 1.1rem;\n      border-radius: 50px;\n      font-size: 0.8rem;\n      font-weight: 600;\n      margin-bottom: 1.5rem;\n    }\n    .hero-badge::before {\n      content: '';\n      width: 7px;\n      height: 7px;\n      background: var(--green-light);\n      border-radius: 50%;\n    }\n\n    .hero h1 {\n      font-family: 'DM Serif Display', serif;\n      font-size: clamp(2.5rem, 5.5vw, 3.75rem);\n      color: var(--forest);\n      line-height: 1.1;\n      margin-bottom: 1.25rem;\n    }\n    .hero h1 span { color: var(--green-mid); }\n\n    .hero p {\n      font-size: 1.1rem;\n      color: var(--text-light);\n      max-width: 540px;\n      margin: 0 auto 2rem;\n      line-height: 1.8;\n    }\n\n    .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }\n\n    .btn-primary {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      background: var(--green-mid);\n      color: white;\n      padding: 0.9rem 1.75rem;\n      border-radius: 10px;\n      text-decoration: none;\n      font-weight: 600;\n      font-size: 0.95rem;\n      border: none;\n      cursor: pointer;\n      transition: all 0.25s ease;\n      box-shadow: 0 4px 14px rgba(74, 124, 58, 0.3);\n    }\n    .btn-primary:hover {\n      background: var(--green-dark);\n      transform: translateY(-2px);\n      box-shadow: 0 6px 20px rgba(74, 124, 58, 0.35);\n    }\n    .btn-secondary {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.5rem;\n      background: transparent;\n      color: var(--forest);\n      padding: 0.9rem 1.75rem;\n      border-radius: 10px;\n      text-decoration: none;\n      font-weight: 600;\n      font-size: 0.95rem;\n      border: 2px solid rgba(27, 58, 32, 0.15);\n      transition: all 0.25s ease;\n    }\n    .btn-secondary:hover {\n      border-color: var(--green-mid);\n      color: var(--green-mid);\n    }\n\n    \/* ===== SERVICES PREVIEW ===== *\/\n    .services-preview {\n      padding: 5rem 2rem;\n      max-width: 1140px;\n      margin: 0 auto;\n    }\n    .services-header {\n      text-align: center;\n      margin-bottom: 3rem;\n    }\n    .services-header p {\n      color: var(--text-light);\n      max-width: 500px;\n      margin: 0 auto;\n      font-size: 1.02rem;\n    }\n\n    .service-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 1.5rem;\n    }\n    .service-card {\n      background: white;\n      border-radius: var(--radius);\n      padding: 1.75rem 1.5rem;\n      border: 1px solid rgba(0,0,0,0.04);\n      transition: all 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n    .service-card::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 0; right: 0;\n      height: 3px;\n      background: linear-gradient(90deg, var(--green-mid), var(--green-light));\n      transform: scaleX(0);\n      transition: transform 0.3s ease;\n    }\n    .service-card:hover {\n      transform: translateY(-4px);\n      box-shadow: var(--shadow-md);\n    }\n    .service-card:hover::after { transform: scaleX(1); }\n\n    .service-icon {\n      width: 46px; height: 46px;\n      border-radius: 11px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.3rem;\n      margin-bottom: 1rem;\n      background: rgba(74, 124, 58, 0.08);\n    }\n    .service-card h3 {\n      font-family: 'DM Serif Display', serif;\n      font-size: 1.15rem;\n      color: var(--forest);\n      margin-bottom: 0.5rem;\n    }\n    .service-card p {\n      font-size: 0.88rem;\n      color: var(--text-light);\n      line-height: 1.7;\n    }\n    .services-cta { text-align: center; margin-top: 2.5rem; }\n\n    \/* ===== PRICING ===== *\/\n    .pricing {\n      padding: 5rem 2rem;\n      background: var(--cream);\n    }\n    .pricing-inner {\n      max-width: 900px;\n      margin: 0 auto;\n    }\n    .pricing-header {\n      text-align: center;\n      margin-bottom: 3rem;\n    }\n    .pricing-header p {\n      color: var(--text-light);\n      max-width: 500px;\n      margin: 0 auto;\n      font-size: 1.02rem;\n    }\n\n    .pricing-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 1.5rem;\n      margin-bottom: 2rem;\n    }\n    .pricing-card {\n      background: white;\n      border-radius: var(--radius);\n      padding: 2rem 1.5rem;\n      text-align: center;\n      border: 1px solid rgba(0,0,0,0.04);\n      transition: all 0.3s ease;\n    }\n    .pricing-card.featured {\n      border: 2px solid var(--green-mid);\n      box-shadow: var(--shadow-md);\n      position: relative;\n    }\n    .pricing-card.featured::before {\n      content: 'Most Common';\n      position: absolute;\n      top: -12px;\n      left: 50%;\n      transform: translateX(-50%);\n      background: var(--green-mid);\n      color: white;\n      font-size: 0.72rem;\n      font-weight: 700;\n      letter-spacing: 1px;\n      text-transform: uppercase;\n      padding: 0.3rem 1rem;\n      border-radius: 50px;\n      white-space: nowrap;\n    }\n    .pricing-card:hover { transform: translateY(-4px); }\n\n    .pricing-size {\n      font-family: 'DM Serif Display', serif;\n      font-size: 1.2rem;\n      color: var(--forest);\n      margin-bottom: 0.25rem;\n    }\n    .pricing-desc {\n      font-size: 0.8rem;\n      color: var(--text-light);\n      margin-bottom: 1.25rem;\n    }\n    .pricing-amount {\n      font-family: 'DM Serif Display', serif;\n      font-size: 2.5rem;\n      color: var(--green-mid);\n      line-height: 1;\n    }\n    .pricing-amount span {\n      font-family: 'Outfit', sans-serif;\n      font-size: 0.85rem;\n      font-weight: 500;\n      color: var(--text-light);\n    }\n    .pricing-note {\n      font-size: 0.82rem;\n      color: var(--text-light);\n      margin-top: 0.5rem;\n    }\n\n    .pricing-footer {\n      text-align: center;\n      color: var(--text-light);\n      font-size: 0.95rem;\n      line-height: 1.8;\n    }\n    .pricing-footer strong {\n      color: var(--green-mid);\n      font-weight: 700;\n    }\n\n    \/* ===== ABOUT PREVIEW ===== *\/\n    .about-preview { padding: 5rem 2rem; background: var(--warm-white); }\n    .about-inner {\n      max-width: 800px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .about-inner p {\n      color: var(--text-light);\n      font-size: 1.05rem;\n      margin-bottom: 1rem;\n      line-height: 1.8;\n    }\n    .about-inner .btn-secondary { margin-top: 1rem; }\n\n    \/* ===== WHY US ===== *\/\n    .why-us {\n      padding: 4rem 2rem;\n      background: linear-gradient(135deg, var(--green-dark), var(--forest));\n      color: white;\n    }\n    .why-inner {\n      max-width: 900px;\n      margin: 0 auto;\n      text-align: center;\n    }\n    .why-inner .section-label { color: var(--sage); }\n    .why-inner .section-title { color: white; }\n\n    .why-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 2rem;\n      margin-top: 2.5rem;\n    }\n    .why-item { text-align: center; }\n    .why-icon {\n      font-size: 1.75rem;\n      margin-bottom: 0.75rem;\n    }\n    .why-item h3 {\n      font-family: 'DM Serif Display', serif;\n      font-size: 1.1rem;\n      margin-bottom: 0.4rem;\n    }\n    .why-item p {\n      font-size: 0.88rem;\n      opacity: 0.75;\n      line-height: 1.6;\n    }\n\n    \/* ===== CTA BANNER ===== *\/\n    .cta-banner {\n      padding: 4.5rem 2rem;\n      text-align: center;\n      background: var(--cream);\n    }\n    .cta-banner .section-title { margin-bottom: 0.75rem; }\n    .cta-banner p {\n      color: var(--text-light);\n      font-size: 1.05rem;\n      max-width: 480px;\n      margin: 0 auto 2rem;\n    }\n\n    \/* ===== RESPONSIVE ===== *\/\n    @media (max-width: 900px) {\n      .service-grid { grid-template-columns: 1fr 1fr; }\n      .pricing-grid { grid-template-columns: 1fr 1fr; }\n      .why-grid { grid-template-columns: 1fr 1fr; }\n    }\n    @media (max-width: 600px) {\n      .service-grid { grid-template-columns: 1fr; }\n      .pricing-grid { grid-template-columns: 1fr; }\n      .why-grid { grid-template-columns: 1fr; }\n      .hero { padding: 3.5rem 1.5rem; }\n    }\n  <\/style>\n<\/head>\n<body>\n\n  <!-- HERO -->\n  <section class=\"hero\">\n    <div class=\"hero-inner\">\n      <div class=\"hero-badge animate\">New in the Neighborhood<\/div>\n      <h1 class=\"animate animate-d1\">Your yard, <span>done right.<\/span><\/h1>\n      <p class=\"animate animate-d2\">We&#8217;re two local teens launching a yardwork business built on hard work, fair prices, and showing up when we say we will. Be one of our first customers!<\/p>\n      <div class=\"hero-actions animate animate-d3\">\n        <a href=\"\/contact\" class=\"btn-primary\">Get a Free Quote &rarr;<\/a>\n        <a href=\"\/services\" class=\"btn-secondary\">See What We Do<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SERVICES PREVIEW -->\n  <section class=\"services-preview\">\n    <div class=\"services-header\">\n      <span class=\"section-label\">What We Do<\/span>\n      <h2 class=\"section-title\">Our Services<\/h2>\n      <p>Everything your yard needs \u2014 done right, at a price that won&#8217;t break the bank.<\/p>\n    <\/div>\n    <div class=\"service-grid\">\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\ud83c\udf3f<\/div>\n        <h3>Lawn Mowing<\/h3>\n        <p>Weekly, bi-weekly, or one-time cuts to keep your lawn looking sharp all season long.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\ud83e\ude93<\/div>\n        <h3>Bramble &amp; Brush Clearing<\/h3>\n        <p>Overgrown areas cleared out and hauled away so you can reclaim your yard.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\ud83e\udeb5<\/div>\n        <h3>Stick &amp; Debris Cleanup<\/h3>\n        <p>Fallen branches and storm debris picked up and removed for a clean, safe lawn.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\ud83c\udf42<\/div>\n        <h3>Leaf Removal<\/h3>\n        <p>Full fall cleanup \u2014 raking, blowing, bagging, and hauling. No leaves left behind.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\u2702\ufe0f<\/div>\n        <h3>Edging &amp; Trimming<\/h3>\n        <p>Crisp edges along walkways and beds for that clean, finished look.<\/p>\n      <\/div>\n      <div class=\"service-card\">\n        <div class=\"service-icon\">\ud83d\udee0\ufe0f<\/div>\n        <h3>Custom Jobs<\/h3>\n        <p>Something specific in mind? Tell us what you need and we&#8217;ll work with you to get it done.<\/p>\n      <\/div>\n    <\/div>\n    <div class=\"services-cta\">\n      <a href=\"\/services\" class=\"btn-secondary\">View All Services &rarr;<\/a>\n    <\/div>\n  <\/section>\n\n  <!-- PRICING -->\n  <section class=\"pricing\">\n    <div class=\"pricing-inner\">\n      <div class=\"pricing-header\">\n        <span class=\"section-label\">Simple Pricing<\/span>\n        <h2 class=\"section-title\">Flat rates. No surprises.<\/h2>\n        <p>We charge fixed rates based on yard size for standard services, so you always know what to expect.<\/p>\n      <\/div>\n      <div class=\"pricing-grid\">\n        <div class=\"pricing-card\">\n          <div class=\"pricing-size\">Small Yard<\/div>\n          <div class=\"pricing-desc\">Compact lawns &amp; townhomes<\/div>\n          <div class=\"pricing-amount\">$20<span> \/ visit<\/span><\/div>\n          <div class=\"pricing-note\">Mowing, edging &amp; cleanup<\/div>\n        <\/div>\n        <div class=\"pricing-card featured\">\n          <div class=\"pricing-size\">Medium Yard<\/div>\n          <div class=\"pricing-desc\">Average suburban lawns<\/div>\n          <div class=\"pricing-amount\">$35<span> \/ visit<\/span><\/div>\n          <div class=\"pricing-note\">Mowing, edging &amp; cleanup<\/div>\n        <\/div>\n        <div class=\"pricing-card\">\n          <div class=\"pricing-size\">Large Yard<\/div>\n          <div class=\"pricing-desc\">Bigger properties &amp; lots<\/div>\n          <div class=\"pricing-amount\">$50<span> \/ visit<\/span><\/div>\n          <div class=\"pricing-note\">Mowing, edging &amp; cleanup<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"pricing-footer\">\n        Other services like brush clearing, leaf removal, and custom jobs are billed at <strong>$13\/hour<\/strong>.<br>\n        Not sure about your yard size? Reach out and we&#8217;ll give you a free estimate.\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- ABOUT PREVIEW -->\n  <section class=\"about-preview\">\n    <div class=\"about-inner\">\n      <span class=\"section-label\">Who We Are<\/span>\n      <h2 class=\"section-title\">Young, hardworking, and ready to earn your trust.<\/h2>\n      <p>We&#8217;re two 13-year-olds starting E&amp;M Yardwork from the ground up. We don&#8217;t have a long list of past clients yet \u2014 but we&#8217;ve got the energy, the work ethic, and the drive to do a great job on your yard. Give us a shot and we&#8217;ll prove it.<\/p>\n      <a href=\"\/about\" class=\"btn-secondary\">More About Us &rarr;<\/a>\n    <\/div>\n  <\/section>\n\n  <!-- WHY US -->\n  <section class=\"why-us\">\n    <div class=\"why-inner\">\n      <span class=\"section-label\">Why Hire Us<\/span>\n      <h2 class=\"section-title\">What you get when you work with E&amp;M<\/h2>\n      <div class=\"why-grid\">\n        <div class=\"why-item\">\n          <div class=\"why-icon\">\ud83d\udcb0<\/div>\n          <h3>Affordable Rates<\/h3>\n          <p>Fair, straightforward pricing that&#8217;s easy on your wallet. No hidden fees, ever.<\/p>\n        <\/div>\n        <div class=\"why-item\">\n          <div class=\"why-icon\">\ud83e\udd1d<\/div>\n          <h3>Honest &amp; Reliable<\/h3>\n          <p>We show up when we say we will and we don&#8217;t cut corners. Your satisfaction matters to us.<\/p>\n        <\/div>\n        <div class=\"why-item\">\n          <div class=\"why-icon\">\ud83c\udfe1<\/div>\n          <h3>Local Kids Who Care<\/h3>\n          <p>We live in the neighborhood. When your yard looks great, our whole community looks great.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CTA BANNER -->\n  <section class=\"cta-banner\">\n    <span class=\"section-label\">Let&#8217;s Get Started<\/span>\n    <h2 class=\"section-title\">Be one of our first customers.<\/h2>\n    <p>We&#8217;re just getting started and would love the chance to take care of your yard. Reach out for a free, no-pressure estimate.<\/p>\n    <a href=\"\/contact\" class=\"btn-primary\">Contact Us &rarr;<\/a>\n  <\/section>\n\n  <script>\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.style.animationPlayState = 'running';\n          observer.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.15 });\n\n    document.querySelectorAll('.animate').forEach(el => {\n      el.style.animationPlayState = 'paused';\n      if (el.closest('.hero')) {\n        el.style.animationPlayState = 'running';\n      } else {\n        observer.observe(el);\n      }\n    });\n  <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>E&#038;M Yardwork | Home New in the Neighborhood Your yard, done right. We&#8217;re two local teens launching a yardwork business built on hard work, fair prices, and showing up when we say we will. Be one of our first customers! Get a Free Quote &rarr; See What We Do What We Do Our Services Everything [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emyardwork.work\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emyardwork.work\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emyardwork.work\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emyardwork.work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emyardwork.work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":5,"href":"https:\/\/emyardwork.work\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/emyardwork.work\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/emyardwork.work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}