/* Base reset and variables */
:root{
  /* Palette from user */
  --color-dark: #1C352D; /* darkest - for borders and primary text */
  --color-mid:  #A6B28B; /* mid - secondary backgrounds / buttons */
  --color-accent:#F5C9B0; /* accent - soft highlight */
  --color-bg:  #F9F6F3; /* off-white - main page background */

  /* Legacy/utility variables (mapped to palette) */
  --bg: var(--color-bg);
  --card: #ffffff;
  --text: var(--color-dark);
  --accent: var(--color-mid);
  --muted: #6b7b86;
  --border: var(--color-dark);
  --container-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
}
.container{max-width:var(--container-width);margin:0 auto;padding:1rem}

/* Header */
.site-header{background:var(--card);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:1rem}
.site-header h1{margin:0;font-size:1.25rem}
.main-nav a{margin-left:1rem;color:var(--muted);text-decoration:none}
.main-nav a:hover{color:var(--text)}

/* Hero */
.hero{padding:3rem 1rem;text-align:center}
.hero h2{margin:0 0 .5rem;font-size:1.75rem}
.hero p{margin:0 0 1rem;color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:6px;text-decoration:none}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.features article{background:var(--card);padding:1rem;border-radius:8px;box-shadow:0 1px 3px rgba(33,53,71,0.06)}
.features h4{margin-top:0}

/* Footer */
.site-footer{
  /* make footer a flex column so we can push content to the bottom */
  display:flex;
  flex-direction:column;
  justify-content:flex-end; /* keep content near the bottom edge */
  align-items:center;
  padding:0.5rem 1rem 0.6rem; /* small top padding, slightly larger bottom space */
  margin-top:auto;
  color:var(--muted);
  text-align:center;
  position:relative;
  min-height:200px;
  background-image:url('../images/footer-trees.svg');
  background-position:bottom center;
  background-repeat:no-repeat;
  background-size:100% auto;
  width:100%;
}

/* Reusable card */
.card{background:var(--card);padding:1.25rem;border-radius:10px;box-shadow:0 2px 6px rgba(33,53,71,0.06)}

/* Projects grid */
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.project-card{background:var(--card);padding:1rem;border-radius:8px;box-shadow:0 1px 3px rgba(33,53,71,0.06)}
.project-card h3{margin-top:0;margin-bottom:.5rem}

/* Contact layout */
.contact-area{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem;align-items:start;margin-top:1rem}
.contact-form label{display:block;margin-top:.75rem;color:var(--muted);font-size:.95rem}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;border:1px solid var(--border);border-radius:6px;margin-top:.35rem}
.contact-details{background:var(--card);padding:1rem;border-radius:8px}


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

/* Responsive */
@media (max-width:800px){
  .features{grid-template-columns:1fr}
  .site-header .container{flex-direction:column;align-items:flex-start}
  .main-nav{margin-top:.5rem}
  .project-grid{grid-template-columns:1fr}
  .contact-area{grid-template-columns:1fr}
}