:root{
  --green-950:#022c22;
  --green-900:#064e3b;
  --green-800:#065f46;   /* body text */
  --green-700:#0b7a3b;   /* headings/strong */
  --green-600:#0e9347;
  --green-500:#16a34a;   /* primary */
  --green-400:#22c55e;   /* accents */
  --green-300:#86efac;   /* focus/hover bg */
  --bg:#ffffff;
  --border: rgba(10, 97, 60, 0.16);
  --shadow: 0 10px 30px rgba(6,95,70,0.12);
}

/* Base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  color: var(--green-800);
  background: var(--bg);
}
h1,h2,h3,h4,h5,h6{ color: var(--green-700); }
strong,b{ color: var(--green-700); }
em,i{ color: var(--green-600); }
a{ color: var(--green-700); }
a:hover,a:focus{ color: var(--green-900); }

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
  background:#fff; color:var(--green-900); box-shadow:var(--shadow); z-index:10000; border:1px solid var(--border);
}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px 0 12px;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); z-index:1000;
}
.brand-link{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--green-800); }
.logo{ border-radius:8px; box-shadow:var(--shadow); background:#fff; }
.brand-name{ font-weight:800; letter-spacing:.2px; color:var(--green-900); }

.nav-inline{ display:flex; gap:18px; align-items:center; }
.nav-inline a{ text-decoration:none; color:var(--green-800); padding:10px 12px; border-radius:10px; }
.nav-inline a:hover,.nav-inline a:focus{ background:var(--green-300); color:var(--green-950); outline:none; }
.menu-button,.menu-panel{ display:none !important; }

main{ display:block; }
.hero{ padding-top:64px; }

/* Hero */
.section.hero{ position:relative; min-height:100vh; display:grid; place-items:center; }
.video-wrap{ position:absolute; inset:0; overflow:hidden; }
.hero-video{ width:100%; height:100%; object-fit:cover; }
.hero-overlay{
  position:relative; z-index:2; text-align:center;
  color: var(--green-500);
  padding:0 24px;
  text-shadow: 0 1px 6px rgba(2,44,34,0.25);
}
.hero-title{ font-size:clamp(32px,6vw,56px); margin:0 0 10px; font-weight:900; }
.hero-subtitle{ font-size:clamp(16px,2.5vw,22px); margin:0; opacity:.98; color:var(--green-600); }

.hero-cta{ position:absolute; left:24px; bottom:24px; z-index:2; }
.button{ display:inline-block; text-decoration:none; padding:14px 18px; border-radius:14px; font-weight:800; }
.button-primary{ background:var(--green-500); color:#fff; box-shadow:var(--shadow); border:none; cursor:pointer; }
.button-primary:hover{ background:var(--green-600); }
.button-primary:focus{ outline:3px solid var(--green-300); outline-offset:2px; }

/* Sections */
.section.placeholder{ padding:96px 24px; max-width:1000px; margin:0 auto; }
.section.placeholder h2{ margin-top:0; font-size:32px; color:var(--green-700); }

/* Projects (grid + YouTube placeholders) */
.projects-grid{
  display:grid; grid-template-columns:repeat(2,minmax(300px,1fr));
  gap:24px; margin-top:12px;
}
@media (max-width:820px){ .projects-grid{ grid-template-columns:1fr; } }
.project-card{
  padding:12px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow);
}
.project-title{ margin:0 0 10px; font-size:20px; font-weight:800; color:var(--green-700); }
.yt-holder{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#f5fff7; border:1px solid var(--border); }
.yt-holder iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-thumb{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(0deg, rgba(6,95,70,0.25), rgba(6,95,70,0.25));
  border:0; cursor:pointer; color:#fff; font-weight:800;
}
.yt-thumb:focus{ outline:3px solid var(--green-300); outline-offset:2px; }
.yt-label{
  display:inline-block; padding:12px 16px; border-radius:999px;
  background:var(--green-500); box-shadow:var(--shadow);
}
.yt-thumb:hover .yt-label{ background:var(--green-600); }

/* Brands — UPDATED: 5-across, larger square frames */
.brands-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap:24px;
  align-items:start;
}
.brand-card{
  text-align:center;
  color:var(--green-800);
}
.brand-card img{
  width:200px;
  height:200px;                /* force square */
  max-width:none;
  object-fit:contain;          /* preserve logo aspect */
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  display:block;
  margin-inline:auto;
  padding:16px;                /* inner breathing room */
}
.brand-name{ margin-top:10px; font-weight:800; color:var(--green-700); }

/* Responsive brands */
@media (max-width: 920px){
  .brands-grid{ grid-template-columns: repeat(4, minmax(140px, 1fr)); }
}
@media (max-width: 720px){
  .brands-grid{ grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .brand-card img{ width:140px; height:140px; padding:12px; }
}
@media (max-width: 420px){
  .brands-grid{ grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* Services (2x2) */
.services-wrap{ margin-top:12px; }
.services-grid{ display:grid; grid-template-columns:repeat(2, minmax(360px,1fr)); gap:28px; }
.service-item{
  display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:start;
  padding:12px; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); background:#fff;
  color:var(--green-800);
}
.service-img{ width:100%; height:160px; object-fit:cover; border-radius:12px; background:#f5fff7; border:1px solid var(--border); }
.service-title{ margin:0 0 6px; font-size:20px; color:var(--green-700); font-weight:800; }
.service-text{ margin:0; color:var(--green-800); line-height:1.45; }

/* Team (3+3; clickable cards) */
.team-grid{ display:grid; grid-template-columns:repeat(3, minmax(240px,1fr)); gap:24px; align-items:start; }
.team-card{
  display:block; text-align:center; text-decoration:none; color:var(--green-800);
  padding:12px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow);
}
.team-card:focus,.team-card:hover{ outline:none; box-shadow:0 0 0 3px var(--green-300), var(--shadow); }
.team-card img{
  width:100%; max-width:220px; aspect-ratio:1/1; object-fit:cover; border-radius:14px; background:#f5fff7;
  margin-inline:auto; display:block; border:1px solid var(--border);
}
.team-role{ margin:10px 0 6px; font-weight:800; font-size:18px; color:var(--green-700); }
.team-desc{ margin:0; color:var(--green-800); min-height:3.5em; line-height:1.45; }

/* Blog (3 + 2; cards clickable) */
.blog-grid{ display:grid; grid-template-columns:repeat(3, minmax(240px,1fr)); gap:24px; align-items:start; }
.blog-card{
  display:block; text-decoration:none; color:var(--green-800);
  padding:12px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow);
}
.blog-card:focus,.blog-card:hover{ outline:none; box-shadow:0 0 0 3px var(--green-300), var(--shadow); }
.blog-card img{
  width:100%; max-width:420px; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:#f5fff7;
  margin-inline:auto; display:block; border:1px solid var(--border);
}
.blog-title{ margin:10px 0 6px; font-weight:800; font-size:18px; color:var(--green-700); }
.blog-desc{ margin:0; color:var(--green-800); min-height:3.5em; line-height:1.45; }
.blog-grid .spacer{ display:none; }
@media (min-width:1024px){ .blog-grid--five .spacer{ display:block; } }

/* Contact */
.contact-wrap{ max-width:880px; margin:0 auto; }
.contact-title{ font-size:clamp(28px,6vw,44px); margin:0 0 14px; font-weight:900; letter-spacing:.2px; color:var(--green-700); }
.contact-info{ display:grid; gap:8px; margin:0 0 18px; color:var(--green-800); }
.contact-form{
  display:grid; gap:12px; padding:16px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow);
  color:var(--green-800);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:grid; gap:6px; }
.field label{ font-weight:800; color:var(--green-700); }
.field input,.field textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border); font:inherit; color:var(--green-800);
  background:#fafffb;
}
.field textarea{ min-height:140px; resize:vertical; }
.help{ color:var(--green-600); font-size:14px; }
.counter{ justify-self:end; font-size:12px; color:var(--green-600); }
.submit-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.note{ font-size:12px; color:var(--green-600); }
.form-success,.form-error{ display:none; margin-top:8px; font-size:14px; }
.form-success{ color:var(--green-700); }
.form-error{ color:#b00020; }
.hidden{ display:none !important; }

/* Footer */
.site-footer{ text-align:center; padding:32px 16px; color:var(--green-700); border-top:1px solid var(--border); }