/*
Theme Name:   GeneratePress Child
Description:  CS Health custom child theme
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */

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

ul, ol { list-style: none; padding: 0; margin: 0; }
p { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  background: #285231;
  color: #fff;
  min-width: 320px;
}

.margin-b-1{
  margin-bottom:1rem;
}

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   Dark green:  #285231  (body bg)
   Deep green:  #075026
   Mid green:   #4d7632
   Light green: #77aa27  (primary buttons)
   Teal:        #006787
   Cream:       #f6eee2
   Body text:   #364153
   Muted text:  #4a5565
   Border:      #e5e7eb
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   COURTESY NAV
───────────────────────────────────────────── */

.courtesy-nav {
  background: #006787;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 101;
}

.courtesy-nav a {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.courtesy-nav a:hover { color: #fff; }

/* ─────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 50px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #e5e7eb;
  width: 100%;
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img { height: 78px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  text-decoration: none;
}

.nav-links a:hover { color: #4d7632; }

.nav-links a.active { color: #48845c; }

/* ─────────────────────────────────────────────
   HERO (homepage — video)
───────────────────────────────────────────── */

.hero-root {
  background: #006787;
  position: relative;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.hero {
  min-height: 800px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1024px;
  margin: 0 auto;
  padding: 191px 0 96px;
  text-align: center;
}

.hero-content h1 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -2.4px;
  color: #fff;
  margin-bottom: 32px;
}

.hero-content p {
  font-size: 24px;
  line-height: 39px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 896px;
  margin: 0 auto 48px;
}

/* ─────────────────────────────────────────────
   ARCH SVG DIVIDER
───────────────────────────────────────────── */

.hero-arch {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
}

.hero-arch svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #77aa27;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  line-height: 28px;
  padding: 20px 40px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary img { height: 28px; width: auto; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #77aa27;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
}

.btn-secondary img { height: 24px; width: auto; }

.btn-white {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #4d7632;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  line-height: 28px;
  padding: 20px 40px;
  border-radius: 8px;
  text-decoration: none;
}

.btn-teal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #006787;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  line-height: 28px;
  padding: 20px 40px;
  border-radius: 8px;
  text-decoration: none;
}

.btn-teal:hover{
  background: #fff;
  border: 1px solid #006787;
  color: #006787;
}

.btn-teal img { height: 28px; width: auto; }

/* ─────────────────────────────────────────────
   SHARED LAYOUT
───────────────────────────────────────────── */

.container-center {
  max-width: 1152px;
  margin: 0 auto;
}

.section-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  text-align: center;
  margin-bottom: 32px;
}

.section-subtitle {
  font-size: 18px;
  line-height: 29.25px;
  color: #fff;
  text-align: center;
  max-width: 896px;
  margin: 0 auto 64px;
}

/* ─────────────────────────────────────────────
   WHO WE BUILD FOR
───────────────────────────────────────────── */

.section-build-for {
  background: #075026;
  padding: 96px 24px;
}

.section-build-for > .container-center > .intro-text {
  font-size: 24px;
  line-height: 39px;
  color: #fff;
  text-align: center;
  margin-bottom: 64px;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.feature-item { display: flex; flex-direction: column; }

.feature-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.feature-heading img { width: 32px; height: 32px; }

.feature-heading h2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.36px;
  color: #fff;
  white-space: nowrap;
}

.feature-item p {
  font-size: 18px;
  line-height: 29.25px;
  color: #fff;
}

/* ─────────────────────────────────────────────
   OUR INGREDIENTS (homepage section)
───────────────────────────────────────────── */

.section-ingredients {
  background: linear-gradient(to bottom, #77aa27, #4d7632);
  position: relative;
  min-height: 1040px;
  overflow: hidden;
}

.ingredients-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 100%;
  overflow: hidden;
}

.ingredients-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ingredients-content {
  position: relative;
  z-index: 1;
  margin-left: 46%;
  max-width: 667px;
  padding: 96px 48px 96px 24px;
}

.ingredients-eyebrow {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  margin-bottom: 32px;
}

.ingredients-sub {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
  margin-bottom: 64px;
}

.ingredients-desc {
  font-size: 18px;
  line-height: 29.25px;
  color: #fff;
  margin-bottom: 64px;
}

.ingredient-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 41px;
  margin-bottom: 16px;
}

.ingredient-card:last-of-type { margin-bottom: 0; }

.ingredient-card h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  color: #4d7632;
  margin-bottom: 16px;
}

.ingredient-card h3 sup {
  font-size: 14px;
  vertical-align: super;
  line-height: 0;
}

.ingredient-card p {
  font-size: 18px;
  line-height: 29.25px;
  color: #364153;
}

.ingredients-cta { margin-top: 48px; }

/* ─────────────────────────────────────────────
   PROVEN AT SCALE
───────────────────────────────────────────── */

.section-scale {
  background: #006787;
  padding: 96px 24px;
  position: relative;
  z-index:1;
}

.section-scale:before{
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    background-image: url(https://www.figma.com/api/mcp/asset/602cc7b1-b50b-4180-ba29-d70e3fd1113f);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-number {
  font-size: 60px;
  line-height: 60px;
  color: #fff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
}

/* ─────────────────────────────────────────────
   APPLICATIONS (homepage section)
───────────────────────────────────────────── */

.section-applications {
  position: relative;
  min-height: 648px;
  padding: 96px 24px;
  overflow: hidden;
}

.section-applications::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.31);
}

.section-applications .container-center { position: relative; z-index: 1; }

.section-applications .section-title { margin-bottom: 32px; }

.applications-sub {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
  text-align: center;
  margin-bottom: 64px;
}

.applications-intro {
  font-size: 18px;
  line-height: 29.25px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-bottom: 48px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: 24px;
  justify-content: center;
  max-width: 768px;
  margin: auto;
  margin-bottom:2rem;
}

.app-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 25px 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-card img { width: 20px; height: 20px; flex-shrink: 0; }

.app-card span {
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   CONSISTENCY
───────────────────────────────────────────── */

.section-consistency {
  background: #f6eee2;
  padding: 96px 24px;
}

.section-consistency .container-center { max-width: 1024px; }

.section-consistency .section-title { color: #006787; margin-bottom: 48px; }

.section-consistency p {
  font-size: 20px;
  line-height: 32.5px;
  color: #000;
  text-align: center;
  margin-bottom: 32px;
}

.section-consistency p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────
   SUSTAINABILITY
───────────────────────────────────────────── */

.section-sustainability {
  position: relative;
  min-height: 526px;
  padding: 128px 24px;
  overflow: hidden;
}

.section-sustainability::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.section-sustainability .container-center {
  position: relative;
  z-index: 1;
  max-width: 1024px;
}

.section-sustainability .section-title { margin-bottom: 48px; }

.section-sustainability p {
  font-size: 20px;
  line-height: 32.5px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-bottom: 32px;
}

.section-sustainability p:last-child { margin-bottom: 0; }

/* ─────────────────────────────────────────────
   WORK WITH THE SOURCE (CTA)
───────────────────────────────────────────── */

.section-cta {
  background: linear-gradient(to bottom, #4d7632, #77aa27);
  padding: 128px 24px;
  text-align: center;
}

.section-cta .container-center { max-width: 1024px; }

.section-cta .section-title {
  color: #f6eee2;
  margin-bottom: 48px;
}

.section-cta .cta-text {
  font-size: 24px;
  line-height: 39px;
  color: rgba(246, 238, 226, 0.8);
  max-width: 896px;
  margin: 0 auto 48px;
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */

.footer {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 65px 24px 64px;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 96px;
  margin-bottom: 48px;
}

.footer-brand img { height: 78px; width: auto; margin-bottom: 24px; display: block; }

.footer-brand p {
  font-size: 16px;
  line-height: 26px;
  color: #4a5565;
  max-width: 448px;
}

.footer-col h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.18px;
  color: #48845c;
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.footer-col a {
  font-size: 16px;
  line-height: 24px;
  color: #4a5565;
  text-decoration: none;
}

.footer-col a:hover { color: #4d7632; }

.footer-bottom {
  border-top: 1px solid #e5e7eb;
  padding-top: 33px;
  text-align: center;
}

.footer-bottom p {
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
}

/* ─────────────────────────────────────────────
   OUR STORY — PAGE-SPECIFIC
───────────────────────────────────────────── */

.page-hero-root {
  background-color: #006787;
  position: relative;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.page-hero {
  min-height: 711px;
  display: flex;
  align-items: center;
  position: relative;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1024px;
  margin: 0 auto;
  padding: 191px 0 96px;
  text-align: center;
}

.page-hero-content h1 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -2.4px;
  color: #fff;
  margin-bottom: 32px;
}

.page-hero-content p {
  font-size: 24px;
  line-height: 39px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 959px;
  margin: 0 auto;
}

.section-roots {
  background: #f6eee2;
  padding: 96px 24px;
}

.section-roots .container-center { max-width: 1152px; }

.roots-grid {
  display: grid;
  grid-template-columns: 552px 1fr;
  gap: 79px;
  align-items: center;
}

.roots-text p { font-size: 20px; line-height: 32.5px; color: #364153; }
.roots-text p + p { margin-top: 32px; }

.roots-image { border-radius: 10px; overflow: hidden; height: 406px; }
.roots-image img { width: 100%; height: 100%; object-fit: cover; }

.section-foundation {
  background: #006787;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
}

.foundation-content::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  background-image: url('https://www.figma.com/api/mcp/asset/602cc7b1-b50b-4180-ba29-d70e3fd1113f');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.foundation-content {
  position: relative;
  z-index: 1;
  padding: 96px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.foundation-content h2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  margin-bottom: 32px;
}

.foundation-content p {
  font-size: 18px;
  line-height: 30.6px;
  color: rgba(246, 238, 226, 0.9);
  max-width: 629px;
  margin-bottom: 32px;
}

.foundation-content p.foundation-close {
  font-size: 20px;
  line-height: 28px;
  color: #f6eee2;
  margin-bottom: 0;
}

.foundation-image { overflow: hidden; }
.foundation-image img { width: 100%; height: 100%; object-fit: cover; }

.foundation-arch {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 3;
  line-height: 0;
}

.foundation-arch svg { display: block; width: 100%; height: auto; }

.section-start {
  background: linear-gradient(to bottom, #4d7632, #77aa27);
  padding: 96px 24px;
}

.section-start .container-center { max-width: 1024px; }

.section-start h2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  text-align: center;
  margin-bottom: 48px;
}

.section-start .start-lead { font-size: 20px; line-height: 28px; color: #fff; margin-bottom: 32px; }
.section-start p { font-size: 18px; line-height: 30.6px; color: #fff; margin-bottom: 32px; }
.section-start p.start-close { font-size: 20px; line-height: 28px; margin-bottom: 0; }

.section-sulforaphane {
  background: #075026;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.sulforaphane-image { overflow: hidden; }
.sulforaphane-image img { width: 100%; height: 100%; object-fit: cover; }

.sulforaphane-content { display: flex; align-items: center; padding: 96px 48px; }

.sulforaphane-content h2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  margin-bottom: 32px;
}

.sulforaphane-content p {
  font-size: 18px;
  line-height: 30.6px;
  color: rgba(246, 238, 226, 0.9);
  max-width: 629px;
  margin-bottom: 32px;
}

.sulforaphane-content p:last-child { margin-bottom: 0; }

.section-substance { background: #f6eee2; padding: 96px 24px 128px; }
.section-substance .container-center { max-width: 1024px; }

.section-substance h2 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #006787;
  text-align: center;
  margin-bottom: 48px;
}

.substance-body { font-size: 18px; line-height: 30.6px; color: #000; text-align: center; margin-bottom: 32px; }
.substance-tagline { font-size: 20px; line-height: 28px; color: #000; text-align: center; margin-bottom: 48px; }

.substance-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1133px;
  margin: 0 auto 48px;
}

.substance-item {
  background: #fff;
  border-radius: 10px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.substance-item img { width: 32px; height: 37px; display: block; flex-shrink: 0; }
.substance-item p { font-size: 18px; line-height: 30.6px; color: #000; }

.substance-cta { text-align: center; }

/* ─────────────────────────────────────────────
   OUR INGREDIENTS — PAGE-SPECIFIC
───────────────────────────────────────────── */

.page-hero-ingredients::before { background: rgba(0, 0, 0, 0.4); }

.section-intro { background: #f6eee2; padding: 96px 24px; }
.section-intro .container-center { max-width: 1024px; }
.section-intro p { font-size: 20px; line-height: 32.5px; color: #364153; text-align: center; }
.section-intro p + p { margin-top: 32px; }

.section-brocco { position: relative; padding: 96px 24px; }
.section-brocco::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.section-brocco .container-center { position: relative; z-index: 1; max-width: 1152px; }

.product-eyebrow {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  margin-bottom: 32px;
}

.product-eyebrow sup { font-size: 29px; vertical-align: super; line-height: 0; }
.product-sub { font-size: 30px; line-height: 36px; color: rgba(246, 238, 226, 0.8); margin-bottom: 48px; }
.product-body { font-size: 18px; line-height: 30.6px; color: rgba(246, 238, 226, 0.9); margin-bottom: 32px; }
.product-body sup { font-size: 13.5px; vertical-align: super; line-height: 0; }
.product-close { font-size: 20px; line-height: 28px; color: #bccdb8; }
.product-close sup { font-size: 15px; vertical-align: super; line-height: 0; }

.info-card { background: #075026; border-radius: 10px; padding: 48px; margin-top: 64px; }

.info-card h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.36px;
  color: #fff;
  margin-bottom: 24px;
}

.info-card .info-sub { font-size: 24px; line-height: 32px; color: #bccdb8; margin-bottom: 32px; }
.info-card p { font-size: 18px; line-height: 30.6px; color: rgba(188, 205, 184, 0.9); margin-bottom: 24px; }
.info-card p:last-child { margin-bottom: 0; }

.options-heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 0.36px;
  color: #fff;
  text-align: center;
  margin-top: 64px;
  margin-bottom: 48px;
}

.options-heading sup { font-size: 17px; vertical-align: super; line-height: 0; }

.product-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.product-card-dark {
  background: rgba(31, 63, 40, .6);
  border: 1px solid rgba(72, 132, 92, 0.3);
  border-radius: 10px;
  padding: 41px;
}

.product-card-dark h4 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.3px;
  color: #fff;
  margin-bottom: 24px;
}

.product-card-dark h4 sup { font-size: 14.5px; vertical-align: super; line-height: 0; }
.product-card-dark p { font-size: 18px; line-height: 29.25px; color: rgba(246, 238, 226, 0.8); }

.product-card-light {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 41px;
  max-width: 552px;
  margin: 0 auto;
}

.product-card-light h4 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.3px;
  color: #48845c;
  margin-bottom: 24px;
}

.product-card-light h4 sup { font-size: 14.5px; vertical-align: super; line-height: 0; }
.product-card-light p { font-size: 18px; line-height: 29.25px; color: #364153; }

.section-activated { background: linear-gradient(to top, #4d7632, #77aa27); padding: 96px 24px; }
.section-activated .container-center { max-width: 1152px; }
.section-activated .product-sub { color: #fff; }
.section-activated .product-body { color: #fff; }
.section-activated .product-close { color: #fff; }
.section-activated .options-heading { color: #fff; }

.section-formulators { background: #006787; position: relative; padding: 96px 24px; }
.section-formulators::before { content: ''; position: absolute; inset: 0; opacity: 0.07; pointer-events: none; background-image: url('https://www.figma.com/api/mcp/asset/07f3e480-aef5-4403-9a3b-c0caaf5a5b77'); background-size: cover; background-position: center; }
.section-formulators .container-center { position: relative; z-index: 1; max-width: 1152px; }

.formulators-sub { font-size: 30px; line-height: 36px; color: rgba(255,255,255,0.8); text-align: center; margin-top: 32px; margin-bottom: 64px; }
.formulators-intro { font-size: 18px; line-height: 29.25px; color: rgba(255,255,255,0.9); text-align: center; margin-bottom: 48px; }
.formulators-close { font-size: 18px; line-height: 29.25px; color: rgba(255,255,255,0.9); text-align: center; max-width: 896px; margin: 0 auto; }

.app-grid-v {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: 24px;
  justify-content: center;
  max-width: 768px;
  margin: 0 auto 64px;
}

.app-card-v {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  padding: 25px 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 108px;
}

.app-card-v span { font-size: 18px; line-height: 28px; color: #fff; text-align: center; }
.app-card-v img { width: 20px; height: 20px; display: block; }

.section-quality { background: #f6eee2; padding: 96px 24px; }
.section-quality .container-center { max-width: 1152px; }

.quality-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #006787;
  text-align: center;
  margin-bottom: 32px;
}

.quality-sub { font-size: 30px; line-height: 36px; color: #000; text-align: center; margin-bottom: 64px; }
.quality-body { font-size: 18px; line-height: 30.6px; color: #000; text-align: center; margin-bottom: 32px; }
.quality-label { font-size: 18px; line-height: 30.6px; color: #000; text-align: center; margin-bottom: 64px; }

.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 896px;
  margin: 0 auto 64px;
}

.quality-item {
  background: #fff;
  border: 1px solid #b4b5b7;
  border-radius: 10px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.quality-dot { width: 8px; height: 8px; border-radius: 50%; background: #48845c; flex-shrink: 0; }
.quality-item p { font-size: 18px; line-height: 28px; color: #364153; }
.quality-close { font-size: 20px; line-height: 32.5px; color: #000; text-align: center; max-width: 930px; margin: 0 auto; }

/* ─────────────────────────────────────────────
   APPLICATIONS PAGE — PAGE-SPECIFIC
───────────────────────────────────────────── */

.apps-hero-root { position: relative; background-color: #006787; }
.apps-hero-root::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1; }

.apps-hero-section {
  position: relative;
  z-index: 2;
  min-height: 711px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apps-hero-content {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  padding: 185px 24px 96px;
  text-align: center;
}

.apps-hero-content h1 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -2.4px;
  color: #fff;
  margin-bottom: 32px;
}

.apps-hero-content p { font-size: 24px; line-height: 39px; color: #fff; max-width: 896px; margin: 0 auto; }

.section-supplements { background: #f6eee2;  padding: 96px 24px; text-align: center; }
.section-supplements h2{
  color:#364153;
}
.supps-sub { font-size: 30px; line-height: 36px; color: #364153; padding-top: 24px; }
.supps-intro { font-size: 18px; line-height: 30.6px; color: #364153; padding-top: 48px; }

.supps-format-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-content: center;
  max-width: 896px;
  margin: 48px auto 0;
}

.format-card {
  background: #285231;
  border: 1px solid rgba(72,132,92,0.3);
  border-radius: 10px;
  padding: 25px 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.format-card img { width: 20px; height: 20px; flex-shrink: 0; }
.format-card span { font-size: 18px; line-height: 28px; color: #fff; white-space: nowrap; }
.supps-bottom-text { font-size: 18px; line-height: 29.25px; color: rgba(246,238,226,0.8); max-width: 896px; margin: 48px auto 0; }

.section-functional { background: linear-gradient(to bottom, #4d7632, #77aa27 131.95%); padding: 96px 24px; }
.section-functional .container-center { max-width: 1152px; }

.functional-heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 60px;
  line-height: 60px;
  letter-spacing: 0.6px;
  color: #fff;
  margin-bottom: 0;
}

.functional-sub { font-size: 30px; line-height: 36px; color: #fff; padding-top: 24px; }
.functional-body { font-size: 18px; line-height: 30.6px; color: #fff; max-width: 1152px; padding-top: 48px; }
.functional-desc { font-size: 18px; line-height: 29.25px; color: #fff; max-width: 896px; padding-top: 48px; }

.section-supply { position: relative; min-height: 527px; overflow: hidden; }
.section-supply::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.section-supply-content { position: relative; z-index: 1; max-width: 1152px; margin: 0 auto; padding: 96px 24px; }
.supply-heading { font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 60px; line-height: 60px; letter-spacing: 0.6px; color: #fff; margin-bottom: 0; }
.supply-sub { font-size: 30px; line-height: 36px; color: rgba(255,255,255,0.8); padding-top: 24px; }
.supply-body { font-size: 18px; line-height: 29.25px; color: rgba(246,238,226,0.8); max-width: 896px; padding-top: 48px; }

.section-trusted { background: linear-gradient(to bottom, #4d7632, #77aa27 131.95%); padding: 96px 24px; text-align: center; }
.trusted-intro { font-size: 20px; line-height: 32.5px; color: #fff; max-width: 896px; margin: 0 auto; padding-top: 48px; }

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1152px;
  margin: 80px auto 0;
  text-align: left;
}

.partner-card { background: #075026; border: 1px solid rgba(72,132,92,0.3); border-radius: 10px; padding: 33px; }
.partner-card h3 { font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: 0.24px; color: #fff; margin-bottom: 16px; }
.partner-card p { font-size: 16px; line-height: 26px; color: rgba(246,238,226,0.8); }

.section-apps-cta { background: #006787; padding: 128px 24px; text-align: center; }
.apps-cta-inner { max-width: 1024px; margin: 0 auto; }
.apps-cta-text { font-size: 30px; line-height: 48.75px; color: rgba(246,238,226,0.9); margin-bottom: 48px; }

.btn-apps-cta {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #006787;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  line-height: 28px;
  padding: 20px 40px;
  border-radius: 8px;
  text-decoration: none;
}

/* ─────────────────────────────────────────────
   CONTACT PAGE — PAGE-SPECIFIC
───────────────────────────────────────────── */

.contact-hero-root { position: relative; background-color: #006787; min-height: 622px; display: flex; align-items: center; }
.contact-hero-root::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 1; }

.contact-hero-content {
  position: relative;
  z-index: 2;
  max-width: 896px;
  margin: 0 auto;
  padding: 208px 24px 96px;
  text-align: center;
}

.contact-hero-content h1 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -2.4px;
  color: #fff;
  margin-bottom: 32px;
}

.contact-hero-content p { font-size: 24px; line-height: 39px; color: rgba(255,255,255,0.9); }

.section-contact-intro { background: linear-gradient(to bottom, #4d7632, #77aa27 156.51%); padding: 64px 24px; text-align: center; }
.contact-intro-inner { max-width: 896px; margin: 0 auto; }
.contact-intro-inner p { font-size: 18px; line-height: 29.25px; color: rgba(246,238,226,0.9); }
.contact-intro-inner p + p { padding-top: 24px; }

.section-contact-form { background: #f6eee2; padding: 96px 24px; }
.contact-form-inner { max-width: 768px; margin: 0 auto; text-align: center; }

.contact-form-heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: 0.48px;
  color: #006787;
  margin-bottom: 32px;
}

.contact-form-desc { font-size: 18px; line-height: 29.25px; color: #364153; margin-bottom: 48px; }
.contact-form { text-align: left; }
.form-field + .form-field { margin-top: 32px; }

.form-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  padding: 12px 16px;
  appearance: none;
  -webkit-appearance: none;
}

.form-input { height: 50px; }

.form-select {
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23364153' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-textarea { height: 170px; resize: vertical; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus { outline: 2px solid #4d7632; outline-offset: 0; }

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"]:checked {
  background: #4d7632;
  border-color: #4d7632;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-submit-wrap { display: flex; justify-content: center; padding-top: 48px; }

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #006787;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  padding: 20px 40px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn-submit img { height: 28px; width: auto; }

/* ─────────────────────────────────────────────
   GRAVITY FORMS — CS HEALTH CONTACT FORM
───────────────────────────────────────────── */

/* Strip wrapper chrome */
.gform_wrapper { background: none; border: none; padding: 0; margin: 0; max-width: none; box-shadow: none; text-align: left; }
.gform_wrapper .gform_body { padding: 0; }

/* Force single-column block layout */
.gform_wrapper .gform_fields { display: block; }

/* Field wrapper */
.gform_wrapper .gfield { padding: 0; margin-top: 32px; background: none; border: none; }
.gform_wrapper .gfield:first-child { margin-top: 0; }

/* Labels */
.gform_wrapper .gfield_label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  margin-bottom: 8px;
}

/* Required indicator — small and unobtrusive */
.gform_wrapper .gfield_required { font-size: 14px; color: #77aa27!important; font-weight: 400; margin-left: 2px; }

/* All text-style inputs */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  padding: 12px 16px;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  margin: 0;
}

.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"] { height: 50px; }

/* Select with custom chevron */
.gform_wrapper .ginput_container select {
  height: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23364153' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.gform_wrapper .ginput_container textarea { height: 170px; resize: vertical; }

/* Focus states */
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
  outline: 2px solid #4d7632;
  outline-offset: 0;
  border-color: #4d7632;
}

/* Checkbox list → 2-column grid */
.gform_wrapper .gfield_checkbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

/* Checkbox item */
.gform_wrapper .gchoice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.gform_wrapper .gchoice label {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

/* Custom checkbox appearance */
.gform_wrapper .gchoice input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
}

.gform_wrapper .gchoice input[type="checkbox"]:checked {
  background-color: #4d7632;
  border-color: #4d7632;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Submit footer */
.gform_wrapper .gform_footer {
  display: flex;
  justify-content: center;
  padding: 48px 0 0;
  border: none;
  background: none;
  margin: 0;
}

/* Submit button */
.gform_wrapper .gform-button,
.gform_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #006787;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  padding: 20px 40px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
}

.gform_wrapper .gform-button:hover,
.gform_wrapper .gform_button:hover { background: #005a74; color: #fff; }

/* Validation summary banner */
.gform_wrapper .gform_validation_errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.gform_wrapper .gform_validation_errors h2 { font-size: 16px; color: #dc2626; font-family: 'Outfit', sans-serif; font-weight: 500; }

/* Field-level error state */
.gform_wrapper .gfield_error { background: none; border: none; }
.gform_wrapper .gfield_error .gfield_label { color: #dc2626; }
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: #dc2626; }
.gform_wrapper .validation_message { font-size: 14px; color: #dc2626; margin-top: 6px; font-family: 'Outfit', sans-serif; }

/* Confirmation message */
.gform_confirmation_wrapper { font-family: 'Outfit', sans-serif; font-size: 18px; color: #364153; text-align: center; padding: 32px 0; }

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET  (≤ 1023px)
───────────────────────────────────────────── */

@media (max-width: 1023px) {

  body { overflow-x: hidden; }

  /* Nav */
  .nav-inner { padding: 0 24px; }
  .nav-links { gap: 20px; }

  /* Hero typography */
  .hero-content h1,
  .page-hero-content h1,
  .apps-hero-content h1,
  .contact-hero-content h1 { font-size: 64px; line-height: 68px; letter-spacing: -1.5px; }
  .hero-content { padding: 120px 24px 80px; }
  .page-hero-content { padding: 140px 24px 80px; }
  .apps-hero-content { padding: 120px 24px 64px; }
  .contact-hero-content { padding: 64px 24px; }

  /* Section headings */
  .section-title { font-size: 48px; line-height: 52px; }
  .foundation-content h2,
  .section-start h2,
  .sulforaphane-content h2,
  .section-substance h2,
  .product-eyebrow,
  .quality-title,
  .functional-heading,
  .supply-heading { font-size: 48px; line-height: 52px; }

  /* Our Ingredients (homepage): switch from abs-positioned image to stacked */
  .section-ingredients { min-height: auto; }
  .ingredients-image { position: relative; width: 100%; height: 400px; }
  .ingredients-image img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .ingredients-content { margin-left: 0; max-width: 100%; padding: 64px 48px; }

  /* Proven at Scale */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }

  /* Applications (homepage) */
  .app-grid { grid-template-columns: repeat(2, 1fr); max-width: 512px; }

  /* Our Story */
  .roots-grid { grid-template-columns: 1fr; gap: 48px; }
  .section-foundation { grid-template-columns: 1fr; }
  .foundation-image { height: 400px; }
  .section-sulforaphane { grid-template-columns: 1fr; }
  .sulforaphane-image { height: 400px; }
  .substance-card { grid-template-columns: repeat(2, 1fr); }

  /* Our Ingredients page */
  .product-cards-grid { grid-template-columns: 1fr; }
  .app-grid-v { grid-template-columns: repeat(2, 1fr); max-width: 100%; }

  /* Applications page */
  .supps-format-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE  (≤ 768px)
───────────────────────────────────────────── */

@media (max-width: 768px) {

  /* Courtesy nav — hidden on mobile to avoid hamburger menu conflict */
  .courtesy-nav { display: none; }

  /* Navigation — reset top offset now courtesy nav is gone */
  .nav { top: 0; }
  .nav-inner { padding: 0 24px; }

  /* Hero typography */
  .hero-content h1,
  .page-hero-content h1,
  .apps-hero-content h1,
  .contact-hero-content h1 { font-size: 42px; line-height: 46px; letter-spacing: -1px; }
  .hero-content p,
  .page-hero-content p,
  .apps-hero-content p,
  .contact-hero-content p { font-size: 18px; line-height: 28px; }
  .hero-content { padding: 80px 24px 48px; }
  .page-hero-content { padding: 80px 24px 48px; }
  .apps-hero-content { padding: 80px 24px 48px; }
  .contact-hero-content { padding: 48px 24px; }

  /* Section headings */
  .section-title { font-size: 36px; line-height: 40px; }
  .section-subtitle { font-size: 16px; }
  .foundation-content h2,
  .section-start h2,
  .sulforaphane-content h2,
  .section-substance h2,
  .product-eyebrow,
  .quality-title,
  .functional-heading,
  .supply-heading { font-size: 36px; line-height: 40px; }

  /* Section padding */
  .section-build-for,
  .section-scale,
  .section-applications,
  .section-consistency,
  .section-cta,
  .section-roots,
  .section-start,
  .section-brocco,
  .section-activated,
  .section-formulators,
  .section-quality,
  .section-functional,
  .section-apps-cta,
  .section-contact-form { padding: 64px 24px; }
  .section-sustainability { padding: 80px 24px; }
  .section-substance { padding: 64px 24px 80px; }

  /* Who We Build For */
  .features-grid { grid-template-columns: 1fr; gap: 40px; }
  .feature-heading h2 { font-size: 28px; line-height: 34px; white-space: normal; }

  /* Our Ingredients (homepage) */
  .ingredients-image { height: 280px; }
  .ingredients-content { padding: 48px 24px; }
  .ingredients-eyebrow { font-size: 40px; line-height: 44px; }
  .ingredients-sub { font-size: 22px; }
  .ingredient-card { padding: 28px 24px; }
  .ingredient-card h3 { font-size: 24px; line-height: 30px; }

  /* Proven at Scale */
  .stat-number { font-size: 42px; line-height: 42px; }

  /* Applications (homepage) */
  .app-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .app-card span { white-space: normal; }

  /* Our Story: Roots */
  .roots-text p { font-size: 18px; line-height: 29px; }
  .roots-image { height: 280px; }

  /* Our Story: Foundation */
  .foundation-content { padding: 48px 24px; }
  .foundation-image { height: 300px; }

  /* Our Story: Sulforaphane */
  .sulforaphane-content { padding: 48px 24px; }
  .sulforaphane-image { height: 300px; }

  /* Our Story: Substance */
  .substance-card { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }

  /* Our Ingredients page */
  .product-sub { font-size: 22px; }
  .info-card { padding: 32px 24px; }
  .info-card h3 { font-size: 28px; line-height: 34px; }
  .options-heading { font-size: 28px; line-height: 34px; }
  .quality-sub { font-size: 22px; }
  .quality-grid { grid-template-columns: 1fr; max-width: 100%; }
  .app-grid-v { grid-template-columns: repeat(2, 1fr); max-width: 100%; }

  /* Applications page */
  .supps-format-grid { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .format-card span { white-space: normal; }
  .partner-grid { grid-template-columns: 1fr; }
  .apps-cta-text { font-size: 20px; line-height: 32px; }
  .supply-sub { font-size: 22px; }
  .functional-sub { font-size: 22px; }

  /* Contact page */
  .contact-form-heading { font-size: 36px; line-height: 40px; }
  .checkbox-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand { grid-column: auto; text-align: center; }
  .footer-brand img { margin: 0 auto 24px; }
  .footer-brand p { max-width: 100%; }
  .footer-col { text-align: center; }
  .footer-col ul { align-items: center; }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
───────────────────────────────────────────── */

@media (max-width: 480px) {

  /* Hero */
  .hero-content h1,
  .page-hero-content h1,
  .apps-hero-content h1,
  .contact-hero-content h1 { font-size: 32px; line-height: 36px; }

  /* Section headings */
  .section-title { font-size: 30px; line-height: 36px; }
  .foundation-content h2,
  .section-start h2,
  .sulforaphane-content h2,
  .section-substance h2,
  .product-eyebrow,
  .quality-title,
  .functional-heading,
  .supply-heading { font-size: 30px; line-height: 36px; }

  /* Stats */
  .stat-number { font-size: 36px; line-height: 36px; }

  /* Single-column grids on very small screens */
  .app-grid,
  .app-grid-v,
  .supps-format-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }

  /* Footer */
  .footer { padding: 48px 24px; }
}

/* ─────────────────────────────────────────────
   EDITOR OVERRIDES
   Loaded in the Gutenberg editor via add_editor_style().
───────────────────────────────────────────── */

/* Sticky nav positions are meaningless inside the editor iframe. */
.editor-styles-wrapper .courtesy-nav,
.editor-styles-wrapper .nav {
  position: relative;
  top: auto;
}

/* Our Ingredients: front end uses position:absolute for the left image which
   doesn't work in the narrow editor iframe. Switch to flexbox for editing. */
.editor-styles-wrapper .section-ingredients {
  display: flex;
  align-items: stretch;
}
.editor-styles-wrapper .ingredients-image {
  position: relative;
  flex: 0 0 42%;
  min-height: 400px;
}
.editor-styles-wrapper .ingredients-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editor-styles-wrapper .ingredients-content {
  margin-left: 0;
  flex: 1;
}