:root { --green: #5FB83A; --green2: #3E8F26; --gold: #F2B33D; --dark: #101A12; --dark2: #182518; --text: #18201A; --muted: #63705F; --light: #F7FAF4; --cream: #FCFBF5; --white: #fff; --border: #E3EADD; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter,Arial,Helvetica,sans-serif; color: var(--text); background: var(--white); line-height: 1.58; } a { text-decoration: none; color: inherit; } .container { width: min(1160px,92%); margin: auto; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } header { position: sticky; top: 0; z-index: 50; background: rgba(16,26,18,.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); } .nav { height: 76px; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; } .logo img { height: 30px; width: auto; display: block; } nav { display: flex; gap: 30px; align-items: center; } nav a { color: #E6EEE3; font-size: 14px; font-weight: 700; } nav a:hover { color: var(--green); } .phone { border: 1px solid #3B6B2C; border-radius: 25px; padding: 10px 16px; } .phone:hover { background: rgba(95,184,58,.14); color: #fff!important; } .navcta { background: var(--green); color: #0B1508!important; padding: 11px 18px; border-radius: 25px; transition: background .18s; } .navcta:hover { background: #74D04C; color: #0B1508!important; } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; background: none; border: 0; cursor: pointer; padding: 0; z-index: 70; position: relative; } .hamburger span { display: block; width: 26px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; position: fixed; top: 76px; left: 0; right: 0; bottom: 0; background: var(--dark); z-index: 55; padding: 6px 24px 30px; overflow-y: auto; } .mobile-menu.open { display: block; } .mobile-menu>a { display: block; padding: 17px 4px; color: #E6EEE3; font-size: 15px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-services { border-bottom: 1px solid rgba(255,255,255,.08); } .mobile-services-toggle { width: 100%; text-align: left; background: none; border: 0; color: #E6EEE3; font-size: 15px; font-weight: 700; padding: 17px 4px; display: flex; justify-content: space-between; align-items: center; font-family: inherit; cursor: pointer; } .mobile-submenu { display: none; padding-bottom: 6px; } .mobile-submenu.open { display: block; } .mobile-submenu a { display: block; padding: 12px 4px 12px 16px; color: #C3CFBE; font-size: 14px; font-weight: 600; } .mobile-services-toggle.open .caret { transform: rotate(180deg); display: inline-block; } .mobile-phone { display: block; margin: 24px 0 0; text-align: center; border: 1px solid #3B6B2C; border-radius: 25px; padding: 13px; color: #fff!important; font-weight: 700; } .mobile-cta { display: block; margin-top: 14px; text-align: center; background: var(--green); color: #0B1508!important; padding: 14px; border-radius: 25px; font-weight: 900; } .navitem { position: relative; } .navitem>a { display: flex; align-items: center; gap: 5px; } .navitem .caret { font-size: 10px; } .navitem:after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; } .dropdown { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%); background: #16221A; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px; min-width: 200px; box-shadow: 0 25px 60px rgba(0,0,0,.45); display: none; z-index: 60; } .navitem:hover .dropdown, .navitem:focus-within .dropdown { display: block; } .dropdown a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; } .dropdown a:hover { background: rgba(95,184,58,.15); color: var(--green); } .hero { padding: 0; color: #fff; position: relative; overflow: hidden; background: linear-gradient(120deg,#0E1810 0%,#16261A 52%,#1E3722 100%); } .hero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 520px at 78% 10%,rgba(95,184,58,.20),transparent 62%),radial-gradient(620px 420px at 8% 90%,rgba(242,179,61,.10),transparent 65%); } .hero:after { content: ""; position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(900px 500px at 25% 10%,#000,transparent 78%); } .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .78fr; gap: 60px; align-items: flex-start; padding: 34px 0 60px; } .eyebrow { display: inline-block; background: rgba(95,184,58,.16); color: #BFF2A0; border: 1px solid #3E7F2A; padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 800; letter-spacing: .4px; } .hero h1 { font-size: clamp(42px,5.3vw,66px); line-height: 1.04; letter-spacing: -2.4px; margin: 20px 0; } .green { color: var(--green); } .hero p { font-size: 18px; color: #D6E2D3; max-width: 650px; } .hero-points { display: flex; gap: 22px; margin: 30px 0; } .point { flex: 1; border-left: 2px solid var(--green); padding-left: 14px; } .point strong { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; } .point small { color: #AFBFAC; line-height: 1.5; display: block; } .arrow { font-size: 34px; color: var(--green); margin: 0 0 -5px 0; } .btn { display: inline-block; border: 0; cursor: pointer; background: var(--green); color: #0B1508; font-weight: 900; padding: 17px 26px; border-radius: 9px; box-shadow: 0 10px 26px rgba(95,184,58,.26); font-size: 15px; transition: background .18s,transform .18s; text-align: center; } .btn:hover { background: #74D04C; transform: translateY(-2px); } .micro { font-size: 12.5px; color: #AFBFAC; margin-top: 12px; } .formcard { background: #fff; color: var(--text); border-radius: 14px; padding: 30px; box-shadow: 0 25px 70px rgba(0,0,0,.35); border-top: 4px solid var(--green); } .formcard h2 { margin: 0 0 6px; font-size: 25px; letter-spacing: -.6px; } .formcard p { margin: 0 0 20px; color: var(--muted); font-size: 14px; } .formcard input, .formcard select { width: 100%; padding: 14px; border: 1px solid #DDE5D9; border-radius: 8px; margin: 0 0 11px; font-size: 14px; background: #fff; font-family: inherit; color: var(--text); } .formcard input:focus, .formcard select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(95,184,58,.16); } .formcard .btn { width: 100%; margin-top: 4px; } .privacy { text-align: center; font-size: 11.5px; color: #7C8A79; margin-top: 10px; } .strip { background: var(--cream); border-bottom: 1px solid var(--border); } .stripgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; } .stripitem { padding: 27px 22px; border-right: 1px solid var(--border); } .stripitem:first-child { padding-left: 0; } .stripitem:last-child { border: 0; padding-right: 0; } .icon { color: var(--green2); font-size: 25px; font-weight: 900; } .stripitem strong { display: block; margin: 6px 0 4px; font-size: 14.5px; } .stripitem small { color: var(--muted); line-height: 1.5; display: block; } section { padding: 92px 0; } .sectionhead { text-align: center; max-width: 760px; margin: 0 auto 45px; } .kicker { color: var(--green2); font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; } .sectionhead h2 { font-size: 42px; line-height: 1.1; letter-spacing: -1.5px; margin: 10px 0; } .sectionhead p { color: var(--muted); } .services .sectionhead p { color: #B6C4B3; } .process { background: var(--light); padding-bottom: 54px; } .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .step { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 34px 30px 30px; text-align: center; box-shadow: 0 10px 30px rgba(24,45,20,.05); position: relative; } .num { position: absolute; left: 17px; top: 15px; width: 31px; height: 31px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-weight: 900; color: #0B1508; } .step .icon { font-size: 40px; margin: 16px 0 10px; } .step h3 { margin: 5px 0 10px; letter-spacing: -.4px; } .step p { color: var(--muted); font-size: 14.5px; margin: 0; } .services { background: var(--dark); color: #fff; padding-bottom: 54px; } .servicegrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .service { background: #1A281C; border: 1px solid #2C3C2D; border-radius: 12px; padding: 27px 22px; transition: border-color .2s,transform .2s; } .service:hover { border-color: #5FB83A; transform: translateY(-3px); } .service h3 { font-size: 17px; margin: 13px 0 9px; letter-spacing: -.3px; } .service p { font-size: 13.5px; color: #B6C4B3; } .main-service { border-color: #4E9A2F; box-shadow: inset 0 0 0 1px rgba(95,184,58,.14); } .service-tag { font-size: 10px; color: #BFF2A0; font-weight: 900; text-transform: uppercase; } .focus { margin: 34px auto 0; max-width: 880px; border: 1px solid rgba(242,179,61,.42); background: rgba(242,179,61,.08); border-radius: 12px; padding: 22px 26px; display: flex; gap: 18px; align-items: center; } .focus .icon { font-size: 36px; color: var(--gold); } .focus h3 { margin: 0; letter-spacing: -.4px; } .focus p { margin: 3px 0 0; color: #CFDACC; } .industries { background: #fff; } .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 920px; margin: 0 auto; } .chip { border: 1px solid var(--border); background: var(--light); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; color: #2F3D2C; } .why { background: var(--light); border-top: 1px solid var(--border); } .whygrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .whycard { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: 13px; padding: 30px 26px; box-shadow: 0 10px 30px rgba(24,45,20,.05); } .whycard .icon { font-size: 30px; } .whycard h3 { margin: 12px 0 10px; font-size: 19px; letter-spacing: -.4px; } .whycard p { color: var(--muted); font-size: 14.5px; margin: 0; } .inner { background: #fff; } .page { display: none; } .page.active { display: block; } .servicehero { background: linear-gradient(120deg,#0E1810,#1B3120); color: #fff; padding: 95px 0 75px; position: relative; overflow: hidden; } .servicehero:before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 420px at 85% 5%,rgba(95,184,58,.18),transparent 62%); } .servicehero .container { position: relative; z-index: 2; } .servicehero .kicker { color: #9BE07A; } .servicehero h1 { font-size: 52px; line-height: 1.05; letter-spacing: -2px; max-width: 900px; margin: 12px 0; } .servicehero p { font-size: 18px; color: #CBD8C8; max-width: 780px; } .copy { max-width: 900px; margin: auto; } .copy h2 { font-size: 30px; margin-top: 45px; letter-spacing: -.8px; } .copy p { color: #525F50; font-size: 16.5px; } .copy ul { color: #525F50; } .callbox { margin: 50px 0 0; background: var(--light); border: 1px solid var(--border); border-radius: 13px; padding: 36px 30px; text-align: center; } .callbox h2 { margin-top: 0; letter-spacing: -.8px; } .callbox p { color: var(--muted); max-width: 56ch; margin: 0 auto 20px; } .svc-highlights { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 60px; } .svc-highlight { background: var(--light); border: 1px solid var(--border); border-radius: 12px; padding: 24px; } .svc-highlight .icon { color: var(--green2); font-size: 23px; font-weight: 900; } .svc-highlight strong { display: block; font-size: 15px; margin: 10px 0 5px; } .svc-highlight small { color: var(--muted); font-size: 13.5px; line-height: 1.55; display: block; } .svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-bottom: 14px; } .svc-card { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 28px; box-shadow: 0 10px 30px rgba(24,45,20,.05); } .svc-card .icon { font-size: 30px; display: block; margin-bottom: 14px; } .svc-card h3 { margin: 0 0 8px; font-size: 16.5px; letter-spacing: -.3px; } .svc-card p { margin: 0; color: var(--muted); font-size: 14.5px; } .callout { margin: 46px auto 0; max-width: 880px; border: 1px solid #C6E6B2; background: #F2FAEC; border-radius: 12px; padding: 22px 26px; display: flex; gap: 18px; align-items: center; } .callout .icon { font-size: 34px; color: var(--green2); } .callout h3 { margin: 0; font-size: 16.5px; } .callout p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; } .faqs { max-width: 900px; margin: auto; } .faq { border-bottom: 1px solid var(--border); padding: 4px 0; } .faq summary { cursor: pointer; font-weight: 800; font-size: 17px; padding: 20px 40px 20px 0; position: relative; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary:after { content: "+"; position: absolute; right: 6px; top: 15px; font-size: 26px; color: var(--green2); font-weight: 400; transition: transform .2s; } .faq[open] summary:after { transform: rotate(45deg); } .faq p { color: var(--muted); margin: 0 0 20px; } .cta { background: linear-gradient(110deg,#3E8F26,#62BE38); color: #fff; padding: 58px 0; } .ctagrid { display: flex; justify-content: space-between; gap: 35px; align-items: center; } .cta h2 { font-size: 38px; line-height: 1.1; margin: 0 0 10px; letter-spacing: -1.2px; } .cta p { margin: 0; color: #EEF9E9; } .darkbtn { background: #101A12; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.22); } .darkbtn:hover { background: #1E3222; } footer { background: var(--dark); color: #D7DED5; padding: 55px 0 20px; } .footgrid { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr 1.1fr; gap: 35px; } .footer-logo img { height: 26px; width: auto; display: block; margin-bottom: 14px; } .footgrid p { color: #9BA899; font-size: 13px; } .footgrid h4 { margin: 0 0 12px; color: #fff; } .footgrid a { color: #C6CFC4; font-size: 13px; display: block; padding: 4px 0; } .footgrid a:hover { color: var(--green); } .contact { font-size: 14px; } .contact strong { color: #fff; display: block; margin-bottom: 8px; } .copyright { border-top: 1px solid #26332A; margin-top: 35px; padding-top: 17px; text-align: center; color: #82907F; font-size: 12px; } .mobilebar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; background: rgba(16,26,18,.97); border-top: 1px solid rgba(255,255,255,.12); padding: 10px 12px; gap: 10px; } .mobilebar a { flex: 1; text-align: center; padding: 14px 8px; border-radius: 9px; font-weight: 900; font-size: 15px; } .mobilebar .call { border: 1.5px solid rgba(255,255,255,.3); color: #fff; } .mobilebar .book { background: var(--green); color: #0B1508; } @media (max-width:900px){ nav {  display: none; }  .hamburger {  display: flex; }  .hero-grid {  grid-template-columns: 1fr;  padding: 28px 0 46px;  gap: 38px; }  .hero {  min-height: auto; }  .formcard {  max-width: 600px; }  .stripgrid {  grid-template-columns: repeat(2,1fr); }  .stripitem {  padding: 24px 18px!important;  border-bottom: 1px solid var(--border); }  .stripitem:nth-child(2n) {  border-right: 0; }  .servicegrid {  grid-template-columns: repeat(2,1fr); }  .steps, .whygrid {  grid-template-columns: 1fr; }  .footgrid {  grid-template-columns: 1fr 1fr; }  .ctagrid {  display: block; }  .cta .btn {  margin-top: 22px; }  .svc-highlights, .svc-grid {  grid-template-columns: 1fr; }  .callout, .focus {  flex-direction: column;  text-align: center; }  section {  padding: 66px 0; }  .mobilebar {  display: flex; }  body {  padding-bottom: 74px; }  .mobile-menu {  bottom: 74px; } } @media (max-width:600px){ .hero h1 {  font-size: 40px;  letter-spacing: -1.6px; }  .hero-points {  display: block; }  .point {  margin: 14px 0; }  .stripgrid, .footgrid {  grid-template-columns: 1fr; }  .stripitem {  border-right: 0; }  .servicegrid {  grid-template-columns: 1fr!important; }  .sectionhead h2 {  font-size: 32px; }  .servicehero h1 {  font-size: 38px; }  .btn {  width: 100%; } } @media (prefers-reduced-motion:reduce){ * {  transition: none!important;  scroll-behavior: auto!important; } }