/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body { margin: 0; overflow-x: clip; max-width: 100%; font-family: var(--wv-font-body); font-size: var(--wv-text-body); line-height: 1.6; color: var(--wv-color-dark); background: var(--wv-color-white); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--wv-font-heading); margin: 0; line-height: 1.15; }
/* Scroll-triggered fade-in-up for section headings (For Life page). */
.wv-fade-heading {
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-fade-heading.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .wv-fade-heading { opacity: 1; transform: none; transition: none; } }
/* Hardcoded <br> tags inside headings (banner or section) or body paragraphs
   are tuned for desktop line-breaks -- on mobile AND tablet, drop them and
   let the text wrap naturally to the available width instead of forcing
   the same break. Covers every <p> sitewide, not just heading-styled ones. */
@media (max-width: 1279.98px) {
	h1 br, h2 br, h3 br, h4 br, h5 br, h6 br, p br { display: none; }
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* Skip link */
.wv-skip-link { position: absolute; left: -9999px; top: 0; background: var(--wv-color-blue); color: #fff; padding: 12px 20px; z-index: 10000; border-radius: 0 0 8px 0; }
.wv-skip-link:focus { left: 0; }

/* Preloader -- minimalist audio-frequency bars, on-brand for a sound/frequency
   wellness co. without leaning on any raster logo asset. */
.wv-loader {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
	background: var(--wv-color-cream);
	opacity: 1; visibility: visible;
	transition: opacity 0.6s ease, visibility 0s linear 0s;
}
.wv-loader.is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; pointer-events: none; }
.wv-loader-bars {
	display: flex; align-items: center; justify-content: center; gap: 7px; height: 48px;
	animation: wv-loader-intro 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.wv-loader-bars span {
	display: block; width: 4px; height: 100%; border-radius: 3px;
	background: linear-gradient(180deg, var(--wv-color-blue-tint) 0%, var(--wv-color-blue-dark) 100%);
	transform: scaleY(0.22); animation: wv-loader-bar 1.1s ease-in-out infinite;
}
.wv-loader-bars span:nth-child(1) { animation-delay: 0s; }
.wv-loader-bars span:nth-child(2) { animation-delay: 0.11s; }
.wv-loader-bars span:nth-child(3) { animation-delay: 0.22s; }
.wv-loader-bars span:nth-child(4) { animation-delay: 0.33s; }
.wv-loader-bars span:nth-child(5) { animation-delay: 0.44s; }
.wv-loader-text {
	margin: 0; font-family: var(--wv-font-body); font-weight: 600; font-size: 12px;
	letter-spacing: 4px; text-transform: uppercase; color: var(--wv-color-dark); opacity: 0.62;
}
.wv-loader-track {
	position: relative; width: 148px; height: 2px; border-radius: 2px; overflow: hidden;
	background: rgba(43,42,41,0.1);
}
.wv-loader-fill {
	position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 2px;
	background: var(--wv-gradient-cta);
	animation: wv-loader-scan 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes wv-loader-bar {
	0%, 100% { transform: scaleY(0.22); }
	50% { transform: scaleY(1); }
}
@keyframes wv-loader-scan {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(350%); }
}
@keyframes wv-loader-intro {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.wv-loader-bars span, .wv-loader-fill { animation: none; }
	.wv-loader-bars span { transform: scaleY(0.6); }
}
@media (max-width: 767.98px) {
	.wv-loader-bars { height: 36px; gap: 6px; }
	.wv-loader-bars span { width: 3px; }
	.wv-loader-track { width: 112px; }
	.wv-loader-text { font-size: 11px; letter-spacing: 3px; }
}

:focus-visible { outline: 3px solid var(--wv-color-blue-dark); outline-offset: 2px; }

.wv-container { max-width: var(--wv-container); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 767.98px) { .wv-container { padding-inline: 16px; } }
/* Keep the 40px padding all the way through 1279.98 -- once the 1180px cap
   also starts adding its own auto-margin gutter (past 1180px) the two stack,
   so total inset only ever grows, instead of the padding dropping to 0 right
   at the cap and pinching the gap down to near-nothing until the margin
   catches back up. */
@media (min-width: 1024px) and (max-width: 1279.98px) { .wv-container { padding-inline: 40px; } }
@media (min-width: 1280px) { .wv-container { padding-inline: 0; } }

.wv-section { padding-block: var(--wv-space-section); }

.wv-label {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: var(--wv-color-blue-tint-bg);
	backdrop-filter: blur(5px);
	border-radius: var(--wv-radius);
	font-family: var(--wv-font-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
	text-transform: uppercase;
	color: var(--wv-color-blue);
	margin-bottom: 16px;
}
@media (max-width: 767.98px) {
	.wv-label { margin-bottom: 0; }
	.wv-label + h1, .wv-label + h2, .wv-label + h3, .wv-label + h4 { margin-top: 0; }
}
.wv-label--sm-radius {
	border-radius: var(--wv-radius-sm);
}
.wv-label--solid {
	background: var(--wv-color-blue);
	color: var(--wv-color-cream);
	backdrop-filter: blur(5px);
}
.wv-text-accent { color: var(--wv-color-blue); white-space: normal; }
@media (min-width: 480px) { .wv-text-accent { white-space: nowrap; } }

.wv-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: var(--wv-radius-sm);
	font-size: 1rem;
	font-weight: normal;
	text-decoration: none;
	border: none;
	line-height: 1.25;
	transition: filter 0.25s ease, background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.wv-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,0.3); }
.wv-btn-group { display: inline-flex; gap: 4px; align-items: stretch; }
.wv-btn-primary { background: var(--wv-color-cream); color: var(--wv-color-dark); }
.wv-btn-primary:hover { background: var(--wv-color-white); }
.wv-btn-gradient { background: var(--wv-gradient-cta); color: var(--wv-color-cream); }
.wv-btn-gradient:hover { filter: brightness(1.08); }
.wv-btn-white { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-btn-white:hover { background: var(--wv-color-cream); }
.wv-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; background: var(--wv-gradient-cta); border-radius: var(--wv-radius-sm); color: var(--wv-color-cream); transition: filter 0.25s ease, background-color 0.25s ease, transform 0.2s ease; }
.wv-btn-icon svg { width: 16px; height: 16px; }
.wv-btn-icon:hover { filter: brightness(1.12); transform: translateX(3px); }
.wv-btn-icon.is-light { background: var(--wv-color-cream); color: var(--wv-color-dark); }
.wv-btn-icon.is-light:hover { background: var(--wv-color-white); filter: none; }

/* Announcement bar */
.wv-announce { background: var(--wv-color-dark); color: var(--wv-color-cream); text-align: center; font-size: 14px; padding: 8px clamp(24px, 9vw, 130px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wv-announce a { text-decoration: none; }
.wv-announce a:hover, .wv-announce a:focus-visible { text-decoration: underline; }
.wv-announce-highlight { color: var(--wv-color-white); }

/* Header */
.wv-header { position: relative; z-index: 100; }
.wv-header-inner {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
	background: rgba(255,255,255,0.75);
	border-radius: var(--wv-radius);
	padding: 12px 24px;
	margin: 16px auto 0;
	max-width: var(--wv-container);
	position: relative;
}
/* backdrop-filter creates a new containing block for position:fixed descendants,
   which would trap the full-screen mobile nav inside the pill's own bounds --
   only enable the blur once the nav is back to being a normal inline row (1280px+). */
@media (max-width: 1279.98px) { .wv-header-inner { background: var(--wv-color-white); } }
@media (min-width: 1280px) { .wv-header-inner { backdrop-filter: blur(2.5px); } }
/* Below 1280px the pill becomes a full-width bar flush against the very top
   of the page (no side gap, no floating margin, no rounded corners) --
   it only turns into the inset floating pill once there's a real desktop nav. */
@media (max-width: 1279.98px) { .wv-header--overlay .wv-header-inner { position: static; margin: 0; border-radius: 0; max-width: none; } }
@media (min-width: 1280px) { .wv-header--overlay .wv-header-inner { position: absolute; left: 0; right: 0; top: 40px; margin-inline: auto; border-radius: var(--wv-radius); max-width: var(--wv-container); } }
/* Below 1280px the toggle and CTA columns are unequal widths (44px hamburger
   vs. a wider text+icon button), so centering the logo inside the grid's
   middle track pulls it visibly off the header's true center. Pull it out of
   the grid flow and center it against the whole header instead. */
.wv-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.wv-logo img { height: 59px; width: auto; max-width: 180px; object-fit: contain; transition: opacity 0.2s ease; }
.wv-logo:hover img { opacity: 0.8; }
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-logo img { height: 76px; }
	.wv-header-inner { padding: 18px 24px; }
}
.wv-nav-toggle { grid-column: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; padding: 0; border-radius: var(--wv-radius-sm); transition: background-color 0.2s ease; }
@media (max-width: 1279.98px) { .wv-nav-toggle { justify-content: start; } }
/* Only apply the hover background on devices that truly support hover --
   otherwise a tap on touch/mobile leaves the gray box stuck "on" afterwards. */
@media (hover: hover) { .wv-nav-toggle:hover { background: rgba(43,42,41,0.08); } }
@media (max-width: 767.98px) {
	.wv-header-inner { padding: 12px 20px; }
	.wv-logo img { height: 60px; }
}
/* Animated hamburger -> X, three bars morphing on .is-open */
.wv-nav-toggle-bars { position: relative; width: 24px; height: 18px; display: block; }
.wv-nav-toggle-bars span {
	position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--wv-color-dark);
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.wv-nav-toggle-bars span:nth-child(1) { top: 0; }
.wv-nav-toggle-bars span:nth-child(2) { top: 8px; }
.wv-nav-toggle-bars span:nth-child(3) { top: 16px; }
.wv-nav-toggle[aria-expanded="true"] .wv-nav-toggle-bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.wv-nav-toggle[aria-expanded="true"] .wv-nav-toggle-bars span:nth-child(2) { opacity: 0; }
.wv-nav-toggle[aria-expanded="true"] .wv-nav-toggle-bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
/* Below 1280px the nav is a full-screen takeover anchored right under the
   header pill -- full width/height, no side gaps, no floating card. */
.wv-header-nav-group {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
	visibility: hidden; opacity: 0;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.wv-header-nav-group.is-open { visibility: visible; opacity: 1; transition: opacity 0.25s ease; }
.wv-primary-nav {
	display: block; width: 100%; height: 100%; background: var(--wv-color-white);
	padding: 24px 24px 24px; overflow-y: auto;
	display: flex; flex-direction: column;
}
@media (max-width: 767.98px) { .wv-primary-nav { padding-left: 14px; padding-right: 14px; } }
.wv-primary-nav ul { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.wv-primary-nav a { position: relative; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-dark); transition: color 0.2s ease; }
.wv-primary-nav a svg { transition: transform 0.2s ease; }
.wv-primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--wv-color-blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.wv-primary-nav a:hover { color: var(--wv-color-blue); }
.wv-primary-nav a:hover::after { transform: scaleX(1); }
.wv-primary-nav a:hover svg { transform: translateY(2px); }
.wv-primary-nav a[aria-current="page"] { color: var(--wv-color-blue); text-decoration: underline; }
.wv-primary-nav a[aria-current="page"]::after { display: none; }
/* Dropdown-having nav items (About, Resources, Store, ...) */
.wv-nav-item--has-dropdown { position: relative; }
.wv-nav-dropdown-toggle {
	display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer;
	font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-dark);
}
.wv-nav-dropdown-toggle svg { transition: transform 0.2s ease; }
.wv-nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wv-nav-item--has-dropdown .wv-nav-dropdown {
	display: none; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 18px 18px; list-style: none;
	background: var(--wv-color-white); border-radius: var(--wv-radius); box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.wv-nav-item--has-dropdown .wv-nav-dropdown li { width: 100%; }
.wv-nav-item--has-dropdown.is-open .wv-nav-dropdown { display: flex; }
.wv-nav-dropdown a {
	position: relative; display: inline-block; width: fit-content; max-width: 100%; text-align: left;
	padding: 8px 2px; font-size: 16px; color: var(--wv-color-dark); text-decoration: none; white-space: nowrap;
	transition: color 0.15s ease;
}
.wv-nav-dropdown a::after {
	content: ""; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 2px;
	background: var(--wv-color-blue); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.wv-nav-item--has-dropdown .wv-nav-dropdown a:hover,
.wv-nav-item--has-dropdown .wv-nav-dropdown a:focus-visible { color: var(--wv-color-blue); }
.wv-nav-item--has-dropdown .wv-nav-dropdown a:hover::after,
.wv-nav-item--has-dropdown .wv-nav-dropdown a:focus-visible::after { transform: scaleX(1); }
@media (min-width: 1280px) {
	.wv-nav-dropdown { position: absolute; left: 0; top: 100%; margin-top: 10px; z-index: 30; min-width: 220px; }
	/* Invisible bridge over the visual gap above -- without it, the mouse
	   crosses "nothing" on the way down to the panel and :hover drops,
	   flicker-closing the dropdown before the cursor arrives. */
	.wv-nav-item--has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
	/* Desktop: hover the trigger (or the panel itself) to open, click still works too. */
	.wv-nav-item--has-dropdown:hover .wv-nav-dropdown { display: flex; }
}
.wv-header-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
.wv-header-cta .wv-btn { padding: 8px 16px; font-size: 16px; line-height: 20px; white-space: nowrap; }
.wv-header-cta .wv-btn-icon { width: 32px; height: 32px; padding: 8px; flex: 0 0 auto; }
.wv-header-cta-short { display: none; }
/* Below ~640px there's no room for the full label next to a centered logo --
   show the short "Contact" text button instead and drop the separate arrow
   icon button entirely (matches the desktop text button's own look, just
   shorter, instead of collapsing to an icon-only square). */
@media (max-width: 639.98px) {
	.wv-header-cta .wv-btn-icon { display: none; }
	.wv-header-cta-full { display: none; }
	.wv-header-cta-short { display: inline; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-header-cta .wv-btn { font-size: 14px; padding: 8px 14px; }
}
@media (max-width: 767.98px) {
	.wv-header-cta .wv-btn { font-size: 14px; }
}
/* Mobile/tablet full-screen contents: nav links stacked, compact rows, divider. */
.wv-primary-nav ul {
	flex-direction: column; align-items: stretch; gap: 0;
	padding-bottom: 12px; border-bottom: 1px solid rgba(43,42,41,0.12); margin-bottom: 16px;
}
.wv-primary-nav ul li { width: 100%; }
.wv-primary-nav ul a { width: 100%; padding: 9px 8px; font-size: 16px; border-radius: var(--wv-radius-sm); }
.wv-primary-nav ul a:hover { background: rgba(43,42,41,0.06); }
.wv-primary-nav ul a::after { display: none; }
/* The dropdown trigger is a <button>, not an <a> -- give it the exact same
   row padding/width/font as its sibling links, or it sits cramped with no
   separation while the plain links around it have proper spacing. */
.wv-primary-nav ul .wv-nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 9px 8px; font-size: 16px; border-radius: var(--wv-radius-sm); }
html.wv-nav-open, body.wv-nav-open { overflow: hidden; height: 100%; }
/* Tablet's full-screen menu has the whole viewport to work with -- the same
   narrow mobile stack (edge-to-edge, 16px links) reads as empty/unfinished
   at this width, so give it a wider, centered, bigger-type column instead. */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-primary-nav { padding: 56px 40px; align-items: center; }
	.wv-primary-nav ul { width: 100%; max-width: 560px; margin-inline: auto; }
	/* .wv-primary-nav ul .wv-nav-dropdown-toggle (not bare .wv-nav-dropdown-toggle)
	   -- needs to match the base rule's specificity (.wv-primary-nav ul .wv-nav-dropdown-toggle,
	   2 classes + ul) or it loses despite being later in the file, leaving
	   Store/Resources/About stuck at 16px while the plain links became 20px. */
	.wv-primary-nav ul a, .wv-primary-nav ul .wv-nav-dropdown-toggle { font-size: 20px; line-height: 28px; }
	.wv-primary-nav ul a { padding: 16px 12px; }
	.wv-nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 16px 12px; border-radius: var(--wv-radius-sm); }
	.wv-nav-item--has-dropdown .wv-nav-dropdown { padding: 8px 12px 20px; }
	.wv-nav-dropdown a { font-size: 17px; padding: 10px 8px; }
}
@media (min-width: 1280px) {
	.wv-nav-toggle { display: none; }
	.wv-header-inner { display: flex; justify-content: flex-start; }
	.wv-logo { position: static; transform: none; }
	.wv-header-nav-group {
		position: static; visibility: visible; opacity: 1; transition: none;
		display: flex; align-items: center; gap: 24px; margin-left: auto;
	}
	.wv-primary-nav { display: flex; flex-direction: row; align-items: center; width: auto; height: auto; background: none; padding: 0; overflow: visible; }
	.wv-primary-nav ul { flex-direction: row; align-items: center; gap: 24px; padding: 0; border: none; margin: 0; }
	.wv-primary-nav ul li { width: auto; }
	.wv-primary-nav ul a { width: auto; padding: 0; font-size: 16px; border-radius: 0; }
	.wv-primary-nav ul a:hover { background: none; }
	.wv-primary-nav ul a::after { display: block; }
	.wv-header-cta { grid-column: auto; justify-self: auto; order: 3; }
}

/* Hero */
.wv-hero { position: relative; color: var(--wv-color-cream); min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; }
/* As a flex child, .wv-container would otherwise shrink to its content's width
   instead of filling the row (flex-basis:auto), which breaks its own
   max-width+margin:auto centering. Force it to span the row first. */
.wv-hero > .wv-container { width: 100%; }
@media (min-width: 1024px) { .wv-hero { min-height: 848px; } }
.wv-hero--fl { align-items: center; }
.wv-hero--about { align-items: flex-start; }
.wv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.wv-hero-bg::after { content: ""; }
.wv-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 60%); z-index: 0; }
.wv-hero--fl .wv-hero-scrim { background: linear-gradient(240deg, rgba(0,0,0,0.25) 46.552%, rgb(32,30,30) 97.423%); }
/* For Life banner -- own height/font rule (same fluid-clamp technique as
   Contact/Store/Programs), scoped to this page only via .wv-hero--forlife. */
.wv-hero--forlife { min-height: 848px; }
@media (max-width: 767.98px) { .wv-hero--forlife { min-height: 440px; } }
.wv-hero--forlife .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-hero--forlife .wv-hero-subtext { font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-hero--forlife .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--forlife .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--forlife .wv-hero-subtext { margin-top: 8px; } }
.wv-hero--forlife .wv-btn.wv-btn-primary { font-size: 16px; line-height: 24px; }
@media (max-width: 767.98px) { .wv-hero--forlife .wv-hero-content { padding: 0; } }
/* For Business banner -- same fluid-clamp pattern as For Life (Figma frame
   height also 848px), scoped via .wv-hero--forbusiness. */
.wv-hero--forbusiness { min-height: 848px; }
@media (max-width: 767.98px) { .wv-hero--forbusiness { min-height: 440px; } .wv-hero--forbusiness .wv-hero-content { padding: 0; } }
.wv-hero--forbusiness .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-hero--forbusiness .wv-hero-subtext { font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-hero--forbusiness .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--forbusiness .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--forbusiness .wv-hero-subtext { margin-top: 8px; } }
.wv-hero--forbusiness .wv-btn.wv-btn-primary { font-size: 16px; line-height: 24px; }
.wv-hero--about .wv-hero-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, #292828 90%); }
/* About banner -- same fluid-clamp pattern as For Life/For Business/Home (Figma
   desktop heading also 64px/68px), scoped via .wv-hero--about. */
.wv-hero--about .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-hero--about .wv-hero-subtext { font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-hero--about .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--about .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--about .wv-hero-subtext { margin-top: 8px; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-hero--about .wv-hero-subtext { margin-top: 16px; } }
/* Horizontal position/inset comes entirely from the wrapping .wv-container
   (same as every other section on the site) -- no manual margin-left/padding-
   inline hack here, so it's automatically correct at every viewport width,
   including wide desktop screens where a fixed px offset used to drift. */
.wv-hero-content { position: relative; z-index: 1; max-width: 760px; padding-block: 120px 64px; display: flex; flex-direction: column; }
.wv-hero-heading { white-space: normal; }
@media (min-width: 1024px) { .wv-hero-content { padding-block: 282px 64px; } }
@media (min-width: 1024px) { .wv-hero--fl .wv-hero-content { padding-top: 0; padding-bottom: 0; } }
@media (min-width: 1024px) { .wv-hero--about .wv-hero-content { padding-top: 296px; padding-bottom: 0; } }
.wv-hero--about .wv-hero-content { max-width: 800px; }
@media (max-width: 767.98px) { .wv-hero--about .wv-hero-content { padding: 0; } .wv-hero--about { min-height: 440px; align-items: center; } }
.wv-hero--about .wv-hero-heading { font-weight: 400; }
.wv-hero--about .wv-hero-subtext { font-weight: 400; }
.wv-hero--about .wv-btn-icon.is-light { background: var(--wv-color-cream); }
.wv-hero--about .wv-btn-icon.is-light:hover { background: var(--wv-color-white); }

/* About Wellness Vibe -- same shape/rules as .wv-hero--about (SBT tablet
   tier, fluid-clamp desktop 64px/68px, mobile 440px/centered), only the
   scrim gradient differs (Figma node 3640:3536 vs About Us's 3331:5670). */
/* Same iPad-1024 landmine as .wv-hero--navel: the 296px desktop offset was
   firing from min-width:1024px with no counterbalancing centering. Default
   to align-items:center (tab/mobile), only true desktop (>=1280) goes
   flex-start + padding-top:296px. See [[wellness-vibe-navel-activation-page-build]]. */
.wv-hero--aboutwv { align-items: center; }
.wv-hero--aboutwv .wv-hero-scrim { background: linear-gradient(171.16deg, rgba(0,0,0,0.25) 26.926%, #383535 89.55%); }
.wv-hero--aboutwv .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
/* Figma specifies Lora Regular (400) for this exact heading (same node as
   About Us Vibhushri's hero) -- the 600 weight below 1280px is deliberate,
   matching For Life/For Business's mobile convention per explicit request,
   but at desktop it must go back to 400 or the bold glyphs render wide
   enough to overflow the 800px content box and wrap onto a 3rd line. */
@media (min-width: 1280px) { .wv-hero--aboutwv .wv-hero-heading { font-weight: 400; } }
.wv-hero--aboutwv .wv-hero-subtext { font-size: 16px; line-height: 1.5; font-weight: 400; }
@media (min-width: 768px) { .wv-hero--aboutwv .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--aboutwv .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--aboutwv .wv-hero-subtext { margin-top: 8px; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-hero--aboutwv .wv-hero-subtext { margin-top: 16px; } }
@media (min-width: 1280px) { .wv-hero--aboutwv { align-items: flex-start; } .wv-hero--aboutwv .wv-hero-content { padding-top: 296px; padding-bottom: 0; } }
.wv-hero--aboutwv .wv-hero-content { max-width: 800px; }
@media (max-width: 1279.98px) { .wv-hero--aboutwv .wv-hero-content { padding: 0; } }
@media (max-width: 767.98px) { .wv-hero--aboutwv { min-height: 440px; } }
.wv-hero--aboutwv .wv-btn-icon.is-light { background: var(--wv-color-cream); }
.wv-hero--aboutwv .wv-btn-icon.is-light:hover { background: var(--wv-color-white); }
.wv-hero-heading { font-size: var(--wv-text-hero); font-weight: 600; text-transform: capitalize; letter-spacing: -0.8px; line-height: 1.0625; }
.wv-hero-subtext { font-family: var(--wv-font-body); font-size: 1.25rem; line-height: 1.4; margin-top: 24px; }
.wv-hero-content .wv-btn-group { margin-top: 48px; }
/* Fade-in-up entrance on every page banner, synced to the preloader hiding via
   JS (.wv-hero-in class) so it isn't wasted playing out behind the opaque
   loader overlay. */
.wv-hero-heading, .wv-hero-subtext, .wv-hero-content .wv-btn-group {
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-hero.wv-hero-in .wv-hero-heading,
.wv-hero.wv-hero-in .wv-hero-subtext,
.wv-hero.wv-hero-in .wv-hero-content .wv-btn-group { opacity: 1; transform: translateY(0); }
.wv-hero-heading { transition-delay: 0.1s; }
.wv-hero-subtext { transition-delay: 0.3s; }
.wv-hero-content .wv-btn-group { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
	.wv-hero-heading, .wv-hero-subtext, .wv-hero-content .wv-btn-group { opacity: 1; transform: none; transition: none; }
}
/* rule: "same banner top" (SBT) -- every page banner uses this exact tablet tier,
   held through 1279px so typography stays in sync with the hamburger-nav layout
   (nav/container only go full desktop-width at 1280px). */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-hero-heading { font-size: 44px; line-height: 52px; }
	.wv-hero-subtext { font-size: 18px; line-height: 1.4; }
}

/* Homepage hero -- heading uses fluid clamp() (same formula as For Life/For
   Business hero); other properties (scrim, padding) stay tiered per viewport.
   Content is vertically centered at every tier -- consistent, not bottom-anchored. */
.wv-hero--home { align-items: center; }
@media (max-width: 767.98px) { .wv-hero--home { min-height: 440px; } }
/* Mobile (<768px): matches Figma's compact layout exactly, incl. its own scrim. */
.wv-hero--home .wv-hero-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.25) 25%, #292626 92%); }
.wv-hero--home .wv-hero-content { max-width: none; padding-block: 40px; }
.wv-hero--home .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.3125vw, 4.25rem); }
.wv-hero--home .wv-hero-subtext { font-size: 16px; line-height: 24px; margin-top: 16px; }
.wv-hero--home .wv-btn-group { margin-top: 24px; }
.wv-hero--home .wv-btn { padding: 8px 16px; }
/* Tablet (768-1023px): intermediate step, back to the base (subtler) scrim. */
@media (min-width: 768px) {
	.wv-hero--home .wv-hero-scrim { background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 60%); }
	.wv-hero--home .wv-hero-content { max-width: 600px; padding-block: 40px; }
	.wv-hero--home .wv-hero-subtext { font-size: 18px; line-height: 1.4; margin-top: 16px; }
	.wv-hero--home .wv-btn-group { margin-top: 32px; }
	.wv-hero--home .wv-btn { padding: 12px 16px; }
}
/* Desktop (>=1024px): exact Figma spec sizes, fixed 64px heading, no scrim
   (the source photo is already dark enough, matching the Figma reference). */
@media (min-width: 1024px) {
	.wv-hero--home .wv-hero-scrim { background: none; }
	.wv-hero--home .wv-hero-content { max-width: 680px; padding: 0; }
	.wv-hero--home .wv-btn-group { margin-top: 48px; }
}
/* Desktop typography only flips once the nav itself goes full-width (1280px) --
   keeps banner text in sync with the tablet-style hamburger layout through 1279px. */
@media (min-width: 1280px) {
	.wv-hero--home .wv-hero-subtext { font-size: 20px; line-height: 28px; margin-top: 24px; }
}
.wv-hero .wv-btn { font-size: 1.25rem; line-height: normal; }

/* About */
.wv-about { text-align: center; display: flex; flex-direction: column; align-items: center; }
.wv-about-heading { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.214; font-weight: 500; text-transform: capitalize; max-width: 920px; margin-inline: auto; }
.wv-fl-about .wv-about-heading { max-width: none; }
.wv-fb-blueprint .wv-about-heading { max-width: none; font-size: clamp(1.5rem, 4.375vw, 3.5rem); line-height: clamp(2rem, 5.3125vw, 4.25rem); }
.wv-about--home { gap: 24px; }
@media (max-width: 767.98px) { .wv-about--home { gap: 0; } }
.wv-about--home .wv-label { margin-bottom: 0; }
.wv-about--home .wv-about-heading { max-width: none; font-size: clamp(1.5rem, 4.375vw, 3.5rem); line-height: clamp(2rem, 5.3125vw, 4.25rem); }

/* Trust marquee */
.wv-trust { background: var(--wv-color-blue); overflow: hidden; padding-block: 24px; }
@media (max-width: 767.98px) { .wv-trust { padding: 16px; } }
.wv-trust-track { display: flex; align-items: center; width: max-content; animation: wv-marquee 26s linear infinite; }
.wv-trust-track:hover { animation-play-state: paused; }
.wv-trust-group { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; width: 100vw; padding-inline: 40px; }
.wv-trust-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.wv-trust-logo img { height: 48px; width: auto; max-width: 130px; object-fit: contain; flex: 0 0 auto; margin: 0; }
/* Below desktop, "spread every logo across exactly one screen width" just
   crams them all into a narrower box instead of showing a sensible number
   at a time -- switch to a fixed per-logo slot so the viewport naturally
   shows ~5 on tablet / ~2-3 on mobile as the strip scrolls past. */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-trust-group { width: auto; justify-content: flex-start; gap: 56px; padding-inline: 20px; }
	.wv-trust-logo img { height: 44px; max-width: 120px; }
}
@media (max-width: 767.98px) {
	.wv-trust-group { width: auto; justify-content: flex-start; gap: 48px; padding-inline: 16px; }
	.wv-trust-logo img { height: 36px; max-width: 96px; }
}
@keyframes wv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wv-trust-track { animation: none; overflow-x: auto; } }

/* About — Gallery marquee */
.wv-ab-gallery { overflow: hidden; }
.wv-ab-gallery-slick { opacity: 0; transition: opacity 0.4s ease; }
.wv-ab-gallery-slick.slick-initialized { opacity: 1; }
.wv-ab-gallery-slick .wv-ab-gallery-item { position: relative; width: 650px; aspect-ratio: 650 / 407; margin-right: 19px; border-radius: 8px; overflow: hidden; }
.wv-ab-gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-ab-gallery-item:hover img { transform: scale(1.08); }
/* Mobile: ~1.4 slides visible at a time (partial peek hints more to scroll). */
@media (max-width: 767.98px) {
	.wv-ab-gallery-slick .wv-ab-gallery-item { width: 71.4vw; }
}
/* Tablet: exactly 2 slides visible. */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-ab-gallery-slick .wv-ab-gallery-item { width: calc((100vw - 19px) / 2); }
}

/* About — Timeline (horizontal scroll-jacked) */
.wv-ab-timeline { background: #f8f8f8; }
.wv-ab-timeline-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 24px; }
.wv-ab-timeline-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 3.25rem); line-height: calc(1em + 8px); letter-spacing: 0; text-transform: capitalize; color: var(--wv-color-dark); margin: 0; }
.wv-ab-timeline-subtext { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: #555250; max-width: 720px; margin: 0; }
.wv-ab-timeline-scroller { position: relative; }
.wv-ab-timeline-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.wv-ab-timeline-track { position: relative; display: flex; flex: 0 0 auto; width: max-content; align-items: stretch; height: 100%; will-change: transform; padding-inline: 130px; }
.wv-ab-timeline-wave { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wv-ab-timeline-item { position: relative; flex: 0 0 407px; }
.wv-ab-timeline-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--wv-color-blue); border: 2px solid rgba(28,141,205,0.2); box-shadow: 0 0 0 6px rgba(55,96,84,0.1), 0 0 22px rgba(55,96,84,0.3); transform: translate(-50%, -50%); z-index: 2; }
.wv-ab-timeline-item.is-top .wv-ab-timeline-dot { top: calc(50% - 42px); }
.wv-ab-timeline-item.is-bottom .wv-ab-timeline-dot { top: calc(50% + 42px); }
.wv-ab-timeline-item-inner { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 16px; opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.wv-ab-timeline-item.is-top .wv-ab-timeline-item-inner { bottom: calc(50% + 70px); transform: translateY(24px); }
.wv-ab-timeline-item.is-bottom .wv-ab-timeline-item-inner { top: calc(50% + 70px); transform: translateY(-24px); flex-direction: row-reverse; }
.wv-ab-timeline-item-inner.is-visible { opacity: 1; transform: translateY(0); }
.wv-ab-timeline-photo { flex: 0 0 auto; width: 187px; height: 207px; background: var(--wv-color-white); padding: 6px; box-shadow: 0 9px 17px -9px rgba(55,96,84,0.4), 0 1px 3px rgba(55,96,84,0.14); transform: rotate(-2.2deg); }
.wv-ab-timeline-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-ab-timeline-text { flex: 0 0 196px; width: 196px; min-width: 0; }
.wv-ab-timeline-label { display: block; font-family: var(--wv-font-body); font-size: 12px; line-height: 22px; text-transform: uppercase; color: var(--wv-color-blue); opacity: 0.7; margin-bottom: 8px; }
.wv-ab-timeline-year { font-family: var(--wv-font-heading); font-weight: 400; font-size: 28px; line-height: 36px; letter-spacing: -0.336px; color: var(--wv-color-dark); margin: 0 0 8px; }
.wv-ab-timeline-desc { font-family: var(--wv-font-body); font-size: 14px; line-height: 22px; color: rgba(43,42,41,0.88); margin: 0; }
/* Below desktop: drop the scroll-jacked wave entirely -- entries stack top
   to bottom in normal flow instead, same idiom as the Transformation Ladder
   on For Life (.wv-ladder-step/.wv-ladder-line), which itself splits at
   900px: a centered line with photo/text alternating sides from 900-1024,
   and a single left-aligned column only below 900. */
@media (max-width: 1024px) {
	.wv-ab-timeline-scroller { height: auto !important; }
	.wv-ab-timeline-sticky { position: static; height: auto; overflow: visible; }
	.wv-ab-timeline-track {
		position: relative; transform: none !important; flex-direction: column; width: 100%; height: auto;
		gap: 40px;
	}
	.wv-ab-timeline-track::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(28,141,205,0.25); }
	.wv-ab-timeline-wave { display: none; }
	.wv-ab-timeline-item { flex: none; width: 100%; }
	/* Same scroll-reveal fade the desktop curve view uses (about.js already
	   toggles .is-visible via IntersectionObserver at every breakpoint) --
	   !important sidesteps the .is-top/.is-bottom transform fight below. */
	.wv-ab-timeline-item-inner { position: static; opacity: 0; transform: translateY(24px) !important; transition: opacity 0.6s ease, transform 0.6s ease; }
	.wv-ab-timeline-item-inner.is-visible { opacity: 1; transform: translateY(0) !important; }
}
/* Tablet (900-1024): same shape as .wv-ladder-step's own ≥900px tier --
   centered line, photo/text side-by-side close against it, alternating
   which side per item (not spread to the item's outer edges). */
@media (min-width: 900px) and (max-width: 1024px) {
	.wv-ab-timeline-track { padding-inline: 40px; }
	.wv-ab-timeline-track::before { left: 50%; transform: translateX(-50%); }
	.wv-ab-timeline-item { margin-top: 32px; }
	.wv-ab-timeline-dot { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
	.wv-ab-timeline-item-inner { display: flex; align-items: center; justify-content: center; gap: 96px; }
	/* Scaled up to match the Transformation Ladder's own bold ≥900px
	   presentation (big photo, big type) instead of staying at the small
	   desktop-curve polaroid size. */
	.wv-ab-timeline-photo { width: 320px; height: auto; aspect-ratio: 187 / 207; padding: 10px; }
	.wv-ab-timeline-text { flex: 0 1 380px; width: auto; }
	.wv-ab-timeline-label { font-size: 14px; }
	.wv-ab-timeline-year { font-size: 32px; line-height: 40px; }
	.wv-ab-timeline-desc { font-size: 16px; line-height: 26px; }
}
/* Mobile (<900): single column, line+dot pinned to the left, same as
   .wv-ladder-line's own <900px position (left:24px). */
@media (max-width: 899.98px) {
	.wv-ab-timeline-track { padding-left: 56px; padding-right: 24px; gap: 24px; }
	.wv-ab-timeline-track::before { left: 24px; }
	/* !important needed: desktop's .is-top/.is-bottom rules are higher
	   specificity (3 classes) than a plain .wv-ab-timeline-dot/-item-inner
	   override and would otherwise keep winning inside this media query. */
	.wv-ab-timeline-dot { left: -32px !important; top: 50% !important; transform: translateY(-50%) !important; }
	.wv-ab-timeline-item-inner { flex-direction: column !important; align-items: flex-start; gap: 20px; }
	.wv-ab-timeline-text { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; gap: 8px; }
	.wv-ab-timeline-label { margin-bottom: 0; }
	.wv-ab-timeline-year { font-size: 20px; line-height: 28px; margin: 0; }
	.wv-ab-timeline-desc { font-size: 16px; line-height: 24px; }
	.wv-ab-timeline-photo { width: 270px; height: 270px; }
}

/* About — Four Disciplines (dark panel) */
.wv-ab-disciplines { background: linear-gradient(180deg, rgba(28,141,205,0.65) 17.119%, #0e4767 111.94%); }
.wv-ab-disciplines .wv-container { max-width: 1068px; }
.wv-ab-disciplines-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 720px; margin-inline: auto; }
.wv-ab-disciplines-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: calc(1em + 8px); letter-spacing: 0; text-transform: capitalize; color: #fbfaf6; margin: 0; }
.wv-ab-disciplines-subtext { font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: var(--wv-color-white); margin: 0; }
@media (max-width: 767.98px) { .wv-ab-disciplines-subtext { font-size: 16px; line-height: 24px; } }
.wv-ab-disciplines-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.wv-ab-disciplines-card { background: var(--wv-color-white); border-radius: var(--wv-radius-sm); padding: 24px; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.wv-ab-disciplines-card:hover { transform: translateY(-8px); box-shadow: 0 24px 40px -16px rgba(6,33,48,0.45); }
.wv-ab-disciplines-num { font-family: var(--wv-font-heading); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wv-color-blue); margin: 0 0 8px; transition: color 0.35s ease; }
.wv-ab-disciplines-card:hover .wv-ab-disciplines-num { color: var(--wv-color-blue-dark); }
.wv-ab-disciplines-title { font-family: var(--wv-font-heading); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wv-color-dark); margin: 0 0 8px; }
.wv-ab-disciplines-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: rgba(43,42,41,0.88); margin: 0; }
/* Tablet: 2 columns get too cramped (~294px each with the section's own side
   padding) -- collapse to 1 col a tier earlier, same idiom as this page's
   other multi-col grids (e.g. recognition steps down at 1023px too). */
@media (max-width: 1023.98px) {
	.wv-ab-disciplines-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
	.wv-ab-disciplines-title { font-size: 20px; line-height: 28px; }
	.wv-ab-disciplines-card { padding: 20px; }
	.wv-ab-disciplines-grid { gap: 16px; margin-top: 28px; }
}

/* About — Founder Story */
.wv-ab-story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.wv-ab-story-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: calc(1em + 8px); letter-spacing: 0; text-transform: capitalize; color: var(--wv-color-dark); margin: 16px 0 0; }
.wv-ab-story-body { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: #555250; }
.wv-ab-story-body p { margin: 0; }
.wv-ab-story-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wv-ab-story-badge { display: inline-flex; align-items: center; padding: 9px 17px; background: var(--wv-color-blue-tint-bg); border: 1px solid #4099cc; border-radius: var(--wv-radius); font-family: var(--wv-font-body); font-size: 12.5px; letter-spacing: 0.5px; color: var(--wv-color-blue); }
.wv-ab-story-cta { margin-top: 24px; }
@media (max-width: 767.98px) {
	.wv-ab-story-cta { display: flex; width: 100%; }
	.wv-ab-story-cta .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}
.wv-ab-story-media { display: flex; flex-direction: column; gap: 22px; }
.wv-ab-story-photo { border-radius: var(--wv-radius); overflow: hidden; aspect-ratio: 572 / 525; }
.wv-ab-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.wv-ab-story-photo:hover img { transform: scale(1.08); }
.wv-ab-story-quote { background: var(--wv-color-white); border: 1px solid var(--wv-color-blue); border-left-width: 4px; border-radius: var(--wv-radius); padding: 25px 25px 25px 28px; margin: 0; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.wv-ab-story-quote:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(28,141,205,0.35); }
.wv-ab-story-quote blockquote { margin: 0 0 14px; font-family: var(--wv-font-heading); font-style: italic; font-weight: 400; font-size: 18px; line-height: 26px; color: #3c3a38; }
.wv-ab-story-quote figcaption { font-family: var(--wv-font-body); font-size: 12px; line-height: 20px; text-transform: uppercase; color: var(--wv-color-blue); }
@media (max-width: 900px) {
	.wv-ab-story-grid { grid-template-columns: 1fr; gap: 32px; }
	.wv-ab-story-media { order: 1; }
	.wv-ab-story-text { order: 2; }
}
@media (max-width: 767.98px) {
	.wv-ab-story-grid { gap: 28px; }
	.wv-ab-story-media { gap: 16px; }
	/* !important needed: .wv-label + h2 { margin-top: 0 } (generic sitewide
	   rule) is higher specificity (class + element) than a plain class
	   selector and would otherwise keep winning here. */
	.wv-ab-story-heading { margin-top: 16px !important; }
}

/* About — Recognition */
.wv-ab-recognition-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
.wv-ab-recognition-head .wv-label { margin-bottom: 0; }
.wv-ab-recognition-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: calc(1em + 8px); letter-spacing: 0; text-transform: capitalize; color: var(--wv-color-dark); margin: 0; }
.wv-ab-recognition-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.wv-ab-recognition-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 250px;
	padding: 24px 16px;
	border: 1px solid #379cd6;
	border-radius: var(--wv-radius);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Once revealed, hand transform/hover off to a snappier transition -- keeps
   the slow entrance slide from also dragging out every later hover response. */
.wv-ab-recognition-card.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease, transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.wv-ab-recognition-card:hover { box-shadow: 0 20px 36px -18px rgba(28,141,205,0.35); border-color: var(--wv-color-blue); transform: translateY(-6px); }
.wv-ab-recognition-logo { display: flex; align-items: center; width: 100px; height: 46px; }
.wv-ab-recognition-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.wv-ab-recognition-title { font-family: var(--wv-font-heading); font-weight: 400; font-size: 18px; line-height: 26px; color: var(--wv-color-dark); margin: 0; }
.wv-ab-recognition-desc { font-family: var(--wv-font-body); font-size: 15px; line-height: 23px; color: #555; margin: 0; }
@media (max-width: 1023px) {
	.wv-ab-recognition-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.wv-ab-recognition-grid { grid-template-columns: 1fr; }
	.wv-ab-recognition-card { height: auto; }
}
@media (max-width: 767.98px) {
	.wv-ab-recognition-head { gap: 16px; margin-bottom: 24px; }
}

/* About — Quote Band (parallax) */
.wv-ab-quoteband { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: clamp(48px, 10vw, 96px) clamp(24px, 17.1875vw, 220px); color: var(--wv-color-white); text-align: center; }
.wv-ab-quoteband-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: 0; }
.wv-ab-quoteband-content { position: relative; z-index: 1; padding-inline: 0; }
.wv-ab-quoteband-text { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.3; margin: 0; }
.wv-ab-quoteband-mark { display: inline-block; font-size: 2.5em; line-height: 0; vertical-align: -0.28em; margin-right: 4px; }
.wv-ab-quoteband-author { font-family: var(--wv-font-body); font-size: 24px; line-height: 32px; margin: 16px 0 0; }
@media (max-width: 640px) {
	.wv-ab-quoteband-author { font-size: 18px; line-height: 26px; }
}

/* About — Testimonials (reuses generic .wv-testimonial-* slider from other pages,
   same responsive tiering as homepage's .wv-testimonials) */
.wv-ab-testimonials { background: var(--wv-color-off-white); }
.wv-ab-testimonials .wv-section-heading { font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: calc(1em + 8px); letter-spacing: 0; font-weight: 400; text-transform: capitalize; }
.wv-ab-testimonials .wv-testimonial-card { flex-basis: 280px; }
.wv-ab-testimonials .wv-testimonial-media { height: 220px; }
.wv-ab-testimonials .wv-testimonial-quote { font-size: 1rem; }
@media (min-width: 768px) {
	.wv-ab-testimonials .wv-testimonial-card { flex-basis: 340px; }
	.wv-ab-testimonials .wv-testimonial-media { height: 260px; }
	.wv-ab-testimonials .wv-testimonial-quote { font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
	.wv-ab-testimonials .wv-container[data-wv-slider] { overflow: visible; }
	.wv-ab-testimonials .wv-testimonial-track { margin-right: calc(50% - 50vw); }
	.wv-ab-testimonials .wv-testimonial-card { flex-basis: 383px; }
	.wv-ab-testimonials .wv-testimonial-media { height: 300px; }
	.wv-ab-testimonials .wv-testimonial-quote { font-size: 1.125rem; }
}
@media (max-width: 767.98px) {
	/* Same arrows-below-track reorder used on homepage/For Life's testimonials. */
	.wv-ab-testimonials .wv-container[data-wv-slider] { display: flex; flex-direction: column; }
	.wv-ab-testimonials .wv-section-head { display: contents; }
	.wv-ab-testimonials .wv-section-head > div:first-child { order: 1; }
	.wv-ab-testimonials .wv-testimonial-track { order: 2; margin-top: 24px; }
	.wv-ab-testimonials .wv-slider-nav { order: 3; margin-top: 20px; justify-content: center; }
	#wv-ab-testi-heading { margin-top: 16px; }
}

.wv-ab-stats { background: #f8f8f8; }
@media (max-width: 767.98px) { .wv-ab-stats { padding-top: 0; } }
.wv-abwv-stats { background: #ffffff; }
@media (max-width: 767.98px) { .wv-abwv-stats { padding-top: 0; } }

/* Choose your path */
.wv-path-head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 24px; }
@media (max-width: 767.98px) { .wv-path-head { gap: 0; } }
.wv-path-head .wv-label { margin-bottom: 0; }
.wv-path-heading { font-weight: 500; letter-spacing: -1.04px; max-width: 720px; margin-top: 0; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-path-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 40px; justify-content: center; }
@media (max-width: 767.98px) { .wv-path-grid { margin-top: 28px; } }
.wv-path-card { position: relative; border-radius: var(--wv-radius); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; padding: 24px; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.wv-path-card:hover, .wv-path-card:focus-within { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.45); }
.wv-path-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.5s ease; }
.wv-path-card:hover img, .wv-path-card:focus-within img { transform: scale(1.08); }
.wv-path-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 53%, var(--wv-color-overlay-dark) 95%); z-index: -1; }
.wv-path-body { color: var(--wv-color-white); text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wv-path-title { font-weight: 600; text-transform: capitalize; font-size: clamp(2rem, 4.21875vw, 3.375rem); line-height: clamp(2.4rem, 5.46875vw, 4.375rem); }
.wv-path-desc { line-height: 1.444; max-width: 420px; font-size: 16px; }
.wv-path-body .wv-btn-group .wv-btn { height: 44px; }
@media (min-width: 768px) {
	.wv-path-card { padding: 32px; min-height: 500px; }
	.wv-path-desc { font-size: 17px; }
	.wv-path-body { gap: 20px; }
}
@media (min-width: 1024px) {
	.wv-path-grid { grid-template-columns: 1fr 1fr; }
	.wv-path-card { aspect-ratio: 578 / 700; min-height: 420px; padding: 48px; }
	.wv-path-desc { font-size: 18px; line-height: 26px; }
	.wv-path-body { gap: 24px; }
}

/* Testimonials / stats shared heading row */
.wv-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.wv-section-heading { font-size: var(--wv-text-h2); font-weight: 600; max-width: 650px; margin-top: 12px; }
.wv-slider-nav { display: flex; gap: 11px; }
.wv-slider-nav button { width: 50px; height: 50px; border-radius: 50%; border: none; background: var(--wv-color-blue-tint-bg); color: var(--wv-color-blue); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
.wv-slider-nav button:hover { background: var(--wv-color-blue); color: var(--wv-color-white); }
.wv-slider-nav svg { width: 24px; height: 24px; }
.wv-slider-nav .is-prev svg { transform: rotate(180deg); }

.wv-testimonials { background: var(--wv-color-off-white); padding-block: 48px; }
.wv-testi-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (max-width: 767.98px) { .wv-testi-head { gap: 16px; } }
.wv-testi-head .wv-label { margin-bottom: 0; }
.wv-testimonials .wv-section-heading { font-weight: 500; letter-spacing: -2px; text-transform: capitalize; max-width: none; margin-top: 0; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }

.wv-container[data-wv-slider] { overflow: hidden; }
.wv-testimonial-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 40px; scrollbar-width: none; -ms-overflow-style: none; }
.wv-testimonial-track::-webkit-scrollbar { display: none; height: 0; }
@media (min-width: 768px) {
	.wv-testimonials { padding-block: 64px; }
}
.wv-testimonials .wv-testimonial-card { flex-basis: 280px; }
.wv-testimonials .wv-testimonial-media { height: 220px; }
.wv-testimonials .wv-testimonial-quote { font-size: 1rem; }
@media (min-width: 768px) {
	.wv-testimonials .wv-testimonial-card { flex-basis: 340px; }
	.wv-testimonials .wv-testimonial-media { height: 260px; }
	.wv-testimonials .wv-testimonial-quote { font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
	.wv-testimonials { padding-block: 80px; }
	.wv-testimonials .wv-container[data-wv-slider] { overflow: visible; }
	.wv-testimonials .wv-testimonial-track { margin-right: calc(50% - 50vw); }
	.wv-testimonials .wv-testimonial-card { flex-basis: 383px; }
	.wv-testimonials .wv-testimonial-media { height: 300px; }
	.wv-testimonials .wv-testimonial-quote { font-size: 1.125rem; }
}
@media (max-width: 767.98px) {
	/* Same arrows-below-track reorder used on For Life's testimonials. */
	.wv-testimonials .wv-container[data-wv-slider] { display: flex; flex-direction: column; }
	.wv-testimonials .wv-section-head { display: contents; }
	.wv-testimonials .wv-section-head > div:first-child { order: 1; }
	.wv-testimonials .wv-testimonial-track { order: 2; margin-top: 24px; }
	.wv-testimonials .wv-slider-nav { order: 3; margin-top: 20px; justify-content: center; }
	/* For Business only -- scoped via its unique aria-labelledby since this
	   section has no page-specific class. Homepage's identical .wv-testimonials
	   markup keeps the normal section padding-bottom. */
	.wv-testimonials[aria-labelledby="wv-fb-testi-heading"] { padding-bottom: 0; }
}

/* For Life — testimonial cards (quote-card style, distinct from homepage's media card) */
.wv-fl-testimonials .wv-section-heading { font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); letter-spacing: -2px; font-weight: 500; text-transform: capitalize; }
@media (max-width: 767.98px) { .wv-fl-testimonials .wv-section-heading { margin-top: 16px; } }
.wv-fl-testi-card { position: relative; flex: 0 0 300px; scroll-snap-align: start; background: var(--wv-color-blue-tint-bg); border: 1px solid rgba(255,255,255,0.45); border-radius: var(--wv-radius); padding: 40px 32px 32px; min-height: 340px; display: flex; flex-direction: column; overflow: hidden; }
.wv-fl-testi-mark { position: absolute; top: 52px; right: 32px; transform: translateY(-50%); font-family: var(--wv-font-heading); font-size: 6rem; line-height: 1; color: var(--wv-color-blue); opacity: 0.5; pointer-events: none; }
.wv-fl-testi-stars { display: flex; gap: 4px; margin-bottom: 26px; }
.wv-fl-testi-stars .wv-icon svg { width: 16px; height: 16px; color: #d4a017; }
.wv-fl-testi-quote { font-style: italic; font-size: 1rem; line-height: 1.444; color: var(--wv-color-dark); flex: 1; margin: 0; }
@media (min-width: 768px) {
	.wv-fl-testi-card { flex-basis: 340px; }
	.wv-fl-testi-quote { font-size: 1.0625rem; }
}
@media (min-width: 1280px) {
	.wv-fl-testi-card { flex-basis: 360px; }
	.wv-fl-testi-quote { font-size: 1.125rem; }
	.wv-fl-testimonials .wv-container[data-wv-slider] { overflow: visible; }
	.wv-fl-testimonials .wv-testimonial-track { margin-right: calc(50% - 50vw); }
}
@media (max-width: 767.98px) {
	/* Prev/next arrows sit below the card track on mobile instead of next
	   to the heading -- same display:contents reorder trick used for FAQ. */
	.wv-fl-testimonials .wv-container[data-wv-slider] { display: flex; flex-direction: column; }
	.wv-fl-testimonials .wv-section-head { display: contents; }
	.wv-fl-testimonials .wv-section-head > div:first-child { order: 1; }
	.wv-fl-testimonials .wv-testimonial-track { order: 2; margin-top: 24px; }
	.wv-fl-testimonials .wv-slider-nav { order: 3; margin-top: 20px; justify-content: center; }
	.wv-section.wv-fl-testimonials { padding-bottom: 0; }
	/* Sound Therapy Bundle only -- scoped via its unique aria-labelledby since
	   this section shares .wv-fl-testimonials with For Life, whose
	   padding-bottom:0 above must stay untouched. */
	.wv-fl-testimonials[aria-labelledby="wv-sb-testi-heading"] { padding-bottom: var(--wv-space-section); }
	/* Sound Therapy Bundle (Physical) only -- same scoping, same reason. */
	.wv-fl-testimonials[aria-labelledby="wv-sbp-testi-heading"] { padding-bottom: var(--wv-space-section); }
	/* About Wellness Vibe only -- same scoping, same reason. */
	.wv-fl-testimonials[aria-labelledby="wv-abwv-testi-heading"] { padding-bottom: var(--wv-space-section); }
	.wv-fl-testi-card { padding: 36px 24px 24px; }
}
.wv-fl-testi-person { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--wv-color-blue); padding-top: 16px; margin-top: 16px; }
.wv-fl-testi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--wv-color-white); }
.wv-fl-testi-name { font-family: var(--wv-font-heading); font-weight: normal; font-size: 1rem; line-height: 1.5; margin: 0; color: var(--wv-color-dark); }
.wv-fl-testi-role { font-size: 0.75rem; line-height: 1.667; text-transform: uppercase; margin: 0; color: var(--wv-color-dark); opacity: 0.6; }
.wv-testimonial-card { scroll-snap-align: start; flex: 0 0 383px; border-radius: var(--wv-radius); overflow: hidden; background: var(--wv-color-white); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.wv-testimonial-card:hover, .wv-testimonial-card:focus-within { box-shadow: 0 16px 40px rgba(0,0,0,0.12); transform: translateY(-4px); }
.wv-testimonial-media { position: relative; height: 300px; overflow: hidden; }
.wv-testimonial-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.wv-testimonial-card:hover .wv-testimonial-media img, .wv-testimonial-card:focus-within .wv-testimonial-media img { transform: scale(1.08); }
.wv-testimonial-play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; color: var(--wv-color-dark); transition: background-color 0.2s ease, transform 0.2s ease; }
.wv-testimonial-play:hover { background: var(--wv-color-white); transform: scale(1.08); }
.wv-testimonial-play svg { width: 20px; height: 20px; }
.wv-testimonial-body { padding: 16px; }
.wv-testimonial-quote { font-style: italic; font-size: 1.125rem; line-height: 1.444; margin: 0 0 12px; }
.wv-testimonial-person { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--wv-color-blue); padding-top: 16px; }
.wv-testimonial-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.wv-testimonial-name { font-family: var(--wv-font-heading); font-weight: normal; font-size: 1rem; line-height: 1.5; }
.wv-testimonial-role { font-size: 0.75rem; line-height: 1.667; text-transform: uppercase; color: var(--wv-color-dark); }

.wv-video-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20,18,17,0.85); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; }
.wv-video-modal.is-open { opacity: 1; visibility: visible; }
.wv-video-modal-inner { position: relative; width: 100%; max-width: 900px; transform: scale(0.94); transition: transform 0.25s ease; }
.wv-video-modal.is-open .wv-video-modal-inner { transform: scale(1); }
.wv-video-modal-body { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--wv-radius); overflow: hidden; }
.wv-video-modal-body video, .wv-video-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.wv-video-modal-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: var(--wv-color-white); display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
.wv-video-modal-close:hover { background: rgba(255,255,255,0.3); }
.wv-video-modal-close svg { width: 20px; height: 20px; }
body.wv-modal-open { overflow: hidden; }

/* Stats */
/* Shrink-wrapped + auto-centered (not text-align:center) -- Figma centers
   this heading as a block while keeping each line flush with the other's
   own left edge, not independently centering every line. */
.wv-stats-heading { font-family: var(--wv-font-heading); font-weight: 500; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); letter-spacing: -2px; color: var(--wv-color-dark); text-transform: capitalize; text-align: center; max-width: 765px; margin: 0 auto 40px; }
.wv-stats-image { border-radius: var(--wv-radius); overflow: hidden; }
.wv-stats-image img { width: 100%; height: auto; aspect-ratio: 1180 / 488; object-fit: cover; display: block; }
@media (max-width: 767.98px) {
	.wv-stats-image { margin-inline: calc(50% - 50vw); border-radius: 0; }
	.wv-stats-image img { aspect-ratio: 4 / 3; }
}
.wv-stats-grid {
	position: relative;
	z-index: 1;
	background: rgba(28,141,205,0.85);
	border-radius: var(--wv-radius);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
	max-width: 1006px;
	margin: -60px auto 0;
	padding: 32px 24px;
}
.wv-stat { text-align: center; color: var(--wv-color-white); width: 250px; max-width: 100%; }
.wv-stat-divider { display: none; }
.wv-stat-label { font-family: var(--wv-font-body); font-size: 14px; font-weight: bold; text-transform: uppercase; line-height: 1.571; opacity: 0.95; margin-bottom: 8px; }
.wv-stat-number { font-family: var(--wv-font-heading); font-size: 32px; font-weight: 500; letter-spacing: -0.64px; line-height: 1.167; margin: 0 0 8px; }
.wv-stat-desc { font-family: var(--wv-font-body); font-size: 14px; line-height: 1.571; }
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-stats-grid { margin-top: -100px; padding: 24px 32px; flex-wrap: nowrap; gap: 16px; }
	.wv-stat { width: 190px; }
	.wv-stat-divider { display: block; width: 1px; height: 110px; background: rgba(255,255,255,0.3); flex: 0 0 auto; }
	.wv-stat-number { font-size: 36px; letter-spacing: -0.72px; }
	.wv-stat-desc { font-size: 13px; line-height: 1.538; }
}
@media (min-width: 1280px) {
	.wv-stats-grid { margin-top: -140px; padding: 40px 80px; gap: 24px; flex-wrap: nowrap; }
	.wv-stat { width: 250px; }
	.wv-stat-divider { display: block; height: 146px; }
	.wv-stat-number { font-size: 48px; letter-spacing: -0.96px; margin-bottom: 16px; }
	.wv-stat-label { font-size: 14px; }
	.wv-stat-desc { font-size: 14px; line-height: 1.571; }
}

/* Founder */
.wv-founder { background: var(--wv-color-off-white); }
.wv-founder-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .wv-founder-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .wv-workshop-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.wv-founder-heading { font-size: clamp(1.5rem, 4vw, 3.25rem); line-height: 1.077; letter-spacing: -1.04px; font-weight: 500; text-transform: capitalize; margin-top: 16px; }
.wv-founder-text { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; font-size: 1.125rem; line-height: 1.444; color: var(--wv-color-dark); }
.wv-founder-text p { margin: 0; }
.wv-founder-text .wv-text-accent { font-weight: bold; font-style: italic; }
.wv-founder-cta { margin-top: 32px; }
/* Workshop section (For Life) -- body-section heading rule (24px mobile
   floor, not the generic 28px floor), and the Figma spec here keeps the
   paragraph at 18px/26px (the 16px override this had was a mismatch) and a
   40px gap before the CTA button, not 32px. */
.wv-workshop-grid .wv-founder-heading { font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-workshop-grid .wv-founder-cta { margin-top: 40px; }
@media (max-width: 767.98px) {
	.wv-workshop-grid { gap: 24px; }
	.wv-workshop-grid .wv-founder-heading { margin-top: 0; }
	.wv-workshop-grid .wv-founder-cta { margin-top: 24px; }
	.wv-workshop-grid > div:first-child { order: 2; }
	.wv-workshop-grid .wv-workshop-photo { order: 1; }
	.wv-workshop-grid .wv-founder-cta { display: flex; width: 100%; }
	.wv-workshop-grid .wv-founder-cta .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
	#wv-fb-workshop-heading { margin-top: 16px; }
	#wv-fb-testi-heading { margin-top: 16px; }
}

/* Section-level single CTA (one button-group per section, not per repeated
   card -- e.g. "Shop All", "Start with DNA Repattern", "Start Today") goes
   full width on mobile instead of sitting content-width/left-aligned. */
@media (max-width: 767.98px) {
	.wv-products-cta,
	.wv-final-cta-btn,
	.wv-faq-card .wv-btn-group {
		display: flex;
		width: 100%;
	}
	.wv-products-cta .wv-btn:not(.wv-btn-icon),
	.wv-final-cta-btn .wv-btn:not(.wv-btn-icon),
	.wv-faq-card .wv-btn-group .wv-btn:not(.wv-btn-icon) {
		flex: 1 0 0;
		justify-content: center;
	}
}
.wv-founder-photo { aspect-ratio: 567 / 559; border-radius: var(--wv-radius); overflow: hidden; transition: box-shadow 0.35s ease; }
.wv-founder-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.wv-founder-photo:hover { box-shadow: 0 24px 48px -20px rgba(0,0,0,0.35); }
.wv-founder-photo:hover img { transform: scale(1.08); }

.wv-founder .wv-founder-grid { align-items: flex-start; }
@media (max-width: 767.98px) {
	.wv-founder .wv-founder-grid { gap: 28px; }
	.wv-founder .wv-founder-photo { order: 1; }
	.wv-founder .wv-founder-col { order: 2; }
}
.wv-founder-col { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
@media (max-width: 767.98px) {
	.wv-founder-col { gap: 16px; }
	.wv-founder .wv-founder-cta { margin-top: 8px; gap: 4px; display: flex; width: 100%; }
	.wv-founder .wv-founder-cta .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}
.wv-founder-col .wv-label { margin-bottom: 0; }
.wv-founder-copy { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.wv-founder .wv-founder-heading { margin-top: 0; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-founder .wv-founder-text { margin-top: 0; font-size: 1rem; line-height: 1.5; }
.wv-founder .wv-founder-cta { margin-top: 0; }
@media (min-width: 768px) {
	.wv-founder .wv-founder-text { font-size: 1.0625rem; line-height: 1.47; }
}
@media (min-width: 1024px) {
	.wv-founder .wv-founder-text { font-size: 1.125rem; line-height: 1.444; }
}

/* App download */
.wv-app { position: relative; color: var(--wv-color-white); overflow: hidden; }
.wv-app-bg { position: absolute; inset: 0; background: linear-gradient(199deg, rgba(28,141,205,0.22) 19%, var(--wv-color-blue-tint) 74%); z-index: -1; }
/* Mobile stacks the two grid columns into one tall column, which stretches the
   199deg gradient's pale 19% stop across the whole visible top -- content sits
   inside a washed-out, low-contrast zone. Steeper top-to-bottom fade keeps the
   top vivid regardless of how tall the stacked content makes the section. */
@media (max-width: 767.98px) {
	.wv-app-bg { background: linear-gradient(180deg, rgba(28,141,205,0.5) 0%, var(--wv-color-blue-tint) 35%); }
}
.wv-app-bg::after { content: ""; position: absolute; inset: 0; background-image: url('../images/app-bg-texture.jpg'); background-size: cover; background-position: center; opacity: 0.05; }
.wv-app-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .wv-app-grid { grid-template-columns: 1fr 1fr; } }
.wv-app-eyebrow { font-size: 0.875rem; text-transform: uppercase; }
.wv-app-heading { font-family: var(--wv-font-heading); font-weight: 500; letter-spacing: -1.04px; text-transform: capitalize; color: var(--wv-color-cream); margin-top: 16px; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-app-list { margin-top: 24px; }
.wv-app-list li { display: flex; gap: 16px; border-top: 1px solid var(--wv-color-border-hairline-light); padding: 20px 0; align-items: baseline; }
.wv-app-list dt { font-family: var(--wv-font-heading); font-style: italic; font-size: 1.5rem; flex: 0 0 124px; font-weight: normal; }
.wv-app-list dd { margin: 0; font-size: 1.125rem; }
.wv-app-cta { margin-top: 40px; }
@media (max-width: 767.98px) {
	.wv-app-list li { padding: 12px 0; }
	.wv-app-list dt { font-size: 1.25rem; }
	.wv-app-list dd { font-size: 16px; }
	.wv-app-cta { margin-top: 24px; display: flex; width: 100%; }
	.wv-app-cta .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}
.wv-app-cta .wv-btn-icon { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-app-cta .wv-btn-icon:hover { background: var(--wv-color-white); filter: brightness(0.96); }
.wv-app-phones { width: 100%; max-width: 575px; margin-inline: auto; }
.wv-app-phones img { width: 100%; height: auto; display: block; }
.wv-app-badges { display: flex; gap: 14px; margin-top: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.wv-app-badges a { display: inline-flex; border-radius: 8px; transition: transform 0.15s ease, opacity 0.15s ease; }
.wv-app-badges a:hover { transform: translateY(-2px); opacity: 0.9; }
.wv-app-badges a:focus-visible { outline: 2px solid var(--wv-color-white); outline-offset: 3px; }
.wv-app-badges img { width: auto; height: 46px; display: block; border-radius: 8px; }

/* Instagram */
.wv-insta-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (max-width: 767.98px) {
	.wv-insta-head { gap: 16px; }
	.wv-instagram .wv-btn-group { display: flex; width: 100%; }
	.wv-instagram .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}
.wv-insta-head .wv-label { margin-bottom: 0; }
.wv-instagram .wv-section-heading { margin-top: 0; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-insta-feed { margin-top: 40px; }

.wv-insta-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 40px; padding-bottom: 8px; }
.wv-insta-card { position: relative; flex: 0 0 280px; scroll-snap-align: start; border-radius: var(--wv-radius); overflow: hidden; height: 500px; background: #2e5149; }
.wv-insta-card img { width: 100%; height: 100%; object-fit: cover; }
.wv-insta-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.75) 100%); }
.wv-insta-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.55); backdrop-filter: blur(5px); color: #fff; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; }
.wv-insta-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; color: #fff; }
.wv-insta-caption p { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.wv-insta-meta { display: flex; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.85); }

/* Final CTA */
.wv-final-cta { position: relative; border-radius: var(--wv-radius); overflow: hidden; padding: 48px 24px; text-align: center; color: var(--wv-color-white); }
@media (min-width: 900px) { .wv-final-cta { padding: 80px 130px; } }
.wv-final-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.wv-final-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 15%, var(--wv-color-overlay-dark) 92%); z-index: -1; }
.wv-final-cta-heading { font-family: var(--wv-font-heading); font-weight: 500; font-style: italic; font-size: clamp(1.5rem, 3.5vw, 3rem); line-height: 1.167; text-transform: capitalize; }
.wv-final-cta-sub { margin-top: 16px; font-size: 1.125rem; line-height: 1.444; }
.wv-final-cta-btn { margin-top: 24px; }
.wv-final-cta-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: center; margin-top: 16px; font-size: 1rem; line-height: 1.5; font-style: italic; }

.wv-final-cta--home .wv-final-cta-heading { font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }

/* Footer */
/* Footer (node 3640:4791). CORRECTED 2026-08-21: the card was previously
   solid white with dark text -- Figma actually wants a translucent glass
   card (rgba(255,255,255,0.2)) with WHITE text sitting directly on the
   photo (through the existing .wv-footer::before dark gradient overlay),
   not an opaque white panel. All text/border/icon colors flipped to white
   accordingly. Spacing/sizes were already correct (checked against the
   exact Figma frame) -- font-sizes, gaps, and the 3-column content were
   pixel-matching already, only the color scheme needed the fix. */
.wv-footer { position: relative; padding-block: var(--wv-space-section); overflow: hidden; }
.wv-footer-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; z-index: -2; }
.wv-footer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,14,0.85) 0%, rgba(6,20,35,0.6) 35%, rgba(6,97,149,0.28) 100%); z-index: -1; }
.wv-footer-card { background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); border-radius: var(--wv-radius); padding: 24px; color: var(--wv-color-white); }
@media (min-width: 768px) { .wv-footer-card { padding: 40px; } }
.wv-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) and (max-width: 1023.98px) { .wv-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (min-width: 1024px) { .wv-footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.wv-footer-logo img { height: 56px; width: auto; max-width: 160px; object-fit: contain; margin-bottom: 16px; }
.wv-footer-desc { font-size: 14px; line-height: 1.571; color: var(--wv-color-white); }
.wv-footer-contact { margin-top: 16px; font-size: 14px; line-height: 1.571; letter-spacing: 0.28px; color: var(--wv-color-white); }
.wv-footer-contact p { margin-bottom: 8px; }
.wv-footer-contact a { color: inherit; text-decoration: none; }
.wv-footer-contact a:hover { text-decoration: underline; }
.wv-footer-socials-label { font-size: 14px; margin-bottom: 12px; color: var(--wv-color-white); }
.wv-footer-socials { display: flex; gap: 12px; margin-top: 16px; }
.wv-footer-socials a { width: 40px; height: 40px; border: 1px solid var(--wv-color-white); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--wv-color-white); transition: background-color 0.2s ease, color 0.2s ease; }
.wv-footer-socials a:hover { background: var(--wv-color-white); color: var(--wv-color-dark); }
.wv-footer-socials svg { width: 16px; height: 16px; }
.wv-footer-col h2 { font-family: var(--wv-font-heading); font-size: 16px; text-transform: uppercase; margin-bottom: 16px; font-weight: 500; color: var(--wv-color-white); }
.wv-footer-col ul li { margin-bottom: 14px; font-size: 14px; line-height: 1.571; }
.wv-footer-col:first-of-type ul li { margin-bottom: 18px; }
.wv-footer-col a { color: var(--wv-color-white); text-decoration: none; }
.wv-footer-col a:hover { text-decoration: underline; }
.wv-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--wv-color-white); padding-top: 48px; margin-top: 40px; font-size: 14px; color: var(--wv-color-white); }
.wv-footer-bottom nav ul { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wv-footer-bottom nav a { color: var(--wv-color-white); text-decoration: none; }
.wv-footer-bottom nav a:hover { text-decoration: underline; }

.wv-icon { display: inline-flex; }
.wv-icon svg { width: 1em; height: 1em; display: block; }
.wv-primary-nav a svg, .wv-nav-dropdown-toggle svg { width: 13px; height: 13px; }

.wv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ===== For Life page ===== */

/* Ticker bar */
.wv-ticker { background: var(--wv-color-blue); overflow: hidden; }
.wv-ticker-track { display: flex; align-items: center; width: max-content; animation: wv-marquee 45s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wv-ticker-track { animation: none; overflow-x: auto; } }
.wv-ticker-group { display: flex; align-items: center; gap: 24px; padding: 24px 16px; flex: 0 0 auto; }
.wv-ticker-item { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.wv-ticker-item .wv-icon { color: var(--wv-color-white); flex: 0 0 auto; }
.wv-ticker-item .wv-icon svg { width: 40px; height: 40px; }
.wv-ticker-item span { font-family: var(--wv-font-heading); font-style: italic; font-size: 1.5rem; line-height: 2; color: var(--wv-color-white); white-space: nowrap; }
@media (max-width: 767.98px) {
	.wv-ticker-track { animation-duration: 30s; }
	.wv-ticker-group { gap: 16px; padding: 16px 12px; }
	.wv-ticker-item { gap: 12px; }
	.wv-ticker-item .wv-icon svg { width: 24px; height: 24px; }
	.wv-ticker-item span { font-size: 1rem; line-height: 1.5; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-ticker-track { animation-duration: 38s; }
	.wv-ticker-item .wv-icon svg { width: 32px; height: 32px; }
	.wv-ticker-item span { font-size: 1.25rem; }
}

/* About (centered heading + photo) */
.wv-fl-about { text-align: center; }
/* Body-section heading rule (24px mobile floor, not the generic 32px clamp
   floor) -- same fluid-clamp technique used on Contact/Blog/Final-CTA. */
.wv-fl-about .wv-about-heading { font-size: clamp(1.5rem, 4.375vw, 3.5rem); line-height: clamp(2rem, 5.3125vw, 4.25rem); }
.wv-fl-about-photo { margin-top: 24px; border-radius: var(--wv-radius); overflow: hidden; aspect-ratio: 1180 / 592; background: #000; }
.wv-fl-about-photo img, .wv-fl-about-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* For Business — Business Blueprint (About-style + CTA) */
.wv-fb-blueprint { text-align: center; display: flex; flex-direction: column; align-items: center; }
.wv-fb-blueprint-cta { margin-top: 24px; }

/* For Business — Key Benefits reuses the exact .wv-benefits/.wv-benefit-card
   component from For Life verbatim (same markup, same classes) instead of a
   parallel implementation -- see .wv-fb-benefits overrides further down. */

/* For Business — Workshop CTA (light blue bg + checklist) */
.wv-fb-workshop { background: var(--wv-color-blue-tint-bg); }
.wv-fb-workshop-checklist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wv-fb-workshop-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; line-height: 1.5; color: var(--wv-color-dark); }
.wv-fb-workshop-checklist .wv-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--wv-color-blue); }
.wv-fb-workshop-checklist .wv-icon svg { width: 24px; height: 24px; }

/* For Business — Final CTA (flat overlay, tighter radius/padding) */
.wv-fb-final-cta { border-radius: var(--wv-radius-sm); }
.wv-fb-final-cta::before { background: rgba(0,0,0,0.7); }
.wv-fb-final-cta .wv-final-cta-sub { font-size: 1rem; line-height: 1.5; }
.wv-fb-final-cta .wv-final-cta-heading { font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
/* Content has a manual <br> matching Figma's own 2-line break -- at the
   130px-padded desktop width the first line is a hair wider than the
   padded box, so normal wrap was folding it into a 3rd line. nowrap keeps
   each half of the manual break on its own single line (the <br> itself
   still forces the break between them regardless of nowrap). */
@media (min-width: 1280px) {
	.wv-fb-final-cta { padding: 40px 130px; }
	.wv-fb-final-cta .wv-final-cta-heading { white-space: nowrap; }
}

/* About Wellness Vibe -- Final CTA (node 3640:3836), same exact pixel-perfect
   pattern as blog's final CTA (0.58 scrim, fluid heading clamp with 24px
   mobile floor, compact padding through tablet then jump to Figma's 80/130
   at the real 1280 desktop breakpoint since the 4-item trust row needs it). */
.wv-abwv-final-cta::before { background: rgba(0,0,0,0.58); }
.wv-abwv-final-cta .wv-final-cta-sub { font-size: 1rem; line-height: 1.5; }
.wv-abwv-final-cta .wv-final-cta-trust { font-size: 0.875rem; line-height: 1.571; }
.wv-abwv-final-cta .wv-final-cta-heading { font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-abwv-final-cta { padding: 48px 24px; }
@media (min-width: 1280px) { .wv-abwv-final-cta { padding: 80px 130px; } }

.wv-blog-final-cta-section { padding-top: 0; }
.wv-blog-final-cta::before { background: rgba(0,0,0,0.58); }
.wv-blog-final-cta .wv-final-cta-sub { font-size: 1rem; line-height: 1.5; }
.wv-blog-final-cta .wv-final-cta-trust { font-size: 0.875rem; line-height: 1.571; }
/* Body-section heading rule (24px mobile floor, NOT 28px -- that's banner-only),
   fluid clamp hitting the exact 48px/56px desktop value from Figma at 1280px. */
.wv-blog-final-cta .wv-final-cta-heading { font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
/* Base .wv-final-cta jumps to desktop padding at 900px, but the 4-item trust
   row here doesn't actually have room to fit on one line until ~1280px --
   below that it just wraps awkwardly inside oversized padding. Keep the
   compact padding through the real tablet range and jump at the real
   desktop breakpoint instead (matches the sitewide 768/1280 convention). */
.wv-blog-final-cta { padding: 48px 24px; }
@media (min-width: 1280px) { .wv-blog-final-cta { padding: 80px 130px; } }

/* For Life — Final CTA (same pixel-perfect pattern as blog's final CTA: fluid
   heading clamp with 24px mobile floor, compact padding through tablet then
   jump to Figma's 80/130 at the real 768/1280 desktop breakpoint). */
.wv-fl-final-cta .wv-final-cta-heading { font-size: clamp(1.5rem, 3.75vw, 3rem); line-height: clamp(2rem, 4.375vw, 3.5rem); }
.wv-fl-final-cta .wv-final-cta-trust { font-size: 0.875rem; line-height: 1.571; }
@media (min-width: 768px) { .wv-fl-final-cta .wv-final-cta-trust { font-size: 1rem; line-height: 1.5; } }
.wv-fl-final-cta { padding: 48px 24px; }
@media (min-width: 1280px) { .wv-fl-final-cta { padding: 80px 130px; } }

/* For Business — Founder Quote Spotlight */
.wv-fb-quote { position: relative; overflow: hidden; padding-block: 80px; color: var(--wv-color-white); }
/* Dark overlay is baked into the same background-image declaration as the
   photo (two layered backgrounds on one property) instead of a separate
   z-index:-1 scrim div -- the scrim approach silently failed to paint over
   the photo in real browser testing, layered-background is unambiguous. */
.wv-fb-quote-parallax { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
/* About's quoteband only (not For Business's .wv-fb-quote, which keeps its
   own padding) -- compound selector scopes this to the section carrying
   both classes. */
@media (max-width: 767.98px) { .wv-ab-quoteband.wv-fb-quote-parallax { padding-left: 24px; padding-right: 24px; } }
/* Explicit width (not max-width alone) so the box has a stable, predictable
   left edge for the icon's offset below -- shrink-to-fit content would move
   the edge inward whenever a line wraps shorter than 520px, throwing the
   icon's fixed offset onto the text instead of past its corner. */
.wv-fb-quote-content { width: 520px; max-width: 100%; box-sizing: border-box; text-align: center; position: relative; margin-inline: auto; }
@media (max-width: 767.98px) { .wv-fb-quote-content { padding-inline: 24px; } }
.wv-fb-quote-icon { display: flex; justify-content: center; margin-bottom: 8px; color: var(--wv-color-white); filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
.wv-fb-quote-icon svg { width: 64px; height: 64px; transform: rotate(180deg); }
@media (min-width: 900px) { .wv-fb-quote-icon { position: absolute; top: -46px; left: -50px; margin-bottom: 0; } }
.wv-fb-quote-text { font-family: var(--wv-font-heading); font-weight: 500; font-style: italic; font-size: clamp(1.25rem, 1.875vw, 1.5rem); letter-spacing: -0.48px; line-height: clamp(1.75rem, 2.5vw, 2rem); }
.wv-fb-quote-subtext { font-size: 1rem; line-height: 1.5; margin-top: 16px; }
.wv-fb-quote-author { font-family: var(--wv-font-heading); text-transform: capitalize; letter-spacing: -2px; font-size: clamp(1.25rem, 1.875vw, 1.5rem); line-height: clamp(1.75rem, 2.5vw, 2rem); margin-top: 16px; }
.wv-fb-quote-author span { font-family: var(--wv-font-body); letter-spacing: normal; font-size: 1.125rem; }
@media (max-width: 767.98px) {
	.wv-fb-quote { padding-block: 48px; }
	.wv-fb-quote-icon svg { width: 40px; height: 40px; }
}

/* Key Benefits */
.wv-benefits { background: linear-gradient(180deg, rgba(28,141,205,0.65) 17%, #0e4767 112%); color: var(--wv-color-white); }
.wv-benefits-head { text-align: center; }
.wv-benefits-heading { font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); letter-spacing: -1.04px; font-weight: 500; text-transform: capitalize; margin-top: 16px; color: var(--wv-color-white); }
.wv-benefits-body { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; margin-top: 40px; }
@media (min-width: 1024px) { .wv-benefits-body { flex-wrap: nowrap; } }
.wv-benefits-cluster { width: 467px; max-width: 100%; aspect-ratio: 467 / 507; flex: 0 0 auto; position: relative; }
.wv-benefits-cluster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* For Business problems section reuses this shared cluster component but at
   its own (smaller) sizes -- placed after the base rule since same-specificity
   ties resolve by source order, not by which one "looks" more specific. */
.wv-cluster-ring { position: absolute; left: 10px; top: 0; width: 457px; height: 457px; border-radius: 50%; background: rgba(26,136,198,0.45); }
.wv-cluster-center { position: absolute; left: 63px; top: 53px; width: 350px; height: 350px; border-radius: 50%; overflow: hidden; border: 8px solid rgba(255,255,255,0.9); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.wv-cluster-avatar { position: absolute; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.wv-cluster-avatar-1 { left: 393px; top: 320px; width: 65px; height: 66px; }
.wv-cluster-avatar-2 { left: 27.5px; top: 30px; width: 74px; height: 75px; }
.wv-cluster-avatar-3 { left: 0.5px; top: 280px; width: 54px; height: 55px; }
.wv-cluster-avatar-4 { left: 209.5px; top: 436px; width: 58px; height: 59px; }
.wv-cluster-avatar-5 { left: 277.5px; top: 403px; width: 84px; height: 84px; }
.wv-cluster-avatar-6 { left: 10.5px; top: 337px; width: 84px; height: 84px; }
.wv-benefits-cards { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 672px; }
@media (min-width: 768px) { .wv-benefits-cards { grid-template-columns: 1fr 1fr; } }
.wv-benefit-card { background: var(--wv-color-white); color: var(--wv-color-dark); border-radius: var(--wv-radius); padding: 16px; box-shadow: 3px 4px 8px rgba(204,201,187,0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .wv-benefit-card:hover { transform: translateY(-3px); box-shadow: 3px 8px 20px rgba(204,201,187,0.2); } }
/* Scroll fade-in-up, staggered row by row -- scoped to For Life only. */
.wv-fl-benefits .wv-benefit-card {
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.wv-fl-benefits .wv-benefit-card.is-visible { opacity: 1; transform: translateY(0); }
.wv-fl-benefits .wv-benefit-card:nth-child(1), .wv-fl-benefits .wv-benefit-card:nth-child(2) { transition-delay: 0s; }
.wv-fl-benefits .wv-benefit-card:nth-child(3), .wv-fl-benefits .wv-benefit-card:nth-child(4) { transition-delay: 0.15s; }
.wv-fl-benefits .wv-benefit-card:nth-child(5), .wv-fl-benefits .wv-benefit-card:nth-child(6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .wv-fl-benefits .wv-benefit-card { opacity: 1; transform: none; transition: none; } }
/* Same fade-in-up, staggered row by row -- scoped to For Business's copy of
   the exact same shared component (not a separate implementation). */
.wv-fb-benefits .wv-benefit-card {
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.wv-fb-benefits .wv-benefit-card.is-visible { opacity: 1; transform: translateY(0); }
.wv-fb-benefits .wv-benefit-card:nth-child(1), .wv-fb-benefits .wv-benefit-card:nth-child(2) { transition-delay: 0s; }
.wv-fb-benefits .wv-benefit-card:nth-child(3), .wv-fb-benefits .wv-benefit-card:nth-child(4) { transition-delay: 0.15s; }
.wv-fb-benefits .wv-benefit-card:nth-child(5), .wv-fb-benefits .wv-benefit-card:nth-child(6) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .wv-fb-benefits .wv-benefit-card { opacity: 1; transform: none; transition: none; } }
.wv-benefit-check { width: 24px; height: 24px; color: var(--wv-color-blue); margin-bottom: 8px; }
.wv-fl-benefits .wv-benefit-check { width: 28px; height: 28px; }
.wv-benefit-title { font-family: var(--wv-font-heading); font-style: italic; font-weight: 500; font-size: 1.125rem; line-height: 26px; margin-bottom: 4px; }
.wv-benefit-desc { font-size: 1.125rem; line-height: 26px; color: rgba(43,42,41,0.88); }
.wv-fb-benefits .wv-benefit-desc { font-size: 1rem; }

/* PEACE framework */
.wv-peace { text-align: center; }
.wv-peace-heading { font-size: clamp(1.5rem, 4vw, 3.25rem); line-height: 1.077; letter-spacing: -1.04px; font-weight: 500; margin-top: 16px; color: #32765b; }
.wv-peace-heading .wv-text-accent { color: #3d2e1e; }
.wv-peace-photo { margin: 40px auto 0; border-radius: var(--wv-radius); overflow: hidden; max-width: 518px; aspect-ratio: 518 / 592; background: #32765b; }
.wv-peace-photo img { width: 100%; height: 100%; object-fit: cover; }
.wv-peace-items { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: center; margin-top: 32px; }
.wv-peace-item { font-family: var(--wv-font-heading); font-weight: 600; font-size: 1.5rem; color: #3d2e1e; }
.wv-peace .wv-label { background: #32765b; color: var(--wv-color-cream); border-radius: var(--wv-radius-sm); }

/* Workshop CTA (reuses founder-style split layout) */
.wv-workshop-photo { aspect-ratio: 570 / 592; border-radius: var(--wv-radius); overflow: hidden; }
@media (min-width: 900px) { .wv-workshop-photo { aspect-ratio: auto; height: 100%; } }
.wv-workshop-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.wv-workshop-photo:hover img { transform: scale(1.06); }

/* Transformation ladder / timeline */
.wv-ladder { position: relative; background: #f8f8f8; }
.wv-ladder-steps { position: relative; margin-top: 40px; }
.wv-ladder-line { position: absolute; left: 50%; top: 0; width: 26px; height: 100%; transform: translateX(-50%); color: var(--wv-color-blue); overflow: visible; z-index: 0; }
@media (max-width: 899px) { .wv-ladder-line { left: 24px; } }
.wv-ladder-step { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding-block: 40px; opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; }
.wv-ladder-step.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .wv-ladder-step { opacity: 1; transform: none; transition: none; } }
@media (min-width: 900px) { .wv-ladder-step { grid-template-columns: 1fr 1fr; gap: 200px; } }
.wv-ladder-dot { position: absolute; left: 50%; top: 50%; width: 20.7px; height: 20.7px; background: var(--wv-color-blue); border: 2px solid rgba(28,141,205,0.2); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(28,141,205,0.12), 0 0 22px rgba(28,141,205,0.35); z-index: 2; }
@media (max-width: 899px) { .wv-ladder-dot { left: 24px; } }
/* left offsets below are solved from the wavy line's actual bezier path (Figma node 2391:11900)
   at each dot's real rendered top:50% position on the curve -- not a flat container %,
   since the SVG's preserveAspectRatio="none" bends x non-linearly along the line's height. */
.wv-ladder-step:nth-of-type(3n+1) .wv-ladder-dot { left: calc(50% - 7.53px); }
.wv-ladder-step:nth-of-type(3n+2) .wv-ladder-dot { left: calc(50% + 12.11px); }
.wv-ladder-step:nth-of-type(3n+3) .wv-ladder-dot { left: calc(50% - 8.13px); }
@media (max-width: 899px) {
	.wv-ladder-step:nth-of-type(3n+1) .wv-ladder-dot { left: 0.82px; }
	.wv-ladder-step:nth-of-type(3n+2) .wv-ladder-dot { left: 20.35px; }
	.wv-ladder-step:nth-of-type(3n+3) .wv-ladder-dot { left: -4.09px; }
}
.wv-ladder-photo { background: var(--wv-color-white); padding: 12px; border-radius: var(--wv-radius); box-shadow: 0 18px 32px -18px rgba(55,96,84,0.4), 0 2px 6px rgba(55,96,84,0.14); transition: transform 0.35s ease, box-shadow 0.35s ease; --wv-ladder-rotate: 0deg; transform: rotate(var(--wv-ladder-rotate)) scale(1); }
.wv-ladder-photo:hover { transform: rotate(var(--wv-ladder-rotate)) scale(1.04); box-shadow: 0 24px 40px -16px rgba(55,96,84,0.5), 0 4px 10px rgba(55,96,84,0.18); }
.wv-ladder-photo-inner { border-radius: calc(var(--wv-radius) - 4px); overflow: hidden; aspect-ratio: 340 / 375; max-width: 355px; }
.wv-ladder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-ladder-step:nth-of-type(odd) .wv-ladder-photo { --wv-ladder-rotate: -2.2deg; }
.wv-ladder-step:nth-of-type(even) .wv-ladder-photo { --wv-ladder-rotate: 2.2deg; justify-self: start; }
@media (min-width: 900px) { .wv-ladder-step:nth-of-type(odd) .wv-ladder-photo { justify-self: end; order: 2; } .wv-ladder-step:nth-of-type(odd) .wv-ladder-text { order: 1; text-align: right; } }
.wv-ladder-text { text-align: left; }
.wv-ladder-eyebrow { font-size: 0.875rem; letter-spacing: 3.84px; text-transform: uppercase; color: var(--wv-color-blue); opacity: 0.85; }
.wv-ladder-title { font-family: var(--wv-font-heading); font-weight: normal; font-size: 1.75rem; letter-spacing: -0.336px; margin-top: 8px; }
.wv-ladder-bullets { list-style: disc; margin: 8px 0 0; padding-left: 27px; font-size: 1.125rem; line-height: 26px; }
@media (min-width: 900px) { .wv-ladder-step:nth-of-type(odd) .wv-ladder-bullets { list-style-position: inside; padding-left: 0; padding-right: 27px; } }
.wv-ladder-caption { font-family: var(--wv-font-heading); font-style: italic; font-size: 1.125rem; line-height: 26px; margin-top: 16px; color: var(--wv-color-dark); }
@media (max-width: 899px) {
	/* Photo+text need to clear the line+dot (line sits at left:24px, dots
	   within ~0-24px) -- margin on the content itself, not padding on the
	   step, so the dot's own absolute position (relative to the step's
	   padding box) isn't disturbed. */
	.wv-ladder-step { padding-inline: 0; padding-block: 28px; padding-top: 0; }
	.wv-ladder-photo, .wv-ladder-text { margin-left: 28px; }
	.wv-ladder-photo-inner { max-width: 100%; }
	.wv-ladder-title { font-size: 20px; line-height: 28px; }
	.wv-ladder-bullets, .wv-ladder-caption { font-size: 16px; line-height: 24px; }
	.wv-ladder-bullets { margin-top: 16px; }
	.wv-ladder-eyebrow { letter-spacing: 1.84px; }
}

/* Products */
.wv-fl-products { background: #f8f8f8; }
/* Grid-area layout so the CTA button can reorder to the END on mobile
   (after the cards) while sitting beside the heading on desktop -- without
   needing two copies of the markup. Same reorder need as the workshop
   section's CSS `order` trick, just 2D so grid-template-areas fits better. */
.wv-products-container { display: grid; grid-template-areas: "headline" "filters" "grid" "cta"; gap: 24px; }
.wv-products-headline { grid-area: headline; }
.wv-products-cta { grid-area: cta; }
.wv-products-filters { grid-area: filters; }
.wv-products-grid { grid-area: grid; }
@media (min-width: 768px) {
	.wv-products-container { grid-template-columns: 1fr auto; column-gap: 24px; grid-template-areas: "headline cta" "filters filters" "grid grid"; }
	.wv-products-headline, .wv-products-cta { align-self: end; }
}
.wv-products-heading { font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); letter-spacing: -2px; font-weight: 500; text-transform: capitalize; margin-top: 8px; }
.wv-products-filters { display: flex; flex-wrap: wrap; gap: 20px; }
.wv-products-filters button { padding: 12px 16px; border-radius: var(--wv-radius); border: 1px solid var(--wv-color-blue); background: transparent; font-size: 1rem; color: var(--wv-color-dark); transition: background-color 0.2s ease, color 0.2s ease; }
.wv-products-filters button.is-active { background: var(--wv-color-blue); border-color: var(--wv-color-blue); color: var(--wv-color-white); }
.wv-products-filters button:hover:not(.is-active) { background: var(--wv-color-blue-tint-bg); }
@media (max-width: 767.98px) {
	.wv-products-filters { gap: 16px; }
	.wv-products-filters button { font-size: 14px; line-height: 22px; }
	/* For Business only -- scoped via its unique aria-labelledby since this
	   section shares .wv-fl-products with For Life, whose padding must stay. */
	.wv-fl-products[aria-labelledby="wv-fb-products-heading"] { padding: 0; }
}
.wv-products-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-products-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1280px) { .wv-products-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.wv-product-card { border-radius: var(--wv-radius); overflow: hidden; box-shadow: 4px 4px 8px rgba(0,0,0,0.08); background: var(--wv-color-white); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.wv-product-card:hover { transform: translateY(-4px); box-shadow: 4px 12px 24px rgba(0,0,0,0.14); }
.wv-product-media { height: 300px; }
.wv-product-media img { width: 100%; height: 100%; object-fit: cover; }
.wv-product-body { padding: 16px; }
.wv-product-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wv-product-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--wv-color-blue-tint-bg); color: var(--wv-color-blue); font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; padding: 7px 12px; border-radius: 9999px; }
.wv-product-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wv-color-blue); }
.wv-product-price { font-size: 1rem; font-weight: 600; color: #d4a017; text-transform: uppercase; }
.wv-product-price s { color: rgba(43,42,41,0.75); font-weight: 500; font-size: 0.75rem; margin-right: 4px; }
.wv-product-title { font-family: var(--wv-font-heading); font-weight: normal; font-size: 1.25rem; line-height: 1.4; margin-top: 16px; }
.wv-product-desc { font-size: 0.875rem; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wv-product-tags { display: flex; flex-wrap: wrap; gap: 8px 11px; border-top: 1px solid rgba(28,141,205,0.1); border-bottom: 1px solid rgba(28,141,205,0.1); padding-block: 12px; margin-top: 16px; font-size: 0.75rem; font-style: italic; }
.wv-product-tags span { display: inline-flex; align-items: center; gap: 5px; }
.wv-product-tags span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wv-color-blue); }
.wv-product-cta { margin-top: 16px; width: 100%; }
.wv-product-cta .wv-btn { flex: 1 0 0; justify-content: center; }

/* FAQ */
.wv-faq { background: #f8f8f8; }
.wv-faq-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.wv-faq-heading { font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(2rem, 4.375vw, 3.5rem); letter-spacing: -2px; font-weight: 500; margin-top: 16px; }
.wv-faq-card { background: var(--wv-color-white); border-radius: var(--wv-radius); padding: 24px; margin-top: 48px; max-width: 448px; }
.wv-faq-card-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.wv-faq-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wv-faq-card-heading { font-family: var(--wv-font-heading); font-size: 1.375rem; margin-top: 16px; }
.wv-faq-card-text { font-size: 16px; line-height: 24px; margin-top: 16px; color: var(--wv-color-dark); }
.wv-faq-card .wv-btn-group { margin-top: 24px; }
@media (max-width: 899.98px) {
	/* display:contents un-nests label+heading+card so each can get its own
	   order -- label/heading stay on top, FAQ list moves above the card.
	   Grid gap is zeroed and replaced with explicit margins per pair, since
	   a uniform grid gap would also force space between label and heading
	   (breaking the sitewide tight label->heading rule). */
	.wv-faq-grid { gap: 0; }
	.wv-faq-grid > div:first-child { display: contents; }
	.wv-faq-grid .wv-label { order: 1; justify-self: start; }
	/* margin-top:16px on the shared .wv-faq-heading (base rule) collapses to 0
	   here on EVERY page that uses this component (the preceding .wv-label is
	   inline-flex, yet the browser still collapses through it in this
	   display:contents/order:1 mobile reflow) -- originally only patched for
	   Sound Therapy Bundle via ID selectors, but the same collapse affects
	   For Life/For Business/Navel Activation too. padding-top never collapses,
	   so it's the reliable fix -- applied to the shared class directly instead
	   of one ID at a time, so it doesn't need to be added per-page again. */
	.wv-faq-heading { order: 1; margin-bottom: 24px; padding-top: 16px; }
	.wv-faq-list { order: 2; }
	.wv-faq-card { order: 3; margin-top: 32px; }
}
@media (max-width: 767.98px) {
	.wv-faq-card-heading { font-size: 18px; line-height: 26px; }
}
@media (min-width: 900px) { .wv-faq-grid { grid-template-columns: 1fr 1fr; } }
.wv-faq-list { display: flex; flex-direction: column; gap: 8px; }
.wv-faq-item { background: var(--wv-color-white); border-radius: var(--wv-radius); }
.wv-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: none; border: none; text-align: left; font-family: var(--wv-font-body); font-weight: normal; font-size: 1rem; line-height: 24px; color: var(--wv-color-dark); cursor: pointer; }
@media (max-width: 767.98px) { .wv-faq-question { padding: 16px; } }
.wv-faq-toggle { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--wv-color-blue); position: relative; }
.wv-faq-toggle::before, .wv-faq-toggle::after { content: ""; position: absolute; background: var(--wv-color-white); border-radius: 2px; top: 50%; left: 50%; transition: transform 0.2s ease; }
.wv-faq-toggle::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.wv-faq-toggle::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); }
.wv-faq-item.is-open .wv-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.wv-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.wv-faq-answer-inner { padding: 0 24px 24px; font-size: 0.95rem; color: rgba(43,42,41,0.85); }

/* Blog listing */
.wv-blog-hero { min-height: 580px; }
@media (max-width: 767.98px) { .wv-blog-hero { min-height: 440px; } }
.wv-blog-hero .wv-hero-scrim { background: linear-gradient(246deg, rgba(28,141,205,0.42) 5.6%, rgba(14,71,103,0.6) 91.6%); }
.wv-blog-hero .wv-hero-heading { font-weight: 400; font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-blog-hero .wv-hero-subtext { margin-top: 16px; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-blog-hero .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-blog-hero .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-blog-hero .wv-hero-subtext { margin-top: 8px; } }
.wv-blog-filters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.wv-blog-pill { display: inline-flex; align-items: center; padding: 12px 16px; border-radius: var(--wv-radius); border: 1px solid var(--wv-color-blue); font-family: var(--wv-font-body); font-size: 1rem; line-height: 1.5; color: var(--wv-color-dark); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.wv-blog-pill.is-active { background: var(--wv-color-blue); border-color: var(--wv-color-blue); color: var(--wv-color-white); }
.wv-blog-grid { display: grid; grid-template-columns: 1fr; column-gap: 16px; row-gap: 24px; }
@media (min-width: 768px) { .wv-blog-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; } }
@media (min-width: 1280px) { .wv-blog-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; } }
@media (max-width: 767.98px) {
	.wv-blog-filters {
		flex-wrap: nowrap; margin-bottom: 32px; overflow-x: auto; margin-inline: -16px; padding-inline: 16px;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.wv-blog-filters::-webkit-scrollbar { display: none; }
	.wv-blog-pill { flex: 0 0 auto; font-size: 14px; line-height: 22px; }
	.wv-blog-grid { row-gap: 20px; }
}
.wv-blog-card {
	display: flex; flex-direction: column; border-radius: var(--wv-radius); overflow: hidden; background: var(--wv-color-white);
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.wv-blog-card.is-visible { opacity: 1; transform: translateY(0); }
.wv-blog-card:nth-child(3n+1) { transition-delay: 0s; }
.wv-blog-card:nth-child(3n+2) { transition-delay: 0.12s; }
.wv-blog-card:nth-child(3n+3) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .wv-blog-card { opacity: 1; transform: none; transition: none; } }
.wv-blog-card-media { display: block; height: 300px; overflow: hidden; }
.wv-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.wv-blog-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; flex: 1; }
.wv-blog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wv-blog-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9999px; background: rgba(28,141,205,0.08); font-family: var(--wv-font-body); font-size: 10px; font-weight: bold; letter-spacing: 2.2px; text-transform: uppercase; color: var(--wv-color-blue); white-space: nowrap; }
.wv-blog-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wv-color-blue); flex: 0 0 auto; }
.wv-blog-datemeta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wv-font-body); font-size: 12px; text-transform: uppercase; color: #3c3c3c; white-space: nowrap; }
.wv-blog-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--wv-color-blue); flex: 0 0 auto; }
.wv-blog-card-title { font-family: var(--wv-font-heading); font-weight: 500; font-size: 1.125rem; line-height: 1.444; color: var(--wv-color-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wv-blog-card-title a { color: inherit; text-decoration: none; }
.wv-blog-card-excerpt { font-family: var(--wv-font-body); font-size: 0.875rem; line-height: 1.571; color: #3c3c3c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.wv-blog-card-footer { border-top: 1px solid rgba(28,141,205,0.1); padding-top: 13px; margin-top: auto; }
.wv-blog-readmore { font-family: var(--wv-font-body); font-size: 10px; font-weight: bold; letter-spacing: 2.2px; text-transform: uppercase; color: var(--wv-color-blue); text-decoration: underline; }
.wv-blog-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
.wv-blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 50%; background: var(--wv-color-blue-tint-bg); color: var(--wv-color-blue); text-decoration: none; font-family: var(--wv-font-body); font-size: 0.9rem; }
.wv-blog-pagination .page-numbers.current { background: var(--wv-color-blue); color: var(--wv-color-white); }
/* Only apply hover effects on devices that truly support hover -- otherwise
   a tap on touch/mobile leaves the card/pill "stuck" showing its hover state. */
@media (hover: hover) {
	.wv-blog-pill:hover { background: var(--wv-color-blue-tint-bg); }
	.wv-blog-pill.is-active:hover { background: var(--wv-color-blue); }
	.wv-blog-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.12); transform: translateY(-4px); }
	.wv-blog-card:hover .wv-blog-card-media img { transform: scale(1.06); }
	.wv-blog-card-title a:hover { color: var(--wv-color-blue); }
}
/* Touch devices can't hover at all -- give the card its elevated shadow
   permanently instead of gating it behind an interaction that never fires. */
@media (hover: none) {
	.wv-blog-card { box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
}
.wv-blog-empty { text-align: center; color: var(--wv-color-dark); padding: 48px 0; }

/* Single blog post */
.wv-single-hero .wv-hero-scrim { background: linear-gradient(131deg, rgba(25,137,204,0.25) 26.5%, rgba(26,138,205,0.8) 98.2%); }
.wv-single-hero .wv-hero-content { max-width: 1056px; }
/* Own height + fluid clamp banner rule (same technique as Contact/Blog listing),
   but sized off this page's own Figma frame (848px), not copied from theirs. */
.wv-single-hero { min-height: 848px; }
@media (max-width: 767.98px) { .wv-single-hero { min-height: 460px; } }
.wv-single-hero .wv-hero-heading { font-weight: 600; font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-single-hero .wv-hero-subtext { font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-single-hero .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-single-hero .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-single-hero .wv-hero-subtext { margin-top: 8px; } }
.wv-single-cta-group { height: 36px; margin-top: 48px; }
@media (max-width: 767.98px) { .wv-hero-content .wv-btn-group { margin-top: 20px; } }
.wv-single-hero .wv-btn.wv-single-cta { background: linear-gradient(52deg, rgb(26,137,204) 3.9%, rgb(181,226,252) 148.9%); color: var(--wv-color-cream); font-size: 1rem; line-height: 1.25; padding: 8px 16px; height: 36px; }
.wv-single-hero .wv-btn-icon.wv-single-cta-icon { background: linear-gradient(89deg, rgb(26,137,204) 1.3%, rgb(163,218,251) 96.5%); width: 44px; height: 36px; }
.wv-single-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
/* Tablet has enough room that the article text was running edge-to-edge at
   the full 1180px container width -- lines way past a comfortable reading
   length. Cap the column, desktop/mobile untouched. */
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-single-container { max-width: 720px; } }
.wv-single-content { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: rgba(43,42,41,0.88); }
.wv-single-content p { margin: 0 0 24px; }
.wv-single-content ul { margin: 0 0 24px; padding-left: 24px; list-style: disc; }
.wv-single-content li { margin-bottom: 8px; }
.wv-single-content h2, .wv-single-content h3 { font-family: var(--wv-font-heading); font-weight: 500; font-size: 22px; line-height: 30px; color: var(--wv-color-dark); margin: 0 0 16px; }
@media (max-width: 767.98px) { .wv-single-content h2, .wv-single-content h3 { font-size: 20px; line-height: 28px; } }
.wv-single-content figure, .wv-single-content img { border-radius: var(--wv-radius); width: 100%; height: auto; display: block; margin: 0 0 24px; }
.wv-single-callout { background: var(--wv-color-blue-tint-bg); border: 2px solid var(--wv-color-blue); border-radius: var(--wv-radius); padding: 26px; margin: 0 0 24px; }
@media (max-width: 767.98px) { .wv-single-callout { padding: 20px; } }
.wv-single-callout p:first-child { font-family: var(--wv-font-heading); font-weight: 600; font-size: 18px; line-height: 26px; margin-bottom: 8px; }
@media (max-width: 767.98px) { .wv-single-callout p:first-child { font-size: 20px; line-height: 28px; } }
.wv-single-callout p:last-child { margin-bottom: 0; }

.wv-single-tags-wrap { margin-top: 40px; }
@media (max-width: 767.98px) { .wv-single-tags-wrap { margin-top: 28px; } }
.wv-single-divider { height: 2px; background: rgba(61,46,30,0.2); margin-bottom: 24px; }
.wv-single-tags-label { font-size: 16px; line-height: 24px; color: rgba(43,42,41,0.88); margin: 0 0 16px; }
.wv-single-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-single-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--wv-radius); background: var(--wv-color-blue-tint-bg); border: 1px solid var(--wv-color-blue); color: var(--wv-color-blue); font-family: var(--wv-font-body); font-size: 0.75rem; line-height: 1.667; }

/* Legal pages (Privacy Policy, Terms & Conditions, Disclaimer) */
.wv-legal-hero { position: relative; overflow: hidden; padding: 140px 0 40px; color: var(--wv-color-white); }
.wv-legal-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.wv-legal-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,20,35,0.55) 0%, rgba(6,20,35,0.75) 100%); z-index: -1; }
.wv-legal-hero .wv-label { background: rgba(255,255,255,0.15); color: var(--wv-color-white); backdrop-filter: blur(4px); }
.wv-legal-heading { font-weight: 500; letter-spacing: -1.04px; margin-top: 16px; font-size: clamp(1.5rem, 3.4375vw, 2.75rem); line-height: 1.15; color: var(--wv-color-white); }
/* Fade-in-up entrance, same mechanism as .wv-hero (synced to preloader hide). */
.wv-legal-hero .wv-label, .wv-legal-heading {
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-legal-hero.wv-hero-in .wv-label, .wv-legal-hero.wv-hero-in .wv-legal-heading { opacity: 1; transform: translateY(0); }
.wv-legal-hero .wv-label { transition-delay: 0.1s; }
.wv-legal-heading { transition-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) {
	.wv-legal-hero .wv-label, .wv-legal-heading { opacity: 1; transform: none; transition: none; }
}
.wv-legal-body { padding-block: 40px; }
.wv-legal-content { max-width: 800px; margin-inline: auto; }
.wv-legal-content h2 { font-size: 20px; line-height: 1.3; margin-top: 40px; }
.wv-legal-content h2:first-child { margin-top: 0; }
.wv-legal-content ul { list-style: disc; }
.wv-legal-content a { color: var(--wv-color-blue); text-decoration: underline; }
@media (min-width: 768px) {
	.wv-legal-hero { padding: 150px 0 56px; }
	.wv-legal-body { padding-block: 56px; }
	.wv-legal-content h2 { font-size: 22px; }
}
@media (min-width: 1024px) {
	.wv-legal-hero { padding: 200px 0 64px; }
	.wv-legal-body { padding-block: 72px; }
}

.wv-author-bio { display: flex; gap: 20px; align-items: flex-start; background: var(--wv-color-blue-tint-bg); border: 1px solid var(--wv-color-blue); border-radius: var(--wv-radius); padding: 25px; margin-top: 40px; }
.wv-author-bio-avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid var(--wv-color-dark); background: rgba(255,255,255,0.5); }
.wv-author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wv-author-bio-body { display: flex; flex-direction: column; gap: 16px; }
.wv-author-bio-head { display: flex; flex-direction: column; gap: 8px; }
.wv-author-bio-name { font-family: var(--wv-font-heading); font-weight: 500; font-size: 22px; line-height: 30px; color: var(--wv-color-dark); margin: 0; }
.wv-author-bio-title { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: rgba(43,42,41,0.88); margin: 0; }
.wv-author-bio-text { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: rgba(43,42,41,0.88); margin: 0; }
@media (max-width: 767.98px) {
	.wv-author-bio { flex-direction: column; align-items: center; padding: 20px; margin-top: 32px; }
	.wv-author-bio-head { align-items: center; text-align: center; }
	.wv-author-bio-name { font-size: 20px; line-height: 28px; }
}

/* Contact page */
.wv-contact-hero { min-height: 580px; }
@media (min-width: 1024px) { .wv-contact-hero { min-height: 580px; } }
@media (max-width: 767.98px) { .wv-contact-hero { min-height: 440px; } }
.wv-contact-hero .wv-hero-scrim { background: linear-gradient(61deg, rgba(28,141,205,0.42) 34.3%, rgba(14,71,103,0.6) 88.8%); }
/* Fluid instead of tiered: scales continuously with the viewport (min = mobile
   floor, max = the exact Figma desktop value, reached right at the 1280px
   desktop breakpoint and held flat beyond it -- no snap/jump at any width). */
.wv-contact-hero .wv-hero-heading { font-weight: 400; font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-contact-hero .wv-hero-subtext { margin-top: 16px; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-contact-hero .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-contact-hero .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-contact-hero .wv-hero-subtext { margin-top: 8px; } }

/* Fluid gap + a single alignment value across the whole range -- no
   per-breakpoint snap as the viewport is dragged narrower/wider. */
.wv-contact-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 64px); }
.wv-contact-form-col { flex: 0 1 498px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wv-contact-details-col { flex: 0 1 420px; }
/* Below the 900px side-by-side threshold the grid wraps to a single stacked
   column -- but a wide-enough container (560-899px) is roomier than the
   fixed 498/420px basis, so with flex-shrink alone never kicking in, the
   column just stops short and leaves a dead gap instead of filling the row. */
@media (max-width: 899.98px) {
	.wv-contact-form-col, .wv-contact-details-col { flex: 1 1 100%; }
}
.wv-contact-heading {
	font-family: var(--wv-font-heading); font-weight: 600; color: var(--wv-color-dark); margin: 0; width: 100%;
	font-size: clamp(1.5rem, 3.44vw, 2.75rem); line-height: clamp(2rem, 3.78vw, 3.025rem);
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-contact-heading.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .wv-contact-heading { opacity: 1; transform: none; transition: none; } }
.wv-contact-details-col .wv-contact-heading { margin-bottom: 24px; }
/* Tablet (900-1279px): tuned side-by-side layout so form + details sit next to
   each other instead of falling back to a stacked single column on iPads. */
@media (min-width: 900px) and (max-width: 1279.98px) {
	.wv-contact-form-col { flex: 1 1 0; }
	.wv-contact-details-col { flex: 1 1 0; }
	.wv-contact-field label { font-size: 13px; }
	.wv-contact-field input.wpcf7-form-control, .wv-contact-field select.wpcf7-form-control, .wv-contact-field textarea.wpcf7-form-control { padding: 11px 14px; font-size: 15px; }
	.wv-contact-detail-value { font-size: 15px; }
}

.wv-contact-form { width: 100%; }
.wv-contact-form form { display: flex; flex-direction: column; gap: 16px; }
.wv-contact-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wv-contact-field label { font-family: var(--wv-font-body); font-size: 14px; line-height: 22px; text-transform: capitalize; color: var(--wv-color-dark); }
.wv-contact-field .wpcf7-form-control-wrap { width: 100%; display: block; margin-top: 4px; }
.wv-contact-field input.wpcf7-form-control, .wv-contact-field select.wpcf7-form-control, .wv-contact-field textarea.wpcf7-form-control {
	width: 100%; background: rgba(255,255,255,0.7); border: 1px solid rgba(43,42,41,0.88); border-radius: var(--wv-radius);
	padding: 13px 17px; font-family: var(--wv-font-body); font-size: 16px; line-height: 1.5; color: rgba(43,42,41,0.88);
}
.wv-contact-field input.wpcf7-form-control::placeholder, .wv-contact-field textarea.wpcf7-form-control::placeholder { color: rgba(43,42,41,0.55); }
.wv-contact-field select.wpcf7-form-control { appearance: none; -webkit-appearance: none; color: rgba(43,42,41,0.55); padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232b2a29' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 17px center; background-size: 12px 8px; }
.wv-contact-field textarea.wpcf7-form-control { height: 110px; resize: vertical; }
.wv-contact-field .wpcf7-not-valid-tip { font-size: 0.8rem; color: #c83c3c; margin-top: 4px; }
.wv-contact-field input.wpcf7-form-control:focus, .wv-contact-field select.wpcf7-form-control:focus, .wv-contact-field textarea.wpcf7-form-control:focus {
	outline: none; border-color: var(--wv-color-blue); box-shadow: 0 0 0 3px rgba(28,141,205,0.15);
}

.wv-contact-submit { position: relative; width: 100%; }
.wv-contact-submit input[type="submit"] {
	width: 100%; height: 44px; padding: 12px 60px 12px 16px; background: var(--wv-gradient-cta); color: var(--wv-color-cream);
	border: none; border-radius: var(--wv-radius-sm); font-family: var(--wv-font-body); font-size: 16px; cursor: pointer;
	transition: filter 0.2s ease;
}
.wv-contact-submit input[type="submit"]:hover { filter: brightness(1.08); }
.wv-contact-submit input[type="submit"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(28,141,205,0.3); }
.wv-contact-submit::after {
	content: ""; position: absolute; right: 0; top: 0; width: 44px; height: 44px; pointer-events: none; border-left: 1px solid rgba(255,255,255,0.3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M1.147 12.95H22.9165' stroke='%23faf8f4' stroke-width='1.8' stroke-miterlimit='10'/%3E%3Cpath d='M14.184 3.252C14.184 8.172 18.4632 12.153 23.7524 12.153' stroke='%23faf8f4' stroke-width='1.8' stroke-miterlimit='10'/%3E%3Cpath d='M23.8144 13.25C18.52532 13.25 14.246 17.23056 14.246 22.15056' stroke='%23faf8f4' stroke-width='1.8' stroke-miterlimit='10'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
}
.wv-contact-submit .wpcf7-spinner { position: absolute; left: 50%; bottom: -28px; top: auto; transform: translateX(-50%); margin: 0; }
.wpcf7-response-output { width: 100%; margin: 0 0 0 !important; padding: 12px 16px !important; border-radius: var(--wv-radius-sm); font-family: var(--wv-font-body); font-size: 0.9rem; }
.wpcf7 form.sent .wpcf7-response-output { background: rgba(28,141,205,0.1); color: var(--wv-color-blue); border-color: transparent !important; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
	background: rgba(200,60,60,0.1); color: #c83c3c; border-color: transparent !important;
}
.wv-contact-note { font-family: var(--wv-font-body); font-size: 14px; line-height: 1.571; color: var(--wv-color-dark); text-align: center; margin: 16px 0 0; }

.wv-contact-details-list { display: flex; flex-direction: column; gap: 24px; }
.wv-contact-detail { display: flex; gap: 14px; align-items: flex-start; }
.wv-contact-detail-icon { font-size: 20px; line-height: 1; padding-top: 2px; }
.wv-contact-detail-label { font-family: var(--wv-font-body); font-size: 14px; line-height: 1.571; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(43,42,41,0.65); margin: 0 0 4px; }
.wv-contact-detail-value { font-family: var(--wv-font-body); font-size: 16px; line-height: 1.5; color: rgba(43,42,41,0.88); margin: 0; }
.wv-contact-detail-value span { font-size: 14px; }
.wv-contact-detail-value a { color: inherit; text-decoration: none; }
.wv-contact-detail-value a:hover { color: var(--wv-color-blue); text-decoration: underline; }

.wv-contact-divider { height: 1px; background: rgba(61,46,30,0.16); margin: 40px 0; }
@media (max-width: 767.98px) { .wv-contact-divider { margin: 24px 0; } }
.wv-contact-map { border-radius: var(--wv-radius); overflow: hidden; height: 480px; }
.wv-contact-map iframe { width: 100% !important; height: 100% !important; border: 0; display: block; }
@media (min-width: 1024px) { .wv-contact-map { height: 579px; } }

/* Sound Therapy Bundle */
.wv-sb-hero { padding-block: 0; align-items: flex-start; overflow: hidden; }
.wv-sb-hero .wv-hero-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, #2a2525 98.9%); }
.wv-hero.wv-sb-hero .wv-hero-content.wv-sb-hero-content { max-width: none; width: 100%; margin-left: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; color: var(--wv-color-white); }
.wv-sb-hero-text { flex: 1 1 420px; min-width: 0; max-width: 780px; }
.wv-sb-hero-heading { font-weight: 400; font-size: clamp(1.75rem, 4.2vw, 3.25rem); line-height: clamp(2.25rem, 5.4vw, 3.75rem); text-transform: none; letter-spacing: normal; color: inherit; }
.wv-sb-hero-text .wv-hero-subtext { margin-top: 22px; color: inherit; }
@media (max-width: 767.98px) {
	.wv-sb-hero-text .wv-hero-subtext { margin-top: 8px; font-size: 16px; line-height: 24px; }
}
.wv-sb-hero-media { position: relative; }
.wv-sb-hero .wv-hero-bg { object-position: 100% 0%; }
.wv-sb-hero-phone { width: 100%; height: 100%; }
.wv-sb-hero-phone img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3)); }
.wv-sb-hero-badges { display: flex; flex-direction: column; gap: 14px; }
/* Desktop (>=1024px): fixed-height Figma layout -- header floats absolutely
   over the hero here, so the content needs its own top offset to clear it;
   phone+badges pin to an exact 393x572 box with badges absolutely placed
   beside it, matching the Figma frame's exact coordinates. */
/* min-width:1025px (not 1024px) -- iPad Pro's logical viewport is exactly
   1024px wide, which was landing it in this desktop tier (nowrap layout,
   109px/121px top offsets meant to clear the floating desktop header) and
   showing a huge blank gap where the now-hidden phone used to sit. */
@media (min-width: 1025px) {
	.wv-sb-hero { min-height: 580px; height: 580px; }
	.wv-hero.wv-sb-hero .wv-hero-content.wv-sb-hero-content { flex-wrap: nowrap; padding-top: 109px; }
	.wv-sb-hero-text { margin-top: 121px; }
	.wv-sb-hero-media { flex: 0 0 393px; width: 393px; height: 572px; margin-top: -18px; }
	.wv-sb-hero-badges { position: absolute; left: -113px; top: 344px; }
}
/* Below 1025px: header is back in normal flow (not overlaying), so the hero
   needs none of the desktop top-offset padding. The phone mockup is dropped
   entirely here (per explicit request) -- it's a nice-to-have visual on the
   wide desktop layout, but has no room to sit next to the badges without
   dominating a mobile/tablet-width banner. Badges go side by side instead
   of stacked, keeping the banner compact. */
@media (max-width: 1024px) {
	/* Text and media were flex siblings on the same row -- at tablet widths
	   there was just enough room for the badges to sit beside the heading
	   instead of wrapping, overlapping the text on top of the photo. Column
	   stacking keeps heading -> subtext -> badges in one clean vertical order. */
	.wv-hero.wv-sb-hero .wv-hero-content.wv-sb-hero-content { flex-direction: column; }
	/* flex:1 1 420px sets flex-basis on the item's main axis -- which is now
	   HEIGHT since the container switched to flex-direction:column, forcing
	   an unwanted 420px-tall box instead of sizing to its actual content. */
	.wv-sb-hero-text { flex: none; width: 100%; margin-top: 40px; }
	.wv-sb-hero-phone { display: none; }
	.wv-sb-hero-badges { flex-direction: row; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wv-sb-hero-text .wv-hero-subtext { margin-top: 16px; }
}
@media (max-width: 767.98px) {
	.wv-sb-hero { min-height: 440px; align-items: center; }
	.wv-hero.wv-sb-hero .wv-hero-content.wv-sb-hero-content { padding: 0; gap: 20px; }
	.wv-sb-hero-text { margin-top: 0; }
}
.wv-sb-badge { display: inline-flex; transition: transform 0.2s ease; }
.wv-sb-badge:hover { transform: translateY(-2px); }
/* Section headings (not the hero banner) go medium-weight on mobile/tablet.
   !important needed: each heading's own base rule (same 1-class specificity)
   sits later in the file and would otherwise win by source order. */
@media (max-width: 1279.98px) {
	.wv-sb-statement-text,
	.wv-sb-features-heading,
	.wv-sb-benefits-heading,
	.wv-sb-tracks-heading,
	.wv-sb-steps-heading,
	.wv-sb-cta-heading,
	.wv-sbp-features-heading,
	.wv-navel-reveal-line1,
	.wv-navel-reveal-line2,
	.wv-navel-how-heading,
	.wv-navel-pain-heading,
	.wv-navel-ctaband-heading {
		font-weight: 500 !important;
	}
}

/* Sound Therapy Bundle — Physical */
.wv-sbp-hero.wv-sb-hero .wv-hero-bg { object-position: 50% 0%; }
/* Height matches the Sound Therapy Bundle (digital) page's hero exactly --
   inherited for free from the shared .wv-hero/.wv-sb-hero rules (848px at
   exactly 1024px, 600px tablet, 440px mobile) since nothing here overrides
   the height itself. This page's "THE ULTIMATE 13 TRACK..." text is baked
   into the photo, so object-fit:cover crops it at taller/narrower ratios --
   centered object-position (50% 0%) was cropping evenly off both sides,
   slicing the text on the right. Shifted right (anchored to the right
   edge) below desktop so the crop eats into the model's photo on the left
   instead of the text on the right -- height stays exactly as it was. */
@media (max-width: 1024px) {
	.wv-sbp-hero.wv-sb-hero .wv-hero-bg { object-position: 100% 0%; }
}
@media (max-width: 767.98px) {
	.wv-sbp-hero.wv-sb-hero .wv-hero-bg { object-position: 88% 0%; }
}
.wv-sbp-features { background: #f8f8f8; }
.wv-sbp-features-row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.wv-sbp-features-text { flex: 1 1 420px; max-width: 542px; display: flex; flex-direction: column; gap: 24px; }
.wv-sbp-features-text .wv-label { align-self: flex-start; }
@media (max-width: 1024px) { .wv-sbp-features-text .wv-label { margin-bottom: 0; } }
.wv-sbp-features-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.125vw, 2.5rem); line-height: 1.2; color: var(--wv-color-dark); margin: 0; }
.wv-sbp-features-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wv-sbp-features-list li { display: flex; gap: 12px; align-items: flex-start; }
.wv-sbp-features-list .wv-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--wv-color-blue); margin-top: 1px; }
.wv-sbp-features-list .wv-icon svg { width: 24px; height: 24px; }
.wv-sbp-features-list p { font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: rgba(43,42,41,0.88); margin: 0; }
@media (max-width: 1024px) { .wv-sbp-features-list p { font-size: 16px; line-height: 24px; } }
.wv-sbp-features-list strong { font-weight: 700; }
.wv-sbp-features-media { flex: 1 1 380px; max-width: 600px; height: 540px; border-radius: var(--wv-radius); overflow: hidden; transition: box-shadow 0.3s ease; }
.wv-sbp-features-media:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.18); }
.wv-sbp-features-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.wv-sbp-features-media:hover img { transform: scale(1.06); }
@media (max-width: 1024px) { .wv-sbp-features-media { height: auto; aspect-ratio: 600 / 540; } }
@media (max-width: 767.98px) {
	.wv-sbp-features-media { order: 1; }
	.wv-sbp-features-text { order: 2; }
	.wv-sbp-features-text .wv-btn-group { display: flex; width: 100%; }
	.wv-sbp-features-text .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
	.wv-sbp-features-row { gap: 28px; }
	.wv-sbp-features-text { flex: 1 1 auto; width: 100%; gap: 0; }
	.wv-sbp-features-text .wv-sbp-features-heading { margin-top: 16px; }
	.wv-sbp-features-list { margin-top: 24px; }
	.wv-sbp-features-text .wv-btn-group { margin-top: 24px; }
}
.wv-sb-badge img { width: 150px; height: auto; display: block; }
@media (max-width: 767.98px) { .wv-sb-badge img { width: 120px; } }

.wv-sb-statement { background: var(--wv-color-white); }
.wv-sb-statement-text { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.0769; text-align: center; color: var(--wv-color-dark); margin: 0; }
@media (max-width: 767.98px) { .wv-sb-statement-text { line-height: calc(1em + 8px); } }

/* Sound Bundle — Key Features */
.wv-sb-features { position: relative; overflow: hidden; background: linear-gradient(199deg, rgba(28,141,205,0.22) 19.25%, rgb(41,162,230) 74.21%); }
/* Same fix as the homepage App Download section's identical gradient: below
   900px (where the row below now actually stacks) the tall single column
   stretches this 199deg gradient's pale zone across the whole visible top. */
@media (max-width: 899.98px) {
	.wv-sb-features { background: linear-gradient(180deg, rgba(28,141,205,0.5) 0%, rgb(41,162,230) 35%); }
}
.wv-sb-features-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.05; z-index: 0; }
/* Matches the homepage App Download section's own grid (.wv-app-grid): one
   column below 900px, text-beside-media from 900px up -- was flex-wrap
   before, which kept stacking all the way through tablet/iPad widths since
   the fixed-width phones never left enough room on the same row. */
.wv-sb-features-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .wv-sb-features-row { grid-template-columns: 1fr 1fr; } }
/* max-width (not width+max-width:100%) -- grid items default to
   min-width:auto same as flex items, and width:542px was winning outright
   over max-width:100% at some widths, overflowing the viewport on mobile. */
.wv-sb-features-text { max-width: 542px; width: 100%; min-width: 0; }
.wv-sb-features-text .wv-label { margin-bottom: 0; }
/* padding-top (not margin-top) -- the margin-top here was collapsing away to
   0 (verified: the label before it is inline-flex, yet Chrome still collapses
   this h2's margin through to the section's own edge). Padding never
   collapses, so it renders exactly as declared regardless. */
.wv-sb-features-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.125vw, 2.5rem); line-height: 1.2; color: var(--wv-color-white); margin: 0; padding-top: 16px; }
.wv-sb-features-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 767.98px) { .wv-sb-features-list { margin-top: 24px; } }
.wv-sb-features-list li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: rgba(255,255,255,0.88); }
@media (max-width: 767.98px) { .wv-sb-features-list li { font-size: 16px; line-height: 24px; } }
.wv-sb-features-list .wv-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--wv-color-white); }
.wv-sb-features-list .wv-icon svg { width: 24px; height: 24px; }
.wv-sb-features-btn { margin-top: 24px; }
@media (max-width: 767.98px) {
	.wv-sb-features-btn { display: flex; width: 100%; }
	.wv-sb-features-btn .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}
.wv-sb-features-btn .wv-btn { background: var(--wv-color-white); color: var(--wv-color-blue); height: 44px; border: none; }
.wv-sb-features-btn .wv-btn:hover { background: var(--wv-color-cream); }
.wv-sb-features-btn .wv-btn-icon { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-sb-features-btn .wv-btn-icon:hover { background: var(--wv-color-cream); }
.wv-sb-features-media { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; width: 100%; }
.wv-sb-features-phones { position: relative; width: 575px; max-width: 100%; height: auto; aspect-ratio: 575 / 514; }
.wv-sb-features-phone { position: absolute; top: 48%; width: 353px; max-width: 62%; }
.wv-sb-features-phone img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.25)); }
.wv-sb-features-phone--back { left: 32%; z-index: 1; transform: translate(-50%, -50%) rotate(-15deg); }
.wv-sb-features-phone--front { left: 62%; z-index: 2; transform: translate(-50%, -50%) rotate(15deg); }
.wv-sb-features-badges { position: static; flex-direction: row; gap: 14px; }
/* Grid cell width caps the phones box naturally now (min-width:0 on the
   flex .wv-sb-features-media still needed so it can shrink inside its
   grid cell); aspect-ratio keeps the box proportional at every width
   instead of the old fixed 514px height leaving dead space once narrow. */
@media (max-width: 899.98px) { .wv-sb-features-phones { max-width: 400px; margin-inline: auto; } }
@media (max-width: 640px) { .wv-sb-features-phone { width: 260px; } }

/* Sound Bundle — Benefits */
.wv-sb-benefits-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 40px; }
@media (max-width: 767.98px) { .wv-sb-benefits-head { margin-top: 0; margin-bottom: 24px; } }
.wv-sb-benefits-head .wv-label { margin-bottom: 0; }
.wv-sb-benefits-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.077; text-transform: capitalize; color: var(--wv-color-dark); margin: 0; }
.wv-sb-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
/* Plain flex-wrap left an uneven 3+1 layout at tablet widths (3 cards fit
   the row, the 4th wraps alone and stretches full-width) -- grid with an
   explicit column count per tier keeps every row balanced. */
@media (max-width: 1023px) { .wv-sb-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .wv-sb-benefits-grid { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .wv-sb-benefits-grid { gap: 16px; } }
.wv-sb-benefit-card { display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; background: var(--wv-color-blue-tint-bg); border: 1px solid #379cd6; border-radius: var(--wv-radius); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.wv-sb-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(28,141,205,0.2); border-color: var(--wv-color-blue); }
.wv-sb-benefit-icon { width: 80px; height: 80px; border-radius: var(--wv-radius); overflow: hidden; }
.wv-sb-benefit-icon img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.wv-sb-benefit-card:hover .wv-sb-benefit-icon img { transform: scale(1.1); }
.wv-sb-benefit-title { font-family: var(--wv-font-heading); font-weight: 400; font-size: 20px; line-height: 28px; color: var(--wv-color-dark); margin: 0; }
.wv-sb-benefit-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: #555; margin: 0; }

/* Sound Bundle — Tracks Slider */
.wv-sb-tracks { background: #f8f8f8; }
.wv-sb-tracks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.wv-sb-tracks-headline { display: flex; flex-direction: column; gap: 24px; flex: 1 1 480px; }
@media (max-width: 767.98px) { .wv-sb-tracks-headline { gap: 16px; } }
.wv-sb-tracks-headline .wv-label { margin-bottom: 0; align-self: flex-start; }
.wv-sb-tracks-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.077; letter-spacing: -2px; text-transform: capitalize; color: var(--wv-color-dark); margin: 0; }
.wv-sb-tracks-subtext { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-dark); margin: 0; }
.wv-sb-tracks-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.wv-sb-tracks-track::-webkit-scrollbar { display: none; height: 0; }
/* Same arrows-below-track reorder as the testimonial sliders -- prev/next
   sit centered under the cards on mobile instead of up top by the heading. */
@media (max-width: 767.98px) {
	.wv-sb-tracks .wv-container[data-wv-slider] { display: flex; flex-direction: column; }
	.wv-sb-tracks-head { display: contents; }
	/* flex:1 1 480px sets flex-basis on the item's main axis -- now HEIGHT
	   since the container became flex-direction:column, forcing an unwanted
	   480px-tall box and a big blank gap before the track. */
	.wv-sb-tracks-headline { order: 1; flex: none; }
	.wv-sb-tracks-track { order: 2; margin-top: 24px; }
	.wv-sb-tracks .wv-slider-nav { order: 3; margin-top: 20px; justify-content: center; }
}
/* Same edge-to-viewport bleed as the testimonial sliders -- without it the
   track is hard-clipped at the 1180px container edge (last visible card
   ends flush/cut instead of peeking), matching Figma's wider 1310px track. */
@media (min-width: 1024px) {
	.wv-sb-tracks .wv-container[data-wv-slider] { overflow: visible; }
	.wv-sb-tracks-track { margin-right: calc(50% - 50vw); }
}
.wv-sb-track-card { scroll-snap-align: start; flex: 0 0 383px; border-radius: var(--wv-radius); overflow: hidden; background: var(--wv-color-white); filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.08)); transition: transform 0.3s ease; }
/* 1.2 cards visible on mobile (slick-slider convention) -- next card peeks
   in at the edge as a hint there's more to scroll, instead of the fixed
   383px basis sitting flush with the viewport (no peek, no scroll hint). */
@media (max-width: 767.98px) { .wv-sb-track-card { flex-basis: 83.33%; } }
.wv-sb-track-card:hover { transform: translateY(-6px); }
.wv-sb-track-media { height: 448px; overflow: hidden; }
.wv-sb-track-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-sb-track-card:hover .wv-sb-track-media img { transform: scale(1.06); }
.wv-sb-track-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.wv-sb-track-title { font-family: var(--wv-font-heading); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wv-color-dark); margin: 0; }
@media (max-width: 767.98px) { .wv-sb-track-title { font-size: 20px; line-height: 28px; } }
.wv-sb-track-desc { font-family: var(--wv-font-body); font-size: 14px; line-height: 22px; color: var(--wv-color-dark); margin: 0; }

/* Sound Bundle — How It Works (3 Steps) */
.wv-sb-steps { background: var(--wv-color-cream); padding-bottom: calc(var(--wv-space-section) + 40px); }
@media (max-width: 767.98px) { .wv-sb-steps { padding-bottom: var(--wv-space-section); } }
.wv-sb-steps-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
@media (max-width: 767.98px) { .wv-sb-steps-head { gap: 12px; margin-top: 0; margin-bottom: 24px; } }
.wv-sb-steps-head .wv-label { margin-bottom: 0; }
.wv-sb-steps-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.077; letter-spacing: -2px; color: var(--wv-color-dark); margin: 0; }
.wv-sb-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* flex-wrap left an uneven 2+1 layout once cards stopped fitting 3-per-row
   (same issue as the benefits grid) -- grid keeps every row balanced. */
@media (max-width: 639.98px) { .wv-sb-steps-grid { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .wv-sb-steps-grid { gap: 24px; } }
.wv-sb-step-card { display: flex; flex-direction: column; gap: 24px; transition: transform 0.3s ease; }
@media (max-width: 767.98px) { .wv-sb-step-card { gap: 0; } }
@media (min-width: 768px) and (max-width: 1024px) { .wv-sb-step-card { gap: 16px; } }
.wv-sb-step-card:hover { transform: translateY(-6px); }
.wv-sb-step-media { position: relative; aspect-ratio: 383 / 273; border-radius: var(--wv-radius); overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.08); transition: box-shadow 0.3s ease; }
.wv-sb-step-card:hover .wv-sb-step-media { box-shadow: 0 12px 24px rgba(0,0,0,0.16); }
.wv-sb-step-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(25,137,204,0.07), rgba(26,138,204,0.2)); transition: opacity 0.3s ease; }
.wv-sb-step-card:hover .wv-sb-step-media::after { opacity: 0.6; }
.wv-sb-step-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-sb-step-card:hover .wv-sb-step-media img { transform: scale(1.08); }
.wv-sb-step-title { font-family: var(--wv-font-heading); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--wv-color-dark); margin: 0; }
@media (max-width: 767.98px) { .wv-sb-step-title { font-size: 20px; line-height: 28px; margin-top: 12px; } }
.wv-sb-step-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: rgba(43,42,41,0.88); margin: 0; }
@media (max-width: 767.98px) { .wv-sb-step-desc { margin-top: 8px; } }

/* Sound Bundle — Final CTA */
.wv-sb-cta { position: relative; overflow: visible; padding-block: 48px; background: linear-gradient(189deg, rgba(28,141,205,0.55) 19.25%, rgb(41,162,230) 74.21%); }
/* Sound Therapy Bundle (Physical) only -- .wv-sb-cta is shared with the
   digital bundle page, which must keep its normal bottom padding. */
body.page-template-page-sound-bundle-physical-php .wv-sb-cta { padding-bottom: 0; }
.wv-sb-cta-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.05; z-index: 0; pointer-events: none; }
.wv-sb-cta-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; }
.wv-sb-cta-phones { position: absolute; left: 0; top: -148px; width: 465px; height: 470px; pointer-events: none; z-index: 0; }
.wv-sb-cta-phone { position: absolute; top: 0; width: 300px; height: 450px; }
.wv-sb-cta-phone img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2)); }
.wv-sb-cta-phone--b { left: 0; z-index: 1; }
.wv-sb-cta-phone--a { left: 165px; z-index: 2; }
.wv-sb-cta-content { position: relative; z-index: 1; width: 570px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; color: var(--wv-color-white); }
.wv-sb-cta-textblock { display: flex; flex-direction: column; gap: 16px; }
.wv-sb-cta-heading { font-family: var(--wv-font-heading); font-weight: 400; font-size: clamp(1.5rem, 3.125vw, 2.5rem); line-height: 1.4; text-transform: capitalize; margin: 0; }
.wv-sb-cta-text { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; margin: 0; }
.wv-sb-cta-trust { display: flex; flex-wrap: wrap; gap: 24px; }
.wv-sb-cta-trust span { font-family: var(--wv-font-body); font-style: italic; font-size: 12px; line-height: 22px; text-align: center; white-space: nowrap; }
.wv-sb-cta-actions .wv-btn { background: var(--wv-color-white); color: var(--wv-color-blue); height: 44px; border: none; }
.wv-sb-cta-actions .wv-btn:hover { background: var(--wv-color-cream); }
.wv-sb-cta-actions .wv-btn-icon { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-sb-cta-actions .wv-btn-icon:hover { background: var(--wv-color-cream); }
/* max-width:1024px (not 1023px) -- iPad Pro's logical viewport is exactly
   1024px wide, which was landing it in the desktop tier below (absolute
   positioning, top:-148px) and overlapping the phones onto the heading. */
@media (max-width: 1024px) {
	.wv-sb-cta-row { flex-direction: column-reverse; align-items: flex-start; gap: 24px; }
	/* Stays position:relative (not static) -- the individual .wv-sb-cta-phone
	   elements are position:absolute and need this box as their containing
	   block, otherwise they escape to whatever ancestor IS positioned and
	   render on top of the text instead of inside their own 270x270 box.
	   top must be reset too: the desktop rule's top:-148px still shifts a
	   position:relative box by that offset, which was pulling the whole
	   phones block up over the text/button above it. */
	.wv-sb-cta-phones { position: relative; top: 0; width: 100%; max-width: 270px; height: 270px; margin: 0 auto; }
	.wv-sb-cta-phone { width: 175px; height: 262px; top: 0; }
	.wv-sb-cta-phone--a { left: 95px; }
	.wv-sb-cta-content { width: 100%; }
	.wv-sb-cta-trust span { white-space: normal; }
}
@media (max-width: 767.98px) {
	.wv-sb-cta-trust span { font-size: 14px; line-height: 22px; }
	.wv-sb-cta-trust { gap: 16px; }
	.wv-sb-cta-row { gap: 32px; }
}
@media (max-width: 767.98px) {
	.wv-sb-cta-actions { display: flex; width: 100%; }
	.wv-sb-cta-actions .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}

/* Sound Therapy Bundle — Physical Final CTA image */
.wv-sbp-cta-image { position: absolute; left: 0; top: -50px; width: 715px; max-width: 50%; height: 380px; pointer-events: none; z-index: 0; }
.wv-sbp-cta-image img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; display: block; }
@media (max-width: 767.98px) {
	.wv-sbp-cta-image { position: static; width: 100%; max-width: 100%; height: auto; aspect-ratio: 715 / 380; margin-bottom: 0; }
	/* object-fit:contain (desktop's value) doesn't fill the box when the
	   photo's own ratio doesn't exactly match 715:380 -- leaves a blue gap
	   at the bottom where the section's own background shows through
	   instead of the photo. cover always fills the box completely. */
	.wv-sbp-cta-image img { object-fit: cover; object-position: center; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.wv-sbp-cta-image { display: none; }
}

/* Store */
.wv-hero--store { align-items: center; min-height: 580px; }
@media (max-width: 767.98px) { .wv-hero--store { min-height: 440px; } }
.wv-hero--store .wv-hero-scrim { background: linear-gradient(240deg, rgba(28,141,205,0.35) 27.869%, rgb(14,71,103) 99.924%); }
.wv-hero--store .wv-hero-content { max-width: 740px; padding: 0; }
@media (min-width: 1280px) { .wv-hero--store .wv-hero-heading { white-space: nowrap; } }
.wv-hero--store .wv-hero-heading { font-weight: 400; font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
.wv-hero--store .wv-hero-subtext { font-weight: 400; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-hero--store .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--store .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--store .wv-hero-subtext { margin-top: 8px; } }

.wv-store { background: var(--wv-color-off-white); }
.wv-store-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; margin-bottom: 40px; border-bottom: 1px solid rgba(43,42,41,0.25); }
.wv-store-filters { display: flex; flex-wrap: wrap; gap: 16px; }
.wv-store-filter { display: inline-flex; align-items: center; padding: 12px 16px; border-radius: var(--wv-radius); border: 1px solid var(--wv-color-blue); font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-dark); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; }
.wv-store-filter.is-active { background: var(--wv-color-blue); border-color: var(--wv-color-blue); color: var(--wv-color-white); }
.wv-store-sort select { appearance: none; border: 1px solid var(--wv-color-blue); border-radius: var(--wv-radius-sm); padding: 12px 40px 12px 16px; font-family: var(--wv-font-body); font-size: 16px; color: var(--wv-color-blue); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c8dcd' stroke-width='1.5'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; cursor: pointer; }
/* Mobile: collapse the filter pill row behind a Filter icon toggle instead
   of letting 6+ pills wrap into a messy multi-row block above the fold. */
.wv-store-filter-toggle { display: none; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--wv-radius); border: 1px solid var(--wv-color-blue); background: none; font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-blue); cursor: pointer; }
.wv-store-filter-toggle svg { width: 18px; height: 18px; }
@media (max-width: 767.98px) {
	.wv-store-toolbar { margin-bottom: 32px; }
	.wv-store-filter-toggle { display: inline-flex; }
	.wv-store-filters {
		display: none; flex-basis: 100%; order: 3; margin-top: 4px;
		flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px;
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.wv-store-filters.is-open { display: flex; }
	.wv-store-filters::-webkit-scrollbar { display: none; }
	.wv-store-filter { flex: 0 0 auto; font-size: 14px; line-height: 22px; }
}

.wv-store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wv-store-card {
	display: flex; flex-direction: column; border-radius: var(--wv-radius); overflow: hidden; background: var(--wv-color-white); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.wv-store-card.is-visible { opacity: 1; transform: translateY(0); }
.wv-store-card:nth-child(3n+1) { transition-delay: 0s; }
.wv-store-card:nth-child(3n+2) { transition-delay: 0.12s; }
.wv-store-card:nth-child(3n+3) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .wv-store-card { opacity: 1; transform: none; transition: none; } }
.wv-store-card-media { height: 300px; background: var(--wv-color-off-white); }
.wv-store-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-store-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.wv-store-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wv-store-card-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--wv-color-blue-tint-bg); border-radius: 9999px; font-family: var(--wv-font-body); font-weight: 600; font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--wv-color-blue); }
.wv-store-card-tag i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--wv-color-blue); }
.wv-store-card-price { margin: 0; white-space: nowrap; }
.wv-store-card-price-was { font-size: 12px; text-decoration: line-through; color: var(--wv-color-dark); margin-right: 4px; }
.wv-store-card-price-now { font-size: 16px; font-weight: 600; color: #d4a017; }
.wv-store-card-title { font-family: var(--wv-font-heading); font-weight: 400; font-size: 20px; line-height: 28px; color: var(--wv-color-dark); margin: 0; }
.wv-store-card-desc { font-family: var(--wv-font-body); font-size: 14px; line-height: 22px; color: var(--wv-color-dark); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wv-store-card-cta { margin-top: 4px; }
.wv-store-card-cta .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }

.wv-store-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.wv-store-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--wv-radius-sm); border: 1px solid rgba(43,42,41,0.25); color: var(--wv-color-dark); text-decoration: none; font-family: var(--wv-font-body); }
.wv-store-pagination .page-numbers.current { background: var(--wv-color-blue); border-color: var(--wv-color-blue); color: var(--wv-color-white); }
.wv-store-empty { text-align: center; padding: 48px 0; color: var(--wv-color-dark); }

/* Hover only on devices that truly support it -- avoids the stuck-hover
   look on touch (see [[wellness-vibe-responsive-system]]). */
@media (hover: hover) {
	.wv-store-filter:hover { background: var(--wv-color-blue-tint-bg); }
	.wv-store-card:hover { transform: translateY(-6px); box-shadow: 0 20px 36px -18px rgba(28,141,205,0.35); }
	.wv-store-pagination .page-numbers:hover:not(.current) { background: var(--wv-color-blue-tint-bg); }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-store-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
	.wv-store-grid { grid-template-columns: 1fr; }
}

/* Programs */
.wv-hero--programs { align-items: flex-start; min-height: 580px; }
@media (max-width: 767.98px) { .wv-hero--programs { min-height: 440px; } }
.wv-hero--programs .wv-hero-scrim { background: linear-gradient(240deg, rgba(28,141,205,0.35) 27.869%, rgb(14,71,103) 99.924%); }
.wv-hero--programs .wv-hero-content { max-width: 900px; padding: 240px 0 64px; }
@media (max-width: 767.98px) { .wv-hero--programs .wv-hero-content { padding: 120px 0 40px; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-hero--programs .wv-hero-content { padding: 160px 0 48px; } }
.wv-hero--programs .wv-btn { font-size: 16px; }
.wv-hero--programs .wv-btn-icon.is-light { background: var(--wv-color-cream); }
.wv-hero--programs .wv-btn-icon.is-light:hover { background: var(--wv-color-white); }
.wv-hero--programs .wv-hero-subtext { margin-top: 16px; font-size: 16px; line-height: 1.5; }
@media (min-width: 768px) { .wv-hero--programs .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--programs .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--programs .wv-hero-subtext { margin-top: 8px; } }
.wv-hero--programs .wv-btn-group { margin-top: 24px; }
@media (max-width: 767.98px) { .wv-hero--programs .wv-btn-group { margin-top: 20px; } }
.wv-hero--programs .wv-hero-heading { white-space: normal; font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }

.wv-programs { background: var(--wv-color-off-white); }
.wv-programs-toolbar { justify-content: flex-start; }

.wv-program-meta { display: flex; gap: 24px; align-items: center; border-top: 1px solid var(--wv-color-blue); border-bottom: 1px solid var(--wv-color-blue); padding: 12px 0; width: 100%; }
.wv-program-meta span { display: flex; align-items: center; gap: 8px; font-family: var(--wv-font-body); font-style: italic; font-size: 12px; color: var(--wv-color-dark); }
.wv-program-meta span i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--wv-color-blue); flex-shrink: 0; }
.wv-program-price-flat { font-family: var(--wv-font-body); font-weight: 600; font-size: 16px; color: var(--wv-color-dark); text-transform: uppercase; }

/* Universal: every heading tag, on every page, loses letter-spacing on
   mobile AND tablet (<1280px, matches the hamburger-nav breakpoint) -- a
   per-class whitelist kept missing new sections (testimonials heading,
   quote text/author) every time one was added, so this now covers h1-h6
   unconditionally instead of enumerating selectors one at a time.
   !important is deliberate here: a bare element selector (h1-h6) is LOWER
   specificity than the many `.wv-*-heading { letter-spacing: -Npx }` class
   rules it needs to override, so source order alone can't win this one. */
@media (max-width: 1279.98px) {
	h1, h2, h3, h4, h5, h6 {
		letter-spacing: 0 !important;
	}
	/* Heading-styled <p> tags (not semantic h1-h6) need explicit coverage. */
	.wv-fb-quote-text,
	.wv-fb-quote-author {
		letter-spacing: 0 !important;
	}
}

/* Universal: every button, on every page, gets the same text-button sizing on
   mobile AND tablet (<1280px) -- overrides the many page-specific `.wv-btn`
   variants (hero CTA, sound-bundle CTAs, etc). Icon-only square buttons are
   excluded, since text sizing doesn't apply to them. The header CTA button
   keeps its own compact sizing (it lives in the fixed-height header pill,
   with its own further-compacted tiers below 1280px) -- excluded entirely
   so those existing rules keep controlling it untouched.
   !important is needed to beat those higher-specificity 2-class selectors
   (e.g. `.wv-hero--forlife .wv-btn-primary`). */
@media (max-width: 1279.98px) {
	.wv-btn:not(.wv-btn-icon):not(.wv-header-cta .wv-btn) {
		font-size: 16px !important;
		line-height: 24px !important;
		padding: 12px 16px !important;
	}
}

/* Universal: every heading, on every page, gets a line-height at least 8px
   taller than its own font-size on mobile/tablet -- whatever that font-size
   actually is (most headings use clamp(), so this can't be a fixed px value).
   1em inside line-height resolves to the element's OWN computed font-size,
   so calc(1em + 8px) tracks it automatically at every viewport instead of
   hardcoding one number. !important to beat the many per-class line-height
   rules (same reasoning as the letter-spacing/button rules above). */
@media (max-width: 1279.98px) {
	h1, h2, h3, h4, h5, h6 {
		line-height: calc(1em + 8px) !important;
	}
}

/* About Wellness Vibe -- "What We Are / Source" (node 3640:3605) */
.wv-abwv-source-head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 40px; }
.wv-abwv-source-heading { display: flex; flex-direction: column; margin: 0; }
.wv-abwv-source-line1, .wv-abwv-source-line2 {
	font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize;
	font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.0769; letter-spacing: 0; color: var(--wv-color-dark);
}
.wv-abwv-source-line2 { font-style: italic; }
/* The universal h1-h6 mobile/tablet line-height rule targets the <h2> itself,
   but this heading nests <span> lines with their own explicit line-height --
   spans don't inherit an override set on their parent, so they need the
   same +8px rule applied directly. */
@media (max-width: 1279.98px) {
	.wv-abwv-source-line1, .wv-abwv-source-line2 { line-height: calc(1em + 8px) !important; }
}
.wv-abwv-source-body { display: flex; align-items: center; gap: 24px; }
.wv-abwv-source-photo { flex: 0 0 465px; border-radius: var(--wv-radius); overflow: hidden; aspect-ratio: 465 / 492; transition: box-shadow 0.3s ease; }
.wv-abwv-source-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-abwv-source-photo:hover { box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35); }
.wv-abwv-source-photo:hover img { transform: scale(1.08); }
.wv-abwv-source-rows { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.wv-abwv-source-row { display: flex; align-items: flex-start; gap: 24px; padding: 16px; border-top: 1px solid transparent; }
.wv-abwv-source-row:not(:first-child) { border-top-color: #ece7de; padding-top: 17px; }
.wv-abwv-source-row:last-child { border-bottom: 1px solid #ece7de; }
.wv-abwv-source-num { flex: 0 0 auto; font-family: var(--wv-font-heading); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--wv-color-blue); opacity: 0.9; }
.wv-abwv-source-row-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.wv-abwv-source-row-title { font-family: var(--wv-font-heading); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--wv-color-dark); margin: 0; }
.wv-abwv-source-row-desc { font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: rgba(43,42,41,0.88); margin: 0; }
/* max-width:1024 (not 1023.98) -- same iPad Pro 1024 landmine as the beat-row
   fix below: side-by-side leaves the numbered-rows column too narrow. */
@media (max-width: 1024px) {
	.wv-abwv-source-body { flex-direction: column; align-items: stretch; gap: 32px; }
	.wv-abwv-source-photo { flex-basis: auto; width: 100%; aspect-ratio: 465 / 492; max-width: 465px; margin-inline: auto; }
}
/* Tablet-only revert back to side-by-side (user explicitly asked for this
   exact range, nothing else) -- overrides the stacked rule immediately
   above for 768-1024 only; mobile (<768) stays stacked, desktop (>1024)
   was already side-by-side by default. */
@media (min-width: 768px) and (max-width: 1024px) {
	.wv-abwv-source-body { flex-direction: row !important; align-items: center !important; }
	.wv-abwv-source-photo { flex: 0 0 465px !important; width: auto !important; max-width: none !important; aspect-ratio: 465 / 492 !important; margin-inline: 0 !important; }
}
@media (max-width: 767.98px) {
	.wv-abwv-source-row-title { font-size: 20px; line-height: 28px; }
	.wv-abwv-source-row-desc { font-size: 16px; line-height: 24px; }
	.wv-abwv-source-num { font-size: 20px; line-height: 28px; }
	.wv-abwv-source-row { gap: 16px; padding: 12px 0; }
	.wv-abwv-source-row:first-child { padding-top: 0; }
	.wv-abwv-source-photo { aspect-ratio: 4 / 3; max-width: none; }
	.wv-abwv-source-head { gap: 16px; margin-bottom: 28px; }
	.wv-abwv-source-body { gap: 24px; }
}

/* About Wellness Vibe -- Mission / Vision alternating rows (node 3640:3649) */
.wv-abwv-beat { background: #f8f8f8; }
.wv-abwv-beat-stack { display: flex; flex-direction: column; gap: 40px; }
.wv-abwv-beat-row {
	display: flex; align-items: center; gap: 40px;
	opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease;
}
.wv-abwv-beat-row.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .wv-abwv-beat-row { opacity: 1; transform: none; transition: none; } }
.wv-abwv-beat-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.wv-abwv-beat-text .wv-label { margin-bottom: 12px; }
.wv-abwv-beat-heading { width: 100%; font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 3.125vw, 2.5rem); line-height: 1.2; letter-spacing: 0; color: var(--wv-color-dark); margin: 0 0 16px; }
.wv-abwv-beat-heading .wv-text-accent { font-style: italic; }
.wv-abwv-beat-desc { width: 100%; font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: rgba(43,42,41,0.88); margin: 0; }
.wv-abwv-beat-media { flex: 0 0 600px; height: 560px; border-radius: var(--wv-radius); overflow: hidden; transition: box-shadow 0.3s ease; }
.wv-abwv-beat-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-abwv-beat-media:hover { box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35); }
.wv-abwv-beat-media:hover img { transform: scale(1.08); }
/* max-width:1024 (not 1023.98) -- iPad Pro is exactly 1024px wide; at that
   width the text column has nowhere near enough room next to a fixed
   600px-basis photo in a side-by-side row, squeezing/wrapping the text. */
@media (max-width: 1024px) {
	.wv-abwv-beat-row { flex-direction: column; align-items: stretch; gap: 24px; }
	.wv-abwv-beat-media { order: -1; flex-basis: auto; width: 100%; height: auto; aspect-ratio: 600 / 560; }
}
@media (max-width: 767.98px) {
	.wv-abwv-beat-stack { gap: 32px; }
	.wv-abwv-beat-desc { font-size: 16px; line-height: 24px; }
	.wv-abwv-beat-media { aspect-ratio: 4 / 3; }
	.wv-abwv-beat-text .wv-label { margin-bottom: 16px; }
	.wv-abwv-beat-heading { margin-bottom: 12px; }
}

/* About Wellness Vibe -- Workshop Promo (node 3640:3687). Reuses the exact
   .wv-abwv-beat-row/-media mechanics (flex row, gap, scroll-fade, responsive
   stack+photo-order-first, hover-zoom) already built for the Mission/Vision
   section on this same page -- only the text-block typography differs. */
.wv-abwv-promo { background: #f8f8f8; }
.wv-abwv-promo-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.0769; letter-spacing: 0; color: var(--wv-color-dark); margin: 0 0 16px; }
.wv-abwv-promo-body { display: flex; flex-direction: column; gap: 16px; margin: 0 0 40px; }
.wv-abwv-promo-body p { font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: var(--wv-color-dark); margin: 0; }
.wv-abwv-promo-body .wv-text-accent { font-weight: bold; font-style: normal; }
.wv-abwv-promo-media { flex-basis: 570px; height: 444px; }
@media (max-width: 1023.98px) {
	.wv-abwv-promo-media { flex-basis: auto; height: auto; aspect-ratio: 570 / 444; }
}
/* Workshop Promo stays side-by-side at 1024 (unlike Mission/Vision, which
   stacks there) -- override the shared .wv-abwv-beat-row stacking rule for
   just this row at exactly the width it would otherwise catch. */
@media (min-width: 1024px) and (max-width: 1024px) {
	.wv-abwv-promo-row { flex-direction: row !important; align-items: center !important; }
	.wv-abwv-promo-media { flex-basis: 570px; height: 444px; aspect-ratio: auto; order: 0; }
}
@media (max-width: 767.98px) {
	.wv-abwv-promo-body p { font-size: 16px; line-height: 24px; }
	.wv-abwv-promo-body { margin-bottom: 24px; }
	.wv-abwv-promo-text .wv-btn-group { display: flex; width: 100%; }
	.wv-abwv-promo-text .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}

/* About Wellness Vibe -- Giving Back / Mission Lehar CSR cards (node 3640:3804) */
.wv-abwv-csr { background: #f8f8f8; }
.wv-abwv-csr-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 40px; }
.wv-abwv-csr-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: 1.0769; letter-spacing: 0; color: var(--wv-color-dark); margin: 0; }
.wv-abwv-csr-text { font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: rgba(43,42,41,0.88); max-width: 720px; margin: 0 auto; }
.wv-abwv-csr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wv-abwv-csr-card { position: relative; z-index: 0; height: 380px; border-radius: var(--wv-radius); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.wv-abwv-csr-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(14,71,103,0.45); }
.wv-abwv-csr-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.5s ease; }
.wv-abwv-csr-card:hover .wv-abwv-csr-card-bg { transform: scale(1.08); }
.wv-abwv-csr-card-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(28,141,205,0.25) 0%, #0e4767 90%); }
.wv-abwv-csr-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.wv-abwv-csr-card-num { font-family: var(--wv-font-heading); font-weight: 400; font-size: 92px; line-height: 0.95; letter-spacing: -2.024px; color: var(--wv-color-white); text-shadow: 0 2px 28px rgba(0,0,0,0.35); margin: 0; }
.wv-abwv-csr-card-label-row { display: flex; align-items: center; gap: 10px; }
.wv-abwv-csr-card-divider { display: block; width: 22px; height: 1px; background: #f5efe0; flex: 0 0 auto; }
.wv-abwv-csr-card-label { font-family: var(--wv-font-body); font-weight: 600; font-size: 12px; line-height: 20px; letter-spacing: 3.22px; text-transform: uppercase; color: var(--wv-color-white); }
.wv-abwv-csr-card-desc { font-family: var(--wv-font-body); font-size: 14px; line-height: 21.7px; color: rgba(255,255,255,0.85); margin: 0; }
/* max-width:1024 (not 1023.98) -- iPad Pro is exactly 1024px wide and a 3-col
   grid at that width squeezes each card too narrow for the 92px desktop
   number, causing horizontal overflow. Landing 1024 in this tier instead of
   the "desktop" tier fixes it (same landmine as gotcha 20 in
   [[wellness-vibe-physical-bundle-build]]). */
@media (max-width: 1024px) {
	.wv-abwv-csr-grid { grid-template-columns: 1fr 1fr; }
	.wv-abwv-csr-card { height: auto; aspect-ratio: 1 / 1; }
	.wv-abwv-csr-card-num { font-size: 72px; }
}
@media (max-width: 767.98px) {
	.wv-abwv-csr-grid { grid-template-columns: 1fr; gap: 16px; }
	.wv-abwv-csr-card { aspect-ratio: 4 / 3; padding: 20px; }
	.wv-abwv-csr-card-num { font-size: 44px; letter-spacing: -1.2px; }
	.wv-abwv-csr-card-label { font-size: 12px; letter-spacing: 2px; }
	.wv-abwv-csr-card-desc { font-size: 16px; line-height: 24px; }
	.wv-abwv-csr-text { font-size: 16px; line-height: 24px; }
}

/* Navel Activation Program -- hero banner (node 3640:3949). Same SBT/fluid-clamp
   convention as every other banner (About/For Life/For Business): fluid clamp
   hitting exactly 64px/68px at the 1280 desktop breakpoint, mobile 440px height
   + centered + zero content padding, tablet fixed 44/52 via the shared base rule. */
/* align-items:center is the DEFAULT here (tab/mobile stay vertically
   centered, matching every other hero on the site) -- only true desktop
   (>=1280px) switches to flex-start + the Figma-tuned 364px top padding.
   Previously this desktop-only positioning fired from min-width:1024px,
   the classic iPad-1024 landmine: it stranded 1024/tablet widths with
   top-anchored content shoved 364px down with nothing to vertically
   center it. Fixed by moving the desktop-only block to min-width:1280px. */
.wv-hero--navel { align-items: center; }
.wv-hero--navel .wv-hero-scrim { background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0) 75%); }
.wv-hero--navel .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
/* Subtext font-size/line-height/margin tiering copied verbatim from
   .wv-hero--aboutwv (same sitewide hero convention) -- previously this hero
   only inherited the flat 20px/24px-margin base .wv-hero-subtext default at
   every width, too large on mobile with no tablet step-down. */
.wv-hero--navel .wv-hero-subtext { font-size: 16px; line-height: 1.5; font-weight: 400; }
@media (min-width: 768px) { .wv-hero--navel .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--navel .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--navel .wv-hero-subtext { margin-top: 8px; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-hero--navel .wv-hero-subtext { margin-top: 16px; } }
.wv-hero--navel .wv-hero-content { max-width: 850px; }
/* font-weight 600 (base .wv-hero-heading default) on mobile/tablet, 400
   (Lora Regular, Figma-literal) only at true desktop -- same convention as
   every other hero on the site (.wv-hero--aboutwv, For Life/Business).
   Scoped to min-width:1280 specifically (not unconditional) so mobile/tablet
   isn't left looking thin -- the exact mistake already made once on the
   About Wellness Vibe hero, see [[wellness-vibe-about-wellness-page-build]]. */
@media (min-width: 1280px) { .wv-hero--navel .wv-hero-heading { font-weight: 400; } }
@media (min-width: 1280px) { .wv-hero--navel { align-items: flex-start; } .wv-hero--navel .wv-hero-content { padding-top: 364px; padding-bottom: 0; } }
@media (max-width: 1279.98px) { .wv-hero--navel .wv-hero-content { padding: 0; } }
@media (max-width: 767.98px) { .wv-hero--navel { min-height: 440px; } }
/* Unique lighter-blue gradient CTA, distinct from the sitewide .wv-btn-gradient
   (Figma specifies its own gradient + a smaller 36px-tall button for this hero). */
.wv-btn-navel-gradient { background: linear-gradient(49deg, rgb(26,137,204) 3.9%, rgb(181,226,252) 148.9%); color: var(--wv-color-cream); padding: 8px 16px; }
.wv-btn-navel-gradient:hover { filter: brightness(1.08); }
.wv-btn-icon-navel-gradient { background: linear-gradient(89deg, rgb(26,137,204) 1.3%, rgb(163,218,251) 96.5%); color: var(--wv-color-cream); }
.wv-btn-icon-navel-gradient:hover { filter: brightness(1.08); }

/* Navel Activation -- Statement (node 3640:4017). Reuses the exact shared
   .wv-sb-statement-text component (same as About Us Vibhushri/Sound Bundle),
   only the line-height ratio differs here: Figma wants 60px at 52px font
   (1.1538), not the usual 56px (1.0769). */
.wv-navel-statement .wv-sb-statement-text { line-height: 1.1538; }
@media (max-width: 767.98px) { .wv-navel-statement .wv-sb-statement-text { line-height: calc(1em + 8px); } }

/* Navel Activation -- Reveals / "What It Reveals" (node 3640:4020). Badge
   reuses the sitewide .wv-label chip verbatim (Figma's chip bg/padding/type
   match it closely enough). Heading follows the two-line pattern used by
   About Wellness Vibe's Source section (plain line1 + accent-highlighted
   line2), same fluid clamp formula as every other h2 on the site. */
.wv-navel-reveal { background: var(--wv-color-cream); }
.wv-navel-reveal-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
.wv-navel-reveal-head .wv-label { margin-bottom: 0; }
.wv-navel-reveal-heading { display: flex; flex-direction: column; margin: 0; }
.wv-navel-reveal-line1, .wv-navel-reveal-line2 {
	font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize;
	font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem);
	color: var(--wv-color-dark);
}
@media (max-width: 1279.98px) {
	.wv-navel-reveal-line1, .wv-navel-reveal-line2 { line-height: calc(1em + 8px) !important; }
}

.wv-navel-reveal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Scroll fade-in-up (opacity/translateY) doubles as the hover lift transition
   -- one transition list covers both states, staggered card by card via
   nth-child delay, same convention as .wv-fl-benefits/.wv-blog-card/.wv-store-card. */
.wv-navel-reveal-card {
	background: rgba(255,255,255,0.85); border-radius: var(--wv-radius);
	box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.08);
	padding: 24px 16px; display: flex; flex-direction: column; gap: 16px;
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.wv-navel-reveal-card.is-visible { opacity: 1; transform: translateY(0); }
@media (hover: hover) {
	.wv-navel-reveal-card.is-visible:hover { transform: translateY(-6px); box-shadow: 4px 12px 32px 0px rgba(0,0,0,0.14); }
}
.wv-navel-reveal-card-photo { border-radius: var(--wv-radius); aspect-ratio: 241 / 117; overflow: hidden; }
.wv-navel-reveal-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
@media (hover: hover) { .wv-navel-reveal-card:hover .wv-navel-reveal-card-photo img { transform: scale(1.08); } }
.wv-navel-reveal-card-body { display: flex; flex-direction: column; gap: 12px; }
.wv-navel-reveal-card-title { font-family: var(--wv-font-heading); font-weight: 500; text-transform: capitalize; font-size: 20px; line-height: 32px; color: var(--wv-color-dark); margin: 0; }
.wv-navel-reveal-card-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: #555; margin: 0; }
.wv-navel-reveal-card:nth-child(1) { transition-delay: 0s; }
.wv-navel-reveal-card:nth-child(2) { transition-delay: 0.12s; }
.wv-navel-reveal-card:nth-child(3) { transition-delay: 0.24s; }
.wv-navel-reveal-card:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .wv-navel-reveal-card { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1023.98px) {
	.wv-navel-reveal-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}
@media (max-width: 767.98px) {
	.wv-navel-reveal-grid { grid-template-columns: 1fr; gap: 16px; }
	.wv-navel-reveal-head { gap: 16px; margin-bottom: 28px; }
	.wv-navel-reveal-card-title { font-size: 18px; line-height: 26px; }
	.wv-navel-reveal-card-body { gap: 8px; }
	.wv-navel-reveal-card-desc { font-size: 16px; line-height: 24px; }
}

/* Navel Activation -- Pain / "Benefits You Will Get" (node 3640:4062). Same
   text+checklist+photo split component as Sound Bundle Physical's Features
   section (.wv-sbp-features-*) -- 542px text col, 600x540 photo, icon+bold
   +desc checklist rows -- copied under this page's own prefix rather than
   sharing selectors cross-page (site convention). White bg (Figma literal),
   asymmetric 80px top / 160px bottom padding at desktop only. */
.wv-navel-pain { background: var(--wv-color-white); padding-block: var(--wv-space-section); }
@media (min-width: 1280px) { .wv-navel-pain { padding-top: 80px; padding-bottom: 160px; } }
.wv-navel-pain-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.wv-navel-pain-text { flex: 1 1 420px; max-width: 542px; display: flex; flex-direction: column; gap: 24px; }
.wv-navel-pain-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wv-navel-pain-head .wv-label { margin-bottom: 0; }
.wv-navel-pain-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 3.125vw, 2.5rem); line-height: 48px; color: var(--wv-color-dark); margin: 0; }
.wv-navel-pain-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.wv-navel-pain-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.wv-navel-pain-checklist .wv-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--wv-color-blue); margin-top: 1px; }
.wv-navel-pain-checklist .wv-icon svg { width: 24px; height: 24px; }
.wv-navel-pain-checklist span { font-family: var(--wv-font-body); font-size: 18px; line-height: 26px; color: rgba(43,42,41,0.88); }
.wv-navel-pain-checklist strong { font-weight: 700; }
.wv-navel-pain-photo { flex: 1 1 380px; max-width: 600px; height: 540px; border-radius: var(--wv-radius); overflow: hidden; transition: box-shadow 0.3s ease; }
.wv-navel-pain-photo:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.18); }
.wv-navel-pain-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.wv-navel-pain-photo:hover img { transform: scale(1.06); }
@media (max-width: 1024px) {
	.wv-navel-pain-photo { height: auto; aspect-ratio: 600 / 540; }
	.wv-navel-pain-checklist span { font-size: 16px; line-height: 24px; }
}
@media (max-width: 767.98px) {
	.wv-navel-pain-photo { order: 1; }
	.wv-navel-pain-text { order: 2; flex: 1 1 auto; width: 100%; gap: 0; }
	.wv-navel-pain-inner { gap: 24px; }
	.wv-navel-pain-head { gap: 0; }
	.wv-navel-pain-text .wv-navel-pain-heading { margin-top: 16px; }
	.wv-navel-pain-checklist { margin-top: 24px; gap: 16px; }
	.wv-navel-pain-text .wv-btn-group { margin-top: 24px; display: flex; width: 100%; }
	.wv-navel-pain-text .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}

/* Navel Activation -- CTA Banner (node 3640:4095). Genuinely different from
   the sitewide .wv-final-cta card (that's a rounded, centered, photo-bg card
   with dark scrim) -- this is a full-bleed gradient band, left-aligned text,
   white CTA buttons, and a portrait photo that bleeds ABOVE the band's own
   top edge (Figma: photo top -136px relative to a 340px-tall content box,
   pixel-confirmed via a fresh get_screenshot + PIL sample, not guessed).
   Not a repeat of the standard final-cta component -- user explicitly said
   "not exactly ... ideally replica", so built fresh but reusing existing
   tokens/classes (.wv-btn-white, gradient color stops = --wv-color-blue /
   --wv-color-blue-tint) wherever they already matched. */
.wv-navel-ctaband {
	position: relative; overflow: visible;
	background: linear-gradient(189deg, rgba(28,141,205,0.55) 19.254%, var(--wv-color-blue-tint) 74.213%);
	padding-block: var(--wv-space-section);
}
.wv-navel-ctaband-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.05; pointer-events: none; z-index: 0; }
.wv-navel-ctaband-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.wv-navel-ctaband-text { display: flex; flex-direction: column; gap: 16px; color: var(--wv-color-white); }
.wv-navel-ctaband-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 3.125vw, 2.5rem); line-height: 1.4; margin: 0; }
.wv-navel-ctaband-sub { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; margin: 0; max-width: 620px; }
.wv-navel-ctaband-icon { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-navel-ctaband-icon:hover { background: var(--wv-color-white); filter: brightness(0.95); }
.wv-navel-ctaband-photo { position: static; width: 100%; aspect-ratio: 846 / 476; overflow: hidden; margin-top: 24px; }
.wv-navel-ctaband-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1280px) {
	.wv-navel-ctaband-photo {
		position: absolute; right: 0; bottom: 0; top: auto; left: auto;
		width: 58.75%; max-width: 846px; aspect-ratio: 846 / 476;
		margin-top: 0;
	}
}
@media (max-width: 1279.98px) {
	.wv-navel-ctaband { padding-bottom: 0; }
}
@media (max-width: 767.98px) {
	.wv-navel-ctaband-heading { font-size: 24px; line-height: 32px; }
	.wv-navel-ctaband-inner { gap: 20px; }
	.wv-navel-ctaband-text .wv-btn-group,
	.wv-navel-ctaband-inner > .wv-btn-group { display: flex; width: 100%; }
	.wv-navel-ctaband-inner > .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}

/* Navel Activation -- How It Works (node 3640:4107). Same chip+heading head
   pattern as Reveals section (reused verbatim: gap 16, .wv-label, two-tone
   heading) but plainer cards -- no bg/shadow/padding chrome, just photo +
   step-label + title + desc. Bg is the same cream (#faf8f4, pixel-sampled
   fresh this time instead of forgetting it like the Reveals section did). */
.wv-navel-how { background: var(--wv-color-cream); }
.wv-navel-how-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 39px; }
.wv-navel-how-head .wv-label { margin-bottom: 0; }
.wv-navel-how-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem); color: var(--wv-color-dark); margin: 0; }

.wv-navel-how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wv-navel-how-card {
	display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-navel-how-card.is-visible { opacity: 1; transform: translateY(0); }
.wv-navel-how-card:nth-child(1) { transition-delay: 0s; }
.wv-navel-how-card:nth-child(2) { transition-delay: 0.12s; }
.wv-navel-how-card:nth-child(3) { transition-delay: 0.24s; }
.wv-navel-how-card:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .wv-navel-how-card { opacity: 1; transform: none; transition: none; } }
.wv-navel-how-card-photo { width: 100%; aspect-ratio: 283 / 202; border-radius: var(--wv-radius); overflow: hidden; transition: box-shadow 0.3s ease; }
.wv-navel-how-card-photo:hover { box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35); }
.wv-navel-how-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-navel-how-card-photo:hover img { transform: scale(1.08); }
.wv-navel-how-card-body { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wv-navel-how-card-num { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: 20px; line-height: 28px; color: var(--wv-color-dark); margin: 0; }
.wv-navel-how-card-title { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: 18px; line-height: 26px; color: var(--wv-color-dark); margin: 0; }
.wv-navel-how-card-desc { font-family: var(--wv-font-body); font-size: 14px; line-height: 24px; color: #555; margin: 0; }

@media (max-width: 1023.98px) {
	.wv-navel-how-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media (max-width: 767.98px) {
	.wv-navel-how-grid { grid-template-columns: 1fr; row-gap: 24px; }
	.wv-navel-how-head { gap: 16px; margin-bottom: 24px; }
	.wv-navel-how-card-title { font-size: 17px; line-height: 24px; }
	.wv-navel-how-card-body { gap: 10px; }
	.wv-navel-how-card-desc { font-size: 16px; line-height: 24px; }
}

/* Navel Activation -- Testimonials (node 3640:4138). Reused the EXACT
   .wv-fl-testi-card slider component verbatim (same card, same JS slider
   via data-wv-slider, no new CSS/markup pattern) -- per standing rule, this
   section already exists site-wide, don't reimplement it. Only the heading
   typography differs from the shared .wv-fl-testimonials default (which is
   weight 500 + letter-spacing -2px, tuned for For Life/About Wellness Vibe):
   Figma here is weight 400, normal letter-spacing -- scoped via the same
   aria-labelledby technique already used for the other pages' padding
   overrides, so the sitewide default isn't touched. */
/* max-width:700px (not none) -- wide enough that "What Our Community Says"
   still fits on one line at 52px/letter-spacing:0 (measured ~659px, needed
   more room than the shared 650px default since normal letter-spacing is
   wider than the shared -2px), but narrow enough that at tablet widths the
   label+heading block still leaves room for .wv-slider-nav on the same row
   instead of wrapping below it (removing the cap entirely broke that). */
/* font-weight:400 scoped to desktop only -- the shared .wv-section-heading
   base default is already 500, which is exactly the mobile/tablet weight
   this site's convention wants (see the "Section headings go medium-weight
   on mobile/tablet" rule above). Applying 400 unconditionally (the original
   mistake here) silently thinned every section heading sitewide follows
   mobile/tablet, not just this one -- same class of bug as the hero-heading
   weight lesson, just missed on a non-hero heading this time. */
.wv-fl-testimonials[aria-labelledby="wv-navel-testi-heading"] .wv-section-heading { letter-spacing: 0; max-width: 700px; }
@media (min-width: 1280px) { .wv-fl-testimonials[aria-labelledby="wv-navel-testi-heading"] .wv-section-heading { font-weight: 400; } }
.wv-fl-testimonials[aria-labelledby="wv-navel-testi-heading"] { padding-bottom: var(--wv-space-section); }

/* Navel Activation -- FAQ (node 3640:4242). Reused the sitewide .wv-faq
   component 100% verbatim (grid/card/list/accordion, same JS toggle via
   initFaqAccordion() in main.js) -- Figma here already matches the shared
   background (#f8f8f8), grid layout and -2px letter-spacing exactly; only
   the heading font-weight differs (Figma wants 400, shared default is 500),
   scoped via the same #id technique already used for Sound Bundle's FAQ. */
/* Desktop-only, same reasoning as the testimonials heading above -- the
   shared .wv-faq-heading base default is already 500 (correct for
   mobile/tablet), forcing 400 unconditionally broke that. */
@media (min-width: 1280px) { #wv-navel-faq-heading { font-weight: 400; } }

/* Wellness App -- Hero banner (node 3640:4404). Gradient bg + subtle 5%
   texture overlay (no photo), same convention as Navel's CTA Banner. Height
   848px matches the sitewide desktop hero convention (For Life/Business).
   Content vertically centered at every breakpoint -- no hand-tuned
   padding-top hack this time (learned from the iPad-1024 landmine hit
   across 2 other heroes this session), so there's nothing to scope to
   min-width:1280 in the first place. */
.wv-hero--wapp {
	min-height: 848px; align-items: center;
	background: linear-gradient(201.76deg, rgba(28,141,205,0.22) 19.254%, rgb(41,162,230) 74.213%);
}
.wv-hero--wapp-texture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.05; pointer-events: none; z-index: 0; }
.wv-hero--wapp .wv-container { position: relative; z-index: 1; }
.wv-hero--wapp .wv-hero-heading { font-size: clamp(1.75rem, 5vw, 4rem); line-height: clamp(2.25rem, 5.31vw, 4.25rem); }
@media (min-width: 1280px) { .wv-hero--wapp .wv-hero-heading { font-weight: 400; } }
.wv-wapp-hero-content { max-width: 719px; }
/* Subtext tiering copied verbatim from the sitewide hero convention (same as
   .wv-hero--navel/.wv-hero--aboutwv): 16/18/20 + margin 8/16/24. Figma's own
   desktop spec (20px/28px) is exactly this convention's top tier already. */
.wv-hero--wapp .wv-hero-subtext { font-size: 16px; line-height: 1.5; font-weight: 400; }
@media (min-width: 768px) { .wv-hero--wapp .wv-hero-subtext { font-size: 18px; line-height: 1.4; } }
@media (min-width: 1280px) { .wv-hero--wapp .wv-hero-subtext { font-size: 20px; line-height: 1.4; } }
@media (max-width: 767.98px) { .wv-hero--wapp .wv-hero-subtext { margin-top: 8px; } }
@media (min-width: 768px) and (max-width: 1279.98px) { .wv-hero--wapp .wv-hero-subtext { margin-top: 16px; } }

/* margin-top:0 on the nested .wv-btn-group neutralizes the generic
   .wv-hero-content .wv-btn-group{margin-top:48px} rule (descendant selector
   still matches here even though it's not a direct child) -- spacing above
   the CTA row is controlled by this wrapper's own margin-top instead. */
.wv-wapp-hero-ctas { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
.wv-wapp-hero-ctas .wv-btn-group { margin-top: 0; }
/* Figma's arrow icon-button is white bg + blue icon here (both buttons in
   each pair match), not the sitewide default gradient icon-button. */
.wv-wapp-hero-ctas .wv-btn-icon { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-wapp-hero-ctas .wv-btn-icon:hover { background: var(--wv-color-white); filter: brightness(0.95); }
.wv-wapp-store-btn .wv-icon svg { width: 24px; height: 24px; }
.wv-wapp-hero-ctas .wv-btn { font-size: 16px; line-height: 24px; }
.wv-wapp-hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 24px; }
.wv-wapp-hero-badges img { height: 56px; width: auto; display: block; }

.wv-wapp-hero-phone {
	position: static; width: 65%; max-width: 420px; margin: 32px auto 0; aspect-ratio: 444 / 775;
}
.wv-wapp-hero-phone img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Desktop: Figma's exact fixed size (444x775px) -- the hero itself is a
   fixed 848px box (not fluid), same convention as For Life/Business's
   heroes, so a fixed-px phone size is correct here, not a percentage. The
   earlier width-based sizing (35%/max-width:500) under-sized it badly --
   at a 1180px container, 35% only resolved to ~413px. Vertically centered
   to match the content column's own centering (.wv-hero--wapp uses
   align-items:center at every breakpoint, deliberately, to avoid the
   iPad-1024 landmine already hit twice elsewhere this session -- so the
   phone centers the same way rather than trying to replicate Figma's
   literal top-anchored position, which assumed a non-centered layout). */
@media (min-width: 1280px) {
	.wv-wapp-hero-phone {
		position: absolute; right: 0; top: 50%; transform: translateY(-50%);
		width: 444px; height: 775px; max-width: none; margin: 0;
	}
}
/* Tablet: the phone mockup has no room to sit cleanly beside the text at
   this width without dominating/cluttering the banner (same call already
   made sitewide for Sound Bundle's hero, .wv-sb-hero-phone{display:none}
   at <=1024px) -- dropped entirely here, matching that precedent, instead
   of rendering small and floating in a sea of empty space. min-height goes
   from the desktop-fixed 848px to auto/content-driven, same convention as
   the mobile tier below, so the banner shrinks to fit without a giant gap
   under the (now hidden) phone. */
@media (max-width: 1279.98px) {
	.wv-hero--wapp { min-height: 848px; padding-block: 0; }
	.wv-wapp-hero-phone { display: none; }
	/* Zero out the generic sitewide .wv-hero-content{padding-block:282px 64px}
	   (min-width:1024px rule, meant for a top-anchored header-overlay hero
	   like .wv-hero--fl) -- it was never neutralized here, so content sat
	   282px from the top instead of vertically centering via the section's
	   own align-items:center. */
	.wv-hero--wapp .wv-hero-content { padding-block: 0; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
	.wv-wapp-hero-badges img { height: 40px; }
}
@media (max-width: 767.98px) {
	.wv-hero--wapp { min-height: 440px; padding-block: 0; }
	.wv-wapp-hero-ctas { margin-top: 20px; gap: 12px; }
	.wv-wapp-hero-ctas .wv-btn-group { display: flex; width: 100%; }
	.wv-wapp-hero-ctas .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
	.wv-wapp-hero-badges { display: none; }
}

/* Wellness App -- What The App Offers (node 3640:4492). Same 4-card pattern
   as Navel Activation's Reveal section (chip+heading, grid, stagger fade,
   photo hover) -- copied under this page's own prefix per site convention.
   Two differences from Reveal: head is CENTERED (Figma: items-center +
   text-center, not left-aligned), and card bg is rgba(248,248,248,0.55)
   (not rgba(255,255,255,0.85)). Bg white, pixel-sampled fresh via
   get_screenshot before writing any CSS (learned from the Reveal section's
   "forgot the background" gotcha earlier this session). */
.wv-wapp-offers { background: var(--wv-color-white); }
.wv-wapp-offers-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 40px; }
.wv-wapp-offers-head .wv-label { margin-bottom: 0; }
.wv-wapp-offers-heading { display: flex; flex-direction: column; margin: 0; }
.wv-wapp-offers-line1, .wv-wapp-offers-line2 {
	font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize;
	font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem);
	color: var(--wv-color-dark);
}
@media (max-width: 1279.98px) {
	.wv-wapp-offers-line1, .wv-wapp-offers-line2 { line-height: calc(1em + 8px) !important; }
}

.wv-wapp-offers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wv-wapp-offers-card {
	background: rgba(248,248,248,0.55); border-radius: var(--wv-radius);
	box-shadow: 4px 4px 24px 0px rgba(0,0,0,0.08);
	padding: 24px 16px; display: flex; flex-direction: column; gap: 16px;
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.wv-wapp-offers-card.is-visible { opacity: 1; transform: translateY(0); }
@media (hover: hover) {
	.wv-wapp-offers-card.is-visible:hover { transform: translateY(-6px); box-shadow: 4px 12px 32px 0px rgba(0,0,0,0.14); }
}
.wv-wapp-offers-card-photo { border-radius: var(--wv-radius); aspect-ratio: 241 / 117; overflow: hidden; }
.wv-wapp-offers-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
@media (hover: hover) { .wv-wapp-offers-card:hover .wv-wapp-offers-card-photo img { transform: scale(1.08); } }
.wv-wapp-offers-card-body { display: flex; flex-direction: column; gap: 12px; }
.wv-wapp-offers-card-title { font-family: var(--wv-font-heading); font-weight: 500; text-transform: capitalize; font-size: 20px; line-height: 32px; color: var(--wv-color-dark); margin: 0; }
.wv-wapp-offers-card-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: #555; margin: 0; }
.wv-wapp-offers-card:nth-child(1) { transition-delay: 0s; }
.wv-wapp-offers-card:nth-child(2) { transition-delay: 0.12s; }
.wv-wapp-offers-card:nth-child(3) { transition-delay: 0.24s; }
.wv-wapp-offers-card:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .wv-wapp-offers-card { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1024px) {
	.wv-wapp-offers-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}
@media (max-width: 767.98px) {
	.wv-wapp-offers-grid { grid-template-columns: 1fr; gap: 16px; }
	.wv-wapp-offers-head { gap: 16px; margin-bottom: 28px; }
	.wv-wapp-offers-card-title { font-size: 18px; line-height: 26px; }
	.wv-wapp-offers-card-body { gap: 8px; }
	.wv-wapp-offers-card-desc { font-size: 16px; line-height: 24px; }
}

/* Section-heading mobile/tablet weight convention (see standing rule in
   [[wellness-vibe-responsive-system]]) applied proactively, not reactively. */
@media (max-width: 1279.98px) {
	.wv-wapp-offers-line1, .wv-wapp-offers-line2 { font-weight: 500 !important; }
}

/* Wellness App -- Explore The Experience (node 3640:4534). Chip+heading+
   subtext, all centered, then 4 tall pre-composed phone-mockup graphics
   (image itself already bakes in the card's blue bg/heading/dots -- the
   Figma JSX only has a single flat <img> per card, confirmed via
   get_design_context, no separate layers to rebuild) + a caption label
   below each. Bg cream (#faf8f4), pixel-sampled before writing any CSS. */
.wv-wapp-exp { background: var(--wv-color-cream); }
.wv-wapp-exp-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 40px; }
.wv-wapp-exp-head .wv-label { margin-bottom: 0; }
.wv-wapp-exp-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem); color: var(--wv-color-dark); margin: 0; }
.wv-wapp-exp-subtext { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-dark); margin: 0; }
@media (max-width: 1279.98px) { .wv-wapp-exp-heading { font-weight: 500 !important; } }

.wv-wapp-exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wv-wapp-exp-card { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wv-wapp-exp-card-photo { width: 100%; aspect-ratio: 283 / 503; border-radius: var(--wv-radius); overflow: hidden; }
.wv-wapp-exp-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv-wapp-exp-card-caption { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: 20px; line-height: 28px; color: var(--wv-color-dark); margin: 0; }
@media (max-width: 1279.98px) { .wv-wapp-exp-card-caption { font-weight: 500 !important; } }

/* Different animation from the rest of the page (explicit ask): cards
   converge inward with a slide+fade instead of the uniform translateY
   fade-in-up used everywhere else -- odd cards slide in from the left,
   even cards from the right, staggered by index. */
.wv-wapp-exp-card { opacity: 0; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-wapp-exp-card--left { transform: translateX(-48px); }
.wv-wapp-exp-card--right { transform: translateX(48px); }
.wv-wapp-exp-card.is-visible { opacity: 1; transform: translateX(0); }
.wv-wapp-exp-card:nth-child(1) { transition-delay: 0s; }
.wv-wapp-exp-card:nth-child(2) { transition-delay: 0.1s; }
.wv-wapp-exp-card:nth-child(3) { transition-delay: 0.2s; }
.wv-wapp-exp-card:nth-child(4) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .wv-wapp-exp-card { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1023.98px) {
	.wv-wapp-exp-grid { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}
@media (max-width: 767.98px) {
	.wv-wapp-exp-grid { grid-template-columns: 1fr; row-gap: 28px; }
	.wv-wapp-exp-head { gap: 16px; margin-bottom: 28px; }
	.wv-wapp-exp-card-photo { max-width: 260px; }
	.wv-wapp-exp-card-caption { font-size: 18px; line-height: 26px; }
}

/* Wellness App -- Benefits / "One App For Your Daily Inner Reset" (node
   3640:4554). Gradient bg (blue -> dark navy, matches Figma exactly),
   centered white chip+heading+subtext, a centered phone mockup with two
   feature points on each side. Icons are custom illustrated glyphs (not in
   the sitewide wv_icon() line-icon set) -- exported from Figma as SVG, but
   this site has no SVG upload mime support, so rendered to PNG via a
   headless-Chrome screenshot pass (`page.setContent` + transparent
   `omitBackground` screenshot) instead of adding SVG upload support just
   for 4 icons. */
.wv-wapp-benefits { background: linear-gradient(179.66deg, rgba(28,141,205,0.65) 17.119%, rgb(14,71,103) 111.94%); color: var(--wv-color-white); }
.wv-wapp-benefits-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 40px; }
.wv-wapp-benefits-head .wv-label { margin-bottom: 0; }
.wv-wapp-benefits-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem); color: var(--wv-color-white); margin: 0; }
.wv-wapp-benefits-subtext { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-white); margin: 0; }
@media (max-width: 1279.98px) { .wv-wapp-benefits-heading { font-weight: 500 !important; } }

.wv-wapp-benefits-body { display: grid; grid-template-columns: 327px 1fr 327px; align-items: center; gap: 24px; }
.wv-wapp-benefits-points { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 40px; padding-block: 24px; }
.wv-wapp-benefits-point { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 16px; }
.wv-wapp-benefits-points--right .wv-wapp-benefits-point { align-items: flex-start; }
.wv-wapp-benefits-point-icon { width: 72px; height: 72px; flex: 0 0 auto; }
.wv-wapp-benefits-point-icon img { width: 100%; height: 100%; display: block; }
.wv-wapp-benefits-point-title { font-family: var(--wv-font-heading); font-weight: 500; text-transform: capitalize; font-size: 24px; line-height: 32px; color: var(--wv-color-white); margin: 0; }
.wv-wapp-benefits-point-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-white); margin: 0; }
.wv-wapp-benefits-phone { width: 100%; max-width: 350px; aspect-ratio: 350 / 611; margin-inline: auto; }
.wv-wapp-benefits-phone img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Same "pop in from the side" animation as Explore The Experience, applied
   per explicit request to this section too -- left points slide in from
   the left, right points from the right, staggered one at a time (top
   point before bottom point on each side). */
.wv-wapp-benefits-point { opacity: 0; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.wv-wapp-benefits-point--left { transform: translateX(-48px); }
.wv-wapp-benefits-point--right { transform: translateX(48px); }
.wv-wapp-benefits-point.is-visible { opacity: 1; transform: translateX(0); }
.wv-wapp-benefits-points .wv-wapp-benefits-point:nth-child(1) { transition-delay: 0s; }
.wv-wapp-benefits-points .wv-wapp-benefits-point:nth-child(2) { transition-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) { .wv-wapp-benefits-point { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1023.98px) {
	.wv-wapp-benefits-body { grid-template-columns: 1fr; justify-items: center; gap: 32px; }
	.wv-wapp-benefits-phone { order: 1; }
	.wv-wapp-benefits-points--left { order: 2; }
	.wv-wapp-benefits-points--right { order: 3; }
	.wv-wapp-benefits-points { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 24px; padding-block: 0; width: 100%; }
	.wv-wapp-benefits-point { width: 260px; align-items: center; text-align: center; }
	.wv-wapp-benefits-point-icon { align-self: center; }
}
@media (max-width: 767.98px) {
	.wv-wapp-benefits-head { gap: 16px; margin-bottom: 28px; }
	.wv-wapp-benefits-phone { display: none; }
	.wv-wapp-benefits-body { gap: 24px; }
	.wv-wapp-benefits-points { flex-direction: column; align-items: center; gap: 24px; }
	.wv-wapp-benefits-point { width: 100%; padding: 16px; align-items: center; text-align: center; }
	.wv-wapp-benefits-points--right .wv-wapp-benefits-point { align-items: center; }
	.wv-wapp-benefits-point-icon { align-self: center; }
	.wv-wapp-benefits-point-title { font-size: 20px; line-height: 28px; }
}

/* Wellness App -- How It Works / "Achieve Wellness in 3 Simple Steps" (node
   3640:4600). Same exact pattern as Navel Activation's How It Works section
   (chip+heading, grid, stagger fade, photo hover) -- per explicit user
   instruction to reuse it verbatim, copied under this page's own prefix.
   Differences from the Navel version: 3 cards not 4, a subtext line under
   the heading, taller photos (283x350 vs 283x202), and bigger/medium-weight
   titles (20/28 Lora Medium vs 18/26 Lora Regular -- Figma-specific here).
   Bg cream, pixel-sampled before writing CSS. */
.wv-wapp-how { background: var(--wv-color-cream); }
.wv-wapp-how-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 39px; }
.wv-wapp-how-head .wv-label { margin-bottom: 0; }
.wv-wapp-how-heading { display: flex; flex-direction: column; margin: 0; }
.wv-wapp-how-line1, .wv-wapp-how-line2 {
	font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize;
	font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem);
	color: var(--wv-color-dark);
}
.wv-wapp-how-line2 { color: var(--wv-color-blue); }
.wv-wapp-how-subtext { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: var(--wv-color-dark); margin: 0; }
@media (max-width: 1279.98px) {
	.wv-wapp-how-line1, .wv-wapp-how-line2 { line-height: calc(1em + 8px) !important; font-weight: 500 !important; }
}

.wv-wapp-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wv-wapp-how-card {
	display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
	opacity: 0; transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-wapp-how-card.is-visible { opacity: 1; transform: translateY(0); }
.wv-wapp-how-card:nth-child(1) { transition-delay: 0s; }
.wv-wapp-how-card:nth-child(2) { transition-delay: 0.12s; }
.wv-wapp-how-card:nth-child(3) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .wv-wapp-how-card { opacity: 1; transform: none; transition: none; } }
.wv-wapp-how-card-photo { width: 100%; aspect-ratio: 383 / 350; border-radius: var(--wv-radius); overflow: hidden; transition: box-shadow 0.3s ease; }
.wv-wapp-how-card-photo:hover { box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35); }
.wv-wapp-how-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.wv-wapp-how-card-photo:hover img { transform: scale(1.08); }
.wv-wapp-how-card-body { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wv-wapp-how-card-title { font-family: var(--wv-font-heading); font-weight: 500; text-transform: capitalize; font-size: 20px; line-height: 28px; color: var(--wv-color-dark); margin: 0; }
.wv-wapp-how-card-desc { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; color: #555; margin: 0; }

@media (max-width: 767.98px) {
	.wv-wapp-how-grid { grid-template-columns: 1fr; row-gap: 24px; }
	.wv-wapp-how-head { gap: 16px; margin-bottom: 28px; }
	.wv-wapp-how-card-title { font-size: 18px; line-height: 26px; }
}

/* Wellness App -- Testimonials (node 3640:4623). Exact same content
   (quotes/names/avatars, pixel-diffed identical to Navel Activation's
   testimonial images) and the exact same .wv-fl-testi-card slider
   component, reused 100% verbatim per explicit user instruction. Only a
   heading-typography override, same technique as Navel's: shared default
   is weight 500 + -2px letter-spacing, Figma here wants weight 400 (desktop
   only) + normal letter-spacing at every width. */
.wv-fl-testimonials[aria-labelledby="wv-wapp-testi-heading"] .wv-section-heading { letter-spacing: 0; }
@media (min-width: 1280px) { .wv-fl-testimonials[aria-labelledby="wv-wapp-testi-heading"] .wv-section-heading { font-weight: 400; } }
.wv-fl-testimonials[aria-labelledby="wv-wapp-testi-heading"] { padding-bottom: var(--wv-space-section); }

/* Wellness App -- CTA Banner 2 / "Your Self Next Version Is Just One Click
   Away" (node 3640:4727). Reuses .wv-navel-ctaband as the base (gradient
   189deg vs this frame's 190.9deg is an imperceptible difference, same
   colors/stops -- no override needed there) per explicit user instruction
   to grab the same section. Differences handled here: content MIRRORED
   (phone bleeds left, text sits right -- Navel's bled right/text-left),
   single CTA button (not a pair), store badges below it (reuses
   .wv-wapp-hero-badges verbatim), and a shorter py-40 desktop padding
   (Figma-literal, vs Navel's py-80 var(--wv-space-section)). */
.wv-wapp-cta2 { padding-block: 40px; }
@media (max-width: 767.98px) { .wv-wapp-cta2 { padding-block: 32px; } }
.wv-wapp-cta2-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.wv-wapp-cta2-text { display: flex; flex-direction: column; gap: 16px; color: var(--wv-color-white); max-width: 570px; }
.wv-wapp-cta2-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.25rem, 3.125vw, 2.5rem); line-height: 1.4; margin: 0; }
.wv-wapp-cta2-sub { font-family: var(--wv-font-body); font-size: 16px; line-height: 24px; margin: 0; }
.wv-wapp-cta2-text .wv-btn-group { margin-top: 8px; }
/* Arrow icon-button is white bg + blue icon here too (matches the left
   button), not the sitewide default gradient .wv-btn-icon -- missed this
   override when the section was first built (only the hero/pain sections
   got it), Figma confirms both buttons in the pair are white. */
.wv-wapp-cta2-text .wv-btn-icon { background: var(--wv-color-white); color: var(--wv-color-blue); }
.wv-wapp-cta2-text .wv-btn-icon:hover { background: var(--wv-color-white); filter: brightness(0.95); }
.wv-wapp-cta2-badges { margin-top: 8px; }
@media (max-width: 1279.98px) { .wv-wapp-cta2-heading { font-weight: 500 !important; } }

.wv-wapp-cta2-photo { position: static; width: 60%; max-width: 300px; aspect-ratio: 354 / 618; margin: 0 auto 24px; }
.wv-wapp-cta2-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* CORRECTED after re-checking a fresh get_screenshot of the exact node: the
   phone does NOT bleed to the true viewport edge -- it sits right at the
   page's standard content margin (Figma x=119 vs the container's own
   ~130px inset at 1440 -- an 11px difference, negligible). An earlier pass
   mistakenly moved this photo to be a sibling of .wv-container so it would
   bleed to the raw page edge, which looked "more correct" on one very wide
   browser window but was actually wrong per Figma, and it also caused a
   text/photo overlap regression at normal desktop widths once the
   photo grew to its correct 354x618 size. Reverted: photo is nested back
   inside .wv-container, `left:0` intentionally means the CONTAINER's own
   left edge (i.e. the page's normal content margin), not the viewport edge.
   Fixed px, not a percentage of the container -- same bug/fix as the hero
   phone: percentage-of-container sizing under-shoots the moment the
   container is narrower than the Figma reference canvas (was rendering
   ~290px instead of Figma's literal 354x618). */
@media (min-width: 1280px) {
	.wv-wapp-cta2-inner { flex-direction: row; align-items: center; justify-content: flex-end; }
	.wv-wapp-cta2-photo {
		position: absolute; left: 0; top: 34%; transform: translateY(-50%);
		width: 354px; height: 618px; max-width: none; margin: 0; aspect-ratio: auto;
	}
}
@media (max-width: 767.98px) {
	.wv-wapp-cta2-text .wv-btn-group { display: flex; width: 100%; }
	.wv-wapp-cta2-text .wv-btn-group .wv-btn:not(.wv-btn-icon) { flex: 1 0 0; justify-content: center; }
}

/* Wellness App -- FAQ v2 (node 3640:4747). Layout variant of the sitewide
   FAQ pattern -- chip+heading spans the FULL width above (not paired with
   a CTA card in a left column like the other .wv-faq usages), then a
   2-column row below: FAQ list left, a plain photo right (no CTA card at
   all here). Reuses the accordion internals verbatim (.wv-faq-item/
   -question/-toggle/-answer, same initFaqAccordion() JS, zero new JS) --
   only the outer grid/head wrapper is new. Bg #f8f8f8, explicit in Figma's
   own JSX (matches --wv-color-off-white already). */
.wv-wapp-faq2 { background: var(--wv-color-off-white); }
.wv-wapp-faq2-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.wv-wapp-faq2-heading { font-family: var(--wv-font-heading); font-weight: 400; text-transform: capitalize; font-size: clamp(1.5rem, 4.0625vw, 3.25rem); line-height: clamp(1.75rem, 4.375vw, 3.5rem); color: var(--wv-color-dark); margin: 0; }
@media (max-width: 1279.98px) { .wv-wapp-faq2-heading { font-weight: 500 !important; } }

/* align-items:start (not stretch) on the photo -- with 5 accordion items the
   FAQ list column often runs taller than the photo's natural 400px height;
   stretch was forcing the grid row taller to match, and since the photo
   keeps aspect-ratio:571/400 locked, a taller box also means it widens past
   711px+ -- exactly what "image badi hoti hai" was: growing past Figma's
   exact 571x400 size instead of staying pinned to it. */
.wv-wapp-faq2-body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.wv-wapp-faq2-list { min-width: 0; }
.wv-wapp-faq2-photo { border-radius: var(--wv-radius); overflow: hidden; aspect-ratio: 571 / 400; max-width: 571px; width: 100%; }
.wv-wapp-faq2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1023.98px) {
	.wv-wapp-faq2-body { grid-template-columns: 1fr; gap: 32px; }
	.wv-wapp-faq2-photo { order: -1; aspect-ratio: 571 / 400; }
}
@media (max-width: 767.98px) {
	.wv-wapp-faq2-head { gap: 16px; margin-bottom: 24px; }
	.wv-wapp-faq2-body { gap: 24px; }
}