  :root {
    --grey: #5c5c5c;
    --green: #8bbb48;
    --green-dark: #729c39;
    --lightgreen: #edfcd9;
    --black: #000000;
    --white: #ffffff;
    --text: #1a1a1a;
    --max-width: 1100px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
  }

  h1, h2, h3 {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.5em 0;
  }

  h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
  h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }

  p { margin: 0 0 1em 0; }

  a { color: var(--green-dark); text-decoration: none; }
  a:hover { text-decoration: underline; }

  .wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Header ---------- */
  .site-header {
    background: var(--grey);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.02em;
  }

  nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
  }

  nav a {
    color: var(--white);
    font-weight: 300;
  }

  nav a:hover { color: var(--green); text-decoration: none; }

  .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    margin: 5px 0;
  }

  /* ---------- Sections (alternate white / light-green / black, as on the current site) ---------- */
  .page-section {
    padding: 72px 0;
  }

  .page-section.alt-lightgreen { background: var(--lightgreen); }
  .page-section.alt-black      { background: var(--black); color: var(--white); }
  .page-section.alt-black h1,
  .page-section.alt-black h2,
  .page-section.alt-black h3   { color: var(--white); }
  .page-section.alt-green      { background: var(--green); }

  /* ---------- Hero ---------- */
  .hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }

  .hero p.lead {
    font-size: 1.1rem;
  }

  .btn {
    display: inline-block;
    background: var(--green);
    color: var(--black);
    font-weight: 500;
    padding: 14px 32px;
    border-radius: 2px;
    margin-top: 12px;
  }

  .btn:hover {
    background: var(--green-dark);
    text-decoration: none;
    color: var(--black);
  }

  /* ---------- About ---------- */
  .about {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }

  /* ---------- Services grid ---------- */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    margin-top: 40px;
  }

  .service-card h3 { color: var(--green-dark); }

  /* ---------- Contact / Footer ---------- */
  .site-footer {
    background: var(--black);
    color: var(--white);
    padding: 56px 0 32px 0;
    text-align: center;
  }

  .site-footer h2 { color: var(--white); }

  .contact-block {
    margin: 24px 0;
  }

  .contact-block a { color: var(--green); }

  .copyright {
    margin-top: 40px;
    font-size: 0.8rem;
    color: #aaaaaa;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 760px) {
    .hero {
      grid-template-columns: 1fr;
      text-align: center;
    }

    nav { display: none; }

    nav.open {
      display: block;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--grey);
      padding: 12px 0;
    }

    nav.open ul {
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .nav-toggle { display: block; }

    section { padding: 48px 0; }
  }