/* ============================================================
   The Human Inside / 3 Thoughts On — Brand layer (v0.1)
   Loaded AFTER the page's inline <style>, so it overrides.
   Brand system: off-white ground · Blue structure · Coral CTAs.
   Font: Manrope (free Gilroy stand-in — swap to licensed Gilroy later).
   Reuses the page's real selectors so specificity ties and source-order wins.
   ============================================================ */

:root{
  --coral:#FD6856; --coral-dk:#e0543f; --coral-tint:#FFC2B3;
  --blue:#125C8E;  --blue-dk:#0e496f;  --blue-tint:#9dc7f7;
  --offwhite:#FBFBFC; --ink:#0E1620; --muted:#5B6571;
  --radius:14px; --shadow:0 10px 30px rgba(18,92,158,.12);
  --font:'Manrope','Geist','Segoe UI',system-ui,Arial,sans-serif;
}

/* ---- Base ---- */
body{ background:var(--offwhite)!important; color:var(--ink); font-family:var(--font); }
body p, body li, body span, body div{ font-family:var(--font); }

/* ---- Typography: headings in Blue, geometric, confident ---- */
h1,h2,h3,h4,h5,h6{ font-family:var(--font); color:var(--blue); letter-spacing:-.01em; }
h1{ font-weight:800; }
h2,h3{ font-weight:700; }
p{ color:var(--ink); line-height:1.65; }

/* ---- Homepage hero ---- */
#main-content h1{ font-size:clamp(2.1rem,5vw,3.4rem); margin:.2em 0 .15em; }
.tagline{ color:var(--coral); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.35rem);
  margin:0 0 1rem; letter-spacing:.01em; }

/* ---- CTAs: the cyan buttons become Coral; black hovers become Blue ---- */
#main-content .tb_see_more_btn, #main-content .btn a,
#videos-page .tb_see_more_btn, #videos-home .view a,
#sponsor .sponsor a, #live .rsvp a, #contact .submit{
  background:var(--coral)!important; color:#fff!important;
  border-color:var(--coral)!important; border-radius:10px;
}
#main-content .btn a:hover, #videos-page .tb_see_more_btnhover,
#videos-home .view a:hover, #sponsor .sponsor a:hover,
#live .rsvp a:hover, #contact-form .submit:hover, #contact .submit:hover{
  background:var(--blue)!important; color:#fff!important; border-color:var(--blue)!important;
}
#footer a:hover{ color:var(--coral)!important; }

/* ---- Sticky nav: black bar -> Blue brand bar (links stay light) ---- */
#header .scroll1, #header .sub-nav#nav{ background:var(--blue)!important; }

/* ---- Image-header hero banners (about/contact/youtube): keep overlay text WHITE over the photo ---- */
#header h1,#header h2,#header h3,#header h4,#header h5,#header p{ color:#fff!important; }

/* ---- The homepage capture section (#contact) was black -> light & readable ---- */
#contact{ background:var(--offwhite)!important; color:var(--ink)!important; }
#contact h1,#contact h2,#contact h3,#contact h4{ color:var(--blue)!important; }
#contact p,#contact label,#contact .help-block{ color:var(--muted)!important; }

/* ---- Section rhythm: a little more air, a "wisdom brand" calm ---- */
#main-content, #videos-home, #podcast-media{ padding-top:8px; }

/* ---- Capture band (already scoped via .thi-capture) inherits the brand font ---- */
.thi-capture{ font-family:var(--font)!important; }
.thi-capture h3{ letter-spacing:-.01em; }