/* ════════════════════════════════════════════════════════
   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); }