/*!
Theme Name: Wellspring Health
Theme URI: https://wellspringhealth.ca/
Author: Wellspring Health
Author URI: https://wellspringhealth.ca/
Description: A custom WordPress theme for Wellspring Health, built on the Underscores starter. Lean, accessible, mobile-first.
Version: 0.78.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wellspring
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   1. Tokens
   ========================================================= */
:root {
	/* Brand colors */
	--ws-spring: #1FA873;
	--ws-spring-dark: #178A5E;
	--ws-forest: #0F4D33;
	--ws-snow: #FFFFFF;
	--ws-mist: #E8F4EE;
	--ws-paper: #FAF8F3;
	--ws-char: #0F1411;
	--ws-char-muted: #4A524E;
	--ws-white: #FFFFFF;
	--ws-border: rgba(15, 20, 17, 0.10);
	--ws-border-strong: rgba(15, 20, 17, 0.22);

	/* Semantic */
	--ws-bg: var(--ws-snow);
	--ws-text: var(--ws-char);
	--ws-text-muted: var(--ws-char-muted);
	--ws-link: var(--ws-spring);
	--ws-link-hover: var(--ws-forest);

	/* Typography — single family, weight contrast */
	--ws-font-display: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ws-font-body: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Fluid type scale */
	--ws-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--ws-text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
	--ws-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	--ws-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--ws-text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
	--ws-text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	--ws-text-3xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.25rem);
	--ws-text-4xl: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);

	/* Spacing scale */
	--ws-space-1: 0.25rem;
	--ws-space-2: 0.5rem;
	--ws-space-3: 0.75rem;
	--ws-space-4: 1rem;
	--ws-space-6: 1.5rem;
	--ws-space-8: 2rem;
	--ws-space-12: 3rem;
	--ws-space-16: 4rem;
	--ws-space-24: 6rem;

	/* Layout */
	--ws-container: 76rem;
	--ws-container-narrow: 56rem;
	--ws-container-prose: 42rem;
	--ws-radius-sm: 4px;
	--ws-radius: 8px;
	--ws-radius-lg: 16px;
	--ws-radius-xl: 24px;
}

/* =========================================================
   2. Reset / base
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--ws-bg);
	color: var(--ws-text);
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-base);
	font-weight: 400;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a {
	color: var(--ws-link);
	text-decoration: none;
	transition: color 150ms ease;
}

a:hover,
a:focus {
	color: var(--ws-link-hover);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 100;
	padding: 0.5rem 1rem;
	background: var(--ws-char);
	color: var(--ws-snow);
	border-radius: var(--ws-radius-sm);
	text-decoration: none;
}

/* =========================================================
   3. Typography
   ========================================================= */
h1, h2, h3, h4, h5 {
	font-family: var(--ws-font-display);
	font-weight: 500;
	color: var(--ws-text);
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 var(--ws-space-4);
	text-wrap: balance;
}

h1 { font-size: var(--ws-text-4xl); letter-spacing: -0.035em; }
h2 { font-size: var(--ws-text-3xl); letter-spacing: -0.03em; }
h3 { font-size: var(--ws-text-2xl); letter-spacing: -0.025em; }
h4 { font-size: var(--ws-text-xl); letter-spacing: -0.02em; }
h5 { font-size: var(--ws-text-lg); letter-spacing: -0.015em; }

h6 {
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ws-text-muted);
	margin: 0 0 var(--ws-space-3);
}

p { margin: 0 0 var(--ws-space-4); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 500; }

.eyebrow {
	display: inline-block;
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--ws-forest);
	margin-bottom: var(--ws-space-3);
}

/* =========================================================
   4. Layout primitives
   ========================================================= */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#content {
	flex: 1 0 auto;
}

.ws-container {
	max-width: var(--ws-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.ws-container--narrow { max-width: var(--ws-container-narrow); }
.ws-container--prose  { max-width: var(--ws-container-prose); }

.ws-section {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.ws-section--mist {
	background: var(--ws-mist);
}

/* Subtle dot-grain texture on the cards section */
.ws-section--mist:has(.ws-cards) {
	background-color: var(--ws-mist);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%230F4D33' fill-opacity='0.08'/%3E%3C/svg%3E");
}

/* =========================================================
   5. Site header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--ws-border);
}

/* Logged-in editors: the WordPress toolbar is fixed at the top of the window,
   so the sticky header has to stop below it rather than slide underneath. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* Below 600px the toolbar scrolls away with the page instead of staying fixed. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	max-width: var(--ws-container);
	margin-inline: auto;
	padding: var(--ws-space-4) clamp(1rem, 4vw, 2.5rem);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--ws-space-6);
	flex-wrap: wrap;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ws-space-4);
	flex: 0 0 auto;
	order: 3;
}

/* Tap-to-call icon — mobile header only. */
.ws-header-phone {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--ws-forest);
	transition: color 150ms ease;
}

.ws-header-phone:hover {
	color: var(--ws-spring);
}

.ws-header-phone svg {
	width: 26px;
	height: 26px;
}

/* The Book menu item only appears in the mobile full-screen menu. */
.ws-menu-book-item {
	display: none;
}

/* Mobile sub-menu expand/collapse caret (injected by navigation.js). */
.submenu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	color: var(--ws-char);
	flex: 0 0 auto;
}

.submenu-toggle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -70%) rotate(45deg);
	transition: transform 200ms ease;
}

.menu-item-has-children.is-open > .submenu-toggle::before {
	transform: translate(-50%, -30%) rotate(-135deg);
}

.ws-header-book {
	padding: 0.55rem 1.15rem;
	font-size: var(--ws-text-sm);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.site-branding {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	order: 1;
	margin-right: auto;
}

.site-title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xl);
	font-weight: 500;
	margin: 0;
	line-height: 1;
	letter-spacing: -0.03em;
}

.site-title a {
	color: var(--ws-char);
}

.site-description {
	display: none;
}

.custom-logo-link {
	display: inline-block;
}

.custom-logo {
	/* 62px is 48px +30%. The header has no fixed height — it is padding plus
	   its tallest child — so raising this raises the bar with it. */
	max-height: 62px;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

/* Navigation */
.main-navigation {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	order: 2;
}

@media (max-width: 1100px) {
	.main-navigation {
		flex: 0 0 auto;
		order: 1;
	}
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-6);
}

.main-navigation a {
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-char);
	text-decoration: none;
	padding-block: var(--ws-space-2);
	border-bottom: 2px solid transparent;
	transition: border-color 150ms ease, color 150ms ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--ws-spring);
	border-bottom-color: var(--ws-spring);
}

/* Parent items with sub-menu: chevron + dropdown */
.main-navigation .menu-item-has-children {
	position: relative;
}

.main-navigation .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	margin-left: 8px;
	transition: transform 200ms ease;
}

.main-navigation .menu-item-has-children:hover > a::after,
.main-navigation .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg) translateY(2px);
}

.main-navigation .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 240px;
	margin: var(--ws-space-2) 0 0;
	padding: var(--ws-space-2) 0;
	list-style: none;
	background: var(--ws-snow);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius);
	box-shadow: 0 12px 32px -16px rgba(15, 77, 51, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
	z-index: 60;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu li {
	margin: 0;
}

.main-navigation .sub-menu a {
	display: block;
	padding: var(--ws-space-2) var(--ws-space-4);
	font-size: var(--ws-text-sm);
	font-weight: 400;
	color: var(--ws-char);
	border-bottom: none;
	white-space: nowrap;
}

.main-navigation .sub-menu a:hover {
	background: var(--ws-mist);
	color: var(--ws-spring);
	border-bottom: none;
}

/* Hamburger button — hidden on desktop, visible on mobile */
.menu-toggle {
	display: none;
	width: 48px;
	height: 48px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	color: var(--ws-char);
	font-size: 0;
	line-height: 0;
	transition: color 150ms ease;
}

.menu-toggle:hover {
	color: var(--ws-spring);
}

/* Three horizontal lines drawn with a single pseudo-element + box-shadow */
.menu-toggle::before {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	top: 50%;
	height: 2px;
	background: currentColor;
	box-shadow: 0 -9px 0 currentColor, 0 9px 0 currentColor;
	transition: transform 200ms ease, box-shadow 200ms ease;
	transform: translateY(-50%);
}

/* Animate to an X when menu is open */
.main-navigation.toggled .menu-toggle::before {
	box-shadow: none;
	transform: translateY(-50%) rotate(45deg);
}

.main-navigation.toggled .menu-toggle::after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	top: 50%;
	height: 2px;
	background: currentColor;
	transform: translateY(-50%) rotate(-45deg);
}

/*
 * Compact (hamburger) header up to 1100px. Logo, the six menu items and the
 * Book now button need roughly 1070px side by side; below that the button
 * used to wrap onto a second row under the logo, which is what tablets in
 * landscape and small laptops saw.
 */
@media (max-width: 1100px) {
	/* Header keeps wordmark + hamburger on the same row */
	.site-header__inner {
		position: relative;
		flex-wrap: nowrap;
		gap: var(--ws-space-3);
	}

	.main-navigation {
		flex: 0 0 auto;
		order: 1;
	}

	.site-branding {
		order: 2;
		margin: 0 auto;
	}

	.site-header__actions {
		order: 3;
		gap: var(--ws-space-2);
	}

	.ws-header-phone {
		display: inline-flex;
	}

	.custom-logo {
		max-height: 52px;
	}

	/* On mobile the header shows only hamburger, logo, and phone; the Book
	   button moves into the menu. Scoped to .site-header to beat .ws-btn. */
	.site-header .ws-header-book {
		display: none;
	}

	/* Parent items: link + expand caret on one row, sub-menu drops below. */
	.main-navigation .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.main-navigation .menu-item-has-children > a {
		flex: 1 1 auto;
	}

	.submenu-toggle {
		display: block;
	}

	.menu-toggle {
		display: block;
	}

	/* Full-screen menu panel below the header when the hamburger is tapped.
	   Positioned absolute (not fixed) because the header's backdrop-filter
	   traps fixed descendants inside the header box. */
	.main-navigation > div {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100vh - var(--ws-header-height, 72px));
		background: var(--ws-snow);
		padding: var(--ws-space-4) clamp(1.25rem, 6vw, 2rem) var(--ws-space-8);
		display: none;
		z-index: 45;
		overflow-y: auto;
	}

	.main-navigation.toggled > div {
		display: block;
	}

	.main-navigation > div > ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
		min-height: 100%;
	}

	.main-navigation > div > ul > li {
		border-bottom: 1px solid var(--ws-border);
	}

	.main-navigation > div > ul > li:last-child {
		border-bottom: none;
	}

	/* Even 60px rows, whether or not the item has an expand caret */
	.main-navigation > div > ul > li > a {
		display: flex;
		align-items: center;
		min-height: 60px;
		padding-block: 0;
		font-size: var(--ws-text-lg);
	}

	.submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 60px;
	}

	/* Sub-menu: collapsed until its caret opens it, indented and roomy */
	.main-navigation .sub-menu {
		position: static;
		flex: 0 0 100%;
		flex-direction: column;
		gap: 0;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: transparent;
		padding: 0 0 var(--ws-space-3) var(--ws-space-4);
		margin: 0;
	}

	.main-navigation .menu-item-has-children.is-open > .sub-menu {
		display: flex;
	}

	.main-navigation .sub-menu a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding-block: 0;
		font-size: var(--ws-text-base);
	}

	.main-navigation .menu-item-has-children > a::after {
		display: none;
	}

	/* Book button pinned to the bottom of the panel */
	.ws-menu-book-item {
		display: block;
		margin-top: auto;
		border-bottom: none;
		padding-top: var(--ws-space-6);
	}

	.main-navigation .ws-menu-book {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 54px;
		color: var(--ws-snow);
		border-bottom: none;
		font-size: var(--ws-text-base);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.main-navigation .ws-menu-book:hover {
		color: var(--ws-snow);
		border-bottom: none;
	}
}

/* =========================================================
   6. Site footer
   ========================================================= */
.site-footer {
	background: var(--ws-char);
	color: var(--ws-snow);
	padding-block: clamp(3rem, 6vw, 4.5rem);
	margin-top: 0;
}

.site-footer a {
	color: var(--ws-snow);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: color 150ms ease, border-color 150ms ease;
}

.site-footer a:hover {
	color: var(--ws-spring);
	border-bottom-color: var(--ws-spring);
}

.ws-footer-grid {
	max-width: var(--ws-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ws-space-12);
}

@media (min-width: 720px) {
	.ws-footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--ws-space-8);
	}

	/* Brand blurb spans the first row on tablets so three columns fit below. */
	.ws-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.ws-footer-grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}

	.ws-footer-brand {
		grid-column: auto;
	}
}

.ws-footer-mark {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-2xl);
	font-weight: 500;
	color: var(--ws-snow);
	line-height: 1;
	margin: 0 0 var(--ws-space-3);
	letter-spacing: -0.03em;
}

.ws-footer-tagline {
	font-size: var(--ws-text-xs);
	font-weight: 500;
	color: var(--ws-spring);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 var(--ws-space-4);
}

.ws-footer-brand p {
	font-size: var(--ws-text-sm);
	color: rgba(255, 255, 255, 0.72);
	max-width: 36ch;
	margin: 0;
}

.ws-footer-col h4 {
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ws-spring);
	margin: 0 0 var(--ws-space-4);
}

.ws-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-2);
}

.ws-footer-col a {
	font-size: var(--ws-text-sm);
	border-bottom: none;
}

.ws-footer-col a:hover {
	color: var(--ws-spring);
}

.ws-footer-secondary {
	max-width: var(--ws-container);
	margin: var(--ws-space-10) auto 0;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.ws-footer-secondary ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-3) var(--ws-space-6);
	font-size: var(--ws-text-xs);
}

.ws-footer-secondary a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.ws-footer-secondary a:hover {
	color: var(--ws-spring);
}

.ws-footer-bottom {
	max-width: var(--ws-container);
	margin: var(--ws-space-12) auto 0;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	padding-top: var(--ws-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--ws-text-xs);
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ws-space-3);
}

.ws-footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-4);
}

.ws-footer-legal a {
	color: rgba(255, 255, 255, 0.6);
	border-bottom: none;
}

.ws-footer-legal a:hover {
	color: var(--ws-spring);
}

.ws-footer-credit {
	max-width: var(--ws-container);
	margin: var(--ws-space-4) auto 0;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	font-size: var(--ws-text-xs);
	color: rgba(255, 255, 255, 0.4);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ws-space-2);
}

.ws-footer-credit a {
	color: rgba(255, 255, 255, 0.55);
	border-bottom: none;
}

.ws-footer-credit a:hover {
	color: var(--ws-spring);
}

/* =========================================================
   7. Buttons
   ========================================================= */
.ws-btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-sm);
	font-weight: 500;
	line-height: 1;
	color: var(--ws-snow);
	background: var(--ws-spring);
	border: 1px solid var(--ws-spring);
	border-radius: var(--ws-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.ws-btn:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--ws-spring-dark);
	color: var(--ws-snow);
	border-color: var(--ws-spring-dark);
}

.ws-btn--ghost {
	background: transparent;
	color: var(--ws-char);
	border-color: var(--ws-char);
}

.ws-btn--ghost:hover {
	background: var(--ws-char);
	color: var(--ws-snow);
	border-color: var(--ws-char);
}

/* =========================================================
   8. Articles / pages
   ========================================================= */
.entry-header {
	margin-bottom: var(--ws-space-8);
}

.entry-title { margin: 0 0 var(--ws-space-3); }

.entry-meta {
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
}

.entry-content > * + * { margin-top: var(--ws-space-4); }
.entry-content h2 { margin-top: var(--ws-space-12); font-size: var(--ws-text-2xl); }
.entry-content h3 { margin-top: var(--ws-space-8); font-size: var(--ws-text-xl); }
.entry-content h4 { margin-top: var(--ws-space-6); font-size: var(--ws-text-lg); }

.entry-content blockquote {
	border-left: 3px solid var(--ws-spring);
	padding: var(--ws-space-2) var(--ws-space-6);
	margin: var(--ws-space-8) 0;
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xl);
	font-weight: 400;
	line-height: 1.4;
	color: var(--ws-char);
	letter-spacing: -0.015em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.5rem;
}

.entry-content li + li { margin-top: var(--ws-space-2); }

.entry-content img {
	border-radius: var(--ws-radius);
	margin-block: var(--ws-space-6);
}

/* =========================================================
   9. Forms
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-base);
	color: var(--ws-char);
	background: var(--ws-snow);
	border: 1px solid var(--ws-border-strong);
	border-radius: var(--ws-radius);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ws-spring);
	box-shadow: 0 0 0 3px rgba(31, 168, 115, 0.18);
}

label {
	display: block;
	font-size: var(--ws-text-sm);
	font-weight: 500;
	margin-bottom: var(--ws-space-2);
}

/* =========================================================
   10. Utilities & WP defaults
   ========================================================= */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.alignleft  { float: left;  margin: 0 var(--ws-space-6) var(--ws-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--ws-space-4) var(--ws-space-6); }
.aligncenter { display: block; margin: 0 auto var(--ws-space-4); }
.alignwide, .alignfull { width: 100%; }
.clear:after { content: ""; display: table; clear: both; }

/* Editor-inserted images in the WYSIWYG body fields. WordPress tags a plain
   inline image `alignnone` and wraps a captioned one in <figure>; neither was
   styled, so images sat flush against the surrounding copy. */
.alignnone,
figure {
	margin: var(--ws-space-6) 0;
}

figcaption,
.wp-caption-text {
	margin-top: var(--ws-space-2);
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
	line-height: 1.5;
}

.ws-intro-text__body img,
.ws-modality__body img,
.ws-practitioner__bio img,
.ws-flex-faq img,
.wp-block-details img {
	border-radius: var(--ws-radius);
}

/* =========================================================
   13. Block patterns — drop-in branded sections
   ========================================================= */

/* Callout box */
.ws-callout {
	background: var(--ws-mist);
	border-left: 3px solid var(--ws-spring);
	border-radius: var(--ws-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
	margin-block: clamp(2rem, 4vw, 3rem) !important;
}

.ws-callout__title {
	margin: 0 0 var(--ws-space-3);
	font-size: var(--ws-text-xl);
}

.ws-callout p {
	margin-bottom: var(--ws-space-4);
}

/* Image + text two-column pattern */
.ws-pattern-imagetext {
	margin-block: clamp(2rem, 4vw, 3rem) !important;
	gap: clamp(1.5rem, 4vw, 3rem) !important;
}

.ws-pattern-imagetext__image img {
	border-radius: var(--ws-radius-lg);
	display: block;
	width: 100%;
	height: auto;
}

/* Stats row */
.ws-stats {
	margin-block: clamp(2rem, 5vw, 3.5rem) !important;
	padding-block: var(--ws-space-6);
	border-top: 1px solid var(--ws-border);
	border-bottom: 1px solid var(--ws-border);
}

.ws-stat {
	text-align: center;
}

.ws-stat__number {
	font-family: var(--ws-font-display);
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	color: var(--ws-spring);
	margin: 0 0 var(--ws-space-2);
	line-height: 1;
}

.ws-stat__label {
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
	margin: 0;
	letter-spacing: 0.04em;
}

/* Pull quote */
.ws-pullquote {
	margin-block: clamp(2.5rem, 5vw, 4rem) !important;
}

.ws-pullquote__inner {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 56rem;
	margin-inline: auto !important;
	text-align: center;
}

.ws-pullquote__inner p {
	font-family: var(--ws-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ws-char);
	margin: 0 0 var(--ws-space-6);
}

.ws-pullquote__inner cite {
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-sm);
	font-weight: 500;
	font-style: normal;
	color: var(--ws-text-muted);
	letter-spacing: 0.04em;
}

/* Mini-CTA banner — full-bleed background, content stays within container width */
.ws-mini-cta {
	background: var(--ws-forest);
	margin-block: clamp(2.5rem, 5vw, 3.5rem) !important;
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline: max(clamp(1rem, 4vw, 2.5rem), calc(50vw - 50%));
	border-radius: 0;
	text-align: center;
}

.ws-mini-cta__title {
	color: var(--ws-snow);
	margin: 0 0 var(--ws-space-3);
	font-size: var(--ws-text-2xl);
}

.ws-mini-cta__lede {
	color: rgba(255, 255, 255, 0.82);
	margin: 0 auto var(--ws-space-6);
	font-size: var(--ws-text-base);
	max-width: 48ch;
}

.ws-mini-cta .wp-block-buttons {
	justify-content: center;
}

.ws-mini-cta .wp-block-button__link {
	background: var(--ws-snow);
	color: var(--ws-char);
	border-color: var(--ws-snow);
}

.ws-mini-cta .wp-block-button__link:hover {
	background: var(--ws-mist);
	border-color: var(--ws-mist);
	color: var(--ws-char);
}

/* FAQ accordion — styles the native HTML5 <details> blocks */
.ws-faq {
	margin-block: clamp(2.5rem, 5vw, 4rem) !important;
}

.ws-faq__title {
	margin: 0 0 var(--ws-space-6);
}

.wp-block-details {
	border-top: 1px solid var(--ws-border);
	padding-block: var(--ws-space-4);
	margin: 0;
}

.ws-faq .wp-block-details:last-of-type,
.wp-block-details + .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--ws-border);
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	font-weight: 500;
	color: var(--ws-char);
	list-style: none;
	padding: var(--ws-space-2) 2.5rem var(--ws-space-2) 0;
	position: relative;
	transition: color 150ms ease;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.wp-block-details summary:hover {
	color: var(--ws-spring);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::marker {
	content: "";
}

/* Custom chevron indicator */
.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-65%) rotate(45deg);
	transition: transform 200ms ease;
}

.wp-block-details[open] summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

.wp-block-details > *:not(summary) {
	margin-top: var(--ws-space-3);
}

.wp-block-details p {
	font-size: var(--ws-text-base);
	line-height: 1.65;
	color: var(--ws-text);
	margin: 0 0 var(--ws-space-3);
	padding-right: 2.5rem;
}

.wp-block-details p:last-child {
	margin-bottom: 0;
}

/* Intro text section — white-background break between reviewed-by and cards grid */
.ws-intro-text {
	background: var(--ws-snow);
	text-align: center;
}

.ws-intro-text .eyebrow {
	color: var(--ws-forest);
}

.ws-intro-text__title {
	margin: 0 0 var(--ws-space-4);
	max-width: 28ch;
	margin-inline: auto;
}

.ws-intro-text__body {
	font-size: var(--ws-text-lg);
	color: var(--ws-text);
	line-height: 1.65;
	max-width: 58ch;
	margin: 0 auto;
}

.ws-intro-text__body p {
	margin: 0 0 var(--ws-space-4);
}

.ws-intro-text__body p:last-child {
	margin-bottom: 0;
}

/* Single-line lede / CTA fields are now WYSIWYG, so their text is wrapped
   in <p>. Zero the outer margins so spacing matches the old plain-text
   rendering, and only add a gap when the editor adds a second paragraph. */
.ws-hero__lede p,
.ws-page-header__lede p,
.ws-section-header__lede p,
.ws-cta__lede p,
.ws-case-glance__text p {
	margin: 0;
}

.ws-hero__lede p + p,
.ws-page-header__lede p + p,
.ws-section-header__lede p + p,
.ws-cta__lede p + p,
.ws-case-glance__text p + p {
	margin-top: 0.75em;
}

/* Editor-inserted headings inside the WYSIWYG body/lede fields. The Format
   dropdown is enabled on those fields, so H2-H5 can now appear in running
   copy. Base heading styles carry no top margin, so give them breathing room
   and step the sizes down so they sit under the section title, not over it. */
.ws-intro-text__body h2,
.ws-intro-text__body h3,
.ws-intro-text__body h4,
.ws-intro-text__body h5,
.ws-modality__body h2,
.ws-modality__body h3,
.ws-modality__body h4,
.ws-modality__body h5,
.ws-practitioner__bio h2,
.ws-practitioner__bio h3,
.ws-practitioner__bio h4,
.ws-practitioner__bio h5,
.ws-hero__lede h2,
.ws-hero__lede h3,
.ws-hero__lede h4,
.ws-hero__lede h5,
.ws-page-header__lede h2,
.ws-page-header__lede h3,
.ws-page-header__lede h4,
.ws-page-header__lede h5,
.ws-section-header__lede h2,
.ws-section-header__lede h3,
.ws-section-header__lede h4,
.ws-section-header__lede h5,
.ws-cta__lede h2,
.ws-cta__lede h3,
.ws-cta__lede h4,
.ws-cta__lede h5,
.ws-case-glance__text h2,
.ws-case-glance__text h3,
.ws-case-glance__text h4,
.ws-case-glance__text h5 {
	margin: var(--ws-space-6) 0 var(--ws-space-3);
	text-wrap: balance;
}

.ws-intro-text__body h2:first-child,
.ws-intro-text__body h3:first-child,
.ws-intro-text__body h4:first-child,
.ws-intro-text__body h5:first-child,
.ws-modality__body h2:first-child,
.ws-modality__body h3:first-child,
.ws-modality__body h4:first-child,
.ws-modality__body h5:first-child,
.ws-practitioner__bio h2:first-child,
.ws-practitioner__bio h3:first-child,
.ws-practitioner__bio h4:first-child,
.ws-practitioner__bio h5:first-child,
.ws-hero__lede h2:first-child,
.ws-hero__lede h3:first-child,
.ws-hero__lede h4:first-child,
.ws-hero__lede h5:first-child,
.ws-page-header__lede h2:first-child,
.ws-page-header__lede h3:first-child,
.ws-page-header__lede h4:first-child,
.ws-page-header__lede h5:first-child,
.ws-section-header__lede h2:first-child,
.ws-section-header__lede h3:first-child,
.ws-section-header__lede h4:first-child,
.ws-section-header__lede h5:first-child,
.ws-cta__lede h2:first-child,
.ws-cta__lede h3:first-child,
.ws-cta__lede h4:first-child,
.ws-cta__lede h5:first-child,
.ws-case-glance__text h2:first-child,
.ws-case-glance__text h3:first-child,
.ws-case-glance__text h4:first-child,
.ws-case-glance__text h5:first-child {
	margin-top: 0;
}

.ws-intro-text__body h2,
.ws-modality__body h2,
.ws-practitioner__bio h2,
.ws-hero__lede h2,
.ws-page-header__lede h2,
.ws-section-header__lede h2,
.ws-cta__lede h2,
.ws-case-glance__text h2 {
	font-size: var(--ws-text-2xl);
}

.ws-intro-text__body h3,
.ws-modality__body h3,
.ws-practitioner__bio h3,
.ws-hero__lede h3,
.ws-page-header__lede h3,
.ws-section-header__lede h3,
.ws-cta__lede h3,
.ws-case-glance__text h3 {
	font-size: var(--ws-text-xl);
}

.ws-intro-text__body h4,
.ws-intro-text__body h5,
.ws-modality__body h4,
.ws-modality__body h5,
.ws-practitioner__bio h4,
.ws-practitioner__bio h5,
.ws-hero__lede h4,
.ws-hero__lede h5,
.ws-page-header__lede h4,
.ws-page-header__lede h5,
.ws-section-header__lede h4,
.ws-section-header__lede h5,
.ws-cta__lede h4,
.ws-cta__lede h5,
.ws-case-glance__text h4,
.ws-case-glance__text h5 {
	font-size: var(--ws-text-lg);
}

/* =========================================================
   Flexible page sections (ACF "Page sections" builder)
   ========================================================= */
.ws-flex-heading {
	margin: 2.5rem 0 1rem;
}

.ws-flex-imagetext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
	margin: 3rem 0;
}

.ws-flex-imagetext__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ws-radius, 12px);
}

.ws-flex-imagetext--right .ws-flex-imagetext__media {
	order: 2;
}

.ws-flex-faq {
	margin: 3rem 0;
}

.ws-map {
	margin: 2.5rem 0;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}

.ws-map iframe {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

/* Text + Map two-column: map stretches to line up with the text column. */
.ws-flex-textmap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: stretch;
	margin: 3rem 0;
}

.ws-flex-textmap__map {
	display: flex;
	flex-direction: column;
	min-height: 340px;
}

.ws-flex-textmap__map iframe {
	flex: 1 1 auto;
	width: 100%;
	min-height: 300px;
	border: 0;
	border-radius: 12px;
}

.ws-map__link {
	margin: 0.6rem 0 0;
	font-size: var(--ws-text-sm);
}

.ws-map__link a {
	color: var(--ws-spring);
	text-decoration: none;
}

.ws-map__link a:hover {
	text-decoration: underline;
}

/* 404 page */
.ws-404 {
	text-align: center;
}

.ws-404-actions {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: var(--ws-space-6);
}

.ws-404-links {
	color: var(--ws-char-muted);
}

.ws-flex-textmap--map-left .ws-flex-textmap__map {
	order: -1;
}

@media (max-width: 640px) {
	.ws-flex-textmap {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.ws-flex-textmap--map-left .ws-flex-textmap__map {
		order: 0;
	}
}

@media (max-width: 640px) {
	.ws-flex-imagetext {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.ws-flex-imagetext--right .ws-flex-imagetext__media {
		order: 0;
	}
}

/* =========================================================
   Clinic Cases — archive + cards + single
   ========================================================= */

/* Homepage featured-cases section */
.ws-home-cases__view-all,
.ws-view-all {
	text-align: center;
	margin-top: var(--ws-space-8);
}

/* Toolbar (search + filter chips) above the cards grid */
.ws-cases-toolbar {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-6);
	margin-bottom: var(--ws-space-8);
}

.ws-cases-search {
	max-width: 32rem;
	margin: 0 auto;
	width: 100%;
	position: relative;
}

.ws-cases-search input {
	padding-left: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234A524E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.875rem center;
	background-size: 18px 18px;
}

.ws-cases-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-2);
	justify-content: center;
}

.ws-cases-filter__btn {
	background: transparent;
	border: 1px solid var(--ws-border-strong);
	border-radius: 100px;
	padding: 0.5rem 1rem;
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-char);
	cursor: pointer;
	transition: all 150ms ease;
}

.ws-cases-filter__btn:hover {
	border-color: var(--ws-spring);
	color: var(--ws-spring);
}

.ws-cases-filter__btn.is-active {
	background: var(--ws-forest);
	border-color: var(--ws-forest);
	color: var(--ws-snow);
}

.ws-cases-empty {
	text-align: center;
	color: var(--ws-text-muted);
	padding-block: var(--ws-space-8);
}

.ws-cases-empty button {
	background: none;
	border: none;
	color: var(--ws-spring);
	font-weight: 500;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	text-decoration: underline;
}

/* Cards grid — extra row-gap so file tabs don't collide with cards below */
.ws-cases-grid {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--ws-space-6);
	row-gap: calc(var(--ws-space-6) + 0.75rem);
	padding-top: 0.75rem;
}

@media (min-width: 640px) {
	.ws-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ws-cases-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Focus-area groups — each section of the archive */
.ws-cases-groups {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-16);
}

.ws-cases-group__head {
	display: flex;
	align-items: baseline;
	gap: var(--ws-space-3);
	margin-bottom: var(--ws-space-6);
	padding-bottom: var(--ws-space-3);
	border-bottom: 1px solid var(--ws-border);
}

.ws-cases-group__title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ws-forest);
	margin: 0;
}

.ws-cases-group__count {
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-text-muted);
}

.ws-cases-group__count::before {
	content: "(";
}

.ws-cases-group__count::after {
	content: ")";
}

/* Individual case card — file folder aesthetic */
.ws-case-card {
	position: relative;
	background: #FAF7F0;
	border: 1px solid rgba(15, 77, 51, 0.16);
	border-radius: var(--ws-radius);
	padding: 1.75rem 1.5rem 1.5rem;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.ws-case-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -16px rgba(15, 77, 51, 0.18);
	border-color: rgba(15, 77, 51, 0.28);
}

/* File folder tab — pokes up above the top-right corner */
.ws-case-card::before {
	content: "";
	position: absolute;
	top: -0.7rem;
	right: 1.5rem;
	width: 4.5rem;
	height: 0.8rem;
	background: var(--ws-forest);
	border-radius: 3px 3px 0 0;
	z-index: 2;
}

/* Card media band — real photo when present, botanical motif when not */
.ws-case-card__media {
	display: block;
	position: relative;
	margin: -1.75rem -1.5rem 1.25rem;
	aspect-ratio: 16 / 10;
	border-radius: var(--ws-radius) var(--ws-radius) 0 0;
	overflow: hidden;
	background: var(--ws-mist);
	z-index: 1;
}

.ws-case-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.ws-case-card:hover .ws-case-card__img {
	transform: scale(1.04);
}

.ws-case-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(120% 120% at 80% 0%, rgba(31, 168, 115, 0.10) 0%, rgba(31, 168, 115, 0) 55%),
		linear-gradient(140deg, var(--ws-mist) 0%, var(--ws-paper) 100%);
}

.ws-case-sprig {
	width: 36%;
	max-width: 84px;
	height: auto;
	color: var(--ws-spring);
	opacity: 0.5;
}

.ws-case-card__focus {
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ws-forest);
	margin: 0.25rem 0 0.75rem;
}

.ws-case-card__patient {
	display: flex;
	align-items: center;
	gap: var(--ws-space-2);
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
	margin: 0 0 var(--ws-space-3);
}

.ws-case-card__monogram {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ws-mist);
	color: var(--ws-forest);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ws-font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	flex-shrink: 0;
}

.ws-case-card__title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	font-weight: 500;
	color: var(--ws-char);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 var(--ws-space-3);
}

.ws-case-card__title a {
	color: inherit;
	text-decoration: none;
}

.ws-case-card__excerpt {
	font-size: var(--ws-text-sm);
	color: var(--ws-text);
	line-height: 1.6;
	margin: 0 0 var(--ws-space-4);
}

.ws-case-card__divider {
	border-top: 1px dashed rgba(15, 77, 51, 0.28);
	margin: var(--ws-space-3) 0;
}

.ws-case-card__cta {
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-forest);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	transition: color 150ms ease;
}

.ws-case-card__cta:hover {
	color: var(--ws-spring);
}

/* =========================================================
   Clinic case — two-column case-study layout
   ========================================================= */
.ws-case-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: var(--ws-space-12);
	align-items: start;
}

@media (max-width: 900px) {
	.ws-case-layout { grid-template-columns: 1fr; }
}

/* At-a-glance summary box */
.ws-case-glance {
	background: var(--ws-forest);
	color: #e9f4ee;
	border-radius: var(--ws-radius-lg);
	padding: 1.5rem 1.6rem;
	margin-bottom: var(--ws-space-8);
}

.ws-case-glance__lbl {
	font-size: var(--ws-text-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8fd9bd;
	font-weight: 500;
	margin: 0 0 0.5rem;
}

.ws-case-glance__text {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	color: #fff;
	line-height: 1.5;
	margin: 0;
	letter-spacing: -0.01em;
}

.ws-case-glance__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: 1.1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ws-case-glance__stats div {
	font-size: var(--ws-text-xs);
	color: #bfe3d4;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.ws-case-glance__stats b {
	display: block;
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	color: #fff;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: none;
	margin-bottom: 2px;
}

/* Auto-generated case sidebar */
.ws-case-side {
	position: sticky;
	top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-4);
}

@media (max-width: 900px) {
	.ws-case-side { position: static; }
}

.ws-case-box {
	background: #fff;
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-lg);
	padding: 1.25rem 1.3rem;
}

.ws-case-box--book {
	background: var(--ws-mist);
	border-color: rgba(15, 77, 51, 0.16);
}

.ws-case-box__title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 0.2rem;
}

.ws-case-box__sub {
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
	margin: 0 0 1rem;
	line-height: 1.5;
}

.ws-case-box__auto {
	font-size: var(--ws-text-xs);
	color: var(--ws-spring-dark);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.6rem;
}

.ws-case-box__more {
	display: inline-block;
	margin-top: 0.9rem;
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-forest);
}

.ws-case-box__more:hover { color: var(--ws-spring); }

/* Pill buttons (sidebar) */
.ws-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font-family: inherit;
	font-weight: 500;
	font-size: var(--ws-text-sm);
	padding: 0.7rem 1rem;
	border-radius: 100px;
	cursor: pointer;
	transition: all 150ms ease;
	text-decoration: none;
	border: 1.5px solid transparent;
}

.ws-btn--solid { background: var(--ws-forest); color: #fff; }
.ws-btn--solid:hover { background: var(--ws-spring-dark); color: #fff; }
.ws-btn--ghost { background: #fff; color: var(--ws-forest); border-color: var(--ws-border-strong); }
.ws-btn--ghost:hover { border-color: var(--ws-spring); color: var(--ws-spring-dark); }
.ws-btn--block { display: flex; width: 100%; }
.ws-case-box .ws-btn + .ws-btn { margin-top: 0.5rem; }

.ws-case-facts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ws-case-facts li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: var(--ws-text-sm);
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ws-border);
}

.ws-case-facts li:last-child { border-bottom: none; }
.ws-case-facts span { color: var(--ws-text-muted); }
.ws-case-facts b { font-weight: 500; color: var(--ws-forest); text-align: right; }

.ws-case-rel {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ws-case-rel li { border-bottom: 1px solid var(--ws-border); }
.ws-case-rel li:last-child { border-bottom: none; }

.ws-case-rel a {
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	align-items: center;
	padding: 0.6rem 0;
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-forest);
	line-height: 1.35;
}

.ws-case-rel a:hover { color: var(--ws-spring); }
.ws-case-rel__arr { color: var(--ws-spring); flex: 0 0 auto; }

.ws-case-detail__tag--static { cursor: default; }
.ws-case-detail__tag--static:hover { background: var(--ws-mist); color: var(--ws-forest); }

/* Horizontal row variant — used in the library results for denser previews */
.ws-cases-grid--rows {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-4);
}

.ws-cases-grid--rows .ws-case-card {
	display: flex;
	gap: 1.25rem;
	padding: 1.1rem;
}

.ws-cases-grid--rows .ws-case-card::before { display: none; }

.ws-cases-grid--rows .ws-case-card__media {
	margin: 0;
	flex: 0 0 180px;
	width: 180px;
	aspect-ratio: auto;
	height: auto;
	min-height: 128px;
	align-self: stretch;
	border-radius: var(--ws-radius);
}

.ws-cases-grid--rows .ws-case-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ws-cases-grid--rows .ws-case-card__focus { margin-top: 0; }
.ws-cases-grid--rows .ws-case-card__excerpt { margin-bottom: auto; }
.ws-cases-grid--rows .ws-case-sprig { width: 46px; }

@media (max-width: 520px) {
	.ws-cases-grid--rows .ws-case-card__media { flex-basis: 104px; width: 104px; }
}

/* =========================================================
   Clinic cases library — faceted filter rail
   ========================================================= */
.ws-cases-archive .ws-cases-search { margin-bottom: var(--ws-space-8); }

.ws-cases-faceted {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: var(--ws-space-12);
	align-items: start;
}

@media (max-width: 860px) {
	.ws-cases-faceted { grid-template-columns: 1fr; }
}

.ws-cases-rail {
	/* Sticks just below the sticky site header (about 95px tall), and scrolls
	   on its own if it is taller than the space left in the window, so the
	   last chips are always reachable. */
	position: sticky;
	top: 7rem;
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 0.25rem;
}

.admin-bar .ws-cases-rail {
	top: calc(7rem + 32px);
	max-height: calc(100vh - 8rem - 32px);
}

@media (max-width: 860px) {
	.ws-cases-rail { position: static; max-height: none; overflow: visible; }
}

.ws-cases-rail__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.ws-cases-rail__title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-base);
	margin: 0;
}

.ws-cases-rail__clear {
	background: none;
	border: none;
	color: var(--ws-spring-dark);
	font-family: inherit;
	font-size: var(--ws-text-xs);
	font-weight: 500;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.ws-facet { margin-bottom: 1.4rem; }

.ws-facet__label {
	font-size: var(--ws-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ws-text-muted);
	font-weight: 500;
	margin: 0 0 0.6rem;
}

.ws-facet__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.ws-facet__chip {
	font-size: var(--ws-text-xs);
	border: 1px solid var(--ws-border-strong);
	background: #fff;
	color: var(--ws-char);
	padding: 0.35rem 0.7rem;
	border-radius: 100px;
	cursor: pointer;
	font-family: inherit;
	transition: all 120ms ease;
}

.ws-facet__chip:hover { border-color: var(--ws-spring); color: var(--ws-spring-dark); }
.ws-facet__chip.is-active { background: var(--ws-forest); border-color: var(--ws-forest); color: #fff; }

.ws-cases-results__top { margin-bottom: 1.2rem; }

.ws-cases-results__count {
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-forest);
	margin: 0;
}

.ws-cases-results .ws-cases-grid { grid-template-columns: 1fr; }

@media (min-width: 680px) {
	.ws-cases-results .ws-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Related cases — shortcode block used on What We Treat pages */
.ws-related-cases {
	margin-block: var(--ws-space-12);
}

/* Related cases when rendered as a full-width section on a page (What We Treat
   etc.): mist-green background, tighter spacing, no doubled margin. */
.ws-related-cases-section {
	padding-block: clamp(2rem, 4vw, 3.25rem);
}

.ws-related-cases-section .ws-related-cases {
	margin-block: 0;
}

.ws-related-cases__head {
	margin-bottom: var(--ws-space-8);
}

.ws-related-cases__title {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-2xl);
	font-weight: 500;
	letter-spacing: -0.025em;
	margin: 0;
}

.ws-related-cases__view-all {
	margin-top: var(--ws-space-8);
	text-align: center;
}

.ws-cases-pagination {
	margin-top: var(--ws-space-12);
	display: flex;
	justify-content: center;
}

.ws-cases-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-2);
	margin: 0;
	padding: 0;
}

.ws-cases-pagination a,
.ws-cases-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--ws-border-strong);
	border-radius: var(--ws-radius-sm);
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-char);
	text-decoration: none;
}

.ws-cases-pagination .current {
	background: var(--ws-forest);
	border-color: var(--ws-forest);
	color: var(--ws-snow);
}

/* Single case detail — clinical chart aesthetic */
.ws-case-detail__figure {
	margin: 0 0 var(--ws-space-8);
	border-radius: var(--ws-radius);
	overflow: hidden;
	border: 1px solid rgba(15, 77, 51, 0.14);
}

.ws-case-detail__image {
	display: block;
	width: 100%;
	height: auto;
}

.ws-case-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-2);
	margin-bottom: var(--ws-space-6);
}

.ws-case-detail__tag {
	display: inline-block;
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ws-forest);
	background: var(--ws-mist);
	border-radius: 100px;
	padding: 0.3rem 0.75rem;
	text-decoration: none;
}

.ws-case-detail__tag:hover {
	background: var(--ws-spring);
	color: var(--ws-snow);
}

.ws-case-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-8);
	margin: 0 0 var(--ws-space-8);
	padding: var(--ws-space-4) var(--ws-space-6);
	background: #FAF7F0;
	border-radius: var(--ws-radius);
	border: 1px solid rgba(15, 77, 51, 0.14);
}

.ws-case-detail__meta dt {
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ws-forest);
	margin: 0 0 var(--ws-space-1);
}

.ws-case-detail__meta dd {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	font-weight: 500;
	color: var(--ws-char);
	margin: 0;
	letter-spacing: -0.015em;
}

.ws-case-detail__section {
	padding-block: var(--ws-space-6);
	border-top: 1px solid var(--ws-border);
}

.ws-case-detail__section:last-of-type {
	border-bottom: 1px solid var(--ws-border);
}

.ws-case-detail__label {
	font-family: var(--ws-font-body);
	font-size: var(--ws-text-xs);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ws-forest);
	margin: 0 0 var(--ws-space-3);
}

.ws-case-detail__body {
	font-size: var(--ws-text-base);
	line-height: 1.65;
	color: var(--ws-text);
}

.ws-case-detail__body p {
	margin: 0 0 var(--ws-space-4);
}

.ws-case-detail__body p:last-child {
	margin-bottom: 0;
}

.ws-case-detail__section--treatment {
	background: var(--ws-mist);
	border-top: 0;
	border-radius: var(--ws-radius);
	padding-inline: var(--ws-space-6);
}

/* The rule between sections would sit directly against the tinted box. */
.ws-case-detail__section--treatment + .ws-case-detail__section {
	border-top: 0;
}

.ws-case-detail__section--result .ws-case-detail__body {
	font-size: var(--ws-text-lg);
}

.ws-case-detail__section--result .ws-case-detail__body blockquote {
	margin: 0 0 var(--ws-space-4);
	padding: 0 0 0 var(--ws-space-4);
	border-left: 2px solid var(--ws-spring);
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	font-style: normal;
	line-height: 1.4;
	color: var(--ws-char);
}

.ws-case-detail__back {
	margin-top: var(--ws-space-8);
	text-align: center;
}

/* Needs both classes to outrank .ws-link-arrow::after, which is defined later
   in this file — otherwise a back link renders an arrow at both ends. */
.ws-link-arrow.ws-link-arrow--back::after {
	content: none;
}

.ws-link-arrow--back::before {
	content: "←";
	display: inline-block;
	margin-right: 0.4em;
	transition: transform 150ms ease;
}

.ws-link-arrow--back:hover::before {
	transform: translateX(-3px);
}

/* "Reviewed by Dr. Cowburn" credibility badge — sits above the global CTA */
.ws-reviewed-by {
	background: var(--ws-mist);
	padding-block: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 1px solid rgba(15, 77, 51, 0.08);
	border-bottom: 1px solid rgba(15, 77, 51, 0.08);
}

.ws-reviewed-by__inner {
	max-width: var(--ws-container-narrow);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: var(--ws-space-3);
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
}

.ws-reviewed-by__icon {
	flex-shrink: 0;
	color: var(--ws-spring);
	width: 22px;
	height: 22px;
}

.ws-reviewed-by__text {
	font-size: var(--ws-text-sm);
	color: var(--ws-text);
	margin: 0;
	line-height: 1.5;
}

.ws-reviewed-by__text strong {
	color: var(--ws-char);
	font-weight: 500;
}

@media (max-width: 480px) {
	.ws-reviewed-by__inner {
		flex-direction: column;
		gap: var(--ws-space-2);
	}
}

/* =========================================================
   11. Home page components
   ========================================================= */

/* Hero */
.ws-hero {
	padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.ws-hero .eyebrow {
	color: var(--ws-forest);
	margin-bottom: var(--ws-space-6);
}

/* Hero with background image */
.ws-hero--imaged {
	color: var(--ws-snow);
	background: var(--ws-char);
}

.ws-hero--imaged .ws-hero__title,
.ws-hero--imaged .ws-hero__lede {
	color: var(--ws-snow);
}

.ws-hero--imaged .eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

.ws-hero--imaged .ws-btn--ghost {
	background: transparent;
	color: var(--ws-snow);
	border-color: rgba(255, 255, 255, 0.7);
}

.ws-hero--imaged .ws-btn--ghost:hover {
	background: var(--ws-snow);
	color: var(--ws-char);
	border-color: var(--ws-snow);
}

.ws-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.ws-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 1;
}

.ws-hero__content {
	position: relative;
	z-index: 2;
}

.ws-hero__title {
	font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem);
	letter-spacing: -0.04em;
	line-height: 0.98;
	margin: 0 0 var(--ws-space-6);
	max-width: 18ch;
	margin-inline: auto;
}

.ws-hero__lede {
	font-size: var(--ws-text-lg);
	color: var(--ws-text-muted);
	max-width: 56ch;
	margin: 0 auto var(--ws-space-8);
	line-height: 1.5;
}

.ws-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ws-space-3);
}

/* Section header */
.ws-section-header {
	max-width: 48rem;
	margin: 0 0 var(--ws-space-12);
}

.ws-section-header--center {
	text-align: center;
	margin-inline: auto;
}

.ws-section-header h2 {
	margin: 0 0 var(--ws-space-4);
}

.ws-section-header__lede {
	font-size: var(--ws-text-lg);
	color: var(--ws-text-muted);
	max-width: 52ch;
	line-height: 1.5;
	margin: 0;
}

.ws-section-header--center .ws-section-header__lede {
	margin-inline: auto;
}

/* Card grid */
.ws-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ws-space-4);
}

@media (min-width: 640px) {
	.ws-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.ws-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ws-card {
	display: flex;
	flex-direction: column;
	background: var(--ws-snow);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-lg);
	overflow: hidden;
	color: var(--ws-text);
	text-decoration: none;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	min-height: 14rem;
}

.ws-card:hover,
.ws-card:focus {
	border-color: var(--ws-spring);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -14px rgba(15, 77, 51, 0.22);
	color: var(--ws-text);
}

.ws-card__image {
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center;
	background-color: var(--ws-mist);
	transition: transform 400ms ease;
}

.ws-card:hover .ws-card__image,
.ws-card:focus .ws-card__image {
	transform: scale(1.03);
}

.ws-card__body-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-3);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	flex: 1;
}

.ws-card:not(.ws-card--imaged) .ws-card__body-wrap {
	padding-block: clamp(1.5rem, 3vw, 2rem);
}

.ws-card__title {
	font-size: var(--ws-text-xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--ws-text);
}

.ws-card__body {
	flex: 1;
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
	line-height: 1.55;
	margin: 0;
}

.ws-card__cta {
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-forest);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.ws-card__cta::after {
	content: "→";
	transition: transform 150ms ease;
	display: inline-block;
}

.ws-card:hover .ws-card__cta::after,
.ws-card:focus .ws-card__cta::after {
	transform: translateX(3px);
}

/* Practitioner */
.ws-practitioner__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 720px) {
	.ws-practitioner__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	}
}

.ws-practitioner__portrait {
	aspect-ratio: 4 / 5;
	background: var(--ws-mist);
	border-radius: var(--ws-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	max-width: 24rem;
	width: 100%;
}

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

.ws-practitioner__monogram {
	font-family: var(--ws-font-display);
	font-size: clamp(3rem, 8vw, 5rem);
	font-weight: 500;
	color: var(--ws-spring);
	letter-spacing: -0.04em;
}

.ws-practitioner__credential {
	font-size: var(--ws-text-xs);
	color: var(--ws-forest);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 var(--ws-space-6);
}

.ws-practitioner__body h2 {
	margin: 0 0 var(--ws-space-2);
}

.ws-practitioner__body p {
	font-size: var(--ws-text-base);
	line-height: 1.7;
	color: var(--ws-text);
	margin: 0 0 var(--ws-space-4);
}

.ws-link-arrow {
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.ws-link-arrow::after {
	content: "→";
	display: inline-block;
	transition: transform 150ms ease;
}

.ws-link-arrow:hover::after {
	transform: translateX(3px);
}

/* Modalities — two-column TCM + Acupuncture explainers */
/* Warm off-white "paper" background with a faint dot-grain, to set
   the Our Practice section apart from its white neighbours. */
.ws-modalities {
	background-color: var(--ws-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%230F1411' fill-opacity='0.035'/%3E%3C/svg%3E");
}

.ws-modalities__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.ws-modalities__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}
}

.ws-modality {
	margin: 0;
}

.ws-modality__image {
	aspect-ratio: 3 / 2;
	border-radius: var(--ws-radius-lg);
	margin: 0 0 var(--ws-space-6);
	background-color: var(--ws-mist);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.ws-modality__title {
	font-size: var(--ws-text-xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ws-text);
	line-height: 1.2;
	margin: 0 0 var(--ws-space-4);
	padding-top: var(--ws-space-3);
	border-top: 2px solid var(--ws-spring);
	display: inline-block;
	padding-right: var(--ws-space-6);
}

.ws-modality__body {
	font-size: var(--ws-text-base);
	color: var(--ws-text);
	line-height: 1.7;
}

.ws-modality__body p {
	margin: 0 0 var(--ws-space-4);
}

.ws-modality__body p:last-child {
	margin-bottom: 0;
}

/* Quotes */
.ws-quotes {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ws-space-6);
}

@media (min-width: 768px) {
	.ws-quotes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ws-space-4);
	}
}

.ws-quote {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--ws-snow);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-4);
}

.ws-quote__body {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-lg);
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--ws-text);
	font-weight: 400;
	font-style: normal;
}

.ws-quote__body::before {
	content: "“";
	display: block;
	font-family: var(--ws-font-display);
	font-size: 2.5rem;
	line-height: 0.5;
	color: var(--ws-spring);
	margin-bottom: var(--ws-space-3);
}

.ws-quote__attr {
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-text);
}

.ws-quote__attr span {
	color: var(--ws-text-muted);
	font-weight: 400;
}

/* =========================================================
   Google reviews — curated, theme-matched
   ========================================================= */

/* Star row: grey base with a gold overlay clipped to the rating width,
   so fractional scores (e.g. 4.9) render accurately. */
.ws-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: 2px;
	font-size: 1.05rem;
}

.ws-stars__base {
	color: rgba(15, 20, 17, 0.16);
}

.ws-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #F4B400;
}

/* Aggregate rating badge under the section heading */
.ws-reviews-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ws-space-2) var(--ws-space-4);
	max-width: 34rem;
	margin: 0 auto var(--ws-space-12);
	padding: var(--ws-space-4) var(--ws-space-6);
	background: var(--ws-snow);
	border: 1px solid var(--ws-border);
	border-radius: var(--ws-radius-lg);
	text-decoration: none;
	color: var(--ws-text);
}

a.ws-reviews-summary {
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.ws-reviews-summary:hover {
	border-color: var(--ws-border-strong);
	box-shadow: 0 6px 20px rgba(15, 20, 17, 0.06);
}

.ws-reviews-summary__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--ws-space-2);
	font-weight: 500;
	font-size: var(--ws-text-base);
}

.ws-reviews-summary__score {
	font-family: var(--ws-font-display);
	font-size: var(--ws-text-2xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.ws-reviews-summary .ws-stars {
	font-size: 1.2rem;
}

.ws-reviews-summary__count {
	flex-basis: 100%;
	text-align: center;
	font-size: var(--ws-text-sm);
	color: var(--ws-text-muted);
}

@media (min-width: 600px) {
	.ws-reviews-summary__count {
		flex-basis: auto;
	}
}

/* Per-card stars + Google attribution */
.ws-quote__stars {
	margin-bottom: var(--ws-space-3);
}

.ws-quote__attr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ws-space-3);
}

.ws-quote__name {
	min-width: 0;
}

.ws-quote__source {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-shrink: 0;
	font-size: var(--ws-text-xs);
	font-weight: 500;
	color: var(--ws-text-muted);
}

.ws-g {
	display: inline-block;
	vertical-align: middle;
}

/* Review cards lead with stars, so drop the decorative open-quote glyph */
.ws-reviews .ws-quote__body::before {
	content: none;
}

.ws-reviews__cta {
	margin: var(--ws-space-12) 0 0;
	text-align: center;
}

.ws-quote__time {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: var(--ws-text-xs);
	color: var(--ws-text-muted);
}

/* Reviews carousel */
.ws-slider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ws-space-4);
	margin-top: var(--ws-space-4);
}

.ws-slider__track {
	order: 1;
	flex: 1 1 100%;
	display: flex;
	gap: var(--ws-space-4);
	margin: 0;
	padding: var(--ws-space-2) 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ws-slider__track::-webkit-scrollbar {
	display: none;
}

.ws-slider__slide {
	scroll-snap-align: start;
	flex: 0 0 86%;
	display: flex;
}

@media (min-width: 600px) {
	.ws-slider__slide {
		flex-basis: calc((100% - var(--ws-space-4)) / 2);
	}
}

@media (min-width: 900px) {
	.ws-slider__slide {
		flex-basis: calc((100% - 2 * var(--ws-space-4)) / 3);
	}
}

.ws-slider__slide .ws-quote {
	width: 100%;
	height: 100%;
}

.ws-slider__slide .ws-quote__body {
	flex: 1 1 auto;
}

.ws-slider__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--ws-border-strong);
	background: var(--ws-snow);
	color: var(--ws-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ws-slider__nav--prev {
	order: 2;
}

.ws-slider__nav--next {
	order: 4;
}

.ws-slider__nav:hover {
	background: var(--ws-mist);
	border-color: var(--ws-spring);
}

.ws-slider__nav:disabled {
	opacity: 0.3;
	cursor: default;
	background: var(--ws-snow);
	border-color: var(--ws-border);
}

.ws-slider__nav[hidden] {
	display: none;
}

.ws-slider__dots {
	order: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--ws-space-2);
}

.ws-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 20, 17, 0.18);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ws-slider__dot:hover {
	background: rgba(15, 20, 17, 0.35);
}

.ws-slider__dot.is-active {
	background: var(--ws-spring);
	transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
	.ws-slider__track {
		scroll-behavior: auto;
	}
}

/* CTA banner — dark green, reversed buttons. Used site-wide above footer. */
.ws-cta {
	background: var(--ws-forest);
	color: var(--ws-snow);
	padding-block: clamp(3rem, 6vw, 5rem);
	margin-top: 0;
}

.ws-cta__inner {
	text-align: center;
}

.ws-cta__title {
	font-size: var(--ws-text-3xl);
	letter-spacing: -0.03em;
	color: var(--ws-snow);
	margin: 0 0 var(--ws-space-4);
}

.ws-cta__lede {
	font-size: var(--ws-text-lg);
	color: rgba(255, 255, 255, 0.82);
	max-width: 48ch;
	margin: 0 auto var(--ws-space-8);
	line-height: 1.5;
}

.ws-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ws-space-3);
}

/* Reversed button — solid white on dark backgrounds */
.ws-btn--reversed {
	background: var(--ws-snow);
	color: var(--ws-char);
	border-color: var(--ws-snow);
}

.ws-btn--reversed:hover,
.ws-btn--reversed:focus {
	background: var(--ws-mist);
	color: var(--ws-char);
	border-color: var(--ws-mist);
}

/* Ghost button on dark backgrounds — white outline */
.ws-btn--ghost-light {
	background: transparent;
	color: var(--ws-snow);
	border-color: rgba(255, 255, 255, 0.7);
}

.ws-btn--ghost-light:hover,
.ws-btn--ghost-light:focus {
	background: var(--ws-snow);
	color: var(--ws-char);
	border-color: var(--ws-snow);
}

/* =========================================================
   12. Page template (default page.php)
   ========================================================= */
.ws-page-header {
	padding-block: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
	position: relative;
	overflow: hidden;
}

.ws-page-header--imaged {
	color: var(--ws-snow);
	padding-block: clamp(5rem, 9vw, 8rem) clamp(4rem, 7vw, 6rem);
	background: var(--ws-char);
	min-height: clamp(26rem, 55vh, 40rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Default (no featured image) page header, site-wide: forest panel + sprig
   watermark + faint dot texture. Any .ws-page-header that isn't the imaged
   variant gets this automatically, so every template picks it up. */
.ws-page-header:not(.ws-page-header--imaged) {
	color: var(--ws-snow);
	padding-block: clamp(5rem, 9vw, 8rem) clamp(4rem, 7vw, 6rem);
	background-color: var(--ws-forest);
	background-image:
		radial-gradient(130% 140% at 85% -20%, rgba(31, 168, 115, 0.30) 0%, rgba(31, 168, 115, 0) 55%),
		url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20120%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M60%20104V40%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.12%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M60%2058C60%2058%2050%2054%2044%2044C38%2034%2040%2022%2040%2022C40%2022%2052%2026%2058%2036C64%2046%2060%2058%2060%2058Z%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.12%27%20stroke-width%3D%272.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M60%2072C60%2072%2070%2068%2076%2058C82%2048%2080%2036%2080%2036C80%2036%2068%2040%2062%2050C56%2060%2060%2072%2060%2072Z%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.12%27%20stroke-width%3D%272.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M60%2088C60%2088%2052%2086%2047%2078C42%2070%2044%2061%2044%2061C44%2061%2053%2064%2058%2072C63%2080%2060%2088%2060%2088Z%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.12%27%20stroke-width%3D%272.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2760%27%20cy%3D%2733%27%20r%3D%274.4%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%270.12%27%20stroke-width%3D%272.2%27%2F%3E%3C%2Fsvg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1' fill='%23FFFFFF' fill-opacity='0.06'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: center, right -1.5rem bottom -2rem, top left;
	background-size: auto, clamp(180px, 26vw, 300px) auto, 16px 16px;
	min-height: clamp(18rem, 38vh, 26rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ws-page-header--imaged .ws-page-header__title,
.ws-page-header:not(.ws-page-header--imaged) .ws-page-header__title {
	color: var(--ws-snow);
}

.ws-page-header--imaged .ws-page-header__lede,
.ws-page-header:not(.ws-page-header--imaged) .ws-page-header__lede {
	color: rgba(255, 255, 255, 0.85);
}

.ws-page-header--imaged .eyebrow,
.ws-page-header--imaged .ws-page-header__crumb a,
.ws-page-header:not(.ws-page-header--imaged) .eyebrow,
.ws-page-header:not(.ws-page-header--imaged) .ws-page-header__crumb a {
	color: var(--ws-mist);
}

.ws-page-header__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

/* The hero image itself. object-position is set inline from the Focal point
   field, so it can be chosen per page; this is the fallback when it is not. */
.ws-page-header__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.ws-page-header__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 1;
}

.ws-page-header__content {
	position: relative;
	z-index: 2;
}

.ws-page-header__crumb {
	margin-bottom: var(--ws-space-4);
}

.ws-page-header__crumb a {
	color: var(--ws-forest);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.ws-page-header__crumb a::before {
	content: "←";
	display: inline-block;
	transition: transform 150ms ease;
}

.ws-page-header__crumb a:hover::before {
	transform: translateX(-3px);
}

.ws-page-header__title {
	font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
}

.ws-page-header__lede {
	font-size: var(--ws-text-lg);
	color: var(--ws-text-muted);
	margin: var(--ws-space-4) 0 0;
	line-height: 1.5;
	max-width: 56ch;
}

.ws-page-body {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.ws-page-body .entry-content,
.ws-flex-section .entry-content {
	font-size: var(--ws-text-base);
	line-height: 1.7;
}

.ws-page-body .entry-content > h2:first-child,
.ws-page-body .entry-content > h3:first-child,
.ws-flex-section .entry-content > h2:first-child,
.ws-flex-section .entry-content > h3:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------
   Page-section bands — the ACF "Add section" Background choice.
   Each section is emitted as a full-width band so its colour spans
   the browser, matching the tinted bands on the home page.
   --------------------------------------------------------- */
.ws-flex-section {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.ws-flex-section--none  { background: var(--ws-snow); }
/* A cases grid is a full band in its own right, so it takes the same generous
   vertical padding as the hardcoded .ws-section it replaced (3–5.5rem rather
   than the 2.5–4rem a text section uses). Without this the migrated section
   sits noticeably tighter than the block it replaced. */
.ws-flex-section--cases {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.ws-flex-section--mist  { background: var(--ws-mist); }
.ws-flex-section--paper { background: var(--ws-paper); }

/* Consecutive sections sharing a colour should read as one band — drop the
   doubled padding at the join so there is no dead gap between them. */
.ws-flex-section--none + .ws-flex-section--none,
.ws-flex-section--mist + .ws-flex-section--mist,
.ws-flex-section--paper + .ws-flex-section--paper {
	padding-top: 0;
}

/* The band owns the vertical rhythm, so the first and last blocks inside
   it must not add their own (e.g. .ws-flex-heading's 2.5rem top margin). */
.ws-flex-section .entry-content > *:first-child,
.ws-flex-section .entry-content > *:first-child > *:first-child {
	margin-top: 0;
}

.ws-flex-section .entry-content > *:last-child {
	margin-bottom: 0;
}

/* The reviewed-by strip above and the related-cases section below are both
   mist too. A Light green band butting onto either needs the same collapse,
   plus the reviewed-by hairline hidden, or a stray rule runs across what
   reads as one continuous green area. */
.ws-reviewed-by + .ws-flex-sections > .ws-flex-section--mist:first-child {
	padding-top: 0;
}

.ws-reviewed-by:has(+ .ws-flex-sections > .ws-flex-section--mist:first-child) {
	border-bottom-color: transparent;
}

.ws-flex-sections:has(> .ws-flex-section--mist:last-child) + .ws-section--mist {
	padding-top: 0;
}

/* Home page: the nine built-in sections use .ws-section--mist rather than the
   flexible band class, so a Light green section dropped next to one needs the
   same seam collapse — otherwise two green areas show a dead gap between them. */
.ws-section--mist + .ws-flex-section--mist,
.ws-flex-section--mist + .ws-section--mist,
.ws-reviewed-by + .ws-flex-section--mist {
	padding-top: 0;
}

.ws-reviewed-by:has(+ .ws-flex-section--mist) {
	border-bottom-color: transparent;
}

/* Sibling nav at bottom of sub-pages */
.ws-sibling-nav {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: var(--ws-space-8);
	border-top: 1px solid var(--ws-border);
}

.ws-sibling-nav .eyebrow {
	margin-bottom: var(--ws-space-4);
}

.ws-sibling-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-2) var(--ws-space-6);
}

.ws-sibling-nav__list a {
	font-size: var(--ws-text-sm);
	font-weight: 500;
	color: var(--ws-char);
	border-bottom: 1px solid transparent;
	padding-block: var(--ws-space-1);
	transition: border-color 150ms ease, color 150ms ease;
}

.ws-sibling-nav__list a:hover {
	color: var(--ws-spring);
	border-bottom-color: var(--ws-spring);
}

/* ---------------------------------------------------------------------------
   Case-study disclosures
   Authorship, patient consent and the medical disclaimer. Deliberately quiet:
   this is content a reader should be able to find and trust, not content that
   competes with the cases. The legal paragraph is set smaller and lighter than
   the explanatory copy above it, and separated by a rule rather than a box, so
   it reads as a footnote instead of a warning.
   --------------------------------------------------------------------------- */

.ws-disclosure {
	padding-block: clamp(2rem, 4vw, 3rem);
}

/* Sits directly under the mist band of the listing header, so no double gap. */
.ws-disclosure--cases-top {
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-bottom: 0;
}

.ws-disclosure__body h2 {
	font-size: var(--ws-text-xl);
	margin-bottom: var(--ws-space-3);
}

.ws-disclosure__body h3 {
	font-size: var(--ws-text-lg);
	margin-top: var(--ws-space-6);
	margin-bottom: var(--ws-space-2);
}

.ws-disclosure__body p {
	margin-bottom: var(--ws-space-4);
}

.ws-disclosure__body p:last-child {
	margin-bottom: 0;
}

/* Inline variant: sits inside the case column, under the write-up, so it takes
   a separating rule of its own rather than a band. */
.ws-disclosure--inline {
	margin-top: var(--ws-space-8);
	padding-top: var(--ws-space-6);
	border-top: 1px solid rgba(15, 77, 51, 0.14);
}

/* The band's own rule would be a second line immediately below the one above. */
.ws-disclosure--inline .ws-disclosure__legal:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.ws-disclosure__legal {
	margin-top: var(--ws-space-6);
	padding-top: var(--ws-space-5);
	border-top: 1px solid rgba(15, 77, 51, 0.14);
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(26, 43, 36, 0.72);
}

.ws-disclosure__legal p {
	margin-bottom: var(--ws-space-3);
}

.ws-disclosure__legal p:last-child {
	margin-bottom: 0;
}

/* When the body is absent the rule would float with nothing above it. */
.ws-disclosure__legal:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* =========================================================
   Contact form section (Gravity Forms)
   Gravity Forms' Orbital theme sets its colours in an inline
   style keyed to the form's ID, which outranks any class
   selector here. The custom properties and the few direct
   rules below therefore carry !important.
   ========================================================= */
.ws-flex-form h2 {
	margin-top: 0;
}

.ws-flex-form__intro {
	color: var(--ws-text-muted);
	margin-bottom: var(--ws-space-6);
}

.ws-flex-form .gform_wrapper.gform-theme {
	--gf-color-primary: #1FA873 !important;
	--gf-color-primary-rgb: 31, 168, 115 !important;
	--gf-color-primary-darker: #178A5E !important;
	--gf-color-primary-lighter: #4FC193 !important;
	--gf-color-in-ctrl-primary: #1FA873 !important;
	--gf-color-in-ctrl-primary-rgb: 31, 168, 115 !important;
	--gf-color-in-ctrl-primary-darker: #178A5E !important;
	--gf-color-in-ctrl-primary-lighter: #4FC193 !important;
	margin: 0;
}

.ws-flex-form .gform_wrapper.gform-theme .gform_fields {
	row-gap: var(--ws-space-6) !important;
}

.ws-flex-form .gform_wrapper.gform-theme input[type="text"],
.ws-flex-form .gform_wrapper.gform-theme input[type="email"],
.ws-flex-form .gform_wrapper.gform-theme input[type="tel"],
.ws-flex-form .gform_wrapper.gform-theme textarea {
	font-size: var(--ws-text-base) !important;
	border-color: var(--ws-border-strong) !important;
	border-radius: var(--ws-radius) !important;
}

.ws-flex-form .gform_wrapper.gform-theme .gform_footer .gform_button {
	height: auto !important;
	padding: 0.875rem 1.5rem !important;
	font-size: var(--ws-text-sm) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: var(--ws-snow) !important;
	background: var(--ws-spring) !important;
	border: 1px solid var(--ws-spring) !important;
	border-radius: var(--ws-radius) !important;
}

.ws-flex-form .gform_wrapper.gform-theme .gform_footer .gform_button:hover {
	background: var(--ws-spring-dark) !important;
	border-color: var(--ws-spring-dark) !important;
}

.ws-flex-form .gform_confirmation_message {
	padding: var(--ws-space-6);
	background: var(--ws-mist);
	border-radius: var(--ws-radius);
}