@font-face {
	font-family: "RastantyCortez";
	src: url("../font/RastantyCortez.woff2?v=ab02e825e4cc") format("woff2"),
		 url("../font/RastantyCortez.woff?v=ab02e825e4cc") format("woff"),
		 url("../font/RastantyCortez.ttf?v=ab02e825e4cc") format("ttf");
	font-display: swap;
}

@font-face {
	font-family: "CrimsonPro";
	src: url("../font/CrimsonPro-VariableFont_wght.ttf?v=ab02e825e4cc");
	font-display: swap;
}

:root {
	--green1: #e4edea;
	--green2: #9bc1bc;
	--green3: #287d7b;
	--green4: #2f7573;
	--green5: #1d5e5c;

	--timberwolf1: #ded5cf;
	--timberwolf2: #857971;

	--primaryBackground: #f9faf7;
	--primaryForeground: #3d3d3d;
	--secondaryForeground: #8c8c8c;

	--headerBackground: rgba(255, 255, 255, 0.85);
	--footerBackground: #1e2e2d;
	--footerForeground: #f9faf7;

	--heroBackground: var(--green2);
	--heroForeground: #f9faf7;

	--accent: var(--green3);

	--buttonBackground: transparent;
	--buttonForeground: var(--accent);
	--buttonHoverBackground: var(--green5);
	--buttonHoverForeground: #fff;

	--border: #e8e8e8;
	--shadow: 0 2px 20px rgb(0 0 0 / 5%);
	--shadow-hover: 0 12px 40px rgb(0 0 0 / 10%);
	--shadow2: -5px 0 10px -6px rgb(0 0 0 / 20%);

	--headerHeight: 76px;
	--gap: 24px;
	--padding: 24px;
	--borderRadius: 12px;
	--fontSize: 17px;
	--sectionPadding: 120px 48px;

	--normal: 300;
	--medium: 500;
	--bold: 700;

	--sans: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
	--serif: "Cormorant Garamond", "Georgia", serif;
	--script: "RastantyCortez", cursive;

	--gold: #b89968;

	--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

	--card-bg: linear-gradient(180deg, #ffffff 0%, #fafbf8 100%);
	--card-border: 1px solid rgba(40, 125, 123, 0.08);
	--card-shadow: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 1px 3px rgb(0 0 0 / 3%), 0 4px 12px rgb(40 125 123 / 5%), 0 16px 32px rgb(40 125 123 / 6%);
	--card-shadow-hover: 0 1px 0 rgb(255 255 255 / 60%) inset, 0 2px 6px rgb(0 0 0 / 4%), 0 12px 32px rgb(40 125 123 / 9%), 0 32px 64px rgb(40 125 123 / 11%);

	/* Blog color aliases — maps to the site design system */
	--teal: var(--green3);
	--teal-dark: var(--green5);
	--teal-deep: #143a39;
	--teal-light: var(--green1);
	--charcoal: var(--primaryForeground);
	--gray: var(--secondaryForeground);
	--gray-light: var(--border);
	--cream: #f5efe1;
	--off-white: var(--primaryBackground);
}

/* ---- Reset ---- */

html {
	scroll-behavior: smooth;
}

html.fixed, html.fixed body {
	overflow: hidden !important;
}

html, body {
	margin: 0;
	padding: 0;
	height: fit-content;
	width: 100%;
	min-width: 280px;
}

body {
	background-color: var(--primaryBackground);
	font-family: var(--serif);
	font-size: var(--fontSize);
	color: var(--primaryForeground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body * {
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	box-sizing: border-box;
	white-space: pre-line;
	font-size: var(--fontSize);
	font-weight: var(--normal);
}

body.mobile .desktop {
	display: none;
}
body:not(.mobile) .mobile {
	display: none;
}

div, header, main, section, footer, nav, ul {
	display: flex;
}

h1, h2, h3, h4, h5, h6, p, ul, li {
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	display: block;
}

button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

#mobile {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 0;
	width: 0;
}

#content {
	display: flex;
	opacity: 1;
}

.flex {
	display: flex !important;
}

/* ---- Header ---- */

main {
	margin-top: var(--headerHeight);
	flex-direction: column;
	overflow-x: hidden;
}

/* Dark-hero pages: hero extends under the transparent header */
body:is([data-page=home],[data-page=membership],[data-page=enroll],[data-page=meetngreet],[data-page=blog],[data-page=thank-you]) main,
body[data-page^="blog-"] main {
	margin-top: 0;
}

header {
	height: var(--headerHeight);
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--accent);
	border-bottom: 1px solid transparent;
	position: fixed;
	top: 0;
	z-index: 100;
	transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}

header .container {
	flex-direction: row;
	justify-content: space-between;
	padding: 0 48px;
}

/* Logo - shared base */
.logo {
	width: fit-content;
	letter-spacing: -0.5px;
	flex-shrink: 0;
	font-weight: var(--bold);
	color: var(--accent);
	font-family: var(--script);
}

header .logo {
	font-size: 3.5em;
	color: #fff;
	transition: color 0.35s ease;
}

header .button[data-action=menu] {
	padding: 20px;
	margin-right: -20px;
}

/* ---- Navigation ---- */

.menu {
	width: fit-content;
}

header .menu > .item {
	height: auto;
	width: fit-content;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.8px;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition), opacity var(--transition);
	opacity: 1;
}

header .menu > .item:hover {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.6);
	opacity: 1;
}

header .menu > .item.active-nav,
header .menu > a[aria-current="page"] {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

header .menu > .item.button {
	border: 1.5px solid var(--accent);
	padding: 8px 22px;
	border-radius: 100px;
	font-size: 11px;
	letter-spacing: 1.8px;
	opacity: 1;
	background-color: var(--accent);
	color: #fff;
}
header .menu > .item.button:hover {
	background-color: var(--green5);
	color: #fff !important;
	border-color: var(--green5);
}

/* Hamburger lines: white when header is transparent */
header .line {
	background: rgba(255, 255, 255, 0.9);
	transition: background 0.35s ease, all 0.3s ease;
}

/* ---- Header scrolled / opaque states ---- */

header.scrolled,
header.opaque {
	background-color: var(--headerBackground);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

header.scrolled .logo,
header.opaque .logo {
	color: var(--accent);
}

header.scrolled .menu > .item,
header.opaque .menu > .item {
	color: var(--primaryForeground);
	opacity: 0.7;
}

header.scrolled .menu > .item:hover,
header.opaque .menu > .item:hover {
	color: var(--accent);
	border-bottom-color: var(--accent);
	opacity: 1;
}

header.scrolled .menu > .item.active-nav,
header.scrolled .menu > a[aria-current="page"],
header.opaque .menu > .item.active-nav,
header.opaque .menu > a[aria-current="page"] {
	color: var(--accent);
	border-bottom-color: var(--accent);
	opacity: 1;
}

header.scrolled .line,
header.opaque .line {
	background: var(--green4);
}

/* ---- Container ---- */

.container {
	flex: 1;
	max-width: 1200px;
	padding: var(--padding);
}

/* ---- Actions & Buttons ---- */

.action {
	user-select: none;
	justify-content: center;
	align-items: center;
	pointer-events: auto;
	font-weight: var(--bold);
}
.action * {
	pointer-events: none;
}
.action:hover {
	cursor: pointer;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 16px 36px;
	border: 1.5px solid var(--accent);
	border-radius: 100px;
	background-color: var(--buttonBackground);
	color: var(--buttonForeground);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition: all var(--transition);
}
.button:not(.transparent):hover {
	background-color: var(--buttonHoverBackground);
	color: var(--buttonHoverForeground) !important;
	border-color: var(--buttonHoverBackground);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgb(40 125 123 / 30%);
	filter: none;
}
.button * {
	pointer-events: none;
}
.button.transparent {
	border-color: transparent;
	background-color: transparent;
	padding: 0;
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--script);
}
.button.transparent:hover {
	filter: none;
	transform: none;
	box-shadow: none;
}

.button.filled {
	background-color: var(--accent);
	color: #fff;
}

.button.timberwolf {
	border-color: var(--timberwolf2);
	color: var(--timberwolf2);
}
.button.timberwolf:hover {
	background-color: var(--timberwolf2);
	border-color: var(--timberwolf2);
}

.button.white {
	border-color: rgba(255,255,255,0.5);
	color: #fff;
	backdrop-filter: blur(8px);
	background-color: rgba(255,255,255,0.1);
}
.button.white:hover {
	background-color: #fff;
	color: var(--green5) !important;
	border-color: #fff;
	box-shadow: 0 6px 24px rgb(0 0 0 / 20%);
}
.button.white.outline {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: none;
}

/* ---- Inline links (within prose) ---- */

a.inline-link {
	display: inline;
	width: auto;
	color: var(--green3);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(40, 125, 123, 0.4);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition), text-decoration-color var(--transition);
}
a.inline-link:hover {
	color: var(--green5);
	text-decoration-color: currentColor;
}

/* ---- Items ---- */

.items {
	flex-direction: row;
	gap: var(--gap);
}
.items > .item {
	color: var(--primaryForeground);
	text-align: center;
}

/* ---- Cards ---- */

.card {
	border-radius: var(--borderRadius);
	padding: calc(var(--padding) * 1.5);
	box-shadow: var(--shadow);
	transition: box-shadow var(--transition), transform var(--transition);
}

/* ---- Layout ---- */

.row {
	display: flex;
	flex-direction: row;
}
.row > .icon {
	width: 1em;
	height: 1em;
	top: 1.5px;
}

.column {
	display: flex;
	flex-direction: column;
}

/* ---- Section Label ---- */

.section-label {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 16px;
	opacity: 0.85;
	text-align: center;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
.section-label::before,
.section-label::after {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background-color: currentColor;
	opacity: 0.45;
	flex-shrink: 0;
}
.section-label.on-dark {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}
.section-label.on-dark-subtle {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1;
}

/* ---- Sections ---- */

section {
	padding: var(--sectionPadding);
}

section .title {
	font-size: 3.8em;
	font-weight: var(--bold);
	text-align: center;
	line-height: 1.05;
	letter-spacing: -0.5px;
	font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "calt" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: geometricPrecision;
}

section .subtitle {
	font-size: 1.25em;
	text-align: center;
	color: var(--secondaryForeground);
	font-weight: var(--normal);
	line-height: 1.7;
	max-width: 520px;
}

section .content {
	flex: 1;
	font-size: 1.15em;
	color: var(--primaryForeground);
	line-height: 1.75;
	padding: var(--padding);
	padding-top: 0;
	padding-bottom: 15px;
	gap: calc(var(--gap) * 1.5);
}

section.green1 {
	background-color: var(--green1);
	color: var(--accent);
}

section.green2 {
	background-color: var(--green2);
	color: var(--heroForeground);
}

/* ======================================================
   HOME PAGE
   ====================================================== */

/* ---- Hero (split-screen) ---- */

section[data-name=hero] {
	padding: 0;
	min-height: 72vh;
	max-height: 700px;
	background: linear-gradient(150deg, #a8cec9 0%, #287d7b 42%, #143a39 100%);
	overflow: hidden;
}

section[data-name=hero] .container {
	max-width: 860px;
	padding: 100px 48px;
	align-items: center;
	justify-content: center;
	gap: 0;
}

section[data-name=hero] .hero-text,
section[data-name=hero] .hero-text-centered {
	align-items: center;
	text-align: center;
	gap: 28px;
	justify-content: center;
}

section[data-name=hero] .hero-text .section-label {
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}
section[data-name=hero] .hero-text .section-label::before,
section[data-name=hero] .hero-text .section-label::after {
	display: none;
}

section[data-name=hero] .hero-text .title {
	font-family: var(--script);
	font-size: clamp(3.2em, 6vw, 6.4em);
	color: #fff;
	text-align: center;
	line-height: 0.92;
	letter-spacing: -1px;
}

section[data-name=hero] .hero-text .description {
	font-size: 1.15em;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	max-width: 540px;
}

section[data-name=hero] .hero-text .hero-buttons {
	flex-direction: row;
	gap: 14px;
	width: fit-content;
	justify-content: center;
}

/* ---- Hero Photo ---- */

.hero-photo {
	position: relative;
	overflow: hidden;
	align-self: stretch;
}

.hero-photo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	max-width: none;
}

/* Gradient blend: left edge of photo fades into teal */
.hero-photo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 55%;
	height: 100%;
	background: linear-gradient(to right, rgba(29,94,92,1) 0%, rgba(29,94,92,0.82) 28%, rgba(29,94,92,0.3) 48%, transparent 55%);
	z-index: 1;
	pointer-events: none;
}

/* Grain texture overlay for richness */
.hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 200px 200px;
	z-index: 2;
	pointer-events: none;
	opacity: 0.6;
}

/* Decorative floating circles (stay in text area) */
section[data-name=hero]::before {
	content: "";
	position: absolute;
	top: -60px;
	left: 20%;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	pointer-events: none;
}
section[data-name=hero]::after {
	content: "";
	position: absolute;
	bottom: -40px;
	left: -20px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.025);
	pointer-events: none;
}

/* ---- Why Section (4-pillar grid) ---- */

section[data-name=why] {
	background: #fff;
	padding: 96px 0 0;
}

section[data-name=why] .container {
	gap: 16px;
	text-align: center;
	align-items: center;
	padding-bottom: 72px;
	padding-left: 48px;
	padding-right: 48px;
}

section[data-name=why] .title {
	color: var(--primaryForeground);
	font-family: var(--script);
	font-size: 3.6em;
}

section[data-name=why] .subtitle {
	max-width: 520px;
	margin: 0 auto;
}

section[data-name=why] .why-pillars-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: stretch;
	border-top: 1px solid var(--border);
	width: 100%;
}

section[data-name=why] .why-pillar-card {
	padding: 44px 32px;
	border-right: 1px solid var(--border);
	border-top: 3px solid var(--green3);
	transition: background var(--transition);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
	align-items: flex-start;
}

section[data-name=why] .why-pillar-card:last-child {
	border-right: none;
}

section[data-name=why] .why-pillar-card:hover {
	background: var(--green1);
}

section[data-name=why] .why-pillar-icon {
	width: 32px;
	height: 32px;
	color: var(--green3);
	flex-shrink: 0;
}

section[data-name=why] .why-pillar-title {
	font-family: var(--serif);
	font-size: 1.3em;
	font-weight: 400;
	color: var(--primaryForeground);
	line-height: 1.25;
}

section[data-name=why] .why-pillar-body {
	font-family: var(--sans);
	font-size: 0.9em;
	font-weight: 300;
	color: var(--secondaryForeground);
	line-height: 1.78;
}

/* ---- Care Models Section ---- */

section[data-name=care-models] {
	background-color: var(--primaryBackground);
	padding: var(--sectionPadding);
}

section[data-name=care-models] .container {
	gap: 16px;
}

section[data-name=care-models] .title {
	color: var(--primaryForeground);
	font-family: var(--script);
}

section[data-name=care-models] .subtitle {
	margin-bottom: 8px;
}

section[data-name=care-models] .care-types-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin-top: 40px;
	border-top: 1px solid var(--border);
}
section[data-name=care-models] .care-type-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 16px;
	padding: 44px 36px;
	background: #fff;
	border-top: 3px solid var(--green3);
	border-right: 1px solid var(--border);
	text-decoration: none;
	color: inherit;
	transition: background 0.3s ease;
	border-radius: 0;
	box-shadow: none;
}
section[data-name=care-models] .care-type-card:last-child {
	border-right: none;
}
section[data-name=care-models] .care-type-card:hover {
	background: var(--green1);
}
section[data-name=care-models] .care-type-icon {
	width: 34px;
	height: 34px;
	color: var(--green4);
	flex-shrink: 0;
	margin-bottom: 6px;
}
section[data-name=care-models] .care-type-name {
	font-family: var(--serif);
	font-size: 1.25em;
	font-weight: 400;
	color: var(--primaryForeground);
	line-height: 1.25;
}
section[data-name=care-models] .care-type-desc {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 300;
	color: var(--secondaryForeground);
	line-height: 1.8;
}
section[data-name=care-models] .care-types-cta {
	margin-top: 36px;
	text-align: center;
}

/* ---- Services Preview ---- */

/* ---- How It Works ---- */

section[data-name=how-it-works] {
	background: #fff;
	padding: var(--sectionPadding);
}

section[data-name=how-it-works] .container {
	gap: 16px;
}

section[data-name=how-it-works] .title {
	font-family: var(--script);
	color: var(--green5);
}

.hiw-steps {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	max-width: 900px;
	width: 100%;
	margin: 56px auto 0;
	padding: 0 48px;
	gap: 0;
}

.hiw-step {
	display: block !important;
	align-items: flex-start !important;
	padding: 0 40px 0 0;
	border-left: 1px solid rgba(40, 125, 123, 0.15);
	padding-left: 32px;
}

.hiw-step-body {
	display: block !important;
	align-items: flex-start !important;
	width: 100%;
}

.hiw-step:first-child {
	border-left: none;
	padding-left: 0;
}

.hiw-num {
	display: block !important;
	align-items: flex-start !important;
	font-family: var(--serif);
	font-size: 3.5em;
	font-weight: 400;
	color: var(--accent);
	opacity: 0.25;
	line-height: 1;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
	text-align: left;
	width: 100%;
}

.hiw-title {
	display: block !important;
	align-items: flex-start !important;
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 700;
	color: var(--green5);
	letter-spacing: 0.01em;
	margin-bottom: 10px;
	text-align: left;
	width: 100%;
}

.hiw-desc {
	display: block !important;
	font-family: var(--sans);
	font-size: 0.88em;
	color: var(--secondaryForeground);
	line-height: 1.7;
	font-weight: 400;
	text-align: left;
	width: 100%;
}

@media (max-width: 780px) {
	.hiw-steps {
		grid-template-columns: 1fr;
		padding: 0 24px;
		gap: 36px;
	}
	.hiw-step {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid rgba(40, 125, 123, 0.15);
		padding-top: 32px;
	}
	.hiw-step:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* ---- Philosophy Quote ---- */

section[data-name=philosophy-quote] {
	background: var(--green1);
	overflow: hidden;
	padding: 96px 48px;
}
section[data-name=philosophy-quote] .pq-layout {
	flex-direction: row;
	align-items: stretch;
	min-height: 440px;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: 24px;
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
section[data-name=philosophy-quote] .pq-photo {
	width: 42%;
	flex-shrink: 0;
	position: relative;
	overflow: visible;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 52px 28px 52px 52px;
}
section[data-name=philosophy-quote] .pq-photo-img {
	width: 100%;
	height: auto;
	aspect-ratio: 4/5;
	object-fit: cover;
	object-position: center 5%;
	display: block;
	border-radius: 63% 37% 48% 52% / 57% 44% 56% 43%;
	position: relative;
	z-index: 2;
}
section[data-name=philosophy-quote] .pq-photo::before {
	content: '';
	position: absolute;
	top: 44px; right: 20px; bottom: 44px; left: 44px;
	border-radius: 63% 37% 48% 52% / 57% 44% 56% 43%;
	border: 1.5px solid rgba(184, 153, 104, 0.5);
	transform: translate(12px, 12px);
	z-index: 1;
	pointer-events: none;
}
section[data-name=philosophy-quote] .pq-photo::after {
	content: '';
	position: absolute;
	top: 44px; right: 20px; bottom: 44px; left: 44px;
	border-radius: 63% 37% 48% 52% / 57% 44% 56% 43%;
	box-shadow: 0 8px 52px 0 rgba(40, 125, 123, 0.18);
	z-index: 1;
	pointer-events: none;
}
section[data-name=philosophy-quote] .pq-content-panel {
	flex: 1;
	align-items: flex-start;
	justify-content: center;
	padding: 72px 72px 72px 36px;
	position: relative;
}
section[data-name=philosophy-quote] .pq-inner {
	align-items: flex-start;
	gap: 32px;
	text-align: left;
	position: relative;
}
section[data-name=philosophy-quote] .pq-quote-wrap {
	position: relative;
	padding: 0 40px 28px 0;
}
section[data-name=philosophy-quote] .pq-mark {
	width: 30px;
	height: auto;
	color: var(--gold);
	opacity: 0.5;
	flex-shrink: 0;
	position: absolute;
}
section[data-name=philosophy-quote] .pq-mark-open {
	top: -4px;
	left: -4px;
}
section[data-name=philosophy-quote] .pq-mark-close {
	bottom: -4px;
	right: 0;
	transform: rotate(180deg);
}
section[data-name=philosophy-quote] .pq-text {
	font-family: var(--serif);
	font-size: clamp(1.3em, 2vw, 1.75em);
	font-weight: 400;
	font-style: italic;
	color: var(--primaryForeground);
	line-height: 1.8;
	letter-spacing: 0.01em;
	margin: 0;
	padding: 20px 36px;
	text-align: left;
}
section[data-name=philosophy-quote] .pq-attr {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-family: var(--sans);
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-top: 1px solid rgba(184,153,104,0.45);
	padding-top: 20px;
	margin-top: 4px;
	width: 100%;
}
section[data-name=philosophy-quote] .pq-name {
	color: var(--gold);
}
section[data-name=philosophy-quote] .pq-sep {
	color: rgba(61,61,61,0.3);
}
section[data-name=philosophy-quote] .pq-role {
	color: var(--green3);
}

/* ---- Services Preview ---- */

section[data-name=services-preview] {
	background-color: var(--green1);
	padding: var(--sectionPadding);
}

section[data-name=services-preview] .container {
	gap: 20px;
}

body[data-page=home] .svc-tags {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	max-width: 860px;
	width: 100%;
	margin: 48px auto 0;
	padding: 0 48px;
	row-gap: 0;
	column-gap: 0;
}

body[data-page=home] .svc-tags .svc-tag {
	display: block !important;
	padding: 24px 28px 24px 0;
	font-family: var(--serif);
	font-size: 1em;
	font-weight: 400;
	font-style: italic;
	color: var(--green5);
	letter-spacing: 0.01em;
	line-height: 1.3;
	position: relative;
}

/* Only draw a dividing border above row 2+ items (4-col layout) */
body[data-page=home] .svc-tags .svc-tag:nth-child(n+5) {
	border-top: 1px solid rgba(40, 125, 123, 0.18);
}


@media (max-width: 860px) {
	body[data-page=home] .svc-tags {
		grid-template-columns: repeat(2, 1fr);
		padding: 0 24px;
	}

	/* Reset 4-col rule, apply divider above row 2+ items (2-col layout) */
	body[data-page=home] .svc-tags .svc-tag:nth-child(n+5) {
		border-top: none;
	}

	body[data-page=home] .svc-tags .svc-tag:nth-child(n+3) {
		border-top: 1px solid rgba(40, 125, 123, 0.18);
	}
}

@media (max-width: 480px) {
	body[data-page=home] .svc-tags {
		grid-template-columns: 1fr;
	}

	/* Reset 2-col rule, apply divider below first item only (1-col layout) */
	body[data-page=home] .svc-tags .svc-tag:nth-child(n+3) {
		border-top: none;
	}

	body[data-page=home] .svc-tags .svc-tag:nth-child(n+2) {
		border-top: 1px solid rgba(40, 125, 123, 0.18);
	}
}

section[data-name=services-preview] .title {
	font-family: var(--script);
	color: var(--green5);
}

section[data-name=services-preview] .subtitle {
	color: var(--accent);
	opacity: 0.7;
}

section[data-name=services-preview] .services-grid-wrap {
	padding-top: 8px;
}

section[data-name=services-preview] .services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	width: 100%;
}

section[data-name=services-preview] .service-card {
	padding: 28px 20px;
	background: #fff;
	border-radius: 14px;
	font-size: 1em;
	color: var(--green5);
	font-weight: var(--medium);
	text-align: center;
	border: 1px solid rgba(40, 125, 123, 0.12);
	box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
	transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
}

section[data-name=services-preview] .service-card:hover {
	transform: translateY(-2px);
	border-color: rgba(40, 125, 123, 0.28);
	box-shadow: 0 8px 22px rgb(0 0 0 / 8%);
}

section[data-name=services-preview] .services-cta-wrap {
	display: flex;
	justify-content: center;
	padding-top: 8px;
}

/* ---- CTA Banner ---- */

section[data-name=cta],
section[data-name=waitlist] {
	background: linear-gradient(135deg, #287d7b 0%, #1d5e5c 100%);
	padding: 100px 48px;
	text-align: center;
	overflow: hidden;
	scroll-margin-top: var(--headerHeight);
}
section[data-name=cta]::before,
section[data-name=cta]::after {
	pointer-events: none;
}
section[data-name=cta]::before,
section[data-name=waitlist]::before {
	content: "";
	position: absolute;
	top: -80px;
	left: -40px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	pointer-events: none;
}
section[data-name=cta]::after,
section[data-name=waitlist]::after {
	content: "";
	position: absolute;
	bottom: -60px;
	right: -20px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

section[data-name=cta] .container,
section[data-name=waitlist] .container {
	gap: 20px;
}

section[data-name=cta] .title,
section[data-name=waitlist] .title {
	font-family: var(--script);
	color: #fff;
	font-size: 3.2em;
}

section[data-name=cta] .subtitle,
section[data-name=waitlist] .subtitle {
	color: rgba(255, 255, 255, 0.75);
	max-width: 520px;
}

section[data-name=cta] .cta-buttons {
	flex-direction: row;
	gap: 16px;
	width: fit-content;
	margin-top: 12px;
}

/* ---- Pre-enroll Form ---- */

form.preenroll {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 540px;
	margin-top: 12px;
	align-items: center;
}

form.preenroll .form-row {
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
}

form.preenroll input[type=text],
form.preenroll input[type=email],
form.preenroll input[type=tel] {
	flex: 1;
	padding: 14px 18px;
	font-size: 1em;
	font-family: var(--serif);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--borderRadius);
	background: #fff;
	color: var(--primaryForeground);
	width: 100%;
	outline: none;
	transition: border-color var(--transition), box-shadow var(--transition);
	text-align: left;
	align-items: flex-start;
}
form.preenroll input[type=text]::placeholder,
form.preenroll input[type=email]::placeholder,
form.preenroll input[type=tel]::placeholder {
	color: var(--secondaryForeground);
}
form.preenroll input[type=text]:focus,
form.preenroll input[type=email]:focus,
form.preenroll input[type=tel]:focus {
	border-color: var(--green3);
	box-shadow: 0 0 0 3px rgba(40, 125, 123, 0.2);
}

form.preenroll .hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

form.preenroll button.submit {
	margin-top: 4px;
}
form.preenroll button.submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
}

form.preenroll .form-message {
	font-size: 0.95em;
	min-height: 1.4em;
	text-align: center;
	width: 100%;
	color: inherit;
	opacity: 0.85;
}
form.preenroll .form-message.success {
	color: #6ee7a2;
	opacity: 1;
}
form.preenroll .form-message.error {
	color: #ffb3b3;
	opacity: 1;
}

/* ======================================================
   SERVICES PAGE — premium editorial redesign
   ====================================================== */

body[data-page=services] section[data-name=services] {
	background: var(--primaryBackground);
	padding: var(--sectionPadding);
}

body[data-page=services] main .container {
	gap: 40px;
}

body[data-page=services] .services-header {
	text-align: center;
	gap: 14px;
	padding-bottom: 8px;
	max-width: 640px;
	align-self: center;
}
body[data-page=services] .services-header .title {
	font-family: var(--script);
	font-size: clamp(3.2em, 6vw, 5.4em);
	color: var(--green5);
	line-height: 0.9;
}
body[data-page=services] .services-header .subtitle {
	font-size: 1.08em;
	color: var(--secondaryForeground);
	line-height: 1.7;
}

/* Grid */
body[data-page=services] .grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	width: 100%;
}

/* Cards — clean minimal panels */
body[data-page=services] .grid > .card {
	background: #ffffff;
	border: 1px solid rgba(40, 125, 123, 0.1);
	border-top: 2px solid var(--green2);
	border-radius: var(--borderRadius);
	color: var(--primaryForeground);
	padding: 36px 32px 32px;
	gap: 14px;
	align-items: flex-start;
	justify-content: flex-start;
	transition: box-shadow var(--transition), border-top-color var(--transition);
	overflow: hidden;
}
body[data-page=services] .grid > .card::before {
	display: none;
}
body[data-page=services] .grid > .card:hover {
	box-shadow: 0 8px 32px rgb(40 125 123 / 8%);
	border-top-color: var(--green3);
}

/* "How It Works" card — dark teal, stands apart */

/* Card title */
body[data-page=services] .card > .title {
	font-size: 2.1em;
	font-family: var(--script);
	color: var(--green5);
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(228, 237, 234, 0.9);
	margin-bottom: 2px;
	line-height: 1;
	width: 100%;
	text-align: left;
	align-items: flex-start;
}

/* Lead paragraph */
body[data-page=services] .card > .lead {
	font-family: var(--serif);
	font-size: 1.05em;
	font-style: italic;
	color: var(--secondaryForeground);
	line-height: 1.72;
	text-align: left;
	align-items: flex-start;
}

/* List items — clean dot style */
body[data-page=services] .list .item {
	color: var(--primaryForeground);
	font-size: 1em;
	line-height: 1.75;
	padding-left: 1.4ch;
	width: 100%;
	align-items: flex-start;
	text-align: left;
}
body[data-page=services] .list .item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--green3);
	mask-image: none;
	-webkit-mask-image: none;
}

/* Disclaimer */
body[data-page=services] .svc-omt-blurb {
	font-size: 0.88em;
	color: var(--secondaryForeground);
	line-height: 1.7;
	margin-top: 8px;
	align-self: flex-start;
}
body[data-page=services] .disclaimer {
	color: var(--secondaryForeground);
	font-size: 0.85em;
	text-align: center;
	opacity: 0.7;
	line-height: 1.6;
	max-width: 640px;
	align-self: center;
}

/* CTA banner — warm editorial treatment */
body[data-page=services] .services-cta {
	margin-top: 8px;
	padding: 52px 48px;
	background: linear-gradient(135deg, #143a39 0%, #1d5e5c 100%);
	border-radius: var(--borderRadius);
	border-top: none;
	border-left: 4px solid var(--gold);
	gap: 20px;
	text-align: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}
body[data-page=services] .services-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(40,125,123,0.22) 0%, transparent 70%);
	pointer-events: none;
}
body[data-page=services] .services-cta-text {
	font-family: var(--serif);
	font-size: 1.2em;
	font-style: italic;
	color: rgba(245, 239, 225, 0.9);
	line-height: 1.7;
	max-width: 560px;
	text-align: center;
	position: relative;
}
body[data-page=services] .services-cta-text .inline-link {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(184,153,104,0.4);
}
body[data-page=services] .services-cta-text .inline-link:hover {
	text-decoration-color: var(--gold);
}
body[data-page=services] .services-cta-buttons {
	flex-direction: row;
	gap: 12px;
	width: fit-content;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
}

/* ---- OMT Explainer Section ---- */

body[data-page=services] .omt-explainer-wrap {
	background: var(--green1);
	padding: 64px 48px;
	border-radius: var(--borderRadius);
	width: 100%;
}
body[data-page=services] .omt-explainer-inner {
	flex-direction: row;
	align-items: center;
	gap: 72px;
}
body[data-page=services] .omt-explainer-photo {
	width: 380px;
	flex-shrink: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0,0,0,0.14);
}
body[data-page=services] .omt-explainer-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
body[data-page=services] .omt-explainer-content {
	flex: 1;
	align-items: flex-start;
	gap: 16px;
}
body[data-page=services] .omt-explainer-content .title {
	font-family: var(--script);
	font-size: 2.4em;
	color: var(--green5);
	line-height: 1.15;
	text-align: left;
}
body[data-page=services] .omt-explainer-content p {
	color: var(--secondaryForeground);
	line-height: 1.75;
	font-size: 1em;
	text-align: left;
}
body[data-page=services] .omt-explainer-content .section-label {
	align-self: flex-start;
}

/* ---- List ---- */

.list .item {
	display: inline-block;
	padding-left: 2ch;
}
.list .item::before {
	content: "";
	mask-image: url("../img/check.png?v=ab02e825e4cc");
	mask-size: contain;
	mask-repeat: no-repeat;
	position: absolute;
	left: 0;
	top: 7px;
	font-weight: var(--bold);
	height: 1ch;
	width: 1ch;
}

/* ---- Grid ---- */

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: var(--gap);
}
.grid > .item, .grid > .item > .image {
	height: 100%;
}
.grid > .card > .content {
	justify-content: flex-start;
}
.grid > .card > .title {
	font-size: 2.6em;
}
.grid > .card .item {
	text-align: left;
}

/* ---- Utilities ---- */

.secondary {
	color: var(--secondaryForeground);
}
.secondary.disclaimer {
	text-align: center;
	padding-top: 16px;
	font-style: italic;
}

.separator {
	width: 2px;
	height: 100px;
	background-color: var(--border);
}

.handwritten {
	font-family: var(--script);
}

body[data-page=not-found] section[data-name=not-found] {
	padding: 120px 24px;
	text-align: center;
	min-height: calc(100vh - 200px);
}
body[data-page=not-found] section[data-name=not-found] .container {
	gap: 16px;
}
body[data-page=not-found] section[data-name=not-found] .title {
	font-family: var(--script);
	font-size: 3.2em;
	color: var(--green5);
}

/* ---- Enroll page ---- */

body:is([data-page=enroll], [data-page=meetngreet]) section[data-name=enroll-hero] {
	background: linear-gradient(160deg, #a8cec9 0%, #287d7b 50%, #1d5e5c 100%);
	padding: calc(var(--headerHeight) + 32px) 48px 72px;
	text-align: center;
}
body:is([data-page=enroll], [data-page=meetngreet]) section[data-name=enroll-hero] .container {
	gap: 14px;
	text-align: center;
}
body:is([data-page=enroll], [data-page=meetngreet]) section[data-name=enroll-hero] .title {
	font-family: var(--script);
	color: #fff;
	font-size: 3.2em;
}
body:is([data-page=enroll], [data-page=meetngreet]) section[data-name=enroll-hero] .subtitle {
	color: rgba(255, 255, 255, 0.85);
	max-width: 520px;
}
body:is([data-page=enroll], [data-page=meetngreet]) section[data-name=enroll-form] {
	background: var(--green1);
	padding: var(--sectionPadding);
}
body:is([data-page=enroll], [data-page=meetngreet]) section[data-name=enroll-form] .container {
	gap: 20px;
	max-width: 600px;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-card {
	background: #fff;
	border: 1px solid var(--border);
	border-top: 3px solid var(--green3);
	border-radius: var(--borderRadius);
	padding: 44px 40px 40px;
	box-shadow: var(--card-shadow);
	gap: 24px;
	width: 100%;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-type-chip {
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: #fff;
	background: var(--green3);
	padding: 5px 14px;
	border-radius: 100px;
	width: fit-content;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-form-inner {
	gap: 20px;
	width: 100%;
	align-items: flex-start;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-field {
	gap: 7px;
	width: 100%;
	align-items: flex-start;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-field label {
	font-family: var(--sans);
	font-size: 0.85em;
	font-weight: 600;
	color: var(--primaryForeground);
	width: fit-content;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-req {
	color: var(--green4);
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-opt {
	color: var(--secondaryForeground);
	font-weight: 400;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-field input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--sans);
	font-size: 1em;
	color: var(--primaryForeground);
	background: #fff;
	transition: border-color var(--transition), box-shadow var(--transition);
	outline: none;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-field input:focus {
	border-color: var(--green3);
	box-shadow: 0 0 0 3px rgba(40, 125, 123, 0.12);
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-submit {
	align-self: stretch;
	width: 100%;
	margin-top: 4px;
}
body:is([data-page=enroll], [data-page=meetngreet]) .enroll-note {
	font-family: var(--sans);
	font-size: 0.82em;
	color: var(--secondaryForeground);
	text-align: center;
}
body[data-page=meetngreet] .enroll-disclaimer {
	font-family: var(--sans);
	font-size: 0.78em;
	color: var(--secondaryForeground);
	text-align: center;
	opacity: 0.7;
	max-width: 480px;
}

/* ---- Images ---- */

.image {
	background-color: var(--primaryForeground);
}
.image[data-name=nelly] {
	background-image: url("../img/nelly.png?v=ab02e825e4cc");
	background-size: cover;
	background-position: center;
}
.image[data-name=phone] {
	mask-image: url("../img/phone.png?v=ab02e825e4cc");
}
.image[data-name=calendar] {
	mask-image: url("../img/calendar.png?v=ab02e825e4cc");
}
.image[data-name=chair] {
	mask-image: url("../img/chair.png?v=ab02e825e4cc");
	mask-size: 40px;
}
.image[data-name=call] {
	mask-image: url("../img/call.png?v=ab02e825e4cc");
}
.image[data-name=email] {
	mask-image: url("../img/email.png?v=ab02e825e4cc");
}

/* ---- Hamburger ---- */

.hamburger {
	display: flex;
	flex-direction: column;
	width: 40px !important;
	height: 30px !important;
	justify-content: space-between;
	transition: all 0.3s ease;
	padding: 0;
	border-radius: 0;
	border: 0;
	transform: scale(0.55);
}

.line {
	display: block;
	width: 100%;
	height: 3px;
	background: var(--green4);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.button[data-action=menu].active > .hamburger > .line:nth-child(1) {
	transform: translateY(13px) rotate(45deg);
}
.button[data-action=menu].active > .hamburger > .line:nth-child(2) {
	opacity: 0;
}
.button[data-action=menu].active > .hamburger > .line:nth-child(3) {
	transform: translateY(-13px) rotate(-45deg);
}

/* ======================================================
   FOOTER
   ====================================================== */

footer {
	background: linear-gradient(180deg, #1e2e2d 0%, #1a2625 100%);
	color: var(--footerForeground);
	text-align: left !important;
	padding: 72px 0 0;
}

footer > section {
	padding: 0;
}

footer .container * {
	align-items: unset;
	justify-content: unset;
}

footer .container {
	padding: 0 48px;
}

footer .footer-top {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: space-between;
	align-items: flex-start;
}

footer .footer-info {
	gap: 20px;
	flex: 0 1 auto;
}

footer .footer-nav {
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
	align-items: flex-start;
}
footer .footer-nav-heading {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(155, 193, 188, 0.7);
	margin-bottom: 4px;
}
footer .footer-nav a {
	font-size: 0.95em;
	color: rgba(249, 250, 247, 0.7);
	transition: color var(--transition);
}
footer .footer-nav a:hover {
	color: var(--green2);
}
footer .footer-nav a[aria-current=page] {
	color: var(--footerForeground);
}

footer .logo {
	color: var(--footerForeground);
	font-size: 2.4em;
	margin-bottom: 4px;
}

footer .footer-links {
	gap: 12px;
}

footer .image {
	background-color: rgba(155, 193, 188, 0.5);
}

footer .row {
	gap: 0.75ch;
	align-items: center;
}

footer .row .text {
	font-size: 0.95em;
	color: rgba(249, 250, 247, 0.6);
	transition: color var(--transition);
}
footer .action:hover .text {
	color: var(--green2);
}
footer .action:hover {
	filter: none;
}

footer .bottom {
	margin-top: 48px;
	padding: 24px 0;
	border-top: 1px solid rgba(155, 193, 188, 0.1);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.5px;
	color: rgba(155, 193, 188, 0.3);
}

/* ======================================================
   ABOUT PAGE
   ====================================================== */

body[data-page=about] section[data-name=about] {
	padding-top: 80px;
	padding-bottom: 80px;
}

body[data-page=about] main .container {
	max-width: 760px;
	gap: 40px;
}

body[data-page=about] .about-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

body[data-page=about] .avatar {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 20px 50px rgb(40 125 123 / 22%);
	margin-bottom: 12px;
}

body[data-page=about] .avatar .image,
body[data-page=about] .avatar img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	object-fit: cover;
	object-position: center;
	display: block;
}

body[data-page=about] .avatar picture {
	display: contents;
}

body[data-page=about] .about-intro .section-label {
	color: var(--green3);
}

body[data-page=about] .about-intro .title {
	font-family: var(--script);
	font-size: 3.4em;
	color: var(--green5);
	line-height: 1;
}

body[data-page=about] .about-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body[data-page=about] .about-content p {
	font-size: 1.1em;
	line-height: 1.85;
	text-align: left;
	color: var(--primaryForeground);
	margin: 0;
}

body[data-page=about] section[data-name=philosophy] {
	background: linear-gradient(135deg, var(--green1) 0%, rgba(155, 193, 188, 0.25) 100%);
	padding: 80px 48px;
}

body[data-page=about] section[data-name=philosophy] .container {
	max-width: 760px;
	gap: 32px;
}

body[data-page=about] .philosophy-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

body[data-page=about] .philosophy-intro .section-label {
	color: var(--green3);
}

body[data-page=about] .philosophy-intro .title {
	font-family: var(--script);
	font-size: 3em;
	color: var(--green5);
	line-height: 1.1;
}

body[data-page=about] .philosophy-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body[data-page=about] .philosophy-content p {
	font-size: 1.1em;
	line-height: 1.85;
	text-align: left;
	color: var(--primaryForeground);
	margin: 0;
}

/* ======================================================
   CONTACT PAGE
   ====================================================== */

body[data-page=contact] section[data-name=contact] {
	padding-top: 80px;
}

body[data-page=contact] .contact-header {
	text-align: center;
	gap: 12px;
	margin-bottom: 24px;
}
body[data-page=contact] .contact-header .title {
	font-family: var(--script);
	color: var(--green5);
}

body[data-page=contact] .contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	align-items: stretch;
	gap: 48px;
}

body[data-page=contact] .contact-info {
	gap: 32px;
	justify-content: flex-start;
	padding: 40px;
	background: linear-gradient(135deg, var(--green1) 0%, rgba(155, 193, 188, 0.2) 100%);
	border-radius: var(--borderRadius);
}

body[data-page=contact] .contact-item {
	gap: 6px;
	align-items: flex-start;
}

body[data-page=contact] .contact-label {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--green3);
}

body[data-page=contact] .contact-value {
	font-size: 1.2em;
	color: var(--primaryForeground);
	line-height: 1.6;
}
body[data-page=contact] .contact-value.action:hover {
	color: var(--green5);
	filter: none;
}

body[data-page=contact] .contact-note {
	font-size: 0.9em;
	color: var(--secondaryForeground);
	font-style: italic;
	line-height: 1.5;
	margin-top: 4px;
}

body[data-page=contact] .hours-grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 32px;
	font-size: 1.05em;
}
body[data-page=contact] .hours-grid .day {
	font-weight: var(--medium);
	color: var(--primaryForeground);
}
body[data-page=contact] .hours-grid .time {
	color: var(--secondaryForeground);
}

body[data-page=contact] .contact-waitlist-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 48px;
	border-radius: var(--borderRadius);
	background: linear-gradient(160deg, #a8cec9 0%, #287d7b 55%, #1d5e5c 100%);
	color: var(--footerForeground);
	box-shadow: 0 8px 32px rgb(40 125 123 / 20%);
	justify-content: center;
	position: relative;
	overflow: hidden;
}

body[data-page=contact] .contact-waitlist-card::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 80%;
	height: 140%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
	pointer-events: none;
}

body[data-page=contact] .contact-waitlist-card > * {
	position: relative;
	z-index: 1;
}

body[data-page=contact] .contact-waitlist-card .waitlist-label {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

body[data-page=contact] .contact-waitlist-card .waitlist-heading {
	font-family: var(--script);
	font-size: 3em;
	line-height: 1;
	color: var(--footerForeground);
}

body[data-page=contact] .contact-waitlist-card .waitlist-text {
	font-size: 1.05em;
	line-height: 1.6;
	color: rgba(249, 250, 247, 0.9);
}

body[data-page=contact] .contact-waitlist-card form.preenroll {
	margin-top: 12px;
	max-width: none;
	align-items: stretch;
}

body[data-page=contact] .contact-waitlist-card form.preenroll button.submit {
	align-self: flex-start;
}

/* ======================================================
   MEMBERSHIP PAGE
   ====================================================== */

body[data-page=membership] section[data-name=membership-hero] {
	background: linear-gradient(160deg, #a8cec9 0%, #287d7b 50%, #1d5e5c 100%);
	padding: 100px 48px 80px;
	text-align: center;
	overflow: hidden;
}
body[data-page=membership] section[data-name=membership-hero] .container {
	text-align: center;
	gap: 16px;
}
body[data-page=membership] section[data-name=membership-hero]::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

body[data-page=membership] section[data-name=membership-hero] .title {
	font-family: var(--script);
	color: #fff;
	font-size: 4em;
}
body[data-page=membership] section[data-name=membership-hero] .subtitle {
	color: rgba(255, 255, 255, 0.8);
	max-width: 680px;
}
body[data-page=membership] section[data-name=membership-hero] .hero-blurb {
	font-family: var(--sans);
	font-size: 0.88em;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.7;
	max-width: 560px;
	text-align: center;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 14px 20px;
	backdrop-filter: blur(4px);
}
body[data-page=membership] section[data-name=membership-hero] .subtitle.membership-coming-soon {
	font-size: 1.05em;
	font-style: italic;
	color: rgba(255, 255, 255, 0.7);
	margin-top: -4px;
}
body[data-page=membership] section[data-name=membership-hero] .hero-buttons {
	flex-direction: row;
	gap: 16px;
	width: fit-content;
	margin-top: 16px;
}

body[data-page=membership] section[data-name=membership-benefits] {
	background: var(--primaryBackground);
}
body[data-page=membership] section[data-name=membership-benefits] .container {
	gap: 16px;
}
body[data-page=membership] section[data-name=membership-benefits] .title {
	font-size: 3.2em;
	color: var(--primaryForeground);
}
body[data-page=membership] section[data-name=membership-benefits] .content {
	padding-top: 16px;
}

body[data-page=membership] .benefit-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}
body[data-page=membership] .benefit-items > .item {
	padding: 36px 32px;
	border-radius: var(--borderRadius);
	background: var(--card-bg);
	border: var(--card-border);
	border-left: 4px solid var(--green2);
	box-shadow: var(--card-shadow);
	gap: 10px;
	transition: transform var(--transition), box-shadow var(--transition), border-left-color var(--transition);
}
body[data-page=membership] .benefit-items > .item:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover);
	border-left-color: var(--green3);
}
body[data-page=membership] .benefit-items > .item > .heading {
	font-size: 1.35em;
	font-weight: var(--bold);
	color: var(--green5);
}
body[data-page=membership] .benefit-items > .item > .description {
	font-size: 1.05em;
	line-height: 1.65;
	color: var(--secondaryForeground);
}

body[data-page=membership] section[data-name=membership-pricing] {
	background: linear-gradient(135deg, var(--green1) 0%, rgba(155, 193, 188, 0.3) 100%);
}
body[data-page=membership] section[data-name=membership-pricing] .container {
	gap: 16px;
}
body[data-page=membership] section[data-name=membership-pricing] .title {
	color: var(--green5);
	font-size: 3.2em;
}

body[data-page=membership] .pricing-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	width: 100%;
	max-width: 860px;
	margin: 16px auto 0;
	align-items: stretch;
}

body[data-page=membership] .pricing-card {
	padding: 36px 32px;
	border-radius: var(--borderRadius);
	background: var(--card-bg);
	border: var(--card-border);
	box-shadow: var(--card-shadow);
	gap: 12px;
	justify-content: flex-start;
	align-items: flex-start;
	transition: transform var(--transition), box-shadow var(--transition);
}
body[data-page=membership] .pricing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover);
}
body[data-page=membership] .pricing-card.member {
	border-top: 3px solid var(--green3);
	box-shadow: var(--card-shadow-hover);
}
body[data-page=membership] .pricing-card.member::after {
	content: "Most Popular";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--green3) 0%, var(--green5) 100%);
	padding: 6px 14px;
	border-radius: 100px;
	box-shadow: 0 4px 12px rgb(40 125 123 / 24%);
	width: fit-content;
	white-space: nowrap;
}

body[data-page=membership] .pricing-card .tier-name {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--green3);
	text-align: left;
	align-items: flex-start;
	width: fit-content;
}
body[data-page=membership] .pricing-card .tier-price {
	font-family: var(--serif);
	font-size: 3em;
	font-weight: var(--bold);
	color: var(--primaryForeground);
	line-height: 1;
	white-space: nowrap;
	flex-direction: row;
	align-items: baseline;
	width: fit-content;
}
body[data-page=membership] .pricing-card .tier-price .per {
	font-size: 0.35em;
	font-weight: var(--normal);
	color: var(--secondaryForeground);
	margin-left: 6px;
	letter-spacing: 0.5px;
	width: fit-content;
}
body[data-page=membership] .pricing-card .tier-note {
	color: var(--secondaryForeground);
	font-size: 0.9em;
	font-style: italic;
	text-align: left;
	align-items: flex-start;
	width: fit-content;
}
body[data-page=membership] .pricing-card .tier-divider {
	height: 1px;
	background: var(--border);
	width: 100%;
	margin: 8px 0;
}
body[data-page=membership] .pricing-card .tier-features {
	flex-direction: column;
	gap: 10px;
	align-self: stretch;
}
body[data-page=membership] .pricing-card .feature {
	font-size: 0.95em;
	color: var(--primaryForeground);
	padding-left: 26px;
	text-align: left;
	align-items: flex-start;
	line-height: 1.5;
}
body[data-page=membership] .pricing-card .feature.included::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 14px;
	height: 14px;
	background-color: var(--green3);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
body[data-page=membership] .pricing-card .feature.excluded {
	color: var(--secondaryForeground);
	opacity: 0.55;
	text-decoration: line-through;
	text-decoration-color: rgba(0, 0, 0, 0.2);
}
body[data-page=membership] .pricing-card .feature.excluded::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 11px;
	width: 8px;
	height: 1.5px;
	background-color: var(--secondaryForeground);
	opacity: 0.6;
}

body[data-page=membership] .pricing-card .tier-prices {
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}
body[data-page=membership] .pricing-card .price-line {
	flex-direction: row;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	width: 100%;
	justify-content: flex-start;
}
body[data-page=membership] .pricing-card .price-line .amount {
	font-family: var(--serif);
	font-size: 2em;
	font-weight: var(--bold);
	color: var(--primaryForeground);
	line-height: 1;
	width: fit-content;
}
body[data-page=membership] .pricing-card .price-line .per {
	font-size: 0.85em;
	color: var(--secondaryForeground);
	letter-spacing: 0.5px;
	width: fit-content;
}
body[data-page=membership] .pricing-card .price-line .label {
	font-size: 0.9em;
	color: var(--secondaryForeground);
	font-style: italic;
	width: fit-content;
	margin-left: 4px;
}

body[data-page=membership] .concierge-card {
	width: 100%;
	max-width: 860px;
	margin: 16px auto 0;
	padding: 32px 36px;
	border-radius: var(--borderRadius);
	background: linear-gradient(160deg, #1a2e2d 0%, #1d5e5c 100%);
	border: 1px solid rgba(184, 153, 104, 0.2);
	border-top: 3px solid var(--gold);
	box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 8px 24px rgb(0 0 0 / 12%);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	transition: transform var(--transition), box-shadow var(--transition);
}
body[data-page=membership] .concierge-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(29, 94, 92, 0.4);
}
body[data-page=membership] .concierge-card .concierge-content {
	align-items: flex-start;
	gap: 8px;
	flex: 1;
}
body[data-page=membership] .concierge-card .tier-name {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: rgba(155, 193, 188, 0.8);
	text-align: left;
	align-items: flex-start;
	width: fit-content;
}
body[data-page=membership] .concierge-card .concierge-title {
	font-family: var(--script);
	font-size: 2.4em;
	color: #f5efe1;
	font-weight: var(--bold);
	line-height: 1;
	text-align: left;
	align-items: flex-start;
	width: fit-content;
}
body[data-page=membership] .concierge-card .concierge-description {
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.6;
	text-align: left;
	align-items: flex-start;
}
body[data-page=membership] .concierge-card .concierge-pricing {
	align-items: center;
	gap: 14px;
	width: fit-content;
	flex-shrink: 0;
}
body[data-page=membership] .concierge-card .tier-price {
	font-family: var(--serif);
	font-size: 2.6em;
	font-weight: var(--bold);
	color: #ffffff;
	line-height: 1;
	white-space: nowrap;
	flex-direction: row;
	align-items: baseline;
	width: fit-content;
}
body[data-page=membership] .concierge-card .tier-price .per {
	font-size: 0.32em;
	font-weight: var(--normal);
	color: rgba(255, 255, 255, 0.5);
	margin-left: 6px;
	letter-spacing: 0.5px;
	width: fit-content;
}
body[data-page=membership] .concierge-card a.button {
	width: fit-content;
	background: transparent;
	border-color: rgba(184, 153, 104, 0.5);
	color: var(--gold);
}
body[data-page=membership] .concierge-card a.button:hover {
	background: rgba(184, 153, 104, 0.1);
	border-color: var(--gold);
	color: var(--gold);
}

/* Membership tier cards */
body[data-page=membership] .mem-tiers-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin-top: 16px;
	border-top: 1px solid var(--border);
}
body[data-page=membership] .mem-tier {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	padding: 40px 36px 36px;
	background: #fff;
	border-top: 3px solid var(--green3);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	box-shadow: none;
	position: relative;
	overflow: visible;
	transition: background 0.3s ease;
}
body[data-page=membership] .mem-tier:nth-child(2n) {
	border-right: none;
}
body[data-page=membership] .mem-tier:nth-last-child(-n+2) {
	border-bottom: none;
}
body[data-page=membership] .mem-tier.omt {
	border-top: 2px solid var(--accent);
}
body[data-page=membership] .sig-options {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	width: 100%;
	border-top: 1px solid rgba(40,125,123,0.15);
	border-bottom: 1px solid rgba(40,125,123,0.15);
	margin: 4px 0;
}
body[data-page=membership] .sig-option {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	padding: 16px 16px 16px 0;
	border-right: 1px solid rgba(40,125,123,0.15);
}
body[data-page=membership] .sig-option:last-child {
	padding-left: 16px;
	border-right: none;
}
body[data-page=membership] .sig-option-type {
	display: block !important;
	font-family: var(--sans);
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 4px;
}
body[data-page=membership] .omt-prices-stack {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0;
	width: 100%;
}
body[data-page=membership] .omt-price-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}
body[data-page=membership] .omt-price-row:last-child {
	border-bottom: none;
}
body[data-page=membership] .omt-price-row-label {
	display: block !important;
	font-size: 0.875em;
	color: var(--green4);
}
body[data-page=membership] .omt-price-row-amount {
	display: block !important;
	font-family: var(--serif);
	font-size: 1.5em;
	font-weight: 300;
	color: var(--green5);
	white-space: nowrap;
}
body[data-page=membership] .omt-per {
	font-size: 0.55em;
	color: var(--green4);
}
body[data-page=membership] .omt-best-value {
	display: inline-block !important;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold);
	margin-left: 6px;
}
body[data-page=membership] .mem-tier:hover {
	background: var(--green1);
}
body[data-page=membership] .mem-tier.featured {
	border-top-color: var(--green4);
}
body[data-page=membership] .mem-tier.signature {
	background: #fff;
	border-top: 3px solid var(--gold);
}
body[data-page=membership] .mem-tier.signature:hover {
	background: #fdf9f3;
}
body[data-page=membership] .mem-tier-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, var(--green3) 0%, var(--green5) 100%);
	padding: 5px 14px;
	border-radius: 100px;
	white-space: nowrap;
	width: fit-content;
	box-shadow: 0 4px 12px rgba(40, 125, 123, 0.3);
}
body[data-page=membership] .sig-access-badge {
	display: inline-block !important;
	width: auto !important;
	font-size: inherit !important;
	font-weight: 600;
	font-style: normal;
	color: var(--gold);
	border: 1px solid rgba(184, 153, 104, 0.5);
	border-radius: 3px;
	padding: 1px 7px;
	margin-right: 4px;
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: middle;
}
body[data-page=membership] .sig-house-badge {
	background: linear-gradient(135deg, #a07830 0%, var(--gold) 100%);
	box-shadow: 0 4px 12px rgba(184, 153, 104, 0.4);
	color: #fff;
}
body[data-page=membership] .mem-tier-label {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--green3);
	width: fit-content;
}
body[data-page=membership] .mem-tier.signature .mem-tier-label {
	color: var(--gold);
}
body[data-page=membership] .mem-tier-price {
	font-family: var(--serif);
	font-size: 2.2em;
	font-weight: var(--bold);
	color: var(--primaryForeground);
	line-height: 1;
	width: fit-content;
}
body[data-page=membership] .mem-tier-freq {
	font-family: var(--sans);
	font-size: 10px;
	color: var(--secondaryForeground);
	margin-top: -4px;
	width: fit-content;
	letter-spacing: 0.2px;
}
body[data-page=membership] .mem-tier-divider {
	height: 1px;
	background: var(--border);
	width: 100%;
	margin: 2px 0;
}
body[data-page=membership] .mem-tier.signature .mem-tier-divider {
	background: rgba(154, 122, 42, 0.2);
}
body[data-page=membership] .mem-tier-desc {
	font-size: 0.95em;
	color: var(--secondaryForeground);
	line-height: 1.65;
}
body[data-page=membership] .mem-tier-features {
	gap: 9px;
	width: 100%;
	flex: 1;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 4px;
}
body[data-page=membership] .mem-tier-features li {
	font-size: 0.95em;
	color: var(--primaryForeground);
	padding-left: 22px;
	line-height: 1.45;
	width: 100%;
	align-items: flex-start;
}
body[data-page=membership] .mem-tier-features li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 5px;
	width: 12px;
	height: 12px;
	background-color: var(--green3);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	flex-shrink: 0;
}
body[data-page=membership] .mem-tier.signature .mem-tier-features li::before {
	background-color: var(--gold);
}
body[data-page=membership] .mem-tier-note {
	font-family: var(--sans);
	font-size: 11px;
	color: var(--secondaryForeground);
	font-style: italic;
	line-height: 1.6;
	padding: 10px 12px;
	border: 1px solid rgba(154, 122, 42, 0.2);
	border-radius: 4px;
	background: rgba(154, 122, 42, 0.04);
}
body[data-page=membership] .mem-tier .button {
	margin-top: auto;
	align-self: stretch;
	width: 100%;
}
body[data-page=membership] .mem-tier.signature .button {
	background: transparent;
	border-color: rgba(154, 122, 42, 0.4);
	color: var(--gold);
}
body[data-page=membership] .mem-tier.signature .button:hover {
	background: rgba(154, 122, 42, 0.08);
	border-color: var(--gold);
	color: var(--gold);
}

/* Policy notes (no insurance billing / cancellation) */
body[data-page=membership] .mem-policy-notes {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 36px;
}
body[data-page=membership] .mem-policy-note {
	display: block !important;
	background: transparent;
	padding: 20px 28px;
	border-right: 1px solid rgba(255,255,255,0.35);
}
body[data-page=membership] .mem-policy-note:last-child {
	border-right: none;
}
body[data-page=membership] .mem-policy-label {
	display: block !important;
	font-family: var(--sans);
	font-size: 0.65em;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--green4);
	margin-bottom: 6px;
}
body[data-page=membership] .mem-policy-note p {
	display: block !important;
	font-size: 0.78em;
	font-weight: 300;
	color: var(--green4);
	line-height: 1.7;
	margin: 0;
}

/* Medicare waitlist section */
body[data-page=membership] section[data-name=medicare-waitlist] {
	background: var(--green1);
	padding: var(--sectionPadding);
}
body[data-page=membership] section[data-name=medicare-waitlist] .container {
	max-width: 640px;
	gap: 16px;
	text-align: center;
	align-items: center;
}
body[data-page=membership] section[data-name=medicare-waitlist] .title {
	font-family: var(--serif);
	font-size: 1.8em;
	color: var(--green5);
	font-weight: var(--bold);
	line-height: 1.25;
}
body[data-page=membership] section[data-name=medicare-waitlist] .subtitle {
	color: var(--secondaryForeground);
	font-size: 1em;
}
body[data-page=membership] section[data-name=medicare-waitlist] .preenroll {
	max-width: 480px;
	width: 100%;
}

/* DPC vs traditional comparison */
body[data-page=membership] section[data-name=comparison] {
	background: var(--primaryBackground);
	padding-top: 64px;
	padding-bottom: 64px;
}
body[data-page=membership] section[data-name=comparison] .container {
	gap: 12px;
	max-width: 820px;
}
body[data-page=membership] section[data-name=comparison] .title {
	color: var(--green5);
	font-family: var(--serif);
	font-size: 2em;
	line-height: 1.2;
	max-width: 620px;
	text-align: center;
}
body[data-page=membership] section[data-name=comparison] .subtitle {
	color: var(--secondaryForeground);
	max-width: 560px;
	text-align: center;
	margin-bottom: 16px;
	font-size: 0.95em;
}
body[data-page=membership] .comparison-wrap {
	width: 100%;
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--borderRadius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
body[data-page=membership] .comparison-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88em;
}
body[data-page=membership] .comparison-table thead th {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--green3);
	background: rgba(40, 125, 123, 0.06);
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid rgba(40, 125, 123, 0.18);
}
body[data-page=membership] .comparison-table thead th:first-child {
	width: 26%;
}
body[data-page=membership] .comparison-table tbody th {
	font-family: var(--sans);
	font-weight: 600;
	color: var(--primaryForeground);
	text-align: left;
	padding: 10px 16px;
	background: rgba(40, 125, 123, 0.025);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}
body[data-page=membership] .comparison-table tbody td {
	padding: 10px 16px;
	color: var(--primaryForeground);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
	line-height: 1.45;
}
body[data-page=membership] .comparison-table tbody td:nth-of-type(2) {
	color: var(--secondaryForeground);
}
body[data-page=membership] .comparison-table tbody tr:last-child th,
body[data-page=membership] .comparison-table tbody tr:last-child td {
	border-bottom: none;
}
body[data-page=membership] .comparison-note {
	color: var(--secondaryForeground);
	font-size: 0.92em;
	font-style: italic;
	max-width: 720px;
	margin: 24px auto 0;
	text-align: center;
	line-height: 1.6;
}

/* OMT pricing section */
body[data-page=membership] section[data-name=omt-pricing] {
	background: var(--primaryBackground);
	border-top: 1px solid var(--border);
}
body[data-page=membership] section[data-name=omt-pricing] .container {
	gap: 12px;
}
body[data-page=membership] .omt-pricing-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	width: 100%;
	max-width: 860px;
	margin: 24px auto 0;
	align-items: stretch;
}
body[data-page=membership] .omt-sessions {
	background: var(--card-bg);
	border: var(--card-border);
	box-shadow: var(--card-shadow);
	border-radius: var(--borderRadius);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: transform var(--transition), box-shadow var(--transition);
}
body[data-page=membership] .omt-sessions:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover);
}
body[data-page=membership] .omt-price-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 0;
}
body[data-page=membership] .omt-price-item:first-child { padding-top: 0; }
body[data-page=membership] .omt-price-item:last-child { padding-bottom: 0; }
body[data-page=membership] .omt-item-divider {
	height: 1px;
	background: var(--border);
}
body[data-page=membership] .omt-price-label {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--green3);
}
body[data-page=membership] .omt-price-amount {
	font-family: var(--serif);
	font-size: 2.8em;
	font-weight: 700;
	color: var(--primaryForeground);
	line-height: 1;
}
body[data-page=membership] .omt-per {
	font-size: 0.34em;
	font-weight: 300;
	color: var(--secondaryForeground);
	margin-left: 4px;
	letter-spacing: 0.5px;
}
body[data-page=membership] .omt-price-note {
	font-size: 0.87em;
	color: var(--secondaryForeground);
	line-height: 1.55;
	font-style: italic;
}
body[data-page=membership] .omt-package {
	background: #143a39;
	border-radius: var(--borderRadius);
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
	position: relative;
	box-shadow: 0 4px 24px rgba(20,58,57,0.18), 0 1px 3px rgba(0,0,0,0.08);
	transition: transform var(--transition), box-shadow var(--transition);
}
body[data-page=membership] .omt-package:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 48px rgba(20,58,57,0.28), 0 2px 6px rgba(0,0,0,0.10);
}
body[data-page=membership] .omt-package-badge {
	position: absolute;
	top: -12px;
	left: 32px;
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #143a39;
	background: var(--gold);
	padding: 6px 14px;
	border-radius: 100px;
	white-space: nowrap;
}
body[data-page=membership] .omt-package .omt-price-label {
	color: rgba(245,239,225,0.6);
}
body[data-page=membership] .omt-package-price {
	font-family: var(--serif);
	font-size: 3.4em;
	font-weight: 700;
	color: #f5efe1;
	line-height: 1;
}
body[data-page=membership] .omt-package .omt-price-note {
	color: rgba(245,239,225,0.72);
	font-style: normal;
}
body[data-page=membership] .omt-package .omt-package-features {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
body[data-page=membership] .omt-package .omt-feature {
	font-size: 0.92em;
	color: rgba(245,239,225,0.85);
	padding-left: 20px;
	position: relative;
	line-height: 1.5;
}
body[data-page=membership] .omt-package .omt-feature::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--gold);
	font-weight: 700;
}
body[data-page=membership] .omt-package a.button {
	border-color: rgba(255,255,255,0.35);
	color: #fff;
	background: rgba(255,255,255,0.10);
	margin-top: 6px;
}
body[data-page=membership] .omt-package a.button:hover {
	background: #fff !important;
	color: #143a39 !important;
	border-color: #fff !important;
}
body[data-page=membership] .omt-availability {
	font-size: 0.87em;
	color: var(--secondaryForeground);
	text-align: center;
	margin-top: 8px;
	font-style: italic;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 680px) {
	body[data-page=membership] .omt-pricing-wrap { grid-template-columns: 1fr; }
}

/* Services page lead sentence — overrides stale rule above */
body[data-page=services] .grid > .card > .lead {
	font-family: var(--serif);
	font-size: 1.05em;
	font-style: italic;
	color: var(--secondaryForeground);
	line-height: 1.72;
	margin: 0 0 4px;
	opacity: 1;
	text-align: left;
	align-items: flex-start;
}

/* ======================================================
   FAQ PAGE
   ====================================================== */

body[data-page=faq] section[data-name=faq] {
	padding-top: 80px;
	padding-bottom: 80px;
}

body[data-page=faq] main .container {
	max-width: 820px;
	gap: 40px;
}

body[data-page=faq] .faq-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

body[data-page=faq] .faq-header .title {
	font-family: var(--script);
	color: var(--green5);
	font-size: 3.4em;
	line-height: 1.05;
}

body[data-page=faq] .faq-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

body[data-page=faq] .faq-item {
	background: var(--card-bg);
	border: var(--card-border);
	border-radius: var(--borderRadius);
	box-shadow: var(--card-shadow);
	transition: box-shadow var(--transition), border-color var(--transition);
	width: 100%;
	overflow: hidden;
}

body[data-page=faq] .faq-item:hover {
	border-color: rgba(40, 125, 123, 0.16);
}

body[data-page=faq] .faq-item[open] {
	box-shadow: var(--card-shadow-hover);
	border-color: rgba(40, 125, 123, 0.16);
}

body[data-page=faq] .faq-item summary {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 22px 28px;
	font-family: var(--serif);
	font-size: 1.2em;
	font-weight: var(--bold);
	color: var(--green5);
	cursor: pointer;
	list-style: none;
	gap: 16px;
	text-align: left;
	transition: color var(--transition);
}
body[data-page=faq] .faq-item summary::-webkit-details-marker {
	display: none;
}
body[data-page=faq] .faq-item summary:hover {
	color: var(--green3);
}
body[data-page=faq] .faq-item summary::after {
	content: "";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	min-width: 28px;
	border: 1.5px solid var(--green2);
	border-radius: 50%;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287d7b' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E");
	background-size: 14px 14px;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--transition), background-color var(--transition), border-color var(--transition);
}
body[data-page=faq] .faq-item[open] summary::after {
	background-color: var(--green3);
	border-color: var(--green3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

body[data-page=faq] .faq-answer {
	padding: 0 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--primaryForeground);
	font-size: 1.05em;
	line-height: 1.75;
}

body[data-page=faq] .faq-answer p {
	margin: 0;
	text-align: left;
	width: 100%;
	align-items: flex-start;
}

body[data-page=faq] .faq-answer ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 20px;
	margin: 0;
}

body[data-page=faq] .faq-answer ul li {
	position: relative;
	padding-left: 14px;
	color: var(--primaryForeground);
	text-align: left;
	width: 100%;
	align-items: flex-start;
	line-height: 1.6;
}
body[data-page=faq] .faq-answer ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--green3);
}

body[data-page=faq] .faq-answer a {
	color: var(--green3);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transition);
}
body[data-page=faq] .faq-answer a:hover {
	color: var(--green5);
}

/* ======================================================
   SCROLL ANIMATIONS
   ====================================================== */

.fade-in {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: 0.12s; }
.fade-in-delay-2 { transition-delay: 0.24s; }
.fade-in-delay-3 { transition-delay: 0.36s; }
.fade-in-delay-4 { transition-delay: 0.48s; }

/* ---- Hero load reveal (above-the-fold staggered entrance) ---- */

@keyframes hero-reveal {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-text > *,
.about-intro > *,
.philosophy-intro > *,
.services-header > *,
.faq-header > *,
.contact-header > *,
body[data-page=membership] section[data-name=membership-hero] .container > * {
	opacity: 0;
	animation: hero-reveal 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-text > *:nth-child(1),
.about-intro > *:nth-child(1),
.philosophy-intro > *:nth-child(1),
.services-header > *:nth-child(1),
.faq-header > *:nth-child(1),
.contact-header > *:nth-child(1),
body[data-page=membership] section[data-name=membership-hero] .container > *:nth-child(1) {
	animation-delay: 0.05s;
}
.hero-text > *:nth-child(2),
.about-intro > *:nth-child(2),
.philosophy-intro > *:nth-child(2),
.services-header > *:nth-child(2),
.faq-header > *:nth-child(2),
.contact-header > *:nth-child(2),
body[data-page=membership] section[data-name=membership-hero] .container > *:nth-child(2) {
	animation-delay: 0.18s;
}
.hero-text > *:nth-child(3),
.about-intro > *:nth-child(3),
.philosophy-intro > *:nth-child(3),
.services-header > *:nth-child(3),
.faq-header > *:nth-child(3),
.contact-header > *:nth-child(3),
body[data-page=membership] section[data-name=membership-hero] .container > *:nth-child(3) {
	animation-delay: 0.32s;
}
.hero-text > *:nth-child(4),
.about-intro > *:nth-child(4),
body[data-page=membership] section[data-name=membership-hero] .container > *:nth-child(4) {
	animation-delay: 0.46s;
}
.hero-text > *:nth-child(5),
body[data-page=membership] section[data-name=membership-hero] .container > *:nth-child(5) {
	animation-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
	.hero-text > *,
	.about-intro > *,
	.philosophy-intro > *,
	.services-header > *,
	.faq-header > *,
	.contact-header > *,
	body[data-page=membership] section[data-name=membership-hero] .container > * {
		animation: none;
		opacity: 1;
	}
	.fade-in {
		opacity: 1;
		transform: none;
	}
}

.slide-in-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-left.visible {
	opacity: 1;
	transform: translateX(0);
}

.slide-in-right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-right.visible {
	opacity: 1;
	transform: translateX(0);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 780px) {
	:root {
		--gap: 20px;
		--fontSize: 16px;
		--sectionPadding: 64px 24px;
	}

	#mobile {
		display: block;
	}

	header .container {
		padding: 0 20px;
	}

	header .logo {
		font-size: 2.8em;
	}

	section {
		padding: var(--sectionPadding);
	}

	/* Hero mobile */
	section[data-name=hero] {
		min-height: auto;
		max-height: none;
	}
	section[data-name=hero] .container {
		padding: 96px 24px 84px;
	}
	section[data-name=hero] .hero-text .hero-buttons {
		flex-direction: column;
		align-items: center;
	}

	/* Why section */
	section[data-name=why] { padding: 72px 0 0; }
	section[data-name=why] .container { padding-bottom: 52px; }
	section[data-name=why] .title { font-size: 3em; }
	section[data-name=why] .why-pillars-grid { grid-template-columns: 1fr; }
	section[data-name=why] .why-pillar-card { padding: 32px 24px; border-right: none; }
	section[data-name=why] .why-pillar-card:last-child { grid-column: span 1; border-right: none; }

	/* Care models */
	section[data-name=care-models] .care-types-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	section[data-name=care-models] .care-type-card {
		border-bottom: 1px solid var(--border);
	}
	section[data-name=care-models] .care-type-card:nth-child(2n) {
		border-right: none;
	}
	section[data-name=care-models] .care-type-card:nth-child(2n-1) {
		border-right: 1px solid var(--border);
	}
	section[data-name=care-models] .care-type-card:nth-last-child(-n+2) {
		border-bottom: none;
	}
	section[data-name=care-models] .title {
		font-size: 3em;
	}

	/* Services preview */
	section[data-name=services-preview] .services-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	section[data-name=services-preview] .service-card {
		padding: 20px 14px;
		min-height: 76px;
		font-size: 0.95em;
	}
	section[data-name=services-preview] .title {
		font-size: 3em;
	}

	/* Philosophy quote */
	section[data-name=philosophy-quote] {
		padding: 56px 20px;
	}
	section[data-name=philosophy-quote] .pq-layout {
		flex-direction: column;
		border-radius: 18px;
	}
	section[data-name=philosophy-quote] .pq-photo {
		width: 100%;
		height: auto;
		padding: 20px 20px 20px 20px;
		max-width: 300px;
		margin: 0 auto;
	}
	section[data-name=philosophy-quote] .pq-photo::before,
	section[data-name=philosophy-quote] .pq-photo::after {
		top: 12px; right: 12px; bottom: 12px; left: 12px;
	}
	section[data-name=philosophy-quote] .pq-content-panel {
		padding: 48px 28px 60px;
		align-items: center;
	}
	section[data-name=philosophy-quote] .pq-inner {
		align-items: center;
		text-align: center;
	}
	section[data-name=philosophy-quote] .pq-text {
		font-size: 1.25em;
		text-align: center;
	}
	section[data-name=philosophy-quote] .pq-attr {
		justify-content: center;
	}
	section[data-name=philosophy-quote] .pq-quote-wrap {
		padding: 20px 28px 40px 20px;
	}

	/* Waitlist / CTA */
	section[data-name=cta],
	section[data-name=waitlist] {
		padding: 64px 24px;
	}
	section[data-name=cta] .title,
	section[data-name=waitlist] .title {
		font-size: 2.6em;
	}
	section[data-name=cta] .cta-buttons {
		flex-direction: column;
		align-items: center;
	}
	form.preenroll .form-row {
		flex-direction: column;
	}

	body[data-page=services] .omt-explainer-wrap {
		padding: 40px 24px;
	}
	body[data-page=services] .omt-explainer-inner {
		flex-direction: column;
	}
	body[data-page=services] .omt-explainer-photo {
		width: 100%;
		max-width: 420px;
	}
	body[data-page=services] .omt-explainer-content {
		align-items: center;
	}
	body[data-page=services] .omt-explainer-content .title,
	body[data-page=services] .omt-explainer-content p {
		text-align: center;
	}

	/* Generic */
	section .title {
		font-size: 3em;
	}

	/* Mobile menu */
	#menu {
		height: calc(100vh - var(--headerHeight));
		width: 100vw;
		background-color: var(--primaryBackground);
		position: fixed;
		top: var(--headerHeight);
		left: 100vw;
		transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		justify-content: flex-start;
		padding: var(--padding);
		box-shadow: var(--shadow2);
	}
	#menu.active {
		left: 0;
	}
	#menu .item {
		font-size: 1.5em;
		font-family: var(--serif);
		padding: calc(var(--padding) / 2);
		border-bottom: none !important;
		opacity: 1 !important;
		color: var(--primaryForeground);
	}
	#menu .item:hover,
	#menu .item[aria-current="page"] {
		color: var(--accent);
	}
	#menu .item.button {
		font-size: 1.2em;
		font-family: var(--sans);
	}

	.items {
		flex-direction: column;
	}

	.grid {
		grid-template-columns: repeat(1, 1fr);
	}

	body[data-page=services] .grid {
		grid-template-columns: 1fr;
	}

	body[data-page=services] .services-cta {
		padding: 40px 24px;
	}
	body[data-page=services] .services-cta-buttons {
		flex-direction: column;
		width: 100%;
	}
	body[data-page=services] .grid > .card {
		padding: 28px 22px;
	}

	.separator {
		display: none;
	}

	/* Footer */
	footer {
		padding: 48px 0 0;
	}
	footer .container {
		padding: 0 24px;
	}
	footer .footer-top {
		flex-direction: column;
		gap: 28px;
	}

	/* About */
	body[data-page=about] section[data-name=about] {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	body[data-page=about] .avatar {
		width: 160px;
		height: 160px;
	}
	body[data-page=about] .about-intro .title {
		font-size: 2.8em;
	}
	body[data-page=about] section[data-name=philosophy] {
		padding: 56px 24px;
	}
	body[data-page=about] .philosophy-intro .title {
		font-size: 2.4em;
	}

	/* Contact */
	body[data-page=contact] .contact-grid {
		grid-template-columns: 1fr;
	}
	body[data-page=contact] .contact-info {
		padding: 32px 24px;
	}
	body[data-page=contact] .contact-waitlist-card {
		padding: 32px 24px;
	}
	body[data-page=contact] .contact-waitlist-card .waitlist-heading {
		font-size: 2.4em;
	}

	/* Membership */
	body[data-page=membership] .benefit-items {
		grid-template-columns: 1fr;
	}
	body[data-page=membership] section[data-name=membership-hero] {
		padding: 64px 24px 56px;
	}
	body[data-page=membership] section[data-name=membership-hero] .title {
		font-size: 3em;
	}
	body[data-page=membership] .pricing-cards {
		grid-template-columns: 1fr;
	}
	body[data-page=membership] .pricing-card {
		padding: 28px 24px;
	}
	body[data-page=membership] .mem-tiers-grid {
		grid-template-columns: 1fr;
	}
	body[data-page=membership] .mem-tier {
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
	body[data-page=membership] .mem-tier:last-child {
		border-bottom: none;
	}
	body[data-page=membership] .mem-policy-notes {
		grid-template-columns: 1fr;
	}
	body[data-page=membership] .sig-options {
		grid-template-columns: 1fr;
	}
	body[data-page=membership] .sig-option {
		padding: 12px 0;
		border-right: none;
		border-bottom: 1px solid rgba(40,125,123,0.15);
	}
	body[data-page=membership] .sig-option:last-child {
		padding-left: 0;
		border-bottom: none;
	}
	body[data-page=membership] .pricing-card .tier-price {
		font-size: 2.4em;
	}
	body[data-page=membership] .pricing-card .price-line .amount {
		font-size: 1.7em;
	}
	body[data-page=membership] .concierge-card {
		flex-direction: column;
		padding: 28px 24px;
		gap: 20px;
		text-align: center;
	}
	body[data-page=membership] .concierge-card .concierge-content {
		align-items: center;
	}
	body[data-page=membership] .concierge-card .tier-name {
		text-align: center;
		align-items: center;
	}
	body[data-page=membership] .concierge-card .concierge-title {
		font-size: 2em;
		text-align: center;
		align-items: center;
	}
	body[data-page=membership] .concierge-card .concierge-description {
		text-align: center;
		align-items: center;
	}
	body[data-page=membership] .concierge-card .tier-price {
		font-size: 2.2em;
	}

	/* Comparison table — stack on mobile */
	body[data-page=membership] section[data-name=comparison] {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	body[data-page=membership] section[data-name=comparison] .title {
		font-size: 2em;
	}
	body[data-page=membership] .comparison-wrap {
		border-radius: var(--borderRadius);
	}
	body[data-page=membership] .comparison-table,
	body[data-page=membership] .comparison-table thead,
	body[data-page=membership] .comparison-table tbody,
	body[data-page=membership] .comparison-table tr,
	body[data-page=membership] .comparison-table th,
	body[data-page=membership] .comparison-table td {
		display: block;
		width: 100%;
	}
	body[data-page=membership] .comparison-table thead {
		display: none;
	}
	body[data-page=membership] .comparison-table tbody tr {
		padding: 16px 18px;
		border-bottom: 1px solid var(--border);
	}
	body[data-page=membership] .comparison-table tbody tr:last-child {
		border-bottom: none;
	}
	body[data-page=membership] .comparison-table tbody th {
		padding: 0 0 8px;
		background: transparent;
		border: none;
		font-size: 0.78em;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--green3);
	}
	body[data-page=membership] .comparison-table tbody td {
		padding: 4px 0;
		border: none;
		position: relative;
		padding-left: 96px;
		min-height: 24px;
	}
	body[data-page=membership] .comparison-table tbody td::before {
		position: absolute;
		left: 0;
		top: 4px;
		width: 84px;
		font-family: var(--sans);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--secondaryForeground);
	}
	body[data-page=membership] .comparison-table tbody td:nth-of-type(1)::before {
		content: "Dr. Nelly";
		color: var(--green3);
	}
	body[data-page=membership] .comparison-table tbody td:nth-of-type(2)::before {
		content: "Traditional";
	}

	/* FAQ */
	body[data-page=faq] section[data-name=faq] {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	body[data-page=faq] .faq-header .title {
		font-size: 2.6em;
	}
	body[data-page=faq] .faq-item summary {
		padding: 18px 20px;
		font-size: 1.1em;
	}
	body[data-page=faq] .faq-answer {
		padding: 0 20px 20px;
	}
}

/* ── Thank You page ── */
section[data-name=thank-you-hero] {
    background:
        linear-gradient(to top, rgba(29,94,92,0.55) 0%, rgba(40,125,123,0.35) 100%),
        url('/assets/img/thank-you-bg.jpg?v=ab02e825e4cc') center center / cover no-repeat;
    color: #fff;
    text-align: center;
    min-height: 480px;
    padding: calc(var(--headerHeight) + 32px) 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
section[data-name=thank-you-hero] .container { padding-bottom: 8px; align-items: center; text-align: center; }
section[data-name=thank-you-hero] .title {
    color: #fff;
    font-family: var(--script);
    font-size: clamp(2.8em, 7vw, 4.8em);
    line-height: 1;
}
section[data-name=thank-you-hero] .subtitle { color: rgba(255,255,255,0.9); max-width: 480px; margin: 0 auto; }

section[data-name=thank-you-actions] { padding: 64px 0; background: var(--bg); }

.ty-action-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 0;
}
.ty-action-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--green1);
    border-top: 3px solid var(--green3);
    border-radius: 12px;
    padding: 32px 28px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.ty-action-card:hover {
    box-shadow: 0 8px 32px rgba(40,125,123,0.12);
    transform: translateY(-2px);
}
.ty-action-icon {
    font-size: 1.4em;
    color: var(--green3);
    line-height: 1;
}
.ty-action-title {
    font-family: var(--serif);
    font-size: 1.2em;
    font-weight: 600;
    color: var(--green5);
}
.ty-action-desc {
    font-size: 0.92em;
    color: #666;
    line-height: 1.6;
    flex: 1;
}
.ty-action-link {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--green3);
    letter-spacing: 0.3px;
    margin-top: 4px;
}

@media (max-width: 780px) {
    section[data-name=thank-you-hero] { padding: 64px 0; }
    section[data-name=thank-you-actions] { padding: 48px 0; }
    .ty-action-cards { grid-template-columns: 1fr; }
}
/* ======================================================
   BLOG
   ====================================================== */

/* ---- Blog listing page ---- */

body[data-page=blog] section[data-name=blog-hero] {
    background: linear-gradient(150deg, #a8cec9 0%, #287d7b 42%, #143a39 100%);
    padding: 100px 0 52px;
    text-align: center;
}
body[data-page=blog] section[data-name=blog-hero] .container {
    gap: 16px;
    align-items: center;
}
body[data-page=blog] section[data-name=blog-hero] .section-label { color: rgba(255,255,255,.65); }
body[data-page=blog] section[data-name=blog-hero] .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    text-align: center;
}
body[data-page=blog] section[data-name=blog-hero] .title::before,
body[data-page=blog] section[data-name=blog-hero] .title::after {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
    flex-shrink: 0;
}
body[data-page=blog] section[data-name=blog-hero] .subtitle { color: rgba(255,255,255,.75); max-width: 540px; }

body[data-page=blog] section[data-name=blog-grid] {
    padding: 52px 48px 120px;
    background: var(--off-white);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-light);
    transition: box-shadow .2s, transform .2s;
    text-decoration: none;
    color: inherit;
}
.blog-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    transform: translateY(-3px);
}

.blog-card-graphic {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.blog-card-graphic svg { width: 100%; height: 100%; }
.blog-card-graphic .blog-card-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.blog-card-body {
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}
.blog-card-category {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal);
}
.blog-card-title {
    font-family: var(--serif);
    font-size: 1.25em;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.35;
}
.blog-card-excerpt {
    font-size: 0.87em;
    color: var(--gray);
    line-height: 1.65;
    flex: 1;
}
.blog-card-meta {
    font-size: 0.78em;
    color: #aaa;
    letter-spacing: .04em;
    margin-top: 4px;
}
.blog-card-read {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--teal);
    letter-spacing: .04em;
    margin-top: 2px;
}

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
	section[data-name=why] .why-pillars-grid { grid-template-columns: 1fr; }
	section[data-name=why] .why-pillar-card { border-right: none; }
	section[data-name=why] .container { padding-left: 24px; padding-right: 24px; }
}

/* ---- Individual blog post pages ---- */

.blog-post-hero {
    background: linear-gradient(150deg, #a8cec9 0%, #287d7b 42%, #143a39 100%);
    padding: calc(var(--headerHeight) + 32px) 0 70px;
}
.blog-post-hero .container {
    max-width: 780px;
    gap: 14px;
}
.blog-back {
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: .06em;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .2s;
    align-self: flex-start;
}
.blog-back:hover { color: #fff; }
.blog-post-hero .section-label { color: rgba(255,255,255,.65); }
.blog-post-hero .title { color: #fff; font-size: clamp(1.8em, 3.5vw, 2.8em); }
.blog-meta {
    font-size: 0.85em;
    color: rgba(255,255,255,.55);
    letter-spacing: .06em;
}

.blog-post-body {
    background: var(--off-white);
    padding: 64px 0 80px;
}
.blog-post-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.blog-post-graphic {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--gray-light);
    aspect-ratio: 2 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-post-graphic svg { width: 100%; height: 100%; }

.blog-post-content { display: flex; flex-direction: column; gap: 20px; }
.blog-post-content h2 {
    font-family: var(--serif);
    font-size: 1.65em;
    font-weight: 400;
    color: var(--charcoal);
    line-height: 1.25;
    margin-top: 12px;
}
.blog-post-content h3 {
    font-family: var(--sans);
    font-size: 1em;
    font-weight: 600;
    color: var(--teal-dark);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 8px;
}
.blog-post-content p {
    font-size: 1.02em;
    line-height: 1.85;
    color: #3a3a3a;
}
.blog-post-content ul, .blog-post-content ol {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blog-post-content li {
    font-size: 1em;
    line-height: 1.75;
    color: #3a3a3a;
}
.blog-post-content strong { color: var(--charcoal); }

.blog-key-takeaways {
    background: var(--teal-light);
    border-left: 3px solid var(--teal);
    border-radius: 4px;
    padding: 24px 28px;
    margin-top: 8px;
}
.blog-kt-label {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: 14px;
}
.blog-key-takeaways ul { padding-left: 18px; }
.blog-key-takeaways li { font-size: 0.95em; color: var(--teal-dark); }

.blog-sources {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-light);
}
.blog-sources-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 12px;
}
.blog-sources ul { padding-left: 0; list-style: none; gap: 6px; }
.blog-sources li { font-size: 0.82em; color: var(--gray); }

.blog-post-cta {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 48px;
    background: var(--teal-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.blog-post-cta p {
    font-family: var(--serif);
    font-size: 1.3em;
    font-weight: 300;
    font-style: italic;
    color: var(--cream, #f5efe1);
    line-height: 1.6;
    max-width: 480px;
}
.blog-post-cta .link.action.button {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.4);
}
.blog-post-cta .link.action.button:hover {
    background: #fff;
    color: var(--teal-dark) !important;
    border-color: #fff;
}
.blog-post-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Two-column comparison table (heat post) */
.blog-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--gray-light);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}
.blog-compare-col {
    background: #fff;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blog-compare-col.danger { background: #fff8f8; }
.blog-compare-heading {
    font-family: var(--sans);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.blog-compare-col.danger .blog-compare-heading { color: #c0392b; }
.blog-compare-col:not(.danger) .blog-compare-heading { color: var(--teal); }
.blog-compare-col ul { padding-left: 16px; gap: 6px; }
.blog-compare-col li { font-size: 0.92em; line-height: 1.6; color: #3a3a3a; }

/* Mocktail recipe cards */
.mocktail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 8px 0;
}
.mocktail-card {
    background: #fff;
    border: 1px solid var(--gray-light);
    border-radius: 6px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mocktail-name {
    font-family: var(--serif);
    font-size: 1.1em;
    font-weight: 400;
    color: var(--charcoal);
}
.mocktail-emoji { font-size: 1.5em; }
.mocktail-ingredients {
    font-size: 0.85em;
    color: var(--gray);
    line-height: 1.65;
}
.mocktail-method {
    font-size: 0.82em;
    font-style: italic;
    color: var(--teal);
}

/* Blog post header photo */
.blog-post-photo-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 48px;
}
.blog-post-photo {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Blog stat boxes */
.blog-stat-box {
    background: var(--teal-light);
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    padding: 20px 24px;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
.blog-stat-box.featured {
    background: var(--teal-deep);
    border-left: none;
    border-radius: 10px;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 28px 32px;
}
.blog-stat-num {
    font-family: var(--serif);
    font-size: 2.4em;
    font-weight: 600;
    color: var(--teal);
    line-height: 1;
    flex-shrink: 0;
}
.blog-stat-box.featured .blog-stat-num {
    font-size: 3em;
    color: var(--cream);
}
.blog-stat-text {
    font-size: 0.92em;
    color: #3a3a3a;
    line-height: 1.55;
}
.blog-stat-box.featured .blog-stat-text {
    color: rgba(245,239,225,0.82);
    font-family: var(--sans);
}

@media (max-width: 700px) {
    .blog-post-inner { padding: 0 24px; }
    .blog-post-photo-wrap { padding: 0 24px; }
    .blog-post-photo { height: 220px; }
    .blog-post-cta { padding: 40px 24px; }
    .blog-compare { grid-template-columns: 1fr; }
    .mocktail-grid { grid-template-columns: 1fr; }
    .blog-stat-box { flex-direction: column; text-align: center; }
}