/* ════════════════════════════════════════════════════════
   WHOLE & BALANCED — Brand layer (October 2026)
   Loads after styles.css. Brings the site in line with the
   brand guide: palette, DM Sans + Cormorant Garamond, logo.
   ════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --ivory:    #F6F1E8;   /* Warm Ivory — main background */
  --bone:     #EDE5D8;   /* Soft Cream — alternate sections */
  --stone:    #DED4C4;   /* soft cream-taupe — borders & dividers */
  --mushroom: #B8A99A;   /* Warm Taupe — strong borders, placeholders */

  /* Dark (was near-black) → Deep Olive family */
  --soft-black: #4A5144; /* Deep Olive — hero, footer, testimonials */
  --charcoal:   #3F463A; /* deeper olive — featured card */
  --mid-dark:   #434A3E;

  /* Accent → olive, sage & dusty blush */
  --rose:      #5F6855;  /* olive-sage — eyebrows, labels, lines (5:1 on ivory) */
  --rose-dk:   #4A5144;  /* Deep Olive — italic emphasis in headings */
  --rose-lt:   #D4A09A;  /* Dusty Blush — accents on dark backgrounds */
  --rose-pale: #F1E9E4;  /* soft Muted Blush tint — CTA background */

  /* Supporting */
  --sage:       #7C8670; /* deeper Dusty Sage — icons */
  --sage-pale:  #E9ECE4;
  --sage-dk:    #4A5144;
  --eucalyptus: #A8B09F; /* Dusty Sage — text on dark */
  --matcha:     #7C8670;
  --matcha-lt:  #A8B09F;

  /* Text */
  --t1: #292B27;  /* Charcoal */
  --t2: #57564E;  /* warm charcoal-taupe body text */
  --t3: #6F6357;  /* Deep Taupe — captions, labels */

  --sans: 'DM Sans', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
}

body { font-family: var(--sans); background: var(--ivory); color: var(--t1); }
::selection { background: #D8C8C1; color: var(--t1); }

/* ── Logo in nav & footer ─────────────────────────── */
.nav-logo, .f-logo {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--serif); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.22em;
}
.nav-logo .wb-mark { width: 38px; height: 38px; flex-shrink: 0; }
.f-logo .wb-mark { width: 44px; height: 44px; flex-shrink: 0; }
.wb-word { font-size: clamp(0.82rem, 1.4vw, 0.98rem); line-height: 1; white-space: nowrap; }
.wb-word i { font-style: italic; text-transform: none; letter-spacing: 0; }
.f-logo { flex-direction: row; color: var(--ivory); }
.f-logo-text { display: flex; flex-direction: column; gap: 0.45rem; }
.f-tagline-line {
  display: block; font-family: var(--sans); font-size: 0.58rem; font-weight: 400;
  letter-spacing: 0.32em; color: var(--eucalyptus);
}
@media (max-width: 420px) { .nav-logo .wb-word { font-size: 0.74rem; letter-spacing: 0.16em; } }

/* ── Nav: higher contrast on hero ─────────────────── */
.nav-center a { color: rgba(255,255,255,0.92) !important; font-weight: 500; }
.nav-center a:hover { color: #fff !important; }
.nav-ig { color: rgba(255,255,255,0.88) !important; }
.nav-ig:hover { color: #fff !important; }
#nav.sc .nav-center a,
body.page-solid #nav .nav-center a { color: var(--t2) !important; font-weight: 400; }
#nav.sc .nav-ig,
body.page-solid #nav .nav-ig { color: rgba(74,81,68,0.6) !important; }

/* ── Hero: olive veil instead of near-black ───────── */
.hero-overlay {
  background:
    linear-gradient(to top, rgba(55,61,50,0.90) 0%, rgba(55,61,50,0.50) 35%, rgba(55,61,50,0.12) 100%),
    linear-gradient(to right, rgba(55,61,50,0.94) 0%, rgba(55,61,50,0.82) 28%, rgba(55,61,50,0.38) 55%, rgba(55,61,50,0) 80%);
}
.hero-h1 em { color: #F0C4BF; }
.hero-eyebrow { color: rgba(246,241,232,0.95); letter-spacing: 0.14em; }
.hero-eyebrow::before { background: rgba(212,160,154,0.7); }
.hero-tagline-brand { color: rgba(246,241,232,0.88) !important; opacity: 1 !important; animation: none !important; }
.hero-sub { color: rgba(255,255,255,0.88) !important; }
/* Ticker — more visible */
.hero-ticker { border-top-color: rgba(212,160,154,0.35); background: rgba(32,42,28,0.45); padding: 0.9rem 0; }
.hero-ticker-item { color: rgba(255,255,255,0.82); font-size: 0.62rem; letter-spacing: 0.2em; font-weight: 500; }
.hero-ticker-item::after { opacity: 0.9; }
.hero-tagline-brand {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(246,241,232,0.72); margin: -1.2rem 0 2rem;
  opacity: 0; animation: fadeUp 1.1s var(--ease) 0.7s forwards;
}

/* ── Buttons ──────────────────────────────────────── */
.btn-primary { background: var(--soft-black); color: var(--ivory); }
.btn-primary:hover { background: var(--charcoal); }
#hero .btn-primary { background: var(--ivory); color: var(--soft-black); }
#hero .btn-primary:hover { background: #fff; }
.btn-rose { background: var(--ivory); color: var(--soft-black); }
.btn-rose:hover { background: #fff; }
.btn-ghost-light { border-color: rgba(246,241,232,0.45); color: rgba(246,241,232,0.85); }
.nav-cta { background: var(--sage); border-color: var(--sage); color: var(--ivory); }
.nav-cta:hover, #nav.sc .nav-cta:hover, body.page-solid #nav .nav-cta:hover {
  background: var(--soft-black) !important; border-color: var(--soft-black) !important; color: var(--ivory) !important;
}
.btn-form:hover { background: var(--charcoal); }

/* ── Nav on scroll / solid pages ──────────────────── */
#nav.sc { background: rgba(246,241,232,0.86); }
body.page-solid #nav { background: rgba(246,241,232,0.97); }
.nav-center a:hover { color: var(--ivory) !important; }

/* ── Blush accents (replaced champagne gold) ──────── */
.cta-inner { border-color: rgba(212,160,154,0.45); }
.hl { background-color: rgba(212,160,154,0.22); }
#form-ok { border-color: rgba(212,160,154,0.4); }
.olga-cred-grid { border-color: rgba(212,160,154,0.18); }
.olga-cred-item { border-color: rgba(212,160,154,0.12); }
.svc-card:hover { border-color: var(--sage); }
.svc-card.featured { border-color: var(--rose-lt); }
.concern-card:hover { background: var(--rose-pale); }
.concern-card::before { background: var(--rose-lt); }
.bio-preview-corner, .olga-corner-br { border-color: var(--rose-lt); }
.tcard-mark { color: var(--rose-lt); }
.pullquote-mark { color: var(--rose-lt); opacity: 0.35; }
.article-body > p:first-child::first-letter { color: var(--rose-dk); }
.fg input, .fg select, .fg textarea { background: #FBF8F3; }

/* ── Footer ───────────────────────────────────────── */
footer { padding: 2.25rem var(--pad); }
.f-copy { color: rgba(246,241,232,0.45); }
.fsoc { border-color: rgba(246,241,232,0.2); color: rgba(246,241,232,0.6); }
.mob-footer-nav a { color: rgba(246,241,232,0.6); }

/* ── Functional Lab Testing (Genova) — Oct 2026 ───────── */
#lab-testing { padding: var(--sec) var(--pad); background: var(--bone); border-top: 1px solid var(--stone); }
.lab-head { max-width: var(--max); margin: 0 auto clamp(2.5rem,5vw,4rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: end; }
.lab-head h2 { font-family: var(--serif); font-size: clamp(2.6rem,5vw,5rem); font-weight: 400; line-height: 1.04; color: var(--t1); }
.lab-head h2 em { font-style: italic; color: var(--rose-dk); }
.lab-intro p { font-size: clamp(0.9rem,1.5vw,0.98rem); color: var(--t2); line-height: 1.85; }
.lab-intro strong { color: var(--t1); font-weight: 500; }
.lab-sub { margin-top: 0.9rem; font-size: 0.72rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose) !important; }
.lab-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.lab-card { background: var(--ivory); border: 1px solid var(--stone); padding: clamp(1.8rem,3.5vw,2.8rem);
  display: flex; flex-direction: column; gap: 1rem; transition: border-color .4s, transform .3s; }
.lab-card:hover { border-color: var(--rose); transform: translateY(-3px); }
.lab-icon { width: 34px; height: 34px; color: var(--sage); }
.lab-tag { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--t3); display: inline-flex; align-items: center; gap: .5rem; }
.lab-card h3 { font-family: var(--serif); font-size: clamp(1.45rem,2.2vw,1.9rem); font-weight: 400; line-height: 1.15; color: var(--t1); }
.lab-card h3 em { font-style: italic; color: var(--rose-dk); }
.lab-tests { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: 1rem; border-top: 1px solid var(--stone); padding-top: 1.1rem; }
.lab-tests li { font-size: 0.86rem; color: var(--t2); line-height: 1.65; }
.lab-tests li span { display: block; font-weight: 500; color: var(--t1); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: .2rem; }
.lab-tests li span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #C6A878; margin-right: .55rem; vertical-align: middle; }
.lab-steps { max-width: var(--max); margin: clamp(3rem,6vw,4.5rem) auto 0; }
.lab-steps-label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose); margin-bottom: 1.6rem; }
.lab-steps ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,3vw,3rem); }
.lab-steps li { display: flex; gap: 1rem; align-items: flex-start; border-top: 1px solid var(--mushroom); padding-top: 1.2rem; }
.lab-steps b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.9rem; line-height: 1; color: #B0915F; }
.lab-steps h4 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--t1); margin: 0 0 .35rem; }
.lab-steps p { font-size: 0.86rem; color: var(--t2); line-height: 1.7; margin: 0; }
.lab-foot { max-width: var(--max); margin: clamp(2.5rem,5vw,3.5rem) auto 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  background: var(--soft-black); padding: clamp(1.8rem,4vw,2.6rem) clamp(1.6rem,4vw,3rem); }
.lab-foot p { color: var(--ivory); opacity: .88; font-size: 0.92rem; line-height: 1.75; max-width: 620px; margin: 0; }
.lab-btn { white-space: nowrap; flex-shrink: 0; }
.lab-disclaimer { max-width: var(--max); margin: 1.2rem auto 0; font-size: 0.7rem; color: var(--t3); line-height: 1.6; }
@media (max-width: 900px) {
  .lab-head, .lab-grid, .lab-steps ol { grid-template-columns: 1fr; }
  .lab-head { align-items: start; gap: 1.2rem; }
  .lab-foot { flex-direction: column; align-items: flex-start; }
  .lab-btn { white-space: normal; }
}
.lab-foot .lab-btn { background: var(--ivory); color: var(--soft-black); }
.lab-foot .lab-btn:hover { background: #fff; color: var(--t1); }

/* ── Gut Reset Program (waitlist) — Oct 2026 ─────────── */
#gut-reset-band { background: var(--soft-black); padding: clamp(3.5rem,7vw,5.5rem) var(--pad); }
.grb-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,5rem); align-items: center; }
#gut-reset-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem,4.5vw,4.2rem); line-height: 1.05; color: var(--ivory); }
#gut-reset-band h2 em { font-style: italic; color: var(--rose-lt); }
#gut-reset-band p:not(.eyebrow) { color: rgba(246,241,232,.85); font-size: clamp(.9rem,1.5vw,1rem); line-height: 1.8; margin: 0 0 1.6rem; }
.grb-btn { background: var(--ivory); color: var(--soft-black); }
.grb-btn:hover { background: #fff; color: var(--t1); }
#gr-hero { padding: calc(var(--sec) + 4rem) var(--pad) var(--sec); background: var(--ivory); }
.gr-hero-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem,6vw,6rem); align-items: start; }
#gr-hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem,6vw,5.8rem); line-height: 1.02; color: var(--t1); margin: .4rem 0 1.4rem; }
#gr-hero h1 em { font-style: italic; color: var(--rose-dk); }
.gr-lead { font-size: clamp(.95rem,1.6vw,1.05rem); color: var(--t2); line-height: 1.85; max-width: 520px; }
.gr-points { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: .9rem; }
.gr-points li { font-size: .92rem; color: var(--t1); padding-left: 1.4rem; position: relative; line-height: 1.6; }
.gr-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: #C6A878; }
.gr-form { background: var(--bone); border: 1px solid var(--stone); padding: clamp(1.6rem,4vw,2.6rem) !important; }
.gr-form-title { font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.3rem); color: var(--t1); line-height: 1.1; margin: 0; }
.gr-form-sub { font-size: .88rem; color: var(--t2); line-height: 1.6; margin: .4rem 0 .4rem; }
#gr-for { padding: var(--sec) var(--pad); background: var(--bone); }
.gr-for-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,6rem); align-items: start; }
#gr-for h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem,4vw,3.6rem); line-height: 1.08; color: var(--t1); }
#gr-for h2 em { font-style: italic; color: var(--rose-dk); }
.gr-signs { list-style: none; padding: 0; margin: 0; }
.gr-signs li { font-family: var(--serif); font-size: clamp(1.2rem,2vw,1.5rem); color: var(--t1); padding: 1.05rem 0; border-bottom: 1px solid var(--mushroom); line-height: 1.35; }
.gr-signs li:first-child { border-top: 1px solid var(--mushroom); }
@media (max-width: 900px) {
  .grb-inner, .gr-hero-inner, .gr-for-inner { grid-template-columns: 1fr; }
  #gr-hero { padding-top: calc(var(--sec) + 2rem); }
}
/* Nav: keep links from colliding with the logo between tablet and small desktop */
@media (min-width: 768px) and (max-width: 1240px) {
  .nav-ig { display: none; }
  .nav-center { position: static; transform: none; margin: 0 auto; gap: clamp(1rem, 1.8vw, 1.6rem); }
  .nav-center a { letter-spacing: 0.12em; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .wb-word { display: none; }
}