* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --primary-green: #2c5e2a;

     --secondary-green: #fefefe;
     /*#6b8c5c;*/
     --primary-orange: #e14539fe;
     --accent-orange: #f8ca89;
     --light-green: #e7f0e3;
     --accent-orange: #ffb347;
     --background-white: #fef9e8;
     --text-dark: #2d3e2b;
     --text-muted: #4a6f4a;
 }

 body {
     font-family: 'Poppins', system-ui, 'Segoe UI', sans-serif;
     background: var(--background-white);
     color: var(--primary-green);
 }

 /* Green & earthy, friendly theme */
 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 nav {
     background: var(--background-white);
     padding: 20px 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .logo h2 {
     font-size: 2rem;
     color: var(--primary-green);
 }

 .logo p {
     color: var(--secondary-green);
     font-weight: 500;
 }

 .logo img {
     height: 50px;
     margin-right: 12px;
 }

 .hero-friendly {
     background: var(--light-green);
     padding: 7.5em 0;
     margin-top: 1em;
     text-align: center;
 }

 .hero-friendly h1 {
     font-size: 2.6rem;
     color: var(--primary-green);
 }

 .hero-friendly p {
     font-size: 1.2rem;
     margin-top: 10px;
     color: var(--text-muted);
 }

 .btn-green {
     background: var(--primary-green);
     color: white;
     padding: 12px 32px;
     border-radius: 40px;
     border: 2px solid var(--primary-green);
     text-decoration: none;
     font-weight: bold;
     display: inline-block;
     margin-top: 20px;
     transition: all 0.2s ease;
 }

 .btn-green:hover {
     background: var(--secondary-green);
     border: 2px solid var(--primary-green);
     transform: translateY(-4px);
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }

 .card-grid {
     display: flex;
     gap: 30px;
     margin: 60px 0;
     flex-wrap: wrap;
 }

 .card {
     background: white;
     border-radius: 28px;
     padding: 28px;
     flex: 1;
     min-width: 240px;
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
     transition: transform 0.2s;
     border-bottom: 4px solid var(--primary-green);
 }

 .card:hover {
     transform: translateY(-5px);
 }

 .card h3 {
     font-size: 1.6rem;
     margin-bottom: 12px;
     color: #2c5e2a;
 }

 .card h3 img {
     margin-right: 8px;
     vertical-align: middle;
     height: 40px;
     width: auto;
 }

 .card-picture {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .card-picture-img {
     height: 180px;
     border-radius: 24px;
     margin: 20px 0;
     object-fit: contain;
 }



 .contact-block {
     background: #ffffffd9;
     border-radius: 32px;
     padding: 36px;
     text-align: center;
     margin: 30px 0;
     background: #fffbee;
     border: 1px solid #ffe1a0;
 }

 .local-phone {
     font-size: 2.2rem;
     font-weight: bold;
     margin: 20px 0;
 }

 .local-phone a {
     color: var(--primary-green);
     text-decoration: none;
 }

 footer {
     background: var(--light-green);
     color: var(--text-dark);
     text-align: center;
     padding: 28px;
     margin-top: 40px;
 }

 @media (max-width: 700px) {
     .hero-friendly h1 {
         font-size: 1.9rem;
     }
 }

 /*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
 /* Mobile - 767px */
 @media only screen and (max-width: 767.5px) {
     body.cs-open {
         overflow: hidden;
     }

     #cs-navigation {
         width: 100%;
         /* prevents padding and border from affecting height and width */
         box-sizing: border-box;
         padding: 1rem;
         background-color: var(--background-white);
         box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
         position: fixed;
         z-index: 10000;
     }

     #cs-navigation:before {
         content: "";
         width: 100%;
         height: 0vh;
         background: var(--background-white);
         opacity: 0;
         display: block;
         position: absolute;
         top: 100%;
         right: 0;
         z-index: -1100;
         transition: height 0.5s, opacity 0.5s;
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
     }

     #cs-navigation.cs-active:before {
         height: 150vh;
         opacity: 1;
     }

     #cs-navigation.cs-active .cs-toggle {
         transform: rotate(180deg);
     }

     #cs-navigation.cs-active .cs-ul-wrapper {
         opacity: 1;
         transform: scaleY(1);
         transition-delay: 0.15s;
     }

     #cs-navigation.cs-active .cs-li {
         opacity: 1;
         transform: translateY(0);
     }

     #cs-navigation .cs-container {
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     #cs-navigation .cs-logo {
         max-width: 9.875rem;
         height: 100%;
         margin: 0 auto 0 0;
         /* prevents padding and border from affecting height and width */
         box-sizing: border-box;
         padding: 0;
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 10;
     }

     #cs-navigation .cs-logo img {
         width: 100%;
         height: 100%;
         /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
         object-fit: contain;
     }



     #cs-navigation .cs-active .cs-line1 {
         top: 50%;
         transform: translate(-50%, -50%) rotate(225deg);
     }

     #cs-navigation .cs-active .cs-line2 {
         top: 50%;
         transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
         transform-origin: center;
     }

     #cs-navigation .cs-active .cs-line3 {
         opacity: 0;
         bottom: 100%;
     }

     #cs-navigation .cs-box {
         /* 24px - 28px */
         width: clamp(1.5rem, 2vw, 1.75rem);
         height: 1rem;
         position: relative;
     }

     #cs-navigation .cs-line {
         width: 100%;
         height: 2px;
         background-color: #fafbfc;
         border-radius: 50%;
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }

     #cs-navigation .cs-line1 {
         top: 0;
         transition: transform 0.5s, top 0.3s, left 0.3s;
         animation-duration: 0.7s;
         animation-timing-function: ease;
         animation-direction: normal;
         animation-fill-mode: forwards;
         transform-origin: center;
     }

     #cs-navigation .cs-line2 {
         top: 50%;
         transform: translateX(-50%) translateY(-50%);
         transition: top 0.3s, left 0.3s, transform 0.5s;
         animation-duration: 0.7s;
         animation-timing-function: ease;
         animation-direction: normal;
         animation-fill-mode: forwards;
     }

     #cs-navigation .cs-line3 {
         width: 50%;
         bottom: 0;
         left: 25%;
         transition: bottom 0.3s, opacity 0.3s;
     }

     #cs-navigation .cs-bottom {
         order: 1;
     }
 }

 /*-- -------------------------- -->
<---   Mobile Navigation Menu   -->
<--- -------------------------- -*/
 /* Tablet - 768px */
 @media only screen and (max-width: 767.5px) {
     #cs-navigation .cs-ul-wrapper {
         width: 100%;
         height: auto;
         padding-bottom: 2.4em;
         background-color: var(--background-white);
         overflow: hidden;
         box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
         opacity: 0;
         position: absolute;
         top: 100%;
         left: 0;
         z-index: -1;
         transform: scaleY(0);
         transition: transform 0.4s, opacity 0.3s;
         transform-origin: top;
     }

     #cs-navigation .cs-ul {
         width: 100%;
         height: auto;
         max-height: 65vh;
         margin: 0;
         padding: 3rem 0 0 0;
         overflow: scroll;
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
         gap: 1.25rem;
     }

     #cs-navigation .cs-ul:last-of-type {
         padding-top: 1.25rem;
     }

     #cs-navigation .cs-li {
         text-align: center;
         list-style: none;
         width: 100%;
         margin-right: 0;
         padding: 0;
         opacity: 0;
         /* transition from these values */
         transform: translateY(-4.375rem);
         transition: transform 0.6s, opacity 0.9s;
     }

     #cs-navigation .cs-li-link {
         /* 16px - 24px */
         font-size: clamp(1rem, 2.5vw, 1.5rem);
         line-height: 1.2em;
         text-decoration: none;
         margin: 0;
         padding: 0;
         color: var(--bodyTextColorWhite);
         display: inline-block;
         position: relative;
     }

     #cs-navigation .cs-li-link.cs-active {
         color: var(--primary);
     }

     #cs-navigation .cs-li-link:hover {
         color: var(--primary);
     }

     #cs-navigation .cs-dropdown-toggle {
         margin: auto;
     }

     #cs-navigation .cs-button-solid {
         display: none;
     }
 }

 /*-- -------------------------- -->
<---     Tablet Navigation      -->
<--- -------------------------- -*/
 /* Tablet - 768px */
 @media only screen and (min-width: 768px) {
     #cs-navigation {
         width: 100%;
         /* prevents padding and border from affecting height and width */
         box-sizing: border-box;
         /* 24px - 30px top */
         /* 32px - 40px sides */
         padding: 0;
         background-color: var(--background-white);
         position: fixed;
         z-index: 10000;
     }

     #cs-navigation .cs-container {
         width: 100%;
         max-width: 80rem;
         margin: auto;
         display: flex;
         flex-direction: column;
         position: relative;
     }

     #cs-navigation .cs-nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     #cs-navigation .cs-toggle {
         display: none;
     }

     #cs-navigation .cs-ul-wrapper {
         width: 100%;
         display: flex;
         justify-content: space-between;
     }

     #cs-navigation .cs-ul {
         width: 100%;
         margin: 0;
         padding: 0;
         display: flex;
         justify-content: flex-start;
         align-items: center;
         /* 24px - 48px */
         gap: clamp(1.5rem, 3.5vw, 3rem);
         /* moves the second half of the navigation to the right side of the page */
     }

     #cs-navigation .cs-ul:last-child {
         margin-right: auto;
         justify-content: flex-end;
     }

     #cs-navigation .cs-li {
         list-style: none;
     }

     #cs-navigation .cs-li-link {
         font-size: 1rem;
         line-height: 1.5em;
         text-decoration: none;
         margin: 0;
         color: var(--bodyTextColorWhite);
         position: relative;
         transition: color 0.3s;
     }

     #cs-navigation .cs-li-link:hover {
         color: var(--primary);
     }

     #cs-navigation .cs-li-link.cs-active {
         color: var(--primary);
     }

     #cs-navigation .cs-bottom {
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 0.5rem;
     }

     #cs-navigation .cs-logo {
         width: 100%;
         max-width: 12.8125rem;
         height: auto;
         margin: 0 auto;
         padding: 0;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
         z-index: 100;
     }

     #cs-navigation .cs-logo::before {
         content: "";
         width: 100vw;
         height: 1px;
         background-color: var(--primary-green);
         display: block;
         position: absolute;
         top: 50%;
         right: calc(100% + 1rem);
         transform: translateY(-50%);
     }

     #cs-navigation .cs-logo::after {
         content: "";
         width: 100vw;
         height: 1px;
         background-color: var(--primary-green);
         display: block;
         position: absolute;
         top: 50%;
         left: calc(100% + 1rem);
         transform: translateY(-50%);
     }

     #cs-navigation .cs-logo img {
         width: 100%;
         height: 100%;
         /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
         object-fit: contain;
     }
 }