:root {
  /* Text and Background */
  --text-dark: #333333; /* Near-black for main text (better than #000) */
  --text-light: #f5f5f5; /* Off-white for text on dark backgrounds */
  --bg: #fafafa; /* Very light gray/off-white for main background */
  --titles: var(--blue); /* Using the blue for main headings */
  
  /* Core Colors */
  --green: #6d754e; /* Your provided green/olive */
  --brown: #78644c; /* Your provided brown/sienna */
  --blue: #628098; /* Your provided blue/slate */
  
  /* Derived Light/Dark Accents */
  --light-green: #a7b08b; /* Lighter shade of the green */
  --light-brown: #a08c73; /* Lighter shade of the brown */
  --light-blue: #93afc4; /* Lighter shade of the blue */

  /* Call to Action & Buttons */
  --cta-button: var(--blue);
  --cta-button-hover: #4e6a80;
  --button: var(--green);
  --button-hover: #5d6642;

  /* 🔗 Legacy aliases so existing CSS keeps working */
  --text: var(--text-dark);
  --accent: var(--blue);
  --accent-soft: var(--light-blue);
  --border: #ddd2c4; /* or derive from brown/blue if you want */

  --font-heading: "Bebas Neue", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

}

/* -------------------------------------------------
   FONT IMPORTS
   (Add this at the very top of your stylesheet)
   ------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* -------------------------------------------------
   TYPOGRAPHY TOKENS
   ------------------------------------------------- */



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

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

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

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Header */

.site-header {
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.brand-name {
  display: block;
  margin-bottom: 12px;
}

.brand-tagline {
  opacity: 0.8;
}



/* Main layout */

.site-main {
  min-height: 60vh;
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 2rem;
  padding: 2rem 0;
}

.hero-main h1 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.hero-main p {
  max-width: 34rem;
}

.hero-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-aside .card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn.primary {
  background: var(--accent);
  color: var(--cta-button);

}

.btn.secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* Generic cards */

.card {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.25rem;
}

/* Home – services grid */

.home-services {
  padding: 1rem 0 2rem;
}

.home-services h2 {
  margin-bottom: 0.5rem;
  color: var(--green);
}

.home-services-intro {
  max-width: 40rem;
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.home-services-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-start;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding-bottom: 2rem;
}


/* Older simple services groups (if used anywhere) */

.service-group {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Shared small text */

.small {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Price note */

.price-note {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Services page layout */

.services-page {
  padding: 1rem 0 2.5rem;
}

.services-header h1 {
  margin-bottom: 0.25rem;
}

.services-header p {
  max-width: 40rem;
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.services-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

/* Service cards */

.service-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.2fr);
  gap: 1.25rem;
  background: #fff;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
}

.service-card h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.service-card ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.1rem;
}

.service-card li {
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}

.service-card .price-note {
  margin-top: 0.25rem;
}

.service-card .small {
  margin-top: 0.25rem;
}

/* Media placeholder */

.service-media {
  border-radius: 0.75rem;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.7);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.35);
}

/* Accent cards (no contracts / on-demand) */

.service-card-accent {
  grid-template-columns: minmax(0, 1fr);
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Services CTA */

.services-cta {
  margin-top: 2rem;
}

.services-cta .card {
  max-width: 720px;
  margin: 0 auto;
}

/* Contact */

.contact-section {
  padding: 1rem 0 2.5rem;
}

.contact-section h1 {
  margin-bottom: 0.25rem;
}

.contact-section > p {
  max-width: 40rem;
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.25rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
  gap: 2rem;
  align-items: flex-start;
}

.contact-main {
  background: #fff;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
}

.contact-aside.card {
  margin: 0;
}

/* Forms */

.contact-form {
  margin-top: 0.25rem;
}

.form-row {
  margin-bottom: 1rem;
}

.form-row label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--border);
  font: inherit;
  background: #fff;
}

textarea {
  resize: vertical;
}

.checkbox-group label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.radio-group label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

/* Alerts */

.alert {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.alert.success {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  background: #fff;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}

/* Responsive */

@media (max-width: 800px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav {
    display: flex;
    gap: 0.75rem;
  }

  .nav a {
    margin-left: 0;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-media {
    min-height: 80px;
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-aside.card {
    margin-top: 0.75rem;
  }
}
/* --- Refined Services Page Styling --- */

.services-hero {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}

.services-hero img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center bottom;
  display: block;
  filter: saturate(0.9) brightness(0.98);
}

/* Center the Services header more like a landing intro */
.services-header {
  text-align: center;
  margin: 2.5rem auto 1.5rem;
  max-width: 42rem;
}

.services-header h1 {
  font-size: 2.1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.services-header p {
  font-size: 1rem;
  opacity: 0.85;
}

/* Main layout spacing */
.services-layout
/* --- Services page --- */

.services-page {
  padding: 2rem 0 3rem;
}

.services-hero {
  margin-bottom: 1.75rem;
}

.services-hero img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
}

/* header under hero */

.services-header {
  text-align: left;
  margin-bottom: 1.5rem;
}

.services-header h1 {
  font-size: 1.9rem;
  margin: 0 0 0.4rem;
}

.services-header p {
  max-width: 40rem;
  font-size: 0.96rem;
  opacity: 0.9;
  margin: 0;
}

/* cards */

.services-layout {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2rem;
}

.service-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: #fff;
  border-radius: 0.9rem;
  border: 2px solid var(--green);
  padding: 1.5rem 1.75rem;
}

.service-media {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-media img {
  width: 100%;
  max-width: 180px;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg);
}

.service-body {
  flex: 1;
}

.service-body h2 {
  color: var(--black);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.service-body p {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.service-body ul {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.1rem;
}

.service-body li {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.service-card .price-note {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* accent cards without media */

.service-card-accent {
  background: var(--white);
  border-color: var(--green);
  padding: 1.5rem 1.75rem;
}

.service-card-accent .service-body {
  padding: 0;
}

/* CTA */

.services-cta {
  margin-top: 2.5rem;
}

.services-cta .card.emphasis {
  background: var(--light-green);
  border-radius: 0.9rem;
  border: 2px solid var(--green);
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: left;
}

.services-cta h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.services-cta p {
  margin: 0 0 1rem;
}

/* responsive */

@media (max-width: 800px) {
  .service-card {
    flex-direction: column;
  }

  .service-media {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .services-cta .card.emphasis {
    text-align: left;
  }
}
.services-hero-combined {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 3rem;
  background: var(--bg);
}

.services-hero-combined .hero-image img {
  width: 100%;
  height: 260px; /* Adjust as needed */
  object-fit: cover;
  display: block;
}

.services-hero-combined .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(
    to top,
    rgba(36, 30, 24, 0.55),
    rgba(36, 30, 24, 0)
  );
  color: #fff;
}

.services-hero-combined h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.services-hero-combined p {
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.5;
}
/* --- Services hero card --- */

.services-hero-card {
  margin: 2rem 0 2.5rem;
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  border: 2px solid var(--green);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hero-card-copy {
  max-width: 420px;
}

.hero-card-copy h1 {
  color: var(--green);
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  font-weight: 700;
}

.hero-card-copy p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
}

.hero-card-illustration img {
  display: block;
  width: 260px;
  max-width: 100%;
  border-radius: 0.75rem;
}

/* Stack nicely on mobile */

@media (max-width: 800px) {
  .services-hero-card {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
  }

  .hero-card-illustration img {
    width: 100%;
  }
}


/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--accent);
}

.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.brand-tagline {
  font-size: 0.85rem;
  opacity: 0.8;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  position: relative;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 0.15rem;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.18s ease-out;
}

.nav a:hover::after,
.nav a:focus-visible::after {
  width: 100%;
}

.nav a[aria-current="page"] {
  font-weight: 600;
}

.nav a[aria-current="page"]::after {
  width: 100%;
}

/* main spacing so content doesn’t feel jammed up under sticky header */

.site-main {
  padding: 1.5rem 0 3rem;
}

/* Mobile header */

@media (max-width: 720px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
  }

  .brand {
    max-width: 65%;
  }

  .nav {
    gap: 1rem;
    font-size: 0.9rem;
  }
}
.brand .logo-image {
  /* This constrains the image to the width of its container (the .brand link) */
  max-width: 100%; 
  /* This prevents the image from losing quality or stretching */
  height: auto; 
  /* Set a maximum width for the image to prevent it from dominating the header */
  max-height: 100px; /* Adjust this value (e.g., 80px or 120px) to make the logo the size you want */
  width: auto;
}

/* Utility for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Logo Sizing - MODIFY THIS BLOCK */
.brand .logo-image {
  /* Set a fixed height for the logo based on the header's padding */
  height: 40px; 
  width: auto;
  /* Ensure it doesn't bleed out */
  display: block;
}

/* Add this to reset the .brand container styling */
.brand {
  /* Reset flex properties to center the image */
  display: flex;
  flex-direction: column; /* Keep this if you want the tagline below the logo */
  align-items: center; 
  /* Crucial: Set the height of the brand area */
  height: 40px; /* Match the height of the logo image */
  justify-content: center;
}

.nav a {
  margin-left: 1rem; /* <-- DELETE THIS LINE */
  font-size: 0.95rem;
}

.service-media {
  flex: 0 0 180px; /* Sets a fixed width for the media column */
  /* ... display properties ... */
}

.service-media img {
  width: 100%;
  max-width: 180px;
  border-radius: 0.75rem;
  border: 1px solid var(--brown);
  background: var(--bg);
}

/* Update the brand container to be centered vertically */
.brand {
  display: flex; /* Keep this */
  flex-direction: column; /* Keep this */
  text-decoration: none;
  /* Remove any fixed height that was forcing space */
  height: auto; 
}

/* Style the primary name element */
.brand-name {
  font-weight: 700;
  font-size: 1.5rem; /* Make it large and bold */
  display: block;
  color: var(--accent); /* Use your primary accent color */
  line-height: 1; /* Tighten up the line height */
}

/* Style the tagline element */
.brand-tagline {
  font-size: 0.9rem;
  opacity: 1; /* Ensure it's fully visible */
  color: var(--text); /* Use your dark text color */
  margin-top: 2px; /* Small separation */
}

/* === HEADER FINAL OVERRIDES === */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

/* Logo size + shape */
.brand-logo {
  height: 40px;        /* tweak to 48px if you want it a bit bigger */
  width: 40px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Stack name + tagline neatly */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}

.brand-tagline {
  font-size: 0.85rem;
  opacity: 0.85;
  color: var(--text);
}

/* Nav: rely on gap, kill extra margin */
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  margin-left: 0;          /* override that stray margin */
  position: relative;
  font-size: 0.95rem;
  color: var(--green);
  text-decoration: none;
  padding-bottom: 0.15rem;
}

/* underline hover */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.18s ease-out;
}

.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after {
  width: 100%;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .header-inner {
    gap: 0.75rem;
  }

  .brand {
    max-width: 65%;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-tagline {
    font-size: 0.8rem;
  }

  .nav {
    gap: 1rem;
  }
}
/* === FINAL HEADER ALIGNMENT === */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Brand: logo on the LEFT, text on the RIGHT */
.brand {
  display: flex;
  flex-direction: row;      /* <— key change */
  align-items: center;      /* vertical centering with nav */
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

/* Logo size + shape */
.brand-logo {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Text block next to logo */
.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* left-align name + tagline */
  line-height: 1.1;
}

.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
}

.brand-tagline {
  font-size: 0.85rem;
  opacity: 0.85;
  color: var(--text);
}

/* Nav (use gap, no left margin) */
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  margin-left: 0;
}
/* === HOME HERO UPGRADE === */

.hero {
  position: relative;
  padding: 3rem 0 2.75rem; /* a bit more breathing room */
  overflow: hidden;
}

/* Soft coastal image in the background */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to bottom,
      rgba(245, 242, 236, 0.2),
      rgba(245, 242, 236, 0.95)
    ),
    url("service-hero.jpg");
  background-size: cover;
  background-position: center bottom;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
}

/* Keep hero content on top of image */
.hero > * {
  position: relative;
}

/* Optional: slightly elevate the right-hand card */
.hero-aside .card {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.04);
}
.brand-logo {
  height: 52px;   /* was 40px */
  width: 52px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}
/* === HERO 2.0 – photo + card === */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 2.25rem 2.5rem;
  margin: 2rem 0 2.5rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #000; /* gets covered by ::before */
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.12);
}

/* Background photo + gradient overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      rgba(36, 30, 24, 0.9) 0%,
      rgba(36, 30, 24, 0.55) 40%,
      rgba(245, 242, 236, 0.96) 100%
    ),
    url("service-hero.jpg");
  background-size: cover;
  background-position: center bottom;
  filter: saturate(1.05);
  transform: scale(1.02); /* softens the “square” feeling */
  transform-origin: center;
  z-index: -1;
}

/* Keep all inner content above the background */
.hero > * {
  position: relative;
}

/* Left side text on dark gradient */
.hero-main {
  color: #fff;
  max-width: 30rem;
}

.hero-main h1 {
  color: #fff;
  font-size: 2.1rem;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.hero-main p {
  font-size: 0.98rem;
  opacity: 0.9;
}


.hero-actions .btn.secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Right-side "What I help with" panel */
.hero-aside .card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  padding: 1.5rem 1.6rem;
}

.hero-aside .card h2,
.hero-aside .card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.hero-aside .card ul {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.1rem;
}

.hero-aside .card li {
  margin-bottom: 0.25rem;
  font-size: 0.94rem;
}

.hero-aside .card .small {
  font-size: 0.83rem;
  opacity: 0.8;
}

/* Responsive hero layout */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.75rem 1.5rem 2rem;
    margin: 1.5rem 0 2rem;
  }

  .hero-main {
    max-width: 100%;
  }

  .hero-main h1 {
    font-size: 1.8rem;
  }

  .hero-aside .card {
    margin-top: 0.75rem;
  }
}
/* === HERO 2.1 – show the photo, soften the overlay === */

.hero {
  border: 2px solid var(--green);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 2.25rem 2.5rem;
  margin: 2rem 0 2.5rem;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.12);
  background: transparent;      /* was solid black */
}

/* Photo layer */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("service-hero.jpg");
  background-size: cover;
  background-position: center bottom;
  filter: saturate(1.05);
  transform: scale(1.03);
  transform-origin: center;
  z-index: -2;
}

/* Gradient overlay on top of photo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(36, 30, 24, 0.85) 0%,
    rgba(36, 30, 24, 0.55) 35%,
    rgba(245, 242, 236, 0.85) 80%
  );
  z-index: -1;
}

/* Keep content above both layers */
.hero > * {
  position: relative;
}

/* Left side text */
.hero-main {
  color: #fff;
  max-width: 30rem;
}

.hero-main h1 {
  color: var(--light-green);
  font-size: 2.1rem;
  line-height: 1.1;
  margin-bottom: 0.6rem;
}

.hero-main p {
  font-size: 0.98rem;
  opacity: 0.9;
}

/* Buttons against dark side */
.hero-actions .btn.primary {
  background: var(--green);
  color: var(--white);
}

.hero-actions .btn.secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* Right card stays as “floating” panel */
.hero-aside .card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
  padding: 1.5rem 1.6rem;
}

/* Responsive stack */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.75rem 1.5rem 2rem;
    margin: 1.5rem 0 2rem;
  }

  .hero-main {
    max-width: 100%;
  }

  .hero-main h1 {
    font-size: 1.8rem;
  }

  .hero-aside .card {
    margin-top: 0.75rem;
  }
}


/* --- Hero Aside Card Enhancement (UPDATE this existing rule) --- */

.hero-aside .card {
  background: rgba(255, 255, 255, 0.98); /* slight transparency */
  border-radius: 1.5rem; /* much larger radius */
  padding: 1.75rem 1.75rem; /* more padding */
  border: 1px solid rgba(0, 0, 0, 0.06); /* softer border */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); /* deeper shadow */
}

/* Custom list styling for the bullet points */
.hero-aside .card ul {
  list-style: none; /* remove default bullets */
  padding-left: 0;
  margin: 0.5rem 0 0.75rem;
}

.hero-aside .card li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.7rem; /* more spacing between list items */
  font-size: 0.95rem;
}

/* Adds a custom, subtle checkmark/dot for the list */
.hero-aside .card li::before {
  content: "•"; /* You could replace this with a checkmark emoji or icon */
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: -2px;
}

/* --- Button Hover States (ADD these to your button rules) --- */

.btn {
  /* Add transition for all buttons */
  transition: all 0.2s ease-out;
}

/* Primary Button Hover */
.btn.primary {
  background: var(--green);
  color: #fff;
  border:2px solid var(--green);

}

.btn.primary:hover {
  /* darken the background slightly */
  background: var(--light-green); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border:2px solid var(--green);
}

/* Secondary Button Hover */





.grid-item {
  background: var(--white);
  border-radius: 1rem;
  border: 2px solid var(--green);
  padding: 1.5rem;
  
  /* CORE FIX: Use Flexbox to align content to the bottom */
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; /* Ensure content starts at the top */
  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* This targets the main content paragraphs and makes them take up available vertical space, pushing the .small text down */
.grid-item p:not(.small) {
  line-height: 1.45;
  margin-top: 0;
  margin-bottom: 0.5rem;
  flex-grow: 1; /* This is the key to pushing the footer content down */
}

/* --- 2. HERO CARD TWEAK (UPDATES previous .hero-aside .card rule) --- */

.hero-aside .card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 1.25rem; /* slightly less round */
  padding: 1.75rem 1.75rem;
  border: 2px solid var(--light-green); /* lighter border */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); /* softer shadow */
}

/* Refined list styling for internal polish */
.hero-aside .card li::before {
  /* Using a decorative right-arrow symbol instead of a plain dot */
  content: "»"; 
  color: var(--green);
  font-weight: 700;
  font-size: 1.4rem;
  position: absolute;
  left: 0;
  line-height: 1;
}

/* --- HEADER POLISH --- */

/* Make header sticky and slightly transparent for a modern feel */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.header-inner {
  padding: 0.75rem 0; /* Add vertical padding to the content area */
  align-items: center;
}

/* Refined Brand Structure: Logo (Image) next to Text (Name/Tagline) */
.brand {
  display: flex;
  align-items: center; /* Vertically align image and text */
  gap: 0.75rem;
}

/* Assume your logo image has the class 'logo-image' or similar inside the 'brand' link */
.brand img {
  height: 40px; /* Adjust size of logo icon */
  width: auto;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 1.1rem; /* Slightly increase size of brand name */
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

/* --- FOOTER POLISH --- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 3rem; /* Increase separation from main content */
  padding: 1.5rem 0; /* Add generous vertical padding */
  background: #fff;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem; /* More space between copyright and contact info */
  align-items: flex-start;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align contact info to the right */
}

/* Style the contact links */
.footer-contact a {
  color: var(--text);
  opacity: 0.9;
  text-decoration: none;
  margin-bottom: 0.2rem;
}

.footer-contact a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Responsive adjustment for footer */
@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
  }
  .footer-contact {
    align-items: flex-start; /* Align contact info to the left on small screens */
  }
}

/* --- GLOBAL TYPOGRAPHY UPDATE --- */

body {
  /* Use the modern Inter font */
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6; /* Slightly increase line height for better readability */
}

/* Adjust headings for more impact and visual rhythm */
h1 {
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

h2 {
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
}

/* Add subtle transitions to links for smoothness */
a {
  transition: color 0.15s ease-out;
}

/* --- Responsive Text Scale (for mobile polish) --- */

@media (max-width: 600px) {
  .hero-main h1 {
    font-size: 1.8rem;
  }
  .home-services h2 {
    font-size: 2rem;
  }
}
/* --- SECTION POLISH: INTRODUCING THE TRUST SECTION --- */

/* Assume you wrap your new "Meet the Owner" section in this class */
.trust-section {
  padding: 3.5rem 0; /* Generous padding */
  margin-top: 3rem;
  background: var(--accent-soft); /* Use the soft accent color for contrast */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.trust-copy h2 {
  color: var(--text);
  margin-bottom: 0.75rem;
}

.trust-copy p {
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0.9;
}

/* Styling the image placeholder/area for the owner's photo */
.trust-image {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.trust-image img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 250px;
  object-fit: cover;
  /* Slight hover effect to make it feel alive */
  transition: transform 0.3s ease-out; 
}

.trust-image img:hover {
  transform: scale(1.02);
}

/* Responsive stack for the trust section */
@media (max-width: 800px) {
  .trust-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- SERVICE CARD ICON POLISH --- */

.grid-item h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
  color: var(--black);
}

.grid-item h3::before {
  content: "★"; /* Placeholder symbol, update per service if possible */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--green);
  color: #fff;
  border-radius: 6px;
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Optional: Targeted icons (if you can inject specific class names into the HTML) */
/* Example: If you wrapped the Home Watch card with class="home-watch" */
.home-watch h3::before {
    content: "🏠";
    font-size: 0.9rem;
}

/* --- TRUST SECTION PLACEHOLDER FIX (Update this rule) --- */

.trust-image {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: #fff; /* White background for the logo placeholder */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

.trust-image img {
  display: block;
  width: 100%;
  /* If it's the small logo placeholder, make it smaller and centered */
  max-width: 100px;
  height: auto;
  object-fit: contain;
  min-height: auto; /* Reset min-height for the actual logo */
  transform: scale(1);
}

.trust-image img:hover {
  transform: scale(1.0); /* Remove the hover effect for the static logo placeholder */
}
/* --- FOOTER FINAL POLISH (Update your existing footer rules) --- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem; /* More separation */
  padding: 1.5rem 0 2rem;
  background: #fff;
  font-size: 0.9rem;
  color: var(--text);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 3rem; /* Better spacing control */
  align-items: flex-start;
}

.footer-copyright {
    opacity: 0.8;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align contact info to the left */
}

.footer-contact strong {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.footer-contact a {
  color: var(--text);
  opacity: 0.95;
  text-decoration: none;
  margin-bottom: 0.3rem;
  transition: color 0.15s ease-out;
}

.footer-contact a:hover {
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* --- FIX: ROUND CORNERS ON TRUST SECTION --- */

.trust-section {
  padding: 3.5rem 0;
  margin-top: 2.5rem; /* Positioning is good here, above services */
  background: var(--bg); /* Ensure the outer background is the main beige color */
}

.trust-inner {
  border: 2px solid var(--green);

  /* This container now holds the colored background, shadow, and rounded corners */
  background: var(--light-green); 
  border-radius: 1.75rem; /* Generous rounded corners */
  padding: 3rem; /* Increase padding around the content */
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); /* Floating, distinct shadow */
  
  /* Existing grid properties */
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
/* --- ICON POLISH: REPLACING THE GENERIC STAR --- */

/* Base style for all icons (keep this) */
.grid-item h3::before {
  /* ... existing styles ... */
  font-size: 1.2rem;
}

/* Custom Icons based on content (add these to the end of your CSS) */

/* Home watch: Eye/Checkmark */
.home-watch-card h3::before {
  content: "👀"; /* U+1F440 Eyes or U+2713 Checkmark */
  font-size: 1.2rem;
}

/* Storm triage: Rain/Umbrella */
.storm-triage-card h3::before {
  content: "☔"; /* U+2602 Umbrella with Rain Drops */
  font-size: 1.3rem;
}

/* Airbnb tech setup: Wi-Fi/Lightning */
.tech-setup-card h3::before {
  content: "⚡"; /* U+26A1 High Voltage Sign / Lightning */
  font-size: 1.3rem;
}

/* Light maintenance: Tools/Wrench */
.light-maintenance-card h3::before {
  content: "🔧"; /* U+1F527 Wrench */
  font-size: 1.2rem;
}

/* No contracts: No symbol/Lock */
.no-contracts-card h3::before {
  content: "🔒"; /* U+1F512 Lock */
  font-size: 1.2rem;
}

/* On-demand help: Text/Phone */
.on-demand-card h3::before {
  content: "💬"; /* U+1F4AC Speech Bubble */
  font-size: 1.2rem;
}
/* IMPORTANT: When you upload Keith's photo, remove max-width: 100px and set min-height: 250px back! */


/* --- SERVICE DETAIL CARD STRUCTURE --- */

/* Assume you wrap each service (Title/Image/Text) in a container with this class */
.service-detail-card {
  background: #fff; /* White background for the card */
  border-radius: 1.25rem; /* Consistent rounded corners */
  border: 1px solid var(--border);
  padding: 2rem; /* Generous padding inside the card */
  margin-bottom: 2.5rem; /* Separation from the next card */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); /* Subtle shadow for lift */

  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); /* Image column smaller than text */
  gap: 2rem;
  align-items: flex-start;
}

/* Make the title area of each card cleaner */
.service-detail-card h2 {
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  color: var(--accent); /* Use accent color for titles */
}

/* Styling the image/icon area on the left */
.service-detail-media {
  /* Using a class name for the image element/wrapper */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}

/* Ensure images/icons scale nicely within their container */
.service-detail-media img,
.service-detail-media svg {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}


/* --- RESPONSIVE STACKING --- */
@media (max-width: 768px) {
  .service-detail-card {
    grid-template-columns: minmax(0, 1fr); /* Stack image above text on mobile */
    padding: 1.5rem;
    gap: 1.5rem;
  }
}

/* --- INTERNAL LIST POLISH --- */

.service-detail-card ul {
  list-style: none; /* Remove default bullet points */
  padding-left: 0;
  margin: 1rem 0;
}

.service-detail-card li {
  position: relative;
  padding-left: 1.5rem; /* Space for the custom bullet */
  margin-bottom: 0.6rem;
  font-size: 0.98rem;
  line-height: 1.4;
}

.service-detail-card li::before {
  content: "»"; /* Using the right-arrow symbol */
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}


/* --- PRICE NOTE EMPHASIS --- */

/* Targets the paragraph containing the pricing information */
.price-note {
  background: var(--light-green); /* Soft background for highlighting */
  border-left: 4px solid var(--green);
  padding: 0.75rem 1rem;
  margin-top: 1.5rem; /* Push it away from the list content */
  border-radius: 0 0.5rem 0.5rem 0; /* Rounded only on the right */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Make the 'Typical pricing' text bold inside the note */
.price-note strong {
    font-weight: 700;
    color: var(--text);
}

/* --- FINAL CTA POLISH: "Not sure which bucket..." --- */

.services-final-cta {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  margin-top: 3rem; /* Push away from the last service card */
  text-align: center;
}

.services-final-cta h2 {
    font-size: 1.7rem;
    color: var(--accent);
}

.services-final-cta p {
    max-width: 600px;
    margin: 0.5rem auto 1.5rem;
    font-size: 1.05rem;
    line-height: 1.5;
}

.services-final-cta .btn {
    /* Ensure the button stands out against the accent-soft background */
    background: var(--accent);
    color: #fff;
}
/* --- FINAL VISUAL POLISH: SERVICE MEDIA AREA --- */

.service-detail-media {
    /* Use the soft accent color as the background */
    background: var(--accent-soft); 
    border-radius: 50%; /* Make the background circular */
    width: 90px; /* Define size */
    height: 90px;
    
    /* Center content within the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Center the circle within its grid column */
    margin: 0 auto;
    
    /* Add a subtle shadow to give it lift */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.service-detail-media img,
.service-detail-media svg {
    /* Ensure the icon/image doesn't fill the whole circle */
    max-width: 60%;
    height: auto;
}

/* Tweak the card's grid layout to perfectly frame the circular icon */
.service-detail-card {
    /* Fixed width for the icon column for perfect alignment */
    grid-template-columns: 110px minmax(0, 3fr); 
}
/* --- CONTACT LAYOUT & FORM CARD REFINEMENT --- */

/* Enhance the main form container */
.contact-main {
  background: #fff;
  border-radius: 1.2rem; /* Consistent rounding */
  border: 1px solid var(--border);
  padding: 2rem 2.5rem; /* More generous padding */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Soft, professional shadow */
}

/* Improve overall form readability */
.form-row {
  margin-bottom: 1.25rem; /* Increase space between rows */
}

.form-row label {
  font-weight: 600; /* Bolder labels */
  margin-bottom: 0.35rem;
  color: var(--text);
  font-size: 0.95rem;
}

/* Style for text inputs and textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  padding: 0.7rem 0.8rem; /* More vertical padding */
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg); /* Use the soft beige background */
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Professional focus state for inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent); /* Accent color border on focus */
  box-shadow: 0 0 0 3px var(--accent-soft); /* Light box-shadow halo */
}

/* Style the submit button for final emphasis */
.contact-form .btn.primary {
  width: 100%;
  margin-top: 1rem;
  font-size: 1.1rem;
  padding: 0.8rem 1.2rem;
  background: var(--green);
  border:2px solid var(--green);
  transition: background 0.2s ease-out, box-shadow 0.2s ease-out;
}

.contact-form .btn.primary:hover {
  border:2px solid var(--green);
  background: var(--light-green); /* Slightly darker accent */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* --- CHECKBOX/RADIO GROUP POLISH --- */

.checkbox-group {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px dashed var(--border); /* Use a dashed border for distinct groups */
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.6); /* Slight background fill */
}

.checkbox-group label {
  /* Style for the text next to the checkbox */
  display: block;
  font-size: 0.95rem;
  font-weight: 400; /* Regular weight text */
  margin-bottom: 0.3rem;
  padding-left: 0.2rem;
}

/* Adjust the input element itself to align with the text */
.checkbox-group input[type="checkbox"] {
  margin-right: 0.5rem;
}
/* --- CONTACT ASIDE (SIDEBAR) POLISH --- */

.contact-aside.card {
  /* Inherit the nice card styling, but give it a unique accent background */
  background: var(--light-green); 
  border: 2px solid var(--green); /* Stronger border to signify importance */
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-aside h2 {
  color: var(--black); /* Highlight the main title */
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.contact-aside ul {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
  margin: 0.5rem 0 1.5rem;
}

.contact-aside li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 1rem; /* More spacing between steps */
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Use custom numbering for the steps */
.contact-aside li::before {
  /* Using the accent color for the step number */
  content: counter(step); 
  counter-increment: step;
  color: var(--green);
  font-weight: 700;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.2;
}

/* Ensure the numbering starts correctly */
.contact-aside ul {
    counter-reset: step;
}

/* Style the "Service Area" subheading */
.contact-aside h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Tweak the contact grid on large screens to better balance the columns */
.contact-grid {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
  gap: 2.5rem;
}

/* Reset step counter when mobile stacking occurs */
@media (max-width: 800px) {
  .contact-aside ul {
    counter-reset: none;
  }
  .contact-aside li::before {
    content: "•"; /* Use standard bullets on mobile for simplicity */
    font-size: 1.5rem;
    top: -5px;
  }
}
/* --- HEADER AND INTRO POLISH --- */

/* Targets the main heading "Get in touch" */
h1:first-of-type { 
    font-size: 2.5rem; /* Slightly larger for emphasis */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;

}

/* Targets the introductory paragraph text */
p:has( + .contact-grid) { 
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 85%; /* Slightly wider text block for flow */
    opacity: 0.85;
    margin-bottom: 3rem; /* Increase space above the main form card */
}
body > main > div > section > h1{
  color: var(--green);
}
/* --- INPUT & BUTTON FINAL REFINEMENT --- */

.form-row label {
    display: block; /* Ensures label is on its own line */
    margin-bottom: 0.4rem; /* Fine-tune the space between label and field */
}

/* Ensure all inputs and textareas use the full width correctly */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%; 
    box-sizing: border-box; /* Ensures padding doesn't push width over 100% */
}

/* Make textarea feel more substantial */
textarea {
    min-height: 150px;
    resize: vertical; /* Allow resizing only vertically */
}

/* Give the final submit button more presence and clickability */
.contact-form .btn.primary {
    padding: 1.0rem 1.2rem; /* More vertical padding for a taller, clickable target */
    font-weight: 700;
    letter-spacing: 0.02em; /* Subtle letter spacing for a sharp look */
}
/* --- 1. INPUT CLARITY FIX & GENERAL FORM REFINEMENT --- */

/* Make input fields crisp and distinct */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea {
    background: #fff; /* Use pure white for high contrast against page background */
    border: 1px solid #c9c9c9; /* Use a slightly darker, more defined default border */
    color: var(--text-dark); /* Ensure text color is dark */
    padding: 0.8rem 1rem; /* Increase padding for a better internal feel */
    border-radius: 0.6rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle inner shadow for depth */
}

/* Enhanced Focus State */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft); /* Large, soft focus halo */
}

/* Final Polish on the Submit Button */
.contact-form .btn.primary {
    padding: 1.0rem 1.2rem; /* More vertical padding for a taller, clickable target */
    font-weight: 700;
    letter-spacing: 0.02em; /* Subtle letter spacing for a sharp look */
}

/* Add a visual cue for required fields */
.form-row label[required]::after,
.form-row label:has(input:required)::after {
    content: " *";
    color: #cc0000; /* Red star */
    font-weight: 700;
}

/* Refine the checkbox group border */
.checkbox-group {
    border: 1px solid #e0e0e0; /* Solid, light border instead of dashed */
}
/* --- 2. OVERALL SITE POLISH (Header & Footer Check) --- */

/* Final Polish on Header Logo Area alignment */
.brand {
  /* Align the text to the bottom edge of the logo image */
  align-items: flex-end; 
}

.brand img {
    height: 44px; /* Slightly increase logo size for better visual weight */
}

.brand-name {
    line-height: 1.0; /* Ensure brand name aligns tightly with the tagline */
}

/* Ensure the main form card has breathing room on the bottom */
.contact-main {
    padding-bottom: 3rem; 
}

/* Final check on footer structure */
.site-footer {
    border-top: 1px solid #d4d4d4; /* Slightly defined border for separation */
    padding-top: 2rem;
}
/* --- GLOBAL INTERACTIVITY POLISH --- */

/* Add a subtle lift to all buttons and rounded cards on hover */
.btn:hover,
.card:hover,
.grid-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1); 
}

/* Ensure all interactive elements have pointer cursors */
a, 
button, 
.btn,
.grid-item {
    cursor: pointer;
}

/* Add a more distinct hover effect to secondary buttons */
.btn.secondary:hover {
  background: var(--light-green); /* fill it with a soft color */
  border-color: var(--green); /* solidify the border */
  color: var(--white);
}



/* Global body text */
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
}

/* Headings & major titles use the "logo" font */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title {
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Optional sizing tweaks (adjust to taste) */
h1,
.hero-title {
  font-size: clamp(2.5rem, 4vw, 3.2rem);
}

h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

/* Utility classes if you want to force one or the other */
.logo-heading {
  font-family: var(--font-heading);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.logo-body {
  font-family: var(--font-body);
}

p{
  font-family: var(--font-body);

}
/* Media query for screens smaller than or equal to 600px wide (standard mobile breakpoint) */
@media (max-width: 600px) {
  
  /* 1. Reset the grid/flex container to stack items */
  .contact-grid {
    /* Assuming you are using display: flex or display: grid on .contact-grid. 
       We'll set the direction to column for stacking. */
    flex-direction: column; 
    display: flex; /* Ensure it's treated as a flexible container */
    gap: 20px; /* Add some space between the stacked form and aside */
  }

  /* 2. Make the individual columns take up the full width (100%) */
  .contact-main,
  .contact-aside {
    width: 100% !important; /* Forces full width, overriding any existing column settings */
    max-width: none !important; /* Removes any maximum width constraints */
  }
  
  /* Optional: Adjust the form's nested triple group for better mobile spacing */
  .form-group-triple {
    /* If this uses flex/grid to put three fields side-by-side, we stack them too */
    flex-direction: column;
  }

  .form-group-triple .form-row {
    width: 100%;
    margin-bottom: 10px; /* Space between the stacked name, email, and phone fields */
  }
}
.site-header {
  /* Add padding to the top/bottom of the bar */
  padding: 15px 0;
  /* Add a subtle bottom border */
  border-bottom: 1px solid #eee;
  /* Ensure content stays within view */
  width: 100%;
}

.header-inner {
  /* Set max width and center the container */
  max-width: 1200px; /* Adjust as needed */
  margin: 0 auto;
  padding: 0 15px;
  
  /* **FLEXBOX:** Use flexbox to align the logo (brand) and navigation (nav) */
  display: flex;
  /* Place the logo and nav on opposite sides */
  justify-content: space-between;
  /* Vertically center items */
  align-items: center;
  /* Allow wrapping if necessary */
  flex-wrap: wrap; 
}

/* --- Brand/Logo Styling --- */
.brand {
  /* Display the image and text side-by-side */
  display: flex;
  align-items: center;
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color */
  /* Prevent logo from shrinking */
  flex-shrink: 0;
}

.brand-logo {
  /* Set a fixed size for the logo image */
  height: 40px; 
  width: auto;
  margin-right: 10px;
}

.brand-name {
  /* Ensure the name is readable */
  font-size: 1.1em;
  font-weight: bold;
  /* Allow the name to wrap on very small screens */
  display: block;
}

/* --- Navigation Styling --- */
.nav {
  display: flex;
  gap: 20px; /* Spacing between navigation links */
}

.nav a {
  text-decoration: none;
  color: #333; /* Example color */
}

/* ==================================== */
/* 1. Services Page Card Layout (Responsive Grid) */
/* ==================================== */

/* Full-width container setup (re-confirming if your .container isn't set already) */
.container {
  max-width: 1200px; 
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Base style for the card grid (Mobile First: 1 column) */
.services-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px; 
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Individual Card Styling (Making them look like 'cards') */
.service-card {
  /* Use a lighter border color */
  border: 1px solid var(--border); 
  border-radius: 8px;
  overflow: hidden; 
  padding: 30px;
  /* Use a subtle shadow, maybe a very light blue or dark text color */
  box-shadow: 0 4px 12px rgba(var(--text-dark), 0.04); 
}

/* Accent cards (No contracts, On-demand) to stand out */
.service-card-accent {
  /* Use a very light background */
  background-color: var(--bg); 
  /* Add a slightly stronger border or shadow */
  border: 1px solid var(--light-blue);
}

/* Service Card Headings */
.service-card h2 {
    color: var(--blue);
    font-family: var(--font-heading);
}

/* Media Query for Larger Screens (768px+) -> 2 columns */
@media (min-width: 768px) {
  .services-layout {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Styling for odd number of cards */
  .services-layout article:last-child:not(:nth-last-child(2)) {
    grid-column: span 2; 
  }
}

/* Image styling within the service card */
.service-media {
  margin-bottom: 15px;
}

.service-media img {
  width: 100%;
  height: auto;
  border-radius: 4px; 
}

/* ==================================== */
/* 2. Mobile H1 Size Reduction */
/* ==================================== */

@media (max-width: 550px) {
  h1 {
    font-size: 2em;
    line-height: 1.1;
  }
}

/* ==================================== */
/* 3. Homepage: Meet Keith (trust-section) 1-Column Layout */
/* ==================================== */

@media (max-width: 768px) {
  .trust-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .trust-copy, 
  .trust-image {
    width: 100%;
    text-align: center;
  }
  
  .trust-copy {
    margin-bottom: 20px;
  }
}


/* ==================================== */
/* 4. Footer Green Color Layout */
/* ==================================== */

.site-footer {
  /* Use the defined green variable */
  background-color: var(--green); 
  /* Use the defined light text color */
  color: var(--text-light); 
  padding: 25px 0;
  text-align: center;
}

.site-footer a {
    /* Ensure links in the footer are also light */
    color: var(--text-light); 
    text-decoration: underline;
}

.site-footer strong {
    /* Use a light accent color for emphasis */
    color: var(--light-green);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ==================================== */
/* 1. Mobile Card Width Expansion (Services & Contact) */
/* ==================================== */

/*
The issue with the card not being full width on mobile is likely due to
the padding on the .container and potentially a fixed width on the card itself.
We will ensure the main card wrapper is full width on mobile.
*/

/* --- Services Page Hero Card --- */
.services-hero-card {
  /* Ensure this section takes up the container width */
  width: 100%;
  margin: 20px 0; /* Add some vertical spacing */
  
  /* Apply card styling here to match the service-card look */
  border: 1px solid var(--border); 
  border-radius: 8px;
  overflow: hidden; 
  box-shadow: 0 4px 12px rgba(var(--text-dark), 0.04);
}

.hero-card-copy {
    padding: 20px;
}

.hero-card-illustration img {
    /* Ensure the image is responsive and takes full width */
    width: 100%;
    height: auto;
    display: block;
}

/* --- Ensure All Service Cards Use Full Mobile Width --- */
/* The previous services-layout (grid) handles the card width, 
   but we need to make sure the outer wrapper isn't limiting it too much. */
@media (max-width: 767px) {
  /* This ensures the cards take maximum available width within the .container padding */
  .service-card {
    padding: 20px; /* Slightly reduce padding on tiny screens */
  }
}