/* ---- Colours: change these to rebrand the whole site ---- */
:root {
  --bg: #f6f6f0;          /* very pale tint of your #ced0bd; keeps the page bright */
  --bg-alt: #e6e8da;      /* light sage for the Services band (between bg and #ced0bd) */
  --ink: #262b20;         /* near-black with a green cast; main text + Contact section */
  --muted: #5a604c;       /* card descriptions, footer */
  --accent: #667446;      /* your Gray green: buttons, links, small labels */
  --accent-dark: #4f5a35; /* darker shade for button hover */
  --line: #ced0bd;        /* your Pastel gray yellow green: borders and dividers */
  --radius: 10px;
  --max: 1100px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-bottom: 1rem; }
h3 { font-size: 1.25rem; margin-bottom: .5rem; }
p + p { margin-top: 1rem; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.center { text-align: center; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; font-weight: 600; color: var(--accent);
  margin-bottom: .5rem;
}

/* Buttons */
.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; transition: background .2s;
}
.btn:hover { background: var(--accent-dark); }
.btn-small { padding: .45rem 1rem; font-size: .95rem; color: #fff !important; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250,247,242,.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.nav nav { display: flex; gap: 1.4rem; align-items: center; }
.nav nav a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.nav nav a:hover { color: var(--accent); }

/* Hero */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: center;
  background-size: cover; background-position: center; color: #fff;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,34,22,.78), rgba(28,34,22,.25)); }
.hero-content { position: relative; max-width: var(--max); padding-top: 4rem; padding-bottom: 4rem; }
.hero-content h1, .hero-content .lead { max-width: 640px; }
.hero .eyebrow { color: #ced0bd; }
.lead { font-size: 1.2rem; margin-bottom: 2rem; opacity: .95; }

/* Sections */
.section { padding: 5rem 0; }
.alt { background: var(--bg-alt); }

.two-col { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3.5rem; align-items: center; }
.about-img { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; width: 100%; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card-body { padding: 1.25rem 1.4rem 1.6rem; }
.card-body p { color: var(--muted); font-size: 1rem; }

.principles { list-style: none; padding: 0; margin-top: 1.5rem; }
.principles li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.principles li:last-child { border-bottom: 0; }

.contact { background: var(--ink); color: #f3ece2; }
.contact h2 { color: #fff; }
.contact p { margin-bottom: 1.5rem; }
.small { font-size: .9rem; opacity: .75; margin-top: 1.5rem; }

.site-footer { padding: 2rem 0; font-size: .9rem; color: var(--muted); text-align: center; }

/* Mobile */
@media (max-width: 760px) {
  .nav nav a:not(.btn) { display: none; }
  .two-col { grid-template-columns: 1fr; gap: 2rem; }
  .about-img { max-width: 360px; }
  .section { padding: 3.5rem 0; }
  .hero { min-height: 64vh; }
}