/* =============================================================
   Home Care With A Vision — Main Stylesheet
   -------------------------------------------------------------
   Sections (search for the heading text to jump to a section):
     1. CSS Variables & Reset
     2. Typography & Base
     3. Layout helpers
     4. Buttons
     5. Header / Navigation (incl. LOGO)
     6. Hero
     7. Trust bar
     8. Sections (generic)
     9. Service cards
    10. How it works
    11. Before / After
    12. About preview
    13. Seasonal cards
    14. Gallery
    15. Why choose us
    16. Reviews
    17. Service areas
    18. FAQ
    19. CTA banner
    20. Forms
    21. Footer
    22. Sticky mobile CTA
    23. Page header (interior pages)
    24. Utilities & service blocks
    25. Responsive (mobile)
   =============================================================
   EDIT COLORS HERE: Change brand colors in section 1 (CSS variables).
   ============================================================= */

/* ---------- 1. CSS Variables & Reset ---------- */
:root {
  /* Brand colors — edit to change site palette */
  --color-primary: #1b4332;       /* dark forest green */
  --color-primary-dark: #11301f;
  --color-primary-light: #2d5a3f;
  --color-accent: #52796f;        /* fresh landscape green */
  --color-accent-light: #84a98c;
  --color-text: #1f2421;          /* near black */
  --color-text-soft: #4a524d;
  --color-muted: #7a8079;
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f5;
  --color-bg-section: #f1f2ee;
  --color-beige: #e8e2d4;
  --color-border: #e3e5e0;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;

  /* Spacing & layout */
  --container: 1180px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 6px rgba(20, 30, 25, 0.06);
  --shadow: 0 6px 24px rgba(20, 30, 25, 0.08);
  --shadow-lg: 0 14px 40px rgba(20, 30, 25, 0.12);
  --transition: 200ms ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

/* ---------- 2. Typography & Base ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; color: var(--color-text-soft); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 0.6em;
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 80px 0; }
.section--soft { background: var(--color-bg-soft); }
.section--dark { background: var(--color-primary); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.85); }

.section-head { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section-head p { font-size: 1.05rem; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn--secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background: var(--color-primary);
  color: #fff;
}
.btn--light {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}
.btn--light:hover { background: var(--color-beige); border-color: var(--color-beige); color: var(--color-primary); }
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: 0.9rem; }
/* Larger size for primary estimate / quote request buttons */
.btn--xl { padding: 18px 42px; font-size: 1.08rem; }
/* Uppercase styling for estimate / quote request call-to-action buttons */
.btn--cta { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }

/* ---------- 5. Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
}

/* ===== LOGO =====
   The logo file must be saved at:
     assets/images/homecare-with-a-vision-logo.png
   .logo-img keeps the logo balanced, never stretched.
   Adjust max-height below if the logo looks too small / too large. */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: 1.2;
}
.logo:hover { color: var(--color-text); }
.logo-img {
  display: block;
  height: 108px;       /* desktop logo size — adjust here */
  max-height: 108px;
  width: auto;         /* preserves aspect ratio (no stretch / distortion) */
  object-fit: contain;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.logo-text small {
  font-size: 0.7rem;
  color: var(--color-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.96rem;
  padding: 6px 0;
  position: relative;
}
.nav a:hover { color: var(--color-primary); }
.nav a.active::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.header-cta { display: flex; align-items: center; gap: 12px; }

.hamburger {
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--color-text);
  position: relative;
}
.hamburger span::before,
.hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--color-text);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding: 90px 0 100px;
  background:
    linear-gradient(135deg, rgba(27,67,50,0.92) 0%, rgba(45,90,63,0.88) 100%),
    /* IMAGE: REPLACE BACKGROUND WITH YOUR BEST LANDSCAPING PHOTO
       e.g. add url('../assets/images/hero.jpg') center/cover before the gradient. */
    radial-gradient(circle at 20% 30%, #84a98c 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #2d5a3f 0%, transparent 50%),
    var(--color-primary-dark);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.hero h1 { color: #fff; }
.hero p.lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 28px;
}
.hero-buttons { gap: 14px; }

/* Single-column, centered hero (no side image).
   Higher specificity (.hero .hero-content …) so these centering rules
   always win over the base .hero h1 / .hero p.lead rules above. */
.hero .hero-content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .hero-content h1 {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.hero .hero-content .lead {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
.hero .hero-content .hero-buttons {
  justify-content: center;
  flex-wrap: wrap;
}
/* Hero visual — just the logo, no background. Logo's transparent PNG/JPG
   sits directly on the green hero. */
.hero-visual {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hero-visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}

/* ---------- 7. Trust bar ---------- */
.trust-bar {
  background: #fff;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-border);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-text-soft);
  font-weight: 500;
}
.trust-item svg { color: var(--color-accent); flex-shrink: 0; }

/* ---------- 8. Sections (generic card) ---------- */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ---------- 9. Service cards ---------- */
.service-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-accent-light);
}
.service-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-bg-soft);
  display: grid; place-items: center;
  color: var(--color-primary);
  margin-bottom: 18px;
}
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: 0.96rem; margin-bottom: 18px; }
.service-card .learn-more {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.service-card .learn-more:hover { gap: 8px; }

/* ---------- 10. How it works ---------- */
.steps { counter-reset: step; }
.step { text-align: center; padding: 14px; }
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 auto 18px;
}
.step h3 { margin-bottom: 8px; }

/* ---------- 11. Before / After ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ba-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; }
.ba-img {
  aspect-ratio: 4/3;
  background: var(--color-bg-section);
  position: relative;
  display: grid;
  place-items: center;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 500;
  /* IMAGE: REPLACE WITH BEFORE/AFTER PHOTO
     e.g. background: url('../assets/images/before-1.jpg') center/cover; */
}
.ba-img--before { background: linear-gradient(135deg, #c9d3c0, #a3b09a); }
.ba-img--after  { background: linear-gradient(135deg, #6b8a6f, #466554); }
.ba-img span {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ba-caption {
  padding: 16px 20px;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-border);
}

/* ---------- 12. About preview ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.about-img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background:
    /* IMAGE: REPLACE WITH ABOUT PHOTO (gradient placeholder shown otherwise) */
    linear-gradient(135deg, #84a98c 0%, #2d5a3f 100%);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  font-size: 0.9rem;
  overflow: hidden;
}
/* When a real photo is used inside .about-img, this lets the <img> fill the
   box without distortion. Portrait photos (taller than wide) crop top/bottom
   slightly using object-position: center top so faces stay visible. */
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;   /* show more of the top by default (faces) */
  display: block;
}
/* For photos where the subject is in the lower half of the frame
   (e.g., trees overhead, full-body shots). Crops more aggressively from
   the bottom so the people are the focal point. */
.about-img.crop-low img {
  object-position: center 70%;
}

/* ----- Meet the Owners ----- */
.owners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 40px;
}
.owner-photo {
  aspect-ratio: 3/4;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-section);
  box-shadow: var(--shadow);
}
.owner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.owners-blurb {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.owners-blurb p {
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--color-text-soft);
}
.owners-blurb p:last-child {
  font-style: italic;
  color: var(--color-text);
  margin-top: 16px;
}

/* ---------- 13. Seasonal cards ---------- */
.season-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.season-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.season-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.season-card ul { list-style: none; padding: 0; margin: 0; }
.season-card li {
  padding: 6px 0 6px 22px;
  font-size: 0.94rem;
  color: var(--color-text-soft);
  position: relative;
}
.season-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent-light);
}

/* ---------- 14. Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Use .gallery-grid--4 when you have exactly 4 photos for a balanced 2x2 layout. */
.gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Use .gallery-grid--2 when you have 2 photos and want each one large. */
.gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gallery-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: block;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* keeps photos cropped to fill the tile without distortion */
  object-position: center;
  display: block;
  transition: transform 600ms ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item .tag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  z-index: 1;
}

/* ---------- 15. Why choose us ---------- */
.feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { font-size: 0.95rem; margin-bottom: 0; }

/* ---------- 16. Reviews ---------- */
.review-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.stars {
  color: #d97f00;
  font-size: 1rem;
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.review-text {
  font-size: 0.98rem;
  color: var(--color-text);
  margin-bottom: 16px;
  flex: 1;
  line-height: 1.6;
}
.review-text::before { content: "\201C"; font-size: 1.4rem; color: var(--color-accent); margin-right: 2px; }
.review-text::after  { content: "\201D"; font-size: 1.4rem; color: var(--color-accent); margin-left: 2px; }
.reviewer {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.94rem;
}
.reviewer small {
  display: block;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.84rem;
  margin-top: 2px;
}

/* ---------- 17. Service areas ---------- */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}
.area-pill {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 500;
  text-align: center;
  color: var(--color-text);
  font-size: 0.96rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.area-pill svg { color: var(--color-accent); flex-shrink: 0; }

/* ---------- 18. FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary {
  padding: 18px 24px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--color-primary);
  line-height: 1;
  transition: transform var(--transition);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .faq-body {
  padding: 0 24px 22px;
  color: var(--color-text-soft);
  font-size: 0.98rem;
}

/* ---------- 19. CTA banner ---------- */
.cta-banner {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 70px 20px;
}
.cta-banner h2 { color: #fff; }
.cta-banner p {
  color: rgba(255,255,255,0.88);
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
}

/* ---------- 20. Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; }
.field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 6px;
}
.field label .req { color: #c14a3c; }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 0.98rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(82,121,111,0.15);
}
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { font-size: 0.82rem; color: var(--color-muted); margin-top: 4px; }
.file-drop {
  border: 2px dashed var(--color-border);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.92rem;
  background: var(--color-bg-soft);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.contact-info {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
}
.contact-info h3 { color: #fff; margin-bottom: 18px; }
.contact-info .info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.contact-info .info-item:last-child { border-bottom: none; }
.contact-info .info-item svg { color: var(--color-accent-light); margin-top: 2px; flex-shrink: 0; }
.contact-info .info-item strong { display: block; font-size: 0.82rem; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.contact-info .info-item span { color: #fff; font-size: 0.98rem; }
.contact-info .info-item a { color: #fff; }
.contact-info .info-item a:hover { color: var(--color-accent-light); }

/* ---------- 21. Footer ---------- */
.site-footer {
  background: #14201a;
  color: rgba(255,255,255,0.78);
  padding: 60px 0 28px;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid p, .footer-grid a { color: rgba(255,255,255,0.72); }
.footer-grid a:hover { color: #fff; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 4px 0; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
/* Footer wordmark — no logo image used here (kept clean on dark green).
   If you want to add the logo to the footer later, restore an <img> in the
   footer markup and uncomment the rule below. The white rounded background
   guarantees the logo shows cleanly on the dark green footer regardless of
   the logo's own colors. */
/*
.footer-logo img {
  height: 32px;
  width: auto;
  max-height: 32px;
  background: #fff;
  padding: 4px;
  border-radius: 8px;
}
*/

/* Header logo image — uses a transparent backdrop so it blends cleanly
   with the white header. The logo file must be a transparent PNG for
   best results. */
.logo-img {
  background: transparent;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.footer-bottom a { color: rgba(255,255,255,0.72); }
.footer-bottom a:hover { color: #fff; }

/* ----- Legal / policy page prose ----- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h2 { font-size: 1.3rem; margin-top: 40px; margin-bottom: 12px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--color-text-soft); }
.legal ul { padding-left: 22px; margin: 0 0 1em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--color-primary); text-decoration: underline; }
.legal .updated {
  color: var(--color-muted);
  font-size: 0.92rem;
  margin-bottom: 8px;
}
.legal .legal-note {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 0.92rem;
  color: var(--color-text-soft);
  margin-top: 40px;
}

/* ---------- 22. Sticky mobile CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: 10px 12px;
  gap: 10px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
}
.mobile-cta .btn { flex: 1; padding: 13px 8px; font-size: 0.94rem; }

/* ---------- 23. Page header (interior pages) ---------- */
.page-head {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 70px 0 60px;
  text-align: center;
}
.page-head h1 { color: #fff; margin-bottom: 14px; }
.page-head p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto; font-size: 1.05rem; }
.crumbs {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.crumbs a { color: rgba(255,255,255,0.65); }
.crumbs a:hover { color: #fff; }

/* ---------- 24. Utilities & service blocks ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 16px; }
.muted { color: var(--color-muted); }

.svc-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  padding: 60px 0;
  border-bottom: 1px solid var(--color-border);
}
.svc-block:last-child { border-bottom: none; }
.svc-block.reverse { grid-template-columns: 0.9fr 1.1fr; }
.svc-block.reverse .svc-text { order: 2; }
.svc-block.reverse .svc-img  { order: 1; }
.svc-img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* When a real <img> is placed inside .svc-img, it fills the container
   without distortion. Adjust object-position per service if needed. */
.svc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Placeholder shown in a service image slot until a real photo is added. */
.svc-img--placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #84a98c, #2d5a3f);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  font-weight: 500;
}

.svc-text ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
.svc-text li {
  padding: 4px 0 4px 24px;
  font-size: 0.95rem;
  color: var(--color-text-soft);
  position: relative;
}
.svc-text li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 4px;
  color: var(--color-accent);
  font-weight: 700;
}

/* =============================================================
   SCROLL REVEAL ANIMATIONS (home page only)
   -------------------------------------------------------------
   Elements with `.reveal` start slightly translated down and
   invisible. When they enter the viewport, JS adds `.is-visible`
   which fades them in and slides them to their natural position.
   Grid siblings cascade with a small stagger for a polished feel.

   Respects prefers-reduced-motion: users with that setting see
   no animation, just content.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Cascade siblings in a row so they enter sequentially (not all at once). */
  .grid > .reveal:nth-child(2) { transition-delay:  80ms; }
  .grid > .reveal:nth-child(3) { transition-delay: 160ms; }
  .grid > .reveal:nth-child(4) { transition-delay: 240ms; }
  .grid > .reveal:nth-child(5) { transition-delay: 320ms; }
  .grid > .reveal:nth-child(6) { transition-delay: 400ms; }
  .grid > .reveal:nth-child(7) { transition-delay: 480ms; }
  .gallery-grid > .reveal:nth-child(2) { transition-delay:  90ms; }
  .gallery-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
  .gallery-grid > .reveal:nth-child(4) { transition-delay: 270ms; }
}

/* ---------- 25. Responsive (mobile) ---------- */
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .svc-block, .svc-block.reverse { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
  .svc-block.reverse .svc-text { order: 1; }
  .svc-block.reverse .svc-img  { order: 2; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .owners-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .nav, .header-cta .btn { display: none; }
  .hamburger { display: inline-flex; }
  .nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: #fff;
    padding: 16px 20px 22px;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    align-items: stretch;
  }
  .nav.is-open a { padding: 10px 0; font-size: 1rem; }
  .nav.is-open .btn { display: inline-flex; align-self: stretch; justify-content: center; margin-top: 8px; }
  .logo-img { height: 84px; max-height: 84px; }   /* slightly smaller on mobile */
  .logo-text { display: none; }                    /* hide wordmark on small screens so the logo image is the focal point */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-pair { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid--4 { grid-template-columns: 1fr; }
  .gallery-grid--2 { grid-template-columns: 1fr; }
  .owners-grid { grid-template-columns: 1fr; max-width: 360px; }
  .form-grid { grid-template-columns: 1fr; }
  .svc-text ul { grid-template-columns: 1fr; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 76px; }   /* keep last content above sticky bar */
  .hero { padding: 60px 0 70px; }
  .page-head { padding: 50px 0 44px; }
}