/* ——— 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;
}
.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: #ef5c3e !important;
}

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

/* Right-column header “Contact” */
#contact-1750 .cs-header {
  color: #ef5c3e !important;
}

/* Left-column form labels “Name *”, “Email *”, etc. */
#contact-1750 .cs-label {
  color: #ef5c3e !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 {
  /* stretch the section to the full viewport: */
  width: 100vw !important;
  /* pull it back so it’s centered in view: */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* optional: keep your normal side‐gutters inside each section */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
#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;
}