:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-primary: #16a34a; /* green */
  --color-primary-dark: #15803d;
  --color-leaf-light: #86efac;
  --color-border: #e5e7eb;
  --color-card-bg: #f9fafb;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 10px;
  --container: 1100px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

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

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
header {
  border-bottom: 1px solid var(--color-border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #111827; /* black text, replacing white-on-dark from original logo */
}
.brand-name {
  color: #111827;
  letter-spacing: 0.2px;
}
.brand-logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.brand-logo-fallback {
  display: none; /* shown only if logo.png fails to load */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.contact-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, transform 0.05s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--color-primary-dark);
}
.btn-outline {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline:hover {
  background: var(--color-card-bg);
}
.btn-sm {
  padding: 8px 12px;
  font-size: 0.9rem;
}
.btn-full {
  width: 100%;
}

/* Decorative tree/leaf SVGs (inline, no external files needed) */
.tree-decor {
  position: absolute;
  width: 140px;
  height: 140px;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path fill='%2316a34a' d='M32 2C18 10 6 22 6 36c0 14 12 24 26 24s26-10 26-24C58 22 46 10 32 2z' opacity='0.18'/><rect x='29' y='46' width='6' height='16' fill='%23166534' opacity='0.18'/></svg>");
}

/* Hero */
.hero {
  position: relative;
  padding: 48px 0 32px;
  background:
    radial-gradient(ellipse at top left, rgba(22,163,74,0.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(22,163,74,0.06), transparent 55%),
    linear-gradient(180deg, #f9fafb, #fff);
  overflow: hidden;
}
.hero .tree-decor.tree-left {
  top: -20px;
  left: -30px;
  transform: rotate(-15deg);
}
.hero .tree-decor.tree-right {
  bottom: -30px;
  right: -20px;
  transform: rotate(160deg) scaleX(-1);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}
.hero h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 12px;
}
.hero p {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin: 0 0 18px;
}
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.trust-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-size: 1.1rem;
}
.hero-image-placeholder {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 40%, #e6f9ea 100%);
  border: 1px solid #bbf7d0;
  display: grid;
  place-items: center;
  color: #15803d;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 20px;
}
.hero-image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><path fill='%2316a34a' opacity='0.15' d='M20 150 L20 90 Q10 80 20 65 Q10 55 22 45 Q15 35 28 28 Q30 15 40 10 Q50 15 52 28 Q65 35 58 45 Q70 55 60 65 Q70 80 60 90 L60 150 Z'/><path fill='%2316a34a' opacity='0.12' d='M140 150 L140 100 Q128 90 140 75 Q128 63 142 52 Q133 40 148 32 Q150 18 160 12 Q170 18 172 32 Q187 40 178 52 Q192 63 180 75 Q192 90 180 100 L180 150 Z'/><rect x='0' y='140' width='200' height='10' fill='%2316a34a' opacity='0.1'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
.hero-image-placeholder span {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.75);
  padding: 6px 12px;
  border-radius: 6px;
}

/* Sections */
.section {
  padding: 40px 0;
}
.section-alt {
  position: relative;
  background:
    linear-gradient(180deg, #f9fafb, #f9fafb),
    radial-gradient(circle at 90% 10%, rgba(22,163,74,0.05), transparent 40%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.section h2 {
  font-size: 1.6rem;
  margin: 0 0 10px;
}
.section-intro {
  color: var(--color-muted);
  margin: 0 0 22px;
  max-width: 70ch;
}

/* Leaf divider */
.leaf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-primary);
  opacity: 0.6;
  margin: 8px 0 28px;
  font-size: 1.1rem;
  user-select: none;
}
.leaf-divider::before,
.leaf-divider::after {
  content: "";
  height: 1px;
  width: 60px;
  background: var(--color-border);
}

/* Services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: var(--color-card-bg);
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.service-media {
  position: relative;
  height: 110px;
  background-size: cover;
  background-position: center;
}
.service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
}
.service-media-icon {
  position: absolute;
  bottom: 8px;
  left: 12px;
  z-index: 1;
  font-size: 1.4rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* Themed service header backgrounds (CSS-only, no external images) */
.service-media.fencing {
  background-color: #b98a5a;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.15) 0 10px, rgba(0,0,0,0.08) 10px 14px),
    linear-gradient(180deg, #c9986a, #8a6238);
}
.service-media.gutters {
  background-color: #64748b;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 4px, transparent 4px 10px),
    linear-gradient(180deg, #94a3b8, #475569);
}
.service-media.pressure-washing {
  background-color: #94a3b8;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0 4px, transparent 5px),
    radial-gradient(circle at 60% 60%, rgba(255,255,255,0.4) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.5) 0 3px, transparent 4px),
    linear-gradient(180deg, #cbd5e1, #7c8ba1);
}
.service-media.garden-maintenance {
  background-color: #4d7c0f;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #65a30d, #365314);
}
.service-media.clearances {
  background-color: #92400e;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.1) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #b45309, #78350f);
}
.service-media.hedge-care {
  background-color: #15803d;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.15) 0 6px, transparent 7px),
    radial-gradient(circle at 45% 60%, rgba(255,255,255,0.12) 0 5px, transparent 6px),
    radial-gradient(circle at 75% 30%, rgba(255,255,255,0.15) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,0.12) 0 5px, transparent 6px),
    linear-gradient(180deg, #16a34a, #14532d);
}

.service-card-body {
  padding: 16px;
}
.service-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.service-card p {
  margin: 0 0 10px;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.service-card ul {
  margin: 0 0 12px 18px;
  padding: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.service-card li {
  margin-bottom: 4px;
}

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.step {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.step h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.step p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}

/* Reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.review-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.review-stars {
  color: #f59e0b;
  margin-bottom: 6px;
}
.review-text {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.review-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Quote form */
.quote-section {
  position: relative;
  background: linear-gradient(180deg, #fff, #f0fdf4);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}
.quote-section .tree-decor {
  bottom: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  opacity: 0.12;
}
.form-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-md);
  max-width: 720px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-group {
  display: grid;
  gap: 6px;
}
.form-group.full {
  grid-column: 1 / -1;
}
label {
  font-weight: 600;
  font-size: 0.9rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.95rem;
  background: #fff;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
.help-text {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-muted);
}
.checkbox-group input {
  margin-top: 3px;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}
.about-text p {
  margin: 0 0 12px;
  color: var(--color-muted);
}
.contact-box {
  background: linear-gradient(180deg, #fff, #f0fdf4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.contact-box h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.contact-box p {
  margin: 0 0 10px;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 0.95rem;
}
.contact-list li {
  margin-bottom: 6px;
}
.contact-box-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Footer */
footer {
  position: relative;
  border-top: 1px solid var(--color-border);
  padding: 24px 0 40px;
  font-size: 0.9rem;
  color: var(--color-muted);
  background: linear-gradient(180deg, #fff, #f9fafb);
}
footer::before {
  content: "🌿 🌳 🌿 🌳 🌿 🌳 🌿 🌳 🌿 🌳 🌿 🌳 🌿 🌳 🌿 🌳";
  display: block;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 4px;
  opacity: 0.35;
  margin-bottom: 12px;
  overflow: hidden;
  white-space: nowrap;
}

/* Mobile bottom bar */
.mobile-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  padding: 8px 12px;
  display: none;
  z-index: 40;
}
.mobile-bottom-bar .bar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.mobile-bottom-bar .btn {
  justify-content: center;
  font-size: 0.9rem;
  padding: 10px 8px;
}

/* Responsive */
@media (max-width: 900px) {
  .hero-inner,
  .about-grid {
    grid-template-columns: 1fr;
  }
  .services-grid,
  .steps,
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .contact-links {
    display: none;
  }
  .mobile-bottom-bar {
    display: block;
  }
  body {
    padding-bottom: 64px;
  }
  .hero {
    padding-top: 28px;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .tree-decor {
    width: 90px;
    height: 90px;
  }
}