.uppercase,
.uppercase * {
	text-transform: uppercase;
}

.h3 {	
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 500;
	font-size: 32px;
	line-height: 40px;
	color: #171717;
}

header[data-elementor-type="header"] {
	z-index: 999;
    position: relative;
}

.header-menu .elementor-nav-menu--main > ul > li > a {
    z-index: 9;
    position: relative;
    padding: 12px 24px !important;
    text-transform: uppercase;
}

.header-menu .elementor-nav-menu--main > ul > li {
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
}

.header-menu .elementor-nav-menu--main > ul > li:before {
    top: 0px;
    left: 0px;
    z-index: 8;
    width: 100%;
    content: "";
    height: 100%;
    position: absolute;
    border-radius: 100px;
    opacity: 1 !important;
	transition: all ease 0.3s;
    background: rgba(229, 229, 229, 0.12) !important;
	backdrop-filter: blur(100px);
}

.header-menu .elementor-nav-menu--main > ul > li:hover:before {
    background: #3FBBB8CC !important;
}

a.btn-blue {
	transition: all ease 0.3s;
}

a.btn-blue:hover {
	background: #3FBBB8CC !important;
}

@media screen and (max-width:550px) {
	.menu-btn {
		display: none !important;
	}
}

.header-menu .elementor-nav-menu--dropdown {
    position: absolute;
    width: 200px;
    right: 0px;
    top: 60px;
    z-index: 99;
}

.header-menu .elementor-menu-toggle {
    padding: 0px;
}

.header-menu .elementor-menu-toggle svg {
    display: block;
}

.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor p:first-child:last-child {
	margin-bottom: 0px;
}


.animated-text {
  white-space: normal;
  overflow-wrap: break-word;
}

.animated-text .char {
  color: #A6ABB3;
  transition: color 0.2s linear;

  display: inline;
}

.animated-text .char.active {
  color: #171717;
}

.bioBreadcrumbs .custom-breadcrumbs > a {
    color: #FFFFFF;
    font-size: 14px;
    font-family: "Open Sans";
}

.bioBreadcrumbs .custom-breadcrumbs > .crumb-separator {
    font-size: 14px;
    color: #FFFFFFA3;
    font-family: "Open Sans";
    margin: 0px 4px;
}

.bioBreadcrumbs .custom-breadcrumbs .crumb-current {
    font-size: 14px;
    color: #FFFFFFA3;
    font-family: "Open Sans";
}

.slider-tracks {
	font-family: 'Open Sans';
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
}

.slider-track-time {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.64);
}

.slider-title {
	font-family: 'Geologica';
	font-style: normal;
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	color: #FFFFFF;
}

.slider-text {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #FFFFFF;
}

.btn-no-bg {
	font-family: Open Sans;
    font-weight: 600;
    font-size: 14px;
    color: #3FBBB8;
    line-height: 20px;
    text-transform: uppercase;
    padding-block-start: 0px !important;
    padding-block-end: 6px !important;
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
    border-radius: 0px !important;
    border-block-start-width: 0px !important;
    border-block-end-width: 2px !important;
    border-inline-start-width: 0px !important;
    border-inline-end-width: 0px !important;
    border-color: #3FBBB8 !important;
    border-style: solid !important;
    background-color: #ffffff00 !important;
}

@media screen and (max-width:767px) {
	.sbHeading {
		text-align: center;
	}
}

.animated-text.white {
	color: #FFFFFFA3;
}

.animated-text.left-align {
	text-align: left;
}

.animated-text.small-text {
	font-size: 32px;
	line-height: 40px;
}

@media screen and (max-width:1024px) {
	.animated-text.small-text {
		font-size: 28px;
		line-height: 36px;
	}
	
	.bhRow,
	.bhRowHeader {
		width: fit-content !important;
	}
}

.btn-blue {
	font-family: Geologica;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0.7px;
    line-height: 20px;
    text-transform: uppercase;
    padding-block-start: 18px !important;
    padding-block-end: 18px !important;
    padding-inline-start: 24px !important;
    padding-inline-end: 24px !important;
    border-radius: 100px !important;
    background-color: #3FBBB8 !important;
    box-shadow: 0px 4px 16px 0px rgba(63, 187, 184, 0.35) !important;
}

a.btn-blue:hover {
    color: #ffffff;
    background: #3FBBB8CC !important;
}

@media screen and (max-width:767px) {
	#wpfront-scroll-top-container {
		right: 20px !important;
    	bottom: 20px !important;
	}
}

.btn-no-bg:focus {
	color: inherit !important;
}

.bs_hide {
	display: none !important;
}

.review-image {
	cursor: pointer;
}

@media screen and (max-width: 1024px) {
.science-popup .dialog-close-button svg {
	fill: #1f2124 !important;
}
}

.affwp-form input[type="submit"] {
	background-color: #171717;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    border-style: none;
    border-radius: 5px;
    padding: 20px 50px;
}

.swiper-fade .swiper-slide > .elementor-element > .e-con-inner {
	justify-content: flex-end;
}
/* YouTube one-tap modal (testimonials / community on iOS) */
#biohealing-youtube-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
}
#biohealing-youtube-modal.is-open {
	display: block;
}
#biohealing-youtube-modal .bh-yt-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}
#biohealing-youtube-modal .bh-yt-dialog {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 960px);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}
#biohealing-youtube-modal .bh-yt-frame,
#biohealing-youtube-modal .bh-yt-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
#biohealing-youtube-modal .bh-yt-close {
	position: absolute;
	top: -40px;
	right: 0;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: #111;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
body.bh-yt-modal-open {
	overflow: hidden;
}
.review-image .elementor-custom-embed-image-overlay,
.elementor-widget-video .elementor-custom-embed-image-overlay {
	cursor: pointer;
}

/* Jet slider uses slide (not fade), but widget has swiper-fade class.
   Swiper CSS sets pointer-events:none on all non-active slides — breaks
   the 2nd visible testimonial card (accordion + play button). */
.reviews-slider.swiper-fade .jet-listing-grid__slider .swiper-slide {
	pointer-events: auto !important;
}

.review-image {
	position: relative;
}

/* Accordion: clicks must hit <summary>, not child elements */
.reviews-slider .e-n-accordion-item-title {
	cursor: pointer;
	position: relative;
	z-index: 3;
}
.reviews-slider .e-n-accordion-item-title > * {
	pointer-events: none;
}
.reviews-slider .review-content {
	position: relative;
	z-index: 2;
}

/* Testimonial photo — only the play icon (+ small pad) is tappable.
   Full-image hit target made scrolling past testimonials accidentally
   start the video; keep the overlay stretched for layout/visuals but let
   pointer events fall through except on the play control. */
.review-image > .elementor-widget-image {
	position: relative;
	z-index: 1;
	pointer-events: none;
}
.review-image > .elementor-widget-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 4;
	pointer-events: none !important;
}
.review-image .elementor-wrapper {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
}
.review-image .elementor-custom-embed-image-overlay {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	cursor: default;
	pointer-events: none !important;
}
.review-image .elementor-custom-embed-image-overlay > img {
	opacity: 0;
	width: 100% !important;
	height: 100% !important;
	pointer-events: none !important;
}
.review-image .elementor-custom-embed-play {
	position: absolute;
	bottom: 12px;
	right: 12px;
	width: 88px !important;
	height: 88px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto !important;
	cursor: pointer;
	z-index: 6;
	touch-action: manipulation;
}

/* Science page — reliable LEARN MORE popup clicks */
/*
 * Nested carousel uses effect:fade BUT Swiper still applies translateX(-N*width)
 * on each slide, and .swiper-wrapper steals hit-testing. Stack fades at 0,0 and
 * let only the active slide receive pointer events.
 *
 * === BHS-FIX: facts scrolling unreliably (works sometimes, not others) ===
 * This block used to ALSO set `pointer-events: none !important` on the
 * .swiper-wrapper itself. Swiper's own core CSS for .swiper-fade never does
 * that -- it only ever blocks individual INACTIVE .swiper-slide elements
 * (see swiper.min.css: `.swiper-fade .swiper-slide { pointer-events: none }`),
 * leaving the wrapper/container itself interactive so it can always be a
 * valid touch target for swipe-gesture recognition. Our extra wrapper-level
 * block went further and made the ENTIRE wrapper a hit-testing dead zone;
 * since slides are absolutely stacked to fully cover it (see "steps overlap"
 * fix below) this is usually masked by the covering slide -- but any thin
 * gap where slide height/coverage is momentarily off (mid-resize, before
 * custom-script.js's height mirror re-runs, safe-area insets, etc.) fell
 * straight onto this non-interactive wrapper instead of registering a swipe,
 * which is exactly an intermittent "sometimes it works, sometimes it
 * doesn't" symptom. Removed; the per-slide pointer-events rules below (and
 * Swiper's own defaults) already fully cover click/touch correctness. */
.science-of-biophotons .swiper-fade .swiper-slide,
.science-of-biophotons.swiper-fade .swiper-slide,
.elementor-6145 .swiper-fade .swiper-slide {
	pointer-events: none !important;
	transform: none !important;
	left: 0 !important;
	top: 0 !important;
	width: 100% !important;
	margin: 0 !important;
}
.science-of-biophotons .swiper-fade .swiper-slide-active,
.science-of-biophotons.swiper-fade .swiper-slide-active,
.elementor-6145 .swiper-fade .swiper-slide-active {
	pointer-events: auto !important;
	z-index: 5 !important;
	opacity: 1 !important;
	transform: none !important;
}
.science-of-biophotons .swiper-slide-active {
	pointer-events: auto !important;
	z-index: 5 !important;
}
.science-of-biophotons .swiper-slide:not(.swiper-slide-active) {
	pointer-events: none !important;
	z-index: 1;
}
.science-of-biophotons .btn-no-bg,
.science-of-biophotons .btn-no-bg.e-button-base,
.elementor-6145 .btn-no-bg {
	position: relative;
	z-index: 6;
	min-height: 44px;
	min-width: 120px;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	cursor: pointer;
	pointer-events: auto !important;
	-webkit-tap-highlight-color: transparent;
}
.science-of-biophotons .elementor-swiper-button-prev,
.science-of-biophotons .elementor-swiper-button-next,
.elementor-6145 .elementor-swiper-button-prev,
.elementor-6145 .elementor-swiper-button-next {
	z-index: 7;
	pointer-events: auto !important;
}

/* anxiety-relief hero overlay click fix */
.elementor-element-095619b::before {
  pointer-events: none !important;
}
.elementor-element-095619b > * {
  position: relative;
  z-index: 1;
}

/* free-session CTA tablet vertical padding */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Known green CTA banners + any container wrapping .cta-heading */
  .elementor-element.elementor-element-65ed4cf,
  .elementor-element.elementor-element-22b769f,
  .elementor-element:has(> .elementor-element > .cta-heading),
  .elementor-element:has(> .e-con > .cta-heading),
  .elementor-element:has(.cta-heading.center-tablet) {
    --padding-top: 52px !important;
    --padding-bottom: 52px !important;
    --padding-left: 32px !important;
    --padding-right: 32px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  /* Left cards columns (Elementor tablet sets vertical padding to 0) */
  .elementor-element.elementor-element-82417c5,
  .elementor-element.elementor-element-fb4d10d,
  .elementor-element-65ed4cf > .e-con:first-child,
  .elementor-element-22b769f > .e-con:first-child {
    --padding-top: 28px !important;
    --padding-bottom: 28px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Right column: heading + BEGIN FREE SESSION */
  .elementor-element.elementor-element-f0f820e,
  .elementor-element.elementor-element-0a4f269,
  .elementor-element:has(> .cta-heading) {
    --padding-top: 28px !important;
    --padding-bottom: 28px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}


/* science biophotons — tablet FACT + image alignment */
@media screen and (max-width: 1024px) {
  /* Parent for absolute FACT bar */
  .elementor-6145 .elementor-element-5b8cf87,
  .elementor-element-5b8cf87 {
    position: relative !important;
  }

  /* Keep FACT centered at top; reserve space so titles are not covered */
  .elementor-6145 .elementor-element-4ddaef6,
  .elementor-element-4ddaef6 {
    --position: absolute !important;
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%);
    margin: 0 !important;
    width: 222px;
    z-index: 5;
  }

  .science-of-biophotons .swiper-slide > .elementor-element {
    padding-top: 90px !important;
  }

  /* Text + image rows: consistently TOP align on tablet */
  .elementor-6145 .elementor-element-bd21c8d,
  .elementor-6145 .elementor-element-6975428,
  .elementor-6145 .elementor-element-8817b16,
  .elementor-6145 .elementor-element-40ddd88,
  .elementor-6145 .elementor-element-237a50f {
    --align-items: flex-start !important;
    align-items: flex-start !important;
  }

  /* Text columns: stop bottom-packing (flex-end) so copy starts with image tops */
  .elementor-6145 .elementor-element-ac46ade,
  .elementor-6145 .elementor-element-adb874f,
  .elementor-6145 .elementor-element-e745c96,
  .elementor-6145 .elementor-element-a2b0a3e,
  .elementor-6145 .elementor-element-b4d6c1b {
    --justify-content: flex-start !important;
    justify-content: flex-start !important;
    --align-self: flex-start !important;
    align-self: flex-start !important;
  }

  /* Image columns: pin to the same top edge across all slides */
  .elementor-6145 .elementor-element-8c94a0e,
  .elementor-6145 .elementor-element-096dad3,
  .elementor-6145 .elementor-element-bd97c77,
  .elementor-6145 .elementor-element-a3dc1bd,
  .elementor-6145 .elementor-element-3168b1d {
    --align-self: flex-start !important;
    align-self: flex-start !important;
    --align-items: flex-start !important;
    align-items: flex-start !important;
  }

  .science-of-biophotons .swiper-slide .elementor-widget-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
  }
}

/* tablet scroll: allow vertical page scroll over carousels */
html, body {
  overflow-x: hidden;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  height: auto !important;
  max-height: none !important;
  touch-action: manipulation;
}

@media screen and (max-width: 1024px) {
  /* Horizontal Swipers were capturing touch and blocking page scroll on iPad */
  .swiper,
  .e-n-carousel.swiper,
  .our-protocols .swiper,
  .science-of-biophotons .swiper {
    /* Allow vertical page scroll AND horizontal slide swipes (iOS Safari) */
    touch-action: pan-x pan-y !important;
  }

  /* === BHS-FIX: protocols section scroll-lock on phones (Anxiety Relief) ===
     Root cause: overflow-x:hidden paired with overflow-y:visible on the SAME
     box is an invalid mismatch per the CSS Overflow spec — when one axis is
     "hidden" (or any non-visible value) and the other is "visible", the
     browser silently forces the "visible" axis to compute as "auto" instead.
     "auto" (unlike true "visible") creates a genuinely scrollable box, and
     on a real phone that turned this whole section into a nested scroll
     container that captured/trapped the vertical swipe the instant a touch
     started inside it — reported as the page "locking in" once you reached
     this section. It never showed up on the homepage's copy of this same
     carousel widget because these are page-specific auto-generated element
     IDs (10427b6/fbb4de3 only exist on this Anxiety Relief page); the
     homepage's equivalent wrapper never had this rule applied to it.
     Fix: keep BOTH axes non-visible (uniformly hidden) so there is no
     mismatch and therefore no forced-auto scroll container. The glow-blob
     ::before/::after pseudo-elements below this still need containing so
     they don't bleed into the FAQ section above — clip-path (paint-only,
     never creates a scroll container regardless of axis values) already
     does that job on its own, independent of this overflow rule. */
  .elementor-element-10427b6,
  .elementor-element-fbb4de3 {
    overflow: hidden !important;
    clip-path: inset(0) !important;
  }
  /* === END BHS-FIX: protocols section scroll-lock on phones === */

  /* Hero: use small viewport height so Safari chrome does not clip content */
  .elementor-6184 .elementor-element-2e3d99f,
  .elementor-element-2e3d99f {
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
  .elementor-6184 .elementor-element-095619b,
  .elementor-element-095619b {
    padding-top: max(134px, calc(env(safe-area-inset-top) + 96px)) !important;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px)) !important;
  }
}


/* ==========================================================================
   Price page (post 6203): 2 pricing cards/row on tablet + iPad landscape
   Elementor already sets --width:50% for 768–1024, but iPad landscape often
   reports >1024px (still showing 4 cramped columns / broken price wrapping).
   Theme CSS with explicit width beats Elementor variable-only rules.
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  /* Pricing cards row */
  .elementor-6203 .elementor-element-96fc27d,
  .elementor-element-96fc27d {
    --flex-wrap: wrap;
    flex-wrap: wrap !important;
  }

  /* Four plan cards: exactly 2 per row (gap on parent is 12px) */
/*
  .elementor-6203 .elementor-element-9ef2377,
  .elementor-6203 .elementor-element-efe508f,
  .elementor-6203 .elementor-element-bf84105,
  .elementor-6203 .elementor-element-06e53eb,
  .elementor-element-9ef2377,
  .elementor-element-efe508f,
  .elementor-element-bf84105,
  .elementor-element-06e53eb {
    --width: calc(50% - 6px);
    --flex-grow: 0;
    --flex-shrink: 0;
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    flex: 0 0 calc(50% - 6px) !important;
    --padding-top: 28px;
    --padding-bottom: 28px;
    --padding-left: 24px;
    --padding-right: 24px;
  }
*/

  /* Price headings: keep "$19.99" on one line */
  .elementor-6203 .elementor-element-3077ffc .elementor-heading-title,
  .elementor-6203 .elementor-element-210299c .elementor-heading-title,
  .elementor-6203 .elementor-element-585e4b2 .elementor-heading-title,
  .elementor-6203 .elementor-element-6a2bc07 .elementor-heading-title,
  .elementor-element-3077ffc .elementor-heading-title,
  .elementor-element-210299c .elementor-heading-title,
  .elementor-element-585e4b2 .elementor-heading-title,
  .elementor-element-6a2bc07 .elementor-heading-title {
    white-space: nowrap;
    font-size: 42px !important;
    line-height: 1.1 !important;
  }
}

/* Narrower tablets / portrait-ish: a bit smaller price numeral */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .elementor-6203 .elementor-element-3077ffc .elementor-heading-title,
  .elementor-6203 .elementor-element-210299c .elementor-heading-title,
  .elementor-6203 .elementor-element-585e4b2 .elementor-heading-title,
  .elementor-6203 .elementor-element-6a2bc07 .elementor-heading-title,
  .elementor-element-3077ffc .elementor-heading-title,
  .elementor-element-210299c .elementor-heading-title,
  .elementor-element-585e4b2 .elementor-heading-title,
  .elementor-element-6a2bc07 .elementor-heading-title {
    font-size: 36px !important;
  }
}

/* --- reviews equal-height cards (do not remove; concurrent agents append-only) --- */
/* Jet reviews slider shows 2 slides on desktop; stretch sibling slides to equal height.
   Widget may have swiper-fade class while effect is slide — keep pointer-events fixes intact. */
.reviews-slider .jet-listing-grid__slider > .swiper-wrapper,
.reviews-slider .jet-listing-grid__items.swiper-wrapper {
	align-items: stretch;
}

.reviews-slider .jet-listing-grid__slider .swiper-slide,
.reviews-slider .jet-listing-grid__item {
	height: fit-content !important;
	display: flex;
	align-self: stretch;
}

.reviews-slider .jet-listing-grid__slider .swiper-slide > .elementor,
.reviews-slider .jet-listing-grid__item > .elementor {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Listing template 6240 card root + inner fill the slide */
.reviews-slider .elementor-6240 > .e-con,
.reviews-slider .jet-listing-grid__item .elementor-element-5d4cc315 {
	flex: 1 1 auto;
	height: 100%;
	width: 100%;
}

.reviews-slider .elementor-6240 > .e-con > .e-con-inner,
.reviews-slider .jet-listing-grid__item .elementor-element-5d4cc315 > .e-con-inner {
	height: 100%;
	align-items: stretch;
}

/* Content column fills height; accordion footer sits at bottom */
.reviews-slider .review-content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.reviews-slider .review-content > .elementor-widget-n-accordion,
.reviews-slider .review-content > .elementor-element-acecb07 {
	margin-top: auto;
}

.reviews-slider .review-image {
	height: 100%;
	align-self: stretch;
}
/* --- end reviews equal-height cards --- */

/* Reviews: keep accordion / text taps from starting a horizontal swipe */
.reviews-slider summary,
.reviews-slider .e-n-accordion-item-title,
.reviews-slider .e-n-accordion,
.reviews-slider .review-content {
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
.reviews-slider summary,
.reviews-slider .e-n-accordion-item-title {
	cursor: pointer;
	position: relative;
	z-index: 5;
}


/* === BHS-FIX: our-protocols tablet columns (768–1024) ===
   Nested carousel a53a75b (template 6151 / .our-protocols) on Home + Anxiety Relief.
   Desktop keeps 3; Elementor tablet meta is already 2, but centeredSlides peeks
   + fixed height:270px hex images made cards look skinny/distorted (~4+ visible).
*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .elementor-6151 .elementor-element-a53a75b.our-protocols,
  .our-protocols.elementor-element-a53a75b,
  .our-protocols {
    --e-n-carousel-swiper-slides-to-display: 2 !important;
  }

  .our-protocols .e-n-carousel.swiper,
  .our-protocols .swiper {
     overflow: visible !important;
  }

  /* Hex illustrations: keep natural aspect — no forced 270px stretch */
  .our-protocols .protocol-image img,
  .elementor-6151 .our-protocols .protocol-image img,
  .elementor-6151 .elementor-element-a53a75b .protocol-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .our-protocols .swiper-slide {
    box-sizing: border-box;
  }
}
/* === END BHS-FIX: our-protocols tablet columns === */


/* Community carousel: play control taps must not start a swipe */
.elementor-element-abe4235 .elementor-custom-embed-image-overlay,
.elementor-element-abe4235 .elementor-custom-embed-play,
.elementor-element-abe4235 .elementor-widget-video,
.elementor-element-abe4235 .elementor-wrapper {
	touch-action: manipulation;
}
.elementor-element-abe4235 .elementor-custom-embed-play {
	pointer-events: auto !important;
	cursor: pointer;
	z-index: 6;
}

/* === BHS-FIX: community video play aspect ratio ===
   Root cause: custom-script.js playInline() injects the YouTube <iframe>
   into .elementor-video, an intermediate div Elementor gives no explicit
   height. Elementor's own CSS only sets height:100% on the iframe itself
   (widget-video.min.css: ".elementor-wrapper iframe{height:100%}"), which
   can't resolve because its direct parent (.elementor-video) has an auto
   height with no positioning context. On Android that percentage collapse
   fails silently and the iframe falls back to the UA default 150px height
   while width stays 100%, i.e. the "cut in half" bar. Fix: take
   .elementor-video + the iframe out of flow and pin them to the wrapper's
   box (which already has the correct 16:9 aspect-ratio from Elementor),
   so sizing no longer depends on an ambiguous percentage chain. */
.elementor-element-abe4235 .elementor-widget-video .elementor-wrapper {
	position: relative;
}
.elementor-element-abe4235 .elementor-widget-video .elementor-wrapper .elementor-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.elementor-element-abe4235 .elementor-widget-video .elementor-wrapper .elementor-video iframe,
.elementor-element-abe4235 .elementor-widget-video .elementor-wrapper .elementor-video video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}
/* === END BHS-FIX: community video play aspect ratio === */

/* === BHS-FIX: footer why-section ambient glow ===
   Same treatment as Science "Why are we different?" custom CSS
   (#245D7A / #1B6A59 blooms on primary base), positions tuned for footer height.
*/
.elementor-location-footer .elementor-element.elementor-element-2bbb535,
.elementor-6175 .elementor-element.elementor-element-2bbb535 {
  position: relative !important;
  overflow: hidden !important;
}
.elementor-location-footer .elementor-element.elementor-element-2bbb535::before,
.elementor-6175 .elementor-element.elementor-element-2bbb535::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 120vw !important;
  height: 70vh !important;
  left: calc(50% - 120vw / 2) !important;
  top: 20% !important;
  background: #245D7A !important;
  background-color: #245D7A !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: blur(250px) !important;
  transform: rotate(-31.04deg) !important;
}
.elementor-location-footer .elementor-element.elementor-element-2bbb535::after,
.elementor-6175 .elementor-element.elementor-element-2bbb535::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
  width: 120vw !important;
  height: 40vh !important;
  left: calc(50% - 120vw / 2 - 40vh) !important;
  top: 55% !important;
  background: #1B6A59 !important;
  background-color: #1B6A59 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: blur(200px) !important;
  transform: rotate(-31.04deg) !important;
}
.elementor-location-footer .elementor-element.elementor-element-2bbb535 > .e-con-inner,
.elementor-6175 .elementor-element.elementor-element-2bbb535 > .e-con-inner {
  position: relative !important;
  z-index: 2 !important;
}
.elementor-location-footer .elementor-element.elementor-element-2bbb535 > .elementor-background-overlay,
.elementor-6175 .elementor-element.elementor-element-2bbb535 > .elementor-background-overlay {
  opacity: 0 !important;
  background: transparent !important;
}
/* === END BHS-FIX: footer why-section ambient glow === */


/* === BHS-FIX: how-it-works mobile bottom alignment (STEP 1-4) ===
   nested-carousel .elementor-element-9c3adac (template 6149, class
   "how-it-works swiper-fade") on the homepage. Bottom-packing of each
   slide's image/card currently rides on the generic shared rule
   `.swiper-fade .swiper-slide > .elementor-element > .e-con-inner`
   (used by reviews/science too) -- fragile, since edits to that rule for
   other sliders can silently break alignment here. Pin it explicitly and
   guarantee breathing room above the STEP pill nav so the 4 device /
   protocol images stay bottom-aligned at the same spot on every step,
   independent of per-slide text length differences. */
@media screen and (max-width: 1024px) {
  .how-it-works.swiper-fade .swiper-slide > .elementor-element > .e-con-inner,
  .how-it-works .swiper-slide > .elementor-element > .e-con-inner {
    justify-content: flex-end !important;
  }

  /* STEP pill nav: explicit breathing room above it so the image/card
     above never nearly overlaps it, regardless of slide content height. */
  .how-it-works ~ .elementor-element-bf82088,
  .elementor-element-bf82088 {
    margin-top: 24px !important;
  }
}
/* === END BHS-FIX: how-it-works mobile bottom alignment === */

/* === BHS-FIX: science facts steps overlap === */
/* Root cause: .swiper-wrapper is display:flex (Swiper base CSS), so slides
   stay position:relative in normal flex flow, each at its own flex offset
   (index * slideWidth). The "reliable LEARN MORE popup clicks" fix above
   forces transform:none on every fade slide (needed so touch/click
   hit-testing lines up with what's visible), but Swiper's real fade effect
   relies on that very transform to cancel each slide's flex offset and
   visually stack it back to 0,0. With transform:none, only FACT 1 (flex
   index 0, offset 0) happens to look right; every other FACT/step renders
   its heading + image shifted off-screen to the right, leaving a blank gap
   where the content should be (reported as "steps overlapping" / broken
   spacing on mobile). Fix: absolutely position the slides so they truly
   stack at 0,0 regardless of flex index or transform; custom-script.js
   mirrors the active slide's real height onto the wrapper/swiper since
   slides no longer contribute to the flex auto-height once taken out of
   flow. */
.science-of-biophotons .swiper-fade .swiper-slide,
.science-of-biophotons.swiper-fade .swiper-slide,
.elementor-6145 .swiper-fade .swiper-slide {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: 100% !important;
}
.science-of-biophotons .swiper-fade .swiper-wrapper,
.elementor-6145 .swiper-fade .swiper-wrapper {
	position: relative !important;
	min-height: 480px; /* fallback before JS sets the exact active-slide height */
}
.science-of-biophotons .swiper-fade,
.elementor-6145 .swiper-fade {
	min-height: 480px; /* fallback before JS sets the exact active-slide height */
}
/* Verified-live regression (mobile, 393px): the FACT nav pill still overlapped
   the heading/paragraph on every FACT, because the slide's own content wrapper
   (.swiper-slide > .elementor-element, Elementor "e-con" container) has its
   own min-height:100%/height:100% from Elementor's per-page CSS -- on desktop
   that's harmless (100% of a naturally tall slide), but it self-references the
   very 480px fallback above once slides are absolutely positioned, so the
   wrapper can never grow past 480px and custom-script.js's
   `active.scrollHeight` mirror reads back that same clamped 480px forever
   (never the ~650-700px FACT 1/2 actually need). The shared
   `.swiper-fade .swiper-slide > .elementor-element > .e-con-inner
   { justify-content: flex-end }` rule then bottom-packs the too-tall text
   column inside that too-short box, pushing its heading upward off the top
   edge and under the pill. Free the wrapper to size to its real content. */
.science-of-biophotons .swiper-fade .swiper-slide > .elementor-element,
.elementor-6145 .swiper-fade .swiper-slide > .elementor-element {
	height: auto !important;
	min-height: 0 !important;
}
/* === END BHS-FIX: science facts steps overlap === */

/* === BHS-FIX: science facts slide visibility (root cause of intermittent
   blank-screen / overlapping-steps flashes) ===
   The "steps overlap" fix above makes every FACT slide position:absolute
   at top:0/left:0/right:0/bottom:0 so all slides stack directly on top of
   each other instead of Swiper's normal per-index flex offset. That only
   works if (a) the wrapper itself never moves and (b) only the active
   slide is actually visible. Neither was guaranteed: this nested-carousel
   widget uses a CSS-driven fade (Elementor's "swiper-fade" class), not
   Swiper's JS fade module with virtualTranslate, so under the hood Swiper
   core still drives the wrapper's inline transform as if it were a normal
   sliding carousel — `transform: translate3d(-N * slideWidth, 0, 0)`.
   Because every slide sits at the exact same local 0,0 spot, that
   translate shifts the ENTIRE stack off-screen together the instant N
   isn't 0 (loop mode keeps N bouncing between values, not always 0) —
   that is the "content goes blank" bug. And since nothing ever set
   inactive slides to opacity:0, on the rare tick the wrapper *is*
   untranslated every FACT's heading/text/button paints superimposed at
   once — that is the "steps overlapping" bug. Fix both causes together:
   freeze the wrapper's transform so slides never get carried off-screen,
   and hide every slide except the active one via opacity so only one
   FACT ever renders. */
.science-of-biophotons .swiper-fade .swiper-wrapper,
.elementor-6145 .swiper-fade .swiper-wrapper {
	transform: none !important;
}
.science-of-biophotons .swiper-fade .swiper-slide,
.elementor-6145 .swiper-fade .swiper-slide {
	opacity: 0 !important;
	visibility: hidden !important;
}
.science-of-biophotons .swiper-fade .swiper-slide-active,
.science-of-biophotons .swiper-fade .swiper-slide-duplicate-active,
.elementor-6145 .swiper-fade .swiper-slide-active,
.elementor-6145 .swiper-fade .swiper-slide-duplicate-active {
	opacity: 1 !important;
	visibility: visible !important;
}
/* === END BHS-FIX: science facts slide visibility === */

/* === BHS-FIX: reviews media android visibility === */
/* Root cause: the review card's row (.elementor-element-5d4cc315 — photo
   column + text column side by side) is flex-direction:row, and only wraps
   to a stacked layout on phones via Elementor's --flex-wrap-mobile CSS
   variable. That variable chain was not resolving to "wrap" at phone widths,
   so on Android/mobile the photo/video column (.review-image) got pushed
   outside the single-column card width and clipped by the row's
   overflow:hidden — leaving the whole media area blank white space.
   The equal-height rules a few blocks up (height:100% on .review-image /
   .review-content, meant only for the desktop side-by-side cards) were also
   still applying on mobile, stretching the text column and pushing
   "Results noticed" down behind a big empty gap.
   Fix: below the phone breakpoint, force the row to stack as a column and
   let both the photo and text columns size to their natural content height
   again, instead of the desktop equal-height stretch. Accordion swipe-guard
   CSS/JS above is untouched. */
@media screen and (max-width: 767px) {
  .reviews-slider .elementor-6240 > .e-con,
  .reviews-slider .jet-listing-grid__item .elementor-element-5d4cc315 {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .reviews-slider .review-image,
  .reviews-slider .review-content {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .reviews-slider .review-image {
    height: auto !important;
    align-self: auto !important;
  }
  .reviews-slider .review-content {
    height: auto !important;
  }
  .reviews-slider .review-content > .elementor-widget-n-accordion,
  .reviews-slider .review-content > .elementor-element-acecb07 {
    margin-top: 20px !important;
  }
  /* Keep the video/play overlay matched to the photo's own (now natural,
     un-stretched) box instead of a tall stretched parent. */
  .reviews-slider .review-image > .elementor-widget-video {
    position: absolute !important;
    inset: 0 !important;
  }
}
/* === END BHS-FIX: reviews media android visibility === */

/* === BHS-FIX: center slide paragraph text on mobile (how-it-works + science facts + about slider) ===
   Headings already center via .sbHeading (max-width:767px). Paragraph text
   (span.p1.e-paragraph-base) had no matching rule and stayed left-aligned,
   inconsistent with the centered heading above it. Center all three sliders'
   paragraph copy on mobile to match. */
@media screen and (max-width: 767px) {
  .how-it-works .p1.e-paragraph-base,
  .science-of-biophotons .p1.e-paragraph-base,
  .wmu-slider .p1.e-paragraph-base {
    text-align: center !important;
  }
}
/* === END BHS-FIX: center slide paragraph text on mobile === */

/* === BHS-FIX: About page "what makes us unique" slider subtitle centering ===
   `.sbHeading { text-align: center }` above only centers text INSIDE the
   heading's own box -- it does nothing when that box shrink-wraps to the
   width of its text (the common case for a short one-line heading/subtitle
   in a flex column) and stays pinned to the flex-start (left) edge of its
   parent. Force the box itself to span the full slide width on mobile so
   the shrink-wrapped heading/subtitle is actually centered, not just its
   (already full-width) text. */
@media screen and (max-width: 767px) {
  .wmu-slider .sbHeading {
    width: 100% !important;
  }
}
/* === END BHS-FIX: About page slider subtitle centering === */

/* === BHS-FIX: science facts mobile polish (button center, FACT gap, image bottom-align) === */
@media screen and (max-width: 767px) {
	/* Center the LEARN MORE button under the now-centered heading/paragraph */
	.science-of-biophotons .btn-no-bg,
	.elementor-6145 .btn-no-bg {
		align-self: center !important;
	}
	/* === BHS-FIX: FACT pill/arrows sitting directly on the heading (no gap) ===
	   Root cause: .elementor-element-4ddaef6 (the FACT pill) is
	   position:absolute (see "tablet FACT + image alignment" rule above), so
	   margin-bottom on it is a no-op -- an absolutely positioned box never
	   pushes any other element via its own margin, so the previous
	   `margin-bottom: 36px` fix here had ZERO visible effect (verified live:
	   gap stayed at -3.5px, i.e. still overlapping, identical to before that
	   edit). The real spacing lever is the padding-top reserved on the
	   slide's own content wrapper below (`padding-top: 76px` in the same
	   tablet/mobile rule), since the heading is normal-flow content that
	   starts exactly `padding-top` below the wrapper's top edge, while the
	   pill sits fixed at `top: 8px` regardless of that padding. Raise it
	   enough to clear the ~72px-tall pill with real breathing room. Image
	   position is untouched -- it is pinned by the separate margin-top:auto
	   rule on the image column, not by this padding. */
	.elementor-6145 .elementor-element-4ddaef6 {
		margin-bottom: 0 !important;
	}
	.science-of-biophotons .swiper-slide > .elementor-element,
	.elementor-6145 .swiper-slide > .elementor-element {
		padding-top: 104px !important;
	}
	/* === END BHS-FIX: FACT pill/arrows sitting directly on the heading === */
}
/* Card box (heading+text+button | image column) — force it into a column so
   the image column (matched structurally, not by per-slide id, so this
   applies to every FACT) can be pinned to the bottom via margin-top:auto.
   custom-script.js fixes this box's height to the tallest FACT across the
   whole carousel, so the image lands at the exact same y on every FACT
   instead of jumping, while the heading/text above stays flex-start (a
   fixed distance under the FACT pill). */
.science-of-biophotons .swiper-slide .e-con-full.e-flex:has(> .e-con-full.e-flex:has(> .elementor-widget-image)),
.elementor-6145 .swiper-slide .e-con-full.e-flex:has(> .e-con-full.e-flex:has(> .elementor-widget-image)) {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}
.science-of-biophotons .swiper-slide .e-con-full.e-flex:has(> .elementor-widget-image),
.elementor-6145 .swiper-slide .e-con-full.e-flex:has(> .elementor-widget-image) {
	/* Bottom-align via flex; custom-script also writes an explicit pixel
	   margin-top so FACT 1 cannot settle a few px higher than FACT 2-5 on iOS. */
	margin-top: auto !important;
	flex-shrink: 1;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
}
/* === END BHS-FIX: science facts mobile polish === */

/* === BHS-FIX: "What makes us unique" slider (wmu-slider) — fade effect ===
   Elementor's Nested Carousel widget (used here) has NO native fade
   transition option at all (confirmed against elementor-pro's own widget
   source — it always constructs Swiper with the default 'slide' effect).
   The widget already carries a manually-added "swiper-fade" class (via
   its _css_classes setting) as a pure CSS hook with no matching rules
   until now — same convention already used for the Science facts / how-
   it-works carousels.
   Stacks every INACTIVE slide absolutely on top of the ACTIVE one (which
   stays in normal flow) and crossfades opacity between them.
   Two other approaches were tried and rejected first:
   1) Making EVERY slide position:absolute (mirroring the Science facts
      fix exactly) removed all slides from flow. This widget's specific
      ancestor Elementor flex containers size themselves from their
      in-flow content, so with nothing left to measure, the whole
      carousel — and every ancestor up to the page template — collapsed
      to 0 width and the slide content disappeared entirely.
   2) Also forcing the wrapper's own `transform` to stay `none` (to fully
      stop Swiper's normal horizontal translate) fixed that collapse, but
      broke navigation instead: Swiper's default 'slide' effect marks a
      transition finished by listening for a genuine `transitionend` on
      the wrapper's `transform`. Pinning the computed value to `none` the
      whole time means it never actually "changes", so that event never
      fires, and `swiper.animating` gets stuck `true` forever — silently
      breaking all further arrow/drag/autoplay navigation after the very
      first transition. Reinitializing the widget with Swiper's real
      Fade module was also tried, but that broke Elementor Pro's OWN
      internal nested-carousel handler (`NestedCarousel.
      handleElementHandlers` throws on every slideChange post-reinit).
   This version deliberately does NOT touch the wrapper's transform at
   all — verified live (incl. rapid repeated clicks and back-and-forth
   navigation through a full loop) that Swiper still resolves
   `animating`/`transitionend` correctly on its own, and the crossfading
   active slide renders at the correct on-screen position throughout. */
.wmu-slider .swiper-fade .swiper-slide {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transition: opacity 0.5s ease !important;
}
.wmu-slider .swiper-fade .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}
.wmu-slider .swiper-fade .swiper-slide-active,
.wmu-slider .swiper-fade .swiper-slide-duplicate-active {
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 2 !important;
}
/* === END BHS-FIX: wmu-slider fade effect === */


/* BHS-FIX: Science FACT 1 mobile image extension.
 * In loop mode Swiper marks a nearby clone as `swiper-slide-duplicate-active`
 * while the real active FACT is also present. Our stacked fade rules had made
 * both visible, so duplicate FACT 1's image sat 24px above the real image and
 * looked vertically stretched/jumpy. Only an actually active slide may paint. */
.science-of-biophotons .swiper-fade .swiper-slide-duplicate-active:not(.swiper-slide-active),
.elementor-6145 .swiper-fade .swiper-slide-duplicate-active:not(.swiper-slide-active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* BHS-FIX: readable footer links on dark navy / green background */
.elementor-location-footer .elementor-element.elementor-element-2bbb535 a,
.elementor-6175 .elementor-element.elementor-element-2bbb535 a {
  color: #EAF8F4 !important;
}
.elementor-location-footer .elementor-element.elementor-element-2bbb535 a:hover,
.elementor-6175 .elementor-element.elementor-element-2bbb535 a:hover {
  color: #9EE5D5 !important;
}


/* BHS-FIX: readable footer disclaimer and copyright on dark gradient */
.elementor-location-footer .elementor-element-51e3ea0 .elementor-heading-title,
.elementor-location-footer .elementor-element-25d8412 .elementor-heading-title,
.elementor-6175 .elementor-element-51e3ea0 .elementor-heading-title,
.elementor-6175 .elementor-element-25d8412 .elementor-heading-title {
  color: #D9EEE9 !important;
}


/* BHS-FIX: annual plan top prepay tab — dark translucent counterpart to 6-month tab */
.elementor-6203 .elementor-element.elementor-element-8459a71 {
  background-color: transparent !important;
}
.elementor-6203 .elementor-element.elementor-element-8459a71 .elementor-heading-title {
  color: #F3F5F8 !important;
}


/* BHS-FIX: annual prepay tab uses the same extended background layer as 6 months */
.elementor-6203 .elementor-element.elementor-element-06e53eb::before {
  content: "" !important;
  position: absolute !important;
  top: -42px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  background-color: rgba(33, 33, 33, 0.64) !important;
  border-radius: 16px 16px 16px 16px !important;
}


/* BHS-FIX: Pricing plan spacing — prepay tabs sit 70px above their card item. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .elementor-6203 .elementor-element.elementor-element-96fc27d {
    row-gap: 96px !important;
    column-gap: 32px !important;
  }
}
@media screen and (max-width: 767px) {
  .elementor-6203 .elementor-element.elementor-element-96fc27d {
    row-gap: 32px !important;
  }
  /* BHS-FIX: measured precisely — the floating prepay tab (00f6ead /
   * 8459a71) only pokes 38px above its own card's top edge, not the full
   * 70px we originally reserved. That left 32px of extra, unaccounted-for
   * dead space above every tabbed card (64px visible clearance vs 32px
   * for the plain "Month to Month" card). 38px reserves exactly enough
   * room for the tab and no more, so every card-to-card gap is a uniform
   * 32px. */
  .elementor-6203 .elementor-element.elementor-element-efe508f,
  .elementor-6203 .elementor-element.elementor-element-06e53eb {
    margin-top: 38px !important;
  }
  /* BHS-FIX: the "1 Session" card (9ef2377) carries a leftover mobile
   * margin-bottom: 42px from Elementor's own responsive settings. Stacked
   * on top of the 32px row-gap and the next card's reserved tab space,
   * this doubled the visible gap after card 1 vs every other gap on the
   * page. Zero it out so all card-to-card gaps read as equal. */
  .elementor-6203 .elementor-element.elementor-element-9ef2377 {
    margin-bottom: 0 !important;
  }
}