/*
Theme Name: iStrive Mental Health Psychiatry
Theme URI: https://istrivementalhealth.com
Author: Pikscape Agency
Description: Custom theme for iStrive Mental Health Psychiatry — psychiatric care in Santa Monica. Includes a Conditions post type, Headway booking buttons, and Customizer settings for contact details.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: istrive
*/

/* ==========================================================================
   Contents
   1. Design tokens (edit colors here)
   2. Base & typography
   3. Layout helpers
   4. Buttons
   5. Header & navigation
   6. Hero
   7. Sections & cards
   8. About, SPRAVATO, provider
   9. CTA band
   10. Pages, posts & entry content
   11. Forms (incl. WPForms)
   12. Footer
   13. Utilities & accessibility
   14. Breakpoints: 481px+, 769px+, 1100px+
   ========================================================================== */

/* 1. Design tokens
   ========================================================================== */
:root {
	--hero-wave-h: clamp(72px, 10vw, 140px); /* height of the hero's bottom wave */
	/* Brand palette (from the client brand board) */
	--sage: #b8c2b8;            /* Primary: soft sage, for backgrounds, borders and decoration */
	--dusty-blue: #a7b8bb;      /* Secondary: hovers, borders */
	--warm-beige: #dec7b2;      /* Accent: highlighted sections */
	--warm-beige-soft: #e4d2c1; /* Warm Beige lightened 25% toward ivory, for large highlighted bands */
	--ivory: #f8f4ef;           /* Default background */
	--gold: #b59664;            /* Champagne gold: highlights, accent buttons */
	--charcoal: #343632;        /* Dark text, footer */

	/* Deep sage for button fills and anything that needs contrast. Ivory or white text on it is 4.6:1 or better. */
	--sage-deep: #587562;
	--sage-deeper: #46604f;     /* Hover state for deep-sage buttons */

	/* Derived shades for text on light backgrounds (AA on ivory and on the tints below) */
	--sage-text: #4a6350;
	--dusty-text: #4a666c;
	--sage-tint: #e5e5de;       /* Light sage section background */
	--beige-tint: #f0e6dd;      /* Soft warm-beige section background */

	/* Text on primary (sage-deep) buttons: ivory is 4.6:1 */
	--btn-primary-text: #f8f4ef;

	/* Aliases used throughout the stylesheet */
	--primary-color: var(--sage);
	--primary-dark: var(--sage-text);
	--primary-light: var(--sage-tint);
	--secondary-color: var(--dusty-blue);
	--text-dark: var(--charcoal);       /* Headings and card titles */
	--text-light: #484a45;              /* Body text */
	--text-muted: var(--dusty-text);    /* Secondary text */
	--white: #ffffff;
	--border-color: rgba(167, 184, 187, 0.25);

	--gradient-sage: linear-gradient(135deg, #b8c2b8 0%, #d1d7d1 100%);

	--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
	--font-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--footer-wave-h: clamp(48px, 6vw, 90px); /* footer's curved top edge, overlaps the section above */
	--space-2xl: 6rem;

	--radius: 14px;
	--radius-btn: 8px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 10px rgba(52, 54, 50, 0.07);
	--shadow-md: 0 14px 34px rgba(52, 54, 50, 0.13);
	--container: 1200px;
	--header-height: 74px;
	--transition: 0.25s ease;
}

/* 2. Base & typography
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--ivory);
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
	margin: 0;
	background: var(--ivory);
	color: var(--text-light);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space-sm);
	color: var(--text-dark);
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

h5,
h6 {
	font-family: var(--font-label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

p,
ul,
ol {
	margin: 0 0 var(--space-sm);
}

a {
	color: var(--primary-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition);
}

a:hover {
	color: var(--primary-color);
}

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

img {
	display: block;
}

:focus-visible {
	outline: 3px solid var(--primary-color);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 3. Layout helpers
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--space-md); /* 24px side gutter on every width */
}

.container--narrow {
	max-width: 820px;
}

.section {
	padding: var(--space-xl) 0;
}

.section--tight {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
}

/* Soft warm-beige band */
.section--beige {
	background: var(--beige-tint);
}

/* Highlighted band: full warm beige */
.section--highlight {
	position: relative;
	overflow: hidden;
	background: var(--warm-beige-soft);
	color: var(--charcoal);
}

.section--highlight .eyebrow {
	color: var(--charcoal);
}

/* Olive sprig (assets/images/olive-sprig.svg): decorative <img>, see istrive_sprig() */
.sprig {
	display: block;
	width: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.section-header {
	max-width: 680px;
	margin: 0 auto var(--space-lg);
	text-align: center;
}

.section-lead {
	font-size: 1.1rem;
}

.section-footer {
	margin: var(--space-lg) 0 0;
	text-align: center;
}

.eyebrow {
	margin-bottom: var(--space-xs);
	color: var(--primary-dark);
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.eyebrow--light {
	color: var(--warm-beige);
}

/* 4. Buttons
   Three variants: .btn--primary (deep sage), .btn--secondary (outline), .btn--accent (champagne gold).
   All hover to dusty blue. .btn--outline is kept as an alias of .btn--secondary.
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 48px; /* touch-friendly */
	padding: 0.8rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--radius-btn);
	font-family: var(--font-label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

/* Primary: main CTAs (Schedule a Consultation, Learn More). Deep sage, soft shadow, arrow. */
.btn--primary {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: var(--btn-primary-text);
	box-shadow: 0 2px 8px rgba(52, 54, 50, 0.15);
}

.btn--primary::after {
	content: "";
	flex: none;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s ease;
}

.btn--primary:hover {
	background: var(--sage-deeper);
	border-color: var(--sage-deeper);
	color: var(--btn-primary-text);
	box-shadow: 0 6px 16px rgba(52, 54, 50, 0.28);
	transform: translateY(-1px);
}

.btn--primary:hover::after {
	transform: translateX(3px);
}

/* Secondary: alternate CTAs */
.btn--secondary,
.btn--outline {
	border-color: var(--sage-deep);
	background: var(--ivory);
	color: var(--sage-text);
}

.btn--secondary:hover,
.btn--outline:hover {
	border-color: var(--dusty-blue);
	background: var(--dusty-blue);
	color: var(--charcoal);
	box-shadow: 0 8px 20px rgba(167, 184, 187, 0.3);
}

/* Accent: emphasis (Book Now) */
.btn--accent {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--charcoal);
}

.btn--accent:hover {
	background: var(--dusty-blue);
	border-color: var(--dusty-blue);
	color: var(--charcoal);
	box-shadow: 0 8px 20px rgba(167, 184, 187, 0.35);
}

/* Ghost: secondary action on photos */
.btn--ghost {
	border: 1.5px solid var(--white);
	background: transparent;
	color: var(--white);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.btn--ghost:hover {
	background: rgba(248, 244, 239, 0.22);
	color: var(--white);
}

.btn:focus-visible {
	outline: 2px solid var(--sage-deep);
	outline-offset: 3px;
	border-radius: var(--radius-btn);
}

.hero .btn:focus-visible {
	outline-color: var(--ivory);
}

.btn--sm {
	min-height: 44px;
	padding: 0.75rem 1.375rem;
	font-size: 0.82rem;
}

.btn--lg {
	padding: 1rem 2.25rem;
	font-size: 1.05rem;
}

.btn--block {
	width: 100%;
}

.btn-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

/* 5. Header & navigation
   ========================================================================== */
.site-header {
	position: sticky;
	top: -1px;
	padding-top: 1px;
	z-index: 100;
	background: var(--ivory);
	border-bottom: 1px solid var(--border-color);
	transition: box-shadow var(--transition);
}

.admin-bar .site-header {
	top: 45px;
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: var(--header-height);
}

.site-branding .custom-logo {
	width: auto;
	max-height: 48px;
}

.site-title {
	display: inline-flex;
	align-items: center;
	color: var(--text-dark);
	text-decoration: none;
}

.site-branding {
	flex: none;
}

.site-logo {
	flex: none;
	display: block;
	width: auto;
	height: 38px;
}

/* Hamburger button (mobile/tablet) */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	display: block;
	position: relative;
	width: 24px;
	height: 2px;
	background: var(--text-dark);
	transition: transform var(--transition), background-color var(--transition);
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel */
.primary-nav {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - var(--header-height));
	overflow-y: auto;
	padding: var(--space-sm) var(--space-sm) var(--space-md);
	background: var(--ivory);
	border-bottom: 1px solid var(--border-color);
	box-shadow: var(--shadow-md);
}

.primary-nav.is-open {
	display: block;
}

.no-js .primary-nav {
	display: block;
	position: static;
	box-shadow: none;
}

.primary-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav a {
	display: block;
	padding: 0.75rem 0.25rem;
	color: var(--text-dark);
	font-family: var(--font-label);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none;
	text-transform: uppercase;
}

.primary-nav .sub-menu a {
	padding-left: var(--space-sm);
	font-weight: 400;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	color: var(--primary-dark);
}

.primary-nav__cta {
	margin-top: var(--space-sm);
}

.primary-nav .btn {
	display: inline-flex;
	padding: 0.75rem 1.375rem;
	color: var(--btn-primary-text);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.primary-nav .btn:hover {
	color: var(--btn-primary-text);
}

.primary-nav__cta .btn {
	width: 100%;
}

/* 6. Hero
   ========================================================================== */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: max(560px, 80vh);
	padding: var(--space-xl) 0 calc(var(--space-xl) + var(--hero-wave-h) * 0.45);
	background: linear-gradient(135deg, var(--sage-tint) 0%, var(--beige-tint) 100%);
	background-position: center;
	background-size: cover;
	text-align: center;
}

/* One even tint across the whole photo (no shadow shapes) so the white text stays readable */
.hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(36, 36, 32, 0.5);
}

/* Organic wave along the bottom edge: the ivory of the next section flows up into the photo, and the ribbons cross the edge into the ivory below */
.hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(var(--hero-wave-h) * -0.8132 - 1px);
	left: 0;
	height: calc(var(--hero-wave-h) * 1.8132);
	background: url("assets/images/hero-wave.svg") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
}

.hero__title {
	max-width: 860px;
	margin: 0 auto var(--space-md);
}

/* Phones: scale the headline so each of its two lines stays on one line */
@media (max-width: 767px) {
	.hero__title {
		font-size: clamp(1.6rem, 8vw, 2.6rem);
	}
}

.hero__lead {
	max-width: 760px;
	margin: 0 auto var(--space-lg);
	font-size: 1.15rem;
}

.hero .btn-group {
	align-items: stretch;
	justify-content: center;
}

/* Same border width on both buttons so their heights match exactly */
.hero .btn-group .btn {
	min-height: 56px;
	border-width: 1.5px;
}

.hero--image,
.hero--image .hero__title {
	color: var(--white);
}


.hero--image .hero__title {
	text-shadow: 0 2px 20px rgba(20, 20, 18, 0.5);
}

.hero--image .hero__lead {
	text-shadow: 0 1px 12px rgba(20, 20, 18, 0.55);
}

.hero--image .hero__lead {
	color: var(--white);
}

/* Trust row: inside the hero, below the buttons. Centred column on phones, one centred line from tablet up. */
.hero__trust {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	max-width: 1052px;
	margin: 3rem auto 0;
	padding: var(--space-md) 0 0;
	border-top: 1px solid transparent;
	background: linear-gradient(rgba(181, 150, 100, 0.7), rgba(181, 150, 100, 0.7)) center top / 60px 1px no-repeat;
	background-origin: border-box;
	list-style: none;
}

.hero__trust li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	color: var(--ivory);
	font-family: var(--font-label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.35;
	text-align: left;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(20, 20, 18, 0.5);
}

.hero__trust .icon {
	flex: none;
	width: 24px;
	height: 24px;
	stroke-width: 1.3;
}

/* 7. Sections & cards
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	background: var(--ivory);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.card:hover {
	transform: translateY(-4px);
	border-color: var(--sage);
	box-shadow: var(--shadow-md);
}

.card:hover .card__title {
	color: var(--sage-text);
}

.card__title {
	margin-bottom: var(--space-xs);
	font-size: 1.25rem;
}

.card__link {
	color: inherit;
	text-decoration: none;
}

/* Make the whole card clickable while keeping one accessible link. */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
}

.card__text {
	flex: 1;
	color: var(--dusty-text);
	font-size: 0.95rem;
}

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: var(--space-xs);
	color: var(--primary-dark);
	font-family: var(--font-label);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.card__more .icon {
	width: 18px;
	height: 18px;
	transition: transform var(--transition);
}

.card:hover .card__more .icon {
	transform: translateX(4px);
}

a.card__more--link {
	align-self: flex-start;
	text-decoration: none;
}

a.card__more--link:hover {
	color: var(--charcoal);
}

.card--condition {
	border-top: 4px solid var(--sage);
}

.card--condition {
	scroll-margin-top: 0.5rem;
}

.card--condition:hover,
.card--condition:target {
	border-top-color: var(--gold);
}

/* Conditions section on the homepage: compact icon tiles that link to the Conditions page */
.section.conditions {
	padding: 3rem 0 4rem;
}

/* Conditions button: transparent, 1.5px sage-deep outline; fills on hover */
.conditions .btn--secondary,
.spravato .btn--secondary {
	border-width: 1.5px;
	border-color: var(--sage-deep);
	background: transparent;
	color: var(--sage-deep);
	box-shadow: none;
}

.conditions .btn--secondary:hover,
.spravato .btn--secondary:hover {
	border-color: var(--sage-deep);
	background: var(--sage-deep);
	color: var(--ivory);
	box-shadow: 0 6px 16px rgba(52, 54, 50, 0.2);
}

.condition-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: var(--space-sm);
}

.condition-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) var(--space-sm);
	border: 1px solid var(--border-color);
	border-top: 4px solid var(--sage);
	border-radius: var(--radius);
	background: var(--ivory);
	box-shadow: var(--shadow-sm);
	color: var(--text-dark);
	text-align: center;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.condition-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(222, 199, 178, 0.42);
	color: var(--sage-deep);
	transition: background-color 0.25s ease;
}

.condition-tile__icon .icon {
	width: 26px;
	height: 26px;
	stroke-width: 1.5;
}

.condition-tile__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

/* Image band: full-width photo with wavy top and bottom edges (gold line on each) */
.image-band {
	--band-wave-h: 40px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	padding: calc(var(--band-wave-h) + 2rem) 0;
	background-color: #8c8c80; /* shown until the photo loads */
	/* One light, even warm dark tint over the photo (no shadow shapes); the text shadows do the rest */
	background-image: linear-gradient(rgba(36, 32, 28, 0.44), rgba(36, 32, 28, 0.44)), var(--band-img);
	background-position: var(--band-pos, center);
	background-size: cover;
	color: var(--ivory);
	text-align: center;
}

.image-band::before,
.image-band::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: var(--band-wave-h);
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 1;
}

.image-band::before {
	top: -1px;
	background-image: url("assets/images/band-edge-top.svg");
}

.image-band::after {
	bottom: -1px;
	background-image: url("assets/images/band-edge-bottom.svg");
}

@media (max-width: 767px) {
	.image-band {
		background-image: linear-gradient(rgba(36, 32, 28, 0.44), rgba(36, 32, 28, 0.44)), var(--band-img-sm, var(--band-img));
	}
}

.image-band__inner {
	position: relative;
	z-index: 1;
}

.image-band__title {
	margin: 0;
	color: var(--ivory);
	font-size: clamp(1.75rem, 3.7vw, 2.9rem);
	line-height: 1.25;
	text-shadow: 0 2px 18px rgba(20, 18, 16, 0.6), 0 1px 3px rgba(20, 18, 16, 0.4);
}

.image-band__title em {
	color: #e8cf98; /* lightened champagne gold, readable on the tint */
	font-style: italic;
}

/* Headline breaks into two lines from tablet up; on phones it wraps naturally */
.image-band__br {
	display: none;
}

.image-band__cta {
	margin: 32px 0 0;
}

/* Services: light sage section with a grid of centred cards */
.section.services {
	background: rgba(184, 194, 184, 0.15);
}

.services .section-header {
	margin-bottom: 3rem;
}

.section.services {
	padding-bottom: 4rem; /* phones: 64px between the cards and the divider into SPRAVATO */
}

.services .section-header::after {
	content: "";
	display: block;
	width: 60px;
	height: 1px;
	margin: var(--space-md) auto 0;
	background: var(--gold);
}

.service-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr; /* every card the same height, across rows */
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-grid > li {
	display: flex; /* every card in a row stretches to the same height */
}

.service-card {
	display: flex;
	flex: 1;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 32px 28px;
	border: 1px solid rgba(167, 184, 187, 0.25);
	border-radius: 16px;
	background: #fbf9f5;
	box-shadow: 0 4px 16px rgba(52, 54, 50, 0.06);
	color: var(--charcoal);
	text-align: center;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(222, 199, 178, 0.4); /* warm beige */
	color: var(--sage-deep);
}

.service-grid > li:nth-child(3n + 2) .service-card__icon {
	background: rgba(184, 194, 184, 0.4); /* sage */
}

.service-grid > li:nth-child(3n) .service-card__icon {
	background: rgba(167, 184, 187, 0.4); /* dusty blue */
}

.service-card__icon .icon {
	width: 28px;
	height: 28px;
	stroke-width: 1.5;
}

.service-card__title {
	margin: 1.5rem 0 0.6rem;
	color: var(--charcoal);
	font-size: 22px;
	line-height: 1.25;
}

.service-card__text {
	margin: 0;
	color: rgba(52, 54, 50, 0.8);
	font-size: 15.5px;
	line-height: 1.65;
}

/* Linked cards: the whole card is the link; a small arrow sits in the bottom right corner */
.service-card--link {
	padding-bottom: 44px; /* room for the arrow */
}

.service-card__arrow {
	position: absolute;
	right: 18px;
	bottom: 16px;
	color: var(--sage-deep);
	line-height: 0;
	transition: transform 0.25s ease;
}

.service-card__arrow .icon {
	width: 18px;
	height: 18px;
}

/* Lift on hover (devices that can hover); keyboard focus on linked cards always shows it */
.service-card--link:focus-visible {
	transform: translateY(-4px);
	border-color: var(--gold);
	box-shadow: 0 10px 26px rgba(52, 54, 50, 0.11);
	outline: 2px solid var(--sage-deep);
	outline-offset: 3px;
	border-radius: 16px;
}

.service-card--link:focus-visible .service-card__arrow {
	transform: translateX(4px);
}

@media (hover: hover) {
	.service-card--link:hover .service-card__arrow {
		transform: translateX(4px);
	}

	.service-card:hover {
		transform: translateY(-4px);
		border-color: var(--gold);
		box-shadow: 0 10px 26px rgba(52, 54, 50, 0.11);
	}
}

/* Keyboard focus always shows the lift; hover only on devices that can hover */
.condition-tile:focus-visible {
	transform: translateY(-4px);
	border-top-color: var(--gold);
	box-shadow: var(--shadow-md);
	outline: 2px solid var(--sage-deep);
	outline-offset: 3px;
	border-radius: var(--radius);
}

.condition-tile:focus-visible .condition-tile__icon {
	background: rgba(222, 199, 178, 0.75);
}

@media (hover: hover) {
	.condition-tile:hover {
		transform: translateY(-4px);
		border-top-color: var(--gold);
		box-shadow: var(--shadow-md);
	}

	.condition-tile:hover .condition-tile__icon {
		background: rgba(222, 199, 178, 0.75);
	}
}

.card--post {
	padding: 0;
	overflow: hidden;
}

.card--post .card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-md);
}

.card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.card__meta {
	margin-bottom: var(--space-xs);
	color: var(--text-muted);
	font-size: 0.85rem;
}

/* 8. About, SPRAVATO, provider
   ========================================================================== */
/* Space below the hero ribbons (they run about 0.62 x wave-height below the hero) */
.section.about {
	padding-top: calc(var(--hero-wave-h) * 0.621 + 64px);
}

.about__grid {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
}

/* Watercolour olive branch bleeding in from the right screen edge, centred in the empty area below the pull quote (900px and up).
   The quote column stretches to the row height; .about__branch-area fills the space from the quote down to the
   divider and the branch is centred in it. overflow-x: clip trims the bleed at the screen edge without making the
   section a positioned box (which would paint its background over the hero wave above). */
.about__branch-area {
	display: none;
}

@media (min-width: 900px) {
	.section.about {
		overflow-x: clip;
	}

	.about__pullquote {
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}

	.about__branch-area {
		display: block;
		position: relative;
		flex: 1;
		margin-bottom: calc(28px - var(--space-2xl)); /* reach down to the top of the curved divider */
	}

	.about__branch {
		position: absolute;
		z-index: 0;
		top: 50%;
		/* 40px past the screen edge (only the very base of the stem) at every width */
		right: calc((min(100vw, var(--container)) - 100vw) / 2 - var(--space-md) - 40px);
		height: 370px;
		opacity: 0.7;
		/* centred in the space below the quote, nudged up a little so the lowest leaves end above the divider; mirrored to lean up-left */
		transform: translateY(-50%) scaleX(-1);
	}
}

.about .section-title {
	text-wrap: balance;
}

.about__text {
	font-size: 1.05rem;
}

.about__lead,
.about__text .entry-content > p:first-child {
	color: var(--charcoal);
	font-size: 1.25rem;
	line-height: 1.75;
}

.about__text .btn {
	margin-top: var(--space-xs);
}

/* Welcome section: tagline as a pull quote (no box), a short gold line above it */
.about__pullquote::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin-bottom: var(--space-md);
	background: var(--gold);
}

.about__quote {
	margin: 0;
	color: var(--primary-dark);
	font-family: var(--font-heading);
	font-size: clamp(1.9rem, 3.2vw, 2.75rem);
	font-style: italic;
	line-height: 1.22;
}

.section.spravato {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.spravato__inner {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}

.spravato__text .section-title {
	text-wrap: balance;
}

.spravato p {
	max-width: 640px;
	font-size: 1.08rem;
}

.spravato .btn-group {
	margin-top: var(--space-md);
}

/* Photo with a thin champagne gold outline offset 12px behind it, like a frame peeking out */
.spravato__media {
	position: relative;
	order: -1; /* phones: photo above the text, with room on the right and bottom for the frame */
	margin: 0 12px 12px 0;
}

.spravato__media::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(12px, 12px);
	border: 1px solid var(--gold);
	border-radius: 16px;
}

.spravato__media img {
	position: relative;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(52, 54, 50, 0.18);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Phones: buttons stack full width */
@media (max-width: 767px) {
	.spravato .btn-group {
		flex-direction: column;
	}

	.spravato .btn-group .btn {
		width: 100%;
	}

	/* Provider card: full-width button, call line centred below it */
	.provider__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.provider__cta .btn {
		width: 100%;
	}

	.provider__cta .provider__call {
		text-align: center;
	}
}

/* Curved divider between sections */
.curve-divider {
	position: relative;
	z-index: 2;
	height: 56px;
	margin: -28px 0;
	background: url("assets/images/swirl-divider.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Provider: flowing curves framing the card */
.provider {
	position: relative;
	overflow: hidden;
	background: var(--sage-tint);
}

.provider > .container {
	position: relative;
}

.provider__card {
	position: relative;
	z-index: 1;
}

.provider__sprig {
	display: none;
}

/* Watercolour olive branch bleeding in from the left screen edge, bottom-left, behind the card (900px and up) */
@media (min-width: 900px) {
	.provider__sprig {
		display: block;
		position: absolute;
		z-index: 0;
		bottom: 10px;
		left: -70px;
		height: 560px;
		opacity: 0.7;
	}
}

.has-swirl::before,
.has-swirl::after {
	content: "";
	position: absolute;
	z-index: 0;
	bottom: 0;
	width: clamp(120px, 19vw, 280px);
	height: 100%;
	background: url("assets/images/swirl-frame.svg") left bottom / contain no-repeat;
	pointer-events: none;
}

.has-swirl::before {
	left: 0;
}

.has-swirl::after {
	right: 0;
	transform: scaleX(-1);
}

.has-swirl > .container {
	position: relative;
	z-index: 1;
}

.provider__card {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	background: var(--ivory);
	box-shadow: var(--shadow-md);
}

.provider__media {
	min-height: 320px;
	background: linear-gradient(160deg, var(--sage-tint) 0%, var(--beige-tint) 100%);
}

.provider__photo {
	width: 100%;
	height: auto;
	max-height: 560px;
	aspect-ratio: 1 / 1; /* head and shoulders */
	object-fit: cover;
	object-position: center top; /* the hat touches the top of the photo */
}

.provider__info {
	padding: var(--space-lg) var(--space-md);
}

.provider__name {
	margin-bottom: 0.25rem;
	font-size: clamp(1.6rem, 3vw, 2rem);
}

.provider__creds {
	display: block;
	margin-top: 0.4rem;
	color: var(--sage-text);
	font-family: var(--font-label);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

.provider__role {
	margin-bottom: var(--space-md);
	color: var(--dusty-text);
	font-family: var(--font-label);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.provider__details {
	display: grid;
	gap: var(--space-md);
	margin: var(--space-md) 0 var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-color);
}

.provider__details h4 {
	margin-bottom: var(--space-xs);
	color: var(--sage-text);
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.provider__details:last-child {
	margin-bottom: 0;
}

.provider__details p {
	margin: 0;
	font-size: 0.95rem;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list li {
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-pill);
	background: var(--sage-tint);
	color: var(--sage-text);
	font-size: 0.85rem;
	font-weight: 700;
}

/* 9. CTA band
   ========================================================================== */
.cta-band {
	padding: var(--space-xl) 0 calc(var(--space-xl) + var(--footer-wave-h));
	background: var(--white);
	color: var(--charcoal);
	text-align: center;
}

.cta-band__title {
	color: var(--charcoal);
}

.cta-band__tagline {
	margin-bottom: var(--space-lg);
	color: var(--charcoal);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-style: italic;
}

.cta-band__call,
.provider__call {
	margin: 16px 0 0;
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 0.95rem;
}

.provider__call {
	margin-top: 12px;
}

/* Provider card: button with the call line to its right; the line drops below (12px) when the row doesn't fit. */
.provider__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.provider__cta .btn {
	flex: none;
	white-space: nowrap;
}

.provider__cta .provider__call {
	margin: 0;
}

.cta-band__call a,
.provider__call a {
	color: var(--charcoal);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
}

/* Watercolour olive branches bleeding in from both sides of the band (inner pages); the right one is mirrored */
.cta-band {
	position: relative;
	overflow: hidden;
}

.cta-band > .container {
	position: relative;
	z-index: 1;
}

.cta-band__sprig {
	display: none;
}

@media (min-width: 768px) {
	.cta-band__sprig {
		display: block;
		position: absolute;
		z-index: 0;
		bottom: calc(var(--footer-wave-h) - 10px);
		height: 300px;
		opacity: 0.7;
	}

	.cta-band__sprig--left {
		left: -40px;
	}

	.cta-band__sprig--right {
		right: -40px;
		transform: scaleX(-1);
	}
}

/* 10. Pages, posts & entry content
   ========================================================================== */
.page-header {
	padding: var(--space-xl) 0 var(--space-sm);
	background: linear-gradient(180deg, var(--sage-tint) 0%, var(--ivory) 100%);
}

.page-title {
	margin-bottom: var(--space-sm);
}

.page-lead {
	font-size: 1.15rem;
}

.page-featured {
	margin-bottom: var(--space-lg);
}

.page-featured img {
	width: 100%;
	border-radius: var(--radius);
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--space-sm);
	color: var(--text-muted);
	font-size: 0.9rem;
}

.single-layout {
	display: grid;
	gap: var(--space-lg);
}

.sidebar-cta {
	padding: var(--space-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	background: var(--beige-tint);
}

.sidebar-cta__title {
	font-size: 1.35rem;
}

.sidebar-cta__phone {
	margin: var(--space-sm) 0 0;
	font-size: 0.92rem;
	text-align: center;
}

.entry-content {
	font-size: 1.05rem;
}

.entry-content > * + h2,
.entry-content > * + h3 {
	margin-top: var(--space-lg);
}

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

.entry-content li {
	margin-bottom: 0.35rem;
}

.entry-content blockquote {
	margin: var(--space-md) 0;
	padding: var(--space-sm) var(--space-md);
	border-left: 4px solid var(--gold);
	background: var(--sage-tint);
	color: var(--text-dark);
}

.entry-content img {
	border-radius: 10px;
}

.entry-content .wp-block-button__link {
	border-radius: var(--radius-btn);
	background: var(--sage-deep);
	color: var(--btn-primary-text);
	font-family: var(--font-label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.3s ease;
}

.entry-content .wp-block-button__link:hover {
	background: var(--dusty-blue);
	color: var(--charcoal);
}

.entry-content details {
	margin-bottom: var(--space-xs);
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--border-color);
	border-radius: 10px;
}

.entry-content summary {
	color: var(--text-dark);
	font-weight: 600;
	cursor: pointer;
}

.alignwide {
	max-width: var(--container);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

.pagination .nav-links,
.page-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--space-lg);
}

.pagination .page-numbers {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	text-decoration: none;
}

.pagination .current {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: var(--btn-primary-text);
}

.empty-state {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}

.admin-note {
	margin-top: var(--space-md);
	padding: var(--space-sm);
	border: 1px dashed var(--dusty-blue);
	border-radius: 8px;
	font-size: 0.9rem;
}

/* 11. Forms (incl. WPForms)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea,
.wpforms-container input.wpforms-field-medium,
.wpforms-container select,
.wpforms-container textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(167, 184, 187, 0.5);
	border-radius: 10px;
	background: var(--white);
	color: var(--text-dark);
	font: inherit;
	transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--sage-text);
	outline: none;
	box-shadow: 0 0 0 3px rgba(184, 194, 184, 0.45);
}

label,
.wpforms-container .wpforms-field-label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--text-dark);
	font-family: var(--font-label);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

button[type="submit"],
input[type="submit"],
.wpforms-container .wpforms-submit {
	min-height: 48px;
	padding: 0.8rem 2rem;
	border: 0;
	border-radius: var(--radius-btn);
	background: var(--sage-deep);
	color: var(--btn-primary-text);
	font-family: var(--font-label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover {
	background: var(--dusty-blue);
	color: var(--charcoal);
}

.field-error,
.wpforms-container label.wpforms-error {
	display: block;
	margin-top: 0.3rem;
	color: #b3261e;
	font-size: 0.88rem;
}

.is-invalid {
	border-color: #b3261e !important;
}

.search-form {
	display: flex;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
}

.contact-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-xs) var(--space-md);
	margin: 0 0 var(--space-lg);
	padding: var(--space-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	background: var(--ivory);
}

.contact-details dt {
	color: var(--sage-text);
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.contact-details dd {
	margin: 0;
	color: var(--text-dark);
}

/* 12. Footer
   ========================================================================== */
.site-footer {
	position: relative;
	overflow: hidden;
	/* The wave is the footer's top edge: the footer pulls up over the section above,
	   stays transparent above the curve and turns charcoal below it. */
	margin-top: calc(-1 * var(--footer-wave-h));
	padding-top: calc(var(--footer-wave-h) + var(--space-lg));
	background: linear-gradient(to bottom, transparent calc(var(--footer-wave-h) - 1px), var(--charcoal) calc(var(--footer-wave-h) - 1px));
	color: rgba(248, 244, 239, 0.85);
	font-size: 0.95rem;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--footer-wave-h);
	background: url("assets/images/footer-wave.svg") center top / 100% 100% no-repeat;
	pointer-events: none;
}

.site-footer .container {
	position: relative;
	z-index: 1;
}

.site-footer a {
	color: var(--ivory);
	text-decoration: none;
}

.site-footer a:hover {
	color: #e8cf98; /* light champagne gold: 8.0:1 on charcoal (plain gold is 4.4:1) */
	text-decoration: underline;
}

.site-footer .btn:hover {
	text-decoration: none;
}

.site-footer .btn--primary,
.site-footer .btn--primary:hover {
	color: var(--btn-primary-text);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-lg);
}

/* Pages that don't end with the CTA band: keep the last section clear of the footer's wave overlap. */
/* Pages that end with a .section (the homepage ends with Meet Your Provider): the section's own
   background runs on behind the wave, so the extra room goes into its bottom padding instead. */
.site-main > .section:last-child {
	padding-bottom: calc(var(--space-xl) + var(--footer-wave-h));
}

.site-main:not(:has(> .cta-band:last-child, > .section:last-child)) {
	padding-bottom: var(--footer-wave-h);
}

/* Higher specificity so the 481px+ .container padding shorthand doesn't reset it. */
.site-footer .site-footer__grid {
	padding-bottom: var(--space-lg);
}

/* Footer blurb breaks after "adults," only where that first line fits; elsewhere it wraps naturally
   (otherwise "adults," is left alone on a short line on small phones and in the narrow 3-column footer). */
@media (max-width: 419px), (min-width: 769px) and (max-width: 1023px) {
	.footer-blurb-br {
		display: none;
	}
}

.footer-logo {
	display: block;
	width: auto;
	height: 40px;
	margin-bottom: var(--space-sm);
}


.footer-heading {
	margin-bottom: var(--space-sm);
	color: var(--warm-beige);
	font-family: var(--font-label);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.footer-links,
.footer-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-contact__label {
	margin-right: 0.35em;
	color: var(--warm-beige);
	font-family: var(--font-label);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.footer-links li,
.footer-contact li {
	padding: 0.3rem 0;
	text-wrap: pretty;
}

.footer-crisis {
	margin: 0;
	padding: var(--space-md) 0;
	border-top: 1px solid rgba(167, 184, 187, 0.3);
	font-size: 0.85rem;
}

.site-footer__bottom {
	padding: var(--space-sm) 0;
	background: rgba(0, 0, 0, 0.2);
	font-size: 0.85rem;
}

.site-footer__bottom p {
	margin: 0;
}

/* 11b. Notice bar + Waitlist page + Fluent Forms
   ========================================================================== */
.notice-bar {
	background: var(--sage-deep);
	color: var(--ivory);
	font-size: 0.9rem;
}

.notice-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.notice-bar__text {
	flex: 1;
	margin: 0;
	text-align: center;
	line-height: 1.45;
}

.notice-bar__link {
	color: var(--ivory);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.notice-bar__link:hover {
	color: var(--white);
}

.notice-bar__close {
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ivory);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.notice-bar__close:hover {
	background: rgba(248, 244, 239, 0.18);
}

.notice-bar a:focus-visible,
.notice-bar__close:focus-visible {
	outline: 2px solid var(--ivory);
	outline-offset: 2px;
}

.waitlist-card {
	padding: 2rem 1.5rem;
	border: 1px solid var(--border-color);
	border-radius: 16px;
	background: #fbf9f5;
	box-shadow: 0 4px 16px rgba(52, 54, 50, 0.06);
}

.waitlist-privacy {
	margin: var(--space-md) 0 0;
	color: var(--dusty-text);
	font-size: 0.85rem;
	text-align: center;
}

.contact-waitlist {
	margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
}

.footer-waitlist {
	margin: var(--space-sm) 0 0;
}

.footer-waitlist a {
	color: var(--warm-beige);
	font-weight: 700;
}

/* Waitlist form (placeholder markup and Fluent Forms share one look) */
.waitlist-form .form-field,
.fluentform .ff-el-group {
	margin-bottom: 1.25rem;
}

.waitlist-form label,
.waitlist-form legend,
.fluentform .ff-el-input--label label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--charcoal);
	font-family: var(--font-label);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.waitlist-form .req {
	color: var(--sage-deep);
}

.waitlist-form .opt {
	color: var(--dusty-text);
	font-weight: 500;
}

.waitlist-form input[type="text"],
.waitlist-form input[type="email"],
.waitlist-form input[type="tel"],
.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid #839489; /* 3:1 against the ivory fill */
	border-radius: 10px;
	background: var(--ivory);
	color: var(--charcoal);
	font: inherit;
	box-shadow: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.waitlist-form input:focus,
.fluentform .ff-el-form-control:focus {
	border-color: var(--sage-deep);
	outline: none;
	box-shadow: 0 0 0 3px rgba(88, 117, 98, 0.28);
	background: var(--ivory);
}

.waitlist-form .choice-group {
	min-width: 0;
	margin-right: 0;
	margin-left: 0;
	padding: 0;
	border: 0;
}

.waitlist-form .choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.waitlist-form .choice,
.fluentform .ff-el-form-check-radio .ff-el-form-check-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.6rem 1rem;
	border: 1px solid #839489;
	border-radius: 999px;
	background: var(--ivory);
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.waitlist-form .choice:has(input:checked),
.fluentform .ff-el-form-check-radio .ff-el-form-check-label:has(input:checked) {
	border-color: var(--sage-deep);
	background: rgba(88, 117, 98, 0.1);
}

.waitlist-form .choice:has(input:focus-visible) {
	outline: 2px solid var(--sage-deep);
	outline-offset: 2px;
}

.fluentform .ff-el-form-check-radio {
	display: inline-block;
	margin: 0 0.5rem 0.5rem 0;
}

.fluentform .ff-el-form-check-radio .ff-el-form-check-label input {
	margin: 0;
}

.waitlist-form input[type="radio"],
.waitlist-form input[type="checkbox"],
.fluentform input[type="radio"],
.fluentform input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--sage-deep);
}

.waitlist-form .check,
.fluentform .ff-el-form-check-checkbox .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	color: var(--charcoal);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	cursor: pointer;
}

.waitlist-form .check input {
	flex: none;
	margin-top: 0.15rem;
}

.waitlist-form .btn--block {
	margin-top: var(--space-xs);
}

.waitlist-form .field-error,
.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
	display: block;
	margin-top: 0.35rem;
	color: #9c2a22;
	font-size: 0.85rem;
}

.waitlist-form .is-invalid,
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #9c2a22 !important;
}

/* Fluent Forms: submit button = the site's primary button; success message in the site's colours */
.fluentform {
	--fluentform-primary: var(--sage-deep);
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8rem 1.75rem;
	border: 2px solid var(--sage-deep) !important;
	border-radius: var(--radius-btn);
	background: var(--sage-deep) !important;
	color: var(--ivory) !important;
	font-family: var(--font-label);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 2px 8px rgba(52, 54, 50, 0.15);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.fluentform .ff_submit_btn_wrapper .ff-btn-submit {
	width: 100%;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:hover {
	background: var(--sage-deeper) !important;
	border-color: var(--sage-deeper) !important;
	box-shadow: 0 6px 16px rgba(52, 54, 50, 0.28);
	transform: translateY(-1px);
}

.fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid var(--sage-deep);
	outline-offset: 3px;
}

.fluentform .ff-t-container .ff-t-cell {
	padding: 0 0.5rem;
}

.fluentform .ff-message-success {
	padding: var(--space-md);
	border: 1px solid rgba(88, 117, 98, 0.4);
	border-radius: var(--radius);
	background: var(--sage-tint);
	color: var(--charcoal);
	box-shadow: none;
}

@media (min-width: 769px) {
	.waitlist-card {
		padding: 2.5rem;
	}
}

/* 13. Utilities & accessibility
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal !important;
}

.skip-link:focus {
	z-index: 1000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	border-radius: 8px;
	background: var(--ivory);
	color: var(--sage-text);
	box-shadow: var(--shadow-md);
}

.site-main:focus {
	outline: none;
}

.wp-caption-text,
.wp-element-caption {
	color: var(--text-muted);
	font-size: 0.88rem;
	text-align: center;
}

img.lazy {
	opacity: 0;
	transition: opacity 0.4s ease;
}

img.lazy.is-loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	html {
		scroll-behavior: auto;
	}
}

/* 13a. Scroll reveal (theme.js, section 7)
   Progressive enhancement: the hidden states only exist once theme.js has added .js-reveal to <html>, and only
   when the visitor has not asked for reduced motion. theme.js removes the animation class when it finishes,
   so the tiles' and cards' own hover transitions work as before. Only opacity and transform are animated.
   ========================================================================== */
@keyframes istrive-reveal-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes istrive-reveal-fade {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.js-reveal .reveal-up {
		opacity: 0;
		transform: translateY(12px);
	}

	.js-reveal .reveal-fade {
		opacity: 0;
	}

	.js-reveal .is-revealing-up {
		animation: istrive-reveal-up 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) both;
	}

	/* the branches keep their own transform (mirroring) and opacity; only the opacity fades in */
	.js-reveal .is-revealing-fade {
		animation: istrive-reveal-fade 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

/* Reduced motion: no hover lifts or arrow nudges either */
@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.btn--primary:hover,
	.card:hover,
	.service-card:hover,
	.service-card--link:focus-visible,
	.service-card--link:hover .service-card__arrow,
	.service-card--link:focus-visible .service-card__arrow,
	.condition-tile:hover,
	.condition-tile:focus-visible {
		transform: none;
	}
}

/* 13b. Mobile-only refinements (below 600px)
   ========================================================================== */

/* Line breaks that only apply on phones */
@media (min-width: 600px) {
	.br-mobile {
		display: none;
	}
}

/* Welcome heading: "Care That Fits / Your Life" on desktop, natural wrap on phones and tablets */
@media (max-width: 768px) {
	.about__title-br {
		display: none;
	}
}

/* Services intro: below 420px break after "care," (after "tailored" from 420px to 599px) */
@media (min-width: 420px) {
	.services-lead-br-xs {
		display: none;
	}
}

@media (max-width: 419px) {
	.services-lead-br-sm {
		display: none;
	}
}

/* Hero buttons and "Learn more about what we treat": a little smaller so they stay on one line on phones
   (the hero button still wrapped up to ~470px with the default size) */
@media (max-width: 479px) {
	.hero .btn-group .btn,
	.section-footer .btn {
		padding-right: 1rem;
		padding-left: 1rem;
		font-size: 0.8rem;
		letter-spacing: 0.03em;
	}
}

/* SPRAVATO eyebrow: one line from 420px; below that it breaks after "(ESKETAMINE)" */
@media (min-width: 420px) {
	.spravato-eyebrow-br {
		display: none;
	}
}

@media (max-width: 599px) {
	.hero__lead {
		text-wrap: balance;
	}

	/* "Feel better. Function better." stays on one line down to 360px */
	.about__quote {
		font-size: min(1.9rem, calc((100vw - 48px) * 0.084));
	}

	/* Provider button: a little tighter so it fits the card at 360px without wrapping */
	.provider__cta .btn {
		padding-right: 1rem;
		padding-left: 1rem;
		font-size: 0.8rem;
		letter-spacing: 0.03em;
	}

	.spravato .eyebrow {
		font-size: 15px;
		letter-spacing: 0.08em;
	}

	/* Services: compact cards, only as tall as their content; icon on the left, text on the right */
	.service-grid {
		grid-auto-rows: auto;
		gap: 12px;
	}

	.service-card {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
		padding: 20px;
		text-align: left;
	}

	.service-card__icon {
		grid-row: span 2;
		width: 48px;
		height: 48px;
	}

	.service-card__icon .icon {
		width: 22px;
		height: 22px;
	}

	.service-card__title {
		margin: 0 0 0.35rem;
	}

	.service-card--link {
		padding-bottom: 20px;
		padding-right: 44px; /* room for the corner arrow */
	}
}

/* 14. Breakpoints (mobile-first)
   ========================================================================== */

/* Large phones and up */
@media (min-width: 481px) {
	.container {
		padding: 0 var(--space-md);
	}

	.btn-group {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hero .btn-group {
		justify-content: center;
	}

	.card-grid--3,
	.card-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablets and up */
@media (min-width: 768px) {
	.service-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.conditions .section-lead {
		max-width: none;
		white-space: nowrap;
	}

	.condition-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-md);
	}

	.hero__lead {
		white-space: nowrap;
	}

	.hero__trust {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 0 var(--space-xl);
		width: fit-content;
		margin-top: 100px;
		background-size: 100% 1px;
	}

	.hero {
		min-height: max(600px, calc(80vh + 60px));
		padding-top: calc(var(--space-xl) + 40px);
		padding-bottom: calc(125px + var(--hero-wave-h) * 0.74);
	}

	.hero__trust li {
		white-space: nowrap;
	}
}

@media (min-width: 769px) {
	.image-band__br {
		display: inline;
	}

	.image-band {
		--band-wave-h: 64px;
		min-height: 420px;
	}

	.section.conditions {
		padding: 4.5rem 0 5.75rem;
	}

	.section.services {
		padding-bottom: 115px; /* desktop: space between the cards and the divider into SPRAVATO */
	}

	.section.about {
		padding-top: calc(var(--hero-wave-h) * 0.621 + 110px);
	}

	.about__pullquote {
		margin-top: calc(0.75rem * 1.7 + var(--space-xs)); /* height of the eyebrow, so the quote starts level with the headline */
	}
	.section {
		padding: var(--space-2xl) 0;
	}

	.site-main > .section:last-child {
		padding-bottom: calc(var(--space-2xl) + var(--footer-wave-h));
	}

	.section--tight {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}

	.admin-bar .site-header {
		top: 31px;
	}

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

	.about__grid {
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-xl);
	}

	.spravato__inner {
		grid-template-columns: 11fr 9fr;
		gap: 3.5rem;
	}

	.spravato__media {
		order: 0;
		margin: 0;
	}

	/* both buttons side by side under the text: slightly tighter than the default button */
	.spravato .btn-group {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
	}

	.spravato .btn-group .btn {
		padding-right: 1.05rem;
		padding-left: 1.05rem;
		font-size: 0.8rem;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	.section.spravato {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	.provider__card {
		grid-template-columns: 2fr 3fr;
	}

	/* Photo fills the column but no longer sets the card height; the text does. */
	.provider__media {
		position: relative;
		min-height: 100%;
	}

	.provider__photo {
		position: absolute;
		inset: 0;
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
	}

	/* Head-and-shoulders crop: scale the photo so the frame ends around the shoulders (about 68% down
	   the photo), but never so far that the hat brim (5-88% of the photo width) leaves the frame. */
	@supports (container-type: size) {
		.provider__media {
			overflow: hidden;
			container-type: size;
		}

		.provider__photo {
			--photo-w: clamp(max(100cqw, 69.3cqh), 102cqh, max(116cqw, 69.3cqh));
			inset: 0 auto auto clamp(100cqw - var(--photo-w), 50cqw - 0.465 * var(--photo-w), 0px);
			width: var(--photo-w);
			max-width: none;
			height: auto;
			object-fit: fill;
		}
	}

	.provider__info {
		padding: var(--space-xl) var(--space-lg);
	}

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

	/* Areas of Focus spans the text column; Treatment Approach and Service Delivery sit side by side below. */
	.provider__details > div:first-child {
		grid-column: 1 / -1;
	}

	.single-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		align-items: start;
	}

	.sidebar-cta {
		position: sticky;
		top: calc(var(--header-height) + 24px);
	}

	.site-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}

	.site-footer__grid--3 {
		grid-template-columns: 1.6fr 1fr 1fr;
	}
}

/* Desktop: 4-column grids */
@media (min-width: 1100px) {
	.condition-grid {
		grid-template-columns: repeat(4, 1fr);
	}

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

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

}

/* Full horizontal navigation (the six-item menu plus the button needs about 1210px) */
@media (min-width: 1220px) {
	.nav-toggle {
		display: none;
	}

	.primary-nav,
	.no-js .primary-nav {
		display: flex;
		position: static;
		align-items: center;
		gap: var(--space-md);
		max-height: none;
		overflow: visible;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.primary-nav > ul {
		display: flex;
		gap: 0.25rem;
	}

	.primary-nav a {
		padding: 0.5rem 0.4rem;
		font-size: 0.78rem;
		letter-spacing: 0.05em;
		white-space: nowrap;
	}

	/* Dropdowns */
	.primary-nav li {
		position: relative;
	}

	.primary-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		padding: 0.5rem;
		border: 1px solid var(--border-color);
		border-radius: 10px;
		background: var(--ivory);
		box-shadow: var(--shadow-md);
	}

	.primary-nav li:hover > .sub-menu,
	.primary-nav li:focus-within > .sub-menu {
		display: block;
	}

	.primary-nav__cta {
		margin: 0;
	}

	.primary-nav__cta .btn {
		width: auto;
	}
}