.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --e-gv-4b3f2ed:#123456; --e-gv-ea32d24:px; --text-primary:#0E1A13; --text-secondary:#3E4944; --text-muted:#6B7772; --surface:#FFFFFF; --hairline:#E3E8E4; --e-gv-056be2c:#E6EBE7; --sage:#B9C9BF; --e-gv-e92ca3b:#B9C4BD; --bg-section:#F7F5F0; --bg-tint:#EFEAE0; --accent:#166534; --accent-dark:#14532D; --green-deep:#2C5A3C; --green-ink:#123D24; --cta:#C2410C; --cta-dark:#9A3412; --gold:#E8A317; --cream:#E7E1D6; --e-gv-8fd61c4:#F7F5F0; --white-veil:rgba(255,255,255,0.14); --font-main:Inter; --font-heading:Inter; --text-hero:56px; --text-h2:43px; --text-h3:19.5px; --text-body:17px; --text-small:13px; --radius:12px; --radius-small:6px; --radius-pill:999px; --space-section:96px; --space-section-sm:64px; --space-gutter:24px; --space-gutter-sm:16px; --radius-lg:24px; --radius-md:16px; --width-container:1160px; --text-lead:18.5px; --text-body-sm:16px; --text-ui:15.5px; --text-label:14.5px; --text-xs:12.5px; --text-card-title:24px; --e-gv-bc611f4:#F1F7F2; --cta-tint:#EFEAE0; --space-section-xs:48px; --star:#FBBC04; }
/* Start custom CSS *//* ============================================================
   Morris Mowing Co. — site CSS
   Everything lives here rather than the theme Customizer so
   there is one place to look. Each block says why it exists.
   ============================================================ */

/* Anchor links. Elementor sets html{scroll-behavior:smooth} in its own
   frontend.min.css, and something in this plugin stack aborts the smooth
   animation before it starts, so every in-page #jump silently did nothing. */
html { scroll-behavior: auto; }

/* Sticky header. Frosted so it reads over both the light-green and white
   sections without a hard edge. */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(14, 26, 19, 0.08);
}
body.admin-bar header.elementor-location-header { top: 32px; }

/* A sticky header eats anchor jumps: without this every nav click lands
   with the section heading hidden underneath the bar. */
#top, #plan, #area, #stump, #reviews, #contact,
#includes, #faq { scroll-margin-top: 96px; }

/* Whitespace. 96px was the floor of the range that reads premium; 120
   gives the sections room to breathe on desktop only. */
@media (min-width: 1025px) {
  #plan, #area, #stump, #reviews, #contact,
  #includes, #faq, {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }
}

/* Hierarchy. Every section heading was an identical 43px, so the page read
   as six equal shouts with no path for the eye. The plan section is where
   the money is, so it leads and the rest step down. */
/* Desktop only. Unscoped these clobbered mobile, where the section heading
   ended up LARGER than the h1 (52px vs 37px) and the plan heading ran to
   three lines. Natural mobile size is 24px. */
@media (min-width: 1025px) {
  #plan h2, #area h2, #stump h2, #contact h2, #reviews h2,
  #includes h2, #faq h2, .smwq62ph9 h2 {
    font-size: 42px !important;
    line-height: 1.12 !important;
  }
}

/* (9/25) The plan heading now matches the other section headings on every
   screen size, so the page headline leads. */

/* The FAQ block was the only centred section on an otherwise left-aligned
   page. Obvious at thumbnail size, invisible at full size. */
/* text-align alone did nothing here: the wrapper is a flex container with
   align-items:center, so the heading was centred as a flex item regardless. */
.smwq62ph9 { text-align: left !important; align-items: flex-start !important; }
.smwq62ph9 h2 { text-align: left !important; }

/* Buttons. Every pill sets align-items and justify-content but Elementor s
   own base rule leaves display:inline-block, where neither does anything,
   so labels sat jammed against the top of the button. */
/* NOTE: Elementor s base-desktop stylesheet loads AFTER this kit CSS, so a
   plain .elementor .e-button-base loses the tie on source order. The class is
   repeated to raise specificity rather than reaching for !important. */
.elementor .e-button-base.e-button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Quote form checkboxes. Elementor strips the native control; the width is
   set to 20px in the panel now, this restores a visible checked state. */
.e-form-checkbox-base {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  background: none !important;
  border: 0 !important;
  margin: 0 !important;
  accent-color: #166534;
}

/* Floating call button. The sticky header already carries a phone CTA on
   desktop, so this is phones only rather than doubled up everywhere. */
@media (min-width: 768px) {
  .elementor-location-floating_buttons { display: none !important; }
}


/* Tap targets. Footer links measured 17px tall on a phone, well under the
   44px minimum and easy to mis-tap. Padding rather than font-size so the
   footer keeps its proportions. */
@media (max-width: 767px) {
  footer a { display: inline-block; padding-block: 11px; }
}


/* ---- FAQ open state ----
   Opening an item produced a hard square with the answer flush to the edge:
   the content panel had 0 side padding and a 1px top border. */
/* FAQ items. The accordion widget hangs the border and the 12px radius off the
   summary, so an open item drew a fully rounded pill for the question and a
   second bordered box under it for the answer. Move the frame onto the item so
   an open FAQ is one continuous card. */
.e-n-accordion-item {
  background: #fff;
  border: 1px solid #D5D8DC;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
.e-n-accordion-item > summary.e-n-accordion-item-title {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.e-n-accordion-item > .e-con {
  background: transparent !important;
  border: 0 !important;
  padding: 0 20px 20px !important;
}

/* ---- Stump grinding ----
   A second service needs to read as a second service. Warm accent used ONLY
   here, so green keeps meaning "click here" everywhere else. Section also
   sits below the FAQ now, so the mowing pitch finishes before this starts. */
#stump { background: #F7F5F0 !important; }
#stump p.e-paragraph-base:first-of-type { color: #C2410C !important; }
#stump .e-button-base { border-color: #C2410C !important; color: #C2410C !important; }

/* ---- Review card ----
   Deliberately unlike anything else on the page so it stops the eye. Dark

/* ---- Mobile header ----
   Nav is hidden on phones, so push the phone button hard right against the
   wordmark rather than letting it sit mid-row. */
@media (max-width: 1024px) {
  header.elementor-location-header .s0tweiwzm { justify-content: space-between !important; width: 100% !important; }
}

/* ================= Mobile-first pass ================= */

/* Section backgrounds (9/25): now set by the section, section-tint and
   section-cream global classes, and mobile padding by the section class.
   Mobile trims. Desktop keeps the fuller layout; these blocks only earn their
   space on a wide screen.
   - .sfao68axe  the call card; on a phone the header, floating button and
     hero already offer the call.
   - #plan-intro  the plan intro paragraph, which restates the card beneath it.
   - .svgjh6s35 / .sznahb3pi  footer Services and Service area columns, hidden
     rather than deleted so the text stays in the HTML for crawlers. */
@media (max-width: 767px) {
  .sfao68axe, #plan-intro, .svgjh6s35, .sznahb3pi { display: none !important; }
  .sa5it076s { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* Desktop header. Logo stays left; the nav and the phone button both sit on
   the right. margin-right:auto on the logo does the whole job — no change to
   justify-content, so the mobile space-between rule below still behaves. */
@media (min-width: 768px) {
  /* first child is the brand block (mark + wordmark); auto margin pushes
     the nav and the phone button to the right edge */
  header.elementor-location-header .s0tweiwzm > :first-child { margin-right: auto; }
  header.elementor-location-header .s0tweiwzm { gap: 32px; }
}


/* ---- Stump grinding service page ----
   Same green/white rhythm as the home page. The home page keys its
   backgrounds off element classes; this page keys off the section ids
   so the rules stay readable when the classes get regenerated. */

@media (max-width: 767px) {
  #top, #includes, #area, #faq {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}


/* ---- Mobile menu ----
   The button and the panel are built by the "Mobile menu" custom code snippet
   from whatever links are already in the header, so nav items stay editable in
   Elementor and the menu picks them up on its own. Desktop is untouched. */
.mm-burger, .mm-menu { display: none; }

@media (max-width: 1024px) {
  /* Nav links collapse to the hamburger through iPad-portrait sizes (9/1). */
  header.elementor-location-header .s7ri0hejd { display: none !important; }
  .mm-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    margin-left: auto;
    margin-right: 6px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .mm-burger,
  .mm-burger:hover,
  .mm-burger:focus,
  .mm-burger:active {
    background: none !important;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .mm-burger:focus-visible {
    outline: 2px solid #166534;
    outline-offset: 2px;
    border-radius: 6px;
  }
  .mm-burger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #0E1A13;
    transition: transform .18s ease, opacity .18s ease;
  }
  .mm-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mm-burger.is-open span:nth-child(2) { opacity: 0; }
  .mm-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mm-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid rgba(14, 26, 19, 0.08);
    box-shadow: 0 18px 40px rgba(14, 26, 19, 0.10);
    padding: 4px 24px 16px;
  }
  .mm-menu[hidden] { display: none; }
  .mm-menu__link {
    display: block;
    padding: 15px 0;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    color: #0E1A13 !important;
    border-bottom: 1px solid rgba(14, 26, 19, 0.07);
  }
  .mm-menu__link:last-child { border-bottom: 0; }

  /* With the hamburger in the bar there is less room, so neither the logo nor
     the phone pill can be allowed to wrap onto a second line. */
  header.elementor-location-header .syp23mwaj { white-space: nowrap; }

  /* On a phone the bar is only ~342px wide. Badge, hamburger and phone number
     all fit; the wordmark on top of them does not, and it was squeezing the
     badge to nothing. The badge carries the name anyway. */
  /* !important because Elementor's button base stylesheet loads after the kit
     and sets display:inline-flex at the same specificity */
  /* Phone button comes out on a phone: the floating call button already covers
     that job, and dropping it leaves room for the name beside the mark. */
  /* (pill hiding moved to the phone-only block below, 9/1) */
  header.elementor-location-header .seba07e1x img { flex-shrink: 0; }
}


@media (max-width: 1024px) {
  /* Phone pill drops whenever the hamburger is in play (phones AND tablets, 9/1);
     the floating call button covers the call action there. Burger sits hard right. */
  header.elementor-location-header .syp23mwaj { display: none !important; }
}

/* ---- Reviews (9/25) ----
   Three quotes in a row on desktop, no boxes or shadows; stacked on tablets
   and phones. The old swipe carousel and its dots are retired (the "Review
   carousel" snippet still runs, its dots are simply hidden). */
@media (min-width: 1025px) {
  .sgs1bbdlw { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 56px !important; align-items: start; }
}
@media (max-width: 1024px) {
  .sgs1bbdlw { display: flex !important; flex-direction: column !important; gap: 32px !important; }
}
.mm-dots { display: none !important; }


/* Floating Call now (Elementor Pro floating button) - restyled 9/1 to match the
   design system: Roboto instead of the widget default Poppins, the 12px card
   radius instead of the circle + half-pill, soft shadow. */
.e-contact-buttons .e-contact-buttons__chat-button,
.e-contact-buttons .e-contact-buttons__chat-button-text {
  font-family: var(--font-main), sans-serif !important;
  font-weight: 600 !important;
}
/* One solid rectangle: the container carries the green, the two inner spans go
   transparent so their mismatched heights (48px icon vs 40px text) cannot show
   as a stepped edge. */
.e-contact-buttons .e-contact-buttons__chat-button-icon-container,
.e-contact-buttons .e-contact-buttons__chat-button-text {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.e-contact-buttons .e-contact-buttons__chat-button-container {
  background: var(--accent) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  align-items: center;
  box-shadow: 0 8px 24px rgba(14, 26, 19, 0.18);
}
.e-contact-buttons .e-contact-buttons__chat-button-text {
  padding-left: 0 !important;
}


/* FAQ: no grey faq tap highlight on touch (9/1) - the open state is the feedback. */
.faq-q { -webkit-tap-highlight-color: transparent; }
.faq-q:focus { outline: none; }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }


/* Hover states START (9/25). Only on devices with a real mouse, so nothing
   changes color while someone scrolls on a phone. */
@media (hover: hover) and (pointer: fine) {
  .button-primary, .button-cta, .button-secondary, .button-secondary-alt,
  .form-submit, .nav-link, .footer-link, .spi94wy1g { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  .button-primary:hover, .form-submit:not(.form-submit-cta):hover,
  header.elementor-location-header .syp23mwaj:hover { background-color: #14532D !important; }
  .button-cta:hover, .form-submit-cta:hover { background-color: #9A3412 !important; }
  .button-secondary:hover { background-color: #EFEAE0 !important; }
  .button-secondary-alt:hover { background-color: #EFEAE0 !important; }
  .spi94wy1g:hover { background-color: #EFEAE0 !important; }
  .nav-link:hover { color: #0E1A13 !important; text-decoration: underline; text-underline-offset: 4px; }
  .footer-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}
/* Hover states END */

/* Carousel dot tap area START (9/25). Dots look the same; an invisible
   layer around each one makes the tap area 44px tall on phones. */
@media (max-width: 767px) {
  .mm-dots { margin-top: 0; padding: 10px 0; }
  .mm-dot { position: relative; }
  .mm-dot::before { content: ""; position: absolute; top: -18px; bottom: -18px; left: -4px; right: -4px; }
}
/* Carousel dot tap area END */


/* Site font START (9/25). Inter everywhere, including text the theme and
   scripts create (mobile menu, skip link). Elementor elements get it from
   the font-main variable through the default tag styles. */
body { font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
/* Site font END */

/* Phone links in text START (9/25): keep the number on one line and make it
   look like a link. */
.e-paragraph-base a[href^="tel:"] { white-space: nowrap; color: #0E1A13; text-decoration: underline; text-underline-offset: 3px; }
/* Phone links in text END */


/* Legal pages START (9/25). Terms and Privacy are plain WordPress pages, so
   this gives them the site's look: a light green title band, a readable text
   column, and the site's heading style. */
body.page-id-28 .site-main, body.page-id-29 .site-main { max-width: none; width: 100%; padding: 0; margin: 0; }
body.page-id-28 .page-header, body.page-id-29 .page-header { background: #F7F5F0; padding: 64px 16px 48px; margin: 0; }
body.page-id-28 .page-header .entry-title, body.page-id-29 .page-header .entry-title { max-width: 720px; margin: 0 auto; font-size: 44px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #0E1A13; }
body.page-id-28 .page-content, body.page-id-29 .page-content { max-width: 720px; margin: 0 auto; padding: 48px 16px 96px; }
body.page-id-28 .page-content h2, body.page-id-29 .page-content h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: #0E1A13; margin: 40px 0 12px; }
body.page-id-28 .page-content p, body.page-id-29 .page-content p,
body.page-id-28 .page-content li, body.page-id-29 .page-content li { font-size: 17px; line-height: 1.7; color: #4A5651; }
body.page-id-28 .page-content a, body.page-id-29 .page-content a { color: #0E1A13; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  body.page-id-28 .page-header, body.page-id-29 .page-header { padding: 40px 16px 32px; }
  body.page-id-28 .page-header .entry-title, body.page-id-29 .page-header .entry-title { font-size: 34px; }
  body.page-id-28 .page-content, body.page-id-29 .page-content { padding: 32px 16px 64px; }
  body.page-id-28 .page-content h2, body.page-id-29 .page-content h2 { font-size: 21px; margin-top: 32px; }
}
/* Legal pages END */

/* Mobile menu call button START (9/25) */
.mm-menu__call { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 16px 0 4px; border-radius: 999px; background: #166534; color: #FFFFFF !important; font-size: 17px; font-weight: 700; text-decoration: none; }
/* Mobile menu call button END */


/* Rounded stars START (9/25). The star text stays in the page for editing,
   but shows as five rounded Google-gold stars. Screen readers hear
   "Rated 5 out of 5" instead (snippet 352). */
.review-stars, .s13e5p76q {
  font-size: 0 !important; line-height: 0 !important; color: transparent !important;
  display: block; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'%23FBBC04'%20d%3D'M10.788%203.21c.448-1.077%201.976-1.077%202.424%200l2.082%205.006%205.404.434c1.164.093%201.636%201.545.749%202.305l-4.117%203.527%201.257%205.273c.271%201.136-.964%202.033-1.96%201.425L12%2018.354%207.373%2021.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434%202.082-5.005Z'%2F%3E%3C%2Fsvg%3E");
  background-repeat: space no-repeat; background-position: left center;
}
.review-stars { width: 104px !important; min-width: 104px; height: 20px; background-size: 20px 20px; }
.s13e5p76q { width: 86px !important; min-width: 86px; height: 16px; background-size: 16px 16px; }
/* Rounded stars END */

/* Dark hero START (9/25). Both page heroes use the hero-dark class (deep
   green background); this turns the text and buttons inside them light. */
.hero-dark h1 { color: #FFFFFF !important; }
.hero-dark .eyebrow { color: #B9C9BF !important; }
.hero-dark .eyebrow-cta { color: #FDBA74 !important; }
.hero-dark p { color: rgba(255,255,255,0.80) !important; }
.hero-dark p strong, .hero-dark p b, .hero-dark .sq3l22jvt, .hero-dark .subguqjoh { color: #FFFFFF !important; }
.hero-dark .button-primary { background-color: #FFFFFF !important; color: #123D24 !important; }
.hero-dark .button-secondary, .hero-dark .button-secondary-alt { background-color: transparent !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.55) !important; }
.hero-dark .sw3arbrh4 { border-color: rgba(255,255,255,0.18) !important; }
.hero-dark .sw3arbrh4 p { color: #FFFFFF !important; }
@media (hover: hover) and (pointer: fine) {
  .hero-dark .button-primary:hover { background-color: #EFEAE0 !important; }
  .hero-dark .button-secondary:hover, .hero-dark .button-secondary-alt:hover { background-color: rgba(255,255,255,0.10) !important; border-color: #FFFFFF !important; }
}
/* Dark hero END */

/* mm-reduced-motion: home fade-ins are skipped when the visitor asks for less motion */
@media (prefers-reduced-motion: reduce) { [data-id="66ge4y96"], [data-id="lbbwz61y"], [data-id="e5ylpa78"], [data-id="35e7211e"], [data-id="ldrlhq1b"], [data-id="gs1bbdlw"], [data-id="e4a4tqy2"], [data-id="gwsqad1b"], [data-id="mwq62ph9"], [data-id="q36lu7he"], [data-id="42ysqe2m"], [data-id="3wkzze23"] { opacity: 1 !important; transform: none !important; } }/* End custom CSS */