/* =========================================================================
   OPTIBLISS OPTIMAL — MASTER STYLESHEET
   Paste ALL of this into: WordPress Customizer → Additional CSS
   Last updated: site-wide redesign with photo-based hero
   ========================================================================= */

/* ---------- 1. FONT IMPORTS & DESIGN TOKENS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@300;400;500;700;900&display=swap');

:root {
  /* Brand palette */
  --ob-cream: #f5f1ea;
  --ob-cream-light: #faf7f1;
  --ob-cream-deep: #ebe5d9;
  --ob-ink: #1a1f1d;
  --ob-ink-soft: #3a4541;
  --ob-mid: #5a6258;

  --ob-sage: #5a6f5e;
  --ob-sage-light: #7e9482;
  --ob-sage-deep: #2d4a3d;

  --ob-gold: #c39328;
  --ob-gold-light: #d4a93f;
  --ob-gold-deep: #9d7720;

  --ob-blue: #5fa8c4;
  --ob-blue-light: #7ec3d4;
  --ob-blue-deep: #3d8aa8;

  --ob-card-black: #0e0e10;
  --ob-card-black-soft: #1a1a1f;

  /* Type */
  --ob-display: 'Playfair Display', Georgia, serif;
  --ob-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- 2. RESETS & WORDPRESS THEME OVERRIDES ----------
   The WordPress theme (and its many !important rules) needs heavy specificity.
   These selectors are intentionally narrow + !important to win.
*/
.optibliss-page,
.optibliss-page * {
  box-sizing: border-box !important;
}

.optibliss-page {
  font-family: var(--ob-body) !important;
  color: var(--ob-ink) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ob-cream-light) !important;
}

.optibliss-page h1,
.optibliss-page h2,
.optibliss-page h3,
.optibliss-page h4,
.optibliss-page h5 {
  font-family: var(--ob-display) !important;
  font-weight: 500 !important;
  color: var(--ob-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.optibliss-page p {
  font-family: var(--ob-body) !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 1em 0 !important;
}

/* DARK SECTION OVERRIDES — these reverse the dark text on dark-background sections.
   Use highest-specificity to defeat the generic rule above. */
.optibliss-page .ob-quiz h1,
.optibliss-page .ob-quiz h2,
.optibliss-page .ob-quiz h3,
.optibliss-page .ob-quiz h4,
.optibliss-page .ob-quiz .ob-quiz-title,
.optibliss-page .ob-quiz .ob-step-title,
.optibliss-page .ob-email h1,
.optibliss-page .ob-email h2,
.optibliss-page .ob-email h3,
.optibliss-page .ob-email .ob-email-title,
.optibliss-page .ob-footer h1,
.optibliss-page .ob-footer h2,
.optibliss-page .ob-footer h3,
.optibliss-page .ob-footer h4,
.optibliss-page .ob-footer .ob-footer-heading {
  color: var(--ob-cream-light) !important;
}

.optibliss-page .ob-quiz p,
.optibliss-page .ob-quiz .ob-quiz-sub,
.optibliss-page .ob-quiz .ob-step-desc,
.optibliss-page .ob-email p,
.optibliss-page .ob-email .ob-email-sub,
.optibliss-page .ob-footer p,
.optibliss-page .ob-floating-card p,
.optibliss-page .ob-floating-card-text {
  color: rgba(245, 241, 234, 0.78) !important;
}

.optibliss-page .ob-floating-card-text {
  color: #f5f1ea !important;
}

.optibliss-page a {
  color: inherit;
  text-decoration: none !important;
}

/* Kill default WordPress content width inside our hero so the photo can be full-bleed */
.optibliss-page .alignfull,
.optibliss-page section {
  max-width: none !important;
  width: 100% !important;
}

/* ---------- 3. NAVIGATION (theme top bar polish) ---------- */
/* These rules target whatever WordPress theme nav class is active.
   Adjust selector if your theme uses a different class. */
.wp-block-site-title a,
.wp-block-site-title {
  font-family: var(--ob-display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--ob-ink) !important;
}

/* Header/nav background to cream */
header.wp-block-template-part,
.wp-block-group.has-background[style*="background-color"] {
  background: var(--ob-cream-light) !important;
}

/* ---------- 4. HERO SECTION (photo-based, matches new mockup) ---------- */
.ob-hero {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  min-height: 88vh !important;
  background: var(--ob-cream-light) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ob-hero-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 6vh 6vw 6vh 7vw !important;
  background: var(--ob-cream-light) !important;
  position: relative !important;
  z-index: 2 !important;
}

.ob-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  margin-bottom: 28px !important;
}

.ob-headline {
  font-family: var(--ob-display) !important;
  font-size: clamp(38px, 4.4vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  color: var(--ob-ink) !important;
  margin: 0 0 28px 0 !important;
  white-space: normal !important;
}

.ob-headline-line {
  display: block !important;
  white-space: nowrap !important;
}

.ob-headline .ob-gold {
  color: var(--ob-gold) !important;
  -webkit-text-fill-color: var(--ob-gold) !important;
}

.ob-headline .ob-blue {
  color: var(--ob-blue) !important;
  -webkit-text-fill-color: var(--ob-blue) !important;
}

.ob-headline .ob-period {
  color: var(--ob-sage-deep) !important;
  -webkit-text-fill-color: var(--ob-sage-deep) !important;
}

.ob-sub {
  font-family: var(--ob-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--ob-ink-soft) !important;
  max-width: 480px !important;
  margin: 0 0 40px 0 !important;
}

/* Pillar icons row */
.ob-pillars {
  display: grid !important;
  grid-template-columns: repeat(4, auto) !important;
  gap: 36px !important;
  margin-bottom: 44px !important;
  max-width: 540px !important;
}

.ob-pillar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

.ob-pillar-icon {
  width: 56px !important;
  height: 56px !important;
  border: 1.5px solid var(--ob-sage) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ob-sage) !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
}

.ob-pillar:hover .ob-pillar-icon {
  background: var(--ob-sage) !important;
  color: var(--ob-cream-light) !important;
  transform: translateY(-2px) !important;
}

.ob-pillar-label {
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ob-ink-soft) !important;
  line-height: 1.3 !important;
  max-width: 90px !important;
}

/* Big blue gradient pill button */
.ob-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 44px !important;
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #6fb4d4 0%, #4a9fc4 50%, #3d8aa8 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(95, 168, 196, 0.28), 0 2px 6px rgba(95, 168, 196, 0.18) !important;
  transition: all 0.3s ease !important;
  margin-bottom: 14px !important;
}

.ob-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(95, 168, 196, 0.4), 0 4px 8px rgba(95, 168, 196, 0.25) !important;
}

.ob-cta-note {
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  color: var(--ob-mid) !important;
  margin: 0 !important;
}

/* RIGHT SIDE — photo */
/* ---------- HERO RIGHT-SIDE PHOTO ----------
   ⚠️  REPLACE THE URL BELOW with your uploaded hero image URL.
   Upload images/hero-breathing.jpg to WordPress Media Library, copy the
   "File URL" from Media Library, and paste it where it says
   YOUR_HERO_PHOTO_URL_HERE below. The gradient stays as a fallback.
*/
.ob-hero-right {
  position: relative !important;
  background-color: var(--ob-cream-deep) !important;
  background-image:
    linear-gradient(90deg, rgba(250,247,241,0.55) 0%, transparent 22%),
    url('https://optibliss-sxdkg.wordpress.com/wp-content/uploads/2026/05/optimize-your-health.-elevate-your-life.-1.png'),
    linear-gradient(135deg, var(--ob-cream-deep) 0%, #c9d6cd 50%, #9bb3a3 100%) !important;
  background-size: cover, cover, cover !important;
  background-position: center, center 25%, center !important;
  background-repeat: no-repeat !important;
  min-height: 88vh !important;
  overflow: hidden !important;
}

/* Decorative organic-blob layer (only visible if photo doesn't load) */
.ob-hero-right::after {
  content: "" !important;
  position: absolute !important;
  top: 12%; right: -8%;
  width: 70%; height: 70%;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(126,148,130,0.18) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Soft cream-to-image gradient on the seam between sides */
.ob-hero-right::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, var(--ob-cream-light) 0%, transparent 18%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Floating black testimonial card on the photo */
.ob-floating-card {
  position: absolute !important;
  right: 4% !important;
  bottom: 9% !important;
  background: var(--ob-card-black) !important;
  color: #fff !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  max-width: 360px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.15) !important;
  z-index: 3 !important;
}

.ob-floating-card-icon {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ob-gold) !important;
}

.ob-floating-card-text {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #f5f1ea !important;
  margin: 0 !important;
}

/* Mobile responsive hero */
@media (max-width: 900px) {
  .ob-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .ob-hero-left {
    padding: 60px 28px 48px 28px !important;
    order: 1 !important;
  }
  .ob-hero-right {
    order: 2 !important;
    min-height: 460px !important;
  }
  .ob-headline {
    font-size: 44px !important;
  }
  .ob-pillars {
    gap: 18px !important;
  }
  .ob-pillar-icon {
    width: 48px !important;
    height: 48px !important;
  }
  .ob-pillar-label {
    font-size: 12px !important;
  }
  .ob-floating-card {
    right: 16px !important;
    bottom: 16px !important;
    max-width: 78% !important;
    padding: 16px 18px !important;
  }
}

/* ---------- 5. TICKER (announcement strip) ---------- */
.ob-ticker {
  background: var(--ob-sage-deep) !important;
  color: var(--ob-cream-light) !important;
  padding: 14px 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  position: relative !important;
}

.ob-ticker-inner {
  display: inline-block !important;
  animation: ob-marquee 38s linear infinite !important;
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.ob-ticker-item { padding: 0 28px !important; }
.ob-ticker-dot { color: var(--ob-gold) !important; }

@keyframes ob-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- 6. PROOF BAR ---------- */
.ob-proof {
  background: var(--ob-cream) !important;
  padding: 56px 28px !important;
  border-top: 1px solid var(--ob-cream-deep) !important;
  border-bottom: 1px solid var(--ob-cream-deep) !important;
}

.ob-proof-grid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.ob-proof-item {
  text-align: center !important;
  padding: 0 12px !important;
}

.ob-proof-num {
  font-family: var(--ob-display) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 500 !important;
  background: linear-gradient(135deg, var(--ob-gold-light) 0%, var(--ob-gold) 60%, var(--ob-gold-deep) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
}

.ob-proof-label {
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ob-mid) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

@media (max-width: 700px) {
  .ob-proof-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 36px 16px !important; }
}

/* ---------- 7. THREE PATHS SECTION ---------- */
.ob-paths {
  padding: 96px 28px !important;
  background: var(--ob-cream-light) !important;
}

.ob-paths-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ob-paths-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}

.ob-paths-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(32px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: var(--ob-ink) !important;
  margin: 0 0 18px 0 !important;
  letter-spacing: -0.01em !important;
}

.ob-paths-sub {
  font-family: var(--ob-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--ob-ink-soft) !important;
  text-align: center !important;
  max-width: 620px !important;
  margin: 0 auto 64px auto !important;
}

.ob-paths-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.ob-path-card {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 40px 32px !important;
  border: 1px solid var(--ob-cream-deep) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
}

.ob-path-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: var(--accent, var(--ob-sage)) !important;
}

.ob-path-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px rgba(26, 31, 29, 0.08), 0 4px 12px rgba(26, 31, 29, 0.04) !important;
}

.ob-path-card.gold { --accent: var(--ob-gold); }
.ob-path-card.blue { --accent: var(--ob-blue); }
.ob-path-card.sage { --accent: var(--ob-sage); }

.ob-path-num {
  font-family: var(--ob-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--accent, var(--ob-sage)) !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 14px !important;
}

.ob-path-title {
  font-family: var(--ob-display) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.15 !important;
}

.ob-path-desc {
  font-family: var(--ob-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 22px 0 !important;
}

.ob-path-link {
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent, var(--ob-sage)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: gap 0.25s ease !important;
}

.ob-path-link:hover { gap: 12px !important; }

@media (max-width: 900px) {
  .ob-paths-grid { grid-template-columns: 1fr !important; }
  .ob-paths { padding: 64px 24px !important; }
}

/* ---------- 8. QUIZ CTA SECTION (dark) ---------- */
.ob-quiz {
  background: linear-gradient(180deg, var(--ob-card-black) 0%, var(--ob-ink) 100%) !important;
  padding: 96px 28px !important;
  color: var(--ob-cream-light) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ob-quiz::before {
  content: "" !important;
  position: absolute !important;
  top: -60%; right: -20%;
  width: 80%; height: 200% !important;
  background: radial-gradient(circle, rgba(195,147,40,0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.ob-quiz-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
}

.ob-quiz-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold) !important;
  margin-bottom: 18px !important;
}

.ob-quiz-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(34px, 4vw, 56px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--ob-cream-light) !important;
  margin: 0 auto 22px auto !important;
  max-width: 720px !important;
  letter-spacing: -0.01em !important;
}

.ob-quiz-title em {
  font-style: italic !important;
  color: var(--ob-gold-light) !important;
}

.ob-quiz-sub {
  font-family: var(--ob-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(245, 241, 234, 0.75) !important;
  max-width: 580px !important;
  margin: 0 auto 56px auto !important;
}

.ob-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 56px !important;
  text-align: left !important;
}

.ob-step {
  background: rgba(245, 241, 234, 0.04) !important;
  border: 1px solid rgba(245, 241, 234, 0.1) !important;
  border-radius: 14px !important;
  padding: 32px 28px !important;
  transition: all 0.3s ease !important;
}

.ob-step:hover {
  border-color: rgba(195, 147, 40, 0.4) !important;
  background: rgba(195, 147, 40, 0.04) !important;
}

.ob-step-num {
  font-family: var(--ob-display) !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  background: linear-gradient(135deg, var(--ob-gold-light), var(--ob-gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1 !important;
  margin-bottom: 18px !important;
  display: block !important;
}

.ob-step-title {
  font-family: var(--ob-display) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  color: var(--ob-cream-light) !important;
  margin: 0 0 10px 0 !important;
}

.ob-step-desc {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(245, 241, 234, 0.7) !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .ob-steps { grid-template-columns: 1fr !important; }
  .ob-quiz { padding: 72px 24px !important; }
}

/* ---------- QUIZ EMBED WRAPPER (Interact iframe lives here) ---------- */
.ob-quiz-embed-wrapper {
  background: var(--ob-cream-light) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  max-width: 880px !important;
  margin: 32px auto 0 auto !important;
  box-shadow: 0 24px 56px rgba(14,14,16,0.28), 0 8px 18px rgba(14,14,16,0.14) !important;
  position: relative !important;
  z-index: 2 !important;
}

.ob-quiz-embed-wrapper > div[id^="interact-"] {
  margin: 0 auto !important;
  display: block !important;
  min-height: 600px !important;
}

@media (max-width: 900px) {
  .ob-quiz-embed-wrapper {
    padding: 16px !important;
    margin: 24px auto 0 auto !important;
  }
}

/* ---------- 9. ABOUT SECTION ---------- */
.ob-about {
  background: var(--ob-cream-light) !important;
  padding: 96px 28px !important;
}

.ob-about-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 80px !important;
  align-items: center !important;
}

/* ---------- ABOUT-SECTION PORTRAIT ----------
   ⚠️  REPLACE the URL below with your uploaded portrait URL.
   Upload images/megan-about.jpg to WordPress Media Library and paste the
   File URL where YOUR_PORTRAIT_PHOTO_URL_HERE appears below. The dark
   sage gradient stays as the fallback if the URL is missing.
*/
.ob-about-image {
  border-radius: 16px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 5 !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 32px !important;
  background-color: var(--ob-sage-deep) !important;
  background-image:
    linear-gradient(180deg, rgba(45,74,61,0.0) 0%, rgba(14,14,16,0.55) 100%),
    url('https://optibliss-sxdkg.wordpress.com/wp-content/uploads/2026/05/img_9158.jpg'),
    linear-gradient(135deg, var(--ob-sage-deep) 0%, var(--ob-sage) 50%, #4a5f4f 100%) !important;
  background-size: cover, cover, cover !important;
  background-position: center, center 20%, center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 24px 60px rgba(26, 31, 29, 0.22), 0 8px 20px rgba(26, 31, 29, 0.12) !important;
}

/* Decorative gold corner accent */
.ob-about-image::after {
  content: "" !important;
  position: absolute !important;
  top: 24px; right: 24px;
  width: 56px; height: 56px;
  border-top: 2px solid var(--ob-gold-light) !important;
  border-right: 2px solid var(--ob-gold-light) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.ob-about-image-caption {
  background: rgba(14, 14, 16, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  color: var(--ob-cream-light) !important;
  padding: 18px 22px !important;
  border-radius: 10px !important;
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  position: relative !important;
}

.ob-about-image-caption strong {
  color: var(--ob-gold-light) !important;
  display: block !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
}

.ob-about-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  margin-bottom: 16px !important;
}

.ob-about-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 24px 0 !important;
  letter-spacing: -0.01em !important;
}

.ob-about-title em {
  font-style: italic !important;
  color: var(--ob-gold) !important;
}

.ob-about-body {
  font-family: var(--ob-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 18px 0 !important;
}

.ob-about-creds {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 28px 0 !important;
}

.ob-cred {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage-deep) !important;
  background: rgba(90, 111, 94, 0.1) !important;
  border: 1px solid rgba(90, 111, 94, 0.2) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

.ob-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 30px !important;
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ob-ink) !important;
  background: transparent !important;
  border: 1.5px solid var(--ob-ink) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.ob-btn-secondary:hover {
  background: var(--ob-ink) !important;
  color: var(--ob-cream-light) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 900px) {
  .ob-about-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ob-about { padding: 72px 24px !important; }
}

/* ===========================================================================
   PROTOCOLS SECTION — three example protocol cards on the homepage
   Each card has an accent stripe + tag color tied to its pillar.
   =========================================================================== */
.ob-protocols {
  background: var(--ob-cream) !important;
  padding: 96px 28px !important;
  position: relative !important;
  overflow: hidden !important;
}

.ob-protocols-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
}

.ob-protocols-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}

.ob-protocols-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 400 !important;
  text-align: center !important;
  color: var(--ob-ink) !important;
  margin: 0 0 22px 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

.ob-protocols-title em {
  font-style: italic !important;
  color: var(--ob-gold) !important;
}

.ob-protocols-sub {
  font-family: var(--ob-body) !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--ob-ink-soft) !important;
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 64px auto !important;
}

.ob-protocols-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.ob-protocol-card {
  background: var(--ob-cream-light) !important;
  border: 1px solid var(--ob-cream-deep) !important;
  border-radius: 18px !important;
  padding: 36px 32px 32px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
}

.ob-protocol-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 5px !important;
  background: var(--accent, var(--ob-sage)) !important;
}

.ob-protocol-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 28px 56px rgba(26,31,29,0.10), 0 6px 14px rgba(26,31,29,0.05) !important;
  border-color: transparent !important;
}

.ob-protocol-adrenal { --accent: var(--ob-gold); }
.ob-protocol-thyroid { --accent: var(--ob-blue); }
.ob-protocol-longevity { --accent: var(--ob-sage); }

.ob-protocol-tag {
  display: inline-block !important;
  font-family: var(--ob-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent, var(--ob-sage)) !important;
  background: color-mix(in srgb, var(--accent, var(--ob-sage)) 12%, transparent) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 18px !important;
  align-self: flex-start !important;
}

.ob-protocol-name {
  font-family: var(--ob-display) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--ob-ink) !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.005em !important;
}

.ob-protocol-for {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 24px 0 !important;
}

.ob-protocol-for strong {
  color: var(--ob-sage-deep) !important;
  font-weight: 700 !important;
}

.ob-protocol-stack {
  background: rgba(245, 241, 234, 0.7) !important;
  border-radius: 12px !important;
  padding: 18px 18px 16px 18px !important;
  margin-bottom: 22px !important;
  flex: 1 1 auto !important;
}

.ob-protocol-stack-label {
  font-family: var(--ob-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  margin-bottom: 10px !important;
}

.ob-protocol-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ob-protocol-items li {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(90, 111, 94, 0.12) !important;
}

.ob-protocol-items li:last-child { border-bottom: none !important; }

.ob-protocol-item-name {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ob-ink) !important;
  line-height: 1.35 !important;
}

.ob-protocol-item-meta {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--ob-mid) !important;
  letter-spacing: 0.01em !important;
}

.ob-protocol-link {
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent, var(--ob-sage)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: gap 0.25s ease !important;
  align-self: flex-start !important;
}

.ob-protocol-link:hover { gap: 12px !important; }

.ob-protocols-footer {
  margin-top: 56px !important;
  text-align: center !important;
}

.ob-protocols-disclaimer {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--ob-mid) !important;
  max-width: 720px !important;
  margin: 28px auto 0 auto !important;
  font-style: italic !important;
}

@media (max-width: 980px) {
  .ob-protocols-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ob-protocols { padding: 72px 24px !important; }
}

/* ===========================================================================
   WORK WITH OUR TRUSTED EXPERTS — replaces the former About-Megan section
   Two-column layout: copy block on the left, "What to expect" steps on right
   =========================================================================== */
.ob-experts {
  background: var(--ob-cream-light) !important;
  padding: 96px 28px !important;
  position: relative !important;
}

.ob-experts-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: 80px !important;
  align-items: start !important;
}

.ob-experts-content { padding-top: 8px !important; }

.ob-experts-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  margin-bottom: 16px !important;
}

.ob-experts-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(32px, 3.8vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.12 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 24px 0 !important;
  letter-spacing: -0.01em !important;
}

.ob-experts-title em {
  font-style: italic !important;
  color: var(--ob-gold) !important;
}

.ob-experts-body {
  font-family: var(--ob-body) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 32px 0 !important;
}

.ob-experts-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 36px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.ob-experts-list-item {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
}

.ob-experts-list-icon {
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(195, 147, 40, 0.12) !important;
  color: var(--ob-gold) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

.ob-experts-list-item > div {
  font-family: var(--ob-body) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ob-ink-soft) !important;
}

.ob-experts-list-item strong {
  display: block !important;
  font-weight: 700 !important;
  color: var(--ob-ink) !important;
  font-size: 15px !important;
  margin-bottom: 2px !important;
}

.ob-btn-primary-on-cream {
  background: linear-gradient(135deg, #6fb4d4 0%, #4a9fc4 50%, #3d8aa8 100%) !important;
  margin-bottom: 14px !important;
}

.ob-experts-note {
  font-family: var(--ob-body) !important;
  font-size: 12.5px !important;
  color: var(--ob-mid) !important;
  margin: 0 !important;
  max-width: 460px !important;
  line-height: 1.55 !important;
}

/* Right-column "what to expect" card */
.ob-experts-card {
  background: var(--ob-card-black) !important;
  border-radius: 18px !important;
  padding: 36px 32px !important;
  color: var(--ob-cream-light) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 24px 56px rgba(14,14,16,0.18), 0 8px 18px rgba(14,14,16,0.10) !important;
}

.ob-experts-card::before {
  content: "" !important;
  position: absolute !important;
  top: -30% !important; right: -20% !important;
  width: 70% !important; height: 70% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(195,147,40,0.18) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.ob-experts-card-eyebrow {
  position: relative !important;
  font-family: var(--ob-body) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold) !important;
  margin-bottom: 24px !important;
  z-index: 1 !important;
}

.ob-experts-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

.ob-experts-steps > li {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

.ob-experts-step-num {
  flex-shrink: 0 !important;
  font-family: var(--ob-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ob-gold-light) !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  padding-top: 2px !important;
  min-width: 32px !important;
}

.ob-experts-steps h4 {
  font-family: var(--ob-display) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: var(--ob-cream-light) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}

.ob-experts-steps p {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(245, 241, 234, 0.78) !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .ob-experts-inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .ob-experts { padding: 72px 24px !important; }
}

/* ---------- 10. BLOG / JOURNAL TEASER ---------- */
.ob-journal {
  background: var(--ob-cream) !important;
  padding: 96px 28px !important;
}

.ob-journal-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ob-journal-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 56px !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.ob-journal-head-left { flex: 1 1 60%; }
.ob-journal-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  margin-bottom: 14px !important;
}

.ob-journal-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 400 !important;
  color: var(--ob-ink) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.ob-journal-title em { font-style: italic !important; color: var(--ob-gold) !important; }

.ob-journal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

.ob-post-card {
  background: var(--ob-cream-light) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--ob-cream-deep) !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

.ob-post-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 36px rgba(26, 31, 29, 0.08) !important;
}

.ob-post-img {
  aspect-ratio: 16 / 10 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--ob-cream-deep) !important;
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 16px !important;
}

/* Default category-gradient backgrounds — these set background-image directly,
   so when no inline url() override is provided, the gradient itself shows.
   When an inline url() IS set, the inline style wins and the photo shows.
   The gradient also remains visible in unused areas. */
.ob-post-img.ob-img-hormones {
  background-color: #d4a93f !important;
  background-image:
    linear-gradient(135deg, rgba(195,147,40,0.85) 0%, rgba(212,169,63,0.5) 50%, var(--ob-cream-deep) 100%),
    radial-gradient(circle at 75% 25%, rgba(195,147,40,0.5) 0%, transparent 60%) !important;
}
.ob-post-img.ob-img-metabolic {
  background-color: #7ec3d4 !important;
  background-image:
    linear-gradient(135deg, rgba(95,168,196,0.85) 0%, rgba(126,195,212,0.5) 50%, var(--ob-cream-deep) 100%),
    radial-gradient(circle at 75% 25%, rgba(95,168,196,0.5) 0%, transparent 60%) !important;
}
.ob-post-img.ob-img-longevity {
  background-color: #7e9482 !important;
  background-image:
    linear-gradient(135deg, rgba(90,111,94,0.85) 0%, rgba(126,148,130,0.5) 50%, var(--ob-cream-deep) 100%),
    radial-gradient(circle at 75% 25%, rgba(90,111,94,0.55) 0%, transparent 60%) !important;
}
.ob-post-img.ob-img-thyroid {
  background-color: #2d4a3d !important;
  background-image:
    linear-gradient(135deg, rgba(45,74,61,0.85) 0%, rgba(195,147,40,0.4) 60%, var(--ob-cream-deep) 100%),
    radial-gradient(circle at 75% 25%, rgba(45,74,61,0.5) 0%, transparent 60%) !important;
}

/* Default fallback for any post-img without category class */
.ob-post-img:not(.ob-img-hormones):not(.ob-img-metabolic):not(.ob-img-longevity):not(.ob-img-thyroid) {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(195,147,40,0.35) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(95,168,196,0.3) 0%, transparent 50%),
    linear-gradient(135deg, var(--ob-cream-deep) 0%, var(--ob-cream) 100%) !important;
}

.ob-post-img-tag {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(14, 14, 16, 0.82) !important;
  color: var(--ob-cream-light) !important;
  font-family: var(--ob-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(6px) !important;
}

.ob-post-body { padding: 26px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }

.ob-post-cat {
  font-family: var(--ob-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold) !important;
  margin-bottom: 12px !important;
}

.ob-post-title {
  font-family: var(--ob-display) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 12px 0 !important;
}

.ob-post-excerpt {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 18px 0 !important;
  flex: 1 !important;
}

.ob-post-meta {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  color: var(--ob-mid) !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 900px) {
  .ob-journal-grid { grid-template-columns: 1fr !important; }
  .ob-journal { padding: 72px 24px !important; }
}

/* ---------- 11. NEWSLETTER / EMAIL CAPTURE ---------- */
.ob-email {
  background: linear-gradient(135deg, var(--ob-sage-deep) 0%, var(--ob-sage) 100%) !important;
  padding: 80px 28px !important;
  color: var(--ob-cream-light) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ob-email::after {
  content: "" !important;
  position: absolute !important;
  bottom: -40%; left: -10%;
  width: 60%; height: 200% !important;
  background: radial-gradient(circle, rgba(195,147,40,0.12) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.ob-email-inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.ob-email-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold-light) !important;
  margin-bottom: 14px !important;
}

.ob-email-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 400 !important;
  color: var(--ob-cream-light) !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.ob-email-sub {
  font-family: var(--ob-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(245, 241, 234, 0.85) !important;
  margin: 0 0 32px 0 !important;
}

.ob-email-form {
  display: flex !important;
  gap: 10px !important;
  max-width: 480px !important;
  margin: 0 auto !important;
}

.ob-email-input {
  flex: 1 !important;
  padding: 16px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(245, 241, 234, 0.3) !important;
  background: rgba(245, 241, 234, 0.95) !important;
  font-family: var(--ob-body) !important;
  font-size: 15px !important;
  color: var(--ob-ink) !important;
  outline: none !important;
}

.ob-email-input:focus {
  background: var(--ob-cream-light) !important;
  border-color: var(--ob-gold-light) !important;
}

.ob-email-btn {
  padding: 16px 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ob-gold-light), var(--ob-gold)) !important;
  color: #fff !important;
  border: none !important;
  font-family: var(--ob-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.ob-email-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(195, 147, 40, 0.3) !important;
}

@media (max-width: 600px) {
  .ob-email-form { flex-direction: column !important; }
  .ob-email-input, .ob-email-btn { width: 100% !important; }
}

/* ---------- 12. FOOTER ---------- */
.ob-footer {
  background: var(--ob-ink) !important;
  color: var(--ob-cream) !important;
  padding: 72px 28px 32px 28px !important;
}

.ob-footer-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.ob-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  gap: 56px !important;
  margin-bottom: 56px !important;
}

.ob-footer-brand-name {
  font-family: var(--ob-display) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--ob-cream-light) !important;
  margin-bottom: 14px !important;
  letter-spacing: 0.01em !important;
}

.ob-footer-brand-name span { color: var(--ob-gold-light) !important; font-style: italic !important; }

.ob-footer-tagline {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(245, 241, 234, 0.6) !important;
  margin: 0 0 18px 0 !important;
  max-width: 320px !important;
}

.ob-footer-col-title {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold-light) !important;
  margin-bottom: 18px !important;
}

.ob-footer-link {
  display: block !important;
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  color: rgba(245, 241, 234, 0.7) !important;
  margin-bottom: 10px !important;
  transition: color 0.2s ease !important;
}

.ob-footer-link:hover { color: var(--ob-cream-light) !important; }

.ob-footer-bottom {
  border-top: 1px solid rgba(245, 241, 234, 0.1) !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.ob-footer-copy {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  color: rgba(245, 241, 234, 0.5) !important;
  margin: 0 !important;
}

.ob-footer-disclaimer {
  font-family: var(--ob-body) !important;
  font-size: 11px !important;
  color: rgba(245, 241, 234, 0.4) !important;
  max-width: 600px !important;
  margin: 16px 0 0 0 !important;
  line-height: 1.5 !important;
}

@media (max-width: 900px) {
  .ob-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}
@media (max-width: 600px) {
  .ob-footer-grid { grid-template-columns: 1fr !important; }
}

/* ---------- 13. BLOG INDEX PAGE STYLES ---------- */
.ob-blog-hero {
  background: var(--ob-cream-light) !important;
  padding: 96px 28px 56px 28px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--ob-cream-deep) !important;
}

.ob-blog-hero-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
}

.ob-blog-eyebrow {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ob-sage) !important;
  margin-bottom: 18px !important;
}

.ob-blog-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(40px, 5vw, 68px) !important;
  font-weight: 400 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.05 !important;
}

.ob-blog-title em { font-style: italic !important; color: var(--ob-gold) !important; }

.ob-blog-sub {
  font-family: var(--ob-body) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 auto !important;
  max-width: 600px !important;
}

/* Category filter */
.ob-blog-filter {
  background: var(--ob-cream-light) !important;
  padding: 24px 28px !important;
  border-bottom: 1px solid var(--ob-cream-deep) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.ob-filter-pill {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ob-mid) !important;
  background: transparent !important;
  border: 1px solid var(--ob-cream-deep) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.ob-filter-pill:hover, .ob-filter-pill.active {
  background: var(--ob-ink) !important;
  color: var(--ob-cream-light) !important;
  border-color: var(--ob-ink) !important;
}

/* Blog index grid */
.ob-blog-grid-section {
  padding: 64px 28px 96px 28px !important;
  background: var(--ob-cream-light) !important;
}

.ob-blog-grid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 36px !important;
}

.ob-blog-grid .ob-post-card { background: #fff !important; }

@media (max-width: 900px) { .ob-blog-grid { grid-template-columns: 1fr !important; gap: 28px !important; } }

/* Featured/hero post on blog page */
.ob-featured-post {
  max-width: 1200px !important;
  margin: 0 auto 48px auto !important;
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 0 !important;
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid var(--ob-cream-deep) !important;
}

.ob-featured-img {
  background-size: cover !important;
  background-position: center !important;
  min-height: 380px !important;
  position: relative !important;
  background-color: var(--ob-cream-deep) !important;
}

.ob-featured-img::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    linear-gradient(135deg, rgba(195,147,40,0.35) 0%, rgba(45,74,61,0.2) 50%, var(--ob-cream-deep) 100%),
    radial-gradient(circle at 30% 30%, rgba(195,147,40,0.25) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(45,74,61,0.3) 0%, transparent 60%) !important;
}

.ob-featured-img-tag {
  position: absolute !important;
  top: 24px; left: 24px;
  z-index: 1 !important;
  background: rgba(14, 14, 16, 0.85) !important;
  color: var(--ob-cream-light) !important;
  font-family: var(--ob-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  backdrop-filter: blur(6px) !important;
}

.ob-featured-body {
  padding: 56px 48px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.ob-featured-cat {
  font-family: var(--ob-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold) !important;
  margin-bottom: 14px !important;
}

.ob-featured-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
}

.ob-featured-excerpt {
  font-family: var(--ob-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 24px 0 !important;
}

@media (max-width: 900px) {
  .ob-featured-post { grid-template-columns: 1fr !important; }
  .ob-featured-body { padding: 36px 28px !important; }
  .ob-featured-img { min-height: 240px !important; }
}

/* ---------- 14. SINGLE POST / ARTICLE PAGE ---------- */
.ob-article {
  background: var(--ob-cream-light) !important;
  padding: 64px 28px 96px 28px !important;
}

.ob-article-header {
  max-width: 760px !important;
  margin: 0 auto 48px auto !important;
  text-align: center !important;
}

.ob-article-cat {
  font-family: var(--ob-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ob-gold) !important;
  margin-bottom: 18px !important;
}

.ob-article-title {
  font-family: var(--ob-display) !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  font-weight: 400 !important;
  color: var(--ob-ink) !important;
  margin: 0 0 24px 0 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
}

.ob-article-meta {
  font-family: var(--ob-body) !important;
  font-size: 14px !important;
  color: var(--ob-mid) !important;
  letter-spacing: 0.04em !important;
}

.ob-article-meta span { margin: 0 8px; color: var(--ob-cream-deep) !important; }

.ob-article-hero-img {
  max-width: 1100px !important;
  margin: 0 auto 56px auto !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 21 / 9 !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  background-color: var(--ob-cream-deep) !important;
}

.ob-article-hero-img::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0.45 !important;
  mix-blend-mode: multiply !important;
  background:
    linear-gradient(120deg, rgba(195,147,40,0.35) 0%, rgba(45,74,61,0.25) 50%, rgba(95,168,196,0.2) 100%),
    radial-gradient(circle at 25% 35%, rgba(195,147,40,0.3) 0%, transparent 55%),
    radial-gradient(circle at 75% 65%, rgba(45,74,61,0.35) 0%, transparent 60%) !important;
}

.ob-article-hero-img:not([style*="url"])::before {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.ob-article-body {
  max-width: 720px !important;
  margin: 0 auto !important;
}

.ob-article-body p {
  font-family: var(--ob-body) !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 1.4em 0 !important;
}

.ob-article-body h2 {
  font-family: var(--ob-display) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  color: var(--ob-ink) !important;
  margin: 1.8em 0 0.6em 0 !important;
}

.ob-article-body h3 {
  font-family: var(--ob-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--ob-ink) !important;
  margin: 1.6em 0 0.5em 0 !important;
}

.ob-article-body blockquote {
  border-left: 3px solid var(--ob-gold) !important;
  padding: 4px 0 4px 26px !important;
  margin: 32px 0 !important;
  font-family: var(--ob-display) !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: var(--ob-ink) !important;
  line-height: 1.5 !important;
}

.ob-article-body ul, .ob-article-body ol {
  font-family: var(--ob-body) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: var(--ob-ink-soft) !important;
  margin: 0 0 1.4em 1.2em !important;
}

.ob-article-body li { margin-bottom: 0.5em !important; }

/* ---------- 15. UTILITY: hide WordPress chrome we don't want ---------- */
/* Hide page title on hero pages where we have our own headline */
body.page .ob-hero ~ .wp-block-post-title,
body.page-template-front-page .wp-block-post-title { display: none !important; }

/* Make sure full-bleed sections actually go full width */
.optibliss-page > section,
.optibliss-page > div {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}
/* End master CSS */


/* Hide theme page-title bar on Blog page */
.page-id-454 .page-title-section { display: none !important; }


/* === Mobile hero overflow fix (phones <=767px) === */
@media (max-width: 767px) {
  .ob-headline-line { white-space: normal !important; }
  .ob-headline { font-size: clamp(26px, 7.5vw, 40px) !important; }
  .ob-hero-left { padding-left: 22px !important; padding-right: 22px !important; }
  .ob-sub, .ob-pillars { max-width: 100% !important; }
  html, body { overflow-x: hidden !important; }
}


/* Hide duplicate theme title on Find a Practitioner */
.page-id-484 .page-title-section { display: none !important; }