:root{
  --green-deep: #0A2F1F;
  --green-accent: #1B5E3C;
  --green-emph: #2E7D32;
  --steel: #C8D1D0;
  --charcoal: #1C2022;
  --surface: #F6F8F7;
  --white: #FFFFFF;

  --radius: 10px;
  --radius-sm: 8px;
  --shadow-1: 0 6px 18px rgba(0,0,0,0.15);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.18);
  --shadow-header: 0 6px 20px rgba(0,0,0,0.12);

  --max-w: 1200px;
  --gutter: 1.25rem;

  --ts-1: 120ms;
  --ts-2: 220ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--charcoal);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.6;
  background-color: var(--surface);
}

img{ max-width:100%; display:block; }

.wrap{ width: min(92vw, var(--max-w)); margin-inline: auto; }


.skip-link{
  position:absolute; left:-9999px; 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: var(--charcoal); color: var(--white); z-index: 10000; border-radius: 6px;
}

:focus-visible{
  outline: 3px solid var(--green-emph);
  outline-offset: 2px;
}


.site-header{
  position: sticky; top: 0; z-index: 999;
  background: var(--white);
  box-shadow: var(--shadow-header);
}

.header-inner{
  display:flex; align-items:center; gap: 1rem;
  padding: .75rem 0;
}

.brand{ display:flex; align-items:center; gap: .75rem; min-width: 0; }
.logo{ height: 60px; width: auto; flex: 0 0 auto; }
.site-title{
  font-size: 1.125rem; font-weight: 700; color: var(--green-deep); white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}

.primary-nav{ margin-left: auto; }

.menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap: .5rem;
  flex-wrap: nowrap; white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.menu::-webkit-scrollbar{ height: 6px; }
.menu::-webkit-scrollbar-thumb{ background: #CBD8D4; border-radius: 4px; }


.btn-nav{
  display:inline-block; text-decoration:none; font-weight: 700;
  color: var(--green-deep);
  background: #EAF2EF; 
  border: 1px solid #D9E5E1;
  padding: .5rem .7rem;
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  transition: background var(--ts-1) ease, color var(--ts-1) ease, transform var(--ts-1) ease;
}
.btn-nav:hover,
.btn-nav:focus-visible{ background:#DBE9E3; transform: translateY(-1px); }


.nav-toggle{
  display:none; margin-left: auto;
  border:none; background: transparent; padding:.4rem; border-radius: 6px; cursor:pointer;
}
.nav-toggle:hover{ background:#f0f4f3; }
.nav-toggle-bar{
  display:block; width: 26px; height: 2px; background: var(--green-deep);
  margin: 5px 0;
}


.hero{
  position: relative; min-height: clamp(420px, 60vh, 720px);
  display:grid; align-items:center;
  color: var(--white);
  background: radial-gradient(1200px 400px at 80% 10%, rgba(27,94,60,0.25), rgba(10,47,31,0.55));
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media::before{
  content:""; position:absolute; inset:0;
  background: url('../img/bg.png') center/cover no-repeat;
  filter: blur(6px) saturate(0.9);
  transform: scale(1.03);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,47,31,0.55), rgba(10,47,31,0.75));
}
.hero-content{ position:relative; z-index:1; padding: 3.5rem 0; }
.hero-title{ margin:0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight:800; letter-spacing:.2px; }
.hero-subtitle{ margin: 0 0 1.25rem; max-width: 60ch; color: #EAF3EF; }
.hero-ctas{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top: .25rem; }
.hero-aside{ margin-top: 1.25rem; display:flex; align-items:center; gap:.75rem; opacity:.98; }
.hero-accent{ filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25)); border-radius: 8px; }


.section{ padding: 3.25rem 0; background: var(--surface); }
.section-alt{ background: #F0F5F3; }
.section-title{ margin:0 0 .75rem; font-size: clamp(1.35rem, 2.2vw, 1.9rem); color: var(--green-deep); }
.section-intro{ margin:0 0 1.25rem; color:#32413B; }

.grid{ display:grid; gap: clamp(.9rem, 2vw, 1.25rem); }
.services-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.why-grid{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cases-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.insights-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card{
  background: var(--white); border: 1px solid #E4ECEA; border-radius: var(--radius);
  padding: 1rem 1rem 1.1rem;
  box-shadow: var(--shadow-1);
}
.card-title{ margin:0 0 .5rem; font-size: 1.05rem; color: var(--charcoal); }

.pill{
  background: linear-gradient(180deg, #FFFFFF, #FBFDFB);
  border: 1px solid #E4ECEA;
  border-radius: var(--radius);
  padding: 1rem 1rem 1.1rem;
  box-shadow: var(--shadow-1);
}

.metrics{
  display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 720px){ .metrics{ grid-template-columns: repeat(4,1fr); } }
.metric{
  background: var(--white); border: 1px solid #E4ECEA; border-radius: var(--radius);
  padding: 1rem; text-align:center; box-shadow: var(--shadow-1);
}
.metric-number{
  font-weight: 800; color: var(--green-deep); font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-variant-numeric: tabular-nums;
}
.metric-label{ color:#3C4B45; }

.about-grid{ display:grid; gap: 1rem; grid-template-columns: 1fr; }
.about-copy p{ margin-top:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: .7rem 1rem; font-weight:700; text-decoration:none; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--ts-1) ease, box-shadow var(--ts-1) ease, background var(--ts-1) ease, color var(--ts-1) ease;
  box-shadow: var(--shadow-2);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--green-accent); color: var(--white); }
.btn-primary:hover,
.btn-primary:focus-visible{ background: #185336; }
.btn-secondary{
  background: #E6EFEA; color: var(--green-deep); border-color:#D9E5E1; box-shadow: var(--shadow-1);
}
.btn-secondary:hover,
.btn-secondary:focus-visible{ background: #DBE9E3; }

.contact-grid{ display:grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 960px){ .contact-grid{ grid-template-columns: 1.2fr .8fr; } }
.contact-form .field{ display:flex; flex-direction:column; gap:.4rem; }
.contact-form input,
.contact-form textarea{
  background: var(--white); border: 1px solid #DDE7E4; border-radius: 8px;
  padding: .75rem .85rem; font: inherit; color: var(--charcoal);
}
.field-check{ display:flex; align-items:flex-start; gap:.5rem; margin-top:.25rem; }
.form-actions{ margin-top: .35rem; }
.form-note{ color:#3C4B45; font-size: .95rem; margin-top:.35rem; }
.form-status{ margin-top: .5rem; font-weight:700; }

.contact-aside{ display:grid; gap: .9rem; }
.contact-card{
  background: #FFFFFF; border: 1px solid #E4ECEA; border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow-1);
}
.contact-card h3{ margin-top:0; color: var(--green-deep); }

.site-footer{
  background: var(--white);
  border-top: 1px solid #E4ECEA;
  box-shadow: 0 -8px 22px rgba(0,0,0,0.06);
}
.footer-inner{ padding: 1.2rem 0; text-align:center; }
.fineprint{ color:#4A5852; }


.reveal{
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.revealed{ opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .reveal, .revealed{ opacity:1; transform:none; transition: none; }
}


.accordion{ display:grid; gap:.5rem; }
.accordion-item{
  background: var(--white); border: 1px solid #E4ECEA; border-radius: var(--radius);
  box-shadow: var(--shadow-1); overflow: clip;
}
.accordion-trigger{
  appearance:none; width: 100%; text-align: left;
  background: #FFFFFF; color: var(--charcoal);
  padding: .9rem 1rem; border: none; font-weight: 700; cursor: pointer;
  position: relative;
}
.accordion-trigger::after{
  content:"+"; position:absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--green-deep); font-weight:900;
}
.accordion-trigger[aria-expanded="true"]::after{ content:"–"; }
.accordion-panel{ padding: 0 1rem 1rem; }