:root{
  --bg: #ffffff;
  --fg: #1b1b1b;
  --muted: #5d5d5d;
  --brand: #2e7d32;     /* deep green */
  --brand-600:#2a6e2e;
  --brand-050:#eaf4ec;
  --card:#f7faf8;
  --ring:#b8e6c0;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#101210;
    --fg:#e9f0ea;
    --muted:#b1b7b2;
    --card:#161a16;
    --brand-050:#0f1a11;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}

html, body { height: 100%; }
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}

img{max-width:100%; height:auto; display:block;}
a{color:var(--brand); text-decoration-thickness: .08em; text-underline-offset:.2em}
a:hover{color:var(--brand-600)}
h1,h2,h3,h4{line-height:1.2; margin:.2em 0 .4em}
h1{font-size: clamp(2rem, 4vw, 3rem)}
h2{font-size: clamp(1.5rem, 2.5vw, 2rem)}
p{margin:.5rem 0 1rem}
.center{text-align:center}
.muted{color:var(--muted)}
.hidden{display:none}

.nav-logo{
  width:70px;
  height:70px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:bold;
  font-size:1.2rem;
  text-decoration:none;
}

.nav-title{
  font-family: "Old Standard TT", serif;
  font-style: normal;
  font-size:1.5rem;
  font-weight:bold;
  color:var(--fg);
  text-decoration:none;

  display: inline-flex;
  align-items: center;
  position: relative; /* allows child positioning */

}


.nav-title .twig {
  width: 100px;                /* adjust size */
  height: auto;               /* keep aspect ratio */
  transform: rotate(20deg);   /* slight rotation to the right */
  margin-left: -40px;
  margin-top: -20px;
  position: relative;
  top: 2px;

  display: inline-block;      /* ensures transform works properly */
}


.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.site-header{
  position: sticky;
  top: 0;
  z-index: 10;

  /* Use the core colour with translucency */
  background-color: #d6d3cd;
  border-bottom: 1px solid color-mix(in srgb, #d6d3cd, transparent 0%);

  backdrop-filter: blur(6px);
}

.brand{display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; font-weight:700}
.brand .logo{color:var(--brand)}
.brand.small{font-size:.95rem}

.nav-toggle{display:none}
.nav-list{display:flex; gap:1rem; list-style:none; padding:0; margin:0; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.7rem 1rem; border-radius:.6rem; text-decoration:none; font-weight:600; border:1px solid transparent;
}
.btn--primary{background:var(--brand); color:white; box-shadow: var(--shadow)}
.btn--primary:hover{background:var(--brand-600)}
.btn--ghost{border-color: color-mix(in srgb, var(--brand), white 60%); color:var(--brand)}
.btn--ghost:hover{background: var(--brand-050)}

.skip-link{position:absolute; left:-999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; background:var(--brand); color:#fff; padding:.5rem .75rem; border-radius:.5rem}

.hero{padding: clamp(2rem, 4vw, 4rem) 0}
.eyebrow{letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-size:.9rem}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap; margin:1rem 0}
.badges{
  display: flex;
  flex-wrap: wrap;           /* allows badges to wrap on small screens */
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  color: var(--muted);
}

.badges li{
  display: flex;             /* place img and text side-by-side */
  align-items: center;       /* vertically center icon with text */
  gap: 0.5rem;               /* spacing between icon and text */
  white-space: nowrap;       /* optional: keep each badge on one line */
}

.badges img{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;            /* prevent icon from stretching */
  display: block;            /* stable alignment across resets */
}

.section{padding: clamp(2rem, 5vw, 4rem) 0}
.section--tint{background: var(--brand-050)}
.grid{display:grid; gap: clamp(1rem, 2vw, 2rem)}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width: 820px){ .grid--2{grid-template-columns: 1fr} .nav-list{display:none} .nav-toggle{display:inline-flex} }

.cards{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
@media (max-width: 820px){ .cards{grid-template-columns: 1fr} }
.card{
  background: var(--card); border:1px solid color-mix(in srgb, var(--fg), transparent 90%);
  border-radius: .8rem; padding:1rem; box-shadow: var(--shadow);
}

.values-figure figcaption{font-size:.9rem; color:var(--muted); margin-top:.4rem}

.pricing{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
@media (max-width: 820px){ .pricing{grid-template-columns: 1fr} }
.price-card{background: var(--card); border-radius: .8rem; padding:1rem; border:1px solid color-mix(in srgb, var(--fg), transparent 90%)}
.price-card.featured{outline:2px solid var(--ring); box-shadow: var(--shadow)}
.price{font-weight:800; font-size:1.6rem; margin:.2rem 0}
.note{color:var(--muted); margin-top:-.4rem}

.carousel{position:relative; overflow:hidden}
.carousel-track{display:flex; transition: transform .4s ease}
.quote{
  min-width:100%; margin:0; padding:1.5rem; background: var(--card); border-radius:.8rem;
  border:1px solid color-mix(in srgb, var(--fg), transparent 90%); box-shadow: var(--shadow)
}
.carousel-controls{
  position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; padding:.5rem;
}
.carousel-prev,.carousel-next{
  background:var(--bg); border:1px solid color-mix(in srgb, var(--fg), transparent 85%);
  border-radius:.6rem; padding:.2rem .6rem; font-size:1.4rem
}
.carousel-prev:hover,.carousel-next:hover{background: var(--brand-050)}

.form{max-width:760px}
.form-group{display:grid; gap:.4rem; margin-bottom:1rem}
input, select, textarea{
  padding:.7rem .8rem; border-radius:.6rem; border:1px solid color-mix(in srgb, var(--fg), transparent 85%);
  background: var(--bg); color: var(--fg);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--ring); border-color:transparent}
.form-actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}

.footer-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:1rem}
@media (max-width: 820px){ .footer-grid{grid-template-columns: 1fr 1fr} }
.list-plain{list-style:none; padding:0; margin:0; display:grid; gap:.25rem}
.legal{display:flex; justify-content:space-between; align-items:center; padding:1rem 0; border-top:1px solid color-mix(in srgb, var(--fg), transparent 90%)}