/* ==========================================================================
   OlivWell Elementor Kit
   Design tokens, section styles and behaviour hooks.
   Class prefix: ow-
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
	--ow-bone: #fbfaf7;
	--ow-bone-tint: #f5f5ef;
	--ow-sage: #8f9776;
	--ow-sage-deep: #6f7659;
	--ow-sage-tint: rgba(143, 151, 118, 0.04);
	--ow-slate: #72879a;
	--ow-slate-deep: #4e5f70;
	--ow-ink: #23271f;
	--ow-muted: #6b6f63;
	--ow-line: rgba(143, 151, 118, 0.22);
	--ow-line-light: rgba(251, 250, 247, 0.24);

	--ow-font-display: "Cormorant Garamond", Georgia, serif;
	--ow-font-sans: "Montserrat", system-ui, -apple-system, sans-serif;

	--ow-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ow-arch: 999px 999px 12px 12px;

	--ow-shell: 1280px;
	--ow-header-h: 88px;
	--ow-header-h-scrolled: 68px;
}

/* --------------------------------------------------------------------------
   2. BASE — scoped so we never fight the active theme globally
   -------------------------------------------------------------------------- */
body.ow-site {
	background-color: var(--ow-bone);
	color: var(--ow-ink);
	font-family: var(--ow-font-sans);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.ow-site h1,
body.ow-site h2,
body.ow-site h3,
body.ow-site h4 {
	font-family: var(--ow-font-display);
	font-weight: 500;
	color: var(--ow-ink);
	margin: 0;
}

body.ow-site p {
	margin: 0;
}

.elementor :focus-visible {
	outline: 2px solid var(--ow-sage);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Elementor container width reset — every ow section manages its own shell */
.elementor .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.ow-shell {
	width: 100%;
	max-width: var(--ow-shell);
	margin-inline: auto;
	padding-inline: 20px;
}

@media (min-width: 768px) {
	.ow-shell { padding-inline: 40px; }
}

.ow-section {
	padding-block: clamp(80px, 9vw, 140px);
	width: 100%;
}

.ow-section--tint { background-color: var(--ow-bone-tint); }
.ow-section--sage-tint { background-color: var(--ow-sage-tint); }
.ow-section--slate { background-color: var(--ow-slate-deep); }

.ow-rule {
	border-top: 1px solid var(--ow-line);
}

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
.ow-h1,
.ow-h1 .elementor-heading-title {
	font-family: var(--ow-font-display);
	font-size: clamp(2.75rem, 6.5vw, 5.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: var(--ow-ink);
}

.ow-h2,
.ow-h2 .elementor-heading-title {
	font-family: var(--ow-font-display);
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	font-weight: 400;
	color: var(--ow-ink);
}

.ow-h3,
.ow-h3 .elementor-heading-title {
	font-family: var(--ow-font-display);
	font-size: clamp(1.35rem, 2vw, 1.65rem);
	line-height: 1.2;
	font-weight: 500;
	color: var(--ow-ink);
}

/* The brand's typographic tic: one italic sage word per headline */
.ow-site em,
.ow-accent {
	font-style: italic;
	color: var(--ow-sage);
	font-weight: 400;
}

.ow-eyebrow,
.ow-eyebrow .elementor-heading-title {
	font-family: var(--ow-font-sans);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ow-muted);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	line-height: 1;
}

.ow-eyebrow .elementor-heading-title::before,
.ow-eyebrow--dash::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background-color: var(--ow-sage);
	flex: none;
}

.ow-lead,
.ow-lead p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ow-muted);
	max-width: 56ch;
}

.ow-body,
.ow-body p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ow-muted);
}

.ow-fine,
.ow-fine p {
	font-size: 11.5px;
	line-height: 1.65;
	color: var(--ow-muted);
	max-width: 90ch;
}

.ow-price {
	font-family: var(--ow-font-display);
	font-size: 34px;
	line-height: 1;
	font-weight: 500;
	color: var(--ow-sage);
}

.ow-price-was {
	font-family: var(--ow-font-sans);
	font-size: 16px;
	color: var(--ow-muted);
	text-decoration: line-through;
	margin-inline-end: 10px;
	vertical-align: 4px;
}

.ow-price-unit {
	font-family: var(--ow-font-sans);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ow-muted);
}

/* Light-on-dark variants for the slate protocol band */
.ow-on-slate h2,
.ow-on-slate h3,
.ow-on-slate .ow-h2 .elementor-heading-title,
.ow-on-slate .ow-h3 .elementor-heading-title { color: var(--ow-bone); }
.ow-on-slate .ow-eyebrow .elementor-heading-title { color: rgba(251, 250, 247, 0.7); }
.ow-on-slate .ow-eyebrow .elementor-heading-title::before { background-color: rgba(251, 250, 247, 0.55); }
.ow-on-slate .ow-lead p,
.ow-on-slate .ow-body p { color: rgba(251, 250, 247, 0.78); }
.ow-on-slate .ow-fine p { color: rgba(251, 250, 247, 0.6); }
.ow-on-slate em { color: #cdd4bd; }

/* --------------------------------------------------------------------------
   5. SHAPE — the arch
   -------------------------------------------------------------------------- */
.ow-arch img,
.ow-arch .elementor-widget-container,
.ow-arch {
	border-radius: var(--ow-arch);
	overflow: hidden;
}

.ow-arch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.ow-btn.ow-btn .elementor-button,
.ow-btn-el {
	font-family: var(--ow-font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border-radius: 4px;
	padding: 15px 28px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	transition: background-color 200ms ease, color 200ms ease,
		border-color 200ms ease, transform 200ms var(--ow-ease);
	cursor: pointer;
	text-decoration: none;
}

.ow-btn--solid.ow-btn--solid .elementor-button {
	background-color: var(--ow-sage);
	color: var(--ow-bone);
	border-color: var(--ow-sage);
}
.ow-btn--solid.ow-btn--solid .elementor-button:hover,
.ow-btn--solid.ow-btn--solid .elementor-button:focus-visible {
	background-color: var(--ow-sage-deep);
	border-color: var(--ow-sage-deep);
	color: var(--ow-bone);
	transform: translateY(-1px);
}

.ow-btn--outline.ow-btn--outline .elementor-button {
	background-color: transparent;
	color: var(--ow-ink);
	border-color: var(--ow-sage);
}
.ow-btn--outline.ow-btn--outline .elementor-button:hover,
.ow-btn--outline.ow-btn--outline .elementor-button:focus-visible {
	background-color: var(--ow-sage);
	color: var(--ow-bone);
	transform: translateY(-1px);
}

.ow-btn--block.ow-btn--block .elementor-button { width: 100%; }

.ow-btn--light.ow-btn--light .elementor-button {
	background-color: transparent;
	color: var(--ow-bone);
	border-color: rgba(251, 250, 247, 0.45);
}
.ow-btn--light.ow-btn--light .elementor-button:hover {
	background-color: var(--ow-bone);
	color: var(--ow-slate-deep);
	border-color: var(--ow-bone);
}

/* --------------------------------------------------------------------------
   7. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.ow-announce {
	background-color: var(--ow-sage);
	color: var(--ow-bone);
	font-size: 12.5px;
	letter-spacing: 0.01em;
	padding: 9px 44px 9px 20px;
	text-align: center;
	position: relative;
	width: 100%;
}
.ow-announce a { color: var(--ow-bone); text-decoration: underline; text-underline-offset: 3px; }
.ow-announce p { margin: 0; }
.ow-announce-close {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 16px;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: var(--ow-bone);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.85;
}
.ow-announce-close:hover { opacity: 1; }
.ow-announce[hidden] { display: none; }

/* --------------------------------------------------------------------------
   8. HEADER
   -------------------------------------------------------------------------- */
.ow-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 999;
	width: 100%;
	background-color: transparent;
	transition: background-color 300ms ease, box-shadow 300ms ease,
		border-color 300ms ease;
	border-bottom: 1px solid transparent;
}
.ow-header.is-stuck {
	background-color: rgba(251, 250, 247, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--ow-line);
}

.ow-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: var(--ow-header-h);
	transition: height 300ms var(--ow-ease);
}
.ow-header.is-stuck .ow-header-inner { height: var(--ow-header-h-scrolled); }

.ow-logo img {
	height: 40px;
	width: auto;
	transition: height 300ms var(--ow-ease);
}
.ow-header.is-stuck .ow-logo img { height: 32px; }

/* Nav */
.ow-nav {
	display: none;
	align-items: center;
	gap: 30px;
}
@media (min-width: 1025px) { .ow-nav { display: flex; } }

.ow-nav-item { position: relative; }

.ow-nav-link {
	position: relative;
	font-family: var(--ow-font-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--ow-ink);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.ow-nav-link::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	height: 1px;
	width: 100%;
	background-color: var(--ow-sage);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--ow-ease);
}
.ow-nav-link:hover::after,
.ow-nav-link:focus-visible::after,
.ow-nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

.ow-nav-caret {
	font-size: 9px;
	transition: transform 250ms var(--ow-ease);
	display: inline-block;
}
.ow-nav-link[aria-expanded="true"] .ow-nav-caret { transform: rotate(180deg); }

.ow-dropdown {
	position: absolute;
	inset-block-start: calc(100% + 14px);
	inset-inline-start: -18px;
	min-width: 240px;
	background-color: var(--ow-bone);
	border: 1px solid var(--ow-line);
	border-radius: 4px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 240ms var(--ow-ease), transform 240ms var(--ow-ease),
		visibility 240ms;
	box-shadow: 0 18px 40px -30px rgba(35, 39, 31, 0.5);
}
.ow-nav-item.is-open .ow-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.ow-dropdown a {
	font-size: 12.5px;
	color: var(--ow-ink);
	text-decoration: none;
	padding: 9px 12px;
	border-radius: 3px;
	transition: background-color 180ms ease, color 180ms ease;
}
.ow-dropdown a:hover { background-color: var(--ow-sage-tint); color: var(--ow-sage-deep); }

.ow-header-actions {
	display: none;
	align-items: center;
	gap: 18px;
}
@media (min-width: 1025px) { .ow-header-actions { display: flex; } }

.ow-header-login {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ow-ink);
	text-decoration: none;
}
.ow-header-login:hover { color: var(--ow-sage-deep); }

/* Burger */
.ow-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
}
@media (min-width: 1025px) { .ow-burger { display: none; } }
.ow-burger span {
	display: block;
	height: 1.5px;
	width: 100%;
	background-color: var(--ow-ink);
	transition: transform 300ms var(--ow-ease), opacity 200ms ease;
}
.ow-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ow-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ow-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile panel */
.ow-mobile-panel {
	position: fixed;
	inset: 0;
	background-color: var(--ow-bone);
	z-index: 998;
	padding: calc(var(--ow-header-h) + 24px) 20px 40px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms var(--ow-ease), visibility 300ms;
}
.ow-mobile-panel.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1025px) { .ow-mobile-panel { display: none; } }

.ow-mobile-panel .ow-m-link {
	font-family: var(--ow-font-display);
	font-size: 26px;
	color: var(--ow-ink);
	text-decoration: none;
	padding: 14px 0;
	border-bottom: 1px solid var(--ow-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border-inline: 0;
	border-block-start: 0;
	width: 100%;
	text-align: start;
	cursor: pointer;
}
.ow-mobile-panel .ow-m-sub {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms var(--ow-ease);
}
.ow-mobile-panel .ow-m-sub[data-open="true"] { grid-template-rows: 1fr; }
.ow-mobile-panel .ow-m-sub > div { overflow: hidden; }
.ow-mobile-panel .ow-m-sub a {
	display: block;
	font-size: 14px;
	color: var(--ow-muted);
	text-decoration: none;
	padding: 10px 0 10px 14px;
}
.ow-mobile-cta { margin-block-start: auto; padding-block-start: 28px; }
body.ow-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.ow-hero {
	padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 120px);
}
.ow-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
@media (min-width: 1025px) {
	.ow-hero-grid {
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		gap: 72px;
	}
}

.ow-hero-copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.ow-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ow-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	margin-block-start: 14px;
	border-top: 1px solid var(--ow-line);
	padding-block-start: 26px;
}
.ow-stat { padding-inline: 22px; }
.ow-stat:first-child { padding-inline-start: 0; }
.ow-stat + .ow-stat { border-inline-start: 1px solid var(--ow-line); }
.ow-stat-num {
	font-family: var(--ow-font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1;
	color: var(--ow-ink);
	display: block;
	white-space: nowrap;
}
.ow-stat-label {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ow-muted);
	display: block;
	margin-block-start: 9px;
	line-height: 1.5;
}

.ow-hero-media { position: relative; }
.ow-hero-media .ow-arch img { aspect-ratio: 4 / 5; }

.ow-review-badge {
	position: absolute;
	inset-block-end: -22px;
	inset-inline-start: -14px;
	background-color: var(--ow-bone);
	border: 1px solid var(--ow-line);
	border-radius: 4px;
	padding: 14px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-shadow: 0 20px 46px -34px rgba(35, 39, 31, 0.6);
	max-width: calc(100% - 24px);
}
.ow-stars { color: var(--ow-sage); font-size: 12px; letter-spacing: 2px; }
.ow-review-score { font-family: var(--ow-font-display); font-size: 22px; line-height: 1; }
.ow-review-count {
	font-size: 9.5px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ow-muted);
}

@media (max-width: 767px) {
	.ow-review-badge {
		position: static;
		margin-block-start: 16px;
		max-width: none;
		box-shadow: none;
	}
}

/* --------------------------------------------------------------------------
   10. MARQUEE
   -------------------------------------------------------------------------- */
.ow-marquee-wrap {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	margin-block-start: 44px;
}
.ow-marquee-track {
	display: flex;
	width: max-content;
	gap: 12px;
	animation: ow-marquee 40s linear infinite;
}
.ow-marquee-wrap:hover .ow-marquee-track { animation-play-state: paused; }
@keyframes ow-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.ow-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	border: 1px solid var(--ow-line);
	border-radius: 100px;
	padding: 11px 20px;
	font-size: 13px;
	color: var(--ow-ink);
	background-color: var(--ow-bone);
}
.ow-chip::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--ow-sage);
	flex: none;
}

/* --------------------------------------------------------------------------
   11. SECTION HEADER BLOCK
   -------------------------------------------------------------------------- */
.ow-sec-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
	margin-block-end: 56px;
	max-width: 760px;
}
.ow-sec-head--center { align-items: center; text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. PRODUCT CARDS
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
		}
@media (max-width: 640px) {
	}

.ow-card {
	background-color: var(--ow-bone);
	border: 1px solid var(--ow-line);
	border-radius: 4px;
	padding: 16px 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	transition: transform 500ms var(--ow-ease), border-color 300ms ease,
		box-shadow 300ms ease;
}
.ow-card:hover {
	transform: translateY(-4px);
	border-color: var(--ow-sage);
	box-shadow: 0 10px 24px -18px rgba(35, 39, 31, 0.35);
}

.ow-card-media { position: relative; overflow: hidden; border-radius: var(--ow-arch); }
.ow-card-media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 500ms var(--ow-ease);
}
.ow-card:hover .ow-card-media img { transform: scale(1.04); }

.ow-badge {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	background-color: var(--ow-bone);
	border: 1px solid var(--ow-line);
	border-radius: 100px;
	padding: 5px 11px;
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ow-sage-deep);
	z-index: 2;
}

.ow-card-body { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ow-card-price { margin-block-start: 6px; display: flex; flex-direction: column; gap: 6px; }
.ow-card .ow-btn { margin-block-start: 14px; }

/* --------------------------------------------------------------------------
   13. PROTOCOL CARDS (slate band)
   -------------------------------------------------------------------------- */
.ow-protocol {
	position: relative;
	border: 1px solid var(--ow-line-light);
	border-radius: 4px;
	padding: 30px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	background-color: rgba(251, 250, 247, 0.03);
	transition: transform 500ms var(--ow-ease), border-color 300ms ease;
}
.ow-protocol:hover { transform: translateY(-4px); border-color: rgba(251, 250, 247, 0.5); }
.ow-protocol--featured {
	background-color: rgba(251, 250, 247, 0.09);
	border-color: rgba(251, 250, 247, 0.4);
}

.ow-protocol .ow-eyebrow .elementor-heading-title { color: rgba(251, 250, 247, 0.65); }
.ow-protocol-badge {
	position: absolute;
	inset-block-start: -12px;
	inset-inline-start: 26px;
	background-color: var(--ow-sage);
	color: var(--ow-bone);
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 6px 13px;
	border-radius: 100px;
}

.ow-feature-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ow-feature-list li {
	position: relative;
	padding-inline-start: 24px;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(251, 250, 247, 0.85);
}
.ow-feature-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 7px;
	width: 10px;
	height: 5px;
	border-inline-start: 1.5px solid var(--ow-sage);
	border-block-end: 1.5px solid var(--ow-sage);
	transform: rotate(-45deg);
}

.ow-protocol-price { margin-block-start: auto; padding-block-start: 22px; }
.ow-protocol-price .ow-price { color: var(--ow-bone); }
.ow-protocol-price .ow-price-unit { color: rgba(251, 250, 247, 0.65); }

/* --------------------------------------------------------------------------
   14. HOW IT WORKS
   -------------------------------------------------------------------------- */
.ow-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	position: relative;
}
.ow-steps::before {
	content: "";
	position: absolute;
	inset-block-start: 30px;
	inset-inline: 6% 6%;
	height: 1px;
	background-color: var(--ow-line);
	z-index: 0;
}
@media (max-width: 1024px) {
	.ow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
	.ow-steps::before { display: none; }
}
@media (max-width: 640px) {
	.ow-steps { grid-template-columns: minmax(0, 1fr); }
}

.ow-step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.ow-step-num {
	font-family: var(--ow-font-display);
	font-size: 76px;
	line-height: 0.8;
	color: var(--ow-sage);
	opacity: 0.22;
	display: block;
}
.ow-step h3 { margin-block-start: -6px; }

.ow-reassure {
	margin-block-start: 56px;
	text-align: center;
	font-size: 13px;
	color: var(--ow-muted);
}

/* --------------------------------------------------------------------------
   15. TESTIMONIALS
   -------------------------------------------------------------------------- */
.ow-reviews {
	columns: 3;
	column-gap: 20px;
}
@media (max-width: 1024px) { .ow-reviews { columns: 2; } }
@media (max-width: 640px) { .ow-reviews { columns: 1; } }

.ow-review {
	break-inside: avoid;
	margin-block-end: 20px;
	background-color: var(--ow-bone);
	border: 1px solid var(--ow-line);
	border-radius: 4px;
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color 300ms ease, transform 500ms var(--ow-ease);
}
.ow-review:hover { border-color: var(--ow-sage); transform: translateY(-3px); }
.ow-review-text { font-size: 13.5px; line-height: 1.72; color: var(--ow-ink); }
.ow-review-name { font-family: var(--ow-font-display); font-size: 16px; color: var(--ow-muted); }

/* --------------------------------------------------------------------------
   16. DIFFERENTIATORS
   -------------------------------------------------------------------------- */
.ow-diff { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.ow-diff-media { overflow: hidden; border-radius: var(--ow-arch); }
.ow-diff-media img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 600ms var(--ow-ease);
}
.ow-diff:hover .ow-diff-media img { transform: scale(1.04); }
.ow-diff-body { display: flex; flex-direction: column; gap: 10px; }
.ow-diff-body p { font-size: 13px; line-height: 1.7; color: var(--ow-muted); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.ow-faq { border-top: 1px solid var(--ow-line); max-width: 900px; }
.ow-faq-item { border-bottom: 1px solid var(--ow-line); }
.ow-faq-q {
	width: 100%;
	background: none;
	border: 0;
	padding: 26px 44px 26px 0;
	text-align: start;
	font-family: var(--ow-font-display);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 500;
	color: var(--ow-ink);
	cursor: pointer;
	position: relative;
	line-height: 1.35;
	display: block;
}
.ow-faq-q::after {
	content: "";
	position: absolute;
	inset-inline-end: 6px;
	inset-block-start: 50%;
	width: 13px;
	height: 13px;
	background:
		linear-gradient(var(--ow-sage), var(--ow-sage)) center / 13px 1.5px no-repeat,
		linear-gradient(var(--ow-sage), var(--ow-sage)) center / 1.5px 13px no-repeat;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 320ms var(--ow-ease);
}
.ow-faq-item[data-open="true"] .ow-faq-q::after {
	transform: translateY(-50%) rotate(90deg);
	background: linear-gradient(var(--ow-sage), var(--ow-sage)) center / 13px 1.5px no-repeat;
}
.ow-faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms var(--ow-ease);
}
.ow-faq-item[data-open="true"] .ow-faq-a { grid-template-rows: 1fr; }
.ow-faq-a > div { overflow: hidden; }
.ow-faq-a p {
	font-size: 14px;
	line-height: 1.75;
	color: var(--ow-muted);
	padding-block-end: 28px;
	max-width: 68ch;
}

/* --------------------------------------------------------------------------
   18. CLOSING CTA
   -------------------------------------------------------------------------- */
.ow-closing { text-align: center; }
.ow-closing .ow-h2 .elementor-heading-title { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.ow-closing-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: 720px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.ow-footer {
	background-color: var(--ow-bone);
	border-top: 1px solid var(--ow-line);
	padding-block: 72px 0;
}
.ow-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	gap: 40px;
}
@media (max-width: 1024px) { .ow-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } }
@media (max-width: 640px) { .ow-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

.ow-footer-brand { display: flex; flex-direction: column; gap: 18px; }
.ow-footer-brand img { height: 38px; width: auto; }
.ow-footer-brand p { font-size: 13px; line-height: 1.7; color: var(--ow-muted); max-width: 34ch; }

.ow-store-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.ow-store-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--ow-line);
	border-radius: 4px;
	padding: 9px 14px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ow-muted);
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease;
}
.ow-store-badge:hover { border-color: var(--ow-sage); color: var(--ow-sage-deep); }

.ow-footer-col h4 {
	font-family: var(--ow-font-sans);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ow-ink);
	margin-block-end: 18px;
}
.ow-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ow-footer-col a { font-size: 13px; color: var(--ow-muted); text-decoration: none; transition: color 180ms ease; }
.ow-footer-col a:hover { color: var(--ow-sage-deep); }

.ow-footer-bottom {
	margin-block-start: 60px;
	border-top: 1px solid var(--ow-line);
	padding-block: 24px 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ow-footer-legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ow-footer-legal span,
.ow-footer-legal a { font-size: 11.5px; color: var(--ow-muted); text-decoration: none; }
.ow-footer-legal a:hover { color: var(--ow-sage-deep); }

.ow-social { display: flex; gap: 8px; }
.ow-social a {
	width: 34px;
	height: 34px;
	border: 1px solid var(--ow-line);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ow-muted);
	transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.ow-social a:hover { border-color: var(--ow-sage); color: var(--ow-bone); background-color: var(--ow-sage); }
.ow-social svg { width: 14px; height: 14px; fill: currentColor; }

/* --------------------------------------------------------------------------
   20. MOTION — reveal + hero load choreography
   -------------------------------------------------------------------------- */
.ow-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms var(--ow-ease), transform 700ms var(--ow-ease);
	transition-delay: var(--ow-delay, 0ms);
}
.ow-reveal.is-visible { opacity: 1; transform: none; }

@keyframes ow-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
.ow-load { opacity: 0; animation: ow-rise 700ms var(--ow-ease) forwards; animation-delay: var(--ow-delay, 0ms); }

@keyframes ow-unveil {
	from { clip-path: inset(0 0 100% 0); }
	to { clip-path: inset(0 0 0 0); }
}
.ow-unveil { animation: ow-unveil 900ms var(--ow-ease) forwards; animation-delay: var(--ow-delay, 0ms); }

/* Editor safety — never leave content invisible inside Elementor */
.elementor-editor-active .ow-reveal,
.elementor-editor-preview .ow-reveal {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
		*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
	.ow-marquee-track { transform: none !important; }
	.ow-reveal, .ow-load { opacity: 1 !important; transform: none !important; }
	.ow-unveil { clip-path: none !important; }
}

/* ==========================================================================
   22. FAQ — the question is a heading widget, not a native <button>
   ========================================================================== */
.ow-faq-q.ow-faq-q {
	cursor: pointer;
	position: relative;
	padding: 26px 44px 26px 0;
	width: 100%;
}
.ow-faq-q.ow-faq-q .elementor-heading-title {
	font-family: var(--ow-font-display);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 500;
	color: var(--ow-ink);
	line-height: 1.35;
	transition: color 200ms ease;
}
.ow-faq-q.ow-faq-q:hover .elementor-heading-title { color: var(--ow-sage-deep); }

.ow-faq-a.ow-faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms var(--ow-ease);
	padding: 0;
}
.ow-faq-item.ow-faq-item[data-open="true"] .ow-faq-a { grid-template-rows: 1fr; }
.ow-faq-a.ow-faq-a > * { overflow: hidden; min-height: 0; }

/* ==========================================================================
   23. HERO LOAD CHOREOGRAPHY — 90ms stagger down the column
   ========================================================================== */
.ow-hero-copy > .ow-load:nth-child(1) { --ow-delay: 0ms; }
.ow-hero-copy > .ow-load:nth-child(2) { --ow-delay: 90ms; }
.ow-hero-copy > .ow-load:nth-child(3) { --ow-delay: 180ms; }
.ow-hero-copy > .ow-load:nth-child(4) { --ow-delay: 270ms; }
.ow-hero-copy > .ow-load:nth-child(5) { --ow-delay: 360ms; }
.ow-hero-media .ow-unveil { --ow-delay: 450ms; }

/* ==========================================================================
   24. PROTOCOL CARD BACKGROUNDS — soft darkened texture behind each card
   ========================================================================== */
.ow-protocol::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 90% at 20% 0%, rgba(251, 250, 247, 0.09), transparent 70%);
	pointer-events: none;
}
.ow-protocol > * { position: relative; z-index: 1; }


/* ==========================================================================
   26. ID-BASED HOOKS  (v2)
   Layout, colour and typography are now native Elementor settings. These
   rules only add the things Elementor cannot express: image cropping,
   hover states, the accordion, the marquee and scroll reveals. They key off
   element IDs, which Elementor always renders, so they never depend on the
   CSS Classes field landing.
   ========================================================================== */

/* --- Image cropping ------------------------------------------------------ */
[id^="ow-img-prod-"] img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 500ms var(--ow-ease);
}
[id^="ow-img-diff-"] img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	display: block;
	transition: transform 600ms var(--ow-ease);
}
#ow-img-hero img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	display: block;
}
[id^="ow-img-"] { overflow: hidden; border-radius: 999px 999px 12px 12px; }
[id^="ow-img-"] figure,
[id^="ow-img-"] .elementor-widget-container { margin: 0; }

/* --- Card hover ---------------------------------------------------------- */
[id^="product-"],
[id^="protocol-"],
[id^="ow-diff-"] {
	transition: transform 500ms var(--ow-ease), border-color 300ms ease,
		box-shadow 300ms ease;
}
[id^="product-"]:hover,
[id^="ow-diff-"]:hover { transform: translateY(-4px); }
[id^="product-"]:hover { border-color: var(--ow-sage) !important; box-shadow: 0 10px 24px -18px rgba(35, 39, 31, 0.35); }
[id^="protocol-"]:hover { transform: translateY(-4px); border-color: rgba(251, 250, 247, 0.5) !important; }
[id^="product-"]:hover [id^="ow-img-prod-"] img,
[id^="ow-diff-"]:hover [id^="ow-img-diff-"] img { transform: scale(1.04); }

/* --- Step numerals ------------------------------------------------------- */
[id^="ow-step-"] { position: relative; }

/* --- FAQ accordion ------------------------------------------------------- */
[id^="ow-faq-q-"] {
	cursor: pointer;
	position: relative;
	padding: 26px 46px 26px 0 !important;
}
[id^="ow-faq-q-"] .elementor-heading-title { transition: color 200ms ease; }
[id^="ow-faq-q-"]:hover .elementor-heading-title { color: var(--ow-sage-deep) !important; }
[id^="ow-faq-q-"]::after {
	content: "";
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	width: 13px;
	height: 13px;
	background:
		linear-gradient(var(--ow-sage), var(--ow-sage)) center / 13px 1.5px no-repeat,
		linear-gradient(var(--ow-sage), var(--ow-sage)) center / 1.5px 13px no-repeat;
	transform: translateY(-50%);
	transition: transform 320ms var(--ow-ease);
}
[id^="ow-faq-item-"][data-open="true"] [id^="ow-faq-q-"]::after {
	transform: translateY(-50%) rotate(90deg);
	background: linear-gradient(var(--ow-sage), var(--ow-sage)) center / 13px 1.5px no-repeat;
}
[id^="ow-faq-a-"] {
	display: grid !important;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms var(--ow-ease);
	padding: 0 !important;
}
[id^="ow-faq-item-"][data-open="true"] [id^="ow-faq-a-"] { grid-template-rows: 1fr; }
[id^="ow-faq-a-"] > * { overflow: hidden; min-height: 0; }
[id^="ow-faq-a-"] p { padding-block-end: 28px; max-width: 68ch; }

/* --- The italic sage accent word, without needing a class ---------------- */
.elementor-heading-title em {
	font-style: italic;
	color: var(--ow-sage);
	font-weight: 400;
}
#protocols .elementor-heading-title em,
[id^="protocol-"] .elementor-heading-title em { color: #cdd4bd; }

/* --- Eyebrow dash -------------------------------------------------------- */
.ow-eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background-color: var(--ow-sage);
	margin-inline-end: 12px;
	vertical-align: middle;
}

/* --- Full-bleed background for the slate band --------------------------- */
#protocols { position: relative; }

/* ==========================================================================
   27. THEME RESET  (v2.1)
   Hello Elementor styles bare <button> and <a> with the global accent colour
   (#D30C5C by default). Our header, mobile panel and announcement bar are raw
   markup, so they inherit it. Neutralise it inside kit markup only — the rest
   of the site keeps the theme's styling.
   ========================================================================== */
.ow-header button,
.ow-header button:hover,
.ow-header button:focus,
.ow-mobile-panel button,
.ow-mobile-panel button:hover,
.ow-announce button,
.ow-announce button:hover {
	background-color: transparent !important;
	background-image: none !important;
	border: 0;
	box-shadow: none !important;
	text-shadow: none;
	font-family: var(--ow-font-sans);
	text-transform: none;
	letter-spacing: normal;
}

.ow-header a,
.ow-header a:hover,
.ow-header a:visited,
.ow-header a:focus,
.ow-mobile-panel a,
.ow-mobile-panel a:visited {
	text-decoration: none;
	box-shadow: none;
}

/* Nav links and triggers */
.ow-nav-link,
.ow-nav-link:visited { color: var(--ow-ink) !important; }
.ow-nav-link:hover,
.ow-nav-link:focus-visible,
.ow-nav-link[aria-expanded="true"] {
	color: var(--ow-sage-deep) !important;
	background-color: transparent !important;
}

/* Dropdown panel links */
.ow-dropdown a,
.ow-dropdown a:visited { color: var(--ow-ink) !important; }
.ow-dropdown a:hover,
.ow-dropdown a:focus-visible {
	color: var(--ow-sage-deep) !important;
	background-color: var(--ow-sage-tint) !important;
}

/* Member Login */
.ow-header-login,
.ow-header-login:visited { color: var(--ow-ink) !important; }
.ow-header-login:hover { color: var(--ow-sage-deep) !important; }

/* Get Started — the standalone anchor button used in the header and
   mobile panel (not an Elementor button widget). */
.ow-btn-el,
.ow-btn-el:visited {
	font-family: var(--ow-font-sans);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border-radius: 4px;
	padding: 14px 26px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease,
		color 200ms ease, transform 200ms var(--ow-ease);
}
.ow-btn-el--solid,
.ow-btn-el--solid:visited {
	background-color: var(--ow-sage) !important;
	color: var(--ow-bone) !important;
	border-color: var(--ow-sage) !important;
}
.ow-btn-el--solid:hover,
.ow-btn-el--solid:focus-visible {
	background-color: var(--ow-sage-deep) !important;
	border-color: var(--ow-sage-deep) !important;
	color: var(--ow-bone) !important;
	transform: translateY(-1px);
}

/* Mobile panel rows */
.ow-m-link,
.ow-m-link:visited { color: var(--ow-ink) !important; }
.ow-m-link:hover { color: var(--ow-sage-deep) !important; }
.ow-m-sub a,
.ow-m-sub a:visited { color: var(--ow-muted) !important; }
.ow-m-sub a:hover { color: var(--ow-sage-deep) !important; }

/* Announcement bar */
.ow-announce a,
.ow-announce a:visited,
.ow-announce a:hover,
.ow-announce-close { color: var(--ow-bone) !important; }

/* Burger bars */
.ow-burger span { background-color: var(--ow-ink) !important; }

/* Footer links */
.ow-footer-col a,
.ow-footer-col a:visited,
.ow-footer-legal a,
.ow-footer-legal a:visited,
.ow-store-badge,
.ow-store-badge:visited { color: var(--ow-muted) !important; text-decoration: none; }
.ow-footer-col a:hover,
.ow-footer-legal a:hover,
.ow-store-badge:hover { color: var(--ow-sage-deep) !important; }
.ow-social a,
.ow-social a:visited { color: var(--ow-muted) !important; background-color: transparent !important; }
.ow-social a:hover {
	color: var(--ow-bone) !important;
	background-color: var(--ow-sage) !important;
	border-color: var(--ow-sage) !important;
}

/* Any Elementor button widget the theme tries to recolour */
.elementor-widget-button .elementor-button:focus,
.elementor-widget-button .elementor-button:visited { text-decoration: none; }