/* ============================================================
   FUREVER ACTIVE RANCH — Page Styles v2
   RULE: Every page alternates light and dark sections.
   Light sections: warm cream #faf7f2 / #fff — dark text.
   Dark sections: #000 / #0a0a0a — light text.
   ============================================================ */

/* --- HERO (full-bleed photo, always works) --- */
.far-hero {
  position: relative;
  width: 100%;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.far-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.far-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.28) 40%,
    rgba(0,0,0,0.78) 72%,
    rgba(0,0,0,0.97) 100%
  );
}
.far-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(48px,8vh,100px) clamp(20px,4vw,40px) clamp(72px,12vh,140px);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.far-brand-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(10px,1.1vw,12px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(212,168,83,0.45);
  padding: 8px 22px;
  margin-bottom: 28px;
}
.far-hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(42px,7vw,88px);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 22px;
}
.far-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(16px,1.9vw,22px);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   SECTION 2 — LIGHT (warm cream): "Not just more time"
   ============================================================ */
.far-open {
  background: #faf7f2;
  padding: clamp(72px,9vw,120px) clamp(20px,4vw,40px);
}
.far-open-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.far-open-headline {
  font-family: var(--font-body);
  font-size: clamp(24px,3vw,38px);
  font-weight: 300;
  line-height: 1.45;
  color: #111;
  margin-bottom: 36px;
}
.far-open-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.far-open-list li {
  font-family: var(--font-body);
  font-size: clamp(16px,1.8vw,22px);
  font-weight: 300;
  color: #555;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  line-height: 1.5;
}
.far-open-list li:first-child { border-top: 1px solid rgba(0,0,0,0.10); }

/* ============================================================
   SECTION 3 — DARK: Founder / Mission
   ============================================================ */
.far-founder {
  background: #0a0a0a;
  padding: clamp(72px,9vw,120px) clamp(20px,4vw,40px);
}
.far-founder-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================
   SECTION 4 — LIGHT (white): NeuroChew callout
   ============================================================ */
.far-product {
  background: #f5f2ed;
  padding: clamp(72px,9vw,120px) clamp(20px,4vw,40px);
}
.far-product-card {
  background: #fff;
  border-top: 3px solid #b8922e;
  border-left: 1px solid rgba(184,146,46,0.20);
  border-right: 1px solid rgba(184,146,46,0.20);
  border-bottom: 1px solid rgba(184,146,46,0.20);
  border-radius: 2px;
  padding: clamp(36px,5vw,64px);
  max-width: 780px;
  margin: 0 auto;
  box-shadow: 0 6px 36px rgba(0,0,0,0.07);
}
.far-product-label {
  font-family: var(--font-heading);
  font-size: clamp(10px,1vw,12px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #b8922e;
  margin-bottom: 16px;
  display: block;
}
.far-product-name {
  font-family: var(--font-heading);
  font-size: clamp(30px,4vw,52px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 8px;
  line-height: 1.1;
}
.far-product-tag {
  font-family: var(--font-body);
  font-size: clamp(14px,1.5vw,18px);
  font-weight: 300;
  color: #888;
  margin-bottom: 28px;
  font-style: italic;
}
.far-product-body {
  font-family: var(--font-body);
  font-size: clamp(15px,1.5vw,17px);
  font-weight: 300;
  line-height: 1.78;
  color: #444;
  margin-bottom: 16px;
}
.far-product-closing {
  font-family: var(--font-body);
  font-size: clamp(15px,1.5vw,17px);
  font-weight: 400;
  line-height: 1.6;
  color: #222;
  font-style: italic;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* ============================================================
   SECTION 5 — DARK: Rescue / Beyond Nutrition
   ============================================================ */
.far-rescue {
  background: #000;
  padding: clamp(72px,9vw,120px) clamp(20px,4vw,40px);
}
.far-rescue-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================
   SECTION 6 — LIGHT (cream): Pillars grid
   ============================================================ */
.far-pillars {
  background: #faf7f2;
  padding: clamp(72px,9vw,120px) clamp(20px,4vw,40px);
}
.far-pillars-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.far-pillars-headline {
  font-family: var(--font-heading);
  font-size: clamp(28px,4vw,50px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  text-align: center;
  margin-bottom: 52px;
  line-height: 1.15;
}
.far-pillars-headline em {
  color: #b8922e;
  font-style: normal;
  text-transform: none;
  font-size: 0.62em;
  letter-spacing: 0.03em;
}
.far-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 3px;
}
.far-pillar {
  background: #fff;
  padding: clamp(28px,3vw,44px);
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.far-pillar:hover {
  border-bottom-color: #b8922e;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.far-pillar-value {
  font-family: var(--font-heading);
  font-size: clamp(17px,2vw,24px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8922e;
  margin-bottom: 12px;
}
.far-pillar-desc {
  font-family: var(--font-body);
  font-size: clamp(14px,1.3vw,16px);
  font-weight: 300;
  line-height: 1.7;
  color: #555;
}

/* ============================================================
   SECTION 7 — DARK: CTA
   ============================================================ */
.far-cta {
  background: #0a0a0a;
  padding: clamp(80px,10vw,130px) clamp(20px,4vw,40px);
  text-align: center;
}
.far-cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.far-cta-kicker {
  font-family: var(--font-heading);
  font-size: clamp(10px,1.1vw,12px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: block;
}
.far-cta-statement {
  font-family: var(--font-body);
  font-size: clamp(24px,3.5vw,44px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 48px;
}
.far-cta-statement em {
  color: var(--accent);
  font-style: normal;
}
.far-btn {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-family: var(--font-heading);
  font-size: clamp(12px,1.2vw,14px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 20px 52px;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.far-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}

/* ============================================================
   SHARED UTILITIES
   ============================================================ */
.far-section-label {
  font-family: var(--font-heading);
  font-size: clamp(10px,1vw,12px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: block;
}
/* On dark backgrounds: gold label */
/* On light backgrounds: slightly darker gold */
.far-founder .far-section-label,
.far-rescue .far-section-label { color: var(--accent); }

.far-lead--dark {
  font-family: var(--font-body);
  font-size: clamp(20px,2.4vw,28px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--white);
  margin-bottom: 28px;
}
.far-body--dark {
  font-family: var(--font-body);
  font-size: clamp(15px,1.5vw,18px);
  font-weight: 300;
  line-height: 1.78;
  color: rgba(255,255,255,0.68);
  margin-bottom: 22px;
}
.far-body--dark:last-child { margin-bottom: 0; }

/* JOIN IMAGE — full bleed */
.far-join { display: block; width: 100%; line-height: 0; }
.far-join img { width: 100%; height: auto; display: block; }

/* REVEAL */
.far-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.far-reveal.visible { opacity: 1; transform: translateY(0); }

/* MOBILE */
@media (max-width: 640px) {
  .far-hero { min-height: 85vh; }
  .far-pillars-grid { grid-template-columns: 1fr; }
  .far-product-card { padding: 28px 22px; }
}