/*
Version: 1.0.2
last updated: 2026-09-20
*/

/* =========================================================
   NATURALMED – ABOUT HERO
   Allow headline to overlap photograph
   ========================================================= */

@media (min-width: 981px) {

	/* Nothing in the Divi hierarchy may clip the heading */
	.nm-about-hero,
	.nm-about-hero .et_pb_row,
	.nm-about-hero .et_pb_column,
	.nm-about-hero .et_pb_module,
	.nm-about-hero .et_pb_text_inner {
		overflow: visible !important;
	}

	/* Text column must paint above image column */
	.nm-about-hero .nm-pain-hero__content {
		position: relative;
		z-index: 5;
	}

	.nm-about-hero .nm-pain-hero__image {
		position: relative;
		z-index: 1;
	}

	/* Let H1 physically extend beyond its column */
	.nm-about-hero .nm-pain-hero__content h1 {
		position: relative;
		z-index: 6;

		width: calc(100% + 180px);
		max-width: none;
	}

	.nm-about-hero .nm-pain-hero__image::before {
		content: "";
		position: absolute;
		z-index: 2;

		inset: 0 auto 0 0;
		width: 22%;

		background:
			linear-gradient(
				90deg,
				rgba(247, 250, 248, .92) 0%,
				rgba(247, 250, 248, .48) 48%,
				rgba(247, 250, 248, 0) 100%
			);

		pointer-events: none;
	}

	.nm-about-hero .nm-pain-hero__row > .et_pb_column:first-child {
		position: relative;
		z-index: 5;
		overflow: visible !important;
	}

	.nm-about-hero .nm-pain-hero__row > .et_pb_column:last-child {
		position: relative;
		z-index: 1;
	}
}

/* =========================================================
   NATURALMED – ABOUT PAGE DESIGN SYSTEM
   ========================================================= */

.nm-about-page {
	--about-blue: #00529b;
	--about-blue-dark: #0c4d76;
	--about-green: #7bc143;
	--about-text: #415b67;

	--about-cream: #f7f3ea;
	--about-soft-green: #f3f8f5;
	--about-white: #fff;

	--about-border: rgba(55, 92, 70, .11);

	--about-max: 1240px;
	--about-reading: 780px;

	--about-section-y: clamp(4.75rem, 8vw, 7rem);
}


/* Standard About section geometry */

.nm-about-section {
	padding:
		var(--about-section-y)
		clamp(1.5rem, 6vw, 6rem) !important;
}

.nm-about-section > .et_pb_row {
	width: 100% !important;
	max-width: var(--about-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}


/* Eyebrows */

.nm-about-eyebrow {
	margin: 0 0 .8rem;

	color: var(--about-green);

	font-size: .72rem;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: .14em;
	text-transform: uppercase;
}


/* Major editorial headings */

.nm-about-heading {
	margin: 0 0 1.35rem !important;
	padding: 0 !important;

	color: var(--about-blue-dark);

	font-family: var(--nm-font-display);
	font-size: clamp(2.35rem, 4vw, 3.75rem);
	font-weight: 600;
	line-height: 1.02;

	letter-spacing: -.025em;
}


/* Intro / lead */

.nm-about-lead {
	color: var(--about-text);

	font-size: clamp(1rem, 1.2vw, 1.08rem);
	line-height: 1.75;
}


/* Prevent Divi's default final paragraph gap */

.nm-about-lead p:last-child,
.nm-about-copy p:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* =========================================================
   ABOUT – APPROACH
   ========================================================= */

.nm-about-approach {
	background: #fff;
}

.nm-about-approach__row {
	max-width: 1080px !important;
}

.nm-about-approach__intro {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.nm-about-approach__intro .nm-about-lead {
	max-width: 780px;
	margin: 0 auto;
}


/* Principles */

.nm-approach-principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);

	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2.25rem, 4vw, 3rem);

	border-top: 1px solid var(--about-border);
}

.nm-approach-principle {
	position: relative;
}

.nm-approach-principle__number {
	margin-bottom: 1rem;

	color: rgba(123, 193, 67, .38);

	font-family: var(--nm-font-display);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1;
}

.nm-approach-principle__label {
	margin-bottom: .45rem;

	color: var(--about-green);

	font-size: .7rem;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: .13em;
	text-transform: uppercase;
}

.nm-approach-principle h3 {
	margin: 0 0 .65rem !important;
	padding: 0 !important;

	color: var(--about-blue-dark);

	font-family: var(--nm-font-display);
	font-size: clamp(1.45rem, 2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.1;
}

.nm-approach-principle p {
	margin: 0 !important;

	color: var(--about-text);

	font-size: .91rem;
	line-height: 1.65;
}

/* =========================================================
   NATURALMED – PROFESSIONAL JOURNEY TIMELINE
   ========================================================= */

.nm-journey-timeline {
	--timeline-line: rgba(123, 193, 67, .32);
	--timeline-green: #7bc143;
	--timeline-blue: #0c4d76;
	--timeline-text: #415b67;

	position: relative;

	width: 100%;
	max-width: none;

	margin: .4rem 0 0;
	padding: .25rem 0;
}

/* =========================================================
   ABOUT – PROFESSIONAL JOURNEY
   ========================================================= */

.nm-about-journey {
	background: var(--about-cream);
}

.nm-about-journey__row {
	display: flex !important;
	align-items: flex-start;
	gap: clamp(3.5rem, 7vw, 7rem);
}

.nm-about-journey__row > .et_pb_column:first-child {
	flex: 0 0 34%;
	width: auto !important;
	margin: 0 !important;
}

.nm-about-journey__row > .et_pb_column:last-child {
	flex: 1 1 66%;
	width: auto !important;
	margin: 0 !important;
}

.nm-about-journey__row > .et_pb_column {
	width: auto !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

@media (max-width: 980px) {

	.nm-about-journey__row {
		display: block !important;
	}

	.nm-about-journey__row > .et_pb_column {
		width: 100% !important;
		margin: 0 !important;
	}

	.nm-about-journey__row > .et_pb_column + .et_pb_column {
		margin-top: 2.75rem !important;
	}
}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
.nm-about-journey__intro .nm-about-heading {
	max-width: 430px;
}

.nm-about-journey__intro .nm-about-lead {
	max-width: 390px;
}


/* Sticky editorial introduction */

@media (min-width: 1200px) {

	.nm-about-journey__intro {
		position: sticky;
		top: 120px;
	}
}

/* ---------------------------------------------------------
   VERTICAL LINE
   --------------------------------------------------------- */

.nm-journey-timeline::before {
	content: "";

	position: absolute;
	top: .65rem;
	bottom: .65rem;
	left: 11px;

	width: 1px;

	background:
		linear-gradient(
			to bottom,
			rgba(123, 193, 67, .08),
			var(--timeline-line) 8%,
			var(--timeline-line) 92%,
			rgba(123, 193, 67, .08)
		);
}


/* ---------------------------------------------------------
   TIMELINE ITEM
   --------------------------------------------------------- */

.nm-journey-item {
	position: relative;

	display: grid;
	grid-template-columns: 23px minmax(0, 1fr);
	column-gap: 1.5rem;

	padding: 0 0 2.6rem;
}

.nm-journey-item:last-child {
	padding-bottom: 0;
}


/* ---------------------------------------------------------
   MARKER
   --------------------------------------------------------- */

.nm-journey-marker {
	position: relative;
	z-index: 2;

	width: 13px;
	height: 13px;

	margin-top: .35rem;
	margin-left: 5px;

	background: #fff;

	border: 2px solid var(--timeline-green);
	border-radius: 50%;

	box-shadow:
		0 0 0 5px rgba(123, 193, 67, .09);
}


/* Current / NaturalMED milestone */

.nm-journey-item--current .nm-journey-marker {
	background: var(--timeline-green);

	box-shadow:
		0 0 0 5px rgba(123, 193, 67, .12),
		0 3px 10px rgba(74, 130, 63, .12);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.nm-journey-content {
	padding-left: .1rem;
}


/* Small category / period */

.nm-journey-label {
	margin: 0 0 .3rem;

	color: var(--timeline-green);

	font-size: .7rem;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: .12em;
	text-transform: uppercase;
}


/* Editorial title */

.nm-journey-content h3 {
	margin: 0 0 .45rem !important;
	padding: 0 !important;

	color: var(--timeline-blue);

	font-family: var(--nm-font-display);
	font-size: clamp(1.55rem, 2.1vw, 1.9rem);
	font-weight: 600;
	line-height: 1.08;

	letter-spacing: -.015em;
}


/* Description */

.nm-journey-content p {
	max-width: 650px;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--timeline-text);

	font-size: .94rem;
	font-weight: 400;
	line-height: 1.7;
}

.nm-journey-content strong {
	color: #294f62;
	font-weight: 600;
}


/* ---------------------------------------------------------
   FINAL MILESTONE
   Give NaturalMED a little more emphasis
   --------------------------------------------------------- */

.nm-journey-item--current .nm-journey-label {
	color: #4e9f49;
}

.nm-journey-item--current .nm-journey-content h3 {
	color: #00529b;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.nm-journey-timeline {
		margin-top: 2rem;
	}

	.nm-journey-item {
		grid-template-columns: 21px minmax(0, 1fr);
		column-gap: 1.1rem;

		padding-bottom: 2.1rem;
	}

	.nm-journey-timeline::before {
		left: 10px;
	}

	.nm-journey-marker {
		margin-left: 4px;
	}

	.nm-journey-content h3 {
		font-size: 1.5rem;
	}

	.nm-journey-content p {
		font-size: .9rem;
		line-height: 1.65;
	}
}

/* =========================================================
   ABOUT – CREDENTIALS
   ========================================================= */

.nm-about-credentials__row {
	margin-top: clamp(3.75rem, 7vw, 6rem) !important;
}

.nm-about-credentials {
	padding: clamp(2rem, 4vw, 3.5rem);

	background: rgba(255,255,255,.82);

	border: 1px solid rgba(55,92,70,.10);
	border-radius: 20px;

	box-shadow:
		0 16px 45px rgba(28,54,38,.055);
}

.nm-credentials__header {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.nm-credentials__header h3 {
	margin: 0 !important;
	padding: 0 !important;

	color: var(--about-blue-dark);

	font-family: var(--nm-font-display);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.08;
}


/* Two-column factual list */

.nm-credentials__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	column-gap: clamp(2rem, 6vw, 5rem);
	row-gap: 1rem;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}

.nm-credentials__list li {
	position: relative;

	margin: 0 !important;
	padding: 0 0 0 1.65rem !important;

	color: var(--about-text);

	font-size: .92rem;
	line-height: 1.55;
}

.nm-credentials__list li::before {
	content: "✓";

	position: absolute;
	top: 0;
	left: 0;

	color: var(--about-green);

	font-weight: 700;
}

.nm-credentials__note {
	margin: 2.25rem 0 0 !important;
	padding: 1.35rem 0 0 !important;

	border-top: 1px solid var(--about-border);

	color: #708079;

	font-size: .78rem;
	font-style: italic;
	line-height: 1.6;
}

/* =========================================================
   ABOUT – BEYOND THE TREATMENT ROOM
   ========================================================= */

.nm-about-beyond {
	background: #fff;
}

.nm-about-beyond__intro {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.nm-about-beyond__grid-row {
	margin-top: clamp(3rem, 5vw, 4.5rem) !important;
}

.nm-beyond-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
}

.nm-beyond-item {
	position: relative;

	padding:
		1rem
		clamp(2rem, 4vw, 3.5rem)
		.5rem;

	text-align: center;
}

.nm-beyond-item + .nm-beyond-item {
	border-left: 1px solid var(--about-border);
}

.nm-beyond-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 48px;
	height: 48px;

	margin: 0 auto 1.35rem;

	color: var(--about-green);

	background: rgba(123,193,67,.09);

	border-radius: 50%;

	font-size: 1rem;
}

.nm-beyond-item h3 {
	margin: 0 0 .75rem !important;
	padding: 0 !important;

	color: var(--about-blue-dark);

	font-family: var(--nm-font-display);
	font-size: clamp(1.45rem, 2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.1;
}

.nm-beyond-item p {
	max-width: 320px;

	margin: 0 auto !important;

	color: var(--about-text);

	font-size: .91rem;
	line-height: 1.7;
}

.nm-beyond-item strong {
	color: #294f62;
	font-weight: 600;
}

/* =========================================================
   ABOUT – INDIVIDUALIZED CARE / LISTENING
   ========================================================= */

.nm-about-listening {
	position: relative;
	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#064f7e 0%,
			#0b628e 100%
		);

	color: #fff;
}


/* Soft atmospheric shapes */

.nm-about-listening::before,
.nm-about-listening::after {
	content: "";

	position: absolute;

	border-radius: 50%;

	pointer-events: none;
}

.nm-about-listening::before {
	width: 360px;
	height: 360px;

	top: -190px;
	right: -90px;

	background: rgba(255,255,255,.045);
}

.nm-about-listening::after {
	width: 260px;
	height: 260px;

	bottom: -170px;
	left: 7%;

	background: rgba(123,193,67,.09);
}


.nm-about-listening__row {
	position: relative;
	z-index: 2;

	max-width: 1040px !important;
}

.nm-about-listening__content {
	max-width: 790px;
	margin: 0 auto;

	text-align: center;
}

.nm-about-listening .nm-about-eyebrow {
	color: #a8d982;
}

.nm-about-listening .nm-about-heading {
	color: #fff;

	font-size: clamp(2.6rem, 4.5vw, 4.2rem);
}

.nm-about-listening .nm-about-lead {
	max-width: 690px;
	margin: 0 auto;

	color: rgba(255,255,255,.84);
}

.nm-about-listening .nm-about-lead p {
	color: inherit;
}

/* =========================================================
   ABOUT – CTA PLACEMENT
   ========================================================= */

.nm-about-cta-section {
	padding:
		clamp(4.5rem, 8vw, 7rem)
		clamp(1.5rem, 6vw, 6rem) !important;

	background: #fff;
}

.nm-about-cta-row {
	width: 100% !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
}

/* =========================================================
   ABOUT – RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

	.nm-about-section {
		padding:
			clamp(4rem, 8vw, 5.5rem)
			clamp(1.5rem, 5vw, 3rem) !important;
	}

	.nm-about-journey__row {
		grid-template-columns: 1fr;
		gap: 2.75rem;
	}

	.nm-about-journey__intro .nm-about-heading,
	.nm-about-journey__intro .nm-about-lead {
		max-width: 720px;
	}

	.nm-beyond-item {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
	}
}


@media (max-width: 767px) {

	.nm-about-heading {
		font-size: clamp(2.15rem, 9vw, 2.8rem);
	}

	.nm-approach-principles {
		grid-template-columns: 1fr;
		gap: 0;

		text-align: left;
	}

	.nm-approach-principle {
		padding: 1.75rem 0;
	}

	.nm-approach-principle + .nm-approach-principle {
		border-top: 1px solid var(--about-border);
	}

	.nm-credentials__list {
		grid-template-columns: 1fr;
	}

	.nm-beyond-grid {
		grid-template-columns: 1fr;
	}

	.nm-beyond-item {
		padding: 2rem 0;
	}

	.nm-beyond-item + .nm-beyond-item {
		border-left: 0;
		border-top: 1px solid var(--about-border);
	}

	.nm-about-listening__content {
		text-align: left;
	}

	.nm-about-listening .nm-about-heading br {
		display: none;
	}
}

/* =========================================================
   ABOUT – DIVI 5 STRUCTURE CORRECTIONS
   2026-09-20
   ========================================================= */

/* Scope the design tokens to the actual WordPress page body. */
body.page-id-255679 {
	--about-blue: #00529b;
	--about-blue-dark: #0c4d76;
	--about-green: #7bc143;
	--about-text: #415b67;
	--about-cream: #f7f3ea;
	--about-soft-green: #f3f8f5;
	--about-white: #fff;
	--about-border: rgba(55, 92, 70, .11);
	--about-max: 1240px;
	--about-reading: 780px;
	--about-section-y: clamp(4.75rem, 8vw, 7rem);
}

body.page-id-255679 .nm-about-section {
	box-sizing: border-box;
	flex-direction: column;
	align-items: stretch;
	padding:
		var(--about-section-y)
		clamp(1.5rem, 6vw, 6rem) !important;
}

body.page-id-255679 .nm-about-section > .et_pb_row {
	width: 100% !important;
	max-width: var(--about-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Approach: the intro and principles currently share one Divi column. */
.nm-about-approach__row {
	max-width: 1080px !important;
}

.nm-about-approach__row > .et_pb_column {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.nm-about-approach__row .et_pb_text:first-child {
	max-width: 880px;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

.nm-about-approach__row .et_pb_text:first-child .nm-about-lead {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* Journey: Divi contains intro and timeline in two separate rows.
   Compose those rows as columns at the section level. */
body.page-id-255679 .nm-about-journey {
	display: grid !important;
	grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
	column-gap: clamp(3.5rem, 7vw, 7rem);
	row-gap: 0;
	align-items: start;
	background: var(--about-cream);
}

body.page-id-255679 .nm-about-journey > .nm-about-journey__row {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.page-id-255679 .nm-about-journey > .nm-about-journey__row > .et_pb_column {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.page-id-255679 .nm-about-journey > .nm-about-journey__row:first-child .et_pb_module {
	max-width: 430px;
}

body.page-id-255679 .nm-about-journey > .nm-about-journey__row:first-child .nm-about-lead {
	max-width: 390px;
}

body.page-id-255679 .nm-about-credentials__row {
	grid-column: 1 / -1;
	margin-top: clamp(3.75rem, 7vw, 6rem) !important;
}

body.page-id-255679 .nm-about-credentials__row .et_pb_module {
	padding: clamp(2rem, 4vw, 3.5rem);
	background: rgba(255,255,255,.82);
	border: 1px solid rgba(55,92,70,.10);
	border-radius: 20px;
	box-shadow: 0 16px 45px rgba(28,54,38,.055);
}

/* Keep the open editorial sections centered inside the shared measure. */
.nm-about-beyond__intro-row {
	max-width: 760px !important;
	text-align: center;
}

.nm-about-beyond__grid-row {
	max-width: 1180px !important;
}

body.page-id-255679 .nm-about-listening__row {
	max-width: 1040px !important;
}

@media (min-width: 1200px) {
	body.page-id-255679 .nm-about-journey > .nm-about-journey__row:first-child .et_pb_module {
		position: sticky;
		top: 120px;
	}
}

@media (max-width: 980px) {
	body.page-id-255679 .nm-about-section {
		padding:
			clamp(4rem, 8vw, 5.5rem)
			clamp(1.5rem, 5vw, 3rem) !important;
	}

	body.page-id-255679 .nm-about-journey {
		display: grid !important;
		grid-template-columns: 1fr;
		row-gap: 2.75rem;
	}

	body.page-id-255679 .nm-about-credentials__row {
		grid-column: 1;
		margin-top: clamp(1rem, 4vw, 2rem) !important;
	}

	body.page-id-255679 .nm-about-journey > .nm-about-journey__row:first-child .et_pb_module,
	body.page-id-255679 .nm-about-journey > .nm-about-journey__row:first-child .nm-about-lead {
		max-width: 720px;
	}
}

@media (max-width: 767px) {
	.nm-about-approach__row .et_pb_text:first-child {
		text-align: left;
	}

	body.page-id-255679 .nm-about-credentials__row .et_pb_module {
		padding: 1.75rem 1.35rem;
	}
}


/* Keep the About hero headline inside the tablet/mobile canvas. */
@media (max-width: 980px) {
	body.page-id-255679 .nm-about-hero .nm-pain-hero__content h1 {
		width: 100% !important;
		max-width: 100% !important;
		white-space: normal !important;
	}
}