/**
 * Moore Health — Components
 *
 * Reusable UI pieces shared across templates. Header, footer, forms and the
 * portal preview live in their own files.
 *
 * @package MooreHealth
 */

/* =====================================================================
 * Buttons
 * ===================================================================== */

.mh-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-2);
	min-height: var(--mh-control-height);
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--mh-radius-pill);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-body);
	font-weight: var(--mh-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--mh-duration) var(--mh-ease),
		border-color var(--mh-duration) var(--mh-ease),
		color var(--mh-duration) var(--mh-ease),
		box-shadow var(--mh-duration) var(--mh-ease),
		transform var(--mh-duration) var(--mh-ease);
}

.mh-button:hover {
	transform: translateY(-1px);
}

.mh-button:active {
	transform: translateY(0);
}

.mh-button--lg {
	min-height: var(--mh-control-height-lg);
	padding: 0.9rem 1.875rem;
	font-size: 1.0625rem;
}

.mh-button--block {
	display: flex;
	width: 100%;
}

.mh-button__icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	transition: transform var(--mh-duration) var(--mh-ease);
}

.mh-button:hover .mh-button__icon {
	transform: translateX(3px);
}

/* Primary — blue fill, white text. */
.mh-button--primary {
	background-color: var(--mh-blue);
	color: var(--mh-pure-white);
	box-shadow: 0 8px 24px rgba(22, 93, 255, 0.22);
}

.mh-button--primary:hover,
.mh-button--primary:focus-visible {
	background-color: var(--mh-blue-press);
	color: var(--mh-pure-white);
	box-shadow: 0 12px 32px rgba(22, 93, 255, 0.28);
}

/* Secondary — transparent with a navy border. */
.mh-button--secondary {
	background-color: transparent;
	border-color: var(--mh-navy);
	color: var(--mh-navy);
}

.mh-button--secondary:hover,
.mh-button--secondary:focus-visible {
	background-color: var(--mh-navy);
	color: var(--mh-pure-white);
}

/* Secondary on dark surfaces. */
.mh-button--secondary-light {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--mh-pure-white);
}

.mh-button--secondary-light:hover,
.mh-button--secondary-light:focus-visible {
	background-color: var(--mh-pure-white);
	border-color: var(--mh-pure-white);
	color: var(--mh-navy);
}

/* Solid white on dark surfaces. */
.mh-button--light {
	background-color: var(--mh-pure-white);
	color: var(--mh-navy);
}

.mh-button--light:hover,
.mh-button--light:focus-visible {
	background-color: var(--mh-sky);
	color: var(--mh-navy);
}

/* Quiet surface button used in headers and cards. */
.mh-button--ghost {
	background-color: var(--mh-pure-white);
	border-color: var(--mh-border);
	color: var(--mh-navy);
}

.mh-button--ghost:hover,
.mh-button--ghost:focus-visible {
	border-color: var(--mh-navy);
	color: var(--mh-navy);
}

.mh-button[aria-disabled="true"],
.mh-button:disabled {
	opacity: 0.55;
	pointer-events: none;
	box-shadow: none;
}

/* =====================================================================
 * Text link with arrow
 * ===================================================================== */

.mh-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--mh-space-1);
	min-height: var(--mh-tap-target);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-blue);
	text-decoration: none;
}

.mh-link-arrow:hover {
	color: var(--mh-navy);
	text-decoration: underline;
}

.mh-link-arrow__icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	transition: transform var(--mh-duration) var(--mh-ease);
}

.mh-link-arrow:hover .mh-link-arrow__icon {
	transform: translateX(3px);
}

.mh-section--dark .mh-link-arrow {
	color: var(--mh-pure-white);
}

/* Micro link, e.g. "Already a patient? Sign in". */
.mh-microlink {
	display: inline-flex;
	align-items: center;
	gap: var(--mh-space-1);
	min-height: var(--mh-tap-target);
	font-size: var(--mh-size-small);
	color: var(--mh-slate);
	text-decoration: none;
}

.mh-microlink a,
.mh-microlink > span > a {
	color: var(--mh-blue);
}

.mh-microlink__action {
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-blue);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.mh-microlink:hover .mh-microlink__action {
	color: var(--mh-navy);
}

/* =====================================================================
 * Trust line / trust strip
 * ===================================================================== */

.mh-trust-line {
	display: flex;
	align-items: flex-start;
	gap: var(--mh-space-2);
	font-size: var(--mh-size-small);
	line-height: var(--mh-leading-small);
	color: var(--mh-slate);
}

.mh-trust-line__icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.15em;
	color: var(--mh-success);
}

.mh-trust-strip {
	border-block: 1px solid var(--mh-border);
	background-color: var(--mh-bg);
}

.mh-trust-strip__list {
	display: grid;
	gap: var(--mh-space-3);
	margin: 0;
	padding: var(--mh-space-5) 0;
	list-style: none;
}

@media (min-width: 720px) {
	.mh-trust-strip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mh-space-4);
	}
}

@media (min-width: 960px) {
	.mh-trust-strip__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.mh-trust-strip__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mh-space-2);
	margin: 0;
	font-size: var(--mh-size-small);
	line-height: var(--mh-leading-small);
	color: var(--mh-slate);
}

.mh-trust-strip__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1em;
	color: var(--mh-blue);
}

/* =====================================================================
 * Hero
 * ===================================================================== */

.mh-hero {
	position: relative;
	padding-top: calc(var(--mh-header-height) + var(--mh-space-6));
	padding-bottom: var(--mh-space-7);
	background-color: var(--mh-bg);
	overflow: hidden;
}

@media (min-width: 960px) {
	.mh-hero {
		padding-top: calc(var(--mh-header-height) + var(--mh-space-7));
		padding-bottom: var(--mh-space-8);
	}
}

/* Soft blue wash behind the hero visual, never behind the copy. */
.mh-hero::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(46%, 640px);
	background: linear-gradient(180deg, rgba(220, 234, 255, 0.55) 0%, rgba(252, 251, 248, 0) 85%);
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 959px) {
	.mh-hero::after {
		display: none;
	}
}

.mh-hero > .mh-container {
	position: relative;
	z-index: 1;
}

.mh-hero__copy {
	max-width: 36rem;
}

.mh-hero__title {
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h1);
	font-weight: var(--mh-weight-display);
	line-height: var(--mh-leading-h1);
	letter-spacing: var(--mh-tracking-h1);
	color: var(--mh-navy);
}

.mh-hero__intro {
	margin-top: var(--mh-space-4);
	font-size: var(--mh-size-body-lg);
	line-height: var(--mh-leading-body-lg);
	color: var(--mh-text-body);
}

.mh-hero__actions {
	margin-top: var(--mh-space-5);
}

.mh-hero__microlink {
	margin-top: var(--mh-space-2);
}

.mh-hero__trust {
	margin-top: var(--mh-space-4);
	padding-top: var(--mh-space-4);
	border-top: 1px solid var(--mh-border);
}

.mh-hero__visual {
	position: relative;
}

@media (max-width: 959px) {
	/* Copy first, visual below, and never taller than it needs to be. */
	.mh-hero__visual {
		margin-top: var(--mh-space-6);
		max-height: 60vh;
	}

	.mh-hero__visual .mh-media {
		aspect-ratio: 5 / 4;
	}
}

/* Compact interior-page hero. */
.mh-hero--internal {
	padding-top: var(--mh-space-6);
	padding-bottom: var(--mh-space-6);
	background-color: var(--mh-bg-alt);
	border-bottom: 1px solid var(--mh-border);
}

.mh-hero--internal::after {
	display: none;
}

.mh-hero--internal .mh-hero__copy {
	max-width: var(--mh-measure);
}

/* Dark hero variation. */
.mh-hero--dark {
	background-color: var(--mh-navy);
	background-image: var(--mh-gradient-navy);
	color: var(--mh-text-inverse-muted);
}

.mh-hero--dark::after {
	display: none;
}

.mh-hero--dark .mh-hero__title {
	color: var(--mh-text-inverse);
}

.mh-hero--dark .mh-hero__intro {
	color: var(--mh-text-inverse-muted);
}

.mh-hero__relationship {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--mh-space-3);
	padding: 0.35rem 0.75rem;
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-accent-pale);
	color: var(--mh-navy);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-medium);
}

/* =====================================================================
 * Care pathway panel
 *
 * Image-led panels rather than three equal SaaS cards.
 * ===================================================================== */

.mh-pathways {
	display: grid;
	gap: var(--mh-space-4);
}

@media (min-width: 720px) {
	.mh-pathways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mh-space-5);
	}

	/* The parent-brand pathway spans the full width beneath the two clinics. */
	.mh-pathways > .mh-pathway--wide {
		grid-column: 1 / -1;
	}
}

.mh-pathway {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-lg);
	background-color: var(--mh-pure-white);
	transition:
		border-color var(--mh-duration-slow) var(--mh-ease),
		box-shadow var(--mh-duration-slow) var(--mh-ease),
		transform var(--mh-duration-slow) var(--mh-ease);
}

.mh-pathway:hover {
	border-color: var(--mh-accent);
	box-shadow: var(--mh-shadow-hover);
	transform: translateY(-3px);
}

.mh-pathway__media {
	position: relative;
	overflow: hidden;
	background-color: var(--mh-accent-pale);
	aspect-ratio: 4 / 3;
}

.mh-pathway__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--mh-ease);
}

.mh-pathway:hover .mh-pathway__media > img {
	transform: scale(1.02);
}

.mh-pathway__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--mh-space-2);
	padding: var(--mh-space-5);
}

@media (min-width: 960px) {
	.mh-pathway__body {
		padding: var(--mh-space-6);
	}
}

.mh-pathway__title {
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h3);
	font-weight: 700;
	line-height: var(--mh-leading-h3);
	color: var(--mh-navy);
}

.mh-pathway__relationship {
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-accent);
}

.mh-pathway__description {
	color: var(--mh-text-body);
}

.mh-pathway__cta {
	margin-top: auto;
	padding-top: var(--mh-space-3);
}

/**
 * The visible call to action.
 *
 * Must sit ABOVE the stretched overlay below, otherwise the overlay intercepts
 * the pointer and this link's hover state and arrow nudge never fire.
 */
.mh-pathway__link-text {
	position: relative;
	z-index: 2;
}

/* Whole-panel click target. The visible link stays the accessible name. */
.mh-pathway__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.mh-pathway__link:focus-visible {
	outline-offset: -4px;
}

/* Wide horizontal variant. */
@media (min-width: 960px) {
	.mh-pathway--wide {
		flex-direction: row;
		align-items: center;
	}

	.mh-pathway--wide .mh-pathway__media {
		flex: 0 0 34%;
		aspect-ratio: 16 / 10;
		align-self: stretch;
	}

	.mh-pathway--wide .mh-pathway__body {
		flex-direction: row;
		align-items: center;
		gap: var(--mh-space-6);
	}

	.mh-pathway--wide .mh-pathway__cta {
		margin: 0;
		padding: 0;
		flex-shrink: 0;
	}
}

/* Accent-only variant without imagery. */
.mh-pathway--flat .mh-pathway__media {
	display: none;
}

.mh-pathway--flat {
	background-color: var(--mh-accent-pale);
	border-color: transparent;
}

/* =====================================================================
 * Card — used selectively, not as the default layout
 * ===================================================================== */

.mh-card {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-2);
	padding: var(--mh-space-5);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius);
	background-color: var(--mh-pure-white);
}

.mh-card--raised {
	border-color: transparent;
	box-shadow: var(--mh-shadow);
}

.mh-card__title {
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-h4);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
}

.mh-card__cta {
	margin-top: auto;
	padding-top: var(--mh-space-3);
}

/* Feature icon leading a card, larger than an inline icon. */
.mh-card__icon {
	width: 1.75rem;
	height: 1.75rem;
	margin-bottom: var(--mh-space-1);
	color: var(--mh-blue);
}

/* =====================================================================
 * Principles list — numbered or plain editorial list
 * ===================================================================== */

.mh-principles {
	display: grid;
	gap: var(--mh-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mh-principle;
}

.mh-principles__item {
	margin: 0;
	padding-top: var(--mh-space-4);
	border-top: 1px solid var(--mh-border);
}

.mh-principles__title {
	margin-bottom: var(--mh-space-1);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-h4);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
}

.mh-principles__text {
	color: var(--mh-text-body);
}

/* =====================================================================
 * Process steps
 * ===================================================================== */

.mh-process {
	display: grid;
	gap: var(--mh-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mh-step;
}

@media (min-width: 720px) {
	.mh-process--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.mh-process--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 720px) and (max-width: 959px) {
	.mh-process--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mh-process__step {
	position: relative;
	margin: 0;
	padding-top: var(--mh-space-4);
	border-top: 2px solid var(--mh-blue);
	counter-increment: mh-step;
}

.mh-process__number {
	display: block;
	margin-bottom: var(--mh-space-2);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: var(--mh-tracking-label);
	text-transform: uppercase;
	color: var(--mh-blue);
}

.mh-process__title {
	margin-bottom: var(--mh-space-2);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-h4);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
}

.mh-process__text {
	color: var(--mh-text-body);
}

.mh-section--panel .mh-process__step {
	border-top-color: var(--mh-navy);
}

.mh-section--panel .mh-process__number {
	color: var(--mh-navy);
}

/* =====================================================================
 * Clinician card
 * ===================================================================== */

.mh-clinician {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-3);
}

.mh-clinician__media {
	overflow: hidden;
	border-radius: var(--mh-radius);
	background-color: var(--mh-sand);
	aspect-ratio: 4 / 5;
}

.mh-clinician__media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mh-clinician__name {
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h3);
	font-weight: 700;
	line-height: 1.15;
	color: var(--mh-navy);
}

.mh-clinician__credentials {
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-blue);
}

.mh-clinician__role {
	font-size: var(--mh-size-small);
	color: var(--mh-slate);
}

.mh-clinician__focus {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mh-size-small);
	color: var(--mh-slate);
}

/* Editorial feature layout for a single lead clinician. */
.mh-clinician--feature {
	gap: var(--mh-space-5);
}

@media (min-width: 720px) {
	.mh-clinician--feature {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--mh-space-6);
	}

	.mh-clinician--feature .mh-clinician__media {
		flex: 0 0 clamp(200px, 32%, 320px);
	}
}

/* =====================================================================
 * Feature band — one large idea across the full width
 * ===================================================================== */

.mh-feature-band__title {
	max-width: 24em;
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h2);
	font-weight: var(--mh-weight-display);
	line-height: var(--mh-leading-h2);
	letter-spacing: var(--mh-tracking-h2);
}

/* =====================================================================
 * Feature list with check marks — used in the portal section
 * ===================================================================== */

.mh-feature-list {
	display: grid;
	gap: var(--mh-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) {
	.mh-feature-list--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mh-space-2) var(--mh-space-4);
	}
}

.mh-feature-list__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mh-space-2);
	margin: 0;
	font-size: var(--mh-size-small);
	line-height: var(--mh-leading-small);
}

.mh-feature-list__icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.18em;
	color: var(--mh-blue-clear);
}

/* =====================================================================
 * Testimonial / pull quote
 *
 * Only ever populated with genuine, authorized content.
 * ===================================================================== */

.mh-quote {
	margin: 0;
	padding: var(--mh-space-6);
	border-radius: var(--mh-radius-lg);
	background-color: var(--mh-sand);
}

.mh-quote__text {
	margin: 0;
	max-width: 32em;
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h3);
	font-weight: var(--mh-weight-display);
	line-height: 1.35;
	color: var(--mh-navy);
}

.mh-quote__attribution {
	margin-top: var(--mh-space-4);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-slate);
}

/* =====================================================================
 * Existing patient notice
 * ===================================================================== */

.mh-existing-patient {
	display: grid;
	gap: var(--mh-space-4);
	align-items: center;
	padding: var(--mh-space-5);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-lg);
	background-color: var(--mh-ice);
}

@media (min-width: 720px) {
	.mh-existing-patient {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--mh-space-6);
		padding: var(--mh-space-6);
	}
}

.mh-existing-patient__title {
	margin-bottom: var(--mh-space-1);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-h4);
	font-weight: var(--mh-weight-semibold);
	color: var(--mh-navy);
}

.mh-existing-patient__text {
	max-width: 46em;
	font-size: var(--mh-size-small);
	line-height: var(--mh-leading-small);
	color: var(--mh-slate);
}

/* =====================================================================
 * Final CTA
 * ===================================================================== */

.mh-final-cta {
	text-align: left;
}

.mh-final-cta__inner {
	max-width: var(--mh-measure);
}

.mh-final-cta__title {
	font-family: var(--mh-font-display);
	font-size: var(--mh-size-h2);
	font-weight: var(--mh-weight-display);
	line-height: var(--mh-leading-h2);
	letter-spacing: var(--mh-tracking-h2);
}

.mh-final-cta__text {
	margin-top: var(--mh-space-4);
	font-size: var(--mh-size-body-lg);
	line-height: var(--mh-leading-body-lg);
}

.mh-final-cta__actions {
	margin-top: var(--mh-space-5);
}

/* =====================================================================
 * Accordion (FAQ)
 * ===================================================================== */

.mh-accordion {
	border-top: 1px solid var(--mh-border);
}

.mh-accordion__item {
	border-bottom: 1px solid var(--mh-border);
}

.mh-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-4);
	width: 100%;
	min-height: var(--mh-tap-target);
	padding: var(--mh-space-4) 0;
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-h4);
	font-weight: var(--mh-weight-semibold);
	line-height: 1.35;
	text-align: left;
	color: var(--mh-navy);
	transition: color var(--mh-duration) var(--mh-ease);
}

.mh-accordion__trigger:hover {
	color: var(--mh-blue);
}

.mh-accordion__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--mh-blue);
	transition: transform var(--mh-duration-slow) var(--mh-ease);
}

.mh-accordion__trigger[aria-expanded="true"] .mh-accordion__icon {
	transform: rotate(180deg);
}

/* Closed state relies on the hidden attribute so no-JS pages stay open. */
.mh-accordion__panel {
	padding-bottom: var(--mh-space-4);
	max-width: var(--mh-measure);
	color: var(--mh-text-body);
}

.mh-accordion__panel[hidden] {
	display: none;
}

/* =====================================================================
 * Announcement bar
 * ===================================================================== */

.mh-announcement {
	position: relative;
	z-index: var(--mh-z-announcement);
	background-color: var(--mh-navy);
	color: var(--mh-text-inverse);
	text-align: center;
}

.mh-announcement__text {
	margin: 0;
	padding: var(--mh-space-1) 0;
	font-size: var(--mh-size-small);
	line-height: var(--mh-leading-small);
	color: var(--mh-text-inverse);
}

.mh-announcement a {
	color: var(--mh-pure-white);
	text-decoration: underline;
}

/* =====================================================================
 * Breadcrumbs
 * ===================================================================== */

.mh-breadcrumbs {
	font-size: var(--mh-size-small);
	color: var(--mh-slate);
}

.mh-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mh-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-breadcrumbs__item {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--mh-space-1);
}

.mh-breadcrumbs__separator {
	color: var(--mh-border);
}

/* =====================================================================
 * Badge / status pill
 *
 * Status is always carried by text, never colour alone.
 * ===================================================================== */

.mh-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-sky);
	color: var(--mh-navy);
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

.mh-badge--available {
	background-color: #dcf1e8;
	color: #0f5e41;
}

.mh-badge--upcoming {
	background-color: var(--mh-sand);
	color: #6b5a3f;
}

/* =====================================================================
 * Editorial content (post/page body from the WordPress editor)
 * ===================================================================== */

.mh-prose {
	max-width: var(--mh-measure);
}

.mh-prose > * + * {
	margin-top: var(--mh-space-4);
}

.mh-prose h2 {
	margin-top: var(--mh-space-6);
	font-size: var(--mh-size-h3);
	line-height: var(--mh-leading-h3);
	letter-spacing: normal;
}

.mh-prose h3 {
	margin-top: var(--mh-space-5);
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-h4);
	font-weight: var(--mh-weight-semibold);
}

.mh-prose ul,
.mh-prose ol {
	padding-left: var(--mh-space-4);
}

.mh-prose img {
	border-radius: var(--mh-radius);
}

/* =====================================================================
 * Pagination
 * ===================================================================== */

.mh-pagination {
	margin-top: var(--mh-space-6);
	padding-top: var(--mh-space-5);
	border-top: 1px solid var(--mh-border);
}

.mh-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-1);
}

.mh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--mh-tap-target);
	min-height: var(--mh-tap-target);
	padding: 0 var(--mh-space-2);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-sm);
	color: var(--mh-navy);
	font-size: var(--mh-size-small);
	font-weight: var(--mh-weight-semibold);
	text-decoration: none;
}

.mh-pagination .page-numbers:hover {
	border-color: var(--mh-blue);
	color: var(--mh-blue);
}

.mh-pagination .page-numbers.current {
	background-color: var(--mh-navy);
	border-color: var(--mh-navy);
	color: var(--mh-pure-white);
}

/* =====================================================================
 * PREMIUM REFIT (v2)
 *
 * Layered on top of the base components rather than replacing them, so
 * nothing already working breaks. These rules deepen the visual language:
 * real elevation, teal accents, richer surfaces, more confident type.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Hero — atmospheric wash instead of a flat tint
 * --------------------------------------------------------------------- */

.mh-hero::after {
	width: 100%;
	background: var(--mh-gradient-hero);
	opacity: 1;
}

@media (max-width: 959px) {
	.mh-hero::after {
		display: block;
	}
}

.mh-hero__title {
	font-weight: var(--mh-weight-regular);
	letter-spacing: var(--mh-tracking-h1);
}

/* Optical refinement: the serif reads better slightly tighter at large sizes. */
@media (min-width: 960px) {
	.mh-hero__title {
		letter-spacing: -0.045em;
	}
}

.mh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--mh-blue);
}

/* Small rule before the eyebrow — a cheap, high-impact editorial signal. */
.mh-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 1px;
	background-color: currentColor;
	opacity: 0.55;
}

.mh-section--dark .mh-eyebrow,
.mh-section--gradient .mh-eyebrow {
	color: var(--mh-blue-bright);
}

/* ---------------------------------------------------------------------
 * Buttons — weightier, with a real press state
 * --------------------------------------------------------------------- */

.mh-button {
	font-weight: var(--mh-weight-semibold);
	letter-spacing: -0.005em;
	transition:
		background-color var(--mh-duration) var(--mh-ease),
		border-color var(--mh-duration) var(--mh-ease),
		color var(--mh-duration) var(--mh-ease),
		box-shadow var(--mh-duration) var(--mh-ease),
		transform var(--mh-duration-fast) var(--mh-ease);
}

.mh-button--primary {
	background-color: var(--mh-blue);
	box-shadow:
		0 1px 2px rgba(8, 27, 44, 0.12),
		0 8px 20px var(--mh-blue-glow);
}

.mh-button--primary:hover,
.mh-button--primary:focus-visible {
	background-color: var(--mh-blue-press);
	box-shadow:
		0 2px 4px rgba(8, 27, 44, 0.14),
		0 14px 32px var(--mh-blue-glow);
	transform: translateY(-2px);
}

.mh-button--primary:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(8, 27, 44, 0.16);
}

.mh-button--secondary {
	border-color: var(--mh-border-strong);
	color: var(--mh-ink);
	background-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(4px);
}

.mh-button--secondary:hover,
.mh-button--secondary:focus-visible {
	background-color: var(--mh-ink);
	border-color: var(--mh-ink);
	color: #fff;
	transform: translateY(-2px);
}

.mh-button--light:hover,
.mh-button--light:focus-visible {
	background-color: var(--mh-blue-light);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------
 * Cards and pathways — cut, not drawn
 * --------------------------------------------------------------------- */

.mh-card {
	background-color: var(--mh-pure-white);
	border-color: transparent;
	box-shadow: var(--mh-ring), var(--mh-shadow-sm);
	transition:
		box-shadow var(--mh-duration-slow) var(--mh-ease),
		transform var(--mh-duration-slow) var(--mh-ease);
}

.mh-card--raised {
	box-shadow: var(--mh-ring), var(--mh-shadow);
}

.mh-card__icon {
	color: var(--mh-blue);
}

.mh-pathway {
	background-color: var(--mh-pure-white);
	border-color: transparent;
	border-radius: var(--mh-radius-lg);
	box-shadow: var(--mh-ring), var(--mh-shadow-sm);
}

.mh-pathway:hover {
	border-color: transparent;
	box-shadow: var(--mh-ring), var(--mh-shadow-hover);
	transform: translateY(-4px);
}

.mh-pathway__media {
	background-color: var(--mh-accent-pale);
}

/* Accent hairline along the top of each pathway panel. */
.mh-pathway::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mh-accent) 0%, transparent 70%);
	opacity: 0;
	transition: opacity var(--mh-duration-slow) var(--mh-ease);
	z-index: 2;
}

.mh-pathway:hover::before {
	opacity: 1;
}

.mh-pathway__relationship {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: var(--mh-tracking-label);
	text-transform: uppercase;
	color: var(--mh-accent);
}

.mh-pathway--flat {
	background: linear-gradient(135deg, var(--mh-mist) 0%, var(--mh-accent-pale) 100%);
	box-shadow: var(--mh-ring);
}

/* ---------------------------------------------------------------------
 * Sections — richer surfaces
 * --------------------------------------------------------------------- */

.mh-section--dark {
	background-color: var(--mh-ink);
	background-image:
		radial-gradient(80% 60% at 15% 0%, rgba(59, 130, 246, 0.16) 0%, transparent 60%),
		radial-gradient(70% 70% at 100% 100%, rgba(22, 93, 255, 0.18) 0%, transparent 60%);
}

.mh-section--panel {
	background-color: var(--mh-sky);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 45%);
}

.mh-section--warm {
	background-color: var(--mh-sand);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, transparent 50%);
}

/* ---------------------------------------------------------------------
 * Process steps — numbered, with a teal rule
 * --------------------------------------------------------------------- */

.mh-process__step {
	border-top-width: 3px;
	border-top-color: var(--mh-blue);
	padding-top: var(--mh-space-5);
}

.mh-process__number {
	color: var(--mh-blue);
	font-size: var(--mh-size-label);
}

.mh-section--panel .mh-process__step {
	border-top-color: var(--mh-blue-press);
}

.mh-section--panel .mh-process__number {
	color: var(--mh-blue-press);
}

/* ---------------------------------------------------------------------
 * Trust strip — quieter, with teal marks
 * --------------------------------------------------------------------- */

.mh-trust-strip {
	background-color: var(--mh-pure-white);
	border-block-color: var(--mh-border);
}

.mh-trust-strip__icon,
.mh-trust-line__icon {
	color: var(--mh-blue);
}

/* ---------------------------------------------------------------------
 * Principles — numbered counters
 * --------------------------------------------------------------------- */

.mh-principles__item {
	position: relative;
	border-top-color: var(--mh-border);
	counter-increment: mh-principle;
	padding-top: var(--mh-space-4);
}

.mh-principles__title::before {
	content: counter(mh-principle, decimal-leading-zero);
	display: inline-block;
	margin-right: 0.625rem;
	font-family: var(--mh-font-body);
	font-size: var(--mh-size-label);
	font-weight: var(--mh-weight-bold);
	letter-spacing: 0.08em;
	color: var(--mh-blue);
	vertical-align: 0.15em;
}

/* ---------------------------------------------------------------------
 * Links and quotes
 * --------------------------------------------------------------------- */

.mh-link-arrow {
	color: var(--mh-blue);
	font-weight: var(--mh-weight-semibold);
}

.mh-link-arrow:hover {
	color: var(--mh-blue-press);
}

.mh-quote {
	background: linear-gradient(135deg, var(--mh-sand) 0%, var(--mh-blue-light) 140%);
	box-shadow: var(--mh-ring);
}

/* ---------------------------------------------------------------------
 * Existing-patient panel — reads as a real notice, not a card
 * --------------------------------------------------------------------- */

.mh-existing-patient {
	border-color: transparent;
	background: linear-gradient(135deg, var(--mh-mist) 0%, var(--mh-blue-light) 160%);
	box-shadow: var(--mh-ring);
}

/* ---------------------------------------------------------------------
 * Media — subtle inner ring so placeholders read as intentional
 * --------------------------------------------------------------------- */

.mh-media {
	box-shadow: var(--mh-ring);
}

.mh-placeholder {
	background-image: linear-gradient(135deg, rgba(22, 93, 255, 0.10) 0%, rgba(236, 229, 218, 0.6) 100%);
}

.mh-placeholder--warm {
	background-image: linear-gradient(135deg, rgba(236, 229, 218, 0.95) 0%, rgba(220, 233, 247, 0.7) 100%);
}

/* ---------------------------------------------------------------------
 * Badges
 * --------------------------------------------------------------------- */

.mh-badge {
	background-color: var(--mh-blue-light);
	color: var(--mh-blue-press);
}