/* ==========================================================================
   Design tokens — see DESIGN.md
   ========================================================================== */

:root {
	/* Colour */
	--pink: #D4317A;
	--pink-hover: #b8266a;
	--pink-soft: #f3dfe8;
	--ink-900: #1A1A1A;
	--ink-700: #444444;
	--ink-500: #6b6b6b;
	--ink-300: #a8a8a8;
	--white: #FFFFFF;
	--teal-500: #6fb3ad;
	--teal-300: #A9D8D4;
	--teal-150: #d6ebe9;
	--teal-050: #eef7f6;
	--border-hairline: #e2ecea;
	--border-strong: #c9dedb;
	--success: #5b7a52;
	--error: #a8323c;
	--info: #6b6b6b;
	--focus-ring: rgba(212, 49, 122, .35);

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 56px;
	--space-9: 80px;
	--space-10: 120px;
	--container-width: 1100px;
	--measure: 520px;
	--measure-wide: 680px;

	/* Shadow */
	--shadow-resting: 0 1px 3px rgba(26, 26, 26, .05);
	--shadow-hover: 0 12px 32px rgba(26, 26, 26, .08);
	--shadow-overlay: 0 24px 60px rgba(26, 26, 26, .16);
	--scrim: rgba(26, 26, 26, .55);

	/* Motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.85;
	color: var(--ink-700);
	background: var(--white);
}

img { max-width: 100%; display: block; }

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); }

h1, h2, h3, h4 {
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.35;
	color: var(--ink-900);
	margin: 0 0 var(--space-4);
}

/* Headings are never bold. Bold markup inside one (a common editing slip) must
   not change its weight; inc/headings.php also strips the tags from content. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
	font-weight: inherit;
}

h1 { font-size: clamp(28px, 3.6vw, 46px); }
h2 { font-size: clamp(22px, 2.6vw, 32px); }
h3 { font-size: 17px; }

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

.body-lg { font-size: 17px; }
.body-small { font-size: 13px; }

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: none;
	border-color: var(--pink);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-5);
}

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

/* ==========================================================================
   Eyebrow
   ========================================================================== */

.eyebrow {
	display: block;
	font-family: 'Jost', sans-serif;
	font-weight: 300;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--pink);
	margin-bottom: var(--space-3);
}

/* ==========================================================================
   Divider
   ========================================================================== */

.divider {
	width: 40px;
	height: 1px;
	border: none;
	background: var(--pink);
	margin: var(--space-5) 0;
}

.divider--secondary { background: var(--teal-500); }
.divider--hairline { background: var(--border-hairline); }

/* ==========================================================================
   Pull-quote
   ========================================================================== */

.pull-quote {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(24px, 3.4vw, 40px);
	color: var(--ink-900);
	line-height: 1.4;
	margin: 0 0 var(--space-4);
}

.pull-quote__source {
	font-family: 'Jost', sans-serif;
	font-style: normal;
	font-size: 13px;
	color: var(--ink-500);
}

.pull-quote__link {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: var(--space-2);
}

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

.btn {
	display: inline-block;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: var(--space-4) var(--space-6);
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	background: none;
	transition: background-color var(--duration-base) var(--ease),
		color var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease),
		transform var(--duration-base) var(--ease);
}

.btn-primary {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}
.btn-primary:hover {
	background: var(--pink-hover);
	border-color: var(--pink-hover);
	color: var(--white);
	transform: translateY(-1px);
}
.btn-primary:active { background: var(--pink-hover); transform: none; }

.btn-secondary {
	background: transparent;
	border-color: var(--pink);
	color: var(--pink);
}
.btn-secondary:hover { background: var(--pink); color: var(--white); }
.btn-secondary:active { background: var(--pink-hover); border-color: var(--pink-hover); }

.btn-ghost {
	background: transparent;
	border-color: var(--ink-300);
	color: var(--ink-700);
}
.btn-ghost:hover { border-color: var(--ink-700); }

.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   Card
   ========================================================================== */

.card {
	background: var(--white);
	border: 1px solid var(--border-hairline);
	border-radius: 0;
	box-shadow: var(--shadow-resting);
	padding: var(--space-6);
	transition: box-shadow var(--duration-slow) var(--ease),
		transform var(--duration-slow) var(--ease);
}

.card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.card--block {
	background: var(--teal-300);
	border: none;
	box-shadow: none;
}
.card--block:hover { box-shadow: none; transform: none; }

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-5);
	max-width: var(--container-width);
	margin: 0 auto;
}

.site-header__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
}

.header-cta {
	padding: var(--space-3) var(--space-5);
	white-space: nowrap;
}

.brand-lockup {
	display: flex;
	align-items: center;
}

.brand-lockup__img {
	display: block;
	height: 56px;
	width: auto;
}

.primary-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	position: relative;
}

.primary-nav li { position: relative; }

.primary-nav a {
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-700);
	padding: var(--space-2) 0;
}
.primary-nav a:hover { color: var(--pink); }

.primary-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border-hairline);
	box-shadow: var(--shadow-hover);
	padding: var(--space-3) 0;
	min-width: 220px;
	gap: 0;
	z-index: 10;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: flex; }
.primary-nav .sub-menu a { padding: var(--space-2) var(--space-5); }

/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
	background: var(--ink-900);
	color: var(--white);
	padding: var(--space-8) 0 var(--space-5);
}

.site-footer .container {
	display: block;
}

.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--teal-300); }

.footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
	margin-bottom: var(--space-7);
}

.footer-col .eyebrow {
	color: var(--teal-300);
	margin-bottom: var(--space-4);
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col li { margin-bottom: var(--space-3); }

.footer-col a {
	font-size: 13px;
	line-height: 1.5;
}

.footer-contact { font-size: 13px; }
.footer-contact p { margin: 0 0 var(--space-2); }

.footer-social {
	list-style: none;
	display: flex;
	gap: var(--space-4);
	margin: var(--space-4) 0 0 !important;
	padding: 0;
}
.footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-social svg {
	width: 20px;
	height: 20px;
}
.footer-social a:hover svg { color: var(--teal-300); }

/* Trustindex badge under the social icons. The widget centres itself
   when the column goes full-width on mobile; keep it left-aligned with
   the rest of the column. */
.footer-reviews-badge { margin-top: var(--space-5); }
.footer-reviews-badge .ti-widget .ti-widget-container {
	text-align: left !important;
	justify-content: flex-start !important;
}

.footer-trust {
	text-align: center;
	margin-bottom: var(--space-6);
}
.footer-trust img {
	max-width: 480px;
	width: 100%;
	height: auto;
	background: var(--white);
	padding: var(--space-4) var(--space-5);
}

.site-info {
	font-size: 13px;
	color: var(--ink-300);
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 800px) {
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
	.footer-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home — full-bleed hero banner
   ========================================================================== */

.hero-banner {
	position: relative;
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 460px;
	padding: var(--space-9) var(--space-5);
}

.hero-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, .65);
}

.hero-banner__content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: var(--measure-wide);
}

.hero-banner__heading {
	font-family: 'Jost', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.35;
	font-size: clamp(28px, 3.6vw, 46px);
	color: var(--white);
	margin: 0 0 var(--space-4);
}

.hero-banner__tagline {
	font-size: 17px;
	font-weight: 300;
	color: var(--white);
	margin: 0 0 var(--space-6);
	text-wrap: balance;
}

.hero-banner__nowrap { white-space: nowrap; }

.hero-banner__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-3);
}

/* Same small-pill recipe as .testimonial-card__badge, reused here so the
   hero doesn't introduce a second badge style. */
.hero-banner__badge {
	background: var(--teal-300);
	color: var(--ink-900);
	font-family: 'Jost', sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: var(--space-1) var(--space-2);
}

@media (max-width: 600px) {
	.hero-banner { min-height: 380px; }
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-items: center;
	padding: var(--space-9) 0;
}

.hero__photo {
	aspect-ratio: 4 / 5;
	background: var(--teal-050);
	border: 1px solid var(--border-hairline);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-500);
	font-size: 13px;
	text-align: center;
	overflow: hidden;
}

.hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.cta-lead-in {
	font-size: 13px;
	color: var(--ink-500);
	margin: var(--space-6) 0 0;
}

.hero__cta { margin: var(--space-4) 0 0; }

.hero__intro {
	color: var(--ink-700);
	margin: var(--space-5) 0 var(--space-6);
}

.hero__testimonial {
	border-top: 1px solid var(--border-hairline);
	padding-top: var(--space-6);
}

@media (max-width: 800px) {
	.hero { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home — intro / how it works
   ========================================================================== */

.section-divider {
	width: 100%;
	height: 1px;
	border: none;
	background: var(--teal-500);
	opacity: .5;
	margin: 0;
}

.intro-section {
	text-align: center;
	padding: var(--space-9) 0;
}

.intro-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 300;
	font-size: clamp(17px, 2.1vw, 22px);
	color: var(--ink-700);
	margin: 0 0 var(--space-5);
}

.intro-kicker__line {
	flex: 1 1 50px;
	max-width: 70px;
	height: 1px;
	background: var(--teal-500);
}

@media (max-width: 500px) {
	.intro-kicker { gap: var(--space-3); }
	.intro-kicker__line { max-width: 28px; }
}

.intro-lead {
	max-width: var(--measure-wide);
	margin: 0 auto;
	color: var(--ink-700);
}

.how-it-works {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-7);
	margin-top: var(--space-8);
	text-align: center;
}

.how-it-works__step svg {
	width: 32px;
	height: 32px;
	color: var(--pink);
	margin-bottom: var(--space-4);
}

.how-it-works__step h3 {
	font-size: 17px;
	margin-bottom: var(--space-2);
}

.how-it-works__step p {
	font-size: 14px;
	color: var(--ink-500);
	max-width: 280px;
	margin: 0 auto;
}

@media (max-width: 700px) {
	.how-it-works { grid-template-columns: 1fr; gap: var(--space-6); }
}

.section-lead-in {
	text-align: center;
	font-family: 'Jost', sans-serif;
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pink);
	margin: 0 0 var(--space-3);
}

.section-lead-in-wrap {
	text-align: center;
}
.section-lead-in-wrap .divider {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   Home — condition tiles
   ========================================================================== */

.condition-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	padding: 0 0 var(--space-9);
}

/* Same small, muted line as .cta-lead-in — reused here rather than a new style. */
.section-fallback-note {
	text-align: center;
	font-size: 13px;
	color: var(--ink-500);
	margin: 0 0 var(--space-7);
}

.condition-tile {
	display: block;
	text-align: center;
	padding: var(--space-5) var(--space-4);
	transition: box-shadow var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}

.condition-tile:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.condition-tile__icon {
	width: 22px;
	height: 22px;
	color: var(--ink-900);
	margin: 0 auto var(--space-2);
	transition: color var(--duration-base) var(--ease);
}

.condition-tile h3 {
	margin: 0;
	font-size: 16px;
	color: var(--ink-900);
	transition: color var(--duration-base) var(--ease);
}

.condition-tile__desc {
	font-size: 13px;
	color: var(--ink-700);
	margin: var(--space-1) 0 0;
}

.condition-tile__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--pink);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.condition-tile__more svg {
	width: 14px;
	height: 14px;
}

.condition-tile:hover .condition-tile__icon,
.condition-tile:hover h3 {
	color: var(--pink);
}
.condition-tile:hover .condition-tile__more {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 900px) {
	.condition-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
	.condition-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home — lead magnet
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.lead-magnet {
	background: var(--white);
	padding: var(--space-8) 0;
	margin: var(--space-9) 0;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-7);
	align-items: center;
}

.lead-magnet__text h2 { margin-bottom: var(--space-3); }
.lead-magnet__text p { margin-bottom: 0; }

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

/* Kit's own error list — same recipe as .contact-form__errors, empty (and
   hidden) until its JS fills it in after a failed submission. */
.lead-magnet__form .formkit-alert-error,
.guide-form .formkit-alert-error {
	list-style: none;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	background: rgba(168, 50, 60, .08);
	border: 1px solid var(--error);
	color: var(--error);
	font-size: 13px;
}
.lead-magnet__form .formkit-alert-error:empty,
.guide-form .formkit-alert-error:empty { display: none; }

.lead-magnet__form .formkit-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.lead-magnet__guarantee {
	font-size: 13px;
	color: var(--ink-500);
	margin: 0;
}

.formkit-powered-by-convertkit-container { margin: 0; }
.formkit-powered-by-convertkit { font-size: 11px; color: var(--ink-500); }
.formkit-powered-by-convertkit:hover { color: var(--pink); }

.lead-magnet__form input[type="email"],
.guide-form input[type="text"],
.guide-form input[type="email"] {
	flex: 1 1 220px;
	padding: var(--space-4);
	border: 1px solid var(--ink-300);
	border-radius: 0;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	color: var(--ink-700);
	background: var(--white);
}

.lead-magnet__form input[type="email"]::placeholder,
.guide-form input::placeholder { color: var(--ink-500); }

.lead-magnet__form input[type="email"]:focus-visible,
.guide-form input:focus-visible {
	border-color: var(--pink);
}

@media (max-width: 800px) {
	.lead-magnet { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home — testimonials preview
   ========================================================================== */

.home-testimonials {
	text-align: center;
	padding: var(--space-9) 0;
}

.testimonial-carousel {
	max-width: var(--measure-wide);
	margin: var(--space-6) auto var(--space-7);
}

/* Heading above the Trustindex widget. .section-divider has zero margin
   of its own, so this top margin is what creates the divider-to-heading
   gap; the bottom margin matches the default h2 rhythm used elsewhere. */
.trustindex-heading {
	text-align: center;
	margin: var(--space-6) 0 var(--space-4);
}

/* Trustindex widget container — intentionally unstyled beyond spacing;
   the widget renders its own look. Remove this whole block (plus the
   heading above it and the <div class="trustindex-widget"> in
   front-page.php) to pull it back out. */
.trustindex-widget {
	text-align: center;
	margin: 0 0 var(--space-7);
}

/* Slides share one grid cell so the track is as tall as the longest quote
   and nothing jumps when the active slide changes. Without JS every slide
   simply stacks; main.js adds .is-enhanced to switch to the fading carousel. */
.testimonial-carousel__track {
	display: grid;
}

.testimonial-carousel__slide {
	grid-area: 1 / 1;
	margin: 0 0 var(--space-6);
	padding: 0 var(--space-4);
	text-align: center;
}

.testimonial-carousel__slide p {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 300;
	font-size: 26px;
	line-height: 1.45;
	color: var(--ink-900);
	margin: 0;
}

.testimonial-carousel__slide .testimonial__source {
	margin-top: var(--space-5);
}

.testimonial-carousel.is-enhanced .testimonial-carousel__slide {
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-slow) var(--ease), visibility 0s linear var(--duration-slow);
}

.testimonial-carousel.is-enhanced .testimonial-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.testimonial-carousel:not(.is-enhanced) .testimonial-carousel__slide {
	grid-area: auto;
}

.testimonial-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.testimonial-carousel__controls[hidden] { display: none; }

.testimonial-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: 0;
	background: none;
	color: var(--ink-700);
	cursor: pointer;
	transition: border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

.testimonial-carousel__btn:hover { border-color: var(--pink); color: var(--pink); }

.testimonial-carousel__btn svg { width: 18px; height: 18px; }

.testimonial-carousel__toggle { margin-left: var(--space-3); }
.testimonial-carousel__toggle .icon-play { display: none; }
.testimonial-carousel__toggle.is-paused .icon-play { display: block; }
.testimonial-carousel__toggle.is-paused .icon-pause { display: none; }

.testimonial-carousel__dots {
	display: flex;
	align-items: center;
}

/* 24px hit area around an 8px dot. */
.testimonial-carousel__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.testimonial-carousel__dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border: 1px solid var(--ink-500);
	border-radius: 50%;
	transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}

.testimonial-carousel__dot:hover::before { border-color: var(--pink); }

.testimonial-carousel__dot.is-active::before {
	background: var(--pink);
	border-color: var(--pink);
}

@media (max-width: 700px) {
	.testimonial-carousel__slide p { font-size: 22px; }
	.testimonial-carousel__dot { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.testimonial-carousel.is-enhanced .testimonial-carousel__slide { transition: none; }
}

/* ==========================================================================
   Consultation page
   ========================================================================== */

/* Vertical padding only, so .container keeps its side gutter on mobile. */
.consultation-page { padding-top: var(--space-9); padding-bottom: var(--space-9); }

.consultation-intro {
	max-width: var(--measure-wide);
	margin: 0 auto var(--space-8);
	text-align: center;
}
.consultation-intro h1 { margin-bottom: var(--space-4); }

/* First Consultation / Follow-up sub-sections from the page content.
   The intro is centred; headings and bullets are left-aligned within it
   so the lists stay readable. */
.consultation-intro h3,
.consultation-intro ul { text-align: left; }
.consultation-intro h3 { margin: var(--space-6) 0 var(--space-3); }
.consultation-intro ul {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
}
.consultation-intro li { margin-bottom: var(--space-2); }
.consultation-intro li::marker { color: var(--pink); }
.consultation-intro .body-small { margin-top: var(--space-6); }

.consultation-pricing {
	max-width: var(--container-width);
	margin: 0 auto var(--space-9);
	text-align: center;
}
.consultation-pricing h2 { margin-bottom: var(--space-3); }

.pricing-free-note {
	font-size: 15px;
	color: var(--ink-700);
	margin-bottom: var(--space-7);
}

.pricing-tiers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
	text-align: left;
}

.pricing-tiers .price-card {
	flex: 1 1 280px;
	max-width: 320px;
}

@media (max-width: 800px) {
	.pricing-tiers .price-card { flex: 1 1 100%; max-width: 400px; }
}

/* PriceCard — pink heading + price on teal panel + pink CTA (DESIGN.md) */
.price-card {
	background: var(--teal-300);
	border: none;
	padding: var(--space-7) var(--space-6);
	text-align: center;
	display: flex;
	flex-direction: column;
}
.price-card h3 { color: var(--pink); margin-bottom: var(--space-5); }
.price-card__rate {
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	color: var(--ink-900);
	margin-bottom: var(--space-2);
}
.price-card__rate.small {
	font-size: 13px;
	color: var(--ink-700);
	margin-bottom: var(--space-4);
}
.price-card__duration {
	font-size: 13px;
	color: var(--ink-700);
}
.price-card .btn { margin-top: auto; align-self: center; }
.price-card__rate:last-of-type { margin-bottom: var(--space-5); }

/* ==========================================================================
   Book Now page
   ========================================================================== */

.book-now-page { padding: var(--space-9) 0; text-align: center; }
.book-now-page .eyebrow { display: block; }
.book-now-page h1 { margin-bottom: var(--space-6); }

.acuity-embed {
	margin-top: var(--space-6);
	border: 1px solid var(--border-hairline);
	text-align: left;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-page .eyebrow { text-align: center; display: block; }
.contact-page h1 { text-align: center; }

.contact-form { margin: var(--space-7) 0; }

.contact-form__field { margin-bottom: var(--space-5); }

.contact-form__field label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-500);
	margin-bottom: var(--space-2);
}

.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	padding: var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	color: var(--ink-700);
	background: var(--white);
}

.contact-form__field textarea { resize: vertical; }

.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__success {
	background: var(--teal-050);
	border: 1px solid var(--border-hairline);
	padding: var(--space-5);
	color: var(--ink-900);
}

.contact-form__errors {
	background: rgba(168, 50, 60, .08);
	border: 1px solid var(--error);
	color: var(--error);
	padding: var(--space-4) var(--space-5);
	margin: 0 0 var(--space-5);
}

.contact-direct {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border-hairline);
	text-align: center;
	font-size: 13px;
	color: var(--ink-500);
}

/* ==========================================================================
   Treatment landing pages
   ========================================================================== */

.treatment-page .eyebrow { display: block; text-align: center; }
.treatment-page h1 { text-align: center; margin-bottom: var(--space-6); }

.treatment-cta-block {
	text-align: center;
	padding: var(--space-7);
	margin: var(--space-8) 0 var(--space-6);
}
.treatment-cta-block h3 { margin-bottom: var(--space-3); }
.treatment-cta-block p { margin-bottom: var(--space-5); }

.treatment-cta {
	text-align: center;
	padding: var(--space-6) 0 var(--space-8);
}
.treatment-cta p {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-500);
	margin-bottom: var(--space-4);
}

.treatment-index {
	list-style: none;
	padding: 0;
	margin: var(--space-6) 0 0;
}
.treatment-index li {
	border-bottom: 1px solid var(--border-hairline);
}
.treatment-index a {
	display: block;
	padding: var(--space-4) 0;
	color: var(--ink-900);
	font-family: 'Jost', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.treatment-index a:hover { color: var(--pink); }

/* ==========================================================================
   Page content (About, etc.)
   ========================================================================== */

.content-area {
	max-width: var(--measure-wide);
	margin: 0 auto;
	padding: var(--space-9) var(--space-5);
}

.credentials-line {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ink-500);
	margin: 0;
}

.supporting-line {
	font-size: 17px;
	font-weight: 300;
	color: var(--ink-700);
	margin: 0 0 var(--space-2);
}

.content-area .page-intro {
	font-size: 17px;
	color: var(--ink-500);
}

.conditions-list {
	columns: 2;
	column-gap: var(--space-6);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-6);
}

.conditions-list li {
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--border-hairline);
	break-inside: avoid;
}

@media (max-width: 500px) {
	.conditions-list { columns: 1; }
}

/* ==========================================================================
   Long-form pages (Women's Health): intro, cards, steps, FAQ, byline
   Scoped to .long-form so other pages keep their current styling.
   ========================================================================== */

/* Page-level readability overrides (body/H2 values are global in this theme;
   see DESIGN.md). Kept here so other pages are untouched. */
.long-form {
	--long-form-ink: #333333;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--long-form-ink);
}

.long-form .page-intro {
	font-size: 18px;
	color: var(--long-form-ink);
}

/* Section headings: H2 is roughly 64% of the H1 (46px max vs 29px), with one
   consistent gap above every section. */
.long-form h2 {
	margin-top: var(--space-9);
	font-size: clamp(19px, 2.3vw, 29px);
	letter-spacing: 0.06em;
}

.long-form p a { text-decoration: underline; text-underline-offset: 2px; }

/* WordPress wraps hidden TODO comments in empty paragraphs. */
.long-form p:empty { display: none; }

/* Intro: text left, portrait right; the photo stacks below the text on phones. */
.intro-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
	gap: var(--space-6);
	align-items: start;
}

.intro-split__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}

/* Buttons are centred throughout (the CTA card centres its own content). */
.long-form .treatment-cta {
	padding: var(--space-5) 0 var(--space-2);
	text-align: center;
}

.long-form .section-intro { margin-bottom: var(--space-6); }

/* Cards: wider than the 680px text measure (1100px container, centred). */
.help-grid {
	position: relative;
	left: 50%;
	width: min(var(--container-width), calc(100vw - var(--space-8)));
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

.help-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	background: var(--white);
	border: 1px solid var(--border-strong);
}

.long-form .help-card h3 {
	margin: 0 0 var(--space-3);
	font-size: 15px;
	letter-spacing: 0.05em;
}

.help-card p { font-size: 16px; }

.help-card .help-card__info,
.help-card .help-card__more {
	margin: auto 0 0;
	padding-top: var(--space-3);
	font-size: 13px;
	color: var(--ink-500);
}

.help-card__more + .help-card__info { margin-top: 0; }

.help-card > p:not(.help-card__info):not(.help-card__more):last-child { margin-bottom: 0; }

.help-card--cta {
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--white);
}

.long-form .help-card--cta h3 { color: var(--white); }

.help-card--cta p { color: var(--white); margin-bottom: var(--space-5); }

.help-card--cta .btn { align-self: center; }

.steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: var(--space-5) 0;
	border-top: 1px solid var(--border-hairline);
}

.steps li {
	counter-increment: step;
	position: relative;
	padding: var(--space-4) 0 var(--space-4) var(--space-8);
	border-bottom: 1px solid var(--border-hairline);
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: var(--space-4);
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--pink);
}

/* FAQ: same gap below its heading as the steps, and a full section gap after. */
.faq {
	margin: var(--space-5) 0 var(--space-9);
	border-top: 1px solid var(--border-hairline);
}

.faq details { border-bottom: 1px solid var(--border-hairline); }

.faq summary {
	position: relative;
	padding: var(--space-4) var(--space-7) var(--space-4) 0;
	cursor: pointer;
	list-style: none;
	font-weight: 400;
	color: var(--ink-900);
	transition: color var(--duration-fast) var(--ease);
}

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

.faq summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: var(--space-4);
	color: var(--pink);
}

.faq details[open] summary::after { content: '\2212'; }

.faq summary:hover { color: var(--pink); }

.faq summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.faq details p {
	margin: 0 0 var(--space-4);
	padding-right: var(--space-7);
}

/* Byline: the date comes from WordPress's Post Modified Date block. */
.page-byline {
	margin: var(--space-8) 0 0;
	font-size: 14px;
	color: var(--ink-500);
}

/* Keep the paragraph and the date block on one flowing line of text. */
.page-byline p,
.page-byline .wp-block-post-date {
	display: inline;
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.page-byline .wp-block-post-date::after { content: '.'; }

.page-disclaimer {
	margin: var(--space-6) 0 0;
	font-size: 13px;
	color: var(--ink-500);
}

.page-byline + .page-disclaimer { margin-top: var(--space-3); }

@media (max-width: 900px) {
	.help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.help-grid { grid-template-columns: 1fr; }
	.intro-split { grid-template-columns: 1fr; }
	.intro-split__photo { max-width: 320px; }
}

/* Mobile-only fixed booking button. On phones it replaces the closing button
   (so there is only ever one at the bottom); the body padding stops it
   covering the footer. There is no cookie banner in the theme. */
.sticky-cta { display: none; }

@media (max-width: 600px) {
	.long-form .treatment-cta--end { display: none; }

	.sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		padding: var(--space-3) var(--space-4);
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--border-hairline);
	}

	.sticky-cta .btn { display: block; text-align: center; }

	body:has(.sticky-cta) { padding-bottom: 76px; }
}

/* ==========================================================================
   Qualifications page (reuses .long-form and .treatment-cta)
   ========================================================================== */

/* Sections built but not ready to show (missing content) use the hidden attribute. */
.long-form [hidden] { display: none !important; }

.qual-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
	margin: var(--space-5) 0 0;
}

.qual-card {
	padding: var(--space-5);
	background: var(--teal-050);
	border: 1px solid var(--border-hairline);
}

.qual-card__label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--pink);
}

/* Qualification titles keep their proper case ("BSc", not "BSC"). */
.long-form .qual-card h3 {
	margin: 0 0 var(--space-3);
	font-size: 17px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.qual-card p { margin: 0; font-size: 16px; }

/* Key to the letters: one line per item. */
.key {
	margin: var(--space-5) 0 0;
	border-top: 1px solid var(--border-hairline);
}

.key > div {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border-hairline);
}

.key dt { font-weight: 400; color: var(--ink-900); }

.key dd { margin: 0; }

.reg-links {
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0 0;
}

.reg-links li { padding: var(--space-1) 0; }

/* A quiet reference, not a banner. */
.reg-logos {
	max-width: 300px;
	margin: var(--space-5) 0 0;
}

.reg-logos img { width: 100%; height: auto; }

.training-list { margin: 0 0 var(--space-4); padding-left: var(--space-5); }

.small-note {
	font-size: 14px;
	color: var(--ink-500);
}

.practical {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
	list-style: none;
	padding: 0;
	margin: var(--space-5) 0 var(--space-7);
}

.practical li {
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-strong);
	font-size: 15px;
}

.practical strong {
	display: block;
	margin-bottom: var(--space-1);
	font-weight: 400;
	color: var(--ink-900);
}

.next-links {
	text-align: center;
	font-size: 14px;
	color: var(--ink-500);
}

/* Room around the closing button and the small links beneath it. */
.long-form .treatment-cta + .next-links { margin-top: var(--space-7); }

.next-links + .next-links { margin-top: var(--space-4); }

@media (max-width: 600px) {
	.qual-grid,
	.practical { grid-template-columns: 1fr; }
	.key > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ==========================================================================
   Blog
   ========================================================================== */

.blog-header {
	padding: var(--space-9) 0 var(--space-6);
	text-align: center;
}

/* Controls: filter pills + search */

.blog-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding-bottom: var(--space-7);
	border-bottom: 1px solid var(--border-hairline);
	margin-bottom: var(--space-7);
}

.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.blog-filter {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border-strong);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-700);
	transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.blog-filter:hover { border-color: var(--pink); color: var(--pink); }
.blog-filter.is-active {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

.blog-search {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-strong);
}
.blog-search input[type="search"] {
	border: none;
	padding: var(--space-3) var(--space-4);
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	color: var(--ink-700);
	width: 200px;
	background: transparent;
}
.blog-search input[type="search"]:focus { outline: none; }
.blog-search button {
	background: none;
	border: none;
	border-left: 1px solid var(--border-strong);
	padding: var(--space-3) var(--space-4);
	color: var(--ink-700);
	cursor: pointer;
	display: flex;
	align-items: center;
}
.blog-search button svg { width: 16px; height: 16px; }
.blog-search button:hover { color: var(--pink); }

.blog-search-results-for {
	margin-bottom: var(--space-6);
	color: var(--ink-500);
}

/* Featured post */

.featured-post {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--border-hairline);
	color: var(--ink-700);
}

.featured-post__media { aspect-ratio: 4 / 3; overflow: hidden; }
.featured-post__media img,
.featured-post__media .card-placeholder { width: 100%; height: 100%; }
.featured-post__media img { object-fit: cover; }

.featured-post__content h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	margin: var(--space-3) 0 var(--space-4);
}
.featured-post__content:hover h2,
.featured-post:hover h2 { color: var(--pink); }

@media (max-width: 800px) {
	.featured-post { grid-template-columns: 1fr; }
}

/* Card placeholder (no featured image yet) */

.card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--teal-300);
	color: var(--ink-900);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	padding: var(--space-4);
}

/* Card grid */

.blog-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding-bottom: var(--space-8);
}

.blog-card {
	border: 1px solid var(--border-hairline);
	box-shadow: var(--shadow-resting);
	transition: box-shadow var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.blog-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.blog-card__link {
	display: block;
	color: var(--ink-700);
}
.blog-card__link:hover h2 { color: var(--pink); }

.blog-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card__body { padding: var(--space-5); }

.blog-card__date {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-500);
	margin-bottom: var(--space-3);
}

.blog-card h2 {
	font-size: 18px;
	margin-bottom: var(--space-2);
}

.blog-card__body p { font-size: 14px; margin-bottom: 0; }

.blog-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--pink);
	margin-top: var(--space-3);
}
.blog-card__more svg,
.featured-post .blog-card__more svg { width: 14px; height: 14px; }

.blog-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-6) 0;
}
.blog-pagination a,
.blog-pagination span {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	border: 1px solid var(--border-hairline);
}
.blog-pagination .current { background: var(--pink); color: var(--white); border-color: var(--pink); }
.blog-pagination a:hover { border-color: var(--pink); color: var(--pink); }

@media (max-width: 900px) {
	.blog-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.blog-controls { flex-direction: column; align-items: stretch; }
	.blog-search input[type="search"] { width: 100%; flex: 1; }
	.blog-list { grid-template-columns: 1fr; }
}

.back-to-blog {
	margin-top: var(--space-8);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* Single post: heading + featured image */

.entry-title {
	font-size: clamp(22px, 2.6vw, 32px);
}

.post-featured-image {
	margin: var(--space-6) 0;
}

.post-featured-image img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial {
	margin: 0 0 var(--space-6);
	padding: var(--space-5) 0 var(--space-5) var(--space-5);
	border-left: 1px solid var(--border-hairline);
}

.testimonial p {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.5;
	color: var(--ink-900);
	margin: 0 0 var(--space-3);
}

.testimonial--long p { font-size: 18px; }

.testimonial__source {
	display: block;
	font-family: 'Jost', sans-serif;
	font-style: normal;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-500);
	margin-top: var(--space-3);
}

/* Testimonials page — filterable grid */

.testimonials-page { padding: var(--space-9) 0; }

.testimonials-intro {
	max-width: var(--measure-wide);
	margin: 0 auto var(--space-7);
	text-align: center;
}
.testimonials-intro .eyebrow { display: block; }
.testimonials-intro h1 { margin-bottom: var(--space-4); }

.testimonial-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.testimonial-filter {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	background: none;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ink-700);
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.testimonial-filter:hover { border-color: var(--pink); color: var(--pink); }
.testimonial-filter.is-active {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding-bottom: var(--space-7);
}

.testimonial-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.testimonial-card[hidden] {
	display: none;
}

.testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: 0;
	left: var(--space-3);
	font-family: 'Cormorant Garamond', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 96px;
	line-height: 1;
	color: var(--teal-150);
	z-index: 0;
	pointer-events: none;
}

.testimonial-card__badge,
.testimonial-card .testimonial {
	position: relative;
	z-index: 1;
}

.testimonial-card .testimonial {
	margin: 0;
	padding: 0;
	border-left: none;
}

.testimonial-card__badge {
	display: inline-block;
	align-self: flex-end;
	margin-bottom: var(--space-4);
	background: var(--teal-300);
	color: var(--ink-900);
	font-family: 'Jost', sans-serif;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	padding: var(--space-1) var(--space-2);
}

.testimonial-load-more-wrap {
	text-align: center;
	margin: 0 0 var(--space-6);
}

@media (max-width: 900px) {
	.testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.testimonial-filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin-left: calc(var(--space-5) * -1);
		margin-right: calc(var(--space-5) * -1);
		padding: 0 var(--space-5) var(--space-2);
	}
	.testimonial-filter { flex: 0 0 auto; }
	.testimonial-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Free thyroid guide — landing + thank-you
   ========================================================================== */

.guide-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-items: center;
	padding: var(--space-9) 0;
}

.guide-hero__sub { margin-bottom: var(--space-6); max-width: var(--measure); }

.guide-hero__media {
	aspect-ratio: 1408 / 768;
	background: var(--teal-050);
	border: 1px solid var(--border-hairline);
	overflow: hidden;
}

.guide-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Form (template-parts/guide-form.php) */
.guide-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: var(--measure);
}

.guide-form .formkit-fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.guide-form input[type="text"],
.guide-form input[type="email"] {
	width: 100%;
}

.guide-form .btn { width: 100%; }

.guide-form__note { font-size: 13px; color: var(--ink-500); margin: 0; }
.guide-form__small { font-size: 12px; color: var(--ink-500); margin: 0; }

/* Sections */
.guide-inside,
.guide-for,
.guide-about,
.guide-testimonials,
.guide-cta { padding: var(--space-9) 0; }

.guide-inside h2,
.guide-for h2,
.guide-cta h2 { text-align: center; }

.guide-inside__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-7);
}

.guide-card h3 { margin-bottom: var(--space-3); }
.guide-card p { margin: 0; }

/* Informational cards aren't links: no hover lift. */
.guide-card:hover { box-shadow: var(--shadow-resting); transform: none; }

.guide-for p,
.guide-testimonials .testimonial,
.guide-cta p { max-width: var(--measure-wide); margin-left: auto; margin-right: auto; }
.guide-for p,
.guide-testimonials,
.guide-cta { text-align: center; }

.guide-about {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: var(--space-7);
	align-items: center;
	max-width: var(--measure-wide);
	margin: 0 auto;
}

.guide-about__photo {
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--border-hairline);
	background: var(--teal-050);
}

.guide-about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.guide-cta .guide-form { margin: var(--space-6) auto 0; text-align: left; }

.guide-disclaimer {
	font-size: 13px;
	color: var(--ink-500);
	text-align: center;
	max-width: var(--measure-wide);
	margin: 0 auto;
	padding: var(--space-6) 0 var(--space-9);
	border-top: 1px solid var(--border-hairline);
}

/* Thank-you page */
/* Builds on .content-area.treatment-page (centred eyebrow + H1, measure-wide column). */
.thank-you-page {
	text-align: center;
	padding-top: var(--space-10);
	padding-bottom: var(--space-10);
}

.thank-you-page__download { margin: var(--space-6) 0 var(--space-4); }

.thank-you-page__meta {
	display: block;
	font-size: 13px;
	color: var(--ink-500);
	margin-top: var(--space-3);
}

.thank-you-page__note { font-size: 13px; color: var(--ink-500); margin: 0 auto; max-width: var(--measure); }
.thank-you-page__divider { width: 40px; margin: var(--space-9) auto; }
.thank-you-page__talk p { max-width: var(--measure); margin: 0 auto var(--space-5); }

@media (max-width: 900px) {
	.guide-inside__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
	.guide-hero { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-7) 0; }
	.guide-hero__media { order: -1; }
}

@media (max-width: 600px) {
	.guide-inside__grid { grid-template-columns: 1fr; }
	.guide-about { grid-template-columns: 1fr; gap: var(--space-5); }
	.guide-about__photo { max-width: 160px; }
	.thank-you-page { padding-top: var(--space-9); padding-bottom: var(--space-9); }
}