:root {
  --green: #2f4a3f;
  --deep: #22372a;
  --cream: #f2f1ec;
  --ink: #1b1b1b;
  --soft: #8fae9b;
  --border: #e6e3dc;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: var(--ink); background: var(--cream);}
img { max-width: 100%; display:block; }

a { color: inherit; text-decoration: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }

.navbar { background: var(--green); color: var(--cream); position: sticky; top:0; z-index: 10; border-bottom: 1px solid rgba(255,255,255,.15);}
.navbar .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.navbar .logo { display:flex; align-items:center; gap:12px; }
.navbar .logo img { width:28px; height:28px; }
.navbar .wordmark { font-weight:800; letter-spacing:.6px; }
.navbar .links a { margin-left:18px; opacity:.95; }
.navbar .links a:hover { opacity:1; text-decoration: underline; text-underline-offset: 4px; }

.hero { position: relative; min-height: 64vh; color: #f2f1ec; display:flex; align-items:end; }
.hero::before {
  content:""; position:absolute; inset:0; background: url('/assets/hero-construction.jpg') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 70%); }
.hero > .container { position:relative; z-index:1; padding-top: 80px; padding-bottom: 80px; }
.hero h1 { font-size: clamp(32px, 5vw, 56px); margin: 0 0 12px; line-height: 1.05; }
.hero p { max-width: 740px; margin: 0 0 20px; opacity: .95; }
.cta { display:inline-flex; align-items:center; gap:10px; background: var(--cream); color: var(--green); padding: 14px 22px; border-radius: 999px; font-weight: 700; }
.cta.secondary { background: transparent; color: #f2f1ec; border: 1px solid rgba(255,255,255,.7);}

.section { padding: 70px 0; }
.section.alt { background: #f8f7f3; }
.h2 { font-size: clamp(24px, 3.2vw, 36px); margin: 0 0 16px; }

.grid-2 { display:grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.card { background: white; border:1px solid var(--border); border-radius: 16px; padding: 18px; }
.icon { width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; border:1.6px solid var(--green); border-radius: 10px; color: var(--green); }
.listy { display:grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.small { font-size: 14px; opacity: .8; }

.pricing { background: var(--green); color: var(--cream); border-top: 1px solid rgba(255,255,255,.12); }
.pricing .pill { display:inline-block; border:1px solid rgba(255,255,255,.6); padding:6px 10px; border-radius:999px; margin-bottom:10px; }
.pricing .box { background: rgba(0,0,0,.18); padding:20px; border-radius:14px; border:1px solid rgba(255,255,255,.2); }

.footer { background: var(--deep); color: var(--cream); padding: 42px 0; }
.footer a { color: var(--cream); opacity:.9; }
.footer a:hover { opacity:1; text-decoration: underline; }