/*
Theme Name: Medicate WinDNA Child
Theme URI: https://windna.in/
Description: WinDNA preventive healthcare brand — child theme of medicate. Premium WinDNA design system (Deep Teal + Soft Gold + Warm Ivory), tuned to compete visually with Function Health, Levels, and Hims.
Author: WinDNA
Author URI: https://windna.in/
Template: medicate
Version: 0.3.0
Text Domain: medicate-windna-child
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* Brand */
	--wd-deep-teal:      #0B4F4A;
	--wd-deep-teal-2:    #093F3B;
	--wd-soft-gold:      #C9A86A;
	--wd-warm-ivory:     #F5F1E8;
	--wd-charcoal:       #1A1F1E;
	--wd-mist-grey:      #E8EAE7;
	--wd-success-green:  #4A7C59;

	/* Short aliases (per spec) */
	--wd-teal:           var(--wd-deep-teal);
	--wd-gold:           var(--wd-soft-gold);
	--wd-ivory:          var(--wd-warm-ivory);
	--wd-mist:           var(--wd-mist-grey);
	--wd-success:        var(--wd-success-green);

	/* Semantic */
	--wd-text:           var(--wd-charcoal);
	--wd-muted:          #5C6360;
	--wd-bg:             var(--wd-warm-ivory);
	--wd-surface:        #FFFFFF;
	--wd-border:         var(--wd-mist-grey);
	--wd-hairline:       rgba(26, 31, 30, 0.08);

	/* Type */
	--wd-font-head:      'Fraunces', Georgia, 'Times New Roman', serif;
	--wd-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Radii — pill buttons, soft cards */
	--wd-radius-sm:      8px;
	--wd-radius:         12px;
	--wd-radius-lg:      20px;
	--wd-radius-pill:    999px;

	/* Shadows — premium, soft, layered */
	--wd-shadow-sm:      0 1px 2px rgba(11, 79, 74, 0.04), 0 1px 3px rgba(11, 79, 74, 0.06);
	--wd-shadow:         0 8px 24px rgba(11, 79, 74, 0.08), 0 2px 6px rgba(11, 79, 74, 0.05);
	--wd-shadow-lg:      0 24px 56px rgba(11, 79, 74, 0.12), 0 4px 12px rgba(11, 79, 74, 0.06);
	--wd-shadow-xl:      0 40px 80px rgba(11, 79, 74, 0.18), 0 8px 24px rgba(11, 79, 74, 0.08);

	/* Spacing — generous */
	--wd-container:      1240px;
	--wd-container-pad:  32px;
	--wd-section-y:      128px;

	/* Motion */
	--wd-ease:           cubic-bezier(0.22, 1, 0.36, 1);
	--wd-ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Reset polish + global typography
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body,
body.home,
body.page,
body.single {
	font-family: var(--wd-font-body) !important;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wd-text);
	background-color: var(--wd-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--wd-font-head) !important;
	font-weight: 600;
	color: var(--wd-charcoal);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin-top: 0;
	font-feature-settings: "ss01", "ss02";
}

/* Bigger, bolder, teal — unless explicitly overridden (cards, dark sections). */
h1, .h1 {
	font-size: clamp(48px, 6vw, 80px);
	line-height: 1.02;
	color: var(--wd-deep-teal);
}
h2, .h2 {
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.08;
	color: var(--wd-deep-teal);
}
h3, .h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
h4, .h4 { font-size: 1.25rem; }

h1 em, h2 em, h3 em {
	font-style: italic;
	font-weight: 500;
	color: var(--wd-soft-gold);
}

p {
	margin-top: 0;
	margin-bottom: 1.25rem;
	color: var(--wd-text);
}

::selection { background: var(--wd-deep-teal); color: var(--wd-warm-ivory); }

/* ==========================================================================
   3. Links
   ========================================================================== */
a {
	color: var(--wd-deep-teal);
	text-decoration: none;
	transition: color 0.25s var(--wd-ease);
}
a:hover,
a:focus-visible {
	color: var(--wd-soft-gold);
}

a:focus-visible,
button:focus-visible,
.wd-btn:focus-visible {
	outline: 2px solid var(--wd-soft-gold);
	outline-offset: 3px;
	border-radius: var(--wd-radius-pill);
}

/* ==========================================================================
   4. Buttons — pill, smooth, premium
   ========================================================================== */
.wd-btn,
.wd-btn:visited,
button.wd-btn,
input[type="submit"].wd-btn,
.wp-block-button__link,
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--wd-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 16px 32px;
	border-radius: var(--wd-radius-pill);
	border: 1.5px solid var(--wd-deep-teal);
	background-color: var(--wd-deep-teal);
	color: #FFFFFF !important;
	cursor: pointer;
	transition: transform 0.35s var(--wd-ease),
	            box-shadow 0.35s var(--wd-ease),
	            background-color 0.35s var(--wd-ease),
	            border-color 0.35s var(--wd-ease),
	            color 0.35s var(--wd-ease);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}
.wd-btn:hover,
.wd-btn:focus-visible,
button.wd-btn:hover,
.wp-block-button__link:hover,
.btn-primary:hover {
	background-color: var(--wd-deep-teal-2);
	border-color: var(--wd-deep-teal-2);
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: var(--wd-shadow);
}

.wd-btn--gold,
.wd-btn--gold:visited {
	background-color: var(--wd-soft-gold);
	border-color: var(--wd-soft-gold);
	color: var(--wd-charcoal) !important;
}
.wd-btn--gold:hover,
.wd-btn--gold:focus-visible {
	background-color: #B7975A;
	border-color: #B7975A;
	color: var(--wd-charcoal) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(201, 168, 106, 0.32);
}

.wd-btn--ghost,
.wd-btn--ghost:visited {
	background-color: transparent;
	border-color: var(--wd-deep-teal);
	color: var(--wd-deep-teal) !important;
}
.wd-btn--ghost:hover,
.wd-btn--ghost:focus-visible {
	background-color: var(--wd-deep-teal);
	color: #FFFFFF !important;
	transform: translateY(-2px);
}

.wd-btn--ghost-light,
.wd-btn--ghost-light:visited {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.6);
	color: #FFFFFF !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.wd-btn--ghost-light:hover,
.wd-btn--ghost-light:focus-visible {
	background-color: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--wd-deep-teal) !important;
	transform: translateY(-2px);
}

/* ==========================================================================
   5. Layout helpers
   ========================================================================== */
.wd-container {
	max-width: var(--wd-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wd-container-pad);
	padding-right: var(--wd-container-pad);
}

.wd-section {
	padding-top: var(--wd-section-y);
	padding-bottom: var(--wd-section-y);
	position: relative;
}

@media (max-width: 768px) {
	:root { --wd-section-y: 80px; --wd-container-pad: 22px; }
}

.wd-section--ivory    { background-color: var(--wd-warm-ivory); }
.wd-section--white    { background-color: var(--wd-surface); }
.wd-section--teal     {
	background-color: var(--wd-deep-teal);
	background-image: radial-gradient(1200px 600px at 80% -10%, rgba(201, 168, 106, 0.18), transparent 60%);
	color: var(--wd-warm-ivory);
}
.wd-section--teal h1,
.wd-section--teal h2,
.wd-section--teal h3,
.wd-section--teal h4 { color: var(--wd-warm-ivory); }
.wd-section--charcoal {
	background-color: var(--wd-charcoal);
	color: var(--wd-warm-ivory);
}
.wd-section--charcoal h1,
.wd-section--charcoal h2,
.wd-section--charcoal h3,
.wd-section--charcoal h4 { color: var(--wd-warm-ivory); }

.wd-eyebrow {
	display: inline-block;
	font-family: var(--wd-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wd-soft-gold);
	margin-bottom: 20px;
	padding-left: 16px;
	border-left: 3px solid var(--wd-deep-teal);
	line-height: 1.3;
}
.wd-eyebrow--light {
	color: var(--wd-soft-gold);
	border-left-color: var(--wd-soft-gold);
}
.wd-section--teal .wd-eyebrow,
.wd-section--charcoal .wd-eyebrow {
	border-left-color: var(--wd-soft-gold);
	color: var(--wd-soft-gold);
}

/* Section heads — confident, generous */
.wd-section__head {
	max-width: 820px;
	margin-bottom: 80px;
}
.wd-section__head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.wd-section__head h2 em {
	font-style: italic;
	font-weight: 500;
	color: var(--wd-deep-teal);
}
.wd-section--charcoal .wd-section__head h2 em,
.wd-section--teal .wd-section__head h2 em { color: var(--wd-soft-gold); }

.wd-section__lede {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--wd-muted);
	margin-top: 24px;
	max-width: 680px;
}
.wd-section__lede--light { color: rgba(245, 241, 232, 0.78); }
.wd-section__head--center .wd-section__lede { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   6. Sticky header — frosted glass, premium nav
   ========================================================================== */
.wd-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #FFFFFF;
	border-bottom: 2px solid var(--wd-deep-teal);
	transition: box-shadow 0.3s var(--wd-ease);
}
.wd-header.is-scrolled {
	box-shadow: 0 2px 24px rgba(11, 79, 74, 0.10);
}
.wd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	position: relative;
}
@media (min-width: 1025px) {
	.wd-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: 16px;
	}
	.wd-header__nav { justify-self: center; }
}

.wd-header__brand {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--wd-font-head);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--wd-deep-teal);
	letter-spacing: -0.025em;
	transition: opacity 0.25s var(--wd-ease);
	flex: 0 0 auto;
}
.wd-header__brand:hover { opacity: 0.85; }
.wd-header__brand-mark { color: var(--wd-soft-gold); }
.wd-header__brand img {
	max-height: 38px;
	width: auto;
}

.wd-header__nav {
	display: flex;
	align-items: center;
	min-width: 0;
}
.wd-header__nav ul,
.wd-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0;
	flex-wrap: nowrap;
}
.wd-header__nav li { margin: 0; }
.wd-header__nav a {
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	font-family: var(--wd-font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wd-charcoal);
	border-radius: var(--wd-radius-pill);
	white-space: nowrap;
	transition: color 0.25s var(--wd-ease), background-color 0.25s var(--wd-ease);
}
.wd-header__nav a:hover,
.wd-header__nav .current-menu-item > a,
.wd-header__nav .current_page_item > a {
	color: var(--wd-deep-teal);
	background-color: rgba(11, 79, 74, 0.07);
}

.wd-header__cta {
	display: inline-flex;
	flex: 0 0 auto;
	margin-right: 24px;
}
.wd-header__cta .wd-btn {
	padding: 10px 22px;
	font-size: 13px;
	max-width: none;
	white-space: nowrap;
}

.wd-header__toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-pill);
	padding: 10px 14px;
	font-size: 1.1rem;
	cursor: pointer;
	color: var(--wd-charcoal);
	transition: background-color 0.25s var(--wd-ease);
}
.wd-header__toggle:hover { background-color: rgba(11, 79, 74, 0.06); }

@media (max-width: 1024px) {
	.wd-header__nav,
	.wd-header__cta { display: none; }
	.wd-header__toggle { display: inline-flex; }
	.wd-header[data-open="true"] .wd-header__nav,
	.wd-header[data-open="true"] .wd-header__cta {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 20px 24px 28px;
		background-color: rgba(255, 255, 255, 0.98);
		backdrop-filter: saturate(180%) blur(20px);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		border-bottom: 1px solid var(--wd-border);
		box-shadow: var(--wd-shadow);
	}
	.wd-header[data-open="true"] .wd-header__nav ul,
	.wd-header[data-open="true"] .wd-header__menu {
		flex-direction: column;
		gap: 0;
	}
	.wd-header[data-open="true"] .wd-header__nav a {
		padding: 14px 8px;
		border-bottom: 1px solid var(--wd-hairline);
		border-radius: 0;
	}
	.wd-header[data-open="true"] .wd-header__cta { margin-top: 12px; }
	.wd-header[data-open="true"] .wd-header__cta .wd-btn { width: 100%; }
}

/* Inner-page back-to-home bar */
.wd-backbar {
	background-color: var(--wd-warm-ivory);
	border-bottom: 1px solid var(--wd-hairline);
	font-size: 0.875rem;
}
.wd-backbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}
.wd-backbar a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wd-deep-teal);
	font-weight: 500;
}
.wd-backbar a:hover { color: var(--wd-soft-gold); }
.wd-backbar__crumbs {
	color: var(--wd-muted);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ==========================================================================
   7. Footer — premium dark
   ========================================================================== */
.wd-footer {
	background-color: var(--wd-charcoal);
	color: rgba(245, 241, 232, 0.78);
	font-size: 0.95rem;
}
.wd-footer a { color: rgba(245, 241, 232, 0.78); }
.wd-footer a:hover,
.wd-footer a:focus-visible { color: var(--wd-soft-gold); }

.wd-footer__trust {
	border-bottom: 1px solid rgba(245, 241, 232, 0.08);
	padding: 32px 0;
}
.wd-footer__trust-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	color: rgba(245, 241, 232, 0.72);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}
.wd-footer__trust-row span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wd-footer__main {
	padding: 80px 0 56px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 56px;
}
.wd-footer__col h4 {
	font-family: var(--wd-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wd-warm-ivory);
	margin-bottom: 22px;
	letter-spacing: 0.01em;
}
.wd-footer__brand {
	font-family: var(--wd-font-head);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--wd-warm-ivory);
	margin-bottom: 14px;
	letter-spacing: -0.025em;
}
.wd-footer__brand span { color: var(--wd-soft-gold); }
.wd-footer__about {
	color: rgba(245, 241, 232, 0.65);
	line-height: 1.75;
	max-width: 380px;
}
.wd-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wd-footer__list li { padding: 7px 0; }
.wd-footer__contact p {
	margin: 0 0 10px;
	color: rgba(245, 241, 232, 0.78);
}
.wd-footer__contact strong {
	color: var(--wd-warm-ivory);
	font-weight: 600;
}
.wd-footer__bottom {
	border-top: 1px solid rgba(245, 241, 232, 0.08);
	padding: 24px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	font-size: 0.85rem;
	color: rgba(245, 241, 232, 0.55);
}
.wd-footer__social { display: inline-flex; gap: 12px; }
.wd-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(245, 241, 232, 0.18);
	border-radius: 50%;
	color: rgba(245, 241, 232, 0.7);
	transition: all 0.3s var(--wd-ease);
}
.wd-footer__social a:hover {
	border-color: var(--wd-soft-gold);
	color: var(--wd-soft-gold);
	transform: translateY(-2px);
	background-color: rgba(201, 168, 106, 0.06);
}

@media (max-width: 900px) {
	.wd-footer__main { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
	.wd-footer__main { grid-template-columns: 1fr; }
	.wd-footer__bottom { justify-content: flex-start; }
}

/* ==========================================================================
   8. Form polish + parent-theme remnants
   ========================================================================== */
#back-to-top a.top {
	background-color: var(--wd-deep-teal);
	color: #FFFFFF;
	border-radius: var(--wd-radius-pill);
	box-shadow: var(--wd-shadow);
}
#back-to-top a.top:hover {
	background-color: var(--wd-deep-teal-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-sm);
	padding: 14px 16px;
	font-family: var(--wd-font-body);
	font-size: 0.95rem;
	color: var(--wd-text);
	background-color: var(--wd-surface);
	transition: border-color 0.25s var(--wd-ease), box-shadow 0.25s var(--wd-ease);
}
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wd-deep-teal);
	box-shadow: 0 0 0 4px rgba(11, 79, 74, 0.10);
}

/* ==========================================================================
   9. Hero
   ========================================================================== */
.wd-hero {
	position: relative;
	min-height: clamp(640px, 94vh, 920px);
	display: flex;
	align-items: center;
	color: #FFFFFF;
	overflow: hidden;
	isolation: isolate;
}
.wd-hero__media,
.wd-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}
.wd-hero__media img {
	object-fit: cover;
	object-position: center;
}
.wd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(11, 79, 74, 0.78) 0%, rgba(11, 79, 74, 0.85) 55%, rgba(9, 30, 28, 0.94) 100%),
		linear-gradient(90deg, rgba(11, 79, 74, 0.65) 0%, rgba(11, 79, 74, 0.20) 75%);
}
.wd-hero__inner {
	position: relative;
	padding-top: 96px;
	padding-bottom: 96px;
	max-width: 920px;
}
.wd-hero__title {
	font-size: clamp(2.75rem, 6vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: #FFFFFF;
	font-weight: 600;
	margin: 0 0 28px;
}
.wd-hero__title-em {
	display: block;
	color: var(--wd-soft-gold);
	font-weight: 500;
	margin-top: 6px;
}
.wd-hero__title-em em { font-style: italic; }
.wd-hero__lede {
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
	max-width: 640px;
	margin-bottom: 40px;
}
.wd-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 56px;
}
.wd-hero__trust {
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85);
}
.wd-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wd-hero__trust li span {
	color: var(--wd-soft-gold);
	font-size: 0.7rem;
}

@media (max-width: 640px) {
	.wd-hero { min-height: 88vh; }
	.wd-hero__inner { padding-top: 64px; padding-bottom: 64px; }
	.wd-hero__trust { gap: 12px 22px; font-size: 0.8rem; }
	.wd-hero__ctas .wd-btn { width: 100%; }
}

/* ==========================================================================
   10. Why Prevention — stats with subtle background image
   ========================================================================== */
.wd-prevention { position: relative; overflow: hidden; }
.wd-prevention__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.wd-prevention__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.10;
	mix-blend-mode: multiply;
	filter: saturate(0.6);
}
.wd-prevention__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(245, 241, 232, 0.55) 0%, rgba(245, 241, 232, 0.85) 100%);
}
.wd-prevention .wd-container { position: relative; z-index: 1; }

.wd-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.wd-stat {
	background-color: var(--wd-surface);
	border: 1px solid var(--wd-hairline);
	border-radius: var(--wd-radius-lg);
	padding: 40px 32px;
	transition: transform 0.4s var(--wd-ease),
	            box-shadow 0.4s var(--wd-ease),
	            border-color 0.4s var(--wd-ease);
}
.wd-stat:hover {
	transform: translateY(-4px);
	box-shadow: var(--wd-shadow-lg);
	border-color: rgba(11, 79, 74, 0.18);
}
.wd-stat__num {
	font-family: var(--wd-font-head);
	font-size: clamp(2.75rem, 4.8vw, 4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wd-deep-teal);
	margin-bottom: 18px;
}
.wd-stat__num span {
	font-size: 0.5em;
	color: var(--wd-soft-gold);
	font-weight: 500;
	margin-left: 2px;
}
.wd-stat__label {
	font-size: 0.975rem;
	line-height: 1.6;
	color: var(--wd-text);
}

@media (max-width: 960px) { .wd-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wd-stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Pillars — bento
   ========================================================================== */
.wd-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(240px, auto);
	gap: 20px;
}
.wd-bento__card {
	background-color: var(--wd-warm-ivory);
	border: 1px solid var(--wd-hairline);
	border-radius: var(--wd-radius-lg);
	padding: 40px;
	display: flex;
	flex-direction: column;
	transition: transform 0.4s var(--wd-ease),
	            box-shadow 0.4s var(--wd-ease),
	            border-color 0.4s var(--wd-ease);
}
.wd-bento__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wd-shadow-lg);
	border-color: rgba(11, 79, 74, 0.22);
}
.wd-bento__card--wide { grid-column: span 2; }

.wd-bento__icon {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(11, 79, 74, 0.08), rgba(11, 79, 74, 0.14));
	color: var(--wd-deep-teal);
	margin-bottom: 24px;
}
.wd-bento__icon svg { width: 24px; height: 24px; }

.wd-bento__card h3 {
	font-size: 1.5rem;
	margin-bottom: 14px;
	color: var(--wd-charcoal);
}
.wd-bento__card p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wd-text);
	margin: 0;
}

@media (max-width: 900px) {
	.wd-bento { grid-template-columns: repeat(2, 1fr); }
	.wd-bento__card--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
	.wd-bento { grid-template-columns: 1fr; }
	.wd-bento__card--wide { grid-column: span 1; }
	.wd-bento__card { padding: 32px; }
}

/* ==========================================================================
   12. Three Brands
   ========================================================================== */
.wd-brands__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.wd-brand-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wd-surface);
	border: 1px solid var(--wd-hairline);
	border-radius: var(--wd-radius-lg);
	overflow: hidden;
	color: var(--wd-text);
	text-decoration: none;
	transition: transform 0.4s var(--wd-ease),
	            box-shadow 0.4s var(--wd-ease),
	            border-color 0.4s var(--wd-ease);
}
.wd-brand-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wd-shadow-xl);
	border-color: rgba(11, 79, 74, 0.18);
	color: var(--wd-text);
}
.wd-brand-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--wd-mist-grey);
}
.wd-brand-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--wd-ease);
}
.wd-brand-card:hover .wd-brand-card__media img { transform: scale(1.06); }

.wd-brand-card__body {
	padding: 32px 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.wd-brand-card__logo {
	font-family: var(--wd-font-head);
	font-size: 1.625rem;
	font-weight: 600;
	color: var(--wd-deep-teal);
	letter-spacing: -0.025em;
}
.wd-brand-card__logo span { color: var(--wd-soft-gold); }
.wd-brand-card__tagline {
	display: inline-block;
	width: fit-content;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wd-soft-gold);
	background-color: rgba(201, 168, 106, 0.12);
	padding: 6px 14px;
	border-radius: var(--wd-radius-pill);
	margin: 4px 0 8px;
}
.wd-brand-card__copy {
	font-size: 0.975rem;
	line-height: 1.7;
	color: var(--wd-text);
	margin: 0 0 20px;
}
.wd-brand-card__cta {
	margin-top: auto;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wd-deep-teal);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: gap 0.3s var(--wd-ease), color 0.3s var(--wd-ease);
}
.wd-brand-card:hover .wd-brand-card__cta {
	color: var(--wd-soft-gold);
	gap: 12px;
}

@media (max-width: 960px) { .wd-brands__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ==========================================================================
   13. Trust & Results
   ========================================================================== */
.wd-results__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: center;
}
.wd-result {
	padding: 28px 16px;
	border-left: 1px solid rgba(245, 241, 232, 0.10);
}
.wd-result:first-child { border-left: none; }
.wd-result__num {
	font-family: var(--wd-font-head);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wd-warm-ivory);
}
.wd-result__num span {
	color: var(--wd-soft-gold);
	font-weight: 500;
}
.wd-result__label {
	margin-top: 14px;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(245, 241, 232, 0.65);
}

@media (max-width: 800px) {
	.wd-results__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.wd-result { border-left: none; }
}
@media (max-width: 480px) {
	.wd-results__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Choose Your Path
   ========================================================================== */
.wd-paths__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.wd-path-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wd-surface);
	border: 1px solid var(--wd-hairline);
	border-radius: var(--wd-radius-lg);
	overflow: hidden;
	color: var(--wd-text);
	text-decoration: none;
	transition: transform 0.4s var(--wd-ease),
	            box-shadow 0.4s var(--wd-ease),
	            border-color 0.4s var(--wd-ease);
}
.wd-path-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wd-shadow-xl);
	border-color: rgba(11, 79, 74, 0.18);
	color: var(--wd-text);
}
.wd-path-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--wd-mist-grey);
}
.wd-path-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--wd-ease);
}
.wd-path-card:hover .wd-path-card__media img { transform: scale(1.06); }

.wd-path-card__body {
	padding: 32px 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}
.wd-path-card__body h3 {
	font-size: 1.5rem;
	color: var(--wd-charcoal);
	margin: 0;
}
.wd-path-card__body p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wd-text);
	margin: 0 0 16px;
}
.wd-path-card__cta {
	margin-top: auto;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--wd-deep-teal);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: gap 0.3s var(--wd-ease), color 0.3s var(--wd-ease);
}
.wd-path-card:hover .wd-path-card__cta {
	color: var(--wd-soft-gold);
	gap: 12px;
}

@media (max-width: 900px) { .wd-paths__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ==========================================================================
   15. Final CTA (teal)
   ========================================================================== */
.wd-finale__inner {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.wd-finale h2 {
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	line-height: 1.1;
	color: var(--wd-warm-ivory);
	margin: 0 0 24px;
	letter-spacing: -0.025em;
}
.wd-finale h2 em {
	color: var(--wd-soft-gold);
	font-style: italic;
	font-weight: 500;
}
.wd-finale__lede {
	font-size: 1.125rem;
	line-height: 1.7;
	color: rgba(245, 241, 232, 0.86);
	margin: 0 auto 40px;
	max-width: 640px;
}
.wd-finale__ctas {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

@media (max-width: 520px) {
	.wd-finale__ctas { display: flex; width: 100%; }
	.wd-finale__ctas .wd-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   16. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.wd-stat:hover,
	.wd-bento__card:hover,
	.wd-brand-card:hover,
	.wd-path-card:hover,
	.wd-btn:hover { transform: none !important; }
}

/* ==========================================================================
   17. Parent-theme suppression
   The medicate parent ships its own navbar + page-title banner via
   <header id="pt-header"> and the .pt-breadcrumb block. The child theme
   already replaces them with <header class="wd-header">. These !important
   rules act as a final safety net: even if cached HTML, an Elementor theme
   builder template, or any plugin injects the parent header, it will not
   appear visually on the page. Combined with the empty no-op files in
   template-parts/header/, the parent navigation is suppressed in every
   render path WordPress could take.
   ========================================================================== */
#pt-header,
.pt-header-default,
.pt-header-style-one,
.pt-header-style-two,
.pt-header-style-three,
.pt-header-style-four,
.pt-header-style-five,
.pt-top-header,
.pt-bottom-header,
.pt-background-overlay,
.pt-breadcrumb,
.navbar.navbar-expand-lg.navbar-light {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Parent preloader spinner (if it stays after page load). */
#pt-loading,
.pt-loading-block { display: none !important; }

/* Defensive — guarantee our header sits above everything else. */
.wd-header { z-index: 9999 !important; }

/* ==========================================================================
   18. Tight-viewport nav fitting (1025–1180px)
   This is the squeeze zone where logo + 5 nav items + CTA can crowd each
   other. Reduces nav padding further and trims the brand wordmark size so
   the "Get Started" button never clips against the right edge.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1180px) {
	.wd-header__brand { font-size: 1.25rem; }
	.wd-header__nav a { padding: 6px 10px; font-size: 12.5px; }
	.wd-header__cta .wd-btn { padding: 9px 18px; font-size: 12.5px; }
	.wd-header__cta { margin-right: 8px; }
}