:root{
  --brand:#2b8a3e;        /* primary green */
  --brand-dk:#1f6b2f;     /* hover/active */
  --accent:#0f6;          /* subtle highlight line if needed */
  --bg:#f7f8f9;
  --card:#fff;
  --text:#111;
  --muted:#666;
  --border:#e6e7ea;
  --link:#145a2f;         /* darker green for AA contrast on white */
  --link-visited:#0f4625; /* slightly darker for visited state */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

a{
  color:var(--link);
  text-decoration:underline;         /* fixes "links rely on color" */
}
a:visited{ color:var(--link-visited); }
a:hover{ text-decoration:underline; } /* keep underline on hover */

.wrapper{max-width:1040px;margin:0 auto;padding:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}

.site-topbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
}
/* Site name above nav */
.site-topbar .wrapper{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.site-name{
  color: var(--brand);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .2px;
  margin: 2px 0 0 0;
}
/* Phone link under site name */
.site-header-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.phone-link{
  color: var(--brand);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.phone-link:hover{ text-decoration: underline; }
.nav{
  display:flex;
  gap:1.25rem;            /* clearer separation between items on desktop */
  align-items:center;
  flex-wrap:nowrap;       /* avoid wrapping that makes items run together */
}
.nav a{padding:10px 0;font-weight:600; text-decoration:none}

/* Desktop nav affordance */
@media (min-width: 821px){
  .nav a{
    border-radius:8px;
    padding:8px 10px;     /* give links a hit area without looking like buttons */
    text-decoration:none;
  }
  .nav a:hover{
    background: rgba(0,0,0,0.06);
    text-decoration:underline; /* replace underline with subtle bg on hover */
  }
  .nav a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}
/* Mobile nav toggle button (hidden on desktop) */
.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:8px;
  padding:8px 12px;
  font-weight:700;
}

/* Phone / CTA strip */
.callout{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card)
}
.phone{font-weight:800;letter-spacing:.3px}
.badge{font-size:.9rem;color:var(--muted)}

/* Headings */
h1{font-size:2.15rem;margin:0 0 8px}
h2{font-size:1.35rem;margin:20px 0 10px}
p{margin:10px 0}

/* Buttons */
.btn,.cta{
  display:inline-block;background:var(--brand);color:#fff;font-weight:700;
  padding:10px 14px;border-radius:10px
}
.btn:hover,.cta:hover{background:var(--brand-dk);text-decoration:none}

/* Lists */
ul{margin:8px 0 16px 1.2rem}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--card);color:var(--muted)}
footer p{margin:0}

/* Spacing between primary/secondary buttons */
.cta + .btn { margin-left: 8px; }

.hero .cta,
.hero .btn {
  padding: 12px 16px;
  font-weight: 750;
}

/* Keyboard focus visibility for accessibility */
a:focus-visible,
.btn:focus-visible,
.cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Legal footer link (10pt as requested) */
.legal{
  font-size:10pt;
  line-height:1.3;
  margin-top:6px;
}
.legal a{ color:var(--link); text-decoration:underline; }
.legal a:hover{ color:var(--link-visited); }

/* Mobile layout tweaks for header callout */
@media (max-width: 640px){
  .callout{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
}

/* ================= Home: Static Hero (background-image) ================ */
.hero {
  position: relative;
  background-image: url('/images/hero_image_2100x1080.webp'); /* Replace with your chosen image */
  background-size: cover;
  background-position: center;
  height: clamp(280px, 38vh, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-overlay {
  background: rgba(0,0,0,0.35);
  padding: 2rem;
  text-align: center;
  color: #fff;
  max-width: 820px;
}
.hero-overlay h1,
.hero-overlay p {
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
}
.hero-overlay h1 {
  font-size: 2.3rem;
  margin-bottom: 0.6rem;
}
.hero-overlay p {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.hero .cmi-badge {
  position: static;           /* sit in normal flow */
  display: block;
  width: 100px;
  height: auto;
  margin: 10px auto 0;        /* center under CTAs */
}
/* ========== Home: Reviews ========== */
.reviews{ margin-top:14px; }
.reviews__hdr{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin:4px 0 10px;
}
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ width:18px; height:18px; display:inline-block }
/* Gold stars for reviews (Google-style) */
.stars .star,
.review .star { color: #fbbc05; }

.reviews__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.review{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}
.review__name{ font-weight:700; margin:0 0 6px; }
.review__meta{ color:var(--muted); font-size:.9rem; margin:0 0 8px; }
.review__text{ margin:0 }

/* Mobile tweaks */
@media (max-width: 820px){
  .phone-link{ padding: 4px 0; }
  .nav-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .nav{
    display:none;                 /* hidden until toggled */
    flex-direction:column;
    gap:0;
    margin-top:10px;
    width:100%;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card);
    overflow:hidden;
  }
  .nav.open{ display:block; }
  .nav a{
    display:block;
    padding:14px 14px;
    border-top:1px solid var(--border);
  }
  .nav a:first-child{ border-top:none; }
  .hero{ height: 320px; }
}