:root {
  --green-950: #08271c;
  --green-900: #0a3425;
  --green-800: #0a4d32;
  --green-700: #0a6c43;
  --green-600: #177d50;
  --sage: #9bc17e;
  --sage-light: #dceacf;
  --mint: #eff5ea;
  --ink: #111916;
  --muted: #637069;
  --offwhite: #f5f6f1;
  --white: #ffffff;
  --line: #dce1da;
  --radius-lg: 32px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --shadow: 0 30px 80px rgba(10, 52, 37, .13);
  --container: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--offwhite);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: var(--container); margin-inline: auto; }
.section { padding: 118px 0; }
.skip-link { position: absolute; left: -9999px; top: 10px; z-index: 999; background: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { left: 10px; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 0;
  right: 0;
  pointer-events: none;
}
.nav-shell {
  height: 72px;
  padding: 0 16px 0 22px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(250,252,248,.88);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(17,25,22,.09);
  pointer-events: auto;
  transition: .3s ease;
}
.site-header.scrolled .nav-shell { box-shadow: 0 18px 50px rgba(7,40,27,.15); }
.brand { display: inline-flex; align-items: center; width: 168px; flex: 0 0 auto; }
.brand img { width: 100%; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.desktop-nav a { color: #34443c; font-size: 14px; font-weight: 600; padding: 10px 12px; border-radius: 999px; transition: .2s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--green-800); background: var(--mint); }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--green-800); color: #fff; font-size: 14px; font-weight: 700; padding: 13px 18px; border-radius: 999px; transition: .25s ease; }
.nav-cta:hover { transform: translateY(-2px); background: var(--green-700); }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; background: var(--green-800); border: 0; border-radius: 50%; cursor: pointer; }
.menu-toggle span { width: 18px; height: 1.5px; background: #fff; transition: .25s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 790px;
  padding: 150px 0 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(155,193,126,.2), transparent 24%),
    linear-gradient(125deg, #f8f9f4 0%, #edf4e8 55%, #e2eddb 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  border: 1px solid rgba(10,108,67,.13);
  border-radius: 50%;
  top: -180px;
  left: -220px;
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 70px; align-items: center; }
.eyebrow, .section-label { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--green-700); font-size: 12px; font-weight: 800; }
.eyebrow span { width: 28px; height: 2px; background: var(--green-700); }
.hero h1 { max-width: 670px; margin: 22px 0 24px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: clamp(48px, 5.1vw, 76px); line-height: .99; letter-spacing: -.055em; }
.hero h1 em { color: var(--green-700); font-style: normal; }
.hero-copy > p { max-width: 610px; color: #51605a; font-size: 18px; line-height: 1.72; }
.hero-copy strong { color: var(--green-900); }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 800; transition: .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--green-700); box-shadow: 0 12px 30px rgba(10,108,67,.21); }
.button-primary:hover { background: var(--green-800); }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--green-900); font-weight: 700; border-bottom: 1px solid #aac0b2; }
.hero-media { position: relative; min-height: 540px; }
.hero-image-wrap { position: absolute; inset: 10px 18px 40px 70px; border-radius: 46% 46% 28px 28px / 32% 32% 28px 28px; overflow: hidden; box-shadow: var(--shadow); }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hero-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,36,25,.18), transparent 40%); }
.hero-badge { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; border-radius: 18px; box-shadow: 0 14px 38px rgba(17,25,22,.13); backdrop-filter: blur(12px); }
.hero-badge-top { right: -14px; top: 90px; padding: 14px 17px; background: rgba(255,255,255,.92); }
.badge-icon { width: 34px; height: 34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--green-700); font-weight:900; }
.hero-badge b { display: block; font-size: 13px; color: var(--green-900); }
.hero-badge small { display: block; color: #708078; margin-top: 2px; font-size: 11px; }
.hero-badge-bottom { left: 8px; bottom: 74px; padding: 17px 20px; color: #fff; background: rgba(8,39,28,.94); }
.hero-badge-bottom strong { font-family:"Manrope"; font-size: 28px; }
.hero-badge-bottom span { font-size: 11px; line-height: 1.45; color: #cce1d5; }
.orbit { position: absolute; border: 1px solid rgba(10,108,67,.25); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 140px; height: 140px; right: -15px; bottom: 30px; }
.orbit-two { width: 92px; height: 92px; left: 26px; top: 38px; border-style: dashed; }
.hero-marquee { position: absolute; left:0; bottom:0; width:100%; height:72px; background:var(--green-950); color:#fff; overflow:hidden; display:flex; align-items:center; }
.marquee-track { display:flex; width:max-content; gap:30px; align-items:center; white-space:nowrap; animation: marquee 22s linear infinite; }
.marquee-track span { font-family:"Manrope"; font-size:25px; font-weight:600; letter-spacing:.12em; }
.marquee-track i { color:var(--sage); font-size:20px; font-style:normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.about { background: #fff; }
.about-grid { display:grid; grid-template-columns: 160px minmax(0, .92fr) minmax(360px, .78fr); gap: 55px; align-items:start; }
.about-copy h2, .section-head h2, .principles h2, .values-head h2, .vision-block h2, .contact h2 { font-family:"Manrope"; margin:0; letter-spacing:-.045em; line-height:1.06; }
.about-copy h2 { font-size:clamp(40px,4vw,58px); margin-bottom:32px; }
.about-copy p { color:var(--muted); font-size:16px; line-height:1.75; margin:0 0 18px; }
.about-copy .lead { color:#26352e; font-size:20px; line-height:1.58; }
.about-visual { position:relative; padding-bottom:95px; }
.about-image { height:510px; border-radius:28px 28px 120px 28px; overflow:hidden; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-quote { position:absolute; left:-66px; right:16px; bottom:8px; display:flex; gap:18px; align-items:flex-start; padding:22px; background:var(--green-900); color:#fff; border-radius:20px; box-shadow:0 20px 50px rgba(8,39,28,.25); }
.about-quote img { width:44px; height:38px; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
.about-quote p { margin:0; font-size:14px; line-height:1.65; color:#e7f0eb; }

.services { background: var(--offwhite); }
.section-head { display:grid; grid-template-columns:1fr .72fr; align-items:end; gap:70px; margin-bottom:46px; }
.section-head h2 { max-width:670px; margin-top:18px; font-size:clamp(40px,4.3vw,62px); }
.section-head > p { color:var(--muted); line-height:1.7; margin:0 0 4px; }
.service-grid { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:18px; }
.service-card { position:relative; min-height:470px; border-radius:26px; overflow:hidden; background:#1d3329; isolation:isolate; }
.service-card-large { min-height:540px; }
.service-image { position:absolute; inset:0; }
.service-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.service-card:nth-child(2) .service-image img, .service-card:nth-child(3) .service-image img { filter:saturate(.85); }
.service-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(6,35,24,.94) 0%, rgba(6,35,24,.34) 48%, rgba(6,35,24,.06) 75%); z-index:1; }
.service-content { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:26px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:end; color:#fff; }
.service-no { align-self:start; font-size:11px; letter-spacing:.12em; color:#bcd5c6; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:7px 9px; }
.service-content h3 { margin:0 0 8px; font-family:"Manrope"; font-size:28px; }
.service-content p { margin:0; color:#d8e5de; font-size:13px; line-height:1.55; }
.service-arrow { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--green-900); transition:.25s ease; }
.service-card:hover .service-image img { transform:scale(1.045); }
.service-card:hover .service-arrow { background:var(--sage); transform:rotate(8deg); }

.principles { position:relative; color:#fff; background:linear-gradient(140deg,var(--green-950),#0b4e33); overflow:hidden; }
.principles::before { content:""; position:absolute; width:560px; height:560px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-180px; top:-230px; box-shadow:0 0 0 80px rgba(255,255,255,.02),0 0 0 160px rgba(255,255,255,.015); }
.principles-grid { position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }
.section-label.light { color:var(--sage); }
.principles-copy h2 { font-size:clamp(42px,4.5vw,64px); margin:20px 0 24px; }
.principles-copy p { color:#c4d7cc; line-height:1.75; font-size:16px; max-width:590px; }
.button-light { margin-top:22px; background:var(--sage); color:var(--green-950); }
.button-light:hover { background:#b6d69e; }
.principles-list { border-top:1px solid rgba(255,255,255,.18); }
.principle-row { display:grid; grid-template-columns:58px 1fr; gap:18px; padding:27px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.principle-row > span { color:var(--sage); font-size:12px; letter-spacing:.12em; }
.principle-row h3 { margin:0 0 8px; font-family:"Manrope"; font-size:25px; }
.principle-row p { margin:0; color:#b8cdc0; font-size:14px; line-height:1.6; }

.values { background:#fff; overflow:hidden; }
.values-head { display:grid; grid-template-columns:180px .65fr .5fr; gap:46px; align-items:end; margin-bottom:50px; }
.values-head h2 { font-size:clamp(64px,8vw,112px); color:var(--green-800); letter-spacing:-.07em; }
.values-head p { color:var(--muted); line-height:1.65; margin:0 0 14px; }
.values-track { display:grid; grid-template-columns:repeat(7, minmax(170px,1fr)); gap:12px; min-width:1190px; }
.value-card { min-height:300px; padding:24px 20px; border:1px solid var(--line); border-radius:20px; background:#fbfcf9; transition:.25s ease; }
.value-card:nth-child(even) { background:var(--mint); }
.value-card span { display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:var(--green-800); color:#fff; font-family:"Manrope"; font-size:26px; font-weight:800; }
.value-card h3 { font-family:"Manrope"; font-size:20px; margin:70px 0 10px; }
.value-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.value-card:hover { transform:translateY(-7px); box-shadow:0 20px 50px rgba(8,39,28,.1); border-color:#bcd2c4; }

.vision { background:#ecf2e8; }
.vision-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:78px; align-items:stretch; }
.vision-media { position:relative; min-height:720px; border-radius:28px 28px 150px 28px; overflow:hidden; }
.vision-media img { width:100%; height:100%; object-fit:cover; }
.vision-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,44,29,.48),transparent 52%); }
.vision-caption { position:absolute; z-index:2; left:28px; bottom:28px; color:#fff; letter-spacing:.11em; text-transform:uppercase; font-size:11px; }
.vision-copy { padding:12px 0; }
.vision-block { padding:34px 0 38px; border-bottom:1px solid #cbd7c8; }
.vision-block > span, .mission-title { display:inline-flex; padding:7px 10px; border-radius:8px; color:#fff; background:var(--green-800); font-size:11px; font-weight:800; letter-spacing:.12em; }
.vision-block h2 { font-size:clamp(36px,3.7vw,54px); margin-top:20px; }
.mission-block { padding-top:30px; }
.mission-block ol { list-style:none; padding:0; margin:18px 0 0; }
.mission-block li { display:grid; grid-template-columns:46px 1fr; gap:15px; padding:16px 0; border-bottom:1px solid #cbd7c8; align-items:start; }
.mission-block li span { color:var(--green-700); font-size:11px; font-weight:800; }
.mission-block li p { margin:0; line-height:1.55; font-size:14px; color:#405148; }

.contact { background:#fff; }
.contact-card { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr .8fr; gap:70px; min-height:480px; padding:66px; border-radius:34px; color:#fff; background:linear-gradient(120deg,#0a3325 0%,#0b6241 100%); box-shadow:var(--shadow); }
.contact-card::before { content:""; position:absolute; width:550px; height:550px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-180px; bottom:-260px; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.015); }
.contact-copy, .contact-info { position:relative; z-index:2; }
.contact h2 { max-width:590px; font-size:clamp(44px,4.8vw,68px); margin:20px 0; }
.contact-copy > p { color:#c9dbd1; line-height:1.7; max-width:520px; }
.button-white { margin-top:20px; background:#fff; color:var(--green-900); }
.button-white:hover { background:var(--sage-light); }
.contact-info { align-self:center; display:grid; gap:26px; }
.contact-item { display:grid; grid-template-columns:48px 1fr; gap:15px; align-items:start; }
.contact-icon { width:45px; height:45px; display:grid; place-items:center; border-radius:14px; color:var(--green-950); background:var(--sage); font-size:20px; }
.contact-item small { display:block; color:#9fc2ae; font-size:11px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.contact-item a, .contact-item address { color:#fff; font-size:15px; line-height:1.55; font-style:normal; }
.contact-mark { position:absolute; opacity:.07; width:320px; right:160px; bottom:-120px; transform:rotate(-12deg); }
.contact-mark img { filter:brightness(0) invert(1); }

.site-footer { padding:35px 0 28px; background:#f4f5f0; }
.footer-top { display:grid; grid-template-columns:1fr 1fr auto; gap:40px; align-items:center; padding-bottom:30px; }
.footer-brand { width:185px; }
.footer-top p { color:#53635b; margin:0; font-size:13px; line-height:1.7; }
.footer-top p span { color:var(--green-700); font-weight:700; }
.back-top { font-size:13px; font-weight:700; color:var(--green-800); }
.footer-bottom { display:flex; justify-content:space-between; gap:30px; padding-top:22px; border-top:1px solid #d7ded8; color:#7b8881; font-size:11px; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease; }
.js .reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.22s; }

@media (max-width: 1100px) {
  :root { --container: min(100% - 38px, 960px); }
  .desktop-nav { display:none; }
  .nav-cta { margin-left:auto; }
  .hero-grid { gap:40px; }
  .hero h1 { font-size:56px; }
  .about-grid { grid-template-columns:120px 1fr; }
  .about-visual { grid-column:2; max-width:650px; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .service-card-large { grid-row:span 2; min-height:700px; }
  .service-card { min-height:340px; }
  .values { overflow-x:auto; }
  .values-track { padding-right:30px; }
  .values-head { grid-template-columns:140px 1fr; }
  .values-head p { grid-column:2; }
  .vision-grid { gap:45px; }
  .contact-card { padding:50px; gap:40px; }
}

@media (max-width: 820px) {
  :root { --container: calc(100% - 28px); }
  .section { padding:86px 0; }
  .site-header { top:10px; }
  .nav-shell { height:64px; padding:0 10px 0 16px; }
  .brand { width:148px; }
  .desktop-only { display:none; }
  .menu-toggle { display:flex; margin-left:auto; }
  .mobile-menu { position:absolute; top:74px; left:14px; right:14px; display:grid; gap:4px; padding:14px; border-radius:24px; background:#fff; box-shadow:0 24px 60px rgba(7,40,27,.17); pointer-events:auto; opacity:0; transform:translateY(-10px) scale(.98); visibility:hidden; transition:.25s ease; }
  .mobile-menu.open { opacity:1; transform:none; visibility:visible; }
  .mobile-menu a { padding:13px 14px; border-radius:14px; color:#34453c; font-weight:700; font-size:14px; }
  .mobile-menu a:hover { background:var(--mint); }
  .mobile-menu .mobile-cta { margin-top:5px; color:#fff; background:var(--green-800); }

  .hero { min-height:auto; padding-top:115px; padding-bottom:72px; }
  .hero-grid { grid-template-columns:1fr; gap:30px; }
  .hero h1 { font-size:clamp(44px,12vw,62px); }
  .hero-copy > p { font-size:16px; }
  .hero-media { min-height:510px; }
  .hero-image-wrap { inset:0 18px 30px 28px; }
  .hero-badge-top { right:0; top:70px; }
  .hero-badge-bottom { left:0; bottom:60px; }
  .hero-marquee { position:relative; margin-top:25px; margin-bottom:-72px; }

  .about-grid { grid-template-columns:1fr; gap:30px; }
  .about-visual { grid-column:auto; }
  .about-quote { left:14px; right:14px; }
  .section-head { grid-template-columns:1fr; gap:18px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card, .service-card-large { min-height:420px; grid-row:auto; }
  .principles-grid { grid-template-columns:1fr; gap:48px; }
  .values-head { grid-template-columns:1fr; gap:14px; }
  .values-head p { grid-column:auto; }
  .values-head h2 { font-size:74px; }
  .vision-grid { grid-template-columns:1fr; }
  .vision-media { min-height:480px; }
  .contact-card { grid-template-columns:1fr; padding:40px 28px; }
  .footer-top { grid-template-columns:1fr auto; }
  .footer-top p { grid-column:1 / -1; grid-row:2; }
}

@media (max-width: 520px) {
  .section { padding:72px 0; }
  .brand { width:135px; }
  .hero h1 { letter-spacing:-.045em; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:10px; }
  .hero-media { min-height:430px; }
  .hero-image-wrap { inset:0 6px 28px 14px; border-radius:40% 40% 24px 24px / 25% 25% 24px 24px; }
  .hero-badge-top { top:45px; right:-4px; padding:11px 13px; }
  .hero-badge-top small { display:none; }
  .hero-badge-bottom { left:-4px; bottom:50px; padding:13px 15px; }
  .hero-badge-bottom strong { font-size:24px; }
  .about-copy h2, .section-head h2, .principles-copy h2, .vision-block h2 { font-size:38px; }
  .about-image { height:430px; }
  .service-card, .service-card-large { min-height:390px; }
  .service-content { padding:20px; }
  .values-head h2 { font-size:58px; }
  .vision-media { min-height:420px; border-radius:24px 24px 90px 24px; }
  .contact-card { width:calc(100% - 16px); padding:35px 22px; border-radius:26px; }
  .contact h2 { font-size:42px; }
  .contact-item { grid-template-columns:42px 1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-top p { grid-column:auto; grid-row:auto; }
  .footer-bottom { flex-direction:column; gap:6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .reveal { opacity:1; transform:none; }
}
