@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

:root {
  --green-900: #121212;
  --green-800: #1e1e1e;
  --green-700: #333333;
  --green-600: #4d4d4d;
  --green-100: #ececec;
  --amber-600: #b3b3b3;
  --amber-700: #999999;
  --sun: #333333;
  --cream: #eeeeee;
  --coral: #2b2b2b;
  --coral-100: #d9d9d9;
  --teal: #262626;
  --teal-100: #dedede;
  --ink: #141414;
  --ink-secondary: #5c5c5c;
  --line: #d9d9d9;
  --surface: #ffffff;
  --bg: #f7f7f6;
  --cta-green: #1c8a3c;
  --cta-green-dark: #156b2f;
  --cta-green-100: #e3f3e6;
  /* True gold/amber accent for the header contact strip - kept separate from
     --amber-600/700 above, which (despite the name) are actually grays used
     elsewhere and shouldn't change. */
  --gold-accent: #d9a441;
  --gold-accent-dark: #b5822c;
  --price-red: #c1272d;
  --price-red-dark: #a11f24;
  --radius: 8px;
  --font-display: 'Oswald', Arial Narrow, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--cta-green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, .logo, .service-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: bold;
  font-family: var(--font-display);
  color: var(--green-700);
  margin: 0 0 8px;
}

/* Bold gold contact strip - makes the phone/email a real statement instead of
   a quiet gray line, and gives the header one confident color pairing (gold +
   dark green) instead of the old gray-bar-over-white-nav look. */
.topbar {
  background: var(--gold-accent);
  color: #2b1d00;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.topbar a { color: #2b1d00; }
.topbar a:hover { text-decoration: underline; }
.topbar-contact { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.topbar .social-links { display: flex; gap: 14px; }
.topbar .social-links a { font-size: 14px; font-weight: 600; }
@media (max-width: 640px) {
  .topbar { font-size: 15px; padding: 12px 16px; }
}

/* Nav bar - solid dark green (was white), with a torn/jagged bottom edge to
   match the wave-dividers used throughout the rest of the site. The strip is
   a decorative ::after (not a clip-path on the header itself) so it never
   interferes with the dropdown menus. */
.site-header {
  background: var(--cta-green-dark);
  border-bottom: none;
  padding: 14px 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: var(--cta-green-dark);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 97.5% 100%, 95% 78%, 92.5% 100%, 90% 78%, 87.5% 100%, 85% 78%, 82.5% 100%, 80% 78%, 77.5% 100%, 75% 78%, 72.5% 100%, 70% 78%, 67.5% 100%, 65% 78%, 62.5% 100%, 60% 78%, 57.5% 100%, 55% 78%, 52.5% 100%, 50% 78%, 47.5% 100%, 45% 78%, 42.5% 100%, 40% 78%, 37.5% 100%, 35% 78%, 32.5% 100%, 30% 78%, 27.5% 100%, 25% 78%, 22.5% 100%, 20% 78%, 17.5% 100%, 15% 78%, 12.5% 100%, 10% 78%, 7.5% 100%, 5% 78%, 2.5% 100%, 0% 78%);
  pointer-events: none;
  z-index: 1;
}
.logo { font-size: 22px; font-weight: 700; color: #fff; }
.main-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.main-nav > a, .dropdown > a { font-size: 15px; color: #fff; font-weight: bold; }
.main-nav > a:hover, .dropdown > a:hover { text-decoration: underline; }
.nav-cta {
  background: var(--gold-accent);
  color: #2b1d00 !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.nav-cta:hover { background: var(--gold-accent-dark); text-decoration: none; box-shadow: 0 4px 18px rgba(0,0,0,0.25); }

.dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 10;
}
.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-weight: normal;
  color: var(--ink);
}
.dropdown-menu a:hover { background: var(--cta-green-100); text-decoration: none; }
@media (min-width: 901px) {
  .dropdown:hover .dropdown-menu { display: block; }
}

/* Mobile-only bits: the gold "Get a quote" pill that replaces email/social on the
   topbar, and the hamburger button that replaces the inline nav. Both are hidden
   on desktop and only switched on inside the max-width:900px block below. */
.topbar-cta { display: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav-extra { display: none; }

/* Mobile header: gold bar becomes phone + "Get a quote" pill, green bar becomes
   logo + hamburger, and the full nav tucks into a slide-down panel underneath -
   modeled on the Augusta Lawn Care reference the client shared. */
@media (max-width: 900px) {
  .topbar-contact a[href^="mailto"] { display: none; }
  .topbar .social-links { display: none; }
  .topbar { justify-content: space-between; }
  .topbar-cta {
    display: inline-block;
    background: var(--cta-green-dark);
    color: #fff !important;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
  }

  .site-header { position: relative; }
  .nav-toggle { display: inline-flex; }

  .main-nav {
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }
  .main-nav.open { max-height: 640px; opacity: 1; margin-top: 14px; }
  .main-nav > a, .main-nav > .dropdown { width: 100%; }
  .main-nav > a, .dropdown > a {
    display: block;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .nav-cta { display: inline-block; margin: 14px 0 4px; text-align: center; }
  .dropdown-menu {
    display: none;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 16px;
    min-width: 0;
  }
  .dropdown.open .dropdown-menu { display: block; }
  .dropdown-menu a { color: rgba(255,255,255,0.8); padding: 8px 0; }
  .dropdown-menu a:hover { background: none; color: #fff; }
  .mobile-nav-extra {
    display: block;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 6px;
    padding-top: 14px;
  }
  .mobile-nav-extra a { display: block; color: #fff; padding: 6px 0; }
  .mobile-nav-extra .social-links { display: flex; gap: 16px; margin-top: 6px; }
  .mobile-nav-extra .social-links a { padding: 0; }
}

/* main itself is full width with no constraint. Pages/sections that should read as
   a comfortable centered column opt into ".container". Color-block sections that
   should span the whole browser width (hero, trust band, testimonials, etc.) are
   left as plain full-width children - no viewport-relative positioning tricks,
   which break once nested inside anything narrower than <body>. */
main { display: block; width: 100%; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* Hero split: headline left, quote form right */
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
  margin: 24px 0 32px;
  background: var(--green-100);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.hero-split::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  background: var(--green-700);
  opacity: 0.08;
  border-radius: 50%;
}
.hero-split h1 { font-size: 34px; color: var(--green-900); margin: 0 0 12px; }
.hero-split .hero-sub { color: var(--ink-secondary); font-size: 16px; margin-bottom: 20px; }
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-align: center;
}
.btn-primary { background: var(--gold-accent); color: #2b1d00 !important; box-shadow: 0 1px 6px rgba(0,0,0,0.12); transition: box-shadow 0.2s ease, background 0.2s ease; }
.btn-primary:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: var(--gold-accent-dark); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--green-900) !important; border: 2px solid var(--green-700); }
.btn-secondary:hover { background: #fff; text-decoration: none; }

.hero-video {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video .media-placeholder-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.hero-video-content {
  position: relative;
  z-index: 2;
  background: rgba(10, 10, 10, 0.85);
  color: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  text-align: center;
  max-width: 600px;
  margin: 24px;
}
.hero-video-content .eyebrow { color: #d9d9d9; }
.hero-video-content h1 { color: #fff; margin: 0 0 12px; }
.hero-video-content .hero-sub { color: #e6e6e6; }
.hero-video-content .hero-cta-row { justify-content: center; }
.hero-video-content .btn-secondary { border-color: #fff; color: #fff !important; }
.hero-video-content .btn-secondary:hover { background: rgba(255,255,255,0.15); }
@media (max-width: 640px) {
  .hero-video { min-height: 380px; }
  .hero-video-content { padding: 22px 20px; }
}

/* Torn-edge divider used at every full-bleed color transition on the homepage -
   a jagged "ripped paper" line plus a few paint-fleck dots, instead of a flat
   or smoothly-curved seam. Fill color is set per-instance via inline style;
   the same path/dots are reused everywhere so every transition reads as one
   consistent pattern. */
.wave-divider {
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 76px;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 640px) {
  .wave-divider { height: 48px; }
}
/* Homepage hero video only - taller box = less vertical crop from object-fit:cover,
   PLUS the transparent/left-aligned treatment. Every other page's hero-video keeps
   the original centered boxed style above, untouched. */
.hero-video-home { min-height: 780px; background: #000; justify-content: flex-start; }
.hero-video-lawncare { min-height: 610px; background: #000; }
/* Landscaping hero photo has the crew member's face near the top of the frame -
   taller box + shifted object-position keeps the face in view instead of cropping it out. */
.hero-video-landscaping { min-height: 620px; background: #000; }
.media-photo-landscaping { object-position: center 12%; }
@media (max-width: 900px) {
  .hero-video-home { min-height: 560px; }
  .hero-video-lawncare { min-height: 470px; }
  .hero-video-landscaping { min-height: 460px; }
}
.hero-video-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(6,6,6,0.82) 0%, rgba(6,6,6,0.6) 32%, rgba(6,6,6,0.22) 60%, rgba(6,6,6,0) 82%);
}
.hero-video-home .hero-video-content {
  background: none;
  border-radius: 0;
  padding: 0 5vw;
  text-align: left;
  max-width: 560px;
  margin: 0;
}
.hero-video-home .hero-video-content .eyebrow { color: #e0e0e0; }
.hero-video-home .hero-video-content h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.08; }
.hero-video-home .hero-video-content .hero-cta-row { justify-content: flex-start; }
@media (max-width: 640px) {
  .hero-video-home::before {
    background: linear-gradient(180deg, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0.78) 55%, rgba(6,6,6,0.85) 100%);
  }
  .hero-video-home .hero-video-content { padding: 0 6vw; max-width: 100%; }
}


.page-hero { text-align: center; padding: 48px 16px 24px; }
.page-hero h1 { font-size: 28px; color: var(--green-900); margin-bottom: 8px; }
.page-hero p { color: var(--ink-secondary); font-size: 16px; }

/* Themed to match the homepage's dark-green instant-quote treatment instead
   of a plain white box, so the careers application form reads as part of the
   same visual language as the rest of the site. */
.quote-card {
  background: var(--cta-green-dark);
  border: none;
  border-radius: 12px;
  padding: 24px;
  max-width: 640px;
  margin: 0 auto 40px;
}
.hero-split .quote-card { margin: 0; }
.quote-card h2 { margin-top: 0; color: #fff; font-size: 19px; }
.quote-card .quote-note { font-size: 12px; color: rgba(255,255,255,0.75); margin: -8px 0 14px; }
.quote-card .form-label { color: rgba(255,255,255,0.82); }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.form-row input { flex: 1; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
}
textarea { resize: none; }

.availability-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 13px;
}
.availability-table th, .availability-table td {
  border: 1px solid var(--line);
  padding: 8px 6px;
  text-align: center;
}
.availability-table th { background: var(--bg); color: var(--ink-secondary); font-weight: normal; }
.availability-table td.avail-day { text-align: left; font-weight: bold; color: var(--ink); }
.availability-table input[type="checkbox"] { width: auto; margin: 0; }
.form-label { font-size: 13px; color: var(--ink-secondary); margin: 4px 0; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; margin-bottom: 12px; }
.checkbox-row label { display: flex; align-items: center; gap: 6px; }
.checkbox-row input { width: auto; margin: 0; }
button {
  background: var(--gold-accent);
  color: #2b1d00;
  border: none;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  width: 100%;
}
/* Gold-on-gold-darker hover on purpose - it's a distinct enough shade shift
   that it can never match whatever green section the button happens to sit
   on (the old hover color was identical to the quote section's background,
   so the submit button effectively vanished on hover). */
button:hover { background: var(--gold-accent-dark); }
button:disabled, button:disabled:hover {
  background: #b8b8b8;
  color: #6e6e6e;
  cursor: not-allowed;
}

/* Trust band - warm, personal tone instead of generic trust badges.
   Shares the quote section's green (no divider between them - it's a
   continuation of the same zone, not a new "slide"). */
.trust-band {
  background: var(--cta-green-dark);
  padding: 40px 32px 72px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.trust-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.trust-item .trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.9);
  color: var(--cta-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.trust-item h3 {
  font-size: 15px;
  color: #fff;
  margin: 0 0 4px;
}
.trust-item p { font-size: 13px; color: rgba(255,255,255,0.78); margin: 0; }

.about-blurb, .services-overview, .faq, .service-detail, .local-links, .why-choose {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.about-blurb h2, .services-overview h2, .faq h2, .local-links h2, .why-choose h2 {
  color: var(--green-900);
  font-size: 22px;
  margin-bottom: 4px;
}
/* Homepage only: why-choose/services/faq share one uninterrupted light zone,
   no hairline dividers between them. */
.services-overview, .faq { border-top: none; }
.services-overview, .faq { text-align: center; }
.services-overview h2, .faq h2 { text-align: center; }
.faq { max-width: 900px; margin: 0 auto; }
.section-note { text-align: center; color: var(--ink-secondary); font-size: 13px; margin-top: 0; }

.testimonials {
  background: var(--green-900);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 44px 32px 64px;
  margin-top: 0;
  margin-bottom: 0;
}
/* Large faded photo filling the empty side space on wide screens, instead of a flat
   color band - sits behind the heading/widget, blended into the dark background. */
.testimonials-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.16;
  filter: grayscale(70%);
  z-index: -1;
  pointer-events: none;
}
.testimonials h2 { color: #fff; font-size: 22px; margin-bottom: 4px; }
.testimonials .section-note { color: #b8b8b8; }

.testimonial-grid, .service-grid-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
  text-align: left;
}

/* Homepage "Our services" - fixed 3 columns x 2 rows, all cards the same size */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
  text-align: left;
  align-items: stretch;
}
@media (max-width: 1150px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-grid .service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
  min-width: 0;
}
.service-grid .service-card .media-placeholder-card {
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
}
.service-grid .service-card h3 { font-size: 19px; }
.service-grid .service-card p { font-size: 15px; }
@media (max-width: 900px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
}
.testimonials .testimonial-grid { max-width: 1100px; margin-left: auto; margin-right: auto; margin-top: 16px; }
.testimonial-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 14px;
}
.testimonials .testimonial-card p { color: #e6e6e6; margin: 0 0 8px; }
.google-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.google-badge .g-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #1a1a1a;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.google-badge .g-meta { font-size: 11px; color: #999999; }
.stars { color: var(--sun); margin-bottom: 6px; }

.service-card {
  background: var(--surface);
  border: 3px solid var(--green-700);
  border-radius: 12px;
  padding: 16px;
  color: var(--ink);
  display: block;
}
.service-card:hover { border-color: var(--cta-green); text-decoration: none; }
.service-card .service-icon { font-size: 26px; margin-bottom: 6px; display: block; }
.service-card h3 { color: var(--green-900); margin: 0 0 6px; }
.service-card p { margin: 0; font-size: 14px; color: var(--ink-secondary); }

.why-choose {
  text-align: center;
  background: var(--cream);
  border-radius: 16px;
  padding: 32px 24px;
  border-top: none;
  max-width: 1000px;
  margin: 0 auto 8px;
}
/* Homepage only: no boxed card, just flows into the shared light zone */
.why-choose.why-choose-flush {
  background: none;
  border-radius: 0;
  padding: 28px 0;
  max-width: none;
  margin: 0;
}
.why-choose .why-copy { max-width: 720px; margin: 12px auto 0; text-align: left; }
.why-choose .why-copy p { margin: 0 0 12px; }

.faq-item { border-bottom: 1px solid var(--line); text-align: left; }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  padding: 14px 4px;
  font-size: 15px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.faq-question:hover { background: none; color: var(--cta-green); }
.faq-icon { color: var(--green-700); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding-bottom 0.4s ease;
}
.faq-item.open .faq-answer { max-height: 300px; padding-bottom: 12px; }
.faq-answer p { margin: 0; color: var(--ink-secondary); font-size: 14px; }

.callout {
  background: var(--green-100);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--green-900);
  margin: 16px 0;
}

.bullet-list { columns: 2; gap: 24px; padding-left: 20px; }
.bullet-list li { margin-bottom: 6px; }

.link-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.link-row a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
}

.area-select-wrap { max-width: 400px; margin: 0 auto 24px; text-align: center; }

.cta-banner {
  background: var(--cta-green-dark);
  color: #fff;
  text-align: center;
  padding: 108px 32px 72px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 640px) {
  .cta-banner { padding-top: 72px; }
}
.cta-banner h2 { color: #fff; margin: 0 0 8px; font-size: 24px; max-width: 700px; margin-left: auto; margin-right: auto; }
.cta-banner p { color: rgba(255,255,255,0.85); margin: 0 0 18px; max-width: 700px; margin-left: auto; margin-right: auto; }
.cta-banner .btn-primary { background: var(--gold-accent); color: #2b1d00 !important; }
.cta-banner .btn-primary:hover { background: var(--gold-accent-dark); }

/* Top-edge counterpart of .wave-divider, used where a section needs the torn
   edge blending in from the section ABOVE it rather than into the one below. */
.wave-divider-top { top: -2px; bottom: auto; transform: scaleY(-1); }

.site-footer {
  background: var(--green-900);
  color: #d6d6d6;
  margin-top: 40px;
  padding: 32px 24px 16px;
}
/* Homepage only: cta-banner's wave already completes the amber->dark transition,
   so don't add the usual top margin on the footer that follows it. */
.site-footer-flush { margin-top: 0; }
.footer-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  text-align: center;
}
.footer-grid > div { flex: 0 1 260px; }
.footer-brand { color: #fff; font-weight: bold; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.footer-heading { color: #fff; font-weight: bold; margin-bottom: 6px; }
.site-footer a { color: #d6d6d6; display: block; margin-bottom: 4px; }
.site-footer a:hover { color: #fff; }
.footer-copy { text-align: center; font-size: 12px; margin-top: 16px; color: #9a9a9a; }
.footer-col-brand { display: flex; flex-direction: column; align-items: center; }
.footer-legal-line { margin-top: 12px; }
.footer-legal-line a { display: inline; margin: 0 4px; }
.footer-contact-label { color: #fff; font-weight: bold; margin: 10px 0 2px; }
.footer-contact-label:first-of-type { margin-top: 0; }

/* Instant quote + pricing flow */
.instant-quote { padding: 8px 0 36px; }
.quote-flow {
  max-width: 780px;
  margin: 20px auto 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}

/* Homepage-only: the quote section is a full-bleed green zone (flows straight
   out of the hero, straight into the trust band below - no card, no seam) so
   the form reads as part of the page instead of a boxed widget dropped on it. */
.instant-quote-hero {
  background: var(--cta-green-dark);
  padding: 64px 0 40px;
  position: relative;
}
/* Pages that add their own wave-divider-top inside this section (quote.html)
   need extra top clearance so the heading doesn't sit under the torn teeth. */
.instant-quote-hero:has(.wave-divider-top) { padding-top: 96px; }
.instant-quote-hero .eyebrow { color: rgba(255,255,255,0.85); }
.instant-quote-hero h2 { color: #fff; }
.instant-quote-hero .section-note { color: rgba(255,255,255,0.75); }
.instant-quote-hero .form-label { color: rgba(255,255,255,0.82); }
.instant-quote-hero .pricing-prompt { color: rgba(255,255,255,0.75); }
.instant-quote-hero .pricing-note { color: rgba(255,255,255,0.7); }
.instant-quote-hero .lawn-care-panel,
.instant-quote-hero .other-panel { border-left-color: rgba(255,255,255,0.4); }
.instant-quote-hero .pricing-panel { border-top-color: rgba(255,255,255,0.25); }
/* The path/size/price selection tiles were transparent, so their gray sub-text
   (path-sub, size-sub, price-includes, price-original) was unreadable against
   the green section. Giving them a real white fill restores the contrast
   their existing dark text colors were designed for. */
.instant-quote-hero .path-card,
.instant-quote-hero .size-card,
.instant-quote-hero .price-card {
  background: #fff;
}
.instant-quote-hero .quote-flow {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .instant-quote-hero { padding: 44px 0 32px; }
}
.form-note {
  font-size: 12px;
  color: var(--ink-secondary);
  margin: 6px 0 0;
}
.lawn-care-panel, .other-panel {
  border-left: 3px solid var(--green-700);
  padding-left: 16px;
  margin: 16px 0 20px;
}

.path-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 8px 0 28px;
}
.path-card {
  display: block;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.path-card input[type="checkbox"] { width: auto; margin: 0 0 8px; }
.path-card:hover { border-color: var(--cta-green); }
.path-card.selected { border-color: var(--cta-green); background: var(--cta-green-100); }
.path-card .path-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green-900);
  margin: 0 0 4px;
  font-size: 15px;
}
.path-card .path-sub { font-size: 12px; color: var(--ink-secondary); margin: 0; }

.radio-pill-row { display: flex; gap: 18px; margin-bottom: 12px; }
.radio-pill-row label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.radio-pill-row input { width: auto; margin: 0; }

.size-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 8px 0 24px;
}
.size-card {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 10px 10px 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  overflow: visible;
}
.size-card:hover { border-color: var(--cta-green); }
.size-card.selected { border-color: var(--cta-green); background: var(--cta-green-100); }
.size-card .size-name { font-weight: bold; margin: 6px 0 2px; font-size: 14px; line-height: 1.3; }
.size-card .size-sub { font-size: 11px; color: var(--ink-secondary); margin: 0; line-height: 1.4; }

.pricing-prompt {
  text-align: center;
  font-size: 13px;
  color: var(--ink-secondary);
  font-style: italic;
  margin: 14px 0 0;
}
.pricing-panel {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 8px;
}
.pricing-panel-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pricing-panel-head h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--green-900);
  font-size: 18px;
  margin: 0;
  text-align: center;
}
.offer-badge {
  background: var(--price-red);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 999px;
}
.pricing-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-secondary);
  font-style: italic;
  margin: 6px 0 18px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.price-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.price-card-selectable {
  cursor: pointer;
  border-width: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.price-card-selectable:hover { border-color: var(--cta-green); }
.price-card-selectable.selected { border-color: var(--cta-green); background: var(--cta-green-100); }
.price-plan {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--green-900);
  margin: 0 0 8px;
}
.price-includes {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ink-secondary);
  text-align: left;
}
.price-includes li { padding: 2px 0; }
.price-includes li::before { content: "\2713  "; color: var(--cta-green); }
.price-original {
  text-decoration: line-through;
  color: var(--ink-secondary);
  font-size: 14px;
  margin: 0;
}
.price-discounted {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--price-red);
  margin: 2px 0 0;
}
.price-unit { font-size: 12px; color: var(--ink-secondary); font-family: Arial, sans-serif; text-transform: none; }
.pricing-custom-note {
  text-align: center;
  color: var(--ink-secondary);
  font-size: 14px;
  padding: 20px 0;
}

@media (max-width: 700px) {
  .size-select-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
}

/* Service detail page - description left, instant quote form right */
.service-page-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.service-info .service-detail,
.service-info .local-links {
  padding: 0 0 24px;
  border-top: none;
}
.service-info .local-links { padding-bottom: 0; }
/* Themed to match the homepage's dark-green instant-quote treatment instead
   of a plain white box. */
.service-quote {
  background: var(--cta-green-dark);
  border: none;
  border-radius: 16px;
  padding: 8px 4px 4px;
}
.service-quote .eyebrow { color: rgba(255,255,255,0.85); }
.service-quote h2 { color: #fff; }
.service-quote .section-note { color: rgba(255,255,255,0.75); }
.service-quote .form-label { color: rgba(255,255,255,0.82); }
.service-quote .pricing-prompt { color: rgba(255,255,255,0.75); }
.service-quote .pricing-note { color: rgba(255,255,255,0.7); }
.service-quote .lawn-care-panel,
.service-quote .other-panel { border-left-color: rgba(255,255,255,0.4); }
.service-quote .pricing-panel { border-top-color: rgba(255,255,255,0.25); }
.service-quote .path-card,
.service-quote .size-card,
.service-quote .price-card {
  background: #fff;
}
.service-quote .instant-quote { padding: 4px 0 20px; }
.service-quote .quote-flow { max-width: 100%; margin-top: 12px; background: none; border: none; padding: 20px; }
.service-quote .size-select-grid { grid-template-columns: repeat(2, 1fr); }
.service-quote .price-grid { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .service-page-grid { grid-template-columns: 1fr; }
}

/* Customer-friendly policies (mowing/lawn care pages) */
.policies-section {
  padding: 28px 0 36px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.policies-section h2 {
  color: var(--green-900);
  font-size: 22px;
  margin-bottom: 16px;
}
.policies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  text-align: left;
}
.policy-card {
  background: var(--green-100);
  border-radius: 12px;
  padding: 22px;
}
.policy-card h3 {
  color: var(--green-900);
  font-size: 17px;
  margin: 0 0 8px;
}
.policy-card p { margin: 0; font-size: 14px; color: var(--ink-secondary); }
@media (max-width: 700px) {
  .policies-grid { grid-template-columns: 1fr; }
}

/* Stages of success - career growth path (careers page) */
.stages-of-success {
  background: var(--green-900);
  color: #fff;
  padding: 44px 32px;
  margin: 24px 0 32px;
}
.stages-of-success .stages-inner { max-width: 1200px; margin: 0 auto; }
.stages-of-success h2 { color: #fff; text-align: center; margin-bottom: 4px; }
.stages-of-success .section-note { color: #b8b8b8; }
.stages-track-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--amber-600);
  text-align: center;
  margin: 28px 0 20px;
  font-size: 16px;
  letter-spacing: 1px;
}
.stages-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 8px;
}
.stage-step { width: 130px; text-align: center; padding: 0 6px; }
.stage-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--amber-600);
  box-shadow: inset 0 0 0 3px var(--green-700);
  color: var(--green-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.stage-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 4px;
  color: #fff;
  letter-spacing: 0.5px;
  font-family: var(--font-display);
}
.stage-desc { font-size: 11.5px; color: #c9c9c9; margin: 0; line-height: 1.4; }
.stage-optional { font-size: 10px; color: var(--amber-600); font-style: italic; display: block; margin-top: 2px; }

/* Media placeholders - swap these for real photos/video later */
.media-placeholder {
  background: repeating-linear-gradient(135deg, #ececec, #ececec 12px, #fff 12px, #fff 24px);
  border: 2px dashed var(--green-700);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-secondary);
  font-size: 12px;
  padding: 10px;
  width: 100%;
}
.media-placeholder .mp-inner { max-width: 220px; }
.media-placeholder .mp-icon { color: var(--green-700); margin: 0 auto 6px; display: block; }
.media-placeholder-hero { aspect-ratio: 21 / 6; margin: 20px 0; font-size: 14px; }
.media-placeholder-hero .mp-inner { max-width: 420px; }
.media-placeholder-card { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.media-placeholder-wide { aspect-ratio: 16 / 9; max-width: 480px; margin: 16px auto 0; }
.logo-img { height: 42px; width: auto; display: block; }
.footer-logo-img {
  height: 26px;
  width: auto;
  margin-right: 8px;
  vertical-align: middle;
}

@media (max-width: 800px) {
  .hero-split { grid-template-columns: 1fr; }
  .feature-strip { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-row { flex-direction: column; }
  .bullet-list { columns: 1; }
  .media-placeholder-hero { aspect-ratio: 4 / 3; }
}

/* Scroll-triggered reveal animation - elements slide/fade into place as the page scrolls,
   applied automatically sitewide by the script in page(). */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}
.reveal.reveal-left { transform: translateX(-32px); }
.reveal.reveal-right { transform: translateX(32px); }
.reveal.in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-left, .reveal.reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



/* Real media (photos/video) — parallel to .media-placeholder but no dashed border/bg */
.media-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}
.media-photo-card { aspect-ratio: 4 / 3; margin-bottom: 10px; }
.media-photo-wide { aspect-ratio: 16 / 9; max-width: 480px; margin: 16px auto 0; }
/* Homepage "why choose us" photo only - about.html keeps the smaller default size. */
.why-choose .media-photo-wide { max-width: 100%; }
.why-choose .media-photo-wide { border: 3px solid var(--green-700); }
.service-grid .service-card .media-photo-card { aspect-ratio: 4 / 3; margin-bottom: 14px; }
/* Homepage service cards only: wrap the photo so we can lay a gradient wash
   across the bottom, tying the photo into the card instead of a hard photo/text seam. */
.service-grid .service-card .card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
}
.service-grid .service-card .card-media .media-photo-card {
  margin-bottom: 0;
  height: 100%;
  border-radius: 0;
}
.service-grid .service-card .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,18,18,0) 50%, rgba(18,18,18,0.68) 100%);
  pointer-events: none;
}
.hero-video .media-photo-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
/* City-name graphic assets have their own black background - letterbox on black instead of cropping */
.media-photo-area { object-fit: contain; background: #000; }
/* Before/after comparison graphic has its own light background and needs both halves visible - never crop it */
.media-photo-fit { object-fit: contain; background: #f2f2f2; }

/* Floating "Get a quote" button - homepage only, fades in once you scroll past the hero */
.floating-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 500;
  background: var(--gold-accent);
  color: #2b1d00 !important;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-cta:hover { background: var(--gold-accent-dark); text-decoration: none; }
@media (max-width: 640px) {
  .floating-cta { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 13px; }
}

/* Smooth in-page scrolling for anchor jumps (nav, floating CTA -> #instant-quote) */
html { scroll-behavior: smooth; }

/* Top-of-page scroll progress bar - homepage only, gives continuous feedback
   as you move through the page instead of it feeling like discrete slides. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cta-green), var(--amber-600));
  z-index: 1000;
  pointer-events: none;
}

/* Ambient background aura removed sitewide - it was producing uneven/gradient-
   looking patches of color within the trust band, testimonials, and CTA banner
   sections instead of one flat, consistent color per section. */
.trust-band-grid,
.testimonials h2, .testimonials .section-note, .testimonials .testimonial-grid,
.cta-banner h2, .cta-banner p, .cta-banner .btn-primary {
  position: relative;
  z-index: 1;
}

/* Hero video gets subtle parallax + slow zoom via JS (transform set inline);
   this just gives it a stable base to animate from. */
.hero-video-home .media-photo-hero { will-change: transform; }
.testimonials-bg { will-change: transform; }

/* Drifting particles inside the hero - small, quiet, organic motion (fits the
   lawncare theme without being literal grass clippings). */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-particles span {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float linear infinite;
}
.hero-particles span:nth-child(1) { left: 8%;  width: 5px; height: 5px; animation-duration: 15s; animation-delay: 0s; }
.hero-particles span:nth-child(2) { left: 24%; width: 7px; height: 7px; animation-duration: 19s; animation-delay: 3s; }
.hero-particles span:nth-child(3) { left: 47%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: 6s; }
.hero-particles span:nth-child(4) { left: 68%; width: 6px; height: 6px; animation-duration: 21s; animation-delay: 2s; }
.hero-particles span:nth-child(5) { left: 85%; width: 5px; height: 5px; animation-duration: 17s; animation-delay: 8s; }
@keyframes particle-float {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.55; }
  88% { opacity: 0.35; }
  100% { transform: translateY(-780px) translateX(26px); opacity: 0; }
}

/* Gentle pulse on the main CTAs so the eye is drawn to them without a hard flash */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 1px 6px rgba(28,138,60,0.10), 0 0 0 0 rgba(28,138,60,0.35); }
  50% { box-shadow: 0 1px 6px rgba(28,138,60,0.10), 0 0 0 9px rgba(28,138,60,0); }
}
.hero-video-content .btn-primary, .cta-banner .btn-primary {
  animation: cta-pulse 2.8s ease-in-out infinite;
}
.hero-video-content .btn-primary:hover, .cta-banner .btn-primary:hover { animation-play-state: paused; }

/* Reveal variant: scale in rather than just slide up, used for the size/price
   selection cards so choosing a plan feels like a more tactile moment. */
.reveal-scale { transform: translateY(18px) scale(0.94); }
.reveal-scale.in-view { transform: none; }

/* Service card tilt + media zoom on hover (JS supplies the rotateX/rotateY,
   this just sets up the transition and the image zoom half). */
.service-grid .service-card {
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.28, 1), box-shadow 0.35s ease, border-color 0.2s ease;
  will-change: transform;
}
.service-grid .service-card:hover { box-shadow: 0 18px 36px rgba(0,0,0,0.14); }
.service-grid .service-card .card-media img { transition: transform 0.5s ease, opacity 0.65s ease; }
.service-grid .service-card:hover .card-media img { transform: scale(1.08); }
/* Let the reveal-scale entrance animation win over the hover-zoom transition's
   scale value while the card is still animating in. */
.service-grid .service-card .card-media img.reveal { transform: translateY(18px) scale(0.94); }
.service-grid .service-card .card-media img.reveal.in-view { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-particles,
  .hero-video-content .btn-primary, .cta-banner .btn-primary {
    animation: none !important;
  }
  .hero-particles { display: none; }
  .service-grid .service-card { transition: none; }
}