
:root{
  --green:#005035;
  --green-2:#006b49;
  --green-3:#0a7f57;
  --ink:#14221d;
  --muted:#5c6863;
  --paper:#ffffff;
  --soft:#f3f5f4;
  --line:#e1e7e4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.55;
}
a{color:inherit}
.container{width:min(1120px, calc(100% - 42px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.navbar{
  min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none}
.brand-mark{
  width:42px; height:42px; display:grid; place-items:center;
  background:var(--green); color:#fff; font-weight:900; font-size:23px;
  border-radius:8px 2px 8px 2px;
}
.brand-copy{line-height:1.05}
.brand-copy small{display:block; font-size:10px; letter-spacing:.15em; color:var(--green)}
.brand-copy strong{display:block; font-family:Georgia,serif; color:var(--green); font-size:25px; letter-spacing:.02em}
.nav-links{display:flex; gap:30px; list-style:none; padding:0; margin:0}
.nav-links a{
  text-decoration:none; font-weight:650; padding:24px 0 19px; border-bottom:3px solid transparent
}
.nav-links a:hover,.nav-links a.active{color:var(--green); border-bottom-color:var(--green)}

.hero{
  color:#fff;
  min-height:330px;
  background:
    linear-gradient(90deg, rgba(0,49,34,.98) 0%, rgba(0,49,34,.84) 38%, rgba(10,25,22,.56) 100%),
    linear-gradient(135deg,#4a6258 0%,#263f38 48%,#6f7f77 100%);
  position:relative; overflow:hidden;
}
.hero:after{
  content:"";
  position:absolute; inset:auto -4% 0 42%; height:76%;
  opacity:.24;
  background:
    linear-gradient(90deg,
      transparent 0 3%, #fff 3% 7%, transparent 7% 11%,
      #fff 11% 16%, transparent 16% 20%, #fff 20% 24%,
      transparent 24% 30%, #fff 30% 38%, transparent 38% 42%,
      #fff 42% 48%, transparent 48% 52%, #fff 52% 58%,
      transparent 58% 63%, #fff 63% 69%, transparent 69% 74%,
      #fff 74% 82%, transparent 82%);
  clip-path:polygon(0 100%,0 66%,6% 66%,6% 48%,11% 48%,11% 59%,17% 59%,17% 33%,21% 33%,21% 56%,29% 56%,29% 27%,34% 27%,34% 54%,40% 54%,40% 40%,45% 40%,45% 58%,52% 58%,52% 18%,58% 18%,58% 56%,64% 56%,64% 38%,70% 38%,70% 58%,77% 58%,77% 42%,83% 42%,83% 62%,90% 62%,90% 50%,95% 50%,95% 67%,100% 67%,100% 100%);
}
.hero-grid{
  position:relative; z-index:2; min-height:330px;
  display:grid; grid-template-columns:1.5fr .8fr; align-items:center; gap:45px;
}
.eyebrow{font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; opacity:.8}
.hero h1{font-size:clamp(42px,6vw,68px); line-height:.98; margin:9px 0 8px}
.hero h2{font-size:clamp(20px,2.6vw,29px); margin:0 0 13px; font-weight:700}
.hero p{font-size:18px; margin:0 0 7px}
.tagline{margin-top:18px!important; font-weight:650; letter-spacing:.04em}
.hero-actions{display:flex; gap:14px; margin-top:27px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 22px; border-radius:5px; text-decoration:none;
  font-weight:750; border:1px solid rgba(255,255,255,.75)
}
.btn-primary{background:#0b8a60; border-color:#0b8a60}
.btn-secondary{background:rgba(0,0,0,.18)}
.quote{
  align-self:end; justify-self:end; max-width:290px; margin-bottom:42px;
  font:italic 20px/1.45 Georgia,serif; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:18px
}

.section{padding:45px 0}
.section-soft{background:var(--soft)}
.section-title{font-size:34px; line-height:1.1; margin:0 0 22px; color:var(--green)}
.about-grid{display:grid; grid-template-columns:1.45fr .85fr; gap:58px; align-items:start}
.about-copy p{font-size:17px; max-width:690px}
.text-link{
  display:inline-block; margin-top:10px; color:#fff; background:var(--green);
  padding:10px 18px; border-radius:4px; text-decoration:none; font-weight:700
}
.facts{
  background:#f0f3f2; padding:23px 26px; border:1px solid var(--line)
}
.facts h3{margin:0 0 14px; color:var(--green); font-size:22px}
.fact{display:grid; grid-template-columns:26px 1fr; gap:11px; margin:12px 0}
.fact b{color:var(--green)}

.section-heading-row{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px}
.section-heading-row .section-title{margin:0}
.all-projects{color:var(--green); font-weight:750; text-decoration:none}

.projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:5px;
  overflow:hidden; box-shadow:0 8px 24px rgba(12,46,34,.05);
  transition:transform .2s ease, box-shadow .2s ease
}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(12,46,34,.10)}
.card-image{
  height:190px; background:#fff; display:grid; place-items:center; border-bottom:1px solid var(--line)
}
.card-image img{width:100%; height:100%; object-fit:cover}
.card-body{padding:18px}
.card h3{margin:0 0 8px; color:var(--green); font-size:20px}
.card p{color:#34413c; margin:0 0 13px}
.card a{color:var(--green); font-weight:800; text-decoration:none}

.site-footer{background:var(--green); color:#fff; padding:26px 0}
.footer-grid{display:grid; grid-template-columns:1fr 1.2fr 1fr; align-items:center; gap:25px}
.footer-center{text-align:center; font:italic 17px Georgia,serif}
.footer-right{text-align:right}
.footer-right a{margin-left:16px; text-decoration:none; font-weight:700}

.page-hero{padding:58px 0; background:var(--green); color:#fff}
.page-hero h1{margin:0 0 8px; font-size:44px}
.page-hero p{margin:0; max-width:720px; font-size:18px}
.project-list{padding:42px 0}
.project-detail{display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start; padding:38px 0; border-bottom:1px solid var(--line)}
.project-detail img{width:100%; border:1px solid var(--line); border-radius:5px; background:#fff}
.project-detail h2{color:var(--green); margin-top:0}
.kicker{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--green); font-weight:800}

@media (max-width:850px){
  .nav-links{gap:16px; font-size:14px}
  .hero-grid,.about-grid,.footer-grid,.project-detail{grid-template-columns:1fr}
  .quote{justify-self:start; align-self:start; margin:0 0 30px}
  .projects-grid{grid-template-columns:1fr}
  .footer-center,.footer-right{text-align:left}
  .hero{min-height:auto}
  .hero-grid{padding:48px 0}
  .hero:after{display:none}
}
@media (max-width:600px){
  .brand-copy strong{font-size:18px}
  .brand-copy small{font-size:8px}
  .nav-links{display:none}
  .container{width:min(100% - 28px,1120px)}
  .hero h1{font-size:44px}
}
