/* Bio Genx: rebuilt from the Divi Theme Builder layouts and page settings.
   EB Garamond headings, IBM Plex Sans body, ABeeZee for small labels and buttons, Oswald for the CELL 101 title.
   Pastel tiles: mint #f2f8f5, pink #fce7ec, peach #fff2e2; navy button #001e42; pink rule #f1babf. */

body { color: #3c3a47; line-height: 1.8; }
h1, h2, h3, h4 { color: #0e0c19; }
.wrap { width: min(1080px, 80%); }
@media (max-width: 760px) { .wrap { width: calc(100% - 40px); } }

/* ---------- header: tagline line + black rounded menu bar */
.bg-header { background: #fff; position: relative; z-index: 50; }
.bg-topline { margin: 0; padding: 16px 0 8px; font: 500 13px/1.4 "IBM Plex Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #0e0c19; }
.bg-header .site-header.bg-bar { position: relative; background: #000; border: 0; border-radius: 6px; backdrop-filter: none; }
.bg-bar .header-inner { min-height: 68px; justify-content: flex-start; gap: 18px; }
.bg-bar .brand img { height: 40px; max-width: 190px; }
.bg-bar .site-nav { margin-left: 4px; }
.bg-bar .site-nav > ul { gap: 22px; }
.bg-bar .site-nav a { font: 600 14px/1.4 "IBM Plex Sans", sans-serif; }
.header-dark.bg-bar .site-nav > ul > li > a { color: #fff; border-bottom: 0; }
.header-dark.bg-bar .site-nav > ul > li > a:hover, .header-dark.bg-bar .site-nav a[aria-current="page"] { color: #0c71c3; }
@media (max-width: 900px) {
  .bg-bar .header-inner { justify-content: space-between; }
  .bg-bar .nav-toggle { color: #fff; }
  .bg-bar .site-nav { position: absolute; top: 100%; left: 0; right: 0; inset: 100% 0 auto 0; background: #000; border-radius: 0 0 6px 6px; }
  .bg-bar .site-nav > ul > li > a { border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* ---------- shared type and buttons */
.bg-kicker { font: 600 20px/1.3 "EB Garamond", serif; color: #0e0c19; margin: 0 0 18px; }
.bg-rule { display: block; width: 70%; height: 1px; background: #f1babf; margin: 0 0 34px; }
.bg-rule.is-center { width: 100px; margin-inline: auto; }
.is-center { text-align: center; }
.bg-display { font: 600 clamp(38px, 5vw, 64px)/1.3 "EB Garamond", serif; color: #0e0c19; margin: 0 0 24px; letter-spacing: 0; }
.bg-lead { font: 400 22px/1.5 "EB Garamond", serif; color: #3c3a47; }
.bg-h2 { font: 400 clamp(22px, 3.6vw, 48px)/1.3 "EB Garamond", serif; color: #0e0c19; margin: 0 0 .8em; }
.bg-h2.is-center { text-align: center; }
.bg-oswald { font: 500 clamp(24px, 3.6vw, 48px)/1.6 "Oswald", sans-serif; text-transform: uppercase; text-decoration: underline; text-decoration-color: #e09900;
  text-decoration-thickness: 3px; text-underline-offset: 8px; margin: 0 0 .5em; }
.bg-plex { font: 500 24px/1.4 "IBM Plex Sans", sans-serif; color: #0e0c19; }
.btn.bg-btn { background: #001e42; color: #fff; border: 0; border-radius: 0; padding: 20px 30px; min-height: 0; font: 400 12px/1.2 "ABeeZee", sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.btn.bg-btn:hover { background: #0c71c3; color: #fff; }
.bg-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5.5%; align-items: center; }

/* ---------- home hero */
.bg-hero { position: relative; overflow: hidden; background: #f2f8f5; padding: clamp(50px, 6vw, 80px) 0 0; }
.bg-hero-art { position: absolute; inset: 0 0 0 50%; display: flex; align-items: center; justify-content: flex-end; }
.bg-hero-art img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.bg-hero-copy { position: relative; width: 50%; padding-bottom: 40px; }

/* ---------- DNA band (CELL 101, anti-aging, solutions, products) */
.bg-dna { background: #fff url(/assets/img/dna.png) left top / 851px auto repeat-y; padding: clamp(50px, 6vw, 90px) 0; }
.bg-cell101 { margin-bottom: clamp(50px, 6vw, 90px); }
.bg-cell101-img { background: #000; box-shadow: 0 45px 130px -20px rgba(0, 0, 0, .25); }
.bg-cell101-img img { width: 100%; }
.bg-copy { line-height: 2; }
.bg-aging { margin-bottom: clamp(50px, 6vw, 90px); }
.bg-slider { position: relative; min-height: 400px; overflow: hidden; background: #f4f7fa; }
.bg-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.bg-slide.is-active { opacity: 1; }
.bg-slide img { width: 100%; height: 100%; object-fit: cover; }
.bg-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 34px; text-align: center; color: #fff; font: 500 22px/1.3 "IBM Plex Sans", sans-serif;
  text-transform: uppercase; letter-spacing: .04em; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.bg-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.bg-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .5); cursor: pointer; }
.bg-dots button[aria-current="true"] { background: #fff; }
.bg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bg-tiles > li { padding: 40px; border: 1px solid #fff; }
.is-mint { background: #f2f8f5; } .is-pink { background: #fce7ec; } .is-peach { background: #fff2e2; } .is-blue { background: #f4f7fa; }
.bg-blurb .bg-ico img { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 18px; }
.bg-blurb h3, .bg-blurb h2 { font: 700 20px/1.4 "EB Garamond", serif; color: #0e0c19; margin: 0 0 10px; }
.bg-blurb-body, .bg-blurb-body p { font: 400 12px/1.8 "ABeeZee", sans-serif; color: #6c7087; }
.bg-tiles-prod .bg-blurb-body, .bg-tiles-prod .bg-blurb-body p, .bg-prod-card .bg-blurb-body, .bg-prod-card .bg-blurb-body p { font-size: 15px; }
.bg-blurb-body ul { list-style: disc; padding-left: 1.2em; }
.bg-blurb-body ol { list-style: decimal; padding-left: 1.3em; }
.bg-blurb-body b { color: #3c3a47; }

/* ---------- about */
.bg-about-hero { position: relative; overflow: hidden; }
.bg-cover { position: absolute; inset: 0; }
.bg-cover img { width: 100%; height: 100%; object-fit: cover; }
.bg-card { position: relative; overflow: hidden; background: linear-gradient(#fff, rgba(255, 255, 255, .44)); padding: 10% 60px; }
.bg-card > :not(.bg-card-art) { position: relative; z-index: 1; }
.bg-card .bg-display { max-width: 800px; margin-inline: auto; }
.bg-card .bg-lead { max-width: 600px; margin-inline: auto; }
.bg-card-art { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; opacity: .9; }
.bg-card-art img { max-height: 100%; width: auto; }
.bg-peach { background: #fff2e2; padding: clamp(40px, 5vw, 60px) 0; }
.bg-peach .bg-2 { align-items: start; }
.bg-panel { padding: 30px 20px; margin-bottom: 30px; }
.bg-panel h2 { font: 400 clamp(22px, 3.6vw, 48px)/1.3 "EB Garamond", serif; color: #fff; margin: 0 0 .3em; }
.bg-panel p { margin: 0; color: #3c3a47; }
.is-gold { background: #e0be74; } .bg-panel.is-pink { background: #f1babf; }
.bg-serve { background: #fff; padding: 10px 20px 20px; }
.bg-serve h3 { font: 600 20px/1.8 "EB Garamond", serif; margin: 10px 0 6px; }
.bg-serve ul { list-style: disc; padding-left: 1.2em; font: 400 15px/1.8 "ABeeZee", sans-serif; }

/* ---------- products */
.bg-prod-top { display: grid; grid-template-columns: 2fr 1fr; }
.bg-prod-intro { background: rgba(255, 255, 255, .55); padding: 60px 40px 60px 0; }
.bg-prod-intro .bg-cell101-img { max-width: 300px; margin: 0 auto; }
.bg-prod-card { padding: 40px; }
.bg-faq { background: #fff; margin: 50px 0; }
.bg-faq details { border: 1px solid #d9d9d9; margin-bottom: 30px; background: #fff; }
.bg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px; font: 600 15px/1.5 "IBM Plex Sans", sans-serif; color: #0e0c19; }
.bg-faq summary::-webkit-details-marker { display: none; }
.bg-faq details[open] summary { color: #0c71c3; }
.bg-plus { color: #0c71c3; font-size: 22px; line-height: 1; transition: transform .2s; }
.bg-faq details[open] .bg-plus { transform: rotate(45deg); }
.bg-ans { padding: 0 20px 18px; }
.bg-ans ul { list-style: disc; padding-left: 1.2em; }
.bg-practice { background: rgba(255, 255, 255, .76); padding: 30px 20px; }
.bg-practice > img { width: 146px; margin: 0 auto 10px; }
.bg-practice ul li::before { content: "• "; }

/* ---------- contact */
.bg-contact { background: linear-gradient(90deg, #fff 36%, #f2f8f5 36%); padding: clamp(50px, 6vw, 80px) 0; }
.bg-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5.5%; align-items: center; }
.bg-cinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-top: 30px; }
.bg-cinfo li { display: flex; gap: 16px; align-items: flex-start; }
.bg-cinfo li.is-wide { grid-column: 1 / -1; }
.bg-cico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #001e42; color: #fff; display: grid; place-items: center; }
.bg-cico svg { width: 16px; height: 16px; }
.bg-cinfo h2 { font: 400 14px/1.8 "ABeeZee", sans-serif; text-transform: uppercase; color: #6c7087; margin: 0; }
.bg-cinfo p { font: 600 20px/1.4 "EB Garamond", serif; color: #001e42; margin: 0; }
.bg-cinfo a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.bg-cinfo a:hover { color: #0c71c3; }
.bg-contact-form { background: #fff; padding: 60px 40px; }
.bg-form { background: none; border: 0; padding: 0; color: #6c7087; }
.bg-form .field span { font: 400 13px/1.5 "ABeeZee", sans-serif; color: #6c7087; }
.bg-form .field input, .bg-form .field textarea { background: #f4f7fa; border: 0; border-radius: 0; color: #3c3a47; font-family: "ABeeZee", sans-serif; }
.contact-form.bg-form .btn.bg-submit { width: auto; margin-left: auto; display: flex; background: #001e42; color: #fff; border-radius: 0; font: 400 13px/1.2 "ABeeZee", sans-serif; letter-spacing: 2px; text-transform: uppercase; padding: 16px 30px; min-height: 0; }
.contact-form.bg-form .btn.bg-submit:hover { background: #0c71c3; }
.bg-map { display: block; width: 100%; height: 450px; border: 0; }
.bg-faq-sec { background: #f4f7fa; padding: clamp(50px, 6vw, 90px) 0; }
.bg-faq-sec .bg-kicker { color: #001e42; }
.bg-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5.5%; }
.bg-faq-sec .bg-faq { background: none; margin: 0; }
.bg-faq-sec .bg-faq details { border: 0; border-bottom: 1px solid #dde3ea; background: none; margin: 0; }
.bg-faq-sec .bg-faq summary { padding: 20px 0; font: 600 20px/1.4 "EB Garamond", serif; color: #001e42; }
.bg-faq-sec .bg-ans { padding: 0 0 20px; font: 400 15px/1.8 "ABeeZee", sans-serif; color: #6c7087; }

/* ---------- footer (Divi global footer: logo + address on the left, form on the right) */
.site-footer.bg-footer { position: relative; overflow: hidden; background: #000; color: #fff; padding: 0; }
.bg-foot-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-footer::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(#131736, rgba(19, 23, 54, 0)); }
.bg-foot-grid { position: relative; z-index: 2; padding: clamp(50px, 6vw, 90px) 0; }
.bg-foot-info { text-align: center; }
.bg-foot-info img { max-width: 300px; margin: 0 auto 20px; }
.bg-foot-info p { line-height: 1.8; }
.bg-footer a { display: inline; color: #fff; }
.bg-footer a:hover { color: #9cc9ef; }
.bg-form.is-dark .field span { color: rgba(255, 255, 255, .8); }
.bg-form.is-dark .field input, .bg-form.is-dark .field textarea { background: #fff; }
.bg-form.is-dark .form-status { color: #fff; }
.bg-foot-bar { position: relative; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); font-size: 13px; color: rgba(255, 255, 255, .7); }
.bg-foot-bar .wrap { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- tablet / phone */
@media (max-width: 980px) {
  .bg-2, .bg-contact-grid, .bg-prod-top, .bg-faq-cols { grid-template-columns: 1fr; }
  .bg-2 { gap: 36px; }
  .bg-tiles { grid-template-columns: 1fr 1fr; }
  .bg-hero-copy { width: 100%; }
  .bg-hero-art { position: relative; inset: auto; height: 300px; }
  .bg-contact { background: #f2f8f5; }
  .bg-prod-intro { padding: 40px 0; }
}
@media (max-width: 640px) {
  .bg-tiles { grid-template-columns: 1fr; }
  .bg-tiles > li, .bg-prod-card { padding: 30px 24px; }
  .bg-lead { font-size: 19px; }
  .bg-card { padding: 50px 20px; }
  .bg-cinfo { grid-template-columns: 1fr; }
  .bg-contact-form { padding: 30px 20px; }
  .bg-slider { min-height: 280px; }
  .bg-map { height: 340px; }
  .bg-dna { background-image: none; }
  .contact-form.bg-form .btn.bg-submit { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .bg-slide { transition: none; } }