:root{
  --primary-green:#6B8E6B;
  --dark-green:#4A634A;
  --light-bg:#FAFAF8;
  --text-dark:#1F2A1F;
  --text-light:#5C6B5C;
  --border:rgba(0,0,0,.08);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Source Sans 3",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--light-bg);
  color:var(--text-dark);
  line-height:1.7;
}
section {
  scroll-margin-top: 120px;
}
img{max-width:100%;height:auto;display:block}

a{color:inherit}
a:hover{opacity:.9}

a:focus-visible {
  outline: 2px solid var(--dark-green);
  outline-offset: 4px;
  border-radius: 4px;
}

.container{max-width:1100px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.center{text-align:center}
.muted{color:var(--text-light)}


/* ---------------- HEADER ---------------- */

.site-header{
  position:sticky;
  top:0;
  background:rgba(250,250,248,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  z-index:1000;
}

/* HEADER LAYOUT */
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
}

/* Logo Section */
.logo-container {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-icon {
  max-height: 160px; /* Made this roughly 4x bigger! You can change this number if it's too huge */
  width: auto;
}

.logo-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* This forces NUTRITION to the exact middle of EVERROOT */
  margin-left: -40px; /* Changed from 0px to -20px to pull the E over the plant! */
}

.logo-main {
  font-family: "Playfair Display", serif;
  font-size: 34px;
  letter-spacing: .16em;
  color: var(--dark-green);
  line-height: 1;
}

.logo-sub {
  font-size: 10px; 
  letter-spacing: .50em;
  text-transform: uppercase;
  color: var(--primary-green);
  margin-top: 6px;
  margin-right: -0.5em; /* This magic trick stops the letter spacing from pushing it off-center */
}
/* Navigation */
.nav{
  display:flex;
  gap:18px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-dark);
}

.nav-cta{
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:999px;
  background:white;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* ---------------- HERO ---------------- */

.hero{
  background:var(--primary-green);
  color:#fff;
  padding:92px 0;
}

.hero-inner{max-width:920px;margin:0 auto}

.eyebrow{
  letter-spacing:.25em;
  text-transform:uppercase;
  font-size:18px; 
  font-weight: 600; 
  opacity:.95;
  margin-bottom:18px;
}

.hero h1{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(32px,3.8vw,48px); 
  line-height:1.1;
  margin:0 0 18px;
}

.hero-sub{
  max-width:760px;
  margin:0 auto 26px;
  opacity:.95;
  font-size:16px;
}

.cta-row{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:6px;
}

.btn{
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn.primary{
  background:#fff;
  color:var(--text-dark);
}

.btn.ghost{
  border:1px solid rgba(255,255,255,.9);
  color:#fff;
}

.hero-note{
  margin-top:14px;
  font-size:13px;
  opacity:.9;
}

.hero-note a{
  text-decoration:underline;
  text-underline-offset:3px;
}


/* ---------------- SECTIONS ---------------- */

.section{padding:78px 0}
.section.alt{background:#fff}

h2{
  font-family:"Playfair Display",serif;
  color:var(--dark-green);
  margin:0 0 22px;
  font-size:clamp(28px,2.6vw,36px);
}

.section p{color:var(--text-dark)}


/* ---------------- ACCORDIONS ---------------- */

.accordions{
  display:grid;
  gap:16px;
  margin:26px auto 0;
  max-width:980px;
}

.accordion{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
}

.accordion summary{
  cursor:pointer;
  user-select:none;
  font-weight:700;
  color:var(--dark-green);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

.accordion summary::after{content:"+";font-weight:700}
.accordion[open] summary::after{content:"–"}

.accordion ul{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--text-light);
}

.closing-line{
  margin-top:28px;
  text-align:center;
  color:var(--text-light);
}


/* ---------------- CONTACT ---------------- */

.contact-box p{margin:0 0 18px}

.contact-box strong{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-light);
  margin-bottom:6px;
}

.contact-box a{
  font-size:18px;
  text-decoration:none;
}

.contact-box a:hover{text-decoration:underline}

.response-note{
  font-size:15px;
  color:var(--text-light);
  margin-top:10px;
}


/* ---------------- FOOTER ---------------- */

footer{
  border-top:1px solid var(--border);
  padding:40px 0;
  text-align:center;
  color:var(--text-light);
  font-size:14px;
}


/* ---------------- MOBILE ---------------- */

@media (max-width:768px){

  .header-inner{
    flex-direction:column;
    justify-content:center;
    gap:16px;
  }

  .nav{
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
  }

  .hero{padding:74px 0}
}