/*
 * BioVela Brand Override — biovela.css
 * Approved 2026-05-30 by Tim Shank
 *
 * Pellicle White:      #F5F2EE
 * Cellulose Teal:      #2A6B6B
 * Nanoparticle Silver: #A8B0B8
 * Culture Black:       #1A1F1F
 * Agar Charcoal:       #2E3535
 * HMDS Mist:           #D9E4E4
 */

/* ── Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bv-white:   #F5F2EE;
  --bv-teal:    #2A6B6B;
  --bv-teal-dk: #1f5252;
  --bv-silver:  #A8B0B8;
  --bv-black:   #1A1F1F;
  --bv-charcoal:#2E3535;
  --bv-mist:    #D9E4E4;
}

/* ── Global Typography ─────────────────────────────────────── */
body {
  font-family: 'Inter', Calibri, Helvetica, sans-serif !important;
  color: var(--bv-black) !important;
  background-color: var(--bv-white) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', 'Calibri Light', Helvetica, sans-serif !important;
}

/* ── Preload flash → Cellulose Teal ────────────────────────── */
body,
body.is-preload,
body.is-preload #page-wrapper {
  background: var(--bv-teal) !important;
}

/* ── Header ────────────────────────────────────────────────── */
#header h1 a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff !important;
}

/* ── Banner ────────────────────────────────────────────────── */
#banner {
  background-color: var(--bv-charcoal) !important;
  background-image:
    linear-gradient(rgba(26, 31, 31, 0.72), rgba(26, 31, 31, 0.72)),
    radial-gradient(ellipse at 20% 60%, rgba(42, 107, 107, 0.3) 0%, transparent 60%),
    url('../../images/banner-bg.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#banner h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700;
  font-size: 3.5rem;
  letter-spacing: 0.04em;
  color: var(--bv-white) !important;
}

#banner p {
  font-family: 'Inter', sans-serif !important;
  color: var(--bv-silver) !important;
  font-size: 1.1rem;
  line-height: 1.8;
}

#banner .button.primary {
  background-color: var(--bv-teal) !important;
  border-color: var(--bv-teal) !important;
  color: #fff !important;
}

#banner .button.primary:hover {
  background-color: var(--bv-teal-dk) !important;
  border-color: var(--bv-teal-dk) !important;
}

#banner .more {
  border-color: var(--bv-silver) !important;
  color: var(--bv-silver) !important;
}

/* ── Section One — Platform Intro (light) ──────────────────── */
.wrapper.style1 {
  background-color: var(--bv-mist) !important;
}

.wrapper.style1 h2,
.wrapper.style1 h3,
.wrapper.style1 h4 {
  color: var(--bv-teal) !important;
}

.wrapper.style1 p {
  color: var(--bv-black) !important;
}

.wrapper.style1 header.major h2::after {
  background-color: var(--bv-teal) !important;
}

.wrapper.style1 header.major p {
  color: var(--bv-charcoal) !important;
}

.wrapper.style1 .icon.major {
  border-color: var(--bv-teal) !important;
  color: var(--bv-teal) !important;
}

/* ── Section Two — Spotlights (dark, reverted) ─────────────── */
.wrapper.alt.style2 {
  background-color: var(--bv-charcoal) !important;
}

.wrapper.alt.style2 .spotlight .content h2 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700;
  color: var(--bv-white) !important;
  border-left: 3px solid var(--bv-teal);
  padding-left: 0.75rem;
}

.wrapper.alt.style2 .spotlight .content p {
  color: var(--bv-silver) !important;
}

/* Spotlight image filters — lighten highlights toward Pellicle White */
#two .spotlight:nth-child(1) .image img {
  filter: brightness(1.12) saturate(0.82);
}

#two .spotlight:nth-child(2) .image img {
  filter: brightness(1.08) saturate(0.90);
}

#two .spotlight:nth-child(3) .image img {
  filter: brightness(1.10) saturate(0.80);
}

/* ── Section Three — Features (dark, reverted) ─────────────── */
.wrapper.style3 {
  background-color: var(--bv-charcoal) !important;
}

.wrapper.style3 h2,
.wrapper.style3 h3,
.wrapper.style3 p {
  color: #fff !important;
}

.wrapper.style3 header.major h2::after {
  background-color: var(--bv-teal) !important;
}

.wrapper.style3 header.major p {
  color: var(--bv-silver) !important;
}

.wrapper.style3 ul.features li {
  border-top-color: rgba(168, 176, 184, 0.2) !important;
}

.wrapper.style3 ul.features > li > .icon:before,
.wrapper.style3 ul.features > li[class*="icon"]:before {
  color: var(--bv-teal) !important;
}

/* ── Section CTA — Cellulose Teal ──────────────────────────── */
.wrapper.style4 {
  background-color: var(--bv-teal) !important;
}

.wrapper.style4 h2,
.wrapper.style4 p {
  color: #fff !important;
}

.wrapper.style4 .button.primary {
  background-color: var(--bv-white) !important;
  border-color: var(--bv-white) !important;
  color: var(--bv-teal) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700;
}

.wrapper.style4 .button.primary:hover {
  background-color: var(--bv-mist) !important;
  border-color: var(--bv-mist) !important;
}

/* ── Footer ────────────────────────────────────────────────── */
#footer {
  background-color: var(--bv-charcoal) !important;
}

#footer .copyright {
  color: var(--bv-silver) !important;
}

#footer .copyright li::before {
  border-left-color: rgba(168, 176, 184, 0.3) !important;
}

/* ── Nav menu ───────────────────────────────────────────────── */
#page-wrapper #menu {
  background: var(--bv-charcoal) !important;
}

#page-wrapper #menu ul li a {
  color: var(--bv-white) !important;
  font-family: 'DM Sans', sans-serif !important;
}

#page-wrapper #menu ul li a:hover {
  color: var(--bv-teal) !important;
}

/* ── Scroll arrow ───────────────────────────────────────────── */
a.more {
  border-color: rgba(168,176,184,0.4) !important;
  color: var(--bv-silver) !important;
}