/* ============================================================
   BioMeBar — Our Approach page custom styles
   Ported verbatim from the verified mockup
   (mockups/our-approach-lovable-mockup.html). Loaded AFTER
   our-approach-tw.css (compiled Tailwind utilities + preflight).
   ============================================================ */

/* ===== Self-hosted fonts (no Google/Adobe CDN) ===== */
/* Jost = free Futura PT stand-in. Swap to real Futura PT (Adobe kit)
   by putting "Futura PT" first in --font-sans and loading the kit. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/jost-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/cormorant-garamond-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Design tokens ===== */
:root {
  --radius: 0.75rem;

  --background: oklch(0.11 0.008 25);    /* near-black */
  --foreground: oklch(0.97 0.008 85);    /* ivory text on dark */

  --cream: oklch(0.972 0.01 85);         /* ivory surface */
  --beige: oklch(0.92 0.018 75);         /* warm beige */
  --ink: oklch(0.16 0.008 25);
  --ink-soft: oklch(0.42 0.008 25);

  --card: oklch(0.995 0.004 85);

  --primary: oklch(0.50 0.21 27);        /* deep crimson red */
  --primary-foreground: oklch(0.98 0.008 85);
  --primary-glow: oklch(0.60 0.22 25);

  --accent: oklch(0.92 0.018 75);        /* beige trust band */
  --border: oklch(0.88 0.012 80);

  --gradient-hero: radial-gradient(ellipse at 75% 50%, oklch(0.20 0.06 27) 0%, oklch(0.09 0.015 25) 60%, oklch(0.06 0.008 25) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary), oklch(0.40 0.20 25));
  --shadow-elegant: 0 20px 60px -20px color-mix(in oklab, var(--primary) 35%, transparent);
  --shadow-soft: 0 10px 40px -15px oklch(0.1 0.008 25 / 0.15);

  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Futura PT", "Jost", "Century Gothic", system-ui, -apple-system, sans-serif;
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
section[id] { scroll-margin-top: 6rem; }
img { max-width: 100%; }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; }

/* ============================================================
   Live-site (WordPress / Bricks) cascade overrides.
   Bricks prints inline <style> in wp_head() BEFORE this file loads:
     1. html{font-size:62.5%}  -> 1rem=10px, shrinking EVERY rem-based
        Tailwind size to 62.5% ("everything looks small on desktop").
     2. h1..h6{color:var(--dark)} (#000) -> a DIRECT black color on every
        heading, which beats the cream the headings should INHERIT from
        their text-cream wrapper -> headings vanish on the dark sections.
   Mirrors the proven fix in template-landing.php / landing.css. Scoped to
   body.our-approach-page (NOT bare html/:root) so the font-size reset can
   never leak to Bricks-built pages if this CSS is ever combined globally;
   !important + scoping win regardless of source order or LiteSpeed reorder.
   'inherit' lets headings follow their section color (cream on dark, ink
   on light); the crimson <span style="color:var(--primary)"> bits keep
   their own inline color.
   ============================================================ */
html:has(body.our-approach-page) {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.our-approach-page h1, .our-approach-page h2, .our-approach-page h3,
.our-approach-page h4, .our-approach-page h5, .our-approach-page h6 { color: inherit !important; }

.display-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.step-num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--primary);
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
/* Clean upright percent sign so the ornate italic serif "%" doesn't read like a stray asterisk */
.stat-pct {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.5em;
  vertical-align: 0.05em;
  letter-spacing: 0;
  margin-left: 0.05em;
}

/* ===== Buttons ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.75rem;
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  border-radius: 9999px;
  font-family: var(--font-sans); font-style: normal; font-weight: 500;
  letter-spacing: 0.02em; font-size: 0.95rem; text-transform: none;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-elegant);
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-primary::before {
  content: ""; position: absolute; top: 0; left: -120%; height: 100%; width: 60%;
  background: linear-gradient(120deg, transparent 0%, color-mix(in oklab, white 35%, transparent) 50%, transparent 100%);
  transform: skewX(-20deg); transition: left .7s ease; pointer-events: none;
}
.btn-primary:hover::before { left: 140%; }
.btn-ghost-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border: 1px solid color-mix(in oklab, var(--cream) 30%, transparent);
  color: var(--cream); border-radius: 9999px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 500; letter-spacing: .02em; font-size: .95rem;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-ghost-dark:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--cream) 70%, transparent);
  background: color-mix(in oklab, var(--cream) 10%, transparent);
}
.underline-grow {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size .5s ease;
}
.underline-grow:hover { background-size: 100% 2px; }

/* ===== Header ===== */
#site-header { transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
#site-header.scrolled {
  background: color-mix(in oklab, var(--background) 82%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: color-mix(in oklab, var(--cream) 12%, transparent);
}
.nav-link {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; color: color-mix(in oklab, var(--cream) 85%, transparent);
  transition: color .2s ease;
}
.nav-link:hover { color: var(--primary-glow); }
.icon-close { display: none; }
#menu-btn.open .icon-open { display: none; }
#menu-btn.open .icon-close { display: block; }
#mobile-menu {
  background: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
}
.mobile-link {
  color: var(--cream); text-decoration: none; padding: .85rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
  font-size: .95rem; letter-spacing: .04em;
}

/* ===== Card / hover accents ===== */
.partner { opacity: .9; }
.arrow-btn { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.arrow-btn:hover { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.result-card { transition: background .3s ease; }
.result-card:hover { background: color-mix(in oklab, var(--primary) 10%, var(--background)); }

/* ===== Animations ===== */
.fade-up { animation: fadeUp .9s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.reveal,.reveal-zoom,.reveal-left,.reveal-right { will-change: opacity, transform; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-zoom { opacity: 0; transform: scale(.96); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal-zoom.in { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal-left.in { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal-right.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal-zoom,.reveal-left,.reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fade-up { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Hide the site-wide Click-to-Chat WhatsApp widget on the Our Approach page ===== */
/* The Click-to-Chat plugin injects its own #ht-ctc-chat button via wp_footer.
   This template carries its own hardcoded floating WhatsApp button, so suppress
   the plugin's to avoid two buttons. */
.our-approach-page #ht-ctc-chat { display: none !important; }