* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ——— BRAND VARIABLES ——— */
:root {
  /* Colors */
  --white:           #FFFFFF;
  --black:           #000000;
  --primary-dark:    #003C18;
  --primary-base:    #3F6348;

  /* Fonts */
  --font-serif:  'Bitter', serif;
  --font-sans:   'Poppins', sans-serif;
}

body {
  font-family: var(--font-sans);
  color:       var(--black);
  background:  var(--white);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color:       var(--white);
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 1px solid #ccc;

  width: 100%;}
header.navbar {
  width: 100%;
  margin: 0;
  max-width: none;
}


.logo {
  height: 60px;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links li a {
  text-decoration: none;
  font-weight: bold;
  color: #003300;
}
#hero-2274 {
  text-align: left;
  padding: 6rem 2rem 2rem;
  background-color: var(--primary-dark);
  color: white;
}
.cs-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.cs-text {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
.cs-button-solid {
  padding: 0.75rem 1.5rem;
  background: #F76E1F;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
}
.cs-background img {
  width: 100%;
  opacity: 0.3;
  position: absolute;
  z-index: -1;
}
/* Footer Styling */
#cs-footer-274 {
  background-color: #FFFFFF;
  padding: 60px 20px;
  font-family: var(--font-sans);
}
.cs-container {
  max-width: 1200px;
  margin: 0 auto;
display: flex; 
flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.cs-logo-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cs-social {
  display: flex;
  gap: 1rem;
}
.cs-social-link {
  display: inline-block;
}
.cs-nav {
  list-style: none;
  padding: 0;
}
.cs-nav-li {
  margin-bottom: 0.5rem;
}
.cs-header {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.cs-nav-link {
  color: #333;
  text-decoration: none;
}
.cs-nav-link:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    width: 100%;
    padding: 1rem 2rem;
  }

  .nav-links.active {
    display: flex;
  }
}



@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 1rem;
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }

  .menu-toggle span {
    background-color: var(--primary-base);
    height: 3px;
    width: 25px;
    margin: 4px 0;
  }
}

/* === MOBILE MENU OVERRIDES === */
.navbar {
  position: relative; /* for meet page and index page */
}

.cs-toggle {
  display: none; /* hide on desktop */
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  margin-left: auto;
}
.cs-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 24px;
}
.cs-line {
  height: 2px;
  background-color: var(--primary-base);
  margin: 3px 0;
  border-radius: 1px;
}

@media (max-width: 768px) {
  .cs-toggle {
    display: block;
  }

  /* target both index-style and meet-page style nav */
  .nav-links, .cs-nav .cs-ul-wrapper {
    display: none !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background: var(--white);
    z-index: 1000;
    padding: 1rem;
    align-items: center;
  }
  .nav-links.active {
    display: flex !important;
  }
  .cs-nav .cs-ul-wrapper.open {
    display: block !important;
  }

  /* center text */
  .nav-links a, .nav-links li, .cs-nav .cs-ul-wrapper .cs-li {
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }
}
/* Restore header flex layout */
header.navbar {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

/* Ensure nav shifts to the right */
header.navbar nav {
  margin-left: auto !important;
}

/* Make sure you haven’t globally centered all direct children */
header.navbar > * {
  text-align: initial !important;
}
/* —— BIG TITLE & WORD‐BY‐WORD ANIMATION —— */
.cs-title {
  font-size: 4rem;          /* bump up size—tweak as needed */
  line-height: 1.1;
  font-family: var(--font-serif);
  overflow: hidden;         /* ensure clean entry */
}

.cs-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

/* Fade‐in + slide‐up keyframes */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered delays for each word */
.cs-title span:nth-child(1) {
  animation: fadeInUp 0.6s ease-out forwards 0.2s;
}
.cs-title span:nth-child(2) {
  animation: fadeInUp 0.6s ease-out forwards 0.8s;
}
.cs-title span:nth-child(3) {
  animation: fadeInUp 0.6s ease-out forwards 1.4s;
}
/* ——— HERO EQUAL SPACING ——— */
/* ——— HERO EQUAL SPACING ——— */
#hero-2274 {
  /* match whatever value you used for your top padding */
  padding-top:    2rem;
  /* now make the bottom the same */
  padding-bottom: 4rem;
}
/* ——— CONTACT PAGE: TWO COLUMNS + MAP BELOW ——— */
#contact-1750 .cs-content {
  display: block; /* undo any flex wrapping on the whole section */
}

@media (min-width: 769px) {
  /* side-by-side form & info only */
  #contact-1750 .cs-form-group,
  #contact-1750 .cs-info-group {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 1rem);
    margin: 0;
  }
  /* ensure a gap between them */
  #contact-1750 .cs-form-group {
    margin-right: 1rem;
  }
}

/* leave your map container full-width below */
#contact-1750 .cs-map {
  display: block; /* or whatever wrapper you have around your iframe */
  width: 100%;
  margin-top: 2rem; /* space above the map */
}
/* —— CONTACT PAGE: RESTORE BURNT ORANGE HEADINGS & LABELS —— */
#contact-1750 {
  /* no layout changes here — just scope the color below */
}

/* Main page title “Contact Us” */
#contact-1750 h2.cs-title {
  color: var(--primary-base) !important;
}

/* Section subtitles “Location” & “In Person” */
#contact-1750 .cs-topper {
  color: var(--primary-base) !important;
}

/* Right-column header “Contact” */
#contact-1750 .cs-header {
  color: var(--primary-base) !important;
}

/* Left-column form labels “Name *”, “Email *”, etc. */
#contact-1750 .cs-label {
  color: var(--primary-base) !important;
}
/* —— CONTACT PAGE: TIGHTEN UP “Contact Us” SPACING —— */
#contact-1750 {
  /* shrink the gap above & below the entire block */
  padding-top:    1rem !important;
  padding-bottom: 1rem !important;
}

/* —— CONTACT PAGE: TUNE GET IN TOUCH ONLY —— */
@media (min-width: 769px) {
  /* Make “GET IN TOUCH” big */
  #contact-1750 .cs-form-group .cs-topper {
    font-size: 3rem !important;     /* tweak size as desired */
    margin-bottom: 1rem !important;
  }

  /* Keep the info-group toppers small (same as form labels) */
  #contact-1750 .cs-info-group .cs-topper {
    font-size: 1rem !important;     /* match your Name*/Email font */
    margin-bottom: 0.5rem !important;
    text-transform: uppercase;      /* if you like uppercase */
  }

  /* Center the “GET IN TOUCH” in its column */
  #contact-1750 .cs-form-group .cs-content {
margin-top: 3rem !important;
    text-align: center !important;
  }
}
/* —— CONTACT PAGE: RIGHT-COLUMN HEADERS NORMAL CASE —— */
#contact-1750 .cs-info-group .cs-topper {
  text-transform: none !important;
}
/* —— CONTACT PAGE: “GET IN TOUCH” SUBTEXT —— */
#contact-1750 .cs-form-group .cs-subtext {
  display: block;
  margin: 0.5rem 0.5 rem;         /* tighten space above & below */
  font-size: 1rem;                 /* same as form labels */
  font-style: italic;
  color: var(--primary-base);      /* your mid-tone green */
  line-height: 1.4;
}
/* ——— CONTACT PAGE: LIFT LEFT COLUMN ——— */
@media (min-width: 769px) {
  /* Remove any top margin/padding on the form wrapper */
  #contact-1750 .cs-form-group .cs-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Tweak the subtext’s bottom margin so the first field sits up */
  #contact-1750 .cs-form-group .cs-subtext {
    margin-bottom: 0rem !important; /* was 1.5rem */
  }
}
/* —— CONTACT PAGE: DROP RIGHT COLUMN DOWN —— */
@media (min-width: 769px) {
  /* push the info group down */
  #contact-1750 .cs-info-group {
    margin-top: 10rem !important;   /* adjust this value until it lines up */
  }
}
/* —— CONTACT PAGE: TIGHTEN SPACE ABOVE FORM —— */
#contact-1750 {
  padding-top: 0.5rem !important;   /* shrink gap above “Get In Touch”/Name */
}

/* if you’ve still got a subtext above the Name field, tighten its bottom margin */
#contact-1750 .cs-subtext {
  margin-bottom: 0.5rem !important;
}
/* ——— FULL-BLEED SECTIONS ——— */
#hero-2274,
#about-us {
  width: 100%;
  margin: 0 auto;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  max-width: 1600px; /* or whatever you want */
}
#meet-team-1765 .cs-title,
#meet-team-1765 .cs-job 
#meet-team-1765 .cs-topper{
  color: #ef5c3e !important;
}
/* Footer: consistent horizontal layout on desktop, stacked on mobile */
#cs-footer-274 .cs-container{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:flex-start;
}

#cs-footer-274 .cs-logo-group{        /* logo column */
  flex:0 0 240px;
}

#cs-footer-274 .cs-nav{               /* each link column */
  flex:1 1 180px;
  min-width:180px;
}

#cs-footer-274 .cs-header{
  font-weight:700;
  margin-bottom:.75rem;
}

@media (max-width:768px){
  #cs-footer-274 .cs-container{ flex-direction:column; }
}
/* Keep footer logo from stretching */
#cs-footer-274 .cs-logo-img{
  width:auto !important;
  max-width:240px;
  height:auto;
  display:block;
}

/* Safety: images in the footer shouldn't auto-fill width */
#cs-footer-274 img{ max-width:100%; height:auto; }

/* Footer: left / center / right columns */
@media (min-width: 900px) {
  #cs-footer-274 .cs-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }

  /* make three equal lanes */
  #cs-footer-274 .cs-logo-group,
  #cs-footer-274 .cs-nav {
    flex: 1 1 0;
  }

  /* center the first nav (Contact) and right-align the second (Address) */
  #cs-footer-274 .cs-nav:nth-of-type(1) { text-align: center; }
  #cs-footer-274 .cs-nav:nth-of-type(2) { text-align: right; }
}

/* keep the logo a sensible size */
#cs-footer-274 .cs-logo-img {
  width: auto;
  max-width: 240px;
  height: auto;
  display: block;
}
/* About page: make both paragraphs match */
#about-us .cs-text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 1rem;   /* same bottom space on both */
}

/* (optional) tighten the last paragraph under the block */
#about-us .cs-text:last-of-type {
  margin-bottom: 1;
}

/* keep the heading spacing consistent too */
#about-us .cs-title {
  margin-bottom: 2rem !important;
}
/* About page: remove the big gap before the “What Even is…” block */
#about-us .cs-container + .cs-container {
  margin-top: .75rem !important;  /* was 4rem inline */
}

/* Keep the heading-tight spacing inside the block */
#about-us .cs-title {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
#about-us .cs-text:first-of-type {
  margin-top: 0 !important;
}

/* --- ABOUT: tighten space before “What Even is Plant-Based Jerky” --- */

/* kill the big 4rem inline margin on the 2nd container */
#about-us > .cs-container:nth-of-type(2) {
  margin-top: 0.75rem !important;   /* was 4rem auto 0 inline */
}

/* also make sure the first row doesn't add its own large bottom gap */
#about-us > .cs-container:first-of-type {
  margin-bottom: 0.75rem !important;
}

/* tighten heading-to-paragraph spacing inside that second block */
#about-us > .cs-container:nth-of-type(2) .cs-title {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}
#about-us > .cs-container:nth-of-type(2) .cs-text:first-of-type {
  margin-top: 0 !important;
}


/* --- NAVBAR DROPDOWN --- */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  min-width: 180px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  z-index: 1001;
}

/* For UL-based menus, keep list items clean */
.dropdown-menu li {
  margin: 0;
  padding: 0;
}

/* Links inside dropdown */
.dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #003300;
  font-weight: bold;
}

.dropdown-menu a:hover {
  background-color: #f2f2f2;
}

/* Show dropdown on hover (desktop & pointer devices) */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* About arrow — desktop only */
.dropdown > a {
  position: relative;
}

@media (min-width: 769px) {
  .dropdown > a::after {
    content: "▾";
    margin-left: 0.35rem;
    font-size: 0.8em;
  }
}

/* Mobile dropdown: stack nicely under About */
@media (max-width: 768px) {
  .dropdown {
    width: 100%;
    text-align: center;
  }

  .dropdown-menu {
    position: static;
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .dropdown-menu a {
    padding: 0.5rem 0.5rem;
  }
}
/* Force navbar text to always be visible */
.nav-links li a,
.about-label {
    color: #003300 !important;
    font-weight: bold;
}
/* Team member layout */
.team-member {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.team-text {
  flex: 1 1 65%;
  text-align: left;
}

.team-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  font-family: 'Poppins', sans-serif;
}

.team-role {
  font-size: 0.9rem;
  color: #c8e6c9; /* light green accent */
  margin-bottom: 0.75rem;
  font-style: italic;
}

.team-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ffffff;
}

.team-photo {
  flex: 0 0 180px;
}

.team-photo img,
.team-photo .photo-placeholder {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  background: #1f3d2b;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Placeholder styling if no image yet */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a5d6a7;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}

/* =========================
   Meet the Team – Bio Cards
   ========================= */

.team-list {
  max-width: 1200px;
  margin: 2.5rem auto 0 auto;
  display: grid;
  gap: 1.5rem;
}

.team-member {
  display: grid;
  grid-template-columns: 1fr 420px; /* more room for photos */
  gap: 2.5rem;
  align-items: center;              /* center photo vertically */
  padding: 2.25rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.team-text {
  text-align: left;
}

.team-title {
  font-family: "Georgia", serif;
  font-weight: 700;
  font-size: 2.05rem; /* bigger than body, smaller than your main title */
  line-height: 1.15;
  margin: 0 0 0.75rem 0;
  color: #ffffff;
}

.team-text p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color: #ffffff;
  opacity: 0.95;
}

.team-photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.team-photo img {
  width: 100%;
  max-width: 420px;
  height: auto;          /* allow natural height */
  object-fit: contain;   /* prevent cut-off */
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Mobile: stack text above photo */
@media (max-width: 900px) {
  .team-member {
    grid-template-columns: 1fr;
    padding: 1.75rem;
  }
  .team-photo img {
    max-width: 100%;
  }
}
#about-simple {
  background: linear-gradient(
    180deg,
    #003c18 0%,
    #0b4f26 100%
  );
}

#about-simple hr {
  opacity: 0.6;
}
/* =========================
   Mission page layout fixes
   ========================= */

#about-simple {
  padding: 4.5rem 1rem !important;           /* consistent outer padding */
}

#about-simple .mission-wrap {
  max-width: 980px;                           /* professional line length */
  margin: 0 auto;
  padding: 0 1.25rem;                         /* consistent inner margins */
  display: block;                             
}

/* Headings: clean spacing + hierarchy */
#about-simple .cs-title {
  margin: 0 0 1.25rem 0 !important;
  line-height: 1.1;
}

/* Create rhythm between sections */
#about-simple hr {
  margin: 2.5rem 0 !important;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.22);
}

/* Body text: consistent spacing */
#about-simple .cs-text {
  margin: 0 0 1.25rem 0 !important;
  max-width: 100%;
}

/* Subheaders (Pay / Donation): different color + underline */
#about-simple .mission-subhead {
  color: var(--white); /* lighter green than titles */
  font-family: "Georgia", serif;
  font-weight: 700;
  font-size: 2.05rem;
  margin: 2.25rem 0 1rem 0;
  display: inline-block;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid rgba(183, 230, 183, 0.55);
}

/* Centered Mission intro */
#about-simple .mission-intro {
  text-align: center;
  max-width: 820px;     /* keeps lines readable */
  margin: 0 auto 3rem; /* center + space below */
}

#about-simple .mission-intro .cs-text {
  margin-left: auto;
  margin-right: auto;
}



/* Make "How Are We Stacking Up?" spacing match "Our Mission" */
#about-simple .how-intro {
  margin: 0 auto 3rem;     /* SAME as mission-intro */
  max-width: 820px;
  text-align: center;
}

#about-simple .how-intro .cs-title {
  margin-bottom: 1.25rem !important; /* SAME gap as Our Mission */
}

#about-simple hr {
  margin: 1.25rem 0 !important;
}
/* Mission: make gap under "How Are We Stacking Up?" match "Our Mission" -> text */
#about-simple .how-intro + .mission-subhead {
  margin-top: 1.25rem !important;
}


.shop-header {
  text-align: center;
  padding: 3rem 1rem 1.5rem;
}

.shop-title {
  font-family: "Bitter", serif;
  font-size: 3rem;
  color: #1f3d1f;
  margin: 0;
}